冷端看板

src/views/dashboard/coldDashboard/index.vue

@@ -5,10 +5,10 @@
 				:isFullScreen="isFullScreen"
 				@screenfullChange="screenfullChange"
 				topTitle="自贡冷端数据看板" />
-        <DataBox title='冷端1线' position='lt' class="box1"/>
-        <DataBox title='冷端2线' position='rt' class="box2"/>
-        <DataBox title='冷端3线' position='lb' class="box3"/>
-        <DataBox title='冷端4线' position='rb' class="box4"/>
+        <DataBox title='原片产线1' position='lt' :msgData='line1' class="box1"/>
+        <DataBox title='原片产线2' position='rt' :msgData='line2' class="box2"/>
+        <DataBox title='原片产线3' position='lb' :msgData='line3' class="box3"/>
+        <DataBox title='原片产线4' position='rb' :msgData='line4' class="box4"/>
     </div>
   </div>
 </template>
@@ -31,6 +31,10 @@ export default {
 			permission: false,
 			url: process.env.VUE_APP_WS_API,
 			websock: '',
+			line1:{},
+			line2:{},
+			line3:{},
+			line4:{}
     }
   },
 	created() {
@@ -52,6 +56,7 @@ export default {
 	},
 	destroyed() {
 		window.removeEventListener('resize', this.boxReset);
+		this.websocketclose();
 	},
   methods: {
     boxReset() {
@@ -126,42 +131,24 @@ export default {
 			this.initWebSocket();
 		},
 		websocketonmessage(e) {
-			let dataJson = JSON.parse(e.data);
-			console.log(dataJson);
-			// 数据接收
-			if ('DeepState' in dataJson) {
-				this.topData = dataJson.DeepState;
-        if(!this.permission){
-          this.topData.yestodaySum = '***'
-          this.topData.monthSum = '***'
-          this.topData.monthAreaCost = '***'
-        }
-			}
-			if ('DeepEnergyTableList' in dataJson) {
-				this.tableData1 = dataJson.DeepEnergyTableList;
-        if(!this.permission){
-          this.tableData1.forEach(item=>{
-            item.elecPrice = null
-          })
-        }
-			}
-			if ('DeepCostTableList' in dataJson) {
-				this.tableData2 = dataJson.DeepCostTableList;
-        if(!this.permission){
-          this.tableData2.forEach(item=>{
-            item.priceD = null
-          })
-        }
-			}
-			if ('DeepPdTables' in dataJson) {
-				this.tableData3 = dataJson.DeepPdTables;
-			}
-			if ('DeepCostTrendList' in dataJson) {
-				this.echartData = dataJson.DeepCostTrendList;
-				this.$nextTick(() => {
-          this.$refs.chartRef.initChart(!this.permission);
-				});
+			let msgData = e.data
+			try {
+				msgData = JSON.parse(e.data);
+			} catch (error) {
+				console.log("websocket: [unable to msgData] :  ", e.data);
 			}
+			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+			if (!this.permission) return
+			msgData.originRatioTables && msgData.originRatioTables.forEach((item) => {
+			  item.lineName.includes('1') && (this.line1 = item);
+			  item.lineName.includes('2') && (this.line2 = item);
+			  item.lineName.includes('3') && (this.line3 = item);
+			  item.lineName.includes('4') && (this.line4 = item);
+			})
+		},
+		websocketsend() {
+			// 数据发送
+			this.websock.send('');
 		},
 		websocketsend(val) {
 			// 数据发送
@@ -169,6 +156,7 @@ export default {
 		},
 		websocketclose(e) {
 			// 关闭
+			this.websock.close();
 			console.log('断开连接', e);
 		},
   }