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"
            :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">
        <div
          class="part-body"
          style="max-height: 25vh"
        >
          <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: 25vh"
        >
          <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="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 class="problemSeach">
                <el-input v-model="inputcv" clearable placeholder="请输入" />
                <div class="seachBtn">
                    <el-icon :size="18" :color="color">
                        <Search />
                    </el-icon>
                </div>
            </div>
        </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">42</div>
                            <div class="numBot">总故障</div>
                        </div>
                    </div>
                    <div class="warnItems" v-for="(it, index) in 7" :key="index">
                        <div class="warnItemLeft">20</div>
                        <div class="warnItemRight">防雷保护类</div>
                    </div>
                </div>
                <div class="warn" v-for="(it, index) in 2" :key="index">
                    <div class="warnItems" v-for="(it, index) in 10" :key="index">
                        <div class="warnItemLeft" :class="isRed(index)">20</div>
                        <div class="warnItemRight" :class="isRed(index)">防雷保护类</div>
                    </div>
                </div>
            </div>
            <div class="warnTable">
                <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%; height: calc(100% - 310px)"
                    max-height="520px"
                    stripe>
                    <el-table-column
                        v-for="item in 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 == 'status'">
                            <span :style="scope.row.status === 0 ? 'color: red' : ''">{{scope.row.status === 0 ? "异常" : "正常"}}</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": "%"
            },
        ]
      ],
      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
            },
        ]
      ],
      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
        },

      ],
      tableHeader: [
        {
            code: "code",
            name: "报警编号"
        },
        {
            code: "name",
            name: "PCL变量名"
        },
        {
            code: "message",
            name: "报警文字信息"
        },
        {
            code: "status",
            name: "报警状态"
        },
      ],
      warnTypeData: {
        typeData: [],
        tableData: []
      }
    };
  },
  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);
        }
      },
    },
    $route: {
      handler(val) {
        if (
          val.path.includes("lightmatrix") ||
          val.path.includes("detailmatrix") ||
          val.path.includes("draughtFan")
        ) {
          this.colorFlag = true;
        }
      },
      immediate: true,
    },
  },
  methods: {
    getwarnTypeData() {
        let that = this
        let params = {
            wtid: "NX_FGS_HA_F_WT_0039_EQ"
            // wtid: that.wind.wtid
        }
        GetMatrixalarmtype(params).then(res =>{
            if (res && res.data) {
                that.warnTypeData.typeData = res.data
                that.getwarnTableData(res.data[0])
            }
        })
    },
    getwarnTableData(data) {
        let that = this
        let params = {
            type: "BJXT",
            wtid: "NX_FGS_HA_F_WT_0039_EQ"
            // type: data.nemCode,
            // wtid: that.wind.wtid
        }
        GetMatrixalarmtypeTable(params).then(res =>{
            if (res && res.data) {
                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;
      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);
        });
    },
    //打开报警页面
    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(70vw - 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%;
    }
    .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;
      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;
          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);
          }
        }
      }
    }
  }

  .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,.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;
                .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 {
  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: rgb(15, 120, 240);
    margin-right: 25px;
  }
}
</style>