update

2023-05-14 13:49:39 +08:00
parent 0b7feca848
commit 2ab0dfa759
12 changed files with 429 additions and 304 deletions
--- a/src/assets/date.png
+++ b/src/assets/date.png
--- a/src/components/boxes/FanRuntime.vue
+++ b/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);
  },
 };
--- a/src/components/boxes/HistoryTemp.vue
+++ b/src/components/boxes/HistoryTemp.vue
@@ -1,8 +1,24 @@
 <template>
-  <div class="history-temp flex flex-col" style="height: 100%">
-    <h3>窑炉历史温度趋势</h3>
+  <div class="history-temp flex flex-col" style="height: 100%; position: relative;">
+    <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 {};
--- a/src/components/boxes/InWater.vue
+++ b/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>
--- a/src/components/boxes/KilnRuntime.vue
+++ b/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>

--- a/src/components/boxes/OutWater.vue
+++ b/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>
--- a/src/components/charts/BarChart.vue
+++ b/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",
            },
--- a/src/components/charts/LineChart.vue
+++ b/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),
-            align: "right",
+            fontSize: adjust(9),
+            align: "",
          },
          axisLine: {
            show: true,
@@ -161,7 +161,7 @@ export default {
          },
          axisLabel: {
            color: "#fff9",
-            fontSize: adjust(6),
+            fontSize: adjust(8),
            lineHeight: adjust(1),
          },
          splitLine: {
--- a/src/components/isolate-area-1/Area.vue
+++ b/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 },
      ];
    },
  },
--- a/src/components/layout/Header.vue
+++ b/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));
--- a/src/components/layout/Main.vue
+++ b/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([
-		"kilnPressure",
-		"oilTable1",
-		"oilTable2",
-		"gasTable1",
-		"gasTable2",
-		"kilnTop1",
-		"kilnTop2",
-		"kilnBtm1",
-		"kilnBtm2",
-		"xiCao1",
-		"xiCao2",
-		"kilnWaterIn",
-		"kilnWaterOut",
-	]),
+  computed: mapState(["kilnPressure", "fireDirection"]),
  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);
  }
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -20,11 +20,11 @@ export default new Vuex.Store({
    kilnWaterOut: [],
    fan: [],
    fireDirection: "南火",
-    kilnPressure: '99',
-    fireChangeTime: '13:30:11',
-    lastFireChangeTime: '33',
-    waterInTemp: '099',
-    waterOutTemp: '056'
+    kilnPressure: '00',
+    fireChangeTime: '00:00:00',
+    lastFireChangeTime: '/',
+    waterInTemp: '000',
+    waterOutTemp: '000'
  },
  getters: {
  },