cesium_three/src/components/windProDetail/windProblem.vue

<template>
  <div class="bodys">
    <div class="parts">
      <div class="part-top">
        <div class="part-title" :data-type="$store.state.moreSty">
          <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 === '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/windimgs/zqfj.png"
          />
        </div>
        <div class="part-imgs" v-else>
          <img
            v-if="current === 'fdj'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/fdj_b.png"
          />
          <img
            v-if="current === 'clx'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/clx_b.png"
          />
          <img
            v-if="current === 'bj'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/bj_b.png"
          />
          <img
            v-if="current === 'ph'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/ph_b.png"
          />
          <img
            v-if="current === 'yy'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/yy_b.png"
          />
          <img
            v-if="current === 'jc'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/jc_b.png"
          />
          <img
            v-if="current === 'qt'"
            class="wind-part"
            :style="{ width: flag ? '650px' : '800px' }"
            src="@/assets/windimgs/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"
                   :data-type="$store.state.moreSty"
                  :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" :data-type="$store.state.moreSty">
                  {{
                    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" :data-type="$store.state.moreSty">
                <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/windimgs/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 warnList1" :key="index">
                        <div class="warnItemLeft">{{it.num}}</div>
                        <div class="warnItemRight">{{it.name}}</div>
                    </div>
                </div>
                <div class="warn" v-for="(it, index) in warnListT" :key="index">
                    <div class="warnItems" v-for="(itv, idx) in it" :key="idx">
                        <div class="warnItemLeft" :class="isRed(idx)">{{itv.num}}</div>
                        <div class="warnItemRight" :class="isRed(idx)">{{itv.name}}</div>
                    </div>
                </div>
            </div>
            <div class="warnTable">
                <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%;"
                    max-height="45vh"
                    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>
  </div>
</template>
<script>
import warnJson from './warnJson.json'
import dataJson from './dataJson.json'
export default {
  name: "windDetail",
  data() {
    return {
        inputcv: "",
      current: "fdj",
      windname: "",
      wtid: "",
      wpid: "",
      windInfo: {},
      monitorInfo: {},
      otherInfo: {},
      partAInfo: [],
      partDInfo: [],
      partAInfos: [],
      partDInfos: [],
      uniformcodesA: [],
      uniformcodesD: [],
      resA: [],
      resD: [],
      indexe: 0,
      videoTit: [],
      dialogVisible: false,
      reliable: {},
      colorList: ["blue", "green", "red", "orange", "pink", "write", "gray"],
      path: ["camera.png", "camera2.png"],
      count: 0,
      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: []
      },
      warnList1: [],
      warnListT: []
    };
  },
  props: {
    wind: {
      type: Object,
      default: () => {},
    },
    flag: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.warnList1 = warnJson.warn1
    this.warnListT = warnJson.warnT
    this.partAInfos = dataJson.data.partAInfos
    this.partDInfos = dataJson.data.partDInfos
  },
  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%;

  .parts {
    // width: calc(100% - 600px - 20px);
    width: calc(70vw - 20px);
    margin-right: 20px;
    height: 82vh;
    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: #3685c5;
        justify-content: center;
        cursor: pointer;
        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);
        &.active {
            background-color: rgba(0, 70, 199, 0.48);
            color: #ffffff;
        }
        

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

        
      }
    }
    .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;
        backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, 0.3);
        // 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: 10vh;
          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%;
                margin-right: 90px;
                background-color: rgba(0, 70, 199, 0.48);
              }

              &.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);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    border-radius: 5px;
    padding: 10px;
    height: 83vh;
    .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: #363b46;
        .problemSeach{
            display: flex;
            .el-input{
                width: 150px;
                position: relative;
                top: -4px;
                margin-right: 5px;
            }
            .seachBtn{
                width: 30px;
                height: 30px;
                border-radius: 30px;
                position: relative;
                margin-left: 5px;
                cursor: pointer;
                background: rgba(0, 70, 199, 0.48);
                &:hover {
                    background-color: rgba(16, 81, 219, 0.5);
                    color: #ffffff;
                }
                .el-icon{
                    position: absolute;
                    top: 6px;
                    left: 7px;
                }
                
            }
            .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: 78px;
                    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%;
                    font-size: 14px;
                    text-align: center;
                    line-height: 28px;
                }
                .warnItemRight{
                    height: 32px;
                    width: 79%;
                    line-height: 28px;
                    font-size: 12px;
                    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: #363b46;
}

.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: #363b46;
  padding: 0 0px;
  .table-value {
    font-family: Arial;
    font-weight: 400;
    margin-right: 25px;
    color: rgb(15, 120, 240);
  }
}
</style>