| | |
| | | ></OrderCompleteRadio> |
| | | </template> |
| | | <template #leftBlock5> |
| | | <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress> |
| | | <WorkOrderProgress |
| | | :work-order-finish-rate="workOrderFinishRate" |
| | | :table-data="workOrderData" |
| | | ></WorkOrderProgress> |
| | | </template> |
| | | <template #leftBlock6> |
| | | <PerSonnelProductivity></PerSonnelProductivity> |
| | | <PerSonnelProductivity |
| | | ref="leftBlock6" |
| | | :chartData="perSonnelChartData" |
| | | ></PerSonnelProductivity> |
| | | </template> |
| | | <template #rightBlock1> |
| | | <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart> |
| | | </template> |
| | | <template #rightBlock2> |
| | | <MaterialChart></MaterialChart> |
| | | <MaterialChart :chartData="materialChartData"></MaterialChart> |
| | | </template> |
| | | <template #rightBlock3> |
| | | <BarChart></BarChart> |
| | | <BarChart :chartData="barChartData"></BarChart> |
| | | </template> |
| | | </BackgroundBoardLayout> |
| | | </template> |
| | |
| | | { value: 0, label: "总产量" }, |
| | | { value: 0, label: "生产工单数" }, |
| | | { value: 0, label: "延期交付" }, |
| | | { value: 0, label: "物料不足" }, |
| | | { value: 0, label: "物料不足/待排程" }, |
| | | { value: 0, label: "计划达成率" }, |
| | | ], |
| | | // 机器开机率 |
| | |
| | | }, |
| | | // 工单进度统计 |
| | | workOrderData: [], |
| | | workOrderFinishRate: "", |
| | | // 人员生产效率 |
| | | perSonnelChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | // 设备负荷对比 |
| | | deviceChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | dataindex: 0, |
| | | // 物料需求统计 |
| | | materialChartData: { |
| | | datax: [], |
| | | datay: [], |
| | | }, |
| | | // 车间正品率 |
| | | barChartData: { |
| | | total: 0, |
| | | rate: "0", |
| | | datax: [], |
| | | datay: [], |
| | | datay2: [], |
| | | }, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.getDashboard(); |
| | | setInterval(() => { |
| | | this.getDashboard(); |
| | | }, 30000); |
| | | }, |
| | | 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.setRightBlock1(res.data); |
| | | }); |
| | | 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) { |
| | |
| | | item.value = data?.WorkOrderAmount ?? 0; |
| | | } else if (item.label === "延期交付") { |
| | | item.value = data?.DelayWorkOrderAmount ?? 0; |
| | | } else if (item.label === "物料不足") { |
| | | } else if (item.label === "物料不足/待排程") { |
| | | item.value = data?.MaterialMissWorkOrderAmount ?? 0; |
| | | item.value1 = data?.WaitSchedulingWorkOrderAmount ?? 0; |
| | | } else if (item.label === "计划达成率") { |
| | | item.value = |
| | | let value = |
| | | typeof data?.PlanOrderFinishRate === "string" |
| | | ? parseFloat( |
| | | data?.PlanOrderFinishRate.length > 0 |
| | |
| | | : "0" |
| | | ) |
| | | : data?.PlanOrderFinishRate ?? 0; |
| | | item.value = value.toString() + "%"; |
| | | } |
| | | }); |
| | | }, |
| | |
| | | }, |
| | | // 左中数据统计值 |
| | | setLeftBlock3(data) { |
| | | console.log(this.setNumbers(data?.OutPlanProductionAmount ?? 0)); |
| | | this.totalObject = { |
| | | InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0, |
| | | InternalDeviceRunningAmount: ( |
| | | data?.InternalDeviceRunningAmount ?? 0 |
| | | ).toString(), |
| | | ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0, |
| | | OutPlanProductionAmount: data?.OutPlanProductionAmount ?? 0, |
| | | PlanProductionAmount: data?.PlanProductionAmount ?? 0, |
| | | RealExternalProductionAmount: data?.RealExternalProductionAmount ?? 0, |
| | | RealProductionAmount: data?.RealProductionAmount ?? 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; |
| | | if (data.OrderFinishRate && data.OrderFinishRate.length > 0) { |
| | | 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; |
| | | this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0"; |
| | | if (data.WorkOrderStats && data.WorkOrderStats.length > 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 }); |
| | | } |
| | | completeProgerss.push({ status: status }); |
| | | } |
| | | return { |
| | | ...item, |
| | | completeProgerss: completeProgerss, |
| | | }; |
| | | }); |
| | | this.workOrderData = list; |
| | | return { |
| | | ...item, |
| | | completeProgerss: completeProgerss, |
| | | }; |
| | | }); |
| | | this.workOrderData = list; |
| | | } |
| | | }, |
| | | // 人员生效效率比 人员技能 |
| | | setLeftBlock6(data) { |
| | | this.perSonnelChartData.datax = []; |
| | | this.perSonnelChartData.datay = []; |
| | | if (data.PersonnelProductivity && data.PersonnelProductivity.length > 0) { |
| | | data.PersonnelProductivity.map((item) => { |
| | | this.perSonnelChartData.datax.push(item.Name); |
| | | this.perSonnelChartData.datay.push(parseFloat(item.Value)); |
| | | }); |
| | | } |
| | | // 人员技能饼图 |
| | | let chartData2 = []; |
| | | if (data.WorkerTypeStats && data.WorkerTypeStats.length > 0) { |
| | | 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)); |
| | | }); |
| | | // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData); |
| | | if (data.DeviceLoad && data.DeviceLoad.length > 0) { |
| | | 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 = []; |
| | | if (data.MaterialRequirement && data.MaterialRequirement.length > 0) { |
| | | 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 = []; |
| | | if (data.WorkshopStats && data.WorkshopStats.length > 0) { |
| | | 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(); |
| | | } |
| | | }, |
| | | }, |
| | | }; |