src/views/databoard/components/NumRateChart.vue

@@ -1,141 +1,114 @@
 <template>
-	<div style="height: 370px">
+  <div style="height: 370px;">
-		<NotMsg v-show="notMsg" />
+    <NotMsg v-show="notMsg"/>
-		<div
+    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
-			id="numRateChart"
-			class="num-rate-chart"
-			style="width: 900px; height: 420px"
-			v-show="!notMsg"></div>
   </div>
 </template>
 <script>
 import * as echarts from 'echarts';
-import resize from './../mixins/resize';
+import resize from './../mixins/resize'
-import NotMsg from './../components/NotMsg';
+import NotMsg from './../components/NotMsg'
 export default {
   name: 'NumRateChart',
   mixins: [resize],
-	components: { NotMsg },
+  components:{ NotMsg },
   data() {
     return {
       chart: null,
-			notMsg: true,
+      notMsg:true
-		};
+    }
   },
   computed: {
     productline() {
-			return this.$store.state.websocket.productline;
+      return this.$store.state.websocket.productline
+    }
   },
-	},
+  watch:{
-	watch: {
     productline: {
 			handler(newVal, oldVal) {
         if (newVal === oldVal) {
-					return false;
+          return false
+        }
+        this.updateChart()
+        this.$emit('emitFun')
+			}
 		}
-				this.updateChart();
-				this.$emit('emitFun');
-			},
-		},
   },
   mounted() {
 		this.$el.addEventListener('resize', () => {
 			console.log('resziing.....');
 		});
-		this.updateChart();
+    this.updateChart()
 	},
   methods: {
     updateChart() {
       if (this.productline && this.productline.length > 0) {
-				this.notMsg = false;
+        this.notMsg = false
       } else {
-				this.notMsg = true;
+        this.notMsg = true
-				return;
+        return
       }
-			let xData = [];
+      let xData = []
-			let outputNum = [];
+      let outputNum = []
-			let passRate = [];
+      let passRate = []
-			for (let i = 0; i < this.productline.length - 1; i++) {
+      this.productline && this.productline.length > 0 && this.productline.map(item => {
-				// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
+        if ((item.lineName).includes('D')) {
-				for (let j = 0; j < this.productline.length - i - 1; j++) {
+          xData.push(item.lineName)
-					// 当前一个值大于后一个值
+          outputNum.push(item.outputNum)
-					if (
+          passRate.push(item.passRate?item.passRate*100:null)
-						this.productline[j].lineName.substr(
-							this.productline[j].lineName.length - 1,
-							1
-						) >
-						this.productline[j + 1].lineName.substr(
-							this.productline[j + 1].lineName.length - 1,
-							1
-						)
-					) {
-						// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
-						let temp = this.productline[j];
-						this.productline[j] = this.productline[j + 1];
-						this.productline[j + 1] = temp;
         }
-				}
+      })
-			}
-			this.productline &&
-				this.productline.length > 0 &&
-				this.productline.map((item) => {
-					if (item.lineName.includes('D')) {
-						xData.push(item.lineName);
-						outputNum.push(item.outputNum);
-						passRate.push(item.passRate);
-					}
-				});
       if (
         this.chart !== null &&
         this.chart !== '' &&
         this.chart !== undefined
       ) {
-				this.chart.dispose();
+        this.chart.dispose()
       }
       this.chart = echarts.init(document.getElementById('numRateChart'));
       var option = {
         grid: { top: 82, right: 60, bottom: 20, left: 90 },
         tooltip: {
-					trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-						type: 'shadow',
+            type: "shadow",
           },
-					className: 'num-rate-chart-tooltip',
+          className: "num-rate-chart-tooltip"
         },
         legend: {
-					itemWidth: 10,
+          itemWidth:10,
-					itemHeight: 10,
+          itemHeight:10,
           top: '2.5%',
 					right: '20px',
           icon: 'rect',
           data: [
-						{ name: '产线产量', itemStyle: { color: '#364BFE' } },
+            {name:'产线产量',itemStyle:{color:'#364BFE'}},
-						{ name: '良品率', itemStyle: { color: '#FFCB59' } },
+            {name:'良品率',itemStyle:{color:'#FFCB59'}}
           ],
           textStyle: {
-						color: '#DFF1FE',
+            color: "#DFF1FE",
             fontSize: 12,
-					},
+          }
         },
         xAxis: [
           {
             type: 'category',
             data: xData,
             axisLabel: {
-							color: '#fff',
+              color: "#fff",
               fontSize: 12,
             },
             axisPointer: {
-							type: 'shadow',
+              type: 'shadow'
             },
             axisTick: { show: false },
             axisLine: {
               lineStyle: {
                 width: 1,
-								color: '#213259',
+                color: "#213259",
-							},
               },
             },
+          }
         ],
         yAxis: [
           {
@@ -147,20 +120,21 @@ export default {
               align: 'right',
             },
             axisLabel: {
-							color: '#fff',
+              color: "#fff",
               fontSize: 12,
+              formatter: '{value}'
             },
             axisLine: {
               show: true,
               lineStyle: {
-								color: '#213259',
+                color: "#213259",
               },
             },
             splitLine: {
               lineStyle: {
-								color: '#213259a0',
+                color: "#213259a0",
-							},
               },
+            }
           },
           {
             type: 'value',
@@ -171,22 +145,24 @@ export default {
               align: 'LEFT',
             },
             axisLabel: {
-							color: '#fff',
+              color: "#fff",
               fontSize: 12,
-							formatter: '{value}%',
+              formatter: () =>{
+                return value ? '{value} %': '-'
+              }
             },
           axisLine: {
             show: true,
             lineStyle: {
-								color: '#213259',
+              color: "#213259",
             },
           },
           splitLine: {
             lineStyle: {
-								color: '#213259a0',
+              color: "#213259a0",
-							},
-						},
             },
+          }
+          }
         ],
         series: [
           {
@@ -195,16 +171,16 @@ export default {
             tooltip: {
               valueFormatter: function (value) {
                 return value;
-							},
+              }
             },
             barWidth: 20,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#5CB7FF' },
-								{ offset: 1, color: '#364BFE' },
+                { offset: 1, color: '#364BFE' }
-							]),
+              ])
             },
