update fan runtime

src/components/yx-dark/containers/components/TableFrequence.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="table-frequence" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+	name: "TableFrequence",
+	props: {
+    value: {
+      type: String,
+      default: '未运行'
+    }
+  },
+	data() {
+		return {
+      cls: {
+        'valid': this.value !== '未运行'
+      }
+    };
+	}
+};
+</script>
+
+<style scoped>
+.table-frequence {
+  font-family: Ubuntu, sans-serif !important;
+}
+
+.valid {
+  color: #30e89a;
+}
+</style>

src/components/yx-dark/containers/components/TableStatus.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="table-status" :class="cls">{{ value }}</div>
+</template>
+
+<script>
+export default {
+  name: "TableFrequence",
+  props: {
+    value: {
+      type: String,
+      default: "正常",
+    },
+  },
+  data() {
+    return {
+      cls: {
+        invalid: this.value !== "正常",
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.table-status {
+  /* font-family: Ubuntu, sans-serif !important; */
+  color: #3984ff;
+  padding-left: 20px;
+  position: relative;
+}
+
+.table-status::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 4px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 200px;
+  background: #3984ff;
+  box-shadow: 0px 0px 4px 4px rgba(39, 96, 255, 0.5);
+}
+
+.invalid {
+  color: #ff0c0c;
+}
+
+.invalid::after {
+  background: #ff0c0c;
+  box-shadow: 0px 0px 4px 4px rgba(255, 39, 39, 0.5);
+}
+</style>

src/components/yx-dark/containers/table.vue

@@ -6,19 +6,127 @@
 -->
 
 <template>
-  <div class="yx-dark-tables"></div>
+  <div class="yx-dark-tables">
+    <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 class="t-row">
+              <th>序号</th>
+              <th>设备名称</th>
+              <th>运行频率</th>
+              <th>设备状态</th>
+            </tr>
+          </thead>
+          <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()"
+            >
+              <td v-for="(d, idx) in row" :key="idx">
+                <template v-if="idx === 2">
+                  <FrequentComp :value="d" />
+                </template>
+                <template v-else-if="idx === 3">
+                  <StatusComp :value="d" />
+                </template>
+                <template v-else>
+                  {{ d }}
+                </template>
+              </td>
+            </tr>
+          </transition-group>
+          <!-- </tbody> -->
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import FrequentComp from "./components/TableFrequence.vue";
+import StatusComp from "./components/TableStatus.vue";
+import { mapState } from "vuex";
+
 export default {
   name: "YxDarkTables",
-  components: {},
+
-  props: {},
+  components: { FrequentComp, StatusComp },
   data() {
-    return {};
+    return {
+      tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
+      tableCache: [
+        [16, "风机16", "未运行", "正常" /**or 0,1*/],
+        [17, "风机17", "未运行", "正常" /**or 0,1*/],
+        [17, "风机18", "73Hz", "正常" /**or 0,1*/],
+      ],
+      tableData1: [
+        [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
+        [2, "风机2", "未运行", "故障" /**or 0,1*/],
+        [3, "风机3", "333Hz", "正常" /**or 0,1*/],
+        [4, "风机4", "100Hz", "正常" /**or 0,1*/],
+        [5, "风机5", "未运行", "正常" /**or 0,1*/],
+        [6, "风机6", "未运行", "故障" /**or 0,1*/],
+        [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
+        [8, "风机8", "未运行", "正常" /**or 0,1*/],
+        [9, "风机9", "未运行", "正常" /**or 0,1*/],
+        [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
+        [11, "风机11", "未运行", "正常" /**or 0,1*/],
+        [12, "风机12", "未运行", "正常" /**or 0,1*/],
+        [13, "风机13", "73Hz", "正常" /**or 0,1*/],
+        [14, "风机14", "未运行", "正常" /**or 0,1*/],
+        [15, "风机15", "未运行", "正常" /**or 0,1*/], 
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["fan"]),
+  },
+  watch: {
+    // fan: {
+    //   handler: function (data) {
+    //     if (!data) return;
+    //     let idx = 0;
+    //     this.tableData1 = data.slice(0, 10).map((item, index) => {
+    //       idx += 1;
+    //       return [idx, ...item];
+    //     });
+    //     this.tableCache = data
+    //       .slice(10)
+    //       .map((item, index) => [index + 1 + idx, ...item]);
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+  },
+  mounted() {
+    setInterval(() => {
+      const inData = this.tableCache.shift();
+      const outData = this.tableData1.shift();
+      setTimeout(() => {
+        if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
+      }, 200);
+      if (outData) this.tableCache.push(outData);
+    }, 3000);
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
@@ -27,4 +135,103 @@ export default {
   height: 100%;
   background: #fff3;
 }
+
+::-webkit-scrollbar {
+  width: 6px;
+  background: #eee1;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  border-radius: 8px;
+  background: #eee3;
+}
+
+.fan-list-enter-active,
+.fan-list-leave-active {
+  transition: all 0.5s;
+}
+
+// .fan-list-leave-move {
+//   transition: all 1s;
+// }
+
+.fan-list-enter,
+.fan-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.vertical-line {
+  margin: 0 6px;
+  width: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    #6fe2ff,
+    #52cbef80,
+    transparent,
+    transparent
+  );
+}
+.table-wrapper {
+  // padding-right: 6px;
+  // height: 480px;
+  height: 100%;
+  // overflow-y: auto;
+  overflow: hidden;
+}
+
+table {
+  width: 100%;
+  border-spacing: 2px;
+}
+
+// tr, td, th {
+// 	max-height: 13.88px !important;
+// }
+
+.t-row {
+  height: 28px;
+}
+
+.tables > table {
+  overflow-y: auto;
+}
+
+.align-start {
+  align-self: flex-start;
+}
+
+thead > tr th:first-child {
+  text-align: center;
+}
+
+thead > tr th {
+  font-size: 20px;
+  line-height: 1.5;
+  padding: 6px 16px;
+  font-weight: 400;
+  background: #044a8446;
+  text-align: left;
+}
+
+tbody > tr:nth-child(odd) {
+  background: #0b549960;
+}
+
+tbody > tr td {
+  font-size: 20px;
+  line-height: 1.25;
+  padding: 4px 16px;
+  font-weight: 400;
+  background: inherit;
+}
+
+tbody > tr td:first-child {
+  text-align: center;
+}
 </style>

src/views/HomeView.vue

@@ -80,6 +80,10 @@ export default {
 <style lang="scss">
 @import "../assets/styles/functions";
 
+* {
+  user-select: none;
+}
+
 .home-view {
   height: 1080px;
   width: 8640px;