From 8d1a8a22ff13bab740ff3c427eb531fd6ce97844 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期二, 05 十二月 2023 15:26:12 +0800 Subject: [PATCH] 机器开机率、工单进度统计、设备负荷比接口联调 --- src/views/cockpitPage/components/WorkOrderProgress.vue | 351 +++++++++++++++++----------------- src/views/cockpitPage/components/DeviceChart.vue | 77 +++++-- src/views/cockpitPage/components/OrderCompleteRadio.vue | 8 src/views/cockpitPage/index.vue | 134 +++++++++---- src/views/cockpitPage/components/MachineStartupRate.vue | 21 + 5 files changed, 338 insertions(+), 253 deletions(-) diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue index ec25403..faf08b0 100644 --- a/src/views/cockpitPage/components/DeviceChart.vue +++ b/src/views/cockpitPage/components/DeviceChart.vue @@ -15,40 +15,66 @@ <script> //寮曞叆echart import * as echarts from "echarts"; +let myChart; export default { components: {}, - props: {}, + props: { + chartData: { + type: Object, + require: true, + default: () => { + return { + datax: [], + datay: [], + }; + }, + }, + // xdata: { + // type: Array, + // require: true, + // }, + // ydata: { + // type: Array, + // require: true, + // }, + }, data() { return { - chartData: { - datax: [ - "璁惧1", - "璁惧2", - "璁惧3", - "璁惧4", - "璁惧5", - "璁惧6", - "璁惧7", - "璁惧8", - "璁惧9", - ], - datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48], - }, + // chartData: { + // datax: [], + // datay: [], + // }, + startValue: 0, + endValue: 5, }; }, - mounted() { - this.pieChart("chart", this.chartData); + watch: { + "chartData.datay"(val) { + console.log(val, "ddddddddddddddd"); + this.ydata = val; + this.startValue = 0; + this.endValue = 5; + this.pieChart("chart", this.chartData); + }, }, - watch: {}, + mounted() { + // this.pieChart("chart", this.chartData); + }, methods: { //鍦ㄨ亴 pieChart(chartName, data) { let that = this; let chartDom = this.$refs[chartName]; - let myChart = echarts.init(chartDom); + if (myChart != null && myChart != "" && myChart != undefined) { + console.log("222222222"); + myChart.dispose(); //閿�姣� + myChart.resize(); + } + console.log(myChart, "ssssssss"); + myChart = echarts.init(chartDom); let option; let lineColor = "#35ddc74d"; - if (data) { + if (this.ydata) { option = { color: ["#00FFFF", "#dcb018"], tooltip: { @@ -68,8 +94,8 @@ type: "inside", yAxisIndex: 0, show: false, - startValue: 0, // 浠庡ご寮�濮� - endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� + startValue: that.startValue, // 浠庡ご寮�濮� + endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓� }, ], legend: { @@ -177,10 +203,9 @@ }; setInterval(function () { - // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� - if (option.dataZoom[0].endValue == that.chartData.datay.length) { - option.dataZoom[0].startValue = 0; - option.dataZoom[0].endValue = 5; + if (option.dataZoom[0].endValue == data.datay.length) { + option.dataZoom[0].startValue = that.startValue; + option.dataZoom[0].endValue = that.endValue; } else { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue index 051f94d..e9eed89 100644 --- a/src/views/cockpitPage/components/MachineStartupRate.vue +++ b/src/views/cockpitPage/components/MachineStartupRate.vue @@ -5,7 +5,7 @@ <img src="/cockpitPage/machine-top.png" alt="" /> <div class="top-title"> <span>鏈哄櫒寮�鏈虹巼</span> - <span class="top-rate">{{ "60%" }}</span> + <span class="top-rate">{{ startupRate + "%" }}</span> </div> </div> <div class="chart" ref="chart"></div> @@ -18,17 +18,22 @@ import * as echarts from "echarts"; export default { components: {}, - props: {}, + props: { + startupRate: { + type: String, + default: "", + }, + }, data() { return {}; }, mounted() { - let chartData = [ - { value: 20, name: "闂茬疆" }, - { value: 20, name: "缁翠慨" }, - { value: 60, name: "宸ヤ綔" }, - ]; - this.pieChart("chart", chartData); + // let chartData = [ + // { value: 20, name: "闂茬疆" }, + // { value: 20, name: "缁翠慨" }, + // { value: 60, name: "宸ヤ綔" }, + // ]; + // this.pieChart("chart", chartData); }, watch: {}, methods: { diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue index af4ccc2..5993877 100644 --- a/src/views/cockpitPage/components/OrderCompleteRadio.vue +++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue @@ -64,14 +64,14 @@ this.startIndex + 4 ); }, - set(val) { - console.log(val); - }, + // set(val) { + // console.log(val); + // }, }, }, watch: { "orderCompleteObject.orderCompleteList"(val) { - console.log(val, "ssssssssss"); + // console.log(val, "ssssssssss"); this.startIndex = this.orderCompleteObject.startIndex; }, }, diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue index 22613f6..16ae3c4 100644 --- a/src/views/cockpitPage/components/WorkOrderProgress.vue +++ b/src/views/cockpitPage/components/WorkOrderProgress.vue @@ -16,35 +16,35 @@ height="100%" > <el-table-column - prop="workOrderId" + prop="Number" label="宸ュ崟缂栧彿" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="product" + prop="Product" label="浜у搧" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="productSpecs" + prop="Scale" label="浜у搧瑙勬牸" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="amount" + prop="Amount" label="鐢熶骇鏁伴噺" align="center" show-overflow-tooltip > </el-table-column> <el-table-column - prop="planTime" + prop="PlanTime" label="璁″垝鏃堕棿" align="center" min-width="100" @@ -55,7 +55,7 @@ <template slot-scope="scope"> <div class="progerss-bg"> <div - v-for="item in scope.row.completeProgerss" + v-for="(item, index) in scope.row.completeProgerss" class="progerss" :class=" item.status == 1 @@ -73,16 +73,16 @@ </el-table-column> <el-table-column label="寤舵湡棰勮" align="center"> <template slot-scope="scope"> - <div v-show="scope.row.delayWarning > 0" class="round-view"> + <div v-show="scope.row.DelayDays > 0" class="round-view"> <div class="round red-bg"></div> <div class="title red-color"> - {{ scope.row.delayWarning + "澶�" }} + {{ scope.row.DelayDays + "澶�" }} </div> </div> - <div v-show="scope.row.delayWarning < 0" class="round-view"> + <div v-show="scope.row.DelayDays < 0" class="round-view"> <div class="round green-bg"></div> <div class="title green-color"> - {{ scope.row.delayWarning + "澶�" }} + {{ scope.row.DelayDays + "澶�" }} </div> </div> </template> @@ -96,171 +96,176 @@ <script> export default { components: {}, - props: {}, + props: { + tableData: { + type: Array, + default: () => [], + }, + }, data() { return { - tableData: [ - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 3, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 2, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: -2, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "A5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "BA5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - { - workOrderId: "BA5435", - product: "浜у搧1", - productSpecs: "瑙勬牸", - amount: "2000", - planTime: "02-23~05-23", - completeProgerss: [ - { status: 1 }, - { status: 1 }, - { status: 2 }, - { status: 0 }, - ], - delayWarning: 0, - }, - ], + // tableData: [ + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 3, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 2, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: -2, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "A5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "BA5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // { + // Number: "BA5435", + // Product: "浜у搧1", + // Scale: "瑙勬牸", + // Amount: "2000", + // PlanTime: "02-23~05-23", + // completeProgerss: [ + // { status: 1 }, + // { status: 1 }, + // { status: 2 }, + // { status: 0 }, + // ], + // DelayDays: 0, + // }, + // ], }; }, mounted() { diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue index 449e7a8..286e86a 100644 --- a/src/views/cockpitPage/index.vue +++ b/src/views/cockpitPage/index.vue @@ -4,7 +4,10 @@ <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> @@ -15,13 +18,13 @@ ></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> @@ -69,12 +72,26 @@ { 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, }; @@ -83,7 +100,7 @@ this.getDashboard(); setInterval(() => { this.getDashboard(); - }, 300000); + }, 30000); }, watch: {}, methods: { @@ -92,10 +109,16 @@ 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); }); }, // 澶勭悊宸︿笂鏁版嵁 @@ -123,6 +146,28 @@ } }); }, + // 鏈哄櫒寮�鏈虹巼鏁版嵁 + 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 = { @@ -137,44 +182,49 @@ // 璁㈠崟瀹屾垚姣旂巼 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); }, }, }; -- Gitblit v1.8.0