| | |
| | | <StatisticalBox :all-list="allList"></StatisticalBox> |
| | | </template> |
| | | <template #leftBlock2> |
| | | <MachineStartupRate></MachineStartupRate> |
| | | <MachineStartupRate |
| | | ref="leftBlock2" |
| | | :startup-rate="startupRateString" |
| | | ></MachineStartupRate> |
| | | </template> |
| | | <template #leftBlock3> |
| | | <CountView :total-object="totalObject"></CountView> |
| | |
| | | ></OrderCompleteRadio> |
| | | </template> |
| | | <template #leftBlock5> |
| | | <WorkOrderProgress></WorkOrderProgress> |
| | | <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress> |
| | | </template> |
| | | <template #leftBlock6> |
| | | <PerSonnelProductivity></PerSonnelProductivity> |
| | | </template> |
| | | <template #rightBlock1> |
| | | <DeviceChart></DeviceChart> |
| | | <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart> |
| | | </template> |
| | | <template #rightBlock2> |
| | | <MaterialChart></MaterialChart> |
| | |
| | | { value: 0, label: "物料不足" }, |
| | | { value: 0, label: "计划达成率" }, |
| | | ], |
| | | // 机器开机率 |
| | | startupRate: { |
| | | Total: 0, // 总机器数 |
| | | Running: 0, // 开机台数 |
| | | Maintenance: 0, // 维修中设备数 |
| | | }, |
| | | startupRateString: "0", // 开机率 |
| | | // 左中数据统计对象 |
| | | totalObject: {}, |
| | | // 订单完成比率 |
| | | orderCompleteObject: { |
| | | startIndex: 0, |
| | | orderCompleteList: [], |
| | | }, |
| | | // 工单进度统计 |
| | | workOrderData: [], |
| | | // 设备负荷对比 |
| | | deviceChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | dataindex: 0, |
| | | }; |
| | |
| | | this.getDashboard(); |
| | | setInterval(() => { |
| | | this.getDashboard(); |
| | | }, 300000); |
| | | }, 30000); |
| | | }, |
| | | watch: {}, |
| | | methods: { |
| | |
| | | console.log(res); |
| | | // 左上数值统计数据 |
| | | this.setLeftBlock1(res.data); |
| | | // 机器开机率数据 |
| | | this.setleftBlock2(res.data); |
| | | // 左中数据统计值 |
| | | this.setLeftBlock3(res.data); |
| | | // 订单完成比率 |
| | | this.setLeftBlock4(res.data); |
| | | // 工单进度统计 |
| | | this.setLeftBlock5(res.data); |
| | | // 设备负荷对比 |
| | | this.setRightBlock1(res.data); |
| | | }); |
| | | }, |
| | | // 处理左上数据 |
| | |
| | | } |
| | | }); |
| | | }, |
| | | // 机器开机率数据 |
| | | 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) { |
| | | this.totalObject = { |
| | |
| | | // 订单完成比率 |
| | | 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; |
| | | } |
| | | this.orderCompleteObject.orderCompleteList = []; |
| | | let list = data.OrderFinishRate.map((item) => { |
| | | return { |
| | | title: item.Name, |
| | | radio: parseFloat(item.Value), |
| | | }; |
| | | }); |
| | | this.orderCompleteObject.orderCompleteList = list; |
| | | }, |
| | | // 工单进度统计 |
| | | setLeftBlock5(data) { |
| | | 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; |
| | | }, |
| | | // 设备负荷对比 |
| | | 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)); |
| | | }); |
| | | // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData); |
| | | }, |
| | | }, |
| | | }; |