update

src/components/boxes/InWater.vue

@@ -8,7 +8,7 @@
 					<div class="time flex flex-center">
 						<DigitalBox
 							class="time--item"
-							v-for="(item, index) in '999'.split('')"
+							v-for="(item, index) in waterInTemp.split('')"
 							:key="index"
 							:value="item"
 						/>
@@ -43,7 +43,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(["kilnWaterIn"]),
+		...mapState(["kilnWaterIn", "waterInTemp"]),
 	},
 };
 </script>

src/components/boxes/KilnPressure.vue

@@ -6,12 +6,12 @@
         <div class="time flex flex-center">
           <DigitalBox
             class="time--item"
-						v-for="(item, index) in ['9', '9', '9']"
+            v-for="(item, index) in kilnPressure.split('')"
             :key="index"
             :value="item"
             :wider="true"
           />
-					<span class="unit">Kpa</span>
+          <span class="unit">Pa</span>
         </div>
         <div class="text">窑炉压力值</div>
       </div>
@@ -23,6 +23,7 @@
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
 import DigitalBox from "../common/DigitalBox.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "KilnPressure",
@@ -31,6 +32,9 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapState(["kilnPressure"]),
+  },
 };
 </script>
 

src/components/boxes/OutWater.vue

@@ -8,7 +8,7 @@
           <div class="time flex flex-center">
             <DigitalBox
               class="time--item"
-              v-for="(item, index) in '999'.split('')"
+              v-for="(item, index) in waterOutTemp.split('')"
               :key="index"
               :value="item"
             />
@@ -43,7 +43,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["kilnWaterOut"]),
+    ...mapState(["kilnWaterOut", "waterOutTemp"]),
   },
 };
 </script>

src/components/charts/LineChart.vue

@@ -105,7 +105,7 @@ export default {
     series: {
       deep: true,
       handler: function () {
-				console.log('LineChart: series changed!')
+        console.log("LineChart: series changed!");
         this.init();
       },
     },
@@ -124,7 +124,7 @@ export default {
         xAxis: {
           data: Array(24)
             .fill(1)
-						.map((_, index) => index + 1 + ':00'),
+            .map((_, index) => index + 1 + ":00"),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -138,7 +138,7 @@ export default {
             fontSize: adjust(6),
             lineHeight: adjust(1),
             margin: adjust(8),
-						rotate: 30
+            rotate: 30,
           },
         },
         yAxis: {
@@ -199,8 +199,8 @@ export default {
         series: Array(this.legend.length)
           .fill(1)
           .map((_, index) => {
-						let lgd = this.legend[index]
+            let lgd = this.legend[index];
-						console.log("series: ", lgd, index, this.series[lgd]);
+            // console.log("series: ", lgd, index, this.series[lgd]);
             return {
               name: lgd,
               type: "line",

src/components/isolate-area-1/Area.vue

@@ -13,20 +13,32 @@
 <script>
 import DragabbleContainer from "../layout/DragableContainer.vue";
 import SmallBox2 from "../common/SmallBox2.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "IsolateArea--1",
   components: { DragabbleContainer, SmallBox2 },
   data() {
     return {
-			rdata: [
+      //   rdata: [
-				// { icon: "temp", title: "车间温度", value: "27℃" },
+      //     // { icon: "temp", title: "车间温度", value: "27℃" },
-				{ icon: "fire", title: "当前火向", value: "南北" },
+      //     { icon: "fire", title: "当前火向", value: "南北" },
-				{ icon: "clock", title: "换火时间", value: "12:21:39" },
+      //     { icon: "clock", title: "换火时间", value: "12:21:39" },
-				{ icon: "sand", title: "剩余时间", value: "6h" },
+      //     { icon: "sand", title: "剩余时间", value: "6h" },
-			],
+      //   ],
     };
   },
+  computed: {
+    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
+    rdata() {
+      return [
+        // { icon: "temp", title: "车间温度", value: "27℃" },
+        { icon: "fire", title: "当前火向", value: this.fireDirection },
+        { icon: "clock", title: "换火时间", value: this.fireChangeTime },
+        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
+      ];
+    },
+  },
 };
 </script>
 

src/components/layout/Main.vue

@@ -1,6 +1,6 @@
 <template>
 	<main class="">
-		<div class="video-crash" v-if="true"></div>
+		<div class="video-crash" v-if="false"></div>
 
 		<div class="eq-main absolute">
 			<div class="video-bottom" style="">

src/store/index.js

@@ -17,7 +17,14 @@ export default new Vuex.Store({
     xiCao1: {},
     xiCao2: {},
     kilnWaterIn: {},
-    kilnWaterOut: {}
+    kilnWaterOut: {},
+    fan: {},
+    fireDirection: "南火",
+    kilnPressure: '99',
+    fireChangeTime: '13:30:11',
+    lastFireChangeTime: '33',
+    waterInTemp: '099',
+    waterOutTemp: '056'
   },
   getters: {
   },
@@ -26,64 +33,108 @@ export default new Vuex.Store({
       switch (payload.target) {
         case 'oil-1': {
           state.oilTable1 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'oil-2': {
           state.oilTable2 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'gas-1': {
           state.gasTable1 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'gas-2': {
           state.gasTable2 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-top-1': {
           state.kilnTop1 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-top-2': {
           state.kilnTop2 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-btm-1': {
           state.kilnBtm1 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-btm-2': {
           state.kilnBtm2 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-water-in': {
           state.kilnWaterIn = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'kiln-water-out': {
           state.kilnWaterOut = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'water-in-temp': {
+          state.waterInTemp = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'water-out-temp': {
+          state.waterOutTemp = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'xicao-1': {
           state.xiCao1 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
         }
         case 'xicao-2': {
           state.xiCao2 = payload.data
-          console.log('更换' + payload.target + '的数据')
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'fan': {
+          state.fan = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'fire-direction': {
+          state.fireDirection = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'last-fire-change-time': {
+          state.lastFireChangeTime = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'kiln-pressure': {
+          state.kilnPressure = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'fire-change-time': {
+          state.fireChangeTime = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'water-in-temp': {
+          state.waterInTemp = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
+          break
+        }
+        case 'water-out-temp': {
+          state.waterOutTemp = payload.data
+          console.log('更换' + payload.target + '的数据' + payload.data)
           break
-
         }
       }
     }

src/utils/wsClass.js

@@ -34,7 +34,8 @@ function handleClose() {
 
 
 export default class WsClient {
-  static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
+  // static wsServer = 'ws://192.168.1.12:8080/dz-screen/websocket/1'
+  static wsServer = 'ws://m306416y13.yicp.fun:48978/dz-screen/websocket/1'
   static tableMap = {
     // 窑顶温度
     'kilnTempTopT1': 'kiln-top-1',
@@ -49,6 +50,13 @@ export default class WsClient {
     'kilnGasT2': 'gas-2',
     'kilnOilT1': 'oil-1',
     'kilnOilT2': 'oil-2',
+    'fan': 'fan',
+    'fireDirection': 'fire-direction',
+    'lastFireChangeTime': 'last-fire-change-time',
+    'kilnPressure': 'kiln-pressure',
+    'fireChangeTime': 'fire-change-time',
+    'waterInTemp': 'water-in-temp',
+    'waterOutTemp': 'water-out-temp'
   }
   static socket = null