2024-04-08 16:39:31 +08:00
2 changed files with 308 additions and 267 deletions
--- a/src/views/databoard/components/NumRateChart.vue
+++ b/src/views/databoard/components/NumRateChart.vue
@ -1,13 +1,17 @@
 <template>
-  <div style="height: 370px;">
+	<div style="height: 370px">
 		<NotMsg v-show="notMsg" />
-    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
+		<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 NotMsg from './../components/NotMsg'
+import resize from './../mixins/resize';
+import NotMsg from './../components/NotMsg';
 export default {
 	name: 'NumRateChart',
 	mixins: [resize],
@ -15,65 +19,88 @@ export default {
 	data() {
 		return {
 			chart: null,
-      notMsg:true
-    }
+			notMsg: true,
+		};
 	},
 	computed: {
 		productline() {
-      return this.$store.state.websocket.productline
-    }
+			return this.$store.state.websocket.productline;
+		},
 	},
 	watch: {
 		productline: {
 			handler(newVal, oldVal) {
 				if (newVal === oldVal) {
-          return false
-        }
-        this.updateChart()
-        this.$emit('emitFun')
-			}
+					return false;
 				}
+				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
-        return
+				this.notMsg = true;
+				return;
 			}
-      let xData = []
-      let outputNum = []
-      let passRate = []
-      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?item.passRate*100:null)
+			let xData = [];
+			let outputNum = [];
+			let passRate = [];
+			for (let i = 0; i < this.productline.length - 1; i++) {
+				// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
+				for (let j = 0; j < this.productline.length - i - 1; j++) {
+					// 当前一个值大于后一个值
+					if (
+						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,
@ -83,32 +110,32 @@ export default {
 					icon: 'rect',
 					data: [
 						{ 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: [
 					{
@ -120,21 +147,20 @@ 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',
@ -145,24 +171,22 @@ export default {
 							align: 'LEFT',
 						},
 						axisLabel: {
-              color: "#fff",
+							color: '#fff',
 							fontSize: 12,
-              formatter: () =>{
-                return value ? '{value} %': '-'
-              }
+							formatter: '{value}%',
 						},
 						axisLine: {
 							show: true,
 							lineStyle: {
-              color: "#213259",
+								color: '#213259',
 							},
 						},
 						splitLine: {
 							lineStyle: {
-              color: "#213259a0",
+								color: '#213259a0',
+							},
+						},
 					},
-          }
-          }
 				],
 				series: [
 					{
@ -171,16 +195,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: '良品率',
@ -189,31 +213,31 @@ export default {
 						tooltip: {
 							valueFormatter: function (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.5, color: '#FFCB59' + "20" },
-                { offset: 1, color: '#FFCB59' + "00" },
+								{ offset: 0, color: '#FFCB59' + '40' },
+								{ offset: 0.5, color: '#FFCB59' + '20' },
+								{ 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 {
--- a/src/views/databoard/deepProcessing/DefectSum.vue
+++ b/src/views/databoard/deepProcessing/DefectSum.vue
@ -1,9 +1,17 @@
 <template>
-  <div style="flex: 1;">
-    <Container name="各工序缺陷汇总" size="middle" style="">
-      <TimePrompt class="timeShow" :timestr="timestr" />
-      <div style="padding: 5px 10px;">
-        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
+	<div style="flex: 1">
+		<Container
+			name="各工序缺陷汇总"
+			size="middle"
+			style="">
+			<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>
@ -11,14 +19,14 @@
 <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 {
@ -30,14 +38,23 @@ export default {
 				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
 				columnWidth: [60],
 				align: ['center'],
-        data: [],
-        // data: [[1, 'Y61', '破损','10','气泡']],
-        rowNum: 10
-      }
-    }
+				data: [
+					//假数据
+					[1, 'D61', '成型', '3片', '细长泡'],
+					[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: {
 		defectSum: {
@ -47,15 +64,15 @@ export default {
 					item.productionLineName,
 					item.sectionName,
 					item.count,
-          item.inspectionTypeName
+					item.inspectionTypeName,
 				]);
-        this.config.data = outArr
-        this.$refs['defectScrollBoard'].updateRows(outArr)
-        this.timestr = switchShowTime('日')
-			}
-		}
-  }
-}
+				this.config.data = outArr;
+				this.$refs['defectScrollBoard'].updateRows(outArr);
+				this.timestr = switchShowTime('日');
+			},
+		},
+	},
+};
 </script>
 <style lang='scss' scoped>
 .timeShow {