<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=""
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title">铭汉高效冷源站管理系统</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="host-detail">
      <div class="detail-top">
        <div class="detail-top-left">
          <img
            class="host-img1"
            src="../../../assets/images/host-img3.png"
            alt=""
            v-if="isMagnetic === 'true'"
          />
          <img
            class="host-img1"
            src="../../../assets/images/host-img4.png"
            alt=""
            v-else
          />
          <div class="host-name">{{ deviceName }}</div>
          <!-- 冷凝器蒸发器压力-->
          <div class="outIn">
            <!-- <div class="outIn-li in1">
              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
              <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
            </div>
            <div class="outIn-li out1">
              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
              <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
            </div> -->
            <!-- <div class="outIn-li in2">
              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
              <div class="kpa">566.6kpa</div>
            </div>
            <div class="outIn-li out2">
              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
              <div class="kpa">566.6kpa</div>
            </div> -->
          </div>
          <!-- 运行状态 -->
          <img
            src="../../../assets/images/fan-img.png"
            :class="{
              moveClass: hostListClass('1'),
              fanBlade: isMagnetic === 'true',
              leftFan: isMagnetic === 'false',
            }"
            alt=""
          />
          <!-- 启停状态 -->
          <div class="startClass" v-if="hostListClass('2')"></div>
          <!-- 冷冻冷却水流信号 -->
          <div class="water-flow3">
            <div class="water-flow-li">
              <span>冷却水流:</span>
              <span v-if="hostListClass('21')">接通</span>
              <span v-else>断开</span>
              <span
                class="break"
                :class="{ connect: hostListClass('21') }"
              ></span>
            </div>
            <div class="water-flow-li">
              <span>冷冻水流:</span>
              <span v-if="hostListClass('20')">接通</span>
              <span v-else>断开</span>
              <span
                class="break"
                :class="{ connect: hostListClass('20') }"
              ></span>
            </div>
          </div>
          <!-- 负载 -->
          <LoadData class="loadData" :hostData="hostData"></LoadData>
        </div>
        <div class="detail-top-right">
          <!-- 温度 -->
          <host-chart :temArray="temArray"></host-chart>
        </div>
      </div>
      <div class="detail-bottom">
        <div class="hostStatus">
          <div class="hostStatus-li">
            <span>手自动切换:</span>
            <span class="automaticData">{{ automaticObj.showValue }}</span>
          </div>
          <div class="hostStatus-li">
            <span>本地远程状态:</span>
            <span class="dotData">{{ localObj.showValue }}</span>
          </div>
          <div class="hostStatus-li">
            <span>故障状态:</span>
            <span class="goodData" v-if="badObj.showValue === '未故障'">{{
              badObj.showValue
            }}</span>
            <span class="badData" v-else>{{ badObj.showValue }}</span>
          </div>
          <div class="hostStatus-li">
            <span>运行累计时间:</span>
            <span class="timeData">{{ timeObj.showValue }}小时</span>
          </div>
        </div>
        <div class="detail-data hostparams">
          <div class="detail-data-top">
            <title-img></title-img>
            <div class="details-title">主机参数</div>
            <title-img></title-img>
          </div>
          <div class="detail-data-bottom">
            <div
              class="detail-data-li"
              v-for="(item, index) in rightHostData"
              :key="index"
            >
              <div class="rightDot">
                <div class="leftDot">
                  <span>{{ item.otherName }}:</span>
                  <span class="dotData">{{ item.curValue }}</span>
                  <span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <line-square
            class="line1"
            :horizontalLength="720"
            :verticalLength="440"
            :overlap="15"
          ></line-square>
        </div>
        <div class="detail-data compressor">
          <div class="detail-data-top">
            <title-img></title-img>
            <div class="details-title">压缩机参数</div>
            <title-img></title-img>
          </div>
          <div class="detail-data-bottom">
            <div
              class="detail-data-li"
              v-for="(item, index) in compressorData"
              :key="index + 1"
            >
              <div class="rightDot">
                <div class="leftDot">
                  <span>{{ item.otherName }}:</span>
                  <span class="dotData">{{ item.curValue }}</span>
                  <span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <line-square
            class="line1"
            :horizontalLength="720"
            :verticalLength="440"
            :overlap="15"
          ></line-square>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  hostDetailsData,
  hostTemData,
  runTime,
} from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { cpmList } from "@/api/device/gather";
import LoadData from "./components/loadData.vue";
import hostChart from "./components/hostChart.vue";
import titleImg from "./components/titleImg.vue";
import lineSquare from "./components/lineSquare.vue";
import { format } from "@/utils/datetime";
import { getDay } from "@/utils/datetime";
export default {
  name: "sysControl",
  components: { LoadData, hostChart, titleImg, lineSquare },
  data() {
    return {
      loading: false,

      currentDate: new Date(),
      nowTimer: null,
      deviceName: "", //主机名称
      hostData: [], //主机参数
      condenserPre: "", //冷凝器压力
      evaporatorPre: "", //蒸发器压力
      rightHostData: [], //右
      automaticObj: {}, //手自动状态
      localObj: {}, //本地远程状态
      badObj: {}, //故障状态
      timeObj: {}, //累计运行时间
      compressorData: [], //压缩机参数
      temArray: [], //冷冻冷却水温度
      isMagnetic: false,
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
    };
  },
  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() {},
  mounted() {
    this.getHostDetailsData();
    this.getAlarnStatus();
    this.getDayData();
    // 在组件挂载后尝试进入全屏
    setTimeout(() => {
      this.requestFullscreen();
    }, 100); // 延迟 100 毫秒执行全屏操作
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 全屏操作
    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() {
      this.$router.back();
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    getHostDetailsData() {
      //判断当前的url是否有传参
      // 获取查询字符串
      const search = window.location.search;
      // 判断是否有查询参数
      const hasQueryParams = search.length > 1;
      if (hasQueryParams) {
        console.log("当前 URL 有传参");
        // 解析查询字符串
        const queryParams = {};
        const params = search.slice(1).split("&");
        params.forEach((param) => {
          const [key, value] = param.split("=");
          queryParams[key] = decodeURIComponent(value);
        });
        console.log("传递的参数:", queryParams);
        // 获取特定参数
        const deviceLedgerId = queryParams.hostId;
        this.deviceName = queryParams.hostName;
        this.isMagnetic = queryParams.isMagnetic;
        console.log("是否是磁悬浮主机", this.isMagnetic);
        // 请求主机参数、压缩机参数
        this.getHostParams(deviceLedgerId);
        // 请求采集位点
        this.getCollect(deviceLedgerId);
      } else {
      }
    },
    // 主机参数、压缩机参数
    getHostParams(id) {
      hostDetailsData({ deviceLedgerId: id }).then((res) => {
        console.log("主机参数返回", res);
        if (res.code == 200) {
          let data = res.rows;
          data.forEach((item) => {
            if (item.mtType === "0") {
              // 主机参数
              this.hostData = item.list;
              // 主机参数分开两列
              this.leftHostData = [];
              this.rightHostData = [];
              this.hostData.forEach((item) => {
                // 右边主机参数  温度12
                if (item.paramType === "12") {
                  this.rightHostData.push(item);
                }
                //左边主机参数 根据不同的 paramType 处理 showValue
                if (item.paramType === "6") {
                  // 运行状态
                  item.showValue =
                    Number(item.curValue) === 0 ? "自动" : "手动";
                  this.automaticObj = item;
                } else if (item.paramType === "5") {
                  // 故障状态
                  item.showValue =
                    Number(item.curValue) === 0 ? "未故障" : "故障";
                  this.badObj = item;
                } else if (item.paramType === "22") {
                  // 本地远程
                  item.showValue =
                    Number(item.curValue) === 0 ? "本地" : "远程";
                  this.localObj = item;
                } else if (item.paramType === "26") {
                  // 累计运行时间
                  item.showValue = item.curValue;
                  this.timeObj = item;
                }
              });
            }
            if (item.mtType === "9") {
              // 压缩机参数
              this.compressorData = item.list;
              // 遍历数组
              for (let i = 0; i < this.compressorData.length; i++) {
                const item = this.compressorData[i];
                if (item.paramType === '1' && Number(item.curValue) === 0) {
                  item.curValue = "停止";
                  console.log("压缩机停止了啊是0···················")
                }else if (item.paramType === '1' && Number(item.curValue) === 1){
                  item.curValue = "运行";
                }
              }
            }
          });
        }
      });
    },
    // 采集参数列表
    getCollect(id) {
      let data = {
        pageNum: 1,
        pageSize: 10000,
        deviceLedgerId: id,
      };
      cpmList(data).then((res) => {
        console.log("采集位点返回", res);
        if (res.code == 200) {
          // 过滤掉结果，只保留冷冻冷却进出水温度
          let data = res.rows;
          let newDataArray = []; // 用于存储符合条件的对象的新数组
          data.forEach((item) => {
            if (
              item.otherName.includes("冷冻回水温度") ||
              item.otherName.includes("冷冻供水温度") ||
              item.otherName.includes("冷却回水温度") ||
              item.otherName.includes("冷却供水温度") ||
              item.otherName.includes("负载")
            ) {
              let dataItem = {
                name: item.otherName,
                value: item.id,
              };
              newDataArray.push(dataItem);
            }
          });
          console.log("处理后的数组···", newDataArray);
          // 请求温度
          this.getTemData(newDataArray);
        }
      });
    },
    // 冷冻冷却进出水温度图表数据
    getTemData(array) {
      const start = new Date(new Date().setHours(0, 0, 0, 0));
      const end = new Date(new Date().setHours(23, 59, 59, 59));
      let data = {
        timeType: "min",
        startTime: format(start),
        endTime: format(end),
        pageNum: 0,
        pageSize: 10,
        searchParams: array,
        systemType: "0",
      };
      hostTemData(data).then((res) => {
        console.log("进出水温度返回值", res);
        if (res.code == 200 && res.data.length > 0) {
          this.temArray = res.data;
        }
      });
    },
    hostListClass(paramType) {
      for (let i = 0; i < this.hostData.length; i++) {
        const item = this.hostData[i];
        if (item.paramType === paramType && Number(item.curValue) !== 0) {
          return true;
        }
      }
      // 否则
      return false;
    },
    // 报警列表
    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.69rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.61rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .nowTime {
      position: absolute;
      top: 0.3rem;
      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.33rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      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.33rem;
      right: 4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.33rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      cursor: pointer;
    }
  }
  .host-detail {
    padding: 0.2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    .detail-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .detail-top-left {
        width: 7rem;
        height: 4.4rem;
        // background-color: aquamarine;
        position: relative;
        .host-img1 {
          width: 4.88rem;
          height: 3.97rem;
          margin: 0.2rem 0 0 0.2rem;
        }
        .outIn {
          position: absolute;
          left: 4.8rem;
          top: 1rem;
          display: flex;
          flex-direction: column;
          .outIn-li {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 2rem;
            height: 1rem;
            font-weight: bold;
            // background-color: #e2aeae;
            .arrow {
              font-size: 0.3rem;
              z-index: 10;
            }
            .kpa {
              font-size: 0.18rem;
              z-index: 10;
            }
          }
          .in1 {
            position: absolute;
            top: 1.3rem;
            left: 0.2rem;
            color: rgb(123, 212, 247);
          }
          .out1 {
            position: absolute;
            top: 1.6rem;
            left: 0.18rem;
            color: rgb(38, 122, 218);
            .arrow {
              transform: scaleX(-1);
            }
          }
          .in2 {
            position: absolute;
            top: 1.9rem;
            left: -0.4rem;
            color: rgb(235, 120, 206);
          }
          .out2 {
            position: absolute;
            top: 2.2rem;
            left: -0.4rem;
            color: rgb(240, 56, 95);
            .arrow {
              transform: scaleX(-1);
            }
          }
        }
        /* 定义灯闪烁的动画 */
        @keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0.7;
          }
          100% {
            opacity: 1;
          }
        }
        .startClass {
          z-index: 10;
          position: absolute;
          top: 2.9rem;
          left: 3.4rem;
          width: 0.18rem;
          height: 0.18rem;
          border-radius: 50%;
          animation: blink 1s infinite;
          background-color: #38fc52 !important;
        }
        .water-flow3 {
          z-index: 10;
          position: absolute;
          top: 3.6rem;
          left: 1.2rem;
          .water-flow-li {
            margin-bottom: 0.04rem;
            color: #46f1e3;
            font-size: 0.18rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              background-color: rgba(0, 255, 255, 0.2);
              border-radius: 0.1rem;
              padding: 0.01rem 0.03rem;
            }
            .break {
              margin-left: 0.07rem;
              display: inline-block;
              width: 0.18rem;
              height: 0.18rem;
              border-radius: 50%;
              border: 1px solid #46f1e3;
              background-color: transparent !important;
            }
            .connect {
              animation: blink 1s infinite;
              background-color: #38fc52 !important;
            }
          }
        }
        /* 定义 host 动画关键帧 */
        @keyframes host {
          0% {
            /* 修改初始旋转角度 */
            transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
          }
          100% {
            /* 修改结束旋转角度 */
            transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
          }
        }
        .fanBlade {
          z-index: 10;
          position: absolute;
          top: 2.55rem;
          left: 4.65rem;
          width: 0.5rem;
          height: 0.5rem;
          transform-style: preserve-3d;
          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
            rotateY(40deg);
        }
        .leftFan {
          z-index: 10;
          position: absolute;
          top: 2.55rem;
          left: 0.53rem;
          width: 0.5rem;
          height: 0.5rem;
          transform-style: preserve-3d;
          transform: translateX(-50%) rotateX(0deg) rotateZ(0deg) rotateY(-0deg);
        }
        .moveClass {
          animation: host 2s linear infinite;
        }
        .host-name {
          z-index: 10;
          position: absolute;
          top: 1.55rem;
          left: 1.8rem;
          color: #3520f8;
          font-weight: bold;
          font-size: 0.18rem;
        }
        .loadData {
          z-index: 10;
          position: absolute;
          top: 0.2rem;
          right: 0rem;
        }
      }
      .detail-top-right {
        width: calc(100% - 7.25rem);
        height: 4.4rem;
        // background-color: rgb(127, 172, 255);
      }
    }
    .detail-bottom {
      height: 5rem;
      margin-top: 0.3rem;
      margin-left: 0.25rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .hostStatus {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 3rem;
        margin-bottom: 1.5rem;
        .hostStatus-li {
          background-color: #25455a;
          color: #c0dffc;
          font-size: 0.18rem;
          margin-bottom: 0.1rem;
          padding: 0.1rem;
          letter-spacing: 0.02rem;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
        }
      }
      .detail-data {
        display: flex;
        flex-direction: column;
        // width: 4rem;
        position: relative;
        .detail-data-top {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #c0dffc;
          font-weight: bold;
          font-size: 0.18rem;
          width: 100%;
          text-align: center;
          z-index: 10;
          .details-title {
            margin: 0 0.15rem;
          }
        }
        .detail-data-bottom {
          width: 100%;
          padding: 0.1rem 0.3rem;
          z-index: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          .detail-data-li {
            // width: 100%;
            margin-right: 0.1rem;
            position: relative;
            color: #c0dffc;
            font-family: Arial, sans-serif;
            letter-spacing: 0.02rem;
            font-size: 0.18rem;
            position: relative;
            margin-bottom: 0.2rem;
            border-left: 0.01rem solid #217df5;
            border-right: 0.01rem solid #217df5;
            background-image: radial-gradient(
                circle at left top,
                #217df5 0.01rem,
                transparent 0.01rem
              ),
              radial-gradient(
                circle at right top,
                #217df5 0.01rem,
                transparent 0.01rem
              ),
              radial-gradient(
                circle at left bottom,
                #217df5 0.01rem,
                transparent 0.01rem
              ),
              radial-gradient(
                circle at right bottom,
                #217df5 0.01rem,
                transparent 0.01rem
              );
            background-repeat: no-repeat;
            background-position: left top, right top, left bottom, right bottom;
          }
          .detail-data-li::before,
          .detail-data-li::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 0.01rem;
            background-image: linear-gradient(
              to right,
              #217df5 0%,
              rgba(41, 128, 185, 0) 50%,
              #217df5 100%
            );
          }

          .detail-data-li::before {
            top: 0;
          }
          .detail-data-li::after {
            bottom: 0;
          }
          .rightDot {
            position: relative;
            width: 100%;
            height: 100%;
          }
          .leftDot {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0.04rem 0.1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }

          .rightDot::before {
            content: "";
            position: absolute;
            top: -0.03rem;
            right: -0.03rem;
            width: 0.06rem;
            height: 0.06rem;
            background-color: #217df5;
            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
            background-image: radial-gradient(
              circle at 30% 30%,
              rgba(255, 255, 255, 0.8) 0%,
              rgba(255, 255, 255, 0) 70%
            );
            border-radius: 50%;
            z-index: 10;
          }

          .rightDot::after {
            content: "";
            position: absolute;
            bottom: -0.03rem;
            right: -0.03rem;
            width: 0.06rem;
            height: 0.06rem;
            background-color: #217df5;
            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
            background-image: radial-gradient(
              circle at 30% 30%,
              rgba(255, 255, 255, 0.8) 0%,
              rgba(255, 255, 255, 0) 70%
            );
            border-radius: 50%;
            z-index: 10;
          }
          .leftDot::before {
            content: "";
            position: absolute;
            top: -0.03rem;
            left: -0.03rem;
            width: 0.06rem;
            height: 0.06rem;
            background-color: #217df5;
            border-radius: 50%;
            z-index: 10;
            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
            background-image: radial-gradient(
              circle at 30% 30%,
              rgba(255, 255, 255, 0.8) 0%,
              rgba(255, 255, 255, 0) 70%
            );
          }

          .leftDot::after {
            content: "";
            position: absolute;
            bottom: -0.03rem;
            left: -0.03rem;
            width: 0.06rem;
            height: 0.06rem;
            background-color: #217df5;
            z-index: 10;
            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
            background-image: radial-gradient(
              circle at 30% 30%,
              rgba(255, 255, 255, 0.8) 0%,
              rgba(255, 255, 255, 0) 70%
            );
            border-radius: 50%;
          }
        }
        .line1 {
          position: absolute;
          top: 0rem;
        }
      }
      .hostparams {
        width: 7.6rem;
        .detail-data-bottom {
          padding-left: 0.5rem;
          .detail-data-li {
            width: 3.2rem;
          }
        }
      }
      .compressor {
        width: 7.6rem;
        .detail-data-bottom {
          padding-left: 0.75rem;
          .detail-data-li {
            width: 3rem;
          }
        }
      }
      .dotData {
        font-weight: bold;
        margin: 0 0.06rem;
        color: #3b80ff;
        display: flex;
        align-items: center;
      }
      .goodData {
        font-weight: bold;
        margin: 0 0.06rem;
        color: #3df574;
      }
      .badData {
        font-weight: bold;
        margin: 0 0.06rem;
        color: #cf3607;
      }
      .automaticData {
        font-weight: bold;
        margin: 0 0.06rem;
        color: #da7b10;
      }
      .timeData {
        font-weight: bold;
        margin: 0 0.06rem;
        color: #1df3e8;
      }
    }
  }
}
</style>
