update 质量-产品成品率

src/views/QualityManager/HomePage.vue

@@ -143,10 +143,10 @@
                 <div class="grow">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
-                    <new-line-stack />
+                    <new-line-stack :data-update-token="dataUpdateToken" />
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
-                      <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
+                      <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'; dataUpdateToken=''+Math.random()">日</span>
+                      <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'; dataUpdateToken=''+Math.random()">
                         月
                       </span>
                     </div>
@@ -281,6 +281,7 @@ export default {
     ]
 
     return {
+      dataUpdateToken: 'xx-token',
       plMode: 'a',
       dateMode: 'month',
       dateMode2: 'month',
@@ -423,7 +424,8 @@ export default {
 
 .quality-analysis__body__row-1 {
   height: calc(216px * var(--beilv));
-  overflow: hidden;
+  /* overflow: hidden; */
+  overflow: initial;
   display: flex;
   gap: calc(16px * var(--beilv));
 }

src/views/QualityManager/components/charts/newLineStack.vue

@@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
 export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
-  props: {},
+  props: {
+    dataUpdateToken: {
+      type: String,
+      default: 'default-token'
+    }
+  },
   data() {
     return {
       chart: null,
@@ -17,6 +22,7 @@ export default {
         color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
         tooltip: {
           trigger: 'axis',
+          extraCssText: 'width: 180px !important; ',
           axisPointer: {
             type: 'cross',
             label: {
@@ -24,9 +30,6 @@ export default {
             }
           }
         },
-        // legend: {
-        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-        // },
         grid: {
           top: '15%',
           left: '2%',
@@ -73,6 +76,7 @@ export default {
               show: false
             },
             axisLabel: {
+              formatter: '{value} %',
               textStyle: {
                 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
               }
@@ -114,7 +118,10 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [11, 199, 140, 63, 185, 5, 78]
+            data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              return v
+            })
           },
           {
             name: '磨边机',
@@ -145,7 +152,10 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [151, 57, 31, 7, 77, 88, 119]
+            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              return v
+            })
           },
           {
             name: '镀膜机',
@@ -176,7 +186,10 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [58, 3, 67, 100, 42, 96, 124]
+            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              return v
+            })
           },
           {
             name: '包装纸',
@@ -207,7 +220,10 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [92, 88, 122, 169, 108, 130, 147]
+            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              return v
+            })
           },
           {
             name: '丝印',
@@ -242,12 +258,22 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [44, 40, 118, 197, 123, 95, 96]
+            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
+              let v = Math.floor(Math.random() * 100)
+              return v
+            })
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataUpdateToken(val) {
+      this.refreshData()
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', function() {
       if (this.chart) {
@@ -263,7 +289,17 @@ export default {
       this.chart.resize()
     })
   },
-  methods: {}
+  methods: {
+    refreshData() {
+      this.configs.series.forEach(item => {
+        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
+          let v = Math.floor(Math.random() * 100)
+          return v
+        })
+      })
+      if (this.chart) this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
@@ -271,4 +307,8 @@ export default {
 .chartContainer >>> div {
   width: 100% !important;
 }
+
+.diy-linestack-tooltip {
+  color: red;
+}
 </style>