neic-hefeng/src/components/StatusBar.vue

/* 状态栏 */
<template>
  <div class="status-bar" onselectstart="return false">
    <el-row>
      <el-col :span="18" style="margin-top: 5px">
        <span style="color: white; margin-left: 20px">系统时间：</span>
        <span style="color: white">{{ currentTime }}</span>
      </el-col>
      <el-col :span="6" style="margin-top: 5px">
        <el-popover
          placement="top-start"
          :width="521"
          trigger="hover"
          class="popoverBack"
          :show-arrow="false"
        >
          <template #reference>
            <div class="status-list">
              <img
                class="status-img"
                src="../assets/img/statusbar/hidden_danger.png"
              />
              <span class="status-label hidden-danger">隐患</span>
              <span>{{ hiddenDangerNum }}</span>
            </div>
          </template>
          <el-scrollbar>
            <el-table
              :data="hiddenDangerData"
              border
              border-color="rgb(36,36,36)"
              max-height="650px"
              :header-cell-style="{
                background: 'Black',
                color: 'rgb(220,220,220)',
                border: '0px',
              }"
              :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
            >
              <el-table-column
                width="160"
                property="lastUpdateTime"
                label="时间"
                align="center"
              ></el-table-column>
              <el-table-column
                width="110"
                property="windturbineId"
                label="设备"
                align="center"
              ></el-table-column>
              <el-table-column
                width="250"
                property="alertText"
                label="故障信息"
                align="center"
              ></el-table-column>
            </el-table>
          </el-scrollbar>
        </el-popover>
        <el-popover
          placement="top-start"
          :width="521"
          trigger="hover"
          class="popoverBack"
          :show-arrow="false"
        >
          <template #reference>
            <div class="status-list">
              <img
                class="status-img"
                src="../assets/img/statusbar/defect.png"
              />
              <span class="status-label defect">缺陷</span>
              <span>{{ defectNum }}</span>
            </div>
          </template>
          <el-table
            :data="defectData"
            border
            border-color="rgb(36,36,36)"
            max-height="650px"
            :header-cell-style="{
              background: 'Black',
              color: 'rgb(220,220,220)',
              border: '0px',
            }"
            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
          >
            <el-table-column
              width="160"
              property="lastUpdateTime"
              label="时间"
              align="center"
            ></el-table-column>
            <el-table-column
              width="110"
              property="windturbineId"
              label="设备"
              align="center"
            ></el-table-column>
            <el-table-column
              width="250"
              property="alertText"
              label="故障信息"
              align="center"
            ></el-table-column>
          </el-table>
        </el-popover>
        <el-popover
          placement="top-start"
          :width="521"
          trigger="hover"
          class="popoverBack"
          :show-arrow="false"
        >
          <template #reference>
            <div class="status-list">
              <img
                class="status-img"
                src="../assets/img/statusbar/malfunction.png"
              />
              <span class="status-label malfunction">故障</span>
              <span>{{ malfunctionNum }}</span>
            </div>
          </template>
          <el-table
            :data="malfunctionData"
            border
            border-color="rgb(36,36,36)"
            max-height="650px"
            :header-cell-style="{
              background: 'Black',
              color: 'rgb(220,220,220)',
              border: '0px',
            }"
            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
          >
            <el-table-column
              width="160"
              property="lastUpdateTime"
              label="时间"
              align="center"
            ></el-table-column>
            <el-table-column
              width="110"
              property="stationName"
              label="设备"
              align="center"
            ></el-table-column>
            <el-table-column
              width="250"
              property="alertText"
              label="故障信息"
              align="center"
            ></el-table-column>
          </el-table>
        </el-popover>
        <el-popover
          placement="top-start"
          :width="521"
          trigger="hover"
          class="popoverBack"
          :show-arrow="false"
        >
          <template #reference>
            <div class="status-list">
              <img
                class="status-img"
                src="../assets/img/statusbar/accident.png"
              />
              <span class="status-label accident">事故</span>
              <span>{{ accidentNum }}</span>
            </div>
          </template>
          <el-table
            :data="accidentData"
            border
            border-color="rgb(36,36,36)"
            max-height="650px"
            :header-cell-style="{
              background: 'Black',
              color: 'rgb(220,220,220)',
              border: '0px',
            }"
            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
          >
            <el-table-column
              width="160"
              property="lastUpdateTime"
              label="时间"
              align="center"
            ></el-table-column>
            <el-table-column
              width="110"
              property="stationName"
              label="设备"
              align="center"
            ></el-table-column>
            <el-table-column
              width="250"
              property="alertText"
              label="故障信息"
              align="center"
            ></el-table-column>
          </el-table>
        </el-popover>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BackgroundData from "../assets/script/BackgroundData";
export default {
  data() {
    return {
      hiddenDangerNum: 0,
      defectNum: 0,
      malfunctionNum: 0,
      accidentNum: 0,
      statusTimer: "",
      currentTime: "",

      hiddenDangerData: new Array(),
      defectData: new Array(),
      malfunctionData: new Array(),
      accidentData: new Array(),
    };
  },
  mounted() {
    let that = this;
    this.statusTimer = setInterval(function () {
      that.currentTime =
        new Date().getFullYear() +
        "-" +
        that.appendZero(new Date().getMonth() + 1) +
        "-" +
        that.appendZero(new Date().getDate()) +
        " " +
        that.appendZero(new Date().getHours()) +
        ":" +
        that.appendZero(new Date().getMinutes()) +
        ": " +
        that.appendZero(new Date().getSeconds());
    }, 1000);
  },
  beforeDestory() {
    clearInterval(this.statusTimer);
    this.statusTimer = null;
  },
  created() {
    this.refreshTimer = setInterval(this.refreshData, 2000);
  },
  methods: {
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    refreshData() {
      var bd = BackgroundData.getInstance();
      this.hiddenDangerNum = bd.HiddenProblems.length;
      this.defectNum = bd.Defects.length;
      this.malfunctionNum = bd.Failure.length;
      this.accidentNum = bd.Accidents.length;

      this.hiddenDangerData = bd.HiddenProblems;
      this.defectData = bd.Defects;
      this.malfunctionData = bd.Failure;
      this.accidentData = bd.Accidents;
      if (this.accidentData.length <= 0) {
        this.accidentData = [
          { lastUpdateTime: "-", stationName: "-", alertText: "-" },
        ];
      }
    },
  },
};
</script>

<style scoped>
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  background-color: black;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #292929;
  border-radius: 6px;
}
span {
  font-size: 13px;
}

.status-bar {
  height: 4vh;
  background-color: #191919;

  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.status-list {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  color: white;
}

.status-label {
  margin-left: 10px;
  margin-right: 10px;
}

.status-img {
  position: relative;
  top: 4px;
  margin-left: 20px;
  width: 20px;
}

.status-label.hidden-danger {
  color: #e6d541;
}

.status-label.defect {
  color: #e69641;
}

.status-label.malfunction {
  color: #d541e6;
}

.status-label.accident {
  color: #af3e3d;
}
</style>