<template>
  <div class="monitor" v-loading="loading">
    <div class="monitor-top">
      <img
        class="title-left"
        src="../../../assets/images/title-left.png"
        alt=""
      />
      <img
        class="title-center"
        src="../../../assets/images/title-center.png"
        alt=""
        @click="goSys"
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title" @click="goSys">洗衣房蒸汽机监测</div>
      <!-- logo -->
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
      <div class="nowTime">{{ formattedDate }}</div>
      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
      <img
        class="icon_warning"
        src="../../../assets/images/warning.png"
        title="报警记录"
        @click="goWarning"
        v-if="isShowWarning"
        alt=""
      />
      <img
        class="icon_home"
        src="../../../assets/images/icon_home.png"
        title="首页"
        @click="goSys"
        alt=""
      />
      <img
        class="back-icon"
        src="../../../assets/images/back-icon.png"
        title="返回"
        @click="goBack"
        alt=""
      />
    </div>
    <div class="boiler">
      <div class="boiler-top">
        <div class="boiler-relative">
          <!-- 锅炉定位 -->
          <img
            src="../../../assets/images/boiler.png"
            class="boiler-img"
            alt=""
          />
          <!-- 其他文字定位 -->
          <div class="status-div">
            <div>当前工作状态</div>
            <div class="status-text">
              {{ getStatusText(getStatusValue("DB611658")) }}
            </div>
          </div>
          <div class="fire-div">
            <div>火焰强度</div>
            <div class="fire-text">
              {{ getStatusValue("DB611724") }}
            </div>
          </div>
          <div class="runtime-div">
            <div>设备运行时长</div>
            <div class="fire-text">
              {{ formatToOneDecimal(getStatusValue("DB8296") / 60) }}小时
            </div>
          </div>
          <div class="other-div">
            <div class="other-li">
              <div>当前压力</div>
              <div class="mpa">{{ getStatusValue("DB611500") }} Mpa</div>
            </div>
            <div class="other-li">
              <div>设定压力</div>
              <div class="mpa">{{ getStatusValue("DBW611598") }} Mpa</div>
            </div>
            <div class="other-li">
              <div>启动压差</div>
              <div class="mpa">{{ getStatusValue("DBW611600") }} Mpa</div>
            </div>
            <div class="other-li">
              <div>停止压差</div>
              <div class="mpa">{{ getStatusValue("DBW611602") }} Mpa</div>
            </div>
          </div>
          <div class="flow-other-div">
            <div class="other-li">
              <div>温度瞬值</div>
              <div class="mpa">{{ getStatusValue("PLC1500_DB8300") }} ℃</div>
            </div>
            <div class="other-li">
              <div>压力瞬值</div>
              <div class="mpa">{{ getStatusValue("PLC1500_DB8304") }} Mpa</div>
            </div>
            <div class="other-li">
              <div>流量瞬值</div>
              <div class="mpa">{{ getStatusValue("PLC1500_DB8308") }} t/h</div>
            </div>
            <div class="other-li">
              <div>流量累计</div>
              <div class="mpa">{{ getStatusValue("PLC1500_DB8320") }} t</div>
            </div>
          </div>
          <div></div>
          <div class="air">空气</div>
          <div class="gas">燃气</div>
          <div class="flue-div">
            <div class="flue-text">{{ getStatusValue("DB611496") }}℃</div>
            <div>烟气</div>
          </div>
          <!-- 锅炉上方百分比 -->
          <div class="orange">{{ getStatusValue("DB611514_1") }}%</div>
          <!-- 火焰 -->
          <img
            src="../../../assets/images/boilerWork.gif"
            class="boilerWork"
            :style="{
              display: getStatusValue('DB611724') > 100 ? 'block' : 'none',
            }"
            alt=""
          />
          <!-- 锅炉侧边水位 -->
          <div class="level">{{ getStatusValue("DB611736") }}%</div>
          <div class="waterlevel">
            <div
              class="progress"
              :style="{ height: (getStatusValue('DB611736') || 0) + '%' }"
            ></div>
          </div>
          <!-- 燃气阀 -->
          <img
            class="gasValve-img"
            :src="
              getStatusValue('DBB611629') > 0
                ? require('../../../assets/images/gasWork.png')
                : require('../../../assets/images/gasStop.png')
            "
            alt=""
          />
          <div class="mainValve">主阀</div>
          <img
            class="mainValve-img"
            :src="
              getStatusValue('DBB611640') > 0
                ? require('../../../assets/images/workValve.png')
                : require('../../../assets/images/stopValve.png')
            "
            alt=""
          />
          <div class="auxiliaryValve">副阀</div>
          <img
            class="auxiliaryValve-img"
            :src="
              getStatusValue('DBB611639') > 0
                ? require('../../../assets/images/workValve.png')
                : require('../../../assets/images/stopValve.png')
            "
            alt=""
          />
          <div class="fan-div">
            <div class="fan-text">{{ getStatusValue("DB611514") }}rpm</div>
            <div>风机</div>
          </div>
          <img
            class="blade1"
            :class="{ move: getStatusValue('DB611514') > 0 }"
            src="../../../assets/images/blade2.png"
            alt=""
          />
          <div class="waterPump-div">
            <div>水泵</div>
            <!-- <div class="pump-text">手动加水停</div> -->
          </div>
          <img
            class="blade2"
            :class="{
              move:
                getStatusValue('DBB611635') > 0 ||
                getStatusValue('DBB611637') > 0,
            }"
            src="../../../assets/images/blade1.png"
            alt=""
          />
          <div class="waterBox">水箱</div>
        </div>
        <div class="special-div">
          <div class="special-top">
            <div class="special-title">
              <div class="title-left">
                <div>当前报警信息</div>
              </div>
            </div>
          </div>
          <div class="warn-list">
            <div
              class="warn-li"
              v-for="(item, index) in steamBoilerData.alarmDatas"
              :key="index"
            >
              <div
                class="warn-left"
                :class="item.curValue == 1 ? 'alarm-left' : ''"
              >
                <img
                  src="../../../assets/images/alarm.png"
                  class="alarm-icon"
                  alt=""
                />
              </div>
              <div class="warn-right">{{ item.otherName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="boiler-bottom">
        <div class="special-div one">
          <div class="special-top">
            <div class="special-title">
              <div class="title-left">
                <div>模拟量监测</div>
              </div>
            </div>
          </div>
          <div class="boiler-monitor">
            <div
              class="monitor-li"
              v-for="(item, index) in steamBoilerData.aoDatas"
              :key="index"
            >
              {{ item.otherName }}:{{
                item.curValue !== null && item.curValue !== undefined
                  ? item.curValue
                  : "--"
              }}{{ item.unit || "" }}
            </div>
          </div>
        </div>
        <div class="special-div two">
          <div class="special-top">
            <div class="special-title">
              <div class="title-left">
                <div>继电器</div>
              </div>
            </div>
          </div>
          <div class="relay">
            <div
              class="relay-li"
              v-for="(item, index) in steamBoilerData.doDatas"
              :key="index"
            >
              <div :class="[item.curValue == 1 ? 'relay-open' : 'relay-close']">
                {{ item.curValue == 1 ? "ON" : "OFF" }}
              </div>
              <div>{{ item.otherName }}</div>
            </div>
          </div>
        </div>
        <div class="special-div three">
          <div class="special-top">
            <div class="special-title">
              <div class="title-left">
                <div>端口输入</div>
              </div>
            </div>
          </div>
          <div class="port">
            <div
              v-for="(item, index) in this.steamBoilerData.diDatas"
              :key="index"
              :class="[
                'port-li',
                item.curValue == 1 ? 'port-open' : 'port-close',
              ]"
            >
              {{ item.otherName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { steamBoilerBoiler } from "@/api/boiler/steamBoiler";
import { getDay } from "@/utils/datetime";
export default {
  name: "boilerMonitorDetails",
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      nowTimer: null,
      timer: null, // 用于存储定时器 ID
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
      currentWeekday: "",
      // 蒸汽锅炉数据
      // 蒸汽锅炉数据
      steamBoilerData: {
        diDatas: [],
        doDatas: [],
        aoDatas: [],
        runDatas: [],
        alarmDatas: [],
      },
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(this.currentDate.getDate()).padStart(2, "0");
      const hours = String(this.currentDate.getHours()).padStart(2, "0");
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekDay = weekDays[this.currentDate.getDay()];
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
    },
  },
  created() {
    const weekdays = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const dayIndex = date.getDay();
    this.currentWeekday = weekdays[dayIndex];
    console.log("今天是星期几", this.currentWeekday);
  },
  mounted() {
    this.getAlarnStatus();
    this.getDayData();
    // 在组件挂载后尝试进入全屏
    setTimeout(() => {
      this.requestFullscreen();
    }, 100); // 延迟 100 毫秒执行全屏操作
    // 获取蒸汽锅炉数据
    this.getSteamBoiler();
    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      this.getAlarnStatus();
      this.getDayData();
      this.getSteamBoiler();
    }, 10000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // Format number to one decimal place
    formatToOneDecimal(value) {
      if (value === null || value === undefined) {
        return null;
      }

      const num = parseFloat(value);
      if (isNaN(num)) {
        return value;
      }

      return num.toFixed(1);
    },
    // Get status value from runDatas where mtNum = DB611658
    getStatusValue(mtNum) {
      if (
        !this.steamBoilerData.runDatas ||
        !Array.isArray(this.steamBoilerData.runDatas)
      ) {
        return null;
      }

      const statusItem = this.steamBoilerData.runDatas.find(
        (item) =>
          item.mtNum === mtNum &&
          item.curValue !== null &&
          item.curValue !== undefined
      );

      return statusItem ? statusItem.curValue : null;
    },

    // Get status text based on status value
    getStatusText(statusValue) {
      if (statusValue === null || statusValue === undefined) {
        return "未知";
      }

      const statusMap = {
        0: "上电延时",
        1: "关机",
        2: "待机",
        3: "前清扫",
        4: "预点火",
        5: "点火",
        6: "传火",
        7: "工作",
        8: "后清扫",
        9: "故障",
        10: "小火保持",
        11: "自检",
        12: "检漏",
        13: "开点火器",
        14: "启动等待中",
      };

      return statusMap[statusValue] || "未知";
    },
    getSteamBoiler() {
      // type 0：代表查询动画界面数据，1：代表查询模拟量监测数据，2：代表查询继电器数据，3：查询端口输入数据，4：代表查询报警数据
      // 0：代表查询动画界面数据
      let queryData = {
        systemType: "3",
        type: 0,
      };
      steamBoilerBoiler(queryData).then((res) => {
        if (res.code == 200) {
          this.steamBoilerData.runDatas = res.rows;
          console.log("蒸汽锅炉数据", this.steamBoilerData.runDatas);
        }
      });
      // 1：代表查询模拟量监测数据
      queryData.type = 1;
      steamBoilerBoiler(queryData).then((res) => {
        if (res.code == 200) {
          this.steamBoilerData.aoDatas = res.rows;
          console.log("蒸汽锅炉模拟量监测数据", this.steamBoilerData.aoDatas);
        }
      });
      // 2：代表查询继电器数据
      queryData.type = 2;
      steamBoilerBoiler(queryData).then((res) => {
        if (res.code == 200) {
          this.steamBoilerData.doDatas = res.rows;
          console.log("蒸汽锅炉继电器数据", this.steamBoilerData.doDatas);
        }
      });
      // 3：代表查询端口输入数据
      queryData.type = 3;
      steamBoilerBoiler(queryData).then((res) => {
        if (res.code == 200) {
          this.steamBoilerData.diDatas = res.rows;
          console.log("蒸汽锅炉端口输入数据", this.steamBoilerData.diDatas);
        }
      });
      // 4：代表报警数据
      queryData.type = 4;
      steamBoilerBoiler(queryData).then((res) => {
        if (res.code == 200) {
          this.steamBoilerData.alarmDatas = res.rows;
          console.log("蒸汽锅炉报警数据", this.steamBoilerData.alarmDatas);
        }
      });
    },
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    },
    // 进入系统首页
    goSys() {
      // this.exitFullscreen();
      this.$router.push("/");
    },
    // 返回上一页
    goBack() {
      window.history.go(-2);
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    // 报警列表
    getAlarnStatus() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: "0",
      };
      let timeArr = [getDay(0), getDay(0)];
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          this.isShowWarning = true;
        } else {
          this.isShowWarning = false;
        }
      });
    },
    goWarning() {
      // this.exitFullscreen();
      this.$router.push("/alarm/alarmRecord");
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  color: #fff;
  .monitor-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.1rem 0.2rem;
    position: relative;
    .title-left {
      width: 3.41rem;
      height: 0.8rem;
    }
    .title-center {
      width: 9.46rem;
      height: 0.8rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.78rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
      cursor: pointer;
    }
    .nowTime {
      position: absolute;
      top: 0.37rem;
      right: 0.6rem;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .sys-logo {
      width: 1.8rem;
      height: 0.5rem;
      position: absolute;
      top: 0.26rem;
      left: 0.8rem;
      z-index: 10;
    }
    .monitor-time {
      position: absolute;
      top: 0.44rem;
      left: 4.2rem;
      z-index: 10;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
    }
    .icon_warning {
      position: absolute;
      top: 0.39rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
      /* 添加闪烁动画 */
      animation: blink 1s infinite;
    }
    @keyframes blink {
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }
    .icon_home {
      position: absolute;
      top: 0.39rem;
      right: 4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.39rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      cursor: pointer;
    }
  }
  .boiler {
    width: 100%;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    .boiler-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: nowrap;
      margin-bottom: 0.35rem;
      .boiler-relative {
        width: 58%;
        position: relative;
        height: 5.6rem;
        font-size: 0.16rem;
        color: #fff;
        .boiler-img {
          width: 8.9rem;
          height: 4.5rem;
          position: absolute;
          bottom: 0;
          left: 1.2rem;
        }
        .air {
          position: absolute;
          top: 1.2rem;
          left: 1.1rem;
        }
        .gas {
          position: absolute;
          top: 1.2rem;
          left: 2.4rem;
        }
        .mainValve {
          position: absolute;
          top: 2.9rem;
          left: 2rem;
        }
        .auxiliaryValve {
          position: absolute;
          top: 3.8rem;
          left: 2rem;
        }
        .gasValve-img {
          position: absolute;
          top: 1.73rem;
          left: 2.6rem;
          width: 0.5rem;
          height: 0.4rem;
        }
        .mainValve-img {
          position: absolute;
          top: 2.81rem;
          left: 2.6rem;
          width: 0.6rem;
          height: 0.5rem;
        }
        .auxiliaryValve-img {
          position: absolute;
          top: 3.67rem;
          left: 2.6rem;
          width: 0.6rem;
          height: 0.5rem;
        }
        .other-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: -0.1rem;
          left: 7.3rem;
          .other-li {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            margin-bottom: 0.1rem;
            .mpa {
              color: #eb6912;
              font-weight: bold;
              margin-left: 0.2rem;
              text-align: center;
            }
          }
        }
        .flow-other-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: -0.1rem;
          left: 9.2rem;
          .other-li {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            margin-bottom: 0.1rem;
            .mpa {
              color: #eb6912;
              font-weight: bold;
              margin-left: 0.2rem;
              text-align: center;
            }
          }
        }
        .fan-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 4.2rem;
          left: 3.83rem;
          .fan-text {
            margin-bottom: 0.01rem;
            font-weight: bold;
          }
        }
        .blade1 {
          position: absolute;
          top: 4.67rem;
          left: 3.76rem;
          width: 0.8rem;
          height: 0.8rem;
        }
        .blade2 {
          position: absolute;
          top: 3.34rem;
          left: 7.74rem;
          width: 0.6rem;
          height: 0.6rem;
        }
        .move {
          animation: continuousRotation 3s linear infinite;
        }
        @keyframes continuousRotation {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .flue-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 1rem;
          left: 3.65rem;
          .flue-text {
            margin-bottom: 0.01rem;
            color: #eb6912;
            font-weight: bold;
          }
        }
        .orange {
          position: absolute;
          top: 1.65rem;
          left: 5.4rem;
          font-weight: bold;
        }
        .level {
          position: absolute;
          top: 1.7rem;
          left: 7.5rem;
          font-weight: bold;
        }
        .waterlevel {
          width: 0.46rem;
          height: 1.425rem;
          // background-color: #dff1fa;
          margin-left: 2%;
          position: absolute;
          top: 1.15rem;
          left: 6.71rem;
          // border: solid 0.01rem #11aaea;
          border-radius: 0.04rem;
          overflow: hidden;
          z-index: 3;
          .progress {
            background-color: #1167db;
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 3;
          }
        }
        .waterBox {
          position: absolute;
          top: 2.9rem;
          right: 0.9rem;
        }
        .waterPump-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 4.15rem;
          right: 2.63rem;
          .pump-text {
            margin-top: 0.03rem;
            padding: 0.02rem 0.05rem;
            color: #575452;
            font-weight: bold;
            background: #b3b3b3;
            /* 添加边框 */
            border: 2px solid #c0c0c0;
            /* 添加圆角 */
            border-radius: 0.04rem;
            /* 添加阴影 */
            box-shadow: 0 0 10px rgba(2, 2, 2, 0.3);
          }
        }
        .status-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 0.2rem;
          left: 0.7rem;
          .status-text {
            margin-top: 0.06rem;
            color: #fa7217;
            font-weight: bold;
          }
        }
        .fire-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 0.2rem;
          left: 2.3rem;
          .fire-text {
            margin-top: 0.06rem;
            color: #fa7217;
            font-weight: bold;
          }
        }
        .runtime-div {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          top: 0.2rem;
          left: 3.5rem;
          .fire-text {
            margin-top: 0.06rem;
            color: #fa7217;
            font-weight: bold;
          }
        }
        .boilerWork {
          position: absolute;
          top: 2.85rem;
          left: 5.15rem;
          width: 0.8rem;
          height: 1.5rem;
        }
      }
      .special-div {
        width: 40%;
        .warn-list {
          width: 100%;
          padding: 0.15rem;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .warn-li {
            width: 25%;
            // padding: 0 0.1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0.1rem;
          }
          .warn-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 0.05rem;
            background: linear-gradient(
              to bottom,
              white 0%,
              gray 50%,
              white 100%
            );
            margin-right: 0.1rem;
            .alarm-icon {
              width: 0.2rem;
              height: 0.2rem;
            }
          }
          .warn-right {
            color: #fff;
            font-size: 0.16rem;
          }
          .alarm-left {
            background: linear-gradient(to bottom, #ff0000 0%, #ff0066 100%);
          }
        }
      }
    }
    .boiler-bottom {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      .one {
        width: 28%;
        .boiler-monitor {
          margin: 0.15rem;
          width: calc(100% - 0.3rem);
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          /* 防止子元素溢出 */
          box-sizing: border-box;
          font-size: 0.16rem;
          color: #fff;
          /* 添加左边框和上边框 */
          border-left: 1px solid #999999;
          border-top: 1px solid #999999;

          .monitor-li {
            width: 50%;
            padding: 0.1rem 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            /* 只添加右边框和下边框 */
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            box-sizing: border-box;
            background: #30303f;
          }
        }
      }
      .two {
        width: 28%;
        .relay {
          width: 100%;
          padding: 0.25rem 0.5rem;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          .relay-li {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 50%;
            font-size: 0.16rem;
            margin-bottom: 0.2rem;
            color: #c9c6c6;
            .relay-open {
              width: 0.4rem;
              height: 0.3rem;
              color: #fff;
              background: #1e60f0;
              font-size: 0.16rem;
              text-align: center;
              line-height: 0.3rem;
              margin-right: 0.15rem;
            }
            .relay-close {
              width: 0.4rem;
              height: 0.3rem;
              color: #c2c2c2;
              background: #474747;
              font-size: 0.16rem;
              text-align: center;
              line-height: 0.3rem;
              margin-right: 0.15rem;
            }
          }
        }
      }
      .three {
        width: 40%;
        .port {
          width: 100%;
          padding: 0.25rem 0.5rem;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          //   justify-content: space-between;
          .port-li {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 33.33%;
            font-size: 0.16rem;
            margin-bottom: 0.2rem;
            color: #c9c6c6;
            position: relative;
            padding-left: 0.25rem; /* 为伪元素留出空间 */
          }
          .port-open::before,
          .port-close::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0.15rem;
            height: 0.15rem;
            border-radius: 50%;
            border: 0.02rem solid white;
          }

          .port-open::before {
            background-color: rgb(16, 184, 24);
          }

          .port-close::before {
            background-color: gray;
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.special-div .special-title {
  padding-left: 0.36rem !important;
  font-size: 0.2rem !important;
  line-height: 0.23rem !important;
  background-size: 1.4rem 0.35rem !important;
  background-position: 0px -0.03rem !important;
}
.special-div .special-top {
  padding: 0.04rem 0.26rem 0.04rem 0px;
  min-height: 0.37rem;
}
</style>
