| | |
| | | <template> |
| | | <BackgroundBoardLayout> |
| | | <template #leftBlock1> |
| | | <StatisticalBox></StatisticalBox> |
| | | <StatisticalBox :all-list="allList"></StatisticalBox> |
| | | </template> |
| | | <template #leftBlock2> |
| | | <MachineStartupRate></MachineStartupRate> |
| | | <MachineStartupRate |
| | | ref="leftBlock2" |
| | | :startup-rate="startupRateString" |
| | | ></MachineStartupRate> |
| | | </template> |
| | | <template #leftBlock3> |
| | | <CountView></CountView> |
| | | <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 @should-reload="reloadAllData"></MaterialChart> |
| | | <MaterialChart :chartData="materialChartData"></MaterialChart> |
| | | </template> |
| | | <template #rightBlock3> |
| | | <BarChart @should-reload="reloadAllData"></BarChart> |
| | | <BarChart :chartData="barChartData"></BarChart> |
| | | </template> |
| | | </BackgroundBoardLayout> |
| | | </template> |
| | |
| | | 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 {}; |
| | | 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() {}, |
| | | mounted() { |
| | | this.getDashboard(); |
| | | }, |
| | | watch: {}, |
| | | methods: {}, |
| | | 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 = []; |
| | | 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) { |
| | | 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 }); |
| | | } |
| | | 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 = []; |
| | | 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(); |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |