project-neic/src/components/temperatureMatrix.vue

<template>
  <el-dialog
    width="70%"
    @open="opened"
    @closed="closed"
    :fullscreen="true"
    :show-close="true"
    class="dialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">温度矩阵</div>
      </div>
    </template>
    <div class="body">
      <div class="title">
        <div
          :class="current === item.id ? 'title-onItem' : 'title-item'"
          v-for="(item, index) in stationList"
          :key="index"
          @click="handleChange(item.id)"
        >
          {{ item.address }}
        </div>
      </div>
      <div class="tables">
        <el-table
          :data="tableData"
          class="table"
          style="width: 100%"
          height="83vh"
          stripe
          :header-cell-style="{
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '4px',
            fontSize: '14px',
            border: 'solid 1px rgba(77, 77, 77, 1)',
          }"
          :cell-style="tableCellStyle"
        >
          <el-table-column
            prop="windturbineId"
            label="风机"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationId"
            label="风场"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="windSpeed"
            label="风速"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="power" label="功率" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="rollSpeed"
            label="发电机转速"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-for="(item, index) in contentList"
            :key="index"
            :label="item.name"
            align="center"
          >
            <el-table-column
              v-for="(res, index) in item.children"
              :prop="res.name"
              :key="index"
              :label="res.name"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import api from "api/index";
export default {
  data() {
    return {
      contentList: [],
      tableData: [],
      partsArr: [],
      coordinates: [],
      stationList: [],
      current: "all",
    };
  },
  mounted() {},
  methods: {
    opened() {
      let stationList = [
        {
          id: "all",
          address: "全部风机",
        },
      ];
      let stations = this.$store.state.stationList;
      stations.forEach((item) => {
        if (item.id.indexOf("FDC") != -1) {
          stationList.push(item);
        }
      });
      this.stationList = stationList;
      this.coordinates = [];
      this.getData("");
    },
    handleChange(val) {
      this.current = val;
      this.getData(val === "all" ? "" : val);
    },
    getData(val) {
      api.temperatureInfo(val).then((res) => {
        let contentList = [];
        let tableDatas = [];
        res.data.forEach((item, index) => {
          let tableData = {};
          tableData.windturbineId = item.windturbineId;
          tableData.windSpeed = item.windSpeed.toFixed(1);
          tableData.stationId = item.stationId;
          tableData.rollSpeed = item.rollSpeed.toFixed(1);
          tableData.power = item.power.toFixed(1);
          item.temperatureComponentInfos.forEach((val) => {
            if (index === 0) {
              let obj = {
                children: [],
              };
              obj.name = val.name;
              val.temperatureItemInfos.forEach((temp) => {
                if (index === 0) {
                  let str = {};
                  str.name = temp.name;
                  obj.children.push(str);
                }
                tableData[temp.name] = temp.value.toFixed(1);
                tableData[`${temp.name}Status`] = temp.status;
              });
              contentList.push(obj);
            } else {
              val.temperatureItemInfos.forEach((temp) => {
                tableData[temp.name] = temp.value.toFixed(1);
                tableData[`${temp.name}Status`] = temp.status;
              });
            }
          });
          tableDatas.push(tableData);
        });
        this.contentList = contentList;
        let arr = [];
        this.contentList.forEach((item) => {
          item.children.forEach((val) => {
            arr.push(val.name);
          });
        });
        this.partsArr = arr;
        tableDatas.forEach((item, indexx) => {
          for (const key in item) {
            if (item[key] === "BadPoint") {
              this.partsArr.forEach((val, indexy) => {
                if (key === `${val}Status`) {
                  this.coordinates.push(`${indexx},${indexy + 5}`);
                }
              });
            }
          }
        });
        this.tableData = tableDatas;
      });
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      let warningColor = false;
      let obj = {};
      this.coordinates.forEach((item) => {
        let arr = item.split(",");
        if (Number(arr[0]) === rowIndex && Number(arr[1]) === columnIndex) {
          warningColor = true;
        }
      });
      if (warningColor) {
        obj = {
          height: "40px",
          background: "rgba(186, 50, 55, 1)",
          color: "#FFFFFF",
          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;
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  background-color: #000000;
  height: 89vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
}
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 3vw;
  padding-top: 8px;
  position: absolute;
  width: 100%;
  background-color: #000000;
  padding-bottom: 10px;

  .title-item {
    background-color: #242424;
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }
  .title-onItem {
    background-color: rgba(37, 116, 219, 1);
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }
}
.tables {
  margin-left: 3vw;
  padding-top: 50px;
}
.el-table {
  position: static;
  background-color: #141414;
  border: 1px solid #000000;
}
</style>