From 1f73240063cd70248f2f56b39ee185415a2c3b67 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 14 Nov 2022 09:21:07 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BF=AE=E6=94=B9=E8=B4=A8=E9=87=8F?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RightContentFaultAnalysis.vue  |  83 +++++----
 src/views/3DOverview/index.vue                |   6 +-
 src/views/QualityManager/HomePage.vue         |  21 ++-
 .../QualityManager/components/TechyTable.vue  |   8 +-
 .../charts/PlFaultAnalysisPieChart.vue        | 168 +++++++++++++-----
 .../components/charts/newBar.vue              |  10 +-
 src/views/QualityManager/mockData.js          |  35 ++--
 7 files changed, 224 insertions(+), 107 deletions(-)

diff --git a/src/views/3DOverview/components/RightContentFaultAnalysis.vue b/src/views/3DOverview/components/RightContentFaultAnalysis.vue
index 1804c69..7e11d76 100644
--- a/src/views/3DOverview/components/RightContentFaultAnalysis.vue
+++ b/src/views/3DOverview/components/RightContentFaultAnalysis.vue
@@ -88,11 +88,11 @@ export default {
     ]
 
     const demoData = [
-      { value: 100, name: 'A' },
-      { value: 100, name: 'B' },
-      { value: 100, name: 'C' },
-      { value: 100, name: 'D' },
-      { value: 100, name: 'E' }
+      { value: 55, name: 'A' },
+      { value: 33, name: 'B' },
+      { value: 22, name: 'C' },
+      { value: 11, name: 'D' },
+      { value: 32, name: 'E' }
     ]
 
     return {
@@ -101,7 +101,7 @@ export default {
       configs: {
         title: {
           textAlign: 'center',
-          left: '62%',
+          left: '63%',
           top: '35%',
           text: '33039',
           textStyle: {
@@ -109,6 +109,7 @@ export default {
             fontSize: 16,
             fontWeight: 'normal'
           },
+          itemGap: 2,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -117,7 +118,7 @@ export default {
           }
         },
         legend: {
-          top: '5%',
+          top: 0,
           bottom: 0,
           left: -10,
           orient: 'vertical',
@@ -208,8 +209,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['63%', '50%'],
-            radius: ['55%', '80%'],
+            center: ['65%', '50%'],
+            radius: ['60%', '80%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -224,6 +225,10 @@ export default {
                 fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -231,15 +236,20 @@ export default {
                 const colorGradient = colors[dataIndex]
                 if (totalRate + percent < 25) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 } else if (totalRate + percent < 50) {
                   colorGradient.x = 0
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex === 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
-                  ;(() => {})()
+                  (() => {})()
                 }
 
                 totalRate += percent
@@ -277,43 +287,46 @@ export default {
       return beilv * baseSize
     },
     applyChartOption() {
-      const fs5 = this.calcFontsize(5 /**px*/)
-      const fs8 = this.calcFontsize(8 /**px*/)
-      const fs10 = this.calcFontsize(10 /**px*/)
-      const fs12 = this.calcFontsize(12 /**px*/)
-      const fs16 = this.calcFontsize(16 /**px*/)
+      const fs1 = this.calcFontsize(1 /** px*/)
+      const fs3 = this.calcFontsize(3 /** px*/)
+      const fs5 = this.calcFontsize(5 /** px*/)
+      const fs8 = this.calcFontsize(8 /** px*/)
+      const fs10 = this.calcFontsize(10 /** px*/)
+      const fs14 = this.calcFontsize(14 /** px*/)
+      const fs16 = this.calcFontsize(16 /** px*/)
 
-      this.configs.title.textStyle.fontSize = fs16
-      this.configs.title.subtextStyle.fontSize = fs12
+      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.subtextStyle.fontSize = fs10
 
-      this.configs.legend.itemGap = fs5
-      this.configs.legend.itemWidth = fs10
+      this.configs.legend.top = '10%'
+      this.configs.legend.itemGap = 0
+      this.configs.legend.itemWidth = fs8
 
       this.configs.legend.textStyle.rich.a.fontSize = fs10
       this.configs.legend.textStyle.rich.a.lineHeight = fs16
       this.configs.legend.textStyle.rich.b.fontSize = fs10
       // this.configs.legend.textStyle.rich.b.lineHeight = fs16
-      this.configs.legend.textStyle.rich.c.width = fs10
-      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.width = fs8
+      this.configs.legend.textStyle.rich.c.height = fs8
       this.configs.legend.textStyle.rich.c.borderRadius = fs5
-      this.configs.legend.textStyle.rich.d.width = fs10
-      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.width = fs8
+      this.configs.legend.textStyle.rich.d.height = fs8
       this.configs.legend.textStyle.rich.d.borderRadius = fs5
-      this.configs.legend.textStyle.rich.e.width = fs10
-      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.width = fs8
+      this.configs.legend.textStyle.rich.e.height = fs8
       this.configs.legend.textStyle.rich.e.borderRadius = fs5
-      this.configs.legend.textStyle.rich.f.width = fs10
-      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.width = fs8
+      this.configs.legend.textStyle.rich.f.height = fs8
       this.configs.legend.textStyle.rich.f.borderRadius = fs5
-      this.configs.legend.textStyle.rich.g.width = fs10
-      this.configs.legend.textStyle.rich.g.height = fs10
+      this.configs.legend.textStyle.rich.g.width = fs8
+      this.configs.legend.textStyle.rich.g.height = fs8
       this.configs.legend.textStyle.rich.g.borderRadius = fs5
 
-      this.configs.series[0].label.rich.first.fontSize = fs8
-      this.configs.series[0].label.rich.second.fontSize = fs8
-      this.configs.series[0].label.rich.third.fontSize = fs8
-      this.configs.series[0].label.rich.fourth.fontSize = fs8
-      this.configs.series[0].label.rich.fifth.fontSize = fs8
+      this.configs.series[0].label.rich.first.fontSize = fs10
+      this.configs.series[0].label.rich.second.fontSize = fs10
+      this.configs.series[0].label.rich.third.fontSize = fs10
+      this.configs.series[0].label.rich.fourth.fontSize = fs10
+      this.configs.series[0].label.rich.fifth.fontSize = fs10
 
       this.chart.setOption(this.configs)
     }
diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue
index 52c5ee5..a09597b 100644
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
-    <V3DApp @3d-loaded="handle3DLoaded" />
-    <div v-if="showPage" id="v3d-main-content">
-    <!-- <div v-if="true" id="v3d-main-content"> -->
+    <!-- <V3DApp @3d-loaded="handle3DLoaded" />
+    <div v-if="showPage" id="v3d-main-content"> -->
+    <div v-if="true" id="v3d-main-content">
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
 
       <section id="techy-body-part">
diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue
index 5147db3..760cbda 100644
--- a/src/views/QualityManager/HomePage.vue
+++ b/src/views/QualityManager/HomePage.vue
@@ -8,7 +8,7 @@
             <div class="table-wrapper fix-table-exception-report">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityTableProps"
                 :table-data="qualityDatalist"
@@ -22,7 +22,7 @@
             <div class="table-wrapper">
               <techy-table
                 :page="1"
-                :limit="8"
+                :limit="20"
                 :show-index="false"
                 :table-config="qualityExceptionTableProps"
                 :table-data="qualityExceptionDatalist"
@@ -92,10 +92,16 @@
 
               <!-- 第二列 -->
               <div class="grow-6 flex gap-16">
-                <div class="grow">
+                <div class="width-222">
                   <techy-box class="" style="padding: calc(16px * var(--beilv));">
                     <techy-analysis-header>产线缺陷分析</techy-analysis-header>
                     <pl-fault-analysis-pie-chart />
+                    <div class="date-select">
+                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
+                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                        月
+                      </span>
+                    </div>
                   </techy-box>
                 </div>
                 <div class="grow">
@@ -103,8 +109,8 @@
                     <techy-analysis-header>产品成品率</techy-analysis-header>
                     <new-line-stack />
                     <div class="date-select">
-                      <span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
-                      <span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
+                      <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
+                      <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
                         月
                       </span>
                     </div>
@@ -205,6 +211,7 @@ export default {
   data() {
     return {
       dateMode: 'month',
+      dateMode2: 'month',
       qualityTableProps,
       qualityDatalist,
       qualityExceptionDatalist,
@@ -425,4 +432,8 @@ export default {
 .date-select span.date-select__active {
   background-color: #42bbb7;
 }
+
+.width-222 {
+  width: calc(375px * var(--beilv));
+}
 </style>
diff --git a/src/views/QualityManager/components/TechyTable.vue b/src/views/QualityManager/components/TechyTable.vue
index 3cba4c0..bfe7e0e 100644
--- a/src/views/QualityManager/components/TechyTable.vue
+++ b/src/views/QualityManager/components/TechyTable.vue
@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -200,11 +200,13 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203e;
+  /* background-color: #0e203e90; */
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #203760;
+  /* background-color: #20376090; */
 }
 </style>
diff --git a/src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue b/src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
index cd0a970..3852302 100644
--- a/src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
+++ b/src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
@@ -1,16 +1,20 @@
 <template>
-  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
+  <div ref="chartContainer" class="chartContainer" />
 </template>
 
 <script>
 import echarts from 'echarts'
-// import 'echarts/theme/macarons'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
 export default {
-  name: 'PlFaultAnalysisPieChart',
+  name: 'RightContentFaultAnalysis',
   mixins: [resize],
-  props: {},
+  props: {
+    id: {
+      type: String,
+      default: 'default-fault-analysis-id'
+    }
+  },
   data() {
     let totalRate = 0
     const colors = [
@@ -81,20 +85,29 @@ export default {
       }
     ]
 
+    const demoData = [
+      { value: 55, name: 'A' },
+      { value: 33, name: 'B' },
+      { value: 22, name: 'C' },
+      { value: 11, name: 'D' },
+      { value: 32, name: 'E' }
+    ]
+
     return {
       chart: null,
       // default configs
       configs: {
         title: {
           textAlign: 'center',
-          left: '59%',
-          top: '30%',
+          left: '63%',
+          top: '35%',
           text: '33039',
           textStyle: {
             color: '#fff',
-            fontSize: 22,
+            fontSize: 16,
             fontWeight: 'normal'
           },
+          itemGap: 2,
           subtext: '总数',
           subtextStyle: {
             color: '#fff',
@@ -103,21 +116,17 @@ export default {
           }
         },
         legend: {
-          height: '100%',
-          align: 'center',
-          verticalAlign: 'center',
-          left: 0,
+          top: 0,
+          bottom: 0,
+          left: -10,
           orient: 'vertical',
           icon: 'none',
+          itemGap: 5,
+          itemWidth: 10,
           formatter: function(name) {
             // test data - dynamic
-            const testData = [
-              { name: 'A', value: 100 },
-              { name: 'B', value: 200 },
-              { name: 'C', value: 300 },
-              { name: 'D', value: 400 },
-              { name: 'E', value: 500 }
-            ]
+            const testData = demoData
+
             let pieLegendVale = {}
             testData.filter((item, index) => {
               if (item.name === name) {
@@ -135,20 +144,19 @@ export default {
           textStyle: {
             rich: {
               a: {
-                align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255, 0.7)',
                 lineHeight: 16
               },
               b: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 fontSize: 10,
                 color: 'rgba(255, 255, 255)'
               },
               c: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -157,7 +165,7 @@ export default {
               },
               d: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -166,7 +174,7 @@ export default {
               },
               e: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -175,7 +183,7 @@ export default {
               },
               f: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -184,7 +192,7 @@ export default {
               },
               g: {
                 // verticalAlign: 'top',
-                align: 'center',
+                // align: 'center',
                 width: 10,
                 borderRadius: 5,
                 height: 10,
@@ -199,8 +207,8 @@ export default {
           {
             name: 'PieForm',
             type: 'pie',
-            center: ['60%', '45%'],
-            radius: ['50%', '70%'],
+            center: ['65%', '48%'],
+            radius: ['60%', '85%'],
             avoidLabelOverlap: true,
             label: {
               formatter: params => {
@@ -208,13 +216,17 @@ export default {
                 return `{${colorMap[params.dataIndex]}|${params.percent} %}`
               },
               rich: {
-                first: { color: '#FB418C', fontSize: 10 },
-                second: { color: '#DDB112', fontSize: 10 },
-                third: { color: '#1A99FF', fontSize: 10 },
-                fourth: { color: '#A691FF', fontSize: 10 },
-                fifth: { color: '#49FBD6', fontSize: 10 }
+                first: { color: '#FB418C', fontSize: 8 },
+                second: { color: '#DDB112', fontSize: 8 },
+                third: { color: '#1A99FF', fontSize: 8 },
+                fourth: { color: '#A691FF', fontSize: 8 },
+                fifth: { color: '#49FBD6', fontSize: 8 }
               }
             },
+            labelLine: {
+              length: 5,
+              length2: 5
+            },
             itemStyle: {
               color: params => {
                 /** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -228,6 +240,11 @@ export default {
                   colorGradient.y = 0
                   colorGradient.x2 = 1
                   colorGradient.y2 = 1
+                } else if (totalRate + percent >= 50 && dataIndex == 1) {
+                  colorGradient.x = 1
+                  colorGradient.y = 1
+                  colorGradient.x2 = 0
+                  colorGradient.y2 = 0
                 } else if (totalRate + percent < 100) {
                   /** 也许这里需要完善，但目前工作良好 */
                   (() => {})()
@@ -237,40 +254,99 @@ export default {
                 return colorGradient
               }
             },
-            data: [
-              { value: 100, name: 'A' },
-              { value: 200, name: 'B' },
-              { value: 300, name: 'C' },
-              { value: 400, name: 'D' },
-              { value: 500, name: 'E' }
-            ]
+            data: demoData
           }
         ]
       }
     }
   },
   mounted() {
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', () => {
       if (this.chart) {
         this.chart.resize()
+        this.$nextTick(() => {
+          // 重新绘制文本大小
+          this.applyChartOption()
+        })
       }
     })
 
     this.$nextTick(() => {
       // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
-      if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
-
-      this.chart.setOption(this.configs)
-
+      if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
+      this.applyChartOption()
       this.chart.resize()
     })
   },
-  methods: {}
+
+  methods: {
+    calcFontsize(baseSize) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return beilv * baseSize
+    },
+    // calcRate(baseRate) {
+    //   const beilv = document.documentElement.style.getPropertyValue('--beilv')
+    //   return baseRate * beilv
+    // },
+    applyChartOption() {
+      const fs1 = this.calcFontsize(1 /** px*/)
+      const fs3 = this.calcFontsize(3 /** px*/)
+      const fs5 = this.calcFontsize(5 /** px*/)
+      const fs8 = this.calcFontsize(8 /** px*/)
+      const fs10 = this.calcFontsize(10 /** px*/)
+      const fs14 = this.calcFontsize(14 /** px*/)
+      const fs16 = this.calcFontsize(16 /** px*/)
+      const rate10 = this.calcFontsize(10 /** % */)
+      const rate3 = this.calcFontsize(3 /** % */)
+
+      this.configs.title.textStyle.fontSize = fs14
+      this.configs.title.subtextStyle.fontSize = fs10
+
+      this.configs.legend.top = rate10 + '%'
+      this.configs.legend.left = rate3 + '%'
+      this.configs.legend.itemGap = fs5
+      this.configs.legend.itemWidth = fs10
+
+      this.configs.legend.textStyle.rich.a.fontSize = fs10
+      this.configs.legend.textStyle.rich.a.lineHeight = fs10
+      this.configs.legend.textStyle.rich.b.fontSize = fs10
+      // this.configs.legend.textStyle.rich.b.lineHeight = fs16
+      this.configs.legend.textStyle.rich.c.width = fs10
+      this.configs.legend.textStyle.rich.c.height = fs10
+      this.configs.legend.textStyle.rich.c.borderRadius = fs5
+      this.configs.legend.textStyle.rich.d.width = fs10
+      this.configs.legend.textStyle.rich.d.height = fs10
+      this.configs.legend.textStyle.rich.d.borderRadius = fs5
+      this.configs.legend.textStyle.rich.e.width = fs10
+      this.configs.legend.textStyle.rich.e.height = fs10
+      this.configs.legend.textStyle.rich.e.borderRadius = fs5
+      this.configs.legend.textStyle.rich.f.width = fs10
+      this.configs.legend.textStyle.rich.f.height = fs10
+      this.configs.legend.textStyle.rich.f.borderRadius = fs5
+      this.configs.legend.textStyle.rich.g.width = fs10
+      this.configs.legend.textStyle.rich.g.height = fs10
+      this.configs.legend.textStyle.rich.g.borderRadius = fs5
+
+      this.configs.series[0].label.rich.first.fontSize = fs10
+      this.configs.series[0].label.rich.second.fontSize = fs10
+      this.configs.series[0].label.rich.third.fontSize = fs10
+      this.configs.series[0].label.rich.fourth.fontSize = fs10
+      this.configs.series[0].label.rich.fifth.fontSize = fs10
+
+      this.chart.setOption(this.configs)
+    }
+  }
 }
 </script>
 
 <style scoped>
-.chartContainer >>> div {
+.chartContainer {
+  height: calc(100% - (36px * var(--beilv)));
+  position: relative;
+  width: 100%;
+}
+
+.chartContainer > div {
   width: 100% !important;
 }
 </style>
diff --git a/src/views/QualityManager/components/charts/newBar.vue b/src/views/QualityManager/components/charts/newBar.vue
index 4b37a5f..df2fab4 100644
--- a/src/views/QualityManager/components/charts/newBar.vue
+++ b/src/views/QualityManager/components/charts/newBar.vue
@@ -130,7 +130,7 @@ export default {
         }
       ]
     } else {
-      const barWidth = 400 / 2 / this.dataList[0].data.length
+      const barWidth = 320 / 2 / this.dataList[0].data.length
       this.series = [
         {
           // 柱体
@@ -167,7 +167,7 @@ export default {
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(59, 76, 118, 0)' },
-              { offset: 1, color: '#2c6e7d' }
+              { offset: 1, color: this.dataList[0].bottomColor }
             ])
           },
           label: {
@@ -188,7 +188,7 @@ export default {
           symbol: 'circle',
           symbolOffset: [0, '50%'],
           symbolSize: [barWidth, 6],
-          itemStyle: { color: '#2c6e7d' },
+          itemStyle: { color: this.dataList[0].bottomColor + '9f' },
           data: this.dataList[0].data
         }
       ]
@@ -276,7 +276,7 @@ export default {
   /* .fault-category-chart::before { */
   content: '';
   position: absolute;
-  bottom: calc(30px * var(--beilv));
+  bottom: calc(36px * var(--beilv));
   left: 9%;
   height: calc(32px * var(--beilv));
   width: 90%;
@@ -288,7 +288,7 @@ export default {
   /* .process-fault-chart::before { */
   content: '';
   position: absolute;
-  bottom: 12%;
+  bottom: 18%;
   left: 8%;
   height: calc(32px * var(--beilv));
   /* bottom: calc(20px * var(--beilv));
diff --git a/src/views/QualityManager/mockData.js b/src/views/QualityManager/mockData.js
index 995195d..4ed3d5e 100644
--- a/src/views/QualityManager/mockData.js
+++ b/src/views/QualityManager/mockData.js
@@ -30,8 +30,8 @@ const PriorityComponent = {
     console.log(this.injectData.priority)
   },
   methods: {},
-  render: function (h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
+  render: function(h) {
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
   }
 }
 
@@ -52,11 +52,19 @@ export const qualityDatalist = [
   { 'wsName': '工序2', 'pl': '产线8', 'content': '成思体高原法厂清', 'creator': '林平', 'time': '1990-09-18 03:16:44', 'priority': 2 },
   { 'wsName': '工序3', 'pl': '产线6', 'content': '社色增设长放统展', 'creator': '叶静', 'time': '1970-12-02 09:44:01', 'priority': 4 },
   { 'wsName': '工序4', 'pl': '产线10', 'content': '今西', 'creator': '罗磊', 'time': '2017-10-21 00:00:27', 'priority': 2 },
-  { 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 5 },
+  { 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 1 },
   { 'wsName': '工序6', 'pl': '产线4', 'content': '志矿正算片大料水断特', 'creator': '熊磊', 'time': '1999-07-20 19:13:32', 'priority': 3 },
   { 'wsName': '工序7', 'pl': '产线3', 'content': '目式却属采精国', 'creator': '马磊', 'time': '2001-07-16 03:50:54', 'priority': 4 },
   { 'wsName': '工序8', 'pl': '产线7', 'content': '做较代你', 'creator': '曾敏', 'time': '1986-01-07 03:20:21', 'priority': 3 },
-  { 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
+  { 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 4 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
+  { 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
 ]
 
 /** 质量异常报警 */
@@ -87,9 +95,9 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function (h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
+  render: function(h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
       h('span', this.statusText)
     ])
   }
@@ -103,18 +111,25 @@ export const qualityExceptionTableProps = [
   { label: '时间', prop: 'time', align: 'center' },
   { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
   { label: '处理人', prop: 'charger', align: 'center', width: 100 },
-  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
+  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 150 }
 ]
 
 export const qualityExceptionDatalist = [
   { 'wsName': '工序0', 'pl': '产线1', 'content': '说红要称或各眼华家书', 'creator': '罗霞', 'time': '2013-04-08 15:23:55', 'priority': 1, 'charger': '冯敏', 'status': 4 },
   { 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 1, 'charger': '万静', 'status': 2 },
   { 'wsName': '工序2', 'pl': '产线10', 'content': '铁收王', 'creator': '黎艳', 'time': '2006-10-25 19:20:41', 'priority': 2, 'charger': '徐秀兰', 'status': 1 },
-  { 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 5, 'charger': '白秀兰', 'status': 5 },
+  { 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 5, 'charger': '白秀兰', 'status': 2 },
   { 'wsName': '工序4', 'pl': '产线3', 'content': '特适院', 'creator': '魏超', 'time': '1982-12-26 16:19:57', 'priority': 1, 'charger': '姚静', 'status': 3 },
   { 'wsName': '工序5', 'pl': '产线1', 'content': '快准很问无', 'creator': '于桂英', 'time': '1976-09-26 21:53:11', 'priority': 4, 'charger': '白刚', 'status': 2 },
   { 'wsName': '工序6', 'pl': '产线7', 'content': '研开', 'creator': '何桂英', 'time': '1977-04-23 05:34:45', 'priority': 3, 'charger': '秦涛', 'status': 4 },
   { 'wsName': '工序7', 'pl': '产线2', 'content': '四取各广水儿强想华', 'creator': '唐军', 'time': '1988-03-11 22:40:42', 'priority': 2, 'charger': '龙艳', 'status': 1 },
   { 'wsName': '工序8', 'pl': '产线7', 'content': '样无商口', 'creator': '高娟', 'time': '2012-03-14 06:40:16', 'priority': 3, 'charger': '沈涛', 'status': 1 },
-  { 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }
+  { 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 3 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 1 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 2 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 3 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 2 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 1 },
+  { 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }
 ]