update

src/components/boxes/BottomTemp.vue

@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-7"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnBtm1)"
 					:series="kilnBtm1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-8"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnBtm2)"
 					:series="kilnBtm2"
 				/>

src/components/boxes/GasFlow.vue

@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-3"
 					class="flex-1"
+					unit="单位 m³/h"
 					:legend="Object.keys(gasTable1)"
 					:series="gasTable1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-4"
 					class="flex-1"
+					unit="单位 m³/h"
 					:legend="Object.keys(gasTable2)"
 					:series="gasTable2"
 				/>

src/components/boxes/OilFlow.vue

@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-1"
 					class="flex-1"
+					unit="单位 kg/h"
 					:legend="Object.keys(oilTable1)"
 					:series="oilTable1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-2"
 					class="flex-1"
+					unit="单位 kg/h"
 					:legend="Object.keys(oilTable2)"
 					:series="oilTable2"
 				/>

src/components/boxes/TopTemp.vue

@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-5"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnTop1)"
 					:series="kilnTop1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-6"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(kilnTop2)"
 					:series="kilnTop2"
 				/>

src/components/boxes/XicaoTemp.vue

@@ -7,6 +7,7 @@
 					key="1"
 					id="line-chart-9"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(xiCao1)"
 					:series="xiCao1"
 				/>
@@ -15,6 +16,7 @@
 					key="2"
 					id="line-chart-10"
 					class="flex-1"
+					unit="单位/℃"
 					:legend="Object.keys(xiCao2)"
 					:series="xiCao2"
 				/>

src/components/charts/BarChart.vue

