platform_largeScreen/src/components/lightDetial/index.vue

<template>
  <div style="height: 100%">
    <div class="gf-wrapper">
      <div class="gf-img">
        <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 class="wt-info">厂商名称：{{ otherInfo?.manufacturer }}</div> -->
          <div class="wt-xh" @click="handleXhClick(wtInfo)">
            设备型号：{{otherInfo?.manufacturer}} ( {{ otherInfo?.model }} )
          </div>
        </div>
        <img
          class="img"
          style="width: 95%"
          v-if="otherInfo.squareid == 'JZ'"
          src="@/assets/imgs/JZ.png"
          alt=""
        />
        <img
          class="img"
          v-if="otherInfo.squareid == 'ZC'"
          src="@/assets/imgs/ZC.png"
          alt=""
        />
      </div>
      <div class="part-info">
        <div class="part-body yaoxin">
          <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 yaoce">
          <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">
                  {{
                    item.name.includes("状态")
                      ? item.value
                      : Number(item.value).toFixed(2)
                  }}
                  <div v-if="item.valueUnit != 'NULL'" class="unit">
                    {{ item.valueUnit }}
                  </div>
                  <div v-else class="unit"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <alarmDialog ref="alarmDialog" />
    <powerAndSpeed ref="powerAndSpeed" :tabEvent="-2" />
  </div>
</template>
<script>
import {
  GetWtTelemeteryInfo,
  GetWtOtherInfo,
} from "@/api/factoryMonitor/index.js";
import { GetWtPoints, GetPointsData } from "@/api/points/index.js";
import svgIcon from "@/components/coms/icon/svg-icon.vue";
import powerAndSpeed from "@/components/powerAndSpeedSearch/index.vue";
import alarmDialog from "@/components/alarm";
import dataJson from './dataJson.json'
export default {
  name: "lightDetail",
  components: { svgIcon, alarmDialog, powerAndSpeed },
  props: {
    stationName: {
      type: String,
    },
    leftcellHeight: {
      type: String,
      default: "4vh",
    },
    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: "",
      otherInfo: {},
    };
  },
  mounted() {
    // this.timer = setInterval(async () => {
    //   this.getPointsData();
    // }, 5000);
    this.otherInfo = dataJson.otherInfo
    this.currentPartD = dataJson.currentPartD
    this.currentPartA = dataJson.currentPartD

  },
  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: {
    handleXhClick(wind) {
      //   console.log(wind);
      this.$refs.powerAndSpeed && this.$refs.powerAndSpeed.init(wind);
    },
    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);
        this.getWtOtherInfo(wt.wtid);
      } else {
        this.clear();
      }
    },
    // 设备其他信息
    getWtOtherInfo(val) {
      GetWtOtherInfo({ wtid: val }).then((res) => {
        if (res.code == 200) {
          this.otherInfo = res.data;
        }
      });
    },
    // 统一编码
    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>
.wt-top {
  //   height: 60px;
  width: 100%;
  //   background: rgba(96, 103, 105, 0.2);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 16px;
  .wt-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .wt-alarm {
    cursor: pointer;
    span {
      margin-left: 5px;
    }
  }
  .wt-info,
  .wt-xh {
    color: #959595;
  }
  .wt-xh {
    &:hover,
    &:active {
      font-weight: 700;
    }
  }
  &.green {
    color: #05bb4c;
  }
  &.blue {
    color: #3c88f7;
  }
  &.pink {
    color: #c530c8;
  }
  &.red {
    color: #ba3237;
  }
  &.orange {
    color: #e17d24;
  }
  &.white {
    color: #fff;
  }
  &.gray {
    color: #606769;
  }
}
.gf-wrapper {
  width: 100%;
  height: 100%;
  display: flex;

  .gf-img {
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    padding-top: 20px;
    padding-bottom: 150px;
    align-items: center;
    margin-right: 10px;
    background: rgba(96, 103, 105, 0.2);
    img {
      width: 100%;
    }
  }
  .part-info {
    width: calc(100% - 400px - 10px);
    height: 100%;
    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-bottom: 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: #817c7c;
              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);
        }
      }
    }
    .yaoxin {
      margin-bottom: 0;
    }
  }
}
</style>