fd_dwgz_zhyw_nx/src/components/windDetail/index.vue

<template>
  <div class="bodys" :style="{ height: showHeight }">
    <div class="edge" v-if="Object.keys(monitorInfo).length">
      <div class="info" style="position: relative">
        <div class="info-title">
         设备名称： {{ windname }}
          <i
            class="svg-icon svg-icon-sm svg-icon-green"
          >
            <SvgIcon svgid="svg-wind-site"></SvgIcon>
          </i>
          <i  class="svg-icon svg-icon-sm svg-icon-orange">
            <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
          </i>
        </div>

        <div class="info-item">日发电量</div>
        <div class="info-value">
          {{ Number(monitorInfo?.rfdl).toFixed(2) || "0" }}
          <div class="unit">kWh</div>
        </div>
      </div>
      <div class="monitoring">
        <div class="monitoring-item">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          监测信息
        </div>
        <div class="wind-info-list">
          <div class="wind-info">
            风速
            <div class="wind-value">
              {{ Number(monitorInfo?.fs).toFixed(2) }}
              <div class="unit">m/s</div>
            </div>
          </div>
          <div class="wind-info">
            风向
            <div class="wind-value">
              {{ Number(monitorInfo?.fx).toFixed(2) }}
              <div class="unit">°</div>
            </div>
          </div>
          <div class="wind-info">
            实时功率
            <div class="wind-value">
              {{ Number(monitorInfo?.ssgl).toFixed(2) }}
              <div class="unit">kW</div>
            </div>
          </div>
          <div class="wind-info">
            无功功率
            <div class="wind-value">
              {{ Number(monitorInfo?.wggl).toFixed(2) }}
              <div class="unit">kW</div>
            </div>
          </div>
          <div class="wind-info">
            理论功率
            <div class="wind-value">
              {{ Number(monitorInfo?.llgl).toFixed(2) }}
              <div class="unit">kW</div>
            </div>
          </div>
          <div class="wind-info">
            保证功率
            <div class="wind-value">
              {{ Number(monitorInfo?.bzgl).toFixed(2) }}
              <div class="unit">kW</div>
            </div>
          </div>
          <div class="wind-info">
            叶轮转速
            <div class="wind-value">
              {{ Number(monitorInfo?.ylzs).toFixed(2) }}
              <div class="unit">rpm</div>
            </div>
          </div>
          <div class="wind-info">
            故障损失
            <div class="wind-value">
              {{ Number(monitorInfo?.gzss).toFixed(2) }}
              <div class="unit">kWh</div>
            </div>
          </div>
          <div class="wind-info">
            检修损失
            <div class="wind-value">
              {{ Number(monitorInfo?.jxss).toFixed(2) }}
              <div class="unit">kWh</div>
            </div>
          </div>
          <div class="wind-info">
            限电损失
            <div class="wind-value">
              {{ Number(monitorInfo?.xdss).toFixed(2) }}
              <div class="unit">kWh</div>
            </div>
          </div>
          <div class="wind-info">
            性能损失
            <div class="wind-value">
              {{ Number(monitorInfo?.xnss).toFixed(2) }}
              <div class="unit">kWh</div>
            </div>
          </div>
          <div class="wind-info">
            受累损失
            <div class="wind-value">
              {{ Number(monitorInfo?.slss).toFixed(2) }}
              <div class="unit">kWh</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="parts">
      <div class="part-title">
        <div
          class="title-item part-left"
          :class="{ active: current === 'fdj' }"
          @click="handleClick('fdj')"
        >
          发电机
        </div>
        <div
          class="title-item"
          :class="{ active: current === 'clx' }"
          @click="handleClick('clx')"
        >
          齿轮箱
        </div>
        <div
          class="title-item"
          :class="{ active: current === 'bj' }"
          @click="handleClick('bj')"
        >
          变桨
        </div>
        <div
          class="title-item"
          :class="{ active: current === 'ph' }"
          @click="handleClick('ph')"
        >
          偏航
        </div>
        <div
          class="title-item"
          :class="{ active: current === 'yy' }"
          @click="handleClick('yy')"
        >
          液压
        </div>
        <div
          class="title-item"
          :class="{ active: current === 'jc' }"
          @click="handleClick('jc')"
        >
          机舱信息
        </div>
        <div
          class="title-item part-right"
          :class="{ active: current === 'qt' }"
          @click="handleClick('qt')"
        >
          其他
        </div>
      </div>
      <img
        v-if="current === 'fdj'"
        class="wind-part"
        src="@assets/imgs/fdj.png"
      />
      <img
        v-if="current === 'clx'"
        class="wind-part"
        src="@assets/imgs/clx.png"
      />
      <img
        v-if="current === 'bj'"
        class="wind-part"
        src="@assets/imgs/bj.png"
      />
      <img
        v-if="current === 'ph'"
        class="wind-part"
        src="@assets/imgs/ph.png"
      />
      <img
        v-if="current === 'yy'"
        class="wind-part"
        src="@assets/imgs/yy.png"
      />
      <img
        v-if="current === 'jc'"
        class="wind-part"
        src="@assets/imgs/jc.png"
      />
      <img
        v-if="current === 'qt'"
        class="wind-part"
        src="@assets/imgs/qt.png"
      />
      <div class="part-info">
        <div
          class="part-body"
          :style="{ 'max-height': partHeight }"
          v-if="partDInfos.length"
        >
          <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 partDInfos"
              :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"
          :style="{ 'max-height': partHeight }"
          v-if="partAInfos.length"
        >
          <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 partAInfos"
              :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>
    </div>
    <el-dialog
      class="dialogs"
      :destroy-on-close="true"
      v-model="dialogVisible"
      width="90%"
      top="4vh"
      :show-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
          <div class="title">{{ reliable?.SBMC }}</div>
        </div>
      </template>
      <div class="body dialog-body" style="height: 77vh; display: flex">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <div class="videoPlayer" id="ifVideo" style="width: 87%; height: 100%">
          <iframe
            id="ifrId"
            :src="videoTit[indexe].url"
            scrolling="no"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
        <ul style="overflow-y: scroll; margin-left: 20px">
          <div style="margin-bottom: 10px; color: #1c98fe; font-size: 16px">
            监控列表(<span style="color: #f5f7fa">{{ videoTit.length }}</span
            >)
          </div>
          <li
            class="icLi"
            v-for="(item, index) in videoTit"
            style="
              cursor: pointer;
              width: 180px;
              height: 40px;
              font-size: 14px;
              margin-left: 10px;
              line-height: 40px;
              text-align: center;
              margin-top: 20px;
            "
            @click="clickVideo(index)"
            :class="indexe == index ? 'actives' : ''"
            :key="index"
          >
            <p>
              {{ item.name }}
            </p>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetWtPoints, GetPointsData } from "@/api/points/index.js";