@@ -58,6 +58,18 @@ export default {
     },
   },
   methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
     init() {
       if (!this.chart)
         this.chart = echarts.init(document.getElementById(this.id));
@@ -70,9 +82,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: Array(24)
+          data: this.updateXAxis(),
-            .fill(1)
-            .map((_, index) => index + 1 + ":00"),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -121,8 +131,7 @@ export default {
         },
         series: [
           {
-            data:
+            data: this.series,
-              this.series,
             //   Array(24)
             //     .fill(1)
             //     .map(() => {

src/components/charts/LineChart.vue

@@ -1,15 +1,15 @@
 <template>
   <!-- line chart  -->
   <div class="line-chart__wrapper">
-    <div class="line-chart__custom-legend flex" v-if="legend.length">
+    <div class="line-chart__custom-legend flex" v-if="legendtext.length">
       <!-- <span>产线1 - 产线5</span> -->
       <ul style="" class="flex">
-        <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
+        <li v-for="(v, i) in legendtext" :key="i">{{ v }}</li>
       </ul>
     </div>
     <div :id="id" style="width: 100%; height: 100%"></div>
     <div
-      v-show="legend.length === 0"
+      v-show="legendtext.length === 0"
       style="
         position: absolute;
         top: 0;
@@ -70,6 +70,10 @@ export default {
         title: { text: "default chart" },
       }),
     },
+    unit: {
+      type: "String",
+      default: "单位/m³",
+    },
     legend: {
       type: Array,
       default: () => [],
@@ -88,14 +92,24 @@ export default {
         "#F31868",
         "#30E89A",
         "#2760FF",
-        "#723fff",
+        "#7138FF",
-        "#ee3fff",
+        "#F318D8",
-        "#800f77",
+        "#C0F318",
         "#f77",
         "#19f",
         "#98f",
       ],
       data: [],
+      legendtext: [
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+        "asdfsadf",
+      ],
     };
   },
   mounted() {
@@ -111,6 +125,18 @@ export default {
     },
   },
   methods: {
+    updateXAxis() {
+      const hour = +new Date().getHours();
+      return Array(24)
+        .fill(1)
+        .map((_, index) => {
+          if (hour - index < 0) {
+            return 24 + hour - index + ":00";
+          }
+          return hour - index + ":00";
+        })
+        .reverse();
+    },
     init() {
       if (!this.chart)
         this.chart = echarts.init(document.getElementById(this.id));
@@ -122,9 +148,7 @@ export default {
           right: adjust(12),
         },
         xAxis: {
-          data: Array(24)
+          data: this.updateXAxis(),
-            .fill(1)
-            .map((_, index) => index + 1 + ":00"),
           axisLine: {
             lineStyle: {
               color: "#5982b2a0",
@@ -143,7 +167,7 @@ export default {
         },
         yAxis: {
           type: "value",
-          name: "单位/m³",
+          name: this.unit,
           nameTextStyle: {
             color: "#fff9",
             fontSize: adjust(9),
@@ -252,32 +276,50 @@ li {
 }
 
 ul {
-  margin-left: adjust(8px);
+  // padding: 0 adjust(8px);
-  padding: 0 adjust(8px);
-  // background: #eee3;
-  // flex: 1;
-  // width: adjust(154px);
   display: flex;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: adjust(28px);
+  // background: #eeec;
+  overflow-x: hidden;
+  white-space: pre-wrap;
   padding-bottom: adjust(2px);
 }
 
-li:not(:last-child) {
+li {
-  margin-right: adjust(16px);
+  text-align: right;
+  position: relative;
+  min-width: 40px;
+  margin-right: adjust(9px);
+  padding: 0 adjust(2px);
 }
 
-li {
+li:not(:last-child) {
-  position: relative;
+  // margin-right: adjust(16px);
-  width: 40px;
+}
+
+.line-chart__custom-legend {
+  position: absolute;
+  top: adjust(-32px);
+  right: 0;
+  font-size: adjust(9px);
+  font-family: Ubuntu, sans-serif;
+  padding: 0;
+  // max-width: 100%;
+  width: 65%;
+  align-items: flex-start;
+  justify-content: flex-end;
 }
 
 li::before {
   content: "";
   position: absolute;
   top: adjust(2px);
-  left: adjust(-6px);
+  left: adjust(-8px);
-  width: adjust(4px);
+  width: adjust(8px);
-  height: adjust(4px);
+  height: adjust(8px);
   border-radius: adjust(1px);
   background: #eee6;
 }
@@ -298,13 +340,13 @@ li:nth-child(5)::before {
   background: #2760ff;
 }
 li:nth-child(6)::before {
-  background: #723fff;
+  background: #7138FF;
 }
 li:nth-child(7)::before {
-  background: #ee3fff;
+  background: #F318D8;
 }
 li:nth-child(8)::before {
-  background: #800f77;
+  background: #C0F318;
 }
 li:nth-child(9)::before {
   background: #f77;
@@ -325,18 +367,4 @@ li:nth-child(11)::before {
   height: 100%;
   width: adjust(1px);
 }
-
-.line-chart__custom-legend {
-  position: absolute;
-  top: adjust(-13px);
-  right: 0;
-  font-size: adjust(7px);
-  font-family: Ubuntu, sans-serif;
-  // background: #fff2;
-  padding: 0;
-  // max-width: 100%;
-  width: 60%;
-  align-items: flex-start;
-  justify-content: flex-end;
-}
 </style>

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

@@ -31,6 +31,16 @@ export default {
   computed: {
     ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
     rdata() {
+      let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
+      min = +min 
+      sec = +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 },

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="fireDirection === '北火'" style="">
+      <div class="video-bottom" v-show="true || fireDirection === '北火'" style="">
         <video
           id="1"
           preload="auto"
@@ -147,16 +147,16 @@ main {
 
 .video-bottom {
   position: absolute;
-  bottom: adjust(153.5px);
+  bottom: adjust(178px);
-  left: adjust(63.5px);
+  left: adjust(16px);
-  transform: scale(1.02, 1.02);
+  transform: scale(.9, .57);
 }
 
 .video-top {
   position: absolute;
-  top: adjust(64px);
+  top: adjust(44px);
-  left: adjust(35px);
+  left: adjust(22px);
-  transform: scale(1.02, 1.02);
+  transform: scale(.95, .9);
 }
 
 .eq-main {
@@ -175,7 +175,7 @@ main {
   position: absolute;
   //   right: adjust(1200px);
   opacity: 0;
-  top: adjust(164px);
+  top: adjust(118px);
   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(164px);
+  top: adjust(118px);
   width: adjust(150px);
   height: adjust(150px);
   background: url(../../assets/mirror.png) no-repeat;