From f5976f38c33048020de1b116ffa004b0d889a14d Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期二, 05 十二月 2023 17:38:45 +0800 Subject: [PATCH] 车间正品率、工单进度统计、其他样式处理 --- src/views/cockpitPage/components/WorkOrderProgress.vue | 6 + src/views/cockpitPage/components/BarChart.vue | 78 +++++++++++++------ src/views/cockpitPage/components/CountView.vue | 41 ++++++++- src/views/cockpitPage/components/OrderCompleteRadio.vue | 4 - src/views/cockpitPage/index.vue | 38 +++++++- src/views/cockpitPage/components/MachineStartupRate.vue | 16 +-- 6 files changed, 131 insertions(+), 52 deletions(-) diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue index 3ca2077..5f9262d 100644 --- a/src/views/cockpitPage/components/BarChart.vue +++ b/src/views/cockpitPage/components/BarChart.vue @@ -15,42 +15,66 @@ import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue"; //寮曞叆echart import * as echarts from "echarts"; +let myChart; export default { components: { ChartTitle, }, - props: {}, + props: { + chartData: { + type: Object, + require: true, + default: () => { + return { + total: 0, + rate: "0", + datax: [], + datay: [], + datay2: [], + }; + }, + }, + }, data() { return { - chartData: { - total: 1000, - rate: "99%", - datax: [ - "绗竴杞﹂棿", - "绗簩杞﹂棿", - "绗笁杞﹂棿", - "绗洓杞﹂棿", - "绗簲杞﹂棿", - "绗叚杞﹂棿", - "绗竷杞﹂棿", - "绗叓杞﹂棿", - "绗節杞﹂棿", - ], - datay: [120, 200, 150, 180, 170, 150, 130, 180, 140], - datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40], - }, + // chartData: { + // total: 1000, + // rate: "99%", + // datax: [ + // "绗竴杞﹂棿", + // "绗簩杞﹂棿", + // "绗笁杞﹂棿", + // "绗洓杞﹂棿", + // "绗簲杞﹂棿", + // "绗叚杞﹂棿", + // "绗竷杞﹂棿", + // "绗叓杞﹂棿", + // "绗節杞﹂棿", + // ], + // datay: [120, 200, 150, 180, 170, 150, 130, 180, 140], + // datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40], + // }, + chartTimer: null, }; }, - mounted() { - this.pieChart("chart", this.chartData); + watch: { + "chartData.datay"(val) { + this.pieChart("chart", this.chartData); + }, }, - watch: {}, + mounted() { + // this.pieChart("chart", this.chartData); + }, methods: { //鍦ㄨ亴 pieChart(chartName, data) { let that = this; + clearInterval(this.chartTimer); let chartDom = this.$refs[chartName]; - let myChart = echarts.init(chartDom); + if (myChart != null && myChart != "" && myChart != undefined) { + myChart.dispose(); //閿�姣� + } + myChart = echarts.init(chartDom); let option; let lineColor = "#35ddc74d"; if (data) { @@ -145,11 +169,16 @@ }, }, axisLabel: { - // rotate:45, margin: 10, show: true, textStyle: { color: "#00FFFF", + }, + formatter: function (value) { + if (value.length > 5) { + return `${value.slice(0, 4)}...`; + } + return value; }, }, data: data.datax ? data.datax : [], @@ -159,7 +188,6 @@ { type: "value", name: "", - // min: data.yAxis[0].min?data.yAxis.min:0, minInterval: 1, //鍧愭爣杞存槸鏁存暟 max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3 interval: @@ -254,7 +282,7 @@ }, ], }; - setInterval(function () { + this.chartTimer = setInterval(function () { // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� if (option.dataZoom[0].endValue == that.chartData.datay.length) { option.dataZoom[0].startValue = 0; diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue index f8c97b5..ca11420 100644 --- a/src/views/cockpitPage/components/CountView.vue +++ b/src/views/cockpitPage/components/CountView.vue @@ -7,7 +7,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.InternalDeviceRunningAmount + "鍙�" }} + <span class="value-span"> + {{ totalObject.InternalDeviceRunningAmount + "" }} + </span> + <span class="unit-span">鍙�</span> </div> </div> </div> @@ -17,7 +20,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.ExternalDeviceRunningAmount + "鍙�" }} + <span class="value-span">{{ + totalObject.ExternalDeviceRunningAmount + }}</span> + <span>鍙�</span> </div> </div> </div> @@ -29,7 +35,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.OutPlanProductionAmount + "浠�" }} + <span class="value-span">{{ + totalObject.OutPlanProductionAmount + }}</span> + <span>浠�</span> </div> </div> </div> @@ -39,7 +48,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.PlanProductionAmount + "浠�" }} + <span class="value-span">{{ + totalObject.PlanProductionAmount + }}</span> + <span>浠�</span> </div> </div> </div> @@ -51,7 +63,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.RealExternalProductionAmount + "浠�" }} + <span class="value-span">{{ + totalObject.RealExternalProductionAmount + }}</span> + <span>浠�</span> </div> </div> </div> @@ -61,7 +76,10 @@ </div> <div class="value-view"> <div class="title-margin-left"> - {{ totalObject.RealProductionAmount + "浠�" }} + <span class="value-span">{{ + totalObject.RealProductionAmount + }}</span> + <span>浠�</span> </div> </div> </div> @@ -147,6 +165,17 @@ border-radius: 5px; .title-margin-left { margin-left: 45px; + // white-space: nowrap; + display: flex; + align-items: center; + .value-span { + margin-top: 5px; + height: 100%; + max-width: 3em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } } } diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue index e9eed89..0daa82e 100644 --- a/src/views/cockpitPage/components/MachineStartupRate.vue +++ b/src/views/cockpitPage/components/MachineStartupRate.vue @@ -16,6 +16,7 @@ <script> //寮曞叆echart import * as echarts from "echarts"; +let myChart; export default { components: {}, props: { @@ -27,20 +28,17 @@ data() { return {}; }, - mounted() { - // let chartData = [ - // { value: 20, name: "闂茬疆" }, - // { value: 20, name: "缁翠慨" }, - // { value: 60, name: "宸ヤ綔" }, - // ]; - // this.pieChart("chart", chartData); - }, + mounted() {}, watch: {}, methods: { //鍦ㄨ亴 pieChart(chartName, data) { let chartDom = this.$refs[chartName]; - let myChart = echarts.init(chartDom); + + if (myChart != null && myChart != "" && myChart != undefined) { + myChart.dispose(); //閿�姣� + } + myChart = echarts.init(chartDom); let img = "/cockpitPage/machine-chart-bg.png"; let option; if (data) { diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue index 5993877..9d447b0 100644 --- a/src/views/cockpitPage/components/OrderCompleteRadio.vue +++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue @@ -64,14 +64,10 @@ this.startIndex + 4 ); }, - // set(val) { - // console.log(val); - // }, }, }, watch: { "orderCompleteObject.orderCompleteList"(val) { - // 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 16ae3c4..8370f3e 100644 --- a/src/views/cockpitPage/components/WorkOrderProgress.vue +++ b/src/views/cockpitPage/components/WorkOrderProgress.vue @@ -5,7 +5,7 @@ <img src="/cockpitPage/work-order-top.png" alt="" /> <div class="top-title"> <span>宸ュ崟杩涘害缁熻</span> - <span class="top-rate">{{ "60%" }}</span> + <span class="top-rate">{{ workOrderFinishRate + "%" }}</span> </div> </div> <div class="table-box"> @@ -101,6 +101,10 @@ type: Array, default: () => [], }, + workOrderFinishRate: { + type: String, + default: "", + }, }, data() { return { diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue index e63f212..2c88af8 100644 --- a/src/views/cockpitPage/index.vue +++ b/src/views/cockpitPage/index.vue @@ -18,7 +18,10 @@ ></OrderCompleteRadio> </template> <template #leftBlock5> - <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress> + <WorkOrderProgress + :work-order-finish-rate="workOrderFinishRate" + :table-data="workOrderData" + ></WorkOrderProgress> </template> <template #leftBlock6> <PerSonnelProductivity @@ -33,7 +36,7 @@ <MaterialChart :chartData="materialChartData"></MaterialChart> </template> <template #rightBlock3> - <BarChart></BarChart> + <BarChart :chartData="barChartData"></BarChart> </template> </BackgroundBoardLayout> </template> @@ -91,6 +94,7 @@ }, // 宸ュ崟杩涘害缁熻 workOrderData: [], + workOrderFinishRate: "", // 浜哄憳鐢熶骇鏁堢巼 perSonnelChartData: { datax: [], @@ -106,13 +110,18 @@ datax: [], datay: [], }, + // 杞﹂棿姝e搧鐜� + barChartData: { + total: 0, + rate: "0", + datax: [], + datay: [], + datay2: [], + }, }; }, mounted() { this.getDashboard(); - // setInterval(() => { - // this.getDashboard(); - // }, 30000); }, watch: {}, methods: { @@ -136,11 +145,13 @@ this.setRightBlock1(res.data); // 鐗╂枡闇�姹傜粺璁� this.setRightBlock2(res.data); + // 杞﹂棿姝e搧鐜� + this.setRightBlock3(res.data); }) .finally(() => { setTimeout(() => { this.getDashboard(); - }, 30000); + }, 300000); }); }, // 澶勭悊宸︿笂鏁版嵁 @@ -215,6 +226,7 @@ }, // 宸ュ崟杩涘害缁熻 setLeftBlock5(data) { + this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0"; let list = data.WorkOrderStats.map((item) => { let completeProgerss = []; for (let i = 0; i < item.ProcedureNum; i++) { @@ -246,7 +258,6 @@ this.perSonnelChartData.datax.push(item.Name); this.perSonnelChartData.datay.push(parseFloat(item.Value)); }); - console.log(this.perSonnelChartData.datay); // 浜哄憳鎶�鑳介ゼ鍥� let chartData2 = []; chartData2 = data.WorkerTypeStats.map((item) => { @@ -275,6 +286,19 @@ this.materialChartData.datay.push(parseFloat(item.Value)); }); }, + // 杞﹂棿姝e搧鐜� + 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)); + }); + }, }, }; </script> -- Gitblit v1.8.0