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