src/views/QualityManager/HomePage.vue

@@ -96,15 +96,45 @@
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
                     <div style="position: absolute;  top: 0; left:0; width: 100%; height: 100%;">
-                      <pl-fault-analysis-pie-chart />
+                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
                     </div>
                     <div class="pl-select">
-                      <span :class="{ 'pl-select__active': plMode === 'a' }" @click="plMode = 'a'">A</span>
+                      <span
-                      <span :class="{ 'pl-select__active': plMode === 'b' }" @click="plMode = 'b'">B</span>
+                        :class="{ 'pl-select__active': plMode === 'a' }"
+                        @click="
+                          plMode = 'a'
+                          chosenDatalist = quexianDatalist[0]
+                        "
+                      >
+                        A
+                      </span>
+                      <span
+                        :class="{ 'pl-select__active': plMode === 'b' }"
+                        @click="
+                          plMode = 'b'
+                          chosenDatalist = quexianDatalist[1]
+                        "
+                      >
+                        B
+                      </span>
                     </div>
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span
-                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                        :class="{ 'date-select__active': dateMode === 'day' }"
+                        @click="
+                          dateMode = 'day'
+                          chosenDatalist = quexianDatalist[2]
+                        "
+                      >
+                        日
+                      </span>
+                      <span
+                        :class="{ 'date-select__active': dateMode === 'month' }"
+                        @click="
+                          dateMode = 'month'
+                          chosenDatalist = quexianDatalist[3]
+                        "
+                      >
                         月
                       </span>
                     </div>
@@ -215,6 +245,41 @@ export default {
     NewLineStack
   },
   data() {
+    const quexianDatalist = [
+      [
+        { value: 107, name: '破片' },
+        { value: 146, name: '崩边' },
+        { value: 43, name: '脏污' },
+        { value: 83, name: '划擦伤' },
+        { value: 20, name: '崩孔' },
+        { value: 21, name: '其他' }
+      ],
+      [
+        { value: 117, name: '破片' },
+        { value: 106, name: '崩边' },
+        { value: 40, name: '脏污' },
+        { value: 82, name: '划擦伤' },
+        { value: 22, name: '崩孔' },
+        { value: 19, name: '其他' }
+      ],
+      [
+        { value: 97, name: '破片' },
+        { value: 96, name: '崩边' },
+        { value: 33, name: '脏污' },
+        { value: 43, name: '划擦伤' },
+        { value: 10, name: '崩孔' },
+        { value: 18, name: '其他' }
+      ],
+      [
+        { value: 127, name: '破片' },
+        { value: 156, name: '崩边' },
+        { value: 53, name: '脏污' },
+        { value: 93, name: '划擦伤' },
+        { value: 25, name: '崩孔' },
+        { value: 22, name: '其他' }
+      ]
+    ]
+
     return {
       plMode: 'a',
       dateMode: 'month',
@@ -234,7 +299,9 @@ export default {
         { name: '包装', amount: 20 },
         { name: '清晰', amount: 20 },
         { name: '物流仓储', amount: 233920 }
-      ]
+      ],
+      quexianDatalist,
+      chosenDatalist: quexianDatalist[0]
     }
   },
   computed: {

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

@@ -13,6 +13,10 @@ export default {
     id: {
       type: String,
       default: 'default-fault-analysis-id'
+    },
+    dataList: {
+      type: Array,
+      required: true
     }
   },
   data() {
@@ -98,15 +102,6 @@ export default {
       }
     ]
 
-    const demoData = [
-      { value: 107, name: '破片' },
-      { value: 146, name: '崩边' },
-      { value: 43, name: '脏污' },
-      { value: 83, name: '划擦伤' },
-      { value: 20, name: '崩孔' },
-      { value: 21, name: '其他' }
-    ]
-
     return {
       chart: null,
       // default configs
@@ -115,7 +110,7 @@ export default {
           textAlign: 'center',
           left: '69%',
           top: '46%',
-          text: demoData.reduce((prev, curr) => prev + curr.value, 0),
+          text: '',
           textStyle: {
             color: '#fff',
             fontSize: 16,
@@ -137,9 +132,8 @@ export default {
           icon: 'none',
           itemGap: 5,
           itemWidth: 10,
-          formatter: function(name) {
+          formatter: name => {
-            // test data - dynamic
+            const testData = this.dataList
-            const testData = demoData
 
             let pieLegendVale = {}
             testData.filter((item, index) => {
@@ -262,12 +256,21 @@ export default {
                 return colorGradient
               }
             },
-            data: demoData
+            data: this.dataList
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataList: function(val) {
+      if (val && Array.isArray(val) && val.length) {
+        this.applyChartOption(val)
+      }
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', () => {
       if (this.chart) {
@@ -292,17 +295,15 @@ export default {
       const beilv = document.documentElement.style.getPropertyValue('--beilv')
       return beilv * baseSize
     },
-    // calcRate(baseRate) {
+
-    //   const beilv = document.documentElement.style.getPropertyValue('--beilv')
+    applyChartOption(datalist) {
-    //   return baseRate * beilv
-    // },
-    applyChartOption() {
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)
       const fs14 = this.calcFontsize(14 /** px*/)
       const fs18 = this.calcFontsize(18 /** px*/)
       const legendTopRate = this.calcFontsize(28 /** % */)
 
+      this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
       this.configs.title.textStyle.fontSize = fs18
       this.configs.title.subtextStyle.fontSize = fs14
 
@@ -340,7 +341,7 @@ export default {
       this.configs.series[0].label.rich.fourth.fontSize = fs10
       this.configs.series[0].label.rich.fifth.fontSize = fs10
       this.configs.series[0].label.rich.sixth.fontSize = fs10
-
+      if (datalist) this.configs.series[0].data = datalist
       this.chart.setOption(this.configs)
     }
   }