-						data: outputNum,
+            data: outputNum
           },
           {
             name: '良品率',
@@ -212,32 +188,32 @@ export default {
             yAxisIndex: 1,
             tooltip: {
               valueFormatter: function (value) {
-								return value ? value + '%' : '-';
+                return value?value + '%':'-';
-							},
+              }
             },
             itemStyle: {
-							color: '#FFD160',
+              color: '#FFD160'
             },
             areaStyle: {
 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: '#FFCB59' + '40' },
+                { offset: 0, color: '#FFCB59' + "40" },
-								{ offset: 0.5, color: '#FFCB59' + '20' },
+                { offset: 0.5, color: '#FFCB59' + "20" },
-								{ offset: 1, color: '#FFCB59' + '00' },
+                { offset: 1, color: '#FFCB59' + "00" },
                 ]),
             },
             lineStyle: {
-							width: 1,
+                width: 1
             },
             symbol: 'circle',
 					  symbolSize: 5,
-						data: passRate,
+            data: passRate
-					},
+          }
-				],
+        ]
       };
-			option && this.chart.setOption(option);
+      option && this.chart.setOption(option)
-		},
+    }
-	},
+  }
-};
+}
 </script>
 <style scoped lang="scss">
 .num-rate-chart {
@@ -247,12 +223,12 @@ export default {
 }
 </style>
 <style>
-.num-rate-chart-tooltip {
+  .num-rate-chart-tooltip {
     background: #0a2b4f77 !important;
     border: none !important;
     backdrop-filter: blur(12px);
-}
+  }
-.num-rate-chart-tooltip * {
+  .num-rate-chart-tooltip * {
     color: #fff !important;
-}
+  }
 </style>

src/views/databoard/deepProcessing/DefectSum.vue

@@ -1,17 +1,9 @@
 <template>
-	<div style="flex: 1">
+  <div style="flex: 1;">
-		<Container
+    <Container name="各工序缺陷汇总" size="middle" style="">
-			name="各工序缺陷汇总"
+      <TimePrompt class="timeShow" :timestr="timestr" />
-			size="middle"
+      <div style="padding: 5px 10px;">
-			style="">
+        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
-			<TimePrompt
-				class="timeShow"
-				:timestr="timestr" />
-			<div style="padding: 5px 10px">
-				<dv-scroll-board
-					:config="config"
-					style="width: 575px; height: 380px"
-					ref="defectScrollBoard" />
       </div>
     </Container>
   </div>
@@ -19,60 +11,51 @@
 <script>
 import Container from '../components/Container.vue';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils';
+import { switchShowTime } from '../utils'
 export default {
   name: 'DefectSum',
   components: { Container, TimePrompt },
   computed: {
     defectSum() {
-			return this.$store.state.websocket.defectSum;
+      return this.$store.state.websocket.defectSum
-		},
+    }
   },
   data() {
     return {
       timestr: '',
       config: {
-				header: ['序号', '产线', '工序', '损耗片数', '缺陷类型'],
+        header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
         headerBGC: 'rgba(32, 55, 96, 0.8)',
         oddRowBGC: 'rgba(32, 55, 96, 0.8)',
         evenRowBGC: 'rgba(14, 32, 62, 0.8)',
         columnWidth: [60],
         align: ['center'],
-				data: [
+        data: [],
-					//假数据
+        // data: [[1, 'Y61', '破损','10','气泡']],
-					[1, 'D61', '成型', '3片', '细长泡'],
+        rowNum: 10
-					[2, 'D62', '组合落板', '4片', '细长泡'],
+      }
-					[3, 'D61', '磨边', '6片', '开口泡'],
+    }
-					[4, 'D63', '清洗', '5片', '结石'],
-					[5, 'D64', '打孔', '2片', '结石'],
-					[6, 'D63', '成型', '7片', '开口泡'],
-					[7, 'D61', '上片', '8片', '结石'],
-				],
-				// data: [],
-				rowNum: 10,
-			},
-		};
   },
   mounted() {
-		this.timestr = switchShowTime('日');
+    this.timestr = switchShowTime('日')
   },
-	watch: {
+  watch:{
     defectSum: {
 			handler(newVal, oldVal) {
         let outArr = this.defectSum.map((item, index) => [
-					index + 1,
+          index+1,
           item.productionLineName,
           item.sectionName,
           item.count,
-					item.inspectionTypeName,
+          item.inspectionTypeName
       ]);
-				this.config.data = outArr;
+        this.config.data = outArr
-				this.$refs['defectScrollBoard'].updateRows(outArr);
+        this.$refs['defectScrollBoard'].updateRows(outArr)
-				this.timestr = switchShowTime('日');
+        this.timestr = switchShowTime('日')
-			},
+			}
-		},
+		}
-	},
+  }
-};
+}
 </script>
 <style lang='scss' scoped>
 .timeShow {