hb-neic-project/src/components/check/areaCard.vue

/* 自定义tabs */
<template>
  <!-- <transition>
        <div :class='areaClass' @mouseover="hover = false" @mouseleave="hover = false" onselectstart="return false">
            <div :class="headerClass">
                <div :class='circleClass'></div>
                <span class="gy-card-title">{{ title }}</span>
                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
            </div>
            <div :class='contentClass'>
                <el-scrollbar style="height: 100%">
                    <slot></slot>
                </el-scrollbar>
            </div>
        </div>
    </transition> -->
  <div class="body">
    <img class="logo" src="../../assets/img/logo.png" alt="" />
    <div class="title">{{ title }}</div>
    <!-- <div class="record" @click="showRecord">校验记录</div> -->
    <div style="margin-top: 50px; margin-left: 20px; height: 80%">
      <el-scrollbar>
        <div class="scoll" style="margin-left: 5px">
          <MatrixBlock
            @on-click="handleClick"
            :dataList="showList"
          ></MatrixBlock>
        </div>
      </el-scrollbar>
    </div>
    <OperationRecords
      ref="records"
      v-model="display"
      @closed="closed()"
    ></OperationRecords>
    <WindturbineDetailPages
      v-model="dialogVisible"
      @close="handleClose"
      :windturbine="currentWindturbine"
    >
    </WindturbineDetailPages>
  </div>
</template>

<script>
import BackgroundData from "utils/BackgroundData";
import MatrixBlock from "../matrixBlock.vue";
import OperationRecords from "./operationRecords.vue";
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
export default {
  props: {
    title: {
      type: String,
      default: "校验区",
      required: true,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  components: {
    MatrixBlock,
    OperationRecords,
    WindturbineDetailPages,
  },
  data() {
    return {
      showList: [],
      arr: [],
      display: false,
      dialogVisible: false,
      currentWindturbine: {},
      intervals: null,
    };
  },
  created() {
    this.dataDeal();
    this.intervals = setInterval(this.dataDeal, 1000);
    this.arr = BackgroundData.getInstance().checkouts;
  },
  methods: {
    dataDeal() {
      if (this.arr.length > 0) {
        let flag = false;
        let showList = [];
        let arr = [];
        let checks = BackgroundData.getInstance().checkouts;
        checks.forEach((item) => {
          if (item.status === this.$store.state.windturbinelist[item.windturbineId].status) {
            showList.push(this.$store.state.windturbinelist[item.windturbineId]);
          } else {
            BackgroundData.getInstance().removeCheckouts(item);
          }
          if (new Date().getTime() - item.checkTime > 120000) {
            BackgroundData.getInstance().removeCheckouts(item);
            arr.push(item.windturbineId);
            flag = true;
          }
        });
        this.showList = showList;
        if (flag) {
          let mss = arr.join(",") + "风机超时未响应，已移除";
          this.$notify({
            title: "控制",
            message: mss,
            type: "warning",
            position: "bottom-right",
            offset: 60,
            duration: 3000,
          });
          flag = false;
        }
      }else{
        this.showList = [];
      }
    },
    showRecord() {
      this.display = true;
      this.$refs.records.dataDeal();
    },
    closed() {
      this.display = false;
    },
    handleClick(itm) {
      this.dialogVisible = true;
      this.currentWindturbine = itm;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</script>

<style scoped="scoped">
.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 10px;
  height: 25vh;
}

.body .scoll {
  height: 91%;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  /* margin-top: 12px; */
  margin-bottom: 10px;
  /* width: 570px; */
  width: 29vw;
  height: 50px;
  display: flex;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  /* top: 30px !important; */
  width: 5px;
  height: 5px;
  background-color: #54b75a;
  border-radius: 50%;
}

.record {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  right: 0;
  top: 23px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(37, 116, 219, 1);
}

.logo {
  position: absolute;
  top: 2px;
  left: 12px;
}
</style>