project-neic/src/components/WindturbineDetailPages.vue

<template>
  <el-dialog
    width="80%"
    @opened="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <div style="margin-top: -10px; color: #ffffff">风机详情</div>
    </template>
    <div class="body">
      <div class="titleList">
        <div class="chunkdiv" @click="handleClick(true)">
          <div class="title">风机号：&emsp;</div>
          <div>{{ windturbine.windturbineId }}</div>
          <!-- <div>
            {{ windturbine.stationId.slice(0, 2) }}-{{ windturbine.code }}
          </div> -->
        </div>
        <div
          class="chunkdiv"
          @click="handleClick(true)"
          @dblclick="dbClicks(baseDate.windSpeed)"
        >
          <div class="title">{{ baseDate.windSpeed.name }}：&emsp;</div>
          <div>{{ baseDate.windSpeed.value }}{{ baseDate.windSpeed.unit }}</div>
        </div>
        <div
          class="chunkdiv"
          @click="handleClick(true)"
          @dblclick="dbClicks({ code: 'YDPJFS5M', name: '五分钟平均风速' })"
        >
          <div class="title">五分钟平均风速：&emsp;</div>
          <div>{{ healthInfo?.averageWindSpeed5?.toFixed(2) }}m/s</div>
        </div>
        <div
          class="chunkdiv"
          @click="handleClick(true)"
          @dblclick="dbClicks(theoreticalPower)"
        >
          <div class="title">理论功率：&emsp;</div>
          <div>{{ healthInfo?.theoreticalPower?.toFixed(2) }}Kw</div>
        </div>
        <div
          class="chunkdiv"
          @click="handleClick(true)"
          @dblclick="dbClicks(baseDate.power)"
        >
          <div class="title">{{ baseDate.power.name }}：&emsp;</div>
          <div>{{ baseDate.power.value }}{{ baseDate.power.unit }}</div>
        </div>
        <div
          class="chunkdiv"
          @click="handleClick(true)"
          @dblclick="dbClicks(baseDate.generatorSpeed)"
        >
          <div class="title">{{ baseDate.generatorSpeed.name }}：&emsp;</div>
          <div>
            {{ baseDate.generatorSpeed.value
            }}{{ baseDate.generatorSpeed.unit }}
          </div>
        </div>
        <div class="chunkdiv" @click="handleClick(false)">
          <div class="title">故障信息: &emsp;{{ faultNum }}</div>
        </div>
      </div>
      <BasicInformationDetail
        v-show="current"
        ref="BasicInfo"
        :types="types"
        @health-click="handleHealth"
        :windturbine="windturbine"
      ></BasicInformationDetail>
      <div class="faultInfo" v-show="!current">
        <div class="left-item">
          <div
            :class="item.openedCount > 0 ? 'faultNameErr' : 'faultName'"
            v-for="(item, index) in fault"
            :key="index"
            @click="handleFaultClick(index)"
          >
            {{ item.component }}
            <div class="faultNum" v-if="item.openedCount > 0">
              ({{ item.openedCount }})
            </div>
          </div>
        </div>
        <div class="right-item">
          <div class="tables">
            <el-table
              :data="faultList"
              class="table"
              style="width: 100%"
              height="67vh"
              stripe
              highlight-current-row
              :header-cell-style="{
                background: 'rgb(30,30,30)',
                color: 'rgb(220,220,220)',
                padding: '4px',
                fontSize: '14px',
                'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
              }"
              :cell-style="tableCellStyle"
            >
              <el-table-column
                prop="id"
                label="报警编号"
                width="200"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="modelId"
                label="风机型号"
                width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="alertText" label="报警信息" align="center">
              </el-table-column>
              <el-table-column label="故障状态" width="120" align="center">
                <template #default="scope">
                  <span>
                    {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import api from "api/index";
import BasicInformationDetail from "./BasicInformationDetail.vue";
import BackgroundData from "utils/BackgroundData";
import Fault from "utils/fault";
export default {
  components: {
    BasicInformationDetail,
  },
  props: {
    windturbine: Object,
  },
  data() {
    return {
      current: true,
      BasicInfo: {},
      healthInfo: {},
      line: "",
      alarmTime: "",
      alarmContent: "",
      alarms: [],
      count: false,
      theoreticalPower: {
        code: "LLGL",
        name: "理论功率",
      },
      typeList: [
        {
          type: 0,
          name: "已经停机",
        },
        {
          type: 1,
          name: "上电",
        },
        {
          type: 2,
          name: "待机",
        },
        {
          type: 3,
          name: "启动",
        },
        {
          type: 4,
          name: "并网",
        },
        {
          type: 5,
          name: "故障",
        },
        {
          type: 6,
          name: "维护",
        },
        {
          type: 7,
          name: "离线",
        },
      ],
      baseDate: {
        windSpeed: {
          name: "",
          num: "",
          unit: "",
        },
        power: {
          name: "",
          num: "",
          unit: "",
        },
        generatorSpeed: {
          name: "",
          num: "",
          unit: "",
        },
      },
      types: null,
      fault: {},
      refreshTimer: "",
      refreshTimers: "",
      faultNum: 0,
      faultList: [],
      // station: [],
    };
  },
  created() {
    this.getUniformCodes();
    // this.getWindturbineFdc();
  },

  methods: {
    // getWindturbineFdc() {
    //   api.getWindturbineFdc().then((res) => {
    //     this.station = res.data;
    //   });
    // },
    handleFaultClick(index) {
      this.faultList = this.fault[index].alertSnaps;
    },
    handleClick(val) {
      this.current = val;
    },
    getUniformCodes() {
      api.getUniformCodes().then((res) => {
        this.UniformCodes = res.data;
      });
    },
    opened() {
      this.line = "";
      this.alarmTime = "";
      this.alarmContent = "";
      this.BasicInfo = this.uniformCodesDeal(this.windturbine);
      this.BasicInfo.windturbineId = this.windturbine.windturbineId;
      // this.dateDeal(this.BasicInfo)
      this.$refs.BasicInfo.start(this.BasicInfo);
      this.initData();
      this.refreshData();
      this.refreshTimer = setInterval(this.refreshData, 5000);
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      let warningColor = false;
      let obj = {};
      if (row.isOpened > 0) {
        warningColor = true;
      }
      if (warningColor) {
        obj = {
          height: "40px",
          background: "rgb(30,30,30)",
          color: "#FF0000",
          padding: "3px",
          fontSize: "12px",
          "border-top": "0px solid #000000",
          "border-bottom": "1px solid #000000",
          "border-right": "1px solid #000000",
        };
      } else {
        obj = {
          height: "40px",
          background: "rgb(30,30,30)",
          color: "rgb(220,220,220)",
          padding: "3px",
          fontSize: "12px",
          "border-top": "0px solid #000000",
          "border-bottom": "1px solid #000000",
          "border-right": "1px solid #000000",
        };
      }

      return obj;
    },
    uniformCodesDeal(windturbine) {
      let val = this.UniformCodes[windturbine.stationId][windturbine.modelId];
      let codes = "";
      val.forEach((element) => {
        element.param.forEach((itm) => {
          codes += itm.code + ",";
        });
      });
      val.codes = codes;
      return val;
    },
    closed() {
      this.$refs.BasicInfo.end();
      this.$emit("close");
      clearInterval(this.refreshTimer);
      clearInterval(this.refreshTimers);
      this.refreshTimers = null;
      this.refreshTimer = null;
    },
    dateDeal(BasicInfo) {
      let showInf = {};
      showInf = BasicInfo.filter((item) => item.tag === "基本信息")[0];
      this.baseDate.windSpeed = showInf.param.filter(
        (item) => item.name === "风速"
      )[0];
      this.baseDate.power = showInf.param.filter(
        (item) => item.name === "有功功率"
      )[0];
      this.baseDate.generatorSpeed = showInf.param.filter(
        (item) => item.name === "发电机转速"
      )[0];
      this.baseDate.type = showInf.param.filter(
        (item) => item.name === "状态"
      )[0].value
        ? this.typeList.filter(
            (status) =>
              status.type ===
              Number(
                showInf.param.filter((item) => item.name === "状态")[0].value
              )
          )[0].name
        : "";
      this.types = Number(
        showInf.param.filter((item) => item.name === "状态")[0].value
      );
    },
    refreshData() {
      let bg = BackgroundData.getInstance();
      bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
      this.dateDeal(this.BasicInfo);
      // clearInterval(this.refreshTimer);
      // this.refreshTimers = setInterval(this.refreshData, 5000);
    },
    initData() {
      api
        .getWindWarning(this.windturbine.windturbineId, "1", "50")
        .then((msg) => {
          let vs = msg.data;
          if (vs.length <= 0) return;
          this.alarmTime = BackgroundData.getInstance().formatDate(
            vs[0].lastUpdateTime
          );
          this.alarmContent = vs[0].alertText;
          this.alarms = msg.data;
          this.$refs.BasicInfo.alarmd(this.alarms);
        })
        .catch((err) => {
          console.log(err);
        });
      api
        .alarmSnap({
          windturbineId: this.windturbine.windturbineId,
        })
        .then((res) => {
          this.fault = res.data;
          this.faultList = res.data[0].alertSnaps;
          let faultNum = 0;
          this.fault.forEach((item) => {
            faultNum = faultNum + item.openedCount;
          });
          this.faultNum = faultNum;
        });
    },
    dbClicks(value) {
      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
    },
    handleHealth(value) {
      this.healthInfo = value;
    },
  },
  watch: {
    windturbine: {
      handler: function (json) {
        if (json) {
          this.initData();
        }
      },
    },
  },
};
</script>
<style scoped>
.my-info-dialog {
  box-shadow: 0px 0px 10px #05bb4c;
}

.body {
  background-color: black;
  margin-top: -30px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -30px;
  border-bottom: 20px solid rgb(36, 36, 36);
}

.chunkdiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 17%;
  background-color: #363636;
  margin: 1px;
  padding: 4px 0px;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
}

.title {
  font-size: 12px;
  color: #b3b3b3;
}

table {
  margin-left: 2px;
  margin-right: 2px;
}

/* td {
		width: 20%;
	} */

el-tabs {
  background-color: black;
}

.svg {
  height: 67vh;
}
.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.faultInfo {
  height: 70vh;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.left-item {
  width: 16%;
  background-color: #4d4d4d;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  align-items: center;
  height: 96%;
  overflow-y: auto;
}
.faultName {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
}
.faultNameErr {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 16px;
  color: red;
  margin-bottom: 15px;
}
.faultNum {
  font-size: 12px;
}
.right-item {
  width: 83%;
  background-color: #4d4d4d;
  margin-left: 15px;
  height: 96%;
  padding-bottom: 20px;
}
.el-table {
  background-color: #000000 !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px !important;
  height: 0px !important;
  background-color: black !important;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #292929 !important;
  border-radius: 6px !important;
}
.tables {
  width: 98%;
  margin: 1%;
}
</style>