update

src/components/boxes/FanRuntime.vue

@@ -4,6 +4,21 @@
     <SubContainer title="风机运行情况" icon="fan" padding="34px">
       <div class="tables flex" style="height: 100%">
         <div class="table-wrapper flex-1 align-start">
+          <div
+            v-if="tableData1 && tableData1.length === 0"
+            style="
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: #eee1;
+              display: grid;
+              place-items: center;
+              font-size: 24px;
+              color: #eee9;
+            "
+          >无数据</div>
           <table class="table-1">
             <thead>
               <!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> -->
@@ -21,7 +36,11 @@
 							style="font-size: 7px; background: #0b5499; opacity: 35%"
 						> -->
             <transition-group name="fan-list" tag="tbody" mode="out-in">
-              <tr class="t-row" v-for="row in tableData1" :key="(row && 'length' in row) ? row[0] : Math.random()">
+              <tr
+                class="t-row"
+                v-for="row in tableData1"
+                :key="row && 'length' in row ? row[0] : Math.random()"
+              >
                 <td v-for="(d, idx) in row" :key="idx">
                   <template v-if="idx === 2">
                     <FrequentComp :value="d" />
@@ -109,7 +128,7 @@ export default {
   watch: {
     fan: {
       handler: function (data) {
-        if (!data) return
+        if (!data) return;
         let idx = 0;
         this.tableData1 = data.slice(0, 10).map((item, index) => {
           idx += 1;
@@ -128,9 +147,9 @@ export default {
       const inData = this.tableCache.shift();
       const outData = this.tableData1.shift();
       setTimeout(() => {
-        this.tableData1.splice(this.tableData1.length, 0, inData);
+        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
       }, 200);
-      this.tableCache.push(outData);
+      if (outData) this.tableCache.push(outData);
     }, 3000);
   },
 };

src/components/boxes/HistoryTemp.vue

@@ -1,8 +1,24 @@
 <template>
-  <div class="history-temp flex flex-col" style="height: 100%">
+  <div class="history-temp flex flex-col" style="height: 100%; position: relative;">
-    <h3>窑炉历史温度趋势</h3>
+    <h3>{{ title }}</h3>
     <BarChart class="flex-1" :series="series" />
-    <!-- :data="compType === 'inWater' ? kilnWaterIn : kilnWaterOut" -->
+    <div
+      v-if="series && series.length === 0"
+      style="
+        position: absolute;
+        top: 8px;
+        left: -30px;
+        width: 110%;
+        height: 105%;
+        background: #eee1;
+        display: grid;
+        place-items: center;
+        font-size: 24px;
+        color: #eee9;
+      "
+    >
+      无数据
+    </div>
   </div>
 </template>
 
@@ -18,6 +34,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    title: {
+      type: String,
+      default: "窑炉历史温度趋势",
+    },
   },
   data() {
     return {};

src/components/boxes/InWater.vue

@@ -34,7 +34,11 @@
         </div>
         <div class="wave"></div>
         <div class="graph flex-1">
-          <HistoryTrend key="water-in" :series="kilnWaterIn" />
+          <HistoryTrend
+            key="water-in"
+            title="窑炉进口水温历史"
+            :series="kilnWaterIn"
+          />
         </div>
       </div>
     </SubContainer>

src/components/boxes/KilnRuntime.vue

@@ -28,9 +28,23 @@ export default {
   props: {},
   data() {
     return {
-			time: "2202天55时",
+      time: "   天  时",
     };
   },
+  mounted() {
+	this.getRuntime()
+    setInterval(this.getRuntime, 1000 * 60 * 60);
+  },
+  methods: {
+    getRuntime() {
+      const diff = Date.now() - new Date("2023-5-12 10:00:00");
+      const days = parseInt(diff / 1000 / 60 / 60 / 24);
+      const hours = parseInt(
+        (diff - days * 24 * 60 * 60 * 1000) / 1000 / 60 / 60
+      );
+      this.time = `${days}天${hours}时`;
+    },
+  },
 };
 </script>
 

src/components/boxes/OutWater.vue

@@ -34,7 +34,11 @@
         </div>
         <div class="wave"></div>
         <div class="graph flex-1">
-          <HistoryTrend key="water-out" :series="kilnWaterOut" />
+          <HistoryTrend
+            key="water-out"
+            title="窑炉出口水温历史"
+            :series="kilnWaterOut"
+          />
         </div>
       </div>
     </SubContainer>

src/components/charts/BarChart.vue

@@ -83,7 +83,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(6),
             rotate: 30,
@@ -109,7 +109,7 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {
@@ -136,7 +136,7 @@ export default {
             barWidth: adjust(4),
             label: {
               show: true,
-              fontSize: adjust(6),
+              fontSize: adjust(7),
               color: "#eee8",
               position: "top",
             },

src/components/charts/LineChart.vue

@@ -135,7 +135,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(8),
             rotate: 30,
@@ -146,8 +146,8 @@ export default {
           name: "单位/m³",
           nameTextStyle: {
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(9),
-            align: "right",
+            align: "",
           },
           axisLine: {
             show: true,
@@ -161,7 +161,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {

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

@@ -35,7 +35,7 @@ export default {
         // { icon: "temp", title: "车间温度", value: "27℃" },
         { icon: "fire", title: "当前火向", value: this.fireDirection },
         { icon: "clock", title: "换火时间", value: this.fireChangeTime },
-        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime + 'h' },
+        { icon: "sand", title: "剩余时间", value: this.lastFireChangeTime },
       ];
     },
   },

src/components/layout/Header.vue

@@ -7,13 +7,53 @@
       <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
     </div>
     <span class="header--wing absolute company"></span>
-		<span class="header--wing absolute datetime"></span>
+    <span class="header--wing absolute datetime">
+      {{ date }} {{ week }} {{ time }}
+    </span>
   </header>
 </template>
 
 <script>
 export default {
   name: "Header",
+  data() {
+    return {
+      today: new Date(),
+      time: "00:00:00",
+    };
+  },
+  computed: {
+    date() {
+      return this.today.toLocaleDateString().replaceAll("/", ".");
+    },
+    week() {
+      return [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ][this.today.getDay()];
+    },
+  },
+  mounted() {
+    this.time = this.getTime().join(":");
+    setInterval(() => {
+      this.time = this.getTime().join(":");
+    }, 1000);
+  },
+  methods: {
+    getTime() {
+      const now = new Date();
+      return [
+        now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
+        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
+        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
+      ];
+    },
+  },
 };
 </script>
 
@@ -69,6 +109,10 @@ header {
 }
 
 .datetime {
+  color: $main-color;
+  font-size: adjust(26px);
+  text-align: center;
+  // display: inline-block;
   margin-left: adjust(w(6150px));
   width: adjust(w(1320px));
   height: adjust(h(48px));

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" style="">
+      <div class="video-bottom" v-show="fireDirection === '北火'" style="">
         <video
           id="1"
           preload="auto"
@@ -16,7 +16,7 @@
         ></video>
       </div>
 
-			<div class="video-top" style="">
+      <div class="video-top" v-show="fireDirection === '南火'" style="">
         <video
           id="2"
           class="video-top"
@@ -102,21 +102,7 @@ export default {
   data() {
     return {};
   },
-	computed: mapState([
+  computed: mapState(["kilnPressure", "fireDirection"]),
-		"kilnPressure",
-		"oilTable1",
-		"oilTable2",
-		"gasTable1",
-		"gasTable2",
-		"kilnTop1",
-		"kilnTop2",
-		"kilnBtm1",
-		"kilnBtm2",
-		"xiCao1",
-		"xiCao2",
-		"kilnWaterIn",
-		"kilnWaterOut",
-	]),
   mounted() {
     const wsc = new WsClient(this);
     wsc.registerListeners();
@@ -184,25 +170,59 @@ main {
   transform: rotateY(0.5turn);
 }
 
-.eq-main::after {
+.eq-main::before {
   content: "";
   position: absolute;
-	right: adjust(1200px);
+  //   right: adjust(1200px);
+  opacity: 0;
   top: adjust(164px);
   width: adjust(150px);
   height: adjust(150px);
   background: url(../../assets/mirror.png) no-repeat;
   background-size: 100% 100%;
-	animation: 10s linear .3s infinite mirror-to-left;
+  animation: 10s linear 0.3s infinite mirror-to-left-2;
+}
+
+.eq-main::after {
+  content: "";
+  position: absolute;
+  //   right: adjust(1200px);
+  opacity: 0;
+  top: adjust(164px);
+  width: adjust(150px);
+  height: adjust(150px);
+  background: url(../../assets/mirror.png) no-repeat;
+  background-size: 100% 100%;
+  animation: 10s linear 5s infinite mirror-to-left;
 }
 
 @keyframes mirror-to-left {
   0% {
-		right: adjust(1200px);
+    opacity: 1;
+  }
+  1% {
+    right: adjust(1200px);
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    right: adjust(60px);
+  }
+}
+
+@keyframes mirror-to-left-2 {
+  0% {
+    opacity: 1;
+  }
+  1% {
+    right: adjust(1200px);
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
   }
-	// 50% {
-	// 	right: adjust(800px);
-	// }
   100% {
     right: adjust(60px);
   }

src/store/index.js

@@ -20,11 +20,11 @@ export default new Vuex.Store({
     kilnWaterOut: [],
     fan: [],
     fireDirection: "南火",
-    kilnPressure: '99',
+    kilnPressure: '00',
-    fireChangeTime: '13:30:11',
+    fireChangeTime: '00:00:00',
-    lastFireChangeTime: '33',
+    lastFireChangeTime: '/',
-    waterInTemp: '099',
+    waterInTemp: '000',
-    waterOutTemp: '056'
+    waterOutTemp: '000'
   },
   getters: {
   },