Merge branch 'master' of http://git.picaiba.com/g7hoo/dezhou-screen

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/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/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/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/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/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/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",
@@ -83,7 +93,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(6),
             rotate: 30,
@@ -109,7 +119,7 @@ export default {
           axisLabel: {
             formatter: "{value} ℃",
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {
@@ -121,8 +131,7 @@ export default {
         },
         series: [
           {
-            data:
+            data: this.series,
-              this.series,
             //   Array(24)
             //     .fill(1)
             //     .map(() => {
@@ -136,7 +145,7 @@ export default {
             barWidth: adjust(4),
             label: {
               show: true,
-              fontSize: adjust(6),
+              fontSize: adjust(7),
               color: "#eee8",
               position: "top",
             },

src/components/charts/LineChart.vue

@@ -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",
@@ -135,7 +159,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
             margin: adjust(8),
             rotate: 30,
@@ -143,11 +167,11 @@ export default {
         },
         yAxis: {
           type: "value",
-          name: "单位/m³",
+          name: this.unit,
           nameTextStyle: {
             color: "#fff9",
-            fontSize: adjust(7),
+            fontSize: adjust(9),
-            align: "right",
+            align: "",
           },
           axisLine: {
             show: true,
@@ -161,7 +185,7 @@ export default {
           },
           axisLabel: {
             color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
             lineHeight: adjust(1),
           },
           splitLine: {
@@ -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,11 +31,21 @@ 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 },
         { 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="true || 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();
@@ -161,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 {
@@ -184,25 +170,59 @@ main {
   transform: rotateY(0.5turn);
 }
 
-.eq-main::after {
+.eq-main::before {
   content: "";
   position: absolute;
-	right: adjust(1200px);
+  //   right: adjust(1200px);
-	top: adjust(164px);
+  opacity: 0;
+  top: adjust(118px);
   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(118px);
+  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: {
   },