dezhou-screen/src/components/boxes/FanRuntime.vue

<template>
  <!-- 风机运行情况 -->
  <Container usage="Table">
    <SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
      <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%"> -->
              <tr class="t-row">
                <th>序号</th>
                <th>设备名称</th>
                <th>运行频率</th>
                <th>设备状态</th>
              </tr>
            </thead>
            <!-- <tbody> -->
            <!-- <tr
							v-for="(row, index) in tableData1"
							:key="index"
							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()"
              >
                <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 class="vertical-line"></div>
				<table class="table-2 flex-1 align-start">
					<thead>
						<tr class="t-row">
							<th>序号</th>
							<th>设备名称</th>
							<th>运行频率</th>
							<th>设备状态</th>
						</tr>
					</thead>
					<tbody>
						<tr class="t-row" v-for="(row, index) in tableData1" :key="index">
							<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>
					</tbody>
				</table> -->
      </div>
    </SubContainer>
  </Container>
</template>

<script>
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import FrequentComp from "./subcomponents/TableFrequence.vue";
import StatusComp from "./subcomponents/TableStatus.vue";
import { mapState } from "vuex";

export default {
  name: "KilnPressure",
  props: {},
  components: { Container, SubContainer, FrequentComp, StatusComp },
  data() {
    return {
      tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
      tableCache: [
        // [11, "风机11", "未运行", "正常" /**or 0,1*/],
        // [12, "风机12", "未运行", "正常" /**or 0,1*/],
        // [13, "风机13", "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*/],
      ],
    };
  },
  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">
@import "../../assets/styles/functions";

::-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 adjust(3px);
  width: adjust(3px);
  background: radial-gradient(
    ellipse at center,
    #6fe2ff,
    #52cbef80,
    transparent,
    transparent
  );
}
.table-wrapper {
  // padding-right: 6px;
  height: 400px;
  // overflow-y: auto;
  overflow: hidden;
}

table {
  width: 100%;
  border-spacing: adjust(1px);
}

// tr, td, th {
// 	max-height: 13.88px !important;
// }

.t-row {
  height: adjust(14px);
}

.tables > table {
  overflow-y: auto;
}

.align-start {
  align-self: flex-start;
}

thead > tr th:first-child {
  text-align: center;
}

thead > tr th {
  font-size: adjust(10px);
  line-height: 1.5;
  padding: adjust(3px) adjust(8px);
  font-weight: 400;
  background: #044a8446;
  text-align: left;
}

tbody > tr:nth-child(odd) {
  background: #0b549960;
}

tbody > tr td {
  font-size: adjust(10px);
  line-height: 1.25;
  padding: adjust(2px) adjust(8px);
  font-weight: 400;
  background: inherit;
}

tbody > tr td:first-child {
  text-align: center;
}
</style>