质量结束

src/main.js

@@ -44,6 +44,7 @@ import "@/vxe.scss"
 
 import dataV from '@jiaminghi/data-view'
 
+
 //需要按需引入，先引入vue并引入element-ui
 import AFTableColumn from 'af-table-column'
 
@@ -72,6 +73,8 @@ Vue.prototype.msgInfo = function (msg) {
   this.$message.info(msg);
 }
 
+
+
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)

src/views/OperationManagement/quality/qualityStatistics.vue

@@ -97,16 +97,16 @@
 
     <!-- 弹窗-- 修改和删除 -->
     <el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
-      <el-row>
-        <el-col :span="12">
-          <el-card class="box-card">
-            <div v-for="(item, index) in DefectDetails" :key="index" class="text item">
-              {{ DefectDetails.InspectionName }}+"----------"+{{ DefectDetails.Counter }}
+      <el-card class="box-card">
+        <div class="container_grid">
+          <div v-for="(item, index) in DefectDetails" :key="index" class="text item">
+            <div style="margin-bottom: 10px">
+              <el-tag>{{ item.inspectionName }}</el-tag> {{ item.counter }}
             </div>
-          </el-card></el-col
-        >
-        <el-col :span="12"> <div ref="chartColumn" style="width: 100%; height: 400px"></div></el-col>
-      </el-row>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card" style="margin-top: 5px"> <div id="chartColumn" style="width: 100%; height: 400px"></div></el-card>
 
       <div slot="footer" class="dialog-footer">
         <el-button @click="DMLdialog.visiable = false">取 消</el-button>
@@ -116,6 +116,7 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import { QueryQualityStatisticsTable, GetDetailsOfDetectionItems } from '@/api/operationManagement/quality/qualityStatistics.js'
 export default {
   name: 'qualityStatistics',
@@ -139,6 +140,39 @@ export default {
         visiable: false,
       },
       DefectDetails: [], //缺陷详情
+
+      option: {
+        title: {
+          text: '',
+          subtext: '统计分析',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+            label: {
+              formatter: '{b}: {d}%',
+            },
+          },
+        ],
+      },
     }
   },
   mounted() {
@@ -176,42 +210,71 @@ export default {
         case 1:
           // 首检抛光数量
           this.DMLdialog.title = '首检抛光'
+          this.option.title.text = '首检抛光'
 
           break
         case 2:
           // 首检打磨数量
           this.DMLdialog.title = '首检打磨'
+          this.option.title.text = '首检打磨'
+
           break
         case 3:
           // 首检报废数量
           this.DMLdialog.title = '首检报废'
+          this.option.title.text = '首检报废'
           break
         case 4:
           // 二检打磨数量
           this.DMLdialog.title = '二检打磨'
+          this.option.title.text = '二检打磨'
           break
         case 5:
           // 二检报废数量
           this.DMLdialog.title = '二检报废'
+          this.option.title.text = '二检报废'
           break
         case 6:
           // 三检打磨数量
           this.DMLdialog.title = '三检打磨'
+          this.option.title.text = '三检打磨'
           break
         case 7:
           // 三检报废数量
           this.DMLdialog.title = '三检报废'
+          this.option.title.text = '三检报废'
           break
       }
       //todo 获取检测项，详细信息
       GetDetailsOfDetectionItems(query).then((res) => {
         if (res.code == 200) {
           this.DefectDetails = res.data
+          this.option.series[0].data.length = 0
+          this.DefectDetails.forEach((item, index) => {
+            this.option.series[0].data.push({
+              name: item.inspectionName,
+              value: item.counter,
+            })
+          })
+          this.GetLoadEcharts()
         }
       })
     },
+
+    //todo 加载echarts
+    GetLoadEcharts() {
+      let myChart = echarts.init(document.getElementById('chartColumn'))
+
+      myChart.setOption(this.option)
+    },
   },
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container_grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-template-rows: auto auto auto auto auto auto;
+}
+</style>