export default function (context, payload) {
const { $luban, $service } = payload.options;
const { period, currency, unit, industry, lv1, lv2 } = payload.search;
initLine($luban, $service, {
"发货料本": {},
"存货结转": {},
"存货余额": {},
"超规模存货": {},
"存货ITO": {},
}); // 初始化折线图
const params = {
queryFlag: "card",
period: period,
pdtOrgCodeList: [lv2 || lv1 || industry],
currencyType: currency,
unit: unit,
};
console.log(params, "请求参数-绩效卡片");
$service.network
.post(
`services/api/dynamic/ictfinancialreportinventory/querysalesinventoryperformance`,
params
)
.then((res) => {
console.log(res, "绩效卡片数据");
if (!res.data) {
return;
}
initCardData(res.data, period, payload);
initLineData(res.data, period, payload);
});
}
// 数值渲染
function initCardData(data, period, payload) {
const { $luban, $service } = payload.options;
let cardData1 = {};
let cardData2 = {};
let cardData3 = {};
let cardData4 = {};
let cardData5 = {};
data.forEach((item) => {
if (item.data_type === "发货料本" && item.bucket_desc === period) {
cardData1.month = item.month_amt;
cardData1.cumulative = item.year_amt;
} else if (item.data_type === "存货结转" && item.bucket_desc === period) {
cardData2.month = item.month_amt;
cardData2.cumulative = item.year_amt;
} else if (item.data_type === "存货余额" && item.bucket_desc === period) {
cardData3.month = item.month_amt;
} else if (item.data_type === "超长期存货" && item.bucket_desc === period) {
cardData4.month = item.month_amt;
} else if (item.data_type === "存货ITO" && item.bucket_desc === period) {
cardData5.month = item.month_amt;
}
});
Object.keys(cardData1).forEach((key) => {
$service.setting.Vue.set(
$luban.model.pageModel.cardData1,
key,
cardData1[key]
);
});
Object.keys(cardData2).forEach((key) => {
$service.setting.Vue.set(
$luban.model.pageModel.cardData2,
key,
cardData2[key]
);
});
Object.keys(cardData3).forEach((key) => {
$service.setting.Vue.set(
$luban.model.pageModel.cardData3,
key,
cardData3[key]
);
});
Object.keys(cardData4).forEach((key) => {
$service.setting.Vue.set(
$luban.model.pageModel.cardData4,
key,
cardData4[key]
);
});
Object.keys(cardData5).forEach((key) => {
$service.setting.Vue.set(
$luban.model.pageModel.cardData5,
key,
cardData5[key]
);
});
}
// 折线图渲染
function initLineData(data, period, payload) {
const { $luban, $service } = payload.options;
// 按 data_type 划分数据
const groupedData = {};
data.forEach((item) => {
const dataType = item.data_type;
if (!groupedData[dataType]) {
groupedData[dataType] = [];
}
groupedData[dataType].push(item);
});
// 处理每个分组的数据
const result = {};
for (const [dataType, items] of Object.entries(groupedData)) {
const rows = [];
for (let i = 1; i <= 12; i++) {
const monthStr = i.toString().padStart(2, "0");
const bucketDesc = `2025${monthStr}`;
const foundItem = items.find((item) => item.bucket_desc === bucketDesc);
const monthAmt = foundItem ? foundItem.month_amt || "-" : "-";
const yearAmt = foundItem ? foundItem.year_amt || "-" : "-";
rows.push({
日期: `${i}月`,
当月: monthAmt.toString(),
累计: yearAmt.toString(),
});
}
result[dataType] = {
unitName: $luban.model.pageModel.unit.unitName,
columns: ["日期", "当月", "累计"],
extendConfig: {},
rows,
};
}
initLine($luban, $service,result);
}
function initLine($luban, $service,result) {
const noneData = {
unitName: $luban.model.pageModel.unit.unitName,
columns: ["日期", "当月", "累计"],
extendConfig: {},
rows: Array.from({ length: 12 }, (_, i) => ({
日期: `${i + 1}月`,
当月: "-",
累计: "-",
})),
};
// 定义数据类型与对应模型的映射
const typeModelMap = {
发货料本: $luban.model.pageModel.lineChartDate1,
存货结转: $luban.model.pageModel.lineChartDate2,
存货余额: $luban.model.pageModel.lineChartDate3,
超长期存货: $luban.model.pageModel.lineChartDate4,
存货ITO: $luban.model.pageModel.lineChartDate5,
};
// 批量设置数据
for (const [dataType, model] of Object.entries(typeModelMap)) {
if (result[dataType]) {
for (const [key, value] of Object.entries(result[dataType])) {
if (dataType === "存货ITO" && key === "unitName") {
$service.setting.Vue.set(model, key, "天");
return;
}
$service.setting.Vue.set(model, key, value);
}
} else {
for (const [key, value] of Object.entries(noneData)) {
if (dataType === "存货ITO" && key === "unitName") {
$service.setting.Vue.set(model, key, "天");
return;
}
$service.setting.Vue.set(model, key, value);
}
}
}
}
优化以上代码，接口无数据或无某个data_type时，折线图默认展示空数据
最新发布
修复Vue组件中this.$options.data()报错问题
在Vue开发过程中，遇到在data函数内部引用this上的数据导致使用this.$options.data()时报错。解决方法是通过使用this.$options.data.call(this)来重新绑定上下文，确保this指向当前组件。这样可以正确地访问和初始化组件的数据。
扫一扫
5929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
