fd_dwgz_zhyw_nx/src/components/windDetail/index.vue

<template>
  <div class="bodys">
    <!-- v-if="Object.keys(monitorInfo).length" -->
    <div class="edge" v-if="0">
      <div class="info" style="position: relative">
        <div class="info-wrapper">
          <!-- <div class="ps-info">
            <div class="ps-title">厂商名称:</div>
            <div class="ps-name">{{ otherInfo?.manufacturer }}</div>
          </div> -->
          <div class="ps-info" @click="handleXhClick(windInfo)">
            <div class="ps-title">设备型号:</div>
            <div class="ps-name">
              {{ otherInfo?.manufacturer }} ( {{ otherInfo?.model }} )
            </div>
          </div>
        </div>
        <div class="info-wrapper">
          <div class="info-title" :class="colorList[monitorInfo.status]">
            <span class="text">设备名称： {{ windname }}</span>
          </div>
          <div class="wt-alarm" @click="handleAlarm(wtid)">
            <i
              class="svg-icon svg-icon-sm"
              :class="'svg-icon-' + colorList[monitorInfo.status]"
            >
              <svgIcon svgid="svg-station-surveillance"></svgIcon>
            </i>
            <span :class="colorList[monitorInfo.status]">设备报警</span>
          </div>
        </div>
        <div class="info-item">
          日发电量
          <div class="info-value">
            {{ Number(monitorInfo?.rfdl).toFixed(2) || "0" }}
            <div class="unit">kWh</div>
          </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-top">
        <div class="part-title">
          <div
            class="title-item part-left"
            :class="{ active: current === 'fdj' }"
            @click="handleClick('fdj')"
          >
            发电机
          </div>
          <div
            v-if="otherInfo?.model != 'XE100-2000'"
            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 part-right"
            :class="{ active: current === 'jc' }"
            @click="handleClick('jc')"
          >
            机舱信息
          </div>
          <!-- <div
            class="title-item part-right"
            :class="{ active: current === 'qt' }"
            @click="handleClick('qt')"
          >
            其他
          </div> -->
          <!-- <div
            class="title-item part-right"
            :class="{ active: current === 'zz' }"
            @click="handleClick('zz')"
          >
            主轴
          </div> -->
        </div>
        <div class="part-imgs" v-if="otherInfo?.model == 'XE100-2000'">
          <img
            class="wind-part"
            :style="{ width: flag ? '450px' : '500px' }"
            src="@assets/imgs/zqfj.png"
          />
        </div>
        <div class="part-imgs" v-else>
          <img
            v-if="current === 'fdj'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/fdj_b.png"
          />
          <img
            v-if="current === 'clx'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/clx_b.png"
          />
          <img
            v-if="current === 'bj'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/bj_b.png"
          />
          <img
            v-if="current === 'ph'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/ph_b.png"
          />
          <img
            v-if="current === 'yy'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/yy_b.png"
          />
          <img
            v-if="current === 'jc'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/jc_b.png"
          />
          <img
            v-if="current === 'qt'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@assets/imgs/qt_b.png"
          />
        </div>
      </div>
      <div class="part-info">
        <!-- v-if="partDInfos.length > 0"  style="max-height: 25vh"-->
        <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 partDInfos"
              :key="index"
            >
              <div class="table-item" v-for="(item, ind) in val" :key="ind">
                <div>{{ item.name }}</div>
                <div class="table-value-di">
                  <span :class="item.value == 1 ? 'round-red' : 'round'">{{
                    item.value == 1 ? "触发" : "未触发"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          class="part-body"
          style="max-height: 25vh"
          v-if="partAInfos.length > 0"
        >
          <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">
                  {{
                    item.name.includes("状态")
                      ? item.value
                      : item.name == "总发电量"
                      ? (item.value / 10000).toFixed(2)
                      : 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>
    <div class="problemsAI" style="color: #fff">
      <div class="part-info-ai">
        <!-- v-if="partAInfos.length > 0" -->
        <div class="part-body-ai">
          <div class="monitoring-item">
            <div class="point point-left bottom"></div>
            <div class="point point-right bottom"></div>
            遥测值
          </div>
          <div class="part-item-ai">
            <div
              class="part-ai"
              :class="{ active: index % 2 === 1 }"
              v-for="(val, index) in partAInfos"
              :key="index"
            >
              <div class="table-item-ai" v-for="(item, ind) in val" :key="ind">
                <div>{{ item.name }}</div>
                <div class="table-value-ai">
                  {{
                    item.name.includes("状态")
                      ? item.value
                      : item.name == "总发电量"
                      ? (item.value / 10000).toFixed(2)
                      : Number(item.value).toFixed(2)
                  }}
                  <div v-if="item.valueUnit != 'NULL'" class="unit-ai">
                    {{ item.valueUnit }}
                  </div>
                  <div v-else class="unit-ai"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="problems" style="color: #fff">
        <div class="problemTit">
            <div class="point point-left bottom"></div>
            <div class="point point-right bottom"></div>
            <span style="font-size: 16px;position: relative;top: -5px;">故障分类</span>
        </div>
        <div class="problemMain">
            <div class="problemWarn">
                <div class="warn">
                    <div class="warnCom">
                        <div class="circle-container">
                            <svg class="circle-segment segment-1" viewBox="0 0 100 100">
                                <circle cx="50" cy="50" r="40"></circle>
                            </svg>
                        </div>
                        <div class="warnComImg">
                            <img src="@/assets/imgs/danger.png" alt="">
                        </div>
                        <div class="warnComNum">
                            <div class="numTop">{{warnTypeData.total}}</div>
                            <div class="numBot">总故障</div>
                        </div>
                    </div>
                    <div class="warnItems" v-for="(it, index) in warnTypeData.dataColumn1" :key="index" @click="getwarnTableDataFn(it)">
                        <div class="warnItemLeft">{{it.count}}</div>
                        <div class="warnItemRight">{{it.name}}</div>
                    </div>
                </div>
                <div class="warn" v-for="(it, index) in warnTypeData.dataColumnOther" :key="index">
                    <div class="warnItems" v-for="(itv, index) in it" :key="index" @click="getwarnTableDataFn(itv)">
                        <div class="warnItemLeft" :class="isRed(index)">{{itv.count}}</div>
                        <div class="warnItemRight" :class="isRed(index)">{{itv.name}}</div>
                    </div>
                </div>
            </div>
            <div class="warnTable">
                <el-table
                    size="mini"
                    :data="warnTypeData.tableData"
                    style="width: 100%; height: calc(100% - 310px)"
                    max-height="580px"
                    stripe>
                    <el-table-column
                        v-for="item in warnTypeData.tableHeader"
                        :label="item.name"
                        :prop="item.code"
                        :key="item.code"
                        :width="item.width || ''"
                        show-overflow-tooltip
                        header-align="center"
                        align="center"
                    >
                    <template #default="scope">
                        <span v-if="item.code == 'isClose'">
                            <span :style="scope.row.isClose ? 'color: red' : 'color: green'">{{scope.row.isClose ? "未解除" : "已解除"}}</span>
                        </span>
                        <span v-else>
                            {{
                                scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
                            }}
                        </span>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div> -->
    <alarmDialog ref="alarmDialog" />
    <powerAndSpeed ref="powerAndSpeed" :tabEvent="-1" />
  </div>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
import { GetWtPoints, GetPointsData } from "@/api/points/index.js";
import powerAndSpeed from "@/components/powerAndSpeedSearch/index.vue";
import {
  GetWtMonitorInfo,
  GetWtTelemeteryInfo,
  GetWtOtherInfo,
  GetMatrixalarmtype,
  GetMatrixalarmtypeTable,
} from "@/api/factoryMonitor/index.js";
import svgIcon from "@/components/coms/icon/svg-icon.vue";
import alarmDialog from "@/components/alarm";
export default {
  name: "windDetail",
  data() {
    return {
      inputcv: "",
      current: "fdj",
      windname: "",
      wtid: "",
      wpid: "",
      windInfo: {},
      monitorInfo: {},
      otherInfo: {},
      partAInfo: [],
      partDInfo: [],
      partAInfos: [
        [
          {
            name: "AI值1",
            value: 10.2,
            valueUnit: "%",
          },
          {
            name: "AI值2",
            value: 23.4,
            valueUnit: "%",
          },
          {
            name: "AI值3",
            value: 32.5,
            valueUnit: "%",
          },
          {
            name: "AI值4",
            value: 54.5,
            valueUnit: "%",
          },
          {
            name: "AI值5",
            value: 14.5,
            valueUnit: "%",
          },
          {
            name: "AI值6",
            value: 54.5,
            valueUnit: "%",
          },
          {
            name: "AI值7",
            value: 14.5,
            valueUnit: "%",
          },
        ],
      ],
      partDInfos: [
        [
          {
            name: "DI值1",
            value: 10.2,
          },
          {
            name: "DI值2",
            value: 23.4,
          },
          {
            name: "DI值3",
            value: 32.5,
          },
          {
            name: "DI值4",
            value: 54.5,
          },
          {
            name: "DI值5",
            value: 14.5,
          },
          {
            name: "DI值6",
            value: 54.5,
          },
          {
            name: "DI值7",
            value: 14.5,
          },
        ],
      ],
      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,
      colorFlag: false,
      timer: "",
      times: "",
      warnLeft: [
        {
          name: "防雷保护类",
          value: 10,
        },
      ],
      tableData: [
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },

        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
        {
          code: "1000",
          name: "变桨电池充电故障",
          message: "error_battery_charger",
          status: 1,
        },
        {
          code: "1002",
          name: "转子侧变流器电流故障",
          message: "error_converter_error_inu_flag",
          status: 0,
        },
      ],

      warnTypeData: {
        total: "",
        typeData: [],
        tableData: [],
        dataColumn1: [],
        dataColumnOther: [],
        tableHeader: [
          {
            code: "alarmId",
            name: "报警编号",
          },
          {
            code: "id",
            name: "PCL变量名",
          },
          {
            code: "tagid",
            name: "报警文字信息",
          },
          {
            code: "isClose",
            name: "报警状态",
          },
        ],
      },
      windObj: {},
    };
  },
  components: { svgIcon, alarmDialog, powerAndSpeed },
  apiUrl: "",
  props: {
    wind: {
      type: Object,
      default: () => {},
    },
    flag: {
      type: Boolean,
      default: false,
    },
  },
  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);
          this.getwarnTypeData(this.wind.wtid);
        }
      },
    },
    $route: {
      handler(val) {
        if (
          val.path.includes("lightmatrix") ||
          val.path.includes("detailmatrix") ||
          val.path.includes("draughtFan")
        ) {
          this.colorFlag = true;
        }
      },
      immediate: true,
    },
  },
  methods: {
    getwarnTypeData(id) {
      let that = this;
      let params = {
        // wtid: "NX_FGS_HA_F_WT_0039_EQ"
        wtid: id,
      };
      GetMatrixalarmtype(params).then((res) => {
        if (res && res.data && res.data.data.length > 0) {
          for (let i = 0; i < res.data.data.length; i++) {
            let item = res.data.data[i];
            for (let k in res.data.count) {
              if (item.nemCode === k) {
                item.count = res.data.count[k];
              }
            }
          }
          that.warnTypeData.total = res.data.count.zs;
          that.warnTypeData.typeData = res.data.data;
          that.warnTypeData.dataColumn1 = that.warnTypeData.typeData.slice(
            0,
            5
          );
          that.warnTypeData.dataColumnOther[0] =
            that.warnTypeData.typeData.slice(5, 13);
          that.warnTypeData.dataColumnOther[1] =
            that.warnTypeData.typeData.slice(13, 21);
          console.log("typeData===>>>", that.warnTypeData.typeData);
          that.getwarnTableData(that.warnTypeData.typeData[0], id);
        }
      });
    },
    getwarnTableDataFn(data) {
      this.getwarnTableData(data, this.wind.wtid);
    },
    getwarnTableData(data, id) {
      let that = this;
      let params = {
        // type: "BJXT",
        // wtid: "NX_FGS_HA_F_WT_0039_EQ",
        type: data.nemCode,
        wtid: id,
      };
      GetMatrixalarmtypeTable(params).then((res) => {
        if (res && res.data) {
          res.data.forEach((it) => {
            it.isClose = it.closeTime ? true : it.endts ? true : false;
          });
          that.warnTypeData.tableData = res.data;
        }
      });
    },
    handleXhClick(wind) {
      //   console.log(wind);
      this.$refs.powerAndSpeed && this.$refs.powerAndSpeed.init(wind);
    },
    isRed(val) {
      if (val === 2 || val === 6) {
        return "redsty";
      }
    },
    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.wpid = val.wpid;
        this.current = "fdj";
        this.getWtMonitorInfo(val);
        this.getWtOtherInfo(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 = {};
      }
    },
    // 设备其他信息
    getWtOtherInfo(val) {
      GetWtOtherInfo({ wtid: val.wtid }).then((res) => {
        if (res.code == 200) {
          this.otherInfo = res.data;
        }
      });
    },
    // 查看各部位编码
    handleClick(val) {
      this.current = val;
      this.partAInfos = [];
      this.partDInfos = [];
      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)
              : [];
            // 获取测点数据
            // if (this.uniformcodesA.length>0 && this.uniformcodesD.length>0) {
            //     this.getPointsIds();
            // } else {
            if (this.uniformcodesA.length > 0) {
              this.getPointsIdOne("AI", this.uniformcodesA);
            }
            if (this.uniformcodesD.length > 0) {
              this.getPointsIdOne("DI", this.uniformcodesD);
            }
            // }
          });
        }
      }
    },
    //查询数据AI和DI同时存在
    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) => {
        if (pointsA.length > 0) {
          GetPointsData({
            pointIds: pointsA,
          })
            .then(({ data }) => {
              resolve(data);
            })
            .catch((e) => {
              // 标记失败后给定某个数据
              reject("发生错误");
            });
        }
      });
      let pointsDataD = new Promise((resolve, reject) => {
        if (pointsD.length > 0) {
          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);
        });
    },
    //查询数据只有AI点或者只有DI点
    getPointsIdOne(type, uniformcodesXo) {
      GetWtPoints({
        wtid: this.wtid,
        uniformcodes: uniformcodesXo,
      })
        .then(({ data }) => {
          if (type === "AI") {
            this.resA = data.data.length
              ? data.data.map((item) => (item != null ? item.nemCode : ""))
              : [];

            if (this.resA.length > 0) {
              this.getPointsDataOne(type, this.resA);
            }
          } else {
            this.resD = data.data.length
              ? data.data.map((item) => (item != null ? item.nemCode : ""))
              : [];
            if (this.resD.length > 0) {
              this.getPointsDataOne(type, this.resD);
            }
          }
        })
        .catch((e) => {
          console.log("发生错误");
        });
    },
    getPointsDataOne(type, pointsData) {
      GetPointsData({
        pointIds: pointsData,
      })
        .then(({ data }) => {
          let pointsInfo = data.data.length ? data.data : [];
          let partAInfo = [];
          let partDInfo = [];
          let chunk = 4;
          if (type === "AI") {
            this.partAInfo.forEach((item, index) => {
              pointsInfo.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.partAInfos = partAInfo;
          } else {
            this.partDInfo.forEach((item, index) => {
              pointsInfo.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;
          }
          console.log("partAInfos===>>>", this.partAInfos);
          console.log("partDInfos===>>>", this.partDInfos);
        })
        .catch((e) => {
          // 标记失败后给定某个数据
          console.log("发生错误");
        });
    },
    //打开报警页面
    handleAlarm(id) {
      this.$refs.alarmDialog &&
        this.$refs.alarmDialog.openDialog(id, this.wpid, this.windInfo.wtType);
    },
    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%;
  height: 100%;
  .edge {
    width: 400px;
    display: flex;
    height: 100%;
    flex-direction: column;

    //
    .info {
      width: 100%;
      flex: 0 0 auto;
      padding: 10px 15px;
      //   background-color: rgba(11, 12, 12, 0.45);
      background-color: rgba(96, 103, 105, 0.2);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      .info-wrapper {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .ps-info {
          display: flex;
          align-items: center;
          margin-bottom: -5px;
          white-space: nowrap;
          color: #959595;
          font-size: 15px;

          div:nth-child(2) {
            cursor: pointer;
            &:hover,
            &:active {
              font-weight: 700;
            }
          }
        }
      }
      .info-title {
        width: 50%;
        height: 25px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        &.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;
        }
      }
      .wt-alarm {
        font-family: Microsoft YaHei;
        font-weight: 400;
        cursor: pointer;
        span {
          margin-left: 5px;
          &.green {
            color: #05bb4c;
          }

          &.blue {
            color: #1c99ff;
          }

          &.pink {
            color: #c530c8;
          }

          &.red {
            color: #ba3237;
          }

          &.orange {
            color: #e17d24;
          }

          &.write {
            color: #ffffff;
          }

          &.gray {
            color: #606769;
          }
        }
        &:hover,
        &:active {
          span {
            font-weight: 700;
            font-size: 16px;
          }
        }
      }
      .info-item {
        font-size: 24px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .info-value {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        font-size: 40px;
        font-family: Arial;
        font-weight: 400;
        color: #05bb4c;
        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: calc(100% - 600px - 20px);
    width: calc(68vw - 20px);
    // width: calc(99vw - 20px);
    margin-right: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    // position: relative;
    .part-top {
      flex: 1;
      width: 100%;
      height: 70vh;
    }
    .part-title {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: flex-start;
      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 rgba(0, 70, 199, 0.48);
        border-top: 1px solid rgba(0, 70, 199, 0.48);
        border-bottom: 1px solid rgba(0, 70, 199, 0.48);

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

        &.part-right {
          border-right: 1px solid rgba(0, 70, 199, 0.48);
          border-radius: 0px 15px 15px 0px;
        }

        &.active {
          //   background-color: rgba(0, 70, 199, 0.4);
          background-color: rgba(0, 70, 199, 0.48);
          color: #ffffff;
        }
      }
    }
    .part-imgs {
      min-height: calc(100% - 30px);
      position: relative;
    }
    .wind-part {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .part-info {
      width: 100%;
      //   max-height: 50vh;
      height: 30vh;
      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: calc(100% - 42px);
          overflow-y: scroll;
        }

        .part {
          width: 100%;
          display: flex;
          //   flex-direction: row;
          flex-wrap: wrap;
          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: #817c7c;
                margin-left: 5px;
                width: 40px;
              }

              &.round {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: rgba(0, 70, 199, 0.48);
                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);
          }
        }
      }
    }
  }

  .problemsAI {
    width: 32vw;
    // background: rgba(96, 103, 105, 0.2);
    border-radius: 5px;
    padding: 10px;
    .part-info-ai {
      width: 100%;
      height: 100%;
      bottom: 0px;
      display: flex;
      flex-direction: column-reverse;
      [v-cloak] {
        display: none;
      }
      .part-body-ai {
        width: 100%;
        height: 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-ai {
          width: 100%;
          //   height: calc(100% - 42px);
          height: 100%;
          overflow-y: scroll;
        }

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

          .table-item-ai {
            width: 50%;
            font-size: 12px;

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

              .unit-ai {
                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: rgba(0, 70, 199, 0.48);
                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);
          }
        }
      }
    }
  }

  .problems {
    width: 30vw;
    background: rgba(96, 103, 105, 0.2);
    border-radius: 5px;
    padding: 10px;
    .problemTit {
      display: flex;
      justify-content: space-between;
      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;

      .problemSeach {
        display: flex;
        .el-input {
          width: 150px;
          position: relative;
          top: -4px;
          margin-right: 5px;
        }
        .seachBtn {
          width: 30px;
          height: 30px;
          background: rgba(0, 70, 199, 0.48);
          border-radius: 30px;
          position: relative;
          margin-left: 5px;
          cursor: pointer;
          .el-icon {
            position: absolute;
            top: 6px;
            left: 7px;
          }
          &:hover {
            background-color: rgba(16, 81, 219, 0.5);
            color: #ffffff;
          }
        }
        .buttons {
          background-color: rgba(5, 187, 76, 0.2);
          border: 1px solid #3b6c53;
          color: #b3b3b3;
          font-size: 14px;
          width: 40px;
          height: 30px;
          position: relative;
          padding: 0 25px !important;
          .button {
            position: absolute;
            left: 13px;
            top: 7px;
          }

          &:hover {
            background-color: rgba(5, 187, 76, 0.5);
            color: #ffffff;
          }
        }
      }
    }
    .problemMain {
      .problemWarn {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .warn {
          width: 32%;
        }
        .warnCom {
          width: 100%;
          height: 100px;
          // border: 1px solid rgba(255,0,0,0.8);
          margin-bottom: 5px;
          box-shadow: inset 0px 0px 40px 0px red;
          animation: flash 1s infinite alternate; /* 闪烁动画 */
          .warnComImg {
            width: 50px;
            height: 50px;
            text-align: center;
            border-radius: 50px;
            border: 1px solid rgba(255, 0, 0, 0.3);
            position: relative;
            top: -74px;
            left: 22px;
            img {
              position: relative;
              top: 5px;
            }
          }
          .warnComNum {
            position: relative;
            top: -119px;
            left: 88px;
            width: 55px;
            .numTop {
              font-size: 22px;
              font-weight: bold;
              color: red;
              text-align: end;
            }
            .numBot {
              font-size: 14px;
              color: rgb(136, 136, 136);
              position: absolute;
              right: 0;
              top: 21px;
            }
          }
          .circle-container {
            width: 100px;
            height: 100px;
            position: relative;
          }
          .circle-segment {
            position: absolute;
            top: 20%;
            left: 17%;
            width: 60px;
            height: 60px;
            transform-origin: center;
            transform: translate(-50%, -50%);
            stroke-width: 5;
            fill: none;
            stroke-dasharray: 50, 30; /* 圆周长三分之一加间隔 */
            stroke-dashoffset: 0;
            animation: rotate 4s linear infinite;
          }
          .segment-1 {
            stroke: red;
            transform: rotate(0deg);
          }

          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
        @keyframes flash {
          from {
            box-shadow: inset 0 0 10px #e60101; /* 开始时的内阴影 */
          }
          to {
            box-shadow: inset 0 0 40px #f00; /* 结束时的内阴影，颜色更亮或更大 */
          }
        }
        .warnItems {
          width: 100%;
          display: flex;
          color: #817c7c;
          margin-bottom: 3px;
          cursor: pointer;
          .warnItemLeft {
            height: 32px;
            width: 20%;
            border: 1px solid #817c7c;
            margin-right: 1%;
            text-align: center;
            line-height: 28px;
          }
          .warnItemRight {
            height: 32px;
            width: 79%;
            line-height: 28px;
            border: 1px solid #817c7c;
            padding-left: 5px;
          }

          .redsty {
            border: 1px solid red;
            color: red;
          }
        }
      }
      .warnTable {
        margin-top: 10px;
      }
    }
  }
}

.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,
.table-item-ai {
  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,
  .table-value-ai {
    font-family: Arial;
    font-weight: 400;
    color: rgb(15, 120, 240);
    margin-right: 25px;
  }
  .table-value-di {
    font-family: Arial;
    font-weight: 400;
    color: rgb(15, 120, 240);
    margin-right: 25px;
    .round {
      width: 30px;
      height: 18px;
    //   color: rgba(0, 70, 199, 0.88);
    color: rgb(15, 120, 240);
      margin-right: 90px;
    }

    .round-red {
      width: 30px;
      height: 18px;
      color: red;
      margin-right: 90px;
    }
  }
}
</style>