fd_dwgz_zhyw/src/components/lightDetial/index.vue

<template>
  <div style="height: 100%">
    <!-- <div class="wtname">
      :class="colorList[wtInfo.status]" <div class="wt-status"></div> 
      <div class="wt-text">{{ wtname }}</div>
    </div>-->
    <div
      class="wt-top"
      :class="colorFlag ? colorList1[wtInfo.status] : colorList[wtInfo.status]"
    >
      <div class="wt-text">设备名称：{{ wtname }}</div>
      <div class="wt-alarm" @click="handleAlarm(wtInfo)">
        <i
          class="svg-icon svg-icon-sm"
          :class="
            'svg-icon-' +
            (colorFlag ? colorList1[wtInfo.status] : colorList[wtInfo.status])
          "
        >
          <svgIcon svgid="svg-station-surveillance"></svgIcon>
        </i>
        <span>设备报警</span>
      </div>
    </div>
    <div class="part-info">
      <div class="part-body">
        <div class="monitoring-item">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          遥信值
        </div>
        <div class="part-item">
          <div
            class="part"
            :class="{ active: index % 2 === 1 }"
            v-for="(val, index) in currentPartD"
            :key="index"
          >
            <div class="table-item" v-for="(item, ind) in val" :key="ind">
              <div>{{ item.name }}</div>
              <div
                class="table-value"
                :class="item.value == 1 ? 'round-red' : 'round'"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="part-body">
        <div class="monitoring-item">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          遥测值
        </div>
        <div class="part-item">
          <div
            class="part"
            :class="{ active: index % 2 === 1 }"
            v-for="(val, index) in currentPartA"
            :key="index"
          >
            <div class="table-item" v-for="(item, ind) in val" :key="ind">
              <div>{{ item.name }}</div>
              <div class="table-value">
                {{ Number(item.value).toFixed(2) }}
                <div class="unit">{{ item.valueUnit }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <alarmDialog ref="alarmDialog" />
  </div>
</template>
<script>
import { GetWtTelemeteryInfo } from "@/api/factoryMonitor/index.js";
import { GetWtPoints, GetPointsData } from "@/api/points/index.js";
import svgIcon from "@/components/coms/icon/svg-icon.vue";
import alarmDialog from "@/components/alarm";
export default {
  name: "lightDetail",
  components: { svgIcon, alarmDialog },
  props: {
    stationName: {
      type: String,
    },
    leftcellHeight: {
      type: String,
      default: "4vh",
    },
    rightcellHeight: {
      type: String,
      default: "3.25vh",
    },
    partHeight: {
      type: String,
      default: "15vh",
    },
    wind: {
      type: Object,
      default: () => {},
    },
    flag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      wtname: "",
      wtInfo: {},
      colorList: [
        "blue",
        "blue",
        "green",
        "green",
        "red",
        "red",
        "orange",
        "orange",
        "pink",
        "pink",
        "write",
        "write",
        "gray",
        "gray",
      ],
      colorList1: ["blue", "green", "red", "orange", "pink", "write", "gray"],
      partAInfo: [],
      partDInfo: [],
      partAInfos: [],
      partDInfos: [],
      uniformcodesA: [],
      uniformcodesD: [],
      pointsA: [],
      pointsD: [],
      allPartInfo: [],
      currentPartA: [],
      currentPartD: [],
      lightCode: null,
      squareMsg: null,
      squareTelemeteringData: null,
      squareTelecommandData: null,
      inverterData: null,
      timer: "",
      colorFlag: false,
      wpid: "",
    };
  },
  mounted() {
    this.timer = setInterval(async () => {
      this.getPointsData();
    }, 5000);
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
  watch: {
    wind: {
      handler() {
        if (Object.keys(this.wind).length) {
          this.start(this.wind);
        }
      },
    },
    $route: {
      handler(val) {
        if (
          val.path.includes("lightmatrix") ||
          val.path.includes("photovoltaicFacility")
        ) {
          this.colorFlag = true;
        }
      },
      immediate: true,
    },
  },
  methods: {
    clear() {
      this.wtInfo = {};
      this.wtname = "";
      this.partAInfo = [];
      this.partDInfo = [];
      this.partAInfos = [];
      this.partDInfos = [];
      this.uniformcodesA = [];
      this.uniformcodesD = [];
      this.pointsA = [];
      this.pointsD = [];
      this.allPartInfo = [];
      this.currentPartA = [];
      this.currentPartD = [];
    },
    // 页面初始信息
    start(wt) {
      if (Object.keys(wt).length) {
        this.wtInfo = wt;
        this.wpid = wt.wpid;
        this.wtname = wt.wtname;
        this.getPartInfo(wt.wtid);
      } else {
        this.clear();
      }
    },
    // 统一编码
    getPartInfo(wtid) {
      if (this.wtInfo.wtType == -2) {
        if (wtid.length) {
          GetWtTelemeteryInfo({
            part: "nbq",
            wtid: wtid,
          }).then(({ data }) => {
            // 拿到初始获取数据
            this.partAInfo = data.data.AI;
            this.partDInfo = data.data.DI;
            // 拿到数据的uniformcode集合
            this.uniformcodesD = this.partDInfo.length
              ? this.partDInfo.map((item) => item.uniformCode)
              : [];
            this.uniformcodesA = this.partAInfo.length
              ? this.partAInfo.map((item) => item.uniformCode)
              : [];
            // 获取测点数据
            this.getPointsIds(wtid);
          });
        }
      }
    },
    getPointsIds(wtid) {
      let pointsIdsA = new Promise((resolve, reject) => {
        GetWtPoints({
          wtid: wtid,
          uniformcodes: this.uniformcodesA,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            reject("发生错误");
          });
      });
      let pointsIdsD = new Promise((resolve, reject) => {
        GetWtPoints({
          wtid: wtid,
          uniformcodes: this.uniformcodesD,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            // 标记失败后给定某个数据
            reject("发生错误");
          });
      });
      Promise.all([pointsIdsA, pointsIdsD])
        .then((results) => {
          this.pointsA = results[0].data.length
            ? results[0].data.map((item) => (item != null ? item.nemCode : ""))
            : [];
          this.pointsD = results[1].data.length
            ? results[1].data.map((item) => (item != null ? item.nemCode : ""))
            : [];
          this.getPointsData();
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
    getPointsData() {
      let pointsDataA = new Promise((resolve, reject) => {
        GetPointsData({
          pointIds: this.pointsA,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            // 标记失败后给定某个数据
            reject("发生错误");
          });
      });
      let pointsDataD = new Promise((resolve, reject) => {
        GetPointsData({
          pointIds: this.pointsD,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            // 标记失败后给定某个数据
            reject("发生错误");
          });
      });
      Promise.all([pointsDataA, pointsDataD])
        .then((results) => {
          let pointsInfoA = results[0].data.length ? results[0].data : [];
          let pointsInfoD = results[1].data.length ? results[1].data : [];
          let partAInfos = [];
          let partDInfos = [];
          let chunk = 4;
          this.partAInfo.forEach((item, index) => {
            pointsInfoA.forEach((i, ind) => {
              if (index == ind) {
                item.value = i.pointValueInDouble;
              }
            });
          });
          for (let i = 0, j = this.partAInfo.length; i < j; i += chunk) {
            partAInfos.push(this.partAInfo.slice(i, i + chunk));
          }
          this.partDInfo.forEach((item, index) => {
            pointsInfoD.forEach((i, ind) => {
              if (index == ind) {
                item.value = i.pointValueInDouble;
              }
            });
          });
          for (let m = 0, n = this.partDInfo.length; m < n; m += chunk) {
            partDInfos.push(this.partDInfo.slice(m, m + chunk));
          }
          this.currentPartA = partAInfos;
          this.currentPartD = partDInfos;
        })
        .catch((e) => {
          // 失败的时候则返回最先被reject失败状态的值
          console.log("error", e);
        });
    },
    //打开报警页面
    handleAlarm(wtInfo) {
      this.$refs.alarmDialog &&
        this.$refs.alarmDialog.openDialog(
          wtInfo.wtid,
          this.wpid,
          this.wtInfo.wtType
        );
    },
  },
};
</script>
<style lang="less" scoped>
.wtname {
  height: 60px;
  background: rgba(96, 103, 105, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #fff;
  .wt-status {
    width: 32px;
    height: 10px;
    margin: 0 20px;
  }

  .wt-text {
    font-size: 16px;
  }
  &.green {
    .wt-status {
      background: #05bb4c;
    }
    .wt-text {
      color: #05bb4c;
    }
  }
  &.blue {
    .wt-status {
      background: #3c88f7;
    }
    .wt-text {
      color: #3c88f7;
    }
  }
  &.pink {
    .wt-status {
      background: #c530c8;
    }
    .wt-text {
      color: #c530c8;
    }
  }
  &.red {
    .wt-status {
      background: #ba3237;
    }
    .wt-text {
      color: #ba3237;
    }
  }
  &.orange {
    .wt-status {
      background: #e17d24;
    }
    .wt-text {
      color: #e17d24;
    }
  }
  &.white {
    .wt-status {
      background: #fff;
    }
    .wt-text {
      color: #fff;
    }
  }
  &.gray {
    .wt-status {
      background: #606769;
    }
    .wt-text {
      color: #606769;
    }
  }
}
.wt-top {
  height: 60px;
  background: rgba(96, 103, 105, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #fff;
  .wt-text {
    margin-right: 50px;
  }
  .wt-alarm {
    cursor: pointer;
    span {
      margin-left: 5px;
    }
  }
  &.green {
    color: #05bb4c;
  }
  &.blue {
    color: #3c88f7;
  }
  &.pink {
    color: #c530c8;
  }
  &.red {
    color: #ba3237;
  }
  &.orange {
    color: #e17d24;
  }
  &.white {
    color: #fff;
  }
  &.gray {
    color: #606769;
  }
}
.part-info {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column-reverse;

  .part-body {
    width: 100%;
    height: 50%;
    overflow: auto;
    padding-bottom: 20px;
    // background: rgba(11, 12, 12, 0.45);
    background: rgba(96, 103, 105, 0.2);
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .monitoring-item {
      position: relative;
      width: 98%;
      height: 42px;
      border-bottom: 1px solid #363b46;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }

    .point {
      width: 8px;
      height: 1px;
      background-color: #ffffff;
      position: absolute;

      &.point-left {
        left: 0;
      }

      &.point-right {
        right: 0;
      }

      &.top {
        top: -1px;
      }

      &.bottom {
        bottom: -1px;
      }
    }
    .part-item {
      width: 100%;
      height: calc(100% - 42px);
      overflow-y: auto;
    }

    .part {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin-top: 5px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #959595;
      padding: 0 10px;

      .table-item {
        width: 25%;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 33px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #b3b3b3;
        padding: 0 0px;

        .table-value {
          display: flex;
          flex-direction: row;
          align-items: baseline;
          font-family: Arial;
          font-weight: 400;
          color: #05bb4c;
          margin-right: 25px;
          .unit {
            font-size: 12px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #606769;
            margin-left: 5px;
            width: 40px;
          }

          &.round {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #05bb4c;
            margin-right: 90px;
          }

          &.round-red {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: red;
            margin-right: 90px;
          }
        }
      }

      &.active {
        background-color: rgba(83, 89, 104, 0.15);
      }
    }
  }
}
</style>