import {
  GetWtMonitorInfo,
  GetWtTelemeteryInfo,
} from "@/api/factoryMonitor/index.js";

export default {
  name: "windDetail",
  data() {
    return {
      current: "fdj",
      windname: "",
      wtid: "",
      windInfo: {},
      monitorInfo: {},
      partAInfo: [],
      partDInfo: [],
      partAInfos: [],
      partDInfos: [],
      uniformcodesA: [],
      uniformcodesD: [],
      resA: [],
      resD: [],
      indexe: 0,
      videoTit: [],
      dialogVisible: false,
      reliable: {},
      colorList: ["blue", "green", "red", "orange", "pink", "write", "gray"],
      path: ["camera.png", "camera2.png"],
      count: 0,

      timer: "",
      times: "",
    };
  },
  components: {},
  apiUrl: "",
  props: {
    wind: {
      type: Object,
      default: () => {},
    },
    flag: {
      type: Boolean,
      default: false,
    },
    showHeight: {
      type: String,
      default: "87vh",
    },
    partHeight: {
      type: String,
      default: "15vh",
    },
  },
  computed: {
    windSpeedRota() {
      let count = this.windStatus?.SSPJFS / 25;
      let result = Number((310 * count + 50).toFixed(0));
      if (result) {
        if (result > 310) {
          return "rotateZ(310deg)";
        } else {
          return "rotateZ(" + Number((310 * count + 50).toFixed(0)) + "deg)";
        }
      } else {
        return "rotateZ(50deg)";
      }
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      if (Object.keys(this.windInfo).length) {
        this.getWtMonitorInfo(this.windInfo);
        this.getPointsData(this.resA, this.resD);
      }
    }, 5000);

    this.times = setInterval(() => {
      this.count++;
      if (this.count > 1) {
        this.count = 0;
      }
    }, 800);
    if (document.getElementById("ifrId")) {
      const oIframe = document.getElementById("ifrId");
      const deviceWidth = document.getElementById("ifVideo").offsetWidth;
      const deviceHeight = document.getElementById("ifVideo").offsetHeight;
      oIframe.style.width = deviceWidth + "px";
      oIframe.style.height = deviceHeight + "px";
    }
  },

  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.times);
    this.times = null;
  },
  watch: {
    wind: {
      handler() {
        if (Object.keys(this.wind).length) {
          this.start(this.wind);
        }
      },
    },
  },
  methods: {
    cancle() {
      this.windInfo = {};
      this.windname = "";
      this.wtid = "";
      this.current = "fdj";
      this.monitorInfo = {};
      this.partAInfo = [];
      this.partDInfo = [];
      this.partAInfos = [];
      this.partDInfos = [];
      this.uniformcodesA = [];
      this.uniformcodesD = [];
      this.resA = [];
      this.resD = [];
    },
    // 页面初始信息
    start(val) {
      if (Object.keys(val).length) {
        this.windInfo = val;
        this.windname = val.wtname;
        this.wtid = val.wtid;
        this.current = "fdj";
        this.getWtMonitorInfo(val);
        this.handleClick("fdj");
      } else {
        this.cancle();
      }
    },
    // 设备监测信息
    getWtMonitorInfo(val) {
      if (val.wtType == -1) {
        GetWtMonitorInfo({ wtid: val.wtid }).then(({ data }) => {
          this.monitorInfo = data.data;
          this.monitorInfo.rfdl =
            this.monitorInfo.rfdl < 0 ? 0 : this.monitorInfo.rfdl;
          //   for(var key in this.monitorInfo){
          //     this.monitorInfo[key]=this.monitorInfo[key] < 0 ? 0 : this.monitorInfo[key];
          //   }
        });
      } else {
        this.monitorInfo = {};
      }
    },
    // 查看各部位编码
    handleClick(val) {
      this.current = val;
      if (this.wtid) {
        this.getPartInfo();
      }
    },
    // 统一编码
    getPartInfo() {
      if (this.windInfo.wtType == -1) {
        if (this.wtid.length && this.current) {
          GetWtTelemeteryInfo({
            part: this.current,
            wtid: this.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();
          });
        }
      }
    },
    getPointsIds() {
      let pointsIdsA = new Promise((resolve, reject) => {
        GetWtPoints({
          wtid: this.wtid,
          uniformcodes: this.uniformcodesA,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            reject("发生错误");
          });
      });
      let pointsIdsD = new Promise((resolve, reject) => {
        GetWtPoints({
          wtid: this.wtid,
          uniformcodes: this.uniformcodesD,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            // 标记失败后给定某个数据
            reject("发生错误");
          });
      });
      Promise.all([pointsIdsA, pointsIdsD])
        .then((results) => {
          this.resA = results[0].data.length
            ? results[0].data.map((item) => (item != null ? item.nemCode : ""))
            : [];
          this.resD = results[1].data.length
            ? results[1].data.map((item) => (item != null ? item.nemCode : ""))
            : [];
          this.getPointsData(this.resA, this.resD);
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
    getPointsData(pointsA, pointsD) {
      let pointsDataA = new Promise((resolve, reject) => {
        GetPointsData({
          pointIds: pointsA,
        })
          .then(({ data }) => {
            resolve(data);
          })
          .catch((e) => {
            // 标记失败后给定某个数据
            reject("发生错误");
          });
      });
      let pointsDataD = new Promise((resolve, reject) => {
        GetPointsData({
          pointIds: 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 partAInfo = [];
          let partDInfo = [];
          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) {
            partAInfo.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) {
            partDInfo.push(this.partDInfo.slice(m, m + chunk));
          }
          this.partDInfos = partDInfo;
          this.partAInfos = partAInfo;
        })
        .catch((e) => {
          // 失败的时候则返回最先被reject失败状态的值
          console.log("error", e);
        });
    },
    clickVideo(index) {
      this.indexe = index;
    },

    clivkFun() {
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.icLi {
  background: rgba(0, 70, 199, 0.1);
  border-radius: 20px;
  color: #b3b3b3;
}

.actives {
  background: rgba(0, 70, 199, 0.4);
  border-radius: 20px;
  color: #f5f7fa;
}

.bodys {
  display: flex;
  flex-direction: row;
  width: 100%;

  .edge {
    width: 18%;
    display: flex;
    height: 100%;
    flex-direction: column;

    //
    .info {
      width: 100%;
      flex: 0 0 auto;
      //   background-color: rgba(11, 12, 12, 0.45);
      background-color: rgba(96, 103, 105, 0.2);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .info-title {
        width: 75%;
        height: 25px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color:#606769;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: -40px;
        padding-left: 20px;

        &.green {
          background-color: rgba(5, 187, 76, 0.2);
          border: 1px solid #05bb4c;
          color: #05bb4c;
        }

        &.blue {
          background-color: rgba(0, 70, 199, 0.2);
          border: 1px solid #3c88f7;
          color: #1c99ff;
        }

        &.pink {
          background-color: rgba(197, 48, 200, 0.2);
          border: 1px solid #c530c8;
          color: #c530c8;
        }

        &.red {
          background-color: rgba(186, 50, 55, 0.2);
          border: 1px solid #ba3237;
          color: #ba3237;
        }

        &.orange {
          background-color: rgba(225, 125, 36, 0.2);
          border: 1px solid #e17d24;
          color: #e17d24;
        }

        &.write {
          background-color: rgba(255, 255, 255, 0.2);
          border: 1px solid #ffffff;
          color: #ffffff;
        }

        &.gray {
          background-color: rgba(96, 103, 105, 0.2);
          border: 1px solid #606769;
          color: #606769;
        }
      }

      .info-item {
        width: 90%;
        font-size: 24px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        padding: 20px 0;
      }

      .info-value {
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        font-size: 50px;
        font-family: Arial;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 5px;
        white-space: nowrap;
        .unit {
          font-size: 24px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          margin-right: 20px;
        }
      }
    }

    .monitoring {
      width: 100%;
      flex: 1 0 auto;
      background-color: rgba(96, 103, 105, 0.2);
      //   background-color: rgba(11, 12, 12, 0.45);
      border-radius: 5px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .wind-info-list {
      height: calc(100% - 42px);
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .wind-info {
      flex: 1 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 10%;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #959595;

      .wind-value {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        color: #05bb4c;

        .unit {
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #959595;
          width: 40px;
          margin-left: 15px;
        }
      }
    }
  }

  .parts {
    width: 79%;
    margin-left: 2%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .part-title {
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;

      .title-item {
        width: 140px;
        height: 100%;
        display: flex;
        align-items: center;
        color: #b3bdc0;
        justify-content: center;
        // background: rgba(67, 81, 107, 0.2);
        background: rgba(96, 103, 105, 0.2);
        border-left: 1px solid #3b6c53;
        border-top: 1px solid #3b6c53;
        border-bottom: 1px solid #3b6c53;

        &.part-left {
          border-radius: 15px 0px 0px 15px;
        }

        &.part-right {
          border-right: 1px solid #3b6c53;
          border-radius: 0px 15px 15px 0px;
        }

        &.active {
          //   background-color: rgba(0, 70, 199, 0.4);
          background-color: rgba(0, 199, 19, 0.4);
          color: #ffffff;
        }
      }
    }

    .wind-part {
      width: 700px;
      margin-top: 100px;
    }

    .part-info {
      width: 100%;
      // height: 30vh;
      position: absolute;
      bottom: 0px;
      display: flex;
      flex-direction: column-reverse;
      [v-cloak] {
        display: none;
      }
      .part-body {
        width: 100%;
        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;

        .part-item {
          width: 100%;
          height: 14vh;
          overflow-y: scroll;
        }

        .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;

            .table-value {
              display: flex;
              flex-direction: row;
              align-items: baseline;

              .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);
          }
        }
      }
    }
  }
}

.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;
  }
}

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

  &.point-left {
    left: 0;
  }

  &.point-right {
    right: 0;
  }

  &.top {
    top: -1px;
  }

  &.bottom {
    bottom: -1px;
  }
}

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

  .table-value {
    font-family: Arial;
    font-weight: 400;
    color: #05bb4c;
    margin-right: 25px;
  }
}
</style>