'火向，剩余时间，中间大图'

src/components/charts/LineChart.vue

@@ -283,7 +283,7 @@ ul {
   align-items: center;
   height: adjust(28px);
   // background: #eeec;
-  overflow-x: hidden;
+  // overflow-x: hidden;
   white-space: pre-wrap;
   padding-bottom: adjust(2px);
 }

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

@@ -15,40 +15,63 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
 import SmallBox2 from "../common/SmallBox2.vue";
 import { mapState } from "vuex";
 
+let timeFun = null
+
 export default {
   name: "IsolateArea--1",
   components: { DragabbleContainer, SmallBox2 },
   data() {
     return {
-      //   rdata: [
-      //     // { icon: "temp", title: "车间温度", value: "27℃" },
-      //     { icon: "fire", title: "当前火向", value: "南北" },
-      //     { icon: "clock", title: "换火时间", value: "12:21:39" },
-      //     { icon: "sand", title: "剩余时间", value: "6h" },
-      //   ],
+      rdata: [
+        // { icon: "temp", title: "车间温度", value: "27℃" },
+        { icon: "fire", title: "当前火向", value: "" },
+        { icon: "clock", title: "换火时间", value: "20分" },
+        { icon: "sand", title: "剩余时间", value: "0" },
+      ],
     };
   },
-  computed: {
-    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
-    rdata() {
-      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime || '0分0秒')
-      min = +min 
-      sec = +sec 
-      let timer = setInterval(() => {
-        if (sec) sec -= 1
+  watch: {
+    fireDirection: function(val) {
+      this.$set(this.rdata[0], 'value', val)
+    },
+    fireChangeTime: function(val) {
+      this.$set(this.rdata[1], 'value', val)
+    },
+    lastFireChangeTime: function(val) {
+      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
+      if (timeFun) clearInterval(timeFun)
+      timeFun = setInterval(() => {
+        if (sec > 0) sec -= 1
         else {
           sec = 59
           min -= 1
         }
-      }, 1000);
-      return [
-        // { icon: "temp", title: "车间温度", value: "27℃" },
-        { icon: "fire", title: "当前火向", value: this.fireDirection },
-        { icon: "clock", title: "换火时间", value: this.fireChangeTime },
-        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
-      ];
+        this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
+      }, 1000)
     },
   },
+  computed: {
+    ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
+    // rdata() {
+    //   let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
+    //   min = +min 
+    //   sec = +sec 
+    //   let interTime = `${min}分${sec}秒`
+    //   let timer = setInterval(() => {
+    //     if (sec) sec -= 1
+    //     else {
+    //       sec = 59
+    //       min -= 1
+    //     }
+    //   }, 1000);
+    //   return [
+    //     // { icon: "temp", title: "车间温度", value: "27℃" },
+    //     { icon: "fire", title: "当前火向", value: this.fireDirection },
+    //     { icon: "clock", title: "换火时间", value: this.fireChangeTime },
+    //     { icon: "sand", title: "剩余时间", value: interTime },
+    //   ];
+    // },
+  },
 };
 </script>
 

src/components/layout/Main.vue

@@ -3,7 +3,7 @@
     <div class="video-crash" v-if="false"></div>
 
     <div class="eq-main absolute">
-      <div class="video-bottom" v-show="true || fireDirection === '北火'" style="">
+      <div class="video-bottom" v-show="fireDirection === '北火'" style="">
         <video
           id="1"
           preload="auto"
@@ -175,7 +175,7 @@ main {
   position: absolute;
   //   right: adjust(1200px);
   opacity: 0;
-  top: adjust(118px);
+  top: adjust(125px);
   width: adjust(150px);
   height: adjust(150px);
   background: url(../../assets/mirror.png) no-repeat;
@@ -188,7 +188,7 @@ main {
   position: absolute;
   //   right: adjust(1200px);
   opacity: 0;
-  top: adjust(118px);
+  top: adjust(125px);
   width: adjust(150px);
   height: adjust(150px);
   background: url(../../assets/mirror.png) no-repeat;
@@ -198,9 +198,6 @@ main {
 
 @keyframes mirror-to-left {
   0% {
-    opacity: 1;
-  }
-  1% {
     right: adjust(1200px);
     opacity: 1;
   }
@@ -214,9 +211,6 @@ main {
 
 @keyframes mirror-to-left-2 {
   0% {
-    opacity: 1;
-  }
-  1% {
     right: adjust(1200px);
     opacity: 1;
   }

src/store/index.js

@@ -19,7 +19,7 @@ export default new Vuex.Store({
     kilnWaterIn: [],
     kilnWaterOut: [],
     fan: [],
-    fireDirection: "南火",
+    fireDirection: "",
     kilnPressure: '00',
     fireChangeTime: '00:00:00',
     lastFireChangeTime: '0分0秒',