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

<!-- 
    filename: table.vue
    author: liubin
    date: 2023-09-08 13:52:12
    description: 
-->

<template>
  <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: { FrequentComp, StatusComp },
  data() {
    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);
  },
};
</script>

<style scoped lang="scss">
.yx-dark-tables {
  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>