<template>
|
<BackgroundBoardLayout>
|
<template #leftBlock1>
|
<StatisticalBox :all-list="allList"></StatisticalBox>
|
</template>
|
<template #leftBlock2>
|
<MachineStartupRate
|
ref="leftBlock2"
|
:startup-rate="startupRateString"
|
></MachineStartupRate>
|
</template>
|
<template #leftBlock3>
|
<CountView :total-object="totalObject"></CountView>
|
</template>
|
<template #leftBlock4>
|
<OrderCompleteRadio
|
:order-complete-object="orderCompleteObject"
|
></OrderCompleteRadio>
|
</template>
|
<template #leftBlock5>
|
<WorkOrderProgress
|
:work-order-finish-rate="workOrderFinishRate"
|
:table-data="workOrderData"
|
></WorkOrderProgress>
|
</template>
|
<template #leftBlock6>
|
<PerSonnelProductivity
|
ref="leftBlock6"
|
:chartData="perSonnelChartData"
|
></PerSonnelProductivity>
|
</template>
|
<template #rightBlock1>
|
<DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
|
</template>
|
<template #rightBlock2>
|
<MaterialChart :chartData="materialChartData"></MaterialChart>
|
</template>
|
<template #rightBlock3>
|
<BarChart :chartData="barChartData"></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: "计划达成率" },
|
],
|
// 机器开机率
|
startupRate: {
|
Total: 0, // 总机器数
|
Running: 0, // 开机台数
|
Maintenance: 0, // 维修中设备数
|
},
|
startupRateString: "0", // 开机率
|
// 左中数据统计对象
|
totalObject: {},
|
// 订单完成比率
|
orderCompleteObject: {
|
startIndex: 0,
|
orderCompleteList: [],
|
},
|
// 工单进度统计
|
workOrderData: [],
|
workOrderFinishRate: "",
|
// 人员生产效率
|
perSonnelChartData: {
|
datax: [],
|
datay: [],
|
},
|
// 设备负荷对比
|
deviceChartData: {
|
datax: [],
|
datay: [],
|
},
|
// 物料需求统计
|
materialChartData: {
|
datax: [],
|
datay: [],
|
},
|
// 车间正品率
|
barChartData: {
|
total: 0,
|
rate: "0",
|
datax: [],
|
datay: [],
|
datay2: [],
|
},
|
};
|
},
|
mounted() {
|
this.getDashboard();
|
},
|
watch: {},
|
methods: {
|
async getDashboard() {
|
await getDashboard()
|
.then((res) => {
|
console.log(res);
|
// 左上数值统计数据
|
this.setLeftBlock1(res.data);
|
// 机器开机率数据
|
this.setleftBlock2(res.data);
|
// 左中数据统计值
|
this.setLeftBlock3(res.data);
|
// 订单完成比率
|
this.setLeftBlock4(res.data);
|
// 工单进度统计
|
this.setLeftBlock5(res.data);
|
// 人员生效效率比 人员技能
|
this.setLeftBlock6(res.data);
|
// 设备负荷对比
|
this.setRightBlock1(res.data);
|
// 物料需求统计
|
this.setRightBlock2(res.data);
|
// 车间正品率
|
this.setRightBlock3(res.data);
|
})
|
.finally(() => {
|
setTimeout(() => {
|
this.getDashboard();
|
}, 300000);
|
});
|
},
|
// 处理左上数据
|
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;
|
item.value1 = data?.WaitSchedulingWorkOrderAmount ?? 0;
|
} else if (item.label === "计划达成率") {
|
let value =
|
typeof data?.PlanOrderFinishRate === "string"
|
? parseFloat(
|
data?.PlanOrderFinishRate.length > 0
|
? data?.PlanOrderFinishRate
|
: "0"
|
)
|
: data?.PlanOrderFinishRate ?? 0;
|
item.value = value.toString() + "%";
|
}
|
});
|
},
|
// 机器开机率数据
|
setleftBlock2(data) {
|
this.startupRate = {
|
Total: data?.TotalDeviceAmount ?? 0,
|
Running: data?.DeviceRunningAmount ?? 0,
|
Maintenance: data?.InMaintenanceDeviceAmount ?? 0,
|
};
|
// 开机率
|
let setsInUse = (this.startupRate.Running / this.startupRate.Total) * 100;
|
this.startupRateString = setsInUse.toFixed(1).toString();
|
// 维修率
|
let maintenanceRate =
|
(this.startupRate.Maintenance / this.startupRate.Total) * 100;
|
// 闲置率
|
let idle = 100 - setsInUse - maintenanceRate;
|
let chartData = [
|
{ value: idle.toFixed(1), name: "闲置" },
|
{ value: maintenanceRate.toFixed(1), name: "维修" },
|
{ value: setsInUse.toFixed(1), name: "工作" },
|
];
|
this.$refs.leftBlock2.pieChart("chart", chartData);
|
},
|
// 左中数据统计值
|
setLeftBlock3(data) {
|
console.log(this.setNumbers(data?.OutPlanProductionAmount ?? 0));
|
this.totalObject = {
|
InternalDeviceRunningAmount: (
|
data?.InternalDeviceRunningAmount ?? 0
|
).toString(),
|
ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
|
OutPlanProductionAmount: this.setNumbers(
|
data?.OutPlanProductionAmount ?? 0
|
),
|
PlanProductionAmount: this.setNumbers(data?.PlanProductionAmount ?? 0),
|
RealExternalProductionAmount: this.setNumbers(
|
data?.RealExternalProductionAmount ?? 0
|
),
|
RealProductionAmount: this.setNumbers(data?.RealProductionAmount ?? 0),
|
};
|
},
|
// 订单完成比率
|
setLeftBlock4(data) {
|
this.orderCompleteObject.startIndex = 0;
|
this.orderCompleteObject.orderCompleteList = [];
|
let list = data.OrderFinishRate.map((item) => {
|
return {
|
title: item.Name,
|
radio: parseFloat(item.Value),
|
};
|
});
|
this.orderCompleteObject.orderCompleteList = list;
|
},
|
// 工单进度统计
|
setLeftBlock5(data) {
|
this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0";
|
let list = data.WorkOrderStats.map((item) => {
|
let completeProgerss = [];
|
for (let i = 0; i < item.ProcedureNum; i++) {
|
let status = 0;
|
if (i < item.FinishProcedureNum) {
|
status = 1;
|
} else if (
|
i >= item.FinishProcedureNum &&
|
i < item.FinishProcedureNum + item.ProcessingProcedureNum
|
) {
|
status = 2;
|
} else {
|
status = 0;
|
}
|
completeProgerss.push({ status: status });
|
}
|
return {
|
...item,
|
completeProgerss: completeProgerss,
|
};
|
});
|
this.workOrderData = list;
|
},
|
// 人员生效效率比 人员技能
|
setLeftBlock6(data) {
|
this.perSonnelChartData.datax = [];
|
this.perSonnelChartData.datay = [];
|
data.PersonnelProductivity.map((item) => {
|
this.perSonnelChartData.datax.push(item.Name);
|
this.perSonnelChartData.datay.push(parseFloat(item.Value));
|
});
|
// 人员技能饼图
|
let chartData2 = [];
|
chartData2 = data.WorkerTypeStats.map((item) => {
|
return {
|
name: item.Name,
|
value: parseFloat(item.Value),
|
};
|
});
|
this.$refs.leftBlock6.getChartRight("chart2", chartData2);
|
},
|
// 设备负荷对比
|
setRightBlock1(data) {
|
this.deviceChartData.datax = [];
|
this.deviceChartData.datay = [];
|
data.DeviceLoad.map((item) => {
|
this.deviceChartData.datax.push(item.Name);
|
this.deviceChartData.datay.push(parseFloat(item.Value));
|
});
|
},
|
// 物料需求统计
|
setRightBlock2(data) {
|
this.materialChartData.datax = [];
|
this.materialChartData.datay = [];
|
data.MaterialRequirement.map((item) => {
|
this.materialChartData.datax.push(item.Name);
|
this.materialChartData.datay.push(parseFloat(item.Value));
|
});
|
},
|
// 车间正品率
|
setRightBlock3(data) {
|
this.barChartData.total = data.TodayFinishAmount;
|
this.barChartData.rate = data.TodayQualifiedRate;
|
this.barChartData.datax = [];
|
this.barChartData.datay = [];
|
this.barChartData.datay2 = [];
|
data.WorkshopStats.map((item) => {
|
this.barChartData.datax.push(item.Name);
|
this.barChartData.datay.push(parseFloat(item.Qualified));
|
this.barChartData.datay2.push(parseFloat(item.Defective));
|
});
|
},
|
|
// 计算加工数 生产数
|
setNumbers(val) {
|
if (val > 1000 && val < 10000) {
|
let count = (val / 1000).toFixed(2);
|
return count.toString() + "千";
|
} else if (val >= 10000 && val < 100000) {
|
let count1 = (val / 10000).toFixed(2);
|
return count1.toString() + "万";
|
} else if (val >= 100000 && val < 1000000) {
|
let count1 = (val / 100000).toFixed(0);
|
return count1.toString() + "十万";
|
} else if (val >= 1000000 && val < 10000000) {
|
let count1 = (val / 1000000).toFixed(0);
|
return count1.toString() + "百万";
|
} else if (val >= 10000000 && val < 100000000) {
|
let count1 = (val / 10000000).toFixed(0);
|
return count1.toString() + "千万";
|
} else if (val >= 100000000 && val < 1000000000) {
|
let count1 = (val / 100000000).toFixed(2);
|
return count1 + "亿";
|
} else if (val >= 1000000000 && val < 10000000000) {
|
let count1 = (val / 1000000000).toFixed(0);
|
return count1.toString() + "十亿";
|
} else if (val >= 10000000000 && val < 100000000000) {
|
let count1 = (val / 10000000000).toFixed(0);
|
return count1.toString() + "百亿";
|
} else if (val >= 100000000000 && val < 1000000000000) {
|
let count1 = (val / 100000000000).toFixed(0);
|
return count1.toString() + "千亿";
|
} else if (val >= 1000000000000) {
|
let count1 = (val / 1000000000000).toFixed(0);
|
return count1.toString() + "万亿";
|
} else {
|
return val.toString();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss"></style>
|
