<template>
|
<BackgroundBoardLayout>
|
<template #leftBlock1>
|
<StatisticalBox :all-list="allList"></StatisticalBox>
|
</template>
|
<template #leftBlock2>
|
<MachineStartupRate></MachineStartupRate>
|
</template>
|
<template #leftBlock3>
|
<CountView :total-object="totalObject"></CountView>
|
</template>
|
<template #leftBlock4>
|
<OrderCompleteRadio
|
:order-complete-object="orderCompleteObject"
|
></OrderCompleteRadio>
|
</template>
|
<template #leftBlock5>
|
<WorkOrderProgress></WorkOrderProgress>
|
</template>
|
<template #leftBlock6>
|
<PerSonnelProductivity></PerSonnelProductivity>
|
</template>
|
<template #rightBlock1>
|
<DeviceChart></DeviceChart>
|
</template>
|
<template #rightBlock2>
|
<MaterialChart></MaterialChart>
|
</template>
|
<template #rightBlock3>
|
<BarChart></BarChart>
|
</template>
|
</BackgroundBoardLayout>
|
</template>
|
|
<script>
|
import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox";
|
import MachineStartupRate from "@/views/cockpitPage/components/MachineStartupRate";
|
import CountView from "@/views/cockpitPage/components/CountView";
|
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
|
import PerSonnelProductivity from "@/views/cockpitPage/components/PerSonnelProductivity.vue";
|
import DeviceChart from "@/views/cockpitPage/components/DeviceChart.vue";
|
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
|
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
|
import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
|
import WorkOrderProgress from "@/views/cockpitPage/components/WorkOrderProgress";
|
import { getDashboard } from "@/api/cockpitPage/index";
|
export default {
|
components: {
|
StatisticalBox,
|
BackgroundBoardLayout,
|
PerSonnelProductivity,
|
DeviceChart,
|
MaterialChart,
|
BarChart,
|
MachineStartupRate,
|
CountView,
|
OrderCompleteRadio,
|
WorkOrderProgress,
|
},
|
props: {},
|
data() {
|
return {
|
// 左上数据统计数据
|
allList: [
|
{ value: 0, label: "开机台数" },
|
{ value: 0, label: "总产量" },
|
{ value: 0, label: "生产工单数" },
|
{ value: 0, label: "延期交付" },
|
{ value: 0, label: "物料不足" },
|
{ value: 0, label: "计划达成率" },
|
],
|
// 左中数据统计对象
|
totalObject: {},
|
// 订单完成比率
|
orderCompleteObject: {
|
startIndex: 0,
|
orderCompleteList: [],
|
},
|
dataindex: 0,
|
};
|
},
|
mounted() {
|
this.getDashboard();
|
setInterval(() => {
|
this.getDashboard();
|
}, 300000);
|
},
|
watch: {},
|
methods: {
|
async getDashboard() {
|
await getDashboard().then((res) => {
|
console.log(res);
|
// 左上数值统计数据
|
this.setLeftBlock1(res.data);
|
// 左中数据统计值
|
this.setLeftBlock3(res.data);
|
// 订单完成比率
|
this.setLeftBlock4(res.data);
|
});
|
},
|
// 处理左上数据
|
setLeftBlock1(data) {
|
this.allList.map((item) => {
|
if (item.label === "开机台数") {
|
item.value = data?.DeviceRunningAmount ?? 0;
|
} else if (item.label === "总产量") {
|
item.value = data?.TotalProductionAmount ?? 0;
|
} else if (item.label === "生产工单数") {
|
item.value = data?.WorkOrderAmount ?? 0;
|
} else if (item.label === "延期交付") {
|
item.value = data?.DelayWorkOrderAmount ?? 0;
|
} else if (item.label === "物料不足") {
|
item.value = data?.MaterialMissWorkOrderAmount ?? 0;
|
} else if (item.label === "计划达成率") {
|
item.value =
|
typeof data?.PlanOrderFinishRate === "string"
|
? parseFloat(
|
data?.PlanOrderFinishRate.length > 0
|
? data?.PlanOrderFinishRate
|
: "0"
|
)
|
: data?.PlanOrderFinishRate ?? 0;
|
}
|
});
|
},
|
// 左中数据统计值
|
setLeftBlock3(data) {
|
this.totalObject = {
|
InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
|
ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
|
OutPlanProductionAmount: data?.OutPlanProductionAmount ?? 0,
|
PlanProductionAmount: data?.PlanProductionAmount ?? 0,
|
RealExternalProductionAmount: data?.RealExternalProductionAmount ?? 0,
|
RealProductionAmount: data?.RealProductionAmount ?? 0,
|
};
|
},
|
// 订单完成比率
|
setLeftBlock4(data) {
|
this.orderCompleteObject.startIndex = 0;
|
// 此处后面会替换成真实后端返回数据
|
if (this.dataindex == 1) {
|
this.orderCompleteObject.orderCompleteList = [
|
{ title: "SSSSDD19070047", radio: 20.6 },
|
{ title: "SDD19070048", radio: 79 },
|
{ title: "SDD19070049", radio: 100 },
|
{ title: "SDD19070050", radio: 30 },
|
{ title: "DD19070047", radio: 20.6 },
|
{ title: "DD19070048", radio: 49 },
|
{ title: "DD19070049", radio: 60 },
|
{ title: "SSDD19070050", radio: 10 },
|
{ title: "SDD19070047", radio: 33.6 },
|
{ title: "DD19070048", radio: 69 },
|
{ title: "SDD19070049", radio: 70 },
|
{ title: "DD19070050", radio: 20 },
|
{ title: "SDD19070047", radio: 66.6 },
|
{ title: "DD19070048", radio: 46 },
|
];
|
this.dataindex = 0;
|
} else {
|
this.orderCompleteObject.orderCompleteList = [
|
{ title: "fffffDD19070047", radio: 50.6 },
|
{ title: "DD19070043", radio: 89 },
|
{ title: "DD15566649", radio: 100 },
|
{ title: "ASD5555550", radio: 30 },
|
{ title: "DD19070047", radio: 30.6 },
|
{ title: "DD19070048", radio: 49 },
|
{ title: "DD19070049", radio: 60 },
|
{ title: "DD19070050", radio: 10 },
|
{ title: "DD19070047", radio: 33.6 },
|
{ title: "DD19070048", radio: 69 },
|
{ title: "DD19070049", radio: 70 },
|
{ title: "DD19070050", radio: 20 },
|
{ title: "DD19070047", radio: 66.6 },
|
{ title: "DD19070048", radio: 96 },
|
];
|
this.dataindex = 1;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss"></style>
|
