update 质量管理,产品成品率

src/views/QualityManager/HomePage.vue

@@ -184,7 +184,7 @@
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产品成品率</techy-analysis-header>
                     <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                      <new-line-stack :data-update-token="dataUpdateToken" />
+                      <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
                     </div>
                     <div class="date-select">
                       <span

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

@@ -10,6 +10,11 @@ export default {
   name: 'PlFaultAnalysisPieChart',
   mixins: [resize],
   props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => ['month', 'day'].indexOf(val) !== -1
+    },
     dataUpdateToken: {
       type: String,
       default: 'default-token'
@@ -37,25 +42,28 @@ export default {
           bottom: '5%',
           containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            axisLine: {
-              lineStyle: {
-                color: '#ffffff66'
-              }
-            },
-            axisTick: { show: false },
-            axisLabel: {
-              textStyle: {
-                color: 'rgba(255,255,255,1)' //
-              },
-              margin: 12
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff66'
+            }
+          },
+          axisTick: { show: false },
+          axisLabel: {
+            textStyle: {
+              fontSize: 10,
+              color: '#fff8' //
             },
-            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
-          }
-        ],
+            margin: 12
+          },
+          data:
+            this.mode === 'month'
+              ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+              : ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+        },
+
         yAxis: [
           {
             name: '成品率',
@@ -120,13 +128,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
           },
           {
             name: '磨边机',
@@ -157,13 +176,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
           },
           {
             name: '镀膜机',
@@ -194,13 +224,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
           },
           {
             name: '包装纸',
@@ -231,13 +272,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
           },
           {
             name: '丝印',
@@ -272,13 +324,24 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
-              let v = Math.floor(Math.random() * 100)
-              while (v < 80) {
-                v = Math.floor(Math.random() * 100)
-              }
-              return v
-            })
+            data:
+              this.mode === 'month'
+                ? Array(30)
+                    .fill(1)
+                    .map(_ => {
+                      let v = Math.floor(Math.random() * 100)
+                      while (v < 80) {
+                        v = Math.floor(Math.random() * 100)
+                      }
+                      return v
+                    })
+                : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                    let v = Math.floor(Math.random() * 100)
+                    while (v < 80) {
+                      v = Math.floor(Math.random() * 100)
+                    }
+                    return v
+                  })
           }
         ]
       }
@@ -308,15 +371,34 @@ export default {
   },
   methods: {
     refreshData() {
+      // update xaxis
+      this.configs.xAxis.data =
+        this.mode === 'month'
+          ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+          : ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+
+      // update series
       this.configs.series.forEach(item => {
-        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
-          let v = Math.floor(Math.random() * 100)
-          while (v < 80) {
-            v = Math.floor(Math.random() * 100)
-          }
-          return v
-        })
+        item.data =
+          this.mode === 'month'
+            ? Array(30)
+                .fill(1)
+                .map(_ => {
+                  let v = Math.floor(Math.random() * 100)
+                  while (v < 80) {
+                    v = Math.floor(Math.random() * 100)
+                  }
+                  return v
+                })
+            : [11, 199, 140, 63, 185, 5, 78].map(_ => {
+                let v = Math.floor(Math.random() * 100)
+                while (v < 80) {
+                  v = Math.floor(Math.random() * 100)
+                }
+                return v
+              })
       })
+
       if (this.chart) this.chart.setOption(this.configs)
     }
   }