<template>


  <div class="flex-col eqData_right mr-20">
    <!-- 右侧顶部数据展示 -->
    <div class="eqData_right_top flex-row">
      <div class="time_box"> 时间：{{ time }}</div>
      <div class="eqData_box flex-col">
        <div class="eqData_box_title flex-row items-center">
          <div class="eqData_box_title1">{{ totalFlow }}</div>
          <div class="eqData_box_title2">m³</div>
        </div>
        <div class="eqData_box_text">总流量</div>
      </div>
      <div class="eqData_box flex-row eqData_box_center">
        <div class="flex-col ">
          <div class="eqData_box_title flex-row items-center">
            <div class="eqData_box_title1">{{ instantaneousFlow }}</div>
            <div class="eqData_box_title2">m³</div>
          </div>
          <div class="eqData_box_text">瞬间流量</div>
        </div>
        <div class="flex-col">
          <div class="eqData_box_title flex-row items-center">
            <div class="eqData_box_title1">50</div>
            <div class="eqData_box_title2">m³/s</div>
          </div>
          <div class="eqData_box_text">瞬间流速</div>
        </div>
      </div>
      <div class="eqData_box flex-col">
        <div class="eqData_box_title flex-row items-center">
          <div class="eqData_box_title1">50</div>
          <div class="eqData_box_title2">pa</div>
        </div>
        <div class="eqData_box_text">罐内压力</div>
      </div>
      <div class="eqData_box flex-col">
        <div class="eqData_box_title flex-row items-center">
          <div class="eqData_box_title1">50</div>
          <div class="eqData_box_title2">℃</div>
        </div>
        <div class="eqData_box_text">外部温度</div>
      </div>
    </div>
    <!-- 右侧中部数据展示 -->
    <div class="eqData_right_bottom flex-col">
      <!-- 第一行 -->

      <div class="flex-row">
        <div class="eqData_right_bottom_title flex-row items-center">
          <div class="eqData_right_bottom_box0 flex-row items-center"
            :class="{ 'border_changing': Number(dataArr[5][0]) !== Number(inputValue[5][0]) }">
            <img class="eqData_rb_box0_img" :src="eqImg1">
            <div class="eqData_rb_box0_title">
              <div class="eqData_rb_box0_title_text">总水<br>阀门</div>
            </div>
            <div class="eqData_rb_box0_right">
              <div class="eqData_rb_box0_right_top">
                <div class="eqData_rb_box0_right_top_text1"> 开度： </div>
                <div class="eqData_rb_box0_right_top_text2" :class="{ 'color_red': dataArr[5][0] > 80 }"> {{
                  dataArr[5][0] || 0 }}%
                </div>
              </div>
              <ProgressBarComponent :initial-value="inputValue[5][0]"
                @enlarge="handleEnlarge($event, 5, 0)" />
            </div>
          </div>
        </div>
        <div class="eqData_right_bottom_title flex-row items-center">

          <!-- K1进水阀门数据 -->
          <div class="eqData_right_bottom_box1">
            <div class="eqData_rb_box1_title">{{ $store.getters.eqNo }} <br>进水阀门</div>
            <img class="eqData_rb_box1_img" :src="eqImg1">
          </div>
          <div class="eqData_rt_boxs1">
            <div class="eqData_rt_boxs1">
              <div v-for="(item, index) in KD_items_code[0]" :key="index" class="eqData_rt_boxs1_box"
                :class="{ 'border_changing': Number(dataArr[0][index]) !== Number(inputValue[0][index]) }">
                <div class="eqData_rt_boxs1_box_title">{{ $store.getters.eqNo + item }}</div>
                <div class="eqData_rt_boxs1_box_text">
                  <div class="eqData_rt_boxs1_box_text1">
                    <div class="eqData_rt_boxs1_box_text1_1">开度：</div>
                    <div class="eqData_rt_boxs1_box_text1_2" :class="{ 'color_red': dataArr[0][index] > 80 }">
                      {{ dataArr[0][index] || 0 }}<span>%</span>
                    </div>
                    <!-- 摄像头图标 -->
                    <el-popover placement="bottom" width="964" trigger="click">
                      <div class="iframe_container">
                        <iframe id="iframe" width="960" height="540" :src="cameraUrl" scrolling="auto"
                          frameborder="0" />
                      </div>
                      <img slot="reference" class="cameraIcon" :src="cameraIcon">
                    </el-popover>

                    <!-- <img class="cameraIcon" :src="cameraIcon" /> -->
                  </div>
                  <ProgressBarComponent :initial-value="inputValue[0][index]"
                    @enlarge="handleEnlarge($event, 0, index)" />
                </div>
              </div>
            </div>

            <div class="eqData_right_bottom_box2">
              <div class="eqData_rb_box2_title">
                {{ $store.getters.eqNo }}
                上
                下
                阀
                门
              </div>
            </div>
            <div v-for="(item, index) in KD_items_code[2]" :key="index" class="eqData_rt_boxs1_box"
              :class="{ 'border_changing': Number(dataArr[2][index]) !== Number(inputValue[2][index]) }">
              <div class="eqData_rt_boxs1_box_title">{{ $store.getters.eqNo + item }}</div>
              <div class="eqData_rt_boxs1_box_text">
                <div class="eqData_rt_boxs1_box_text1">
                  <div class="eqData_rt_boxs1_box_text1_1">开度：</div>
                  <div class="eqData_rt_boxs1_box_text1_2" :class="{ 'color_red': dataArr[2][index] > 80 }">
                    {{ dataArr[2][index] || 0 }}
                    <span>%</span>
                  </div>
                  <el-popover placement="bottom" width="964" trigger="click">
                    <div class="iframe_container">
                      <iframe id="iframe" width="960" height="540" :src="cameraUrl" scrolling="auto" frameborder="0" />
                    </div>
                    <img slot="reference" class="cameraIcon" :src="cameraIcon">
                  </el-popover>
                </div>
                <ProgressBarComponent :initial-value="inputValue[2][index]"
                  @enlarge="handleEnlarge($event, 2, index)" />
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 第二行 -->
      <div class="flex-row">
        <div class="eqData_right_bottom_title flex-row items-center">
          <div class="eqData_right_bottom_box0 flex-row items-center bg_color2"
            :class="{ 'border_changing': Number(dataArr[5][1]) !== Number(inputValue[5][1]) }">
            <img class="eqData_rb_box0_img" :src="eqImg1">
            <div class="eqData_rb_box0_title">
              <div class="eqData_rb_box0_title_text">总气<br>阀门</div>
            </div>
            <div class="eqData_rb_box0_right">
              <div class="eqData_rb_box0_right_top">
                <div class="eqData_rb_box0_right_top_text1"> 开度： </div>
                <div class="eqData_rb_box0_right_top_text2" :class="{ 'color_red': dataArr[5][1] > 80 }"> {{
                  dataArr[5][1] || 0 }}%
                </div>
              </div>
              <ProgressBarComponent :initial-value="inputValue[5][1]" @enlarge="handleEnlarge($event, 5, 1)" />
            </div>
          </div>
        </div>
        <div class="eqData_right_bottom_title flex-row items-center">
          <div class="eqData_right_bottom_box1">
            <div class="eqData_rb_box1_title">{{ $store.getters.eqNo }} <br>出水阀门</div>
            <img class="eqData_rb_box1_img" :src="eqImg1">
          </div>
          <div class="eqData_rt_boxs1">
            <div v-for="(item, index) in KD_items_code[1]" :key="index" class="eqData_rt_boxs1_box"
              :class="{ 'border_changing': Number(dataArr[1][index]) !== Number(inputValue[1][index]) }">
              <div class="eqData_rt_boxs1_box_title">{{ $store.getters.eqNo + item }}</div>
              <div class="eqData_rt_boxs1_box_text">
                <div class="eqData_rt_boxs1_box_text1">
                  <div class="eqData_rt_boxs1_box_text1_1">开度：</div>
                  <div class="eqData_rt_boxs1_box_text1_2" :class="{ 'color_red': dataArr[1][index] > 80 }">
                    {{ dataArr[1][index] || 0 }}
                    <span>%</span>
                  </div>

                </div>

                <ProgressBarComponent :initial-value="inputValue[1][index]"
                  @enlarge="handleEnlarge($event, 1, index)" />
              </div>
            </div>
          </div>

        </div>
        <div class="eqData_right_bottom_title flex-row items-center">
          <div class="eqData_right_bottom_box1 eqData_right_bottom_box1_2">
            <div class="eqData_rb_box1_title">{{ $store.getters.eqNo }} <br>上下气阀门</div>
            <img class="eqData_rb_box1_img" :src="eqImg2">
          </div>
          <div class="eqData_rt_boxs1">
            <div v-for="(item, index) in KD_items_code[3]" :key="index" class="eqData_rt_boxs1_box"
              :class="{ 'border_changing': Number(dataArr[3][index]) !== Number(inputValue[3][index]) }">
              <div class="eqData_rt_boxs1_box_text">
                <div class="eqData_rt_boxs1_box_text1">
                  <div class="eqData_rt_boxs1_box_text1_1">开度：</div>
                  <div class="eqData_rt_boxs1_box_text1_2" :class="{ 'color_red': dataArr[3][index] > 80 }">{{
                    dataArr[3][index]
                    || 0
                  }}<span>%</span>

                  </div>

                </div>
                <ProgressBarComponent :initial-value="inputValue[3][index]"
                  @enlarge="handleEnlarge($event, 3, index)" />
              </div>
              <div class="eqData_rt_boxs1_box_title">{{ $store.getters.eqNo + item }}</div>
            </div>
          </div>

        </div>
      </div>

      <!-- 第三行 -->
      <div class="eqData_rt_bigbox">
        <div class="eqData_rt_bigbox_left">
          <div class="eqData_rt_bigbox_left1">
            {{ $store.getters.eqNo }}<br>
            水温度计
          </div>
          <img class="eqData_rt_bigbox_left_img" :src="thermometerImg">
        </div>

        <div class="eqData_rt_bigbox_right">

          <div v-for="(itemCode, itemIndex) in WD_items_code" :key="itemIndex" class="eqData_rt_bigbox_right_boxs">
            <div class="eqData_rt_bigbox_right_boxs_title">
              <div class="title_text"> {{ $store.getters.eqNo }}-1-{{ itemIndex + 1 }} </div>
            </div>

            <!-- 单个温度计 -->
            <div class="eqData_rt_bigbox_right_boxs">
              <div v-for="(item, index) in itemCode" :key="index" class="eqData_rt_bigbox_right_boxs_text">
                <div class="boxs_text1">
                  <div class="boxs_texts">
                    <div class="boxs_text1_1">水温：</div>
                    <div :class="['boxs_text1_2', { 'high-temp': dataArr2[itemIndex][index] > 60 }]">
                      {{ dataArr2[itemIndex][index] || 0 }}°
                    </div>
                  </div>
                </div>
                <div class="boxs_text2">
                  <div class="boxs_text2_1">{{ $store.getters.eqNo + item }}</div>
                </div>
              </div>
            </div>

            <div class="eqData_rt_bigbox_right_boxs_title2">
              <div class="boxs_title2_text"> 排气阀 </div>
            </div>

            <div class="eqData_rt_bigbox_right_boxs_text"
              :class="{ 'border_changing': Number(dataArr[4][itemIndex]) !== Number(inputValue[4][itemIndex]) }">
              <div class="eqData_rt_boxs1_box_text">
                <div class="eqData_rt_boxs1_box_text1">
                  <div class="eqData_rt_boxs1_box_text1_1">开度：</div>
                  <div class="eqData_rt_boxs1_box_text1_2" :class="{ 'color_red': dataArr[4][itemIndex] > 80 }">
                    {{ dataArr[4][itemIndex] || 0 }}
                    <span>%</span>
                  </div>

                </div>
                <ProgressBarComponent :initial-value="inputValue[4][itemIndex]"
                  @enlarge="handleEnlarge($event, 4, itemIndex)" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/css/dcs/style.css'
import ProgressBarComponent from '@/components/dcs/ProgressBarComponent.vue'
import config from '@/myConfig/config'
import store from '@/store';


export default {
  components: { ProgressBarComponent },
  props: {},
  data() {
    return {
      eqImg1: require('@/assets/dcs/eqData/eqImg1.svg'), // 进水阀门图标
      eqImg2: require('@/assets/dcs/eqData/eqImg2.svg'), // 出水阀门图标
      thermometerImg: require('@/assets/dcs/eqData/thermometer.svg'), // 温度计图标
      searchImg: require('@/assets/dcs/eqData/search.svg'), // 搜索图标
      cameraIcon: require('@/assets/dcs/eqData/cameraIcon.svg'), // 摄像头图标
      cameraUrl: config.cameraUrl, // 摄像头视频流地址

      KD_items_code: [['-1', '-2', '-3', '-4', '-5', '-6'], ['-1', '-2', '-3', '-4', '-5', '-6'], ['-1-1', '-1-2'], ['-TOP', '-FOOT']],
      WD_items_code: [['-1-1-1', '-1-1-2', '-1-1-3', '-1-1-4'], ['-1-2-1', '-1-2-2', '-1-2-3', '-1-2-4'], ['-1-3-1', '-1-3-2', '-1-3-3', '-1-3-4'], ['-1-4-1', '-1-4-2', '-1-4-3', '-1-4-4'], ['-1-5-1', '-1-5-2', '-1-5-3', '-1-5-4'], ['-1-6-1', '-1-6-2', '-1-6-3', '-1-6-4'], ['-1-7-1', '-1-7-2', '-1-7-3', '-1-7-4'], ['-1-8-1', '-1-8-2', '-1-8-3', '-1-8-4'], ['-1-9-1', '-1-9-2', '-1-9-3', '-1-9-4'], ['-1-10-1', '-1-10-2', '-1-10-3', '-1-10-4']],

      // 开度数据
      dataArr:
        [[
          '58.3',
          '65.1',
          '56.0',
          '51.6',
          '50.7',
          '53.2'
        ],
        [
          '54.7',
          '60.2',
          '64.5',
          '47.8',
          '51.5',
          '65.5'
        ],
        [
          '58.4',
          '63.8'
        ],
        [
          '57.2',
          '47.0'
        ],
        [
          '57.2',
          '58.5',
          '47.0',
          '48.7',
          '52.7',
          '46.3',
          '60.5',
          '48.4',
          '51.8',
          '54.9'
        ],
        [
          '49.6',
          '52.2'
        ]],
      sizes: [6, 6, 2, 2, 10, 2], // 规定的每组开度数量
      // 温度数据
      dataArr2: [[10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1], [10, 1, 1, 1]],
      instantaneousFlow: '',// 瞬时流量
      totalFlow: '100', // 总流量

      ws: null,
      wsUrl: 'ws://192.168.110.83:9000', // 替换为你的 WebSocket 服务器地址

      // 开度设定数组
      inputValue: [[
        '58.3',
        '65.1',
        '56.0',
        '51.6',
        '50.7',
        '53.2'
      ],
      [
        '54.7',
        '60.2',
        '64.5',
        '47.8',
        '51.5',
        '65.5'
      ],
      [
        '58.4',
        '63.8'
      ],
      [
        '57.2',
        '47.0'
      ],
      [
        '57.2',
        '58.5',
        '47.0',
        '48.7',
        '52.7',
        '46.3',
        '60.5',
        '48.4',
        '51.8',
        '54.9'
      ],
      [
        '49.6',
        '52.2'
      ]],
      // inputHasInit: false,//输入框是否初始化过

      // eqNO: store.getters.eqNo, // 设备编号
      eqArr: config.eqGroupNames, // 设备编号数组


      time: '', // 时间
      timeInterval: null// 定时器

    }
  },
  mounted() {
    this.connect()
    this.setIntervalTime()
  },
  beforeDestroy() {
    this.disconnect()
    clearInterval(this.timeInterval)
  },

  methods: {
    setIntervalTime() {
      this.timeInterval = setInterval(() => {
        this.time = new Date().toLocaleString()
      }, 1000)
    },

    // 连接 WebSocket 服务器
    connect() {
      this.ws = new WebSocket(this.wsUrl)
      this.ws.onopen = () => {
        console.log('WebSocket connection opened')
      }

      this.ws.onmessage = (event) => {
        const arrData = JSON.parse(event.data)
        // console.log('接收到数据', arrData);
        const index = this.eqArr.indexOf(store.getters.eqNo) + 1
        if (arrData.code == '0001' && parseInt(arrData.id) == index) {
          const sizes = [6, 6, 2, 2, 10, 2] // 规定的每组数量
          const groupedData = []
          let currentIndex = 0 // 当前索引
          // 遍历 sizes 数组，根据每个组的大小来拆分 arrData.data
          for (const size of sizes) {
            // 从 arrData.data 中提取出当前组的数据
            const groupData = arrData.data.slice(currentIndex, currentIndex + size)
            groupedData.push(groupData) // 将当前组的数据添加到 dataArr 中
            currentIndex += size // 更新当前索引
          }
          // console.log('分组后数据1', groupedData);
          this.dataArr = groupedData
          // 初始化输入框
          // if (!this.inputHasInit) {
          //     this.inputValue = groupedData;
          //     this.inputHasInit = true;
          // }
        } else if (arrData.code == '0201' && parseInt(arrData.id) == index) {
          const chunkSize = 4 // 每组的大小
          const groupedData2 = [] // 存储分组后的二维数组
          for (let i = 0; i < arrData.data.length; i += chunkSize) {
            // 从 arrData.data 中提取出当前组的数据
            const groupData2 = arrData.data.slice(i, i + chunkSize)
            groupedData2.push(groupData2) // 将当前组的数据添加到 groupedData 中
          }
          this.instantaneousFlow = groupedData2[10][0] // 瞬时流量
          // console.log('分组后数据2', groupedData2);
          this.dataArr2 = groupedData2
        } else if (arrData.code == '0101' && parseInt(arrData.id) == index) {
          const sizes = [6, 6, 2, 2, 10, 2] // 规定的每组数量
          const groupedData3 = []
          let currentIndex = 0 // 当前索引
          // 遍历 sizes 数组，根据每个组的大小来拆分 arrData.data
          for (const size of sizes) {
            // 从 arrData.data 中提取出当前组的数据
            const groupData3 = arrData.data.slice(currentIndex, currentIndex + size)
            groupedData3.push(groupData3) // 将当前组的数据添加到 dataArr 中
            currentIndex += size // 更新当前索引
          }
          // console.log('分组后数据3', groupedData3);
          this.inputValue = groupedData3
          // console.log('分组后数据3', this.inputValue);
        }
      }

      this.ws.onclose = () => {
        console.log('WebSocket connection closed')
      }

      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error)
      }
    },
    sendMessage(msg) {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(msg)
      } else {
        console.warn('WebSocket 连接未打开，无法发送消息。')
      }
    },

    disconnect() {
      if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
        this.ws.close()
      } else {
        console.warn('WebSocket 已经关闭或正在关闭，无法再关闭。')
      }
    },

    // 开度设定（调子组件方法）
    handleEnlarge(KDvalue, i, j) {
      this.inputValue[i][j] = KDvalue
      // console.log('开度设定',  this.inputValue[i][j], this.dataArr[i][j]);
      const address = this.sizes.slice(0, i).reduce((acc, curr) => acc + curr, 0) + j + 31
      console.log('设定', KDvalue, address)
      this.sendMessage(JSON.stringify({
        id: this.eqArr.indexOf(store.getters.eqNo) + 1,
        code: '1101',
        addr: address,
        value: KDvalue
      }))
    }
  }
}
</script>
<style lang="scss" scoped>
.color_red {
  color: #FF444B !important;
  font-size: 15px;
}

.border_changing {
  border: 1px solid #72E0FF !important;

  .eqData_rt_boxs1_box_text {
    .eqData_rt_boxs1_box_text1 {
      .eqData_rt_boxs1_box_text1_2 {
        color: #fcc764 !important;
      }
    }
  }
}



.eqData_right {
  width: 1587px;
  padding: 8px 0px;

  .eqData_right_top {
    display: flex;
    padding: 0px 8px;
    justify-content: center;
    position: relative;

    .time_box {
      position: absolute;
      color: aqua;
      top: 35px;
      left: 40px;
      font-size: x-large;
      font-weight: 700;
    }

    .eqData_box {
      margin: 10px;
      width: 193.846px;
      height: 84px;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;

      .eqData_box_title {
        margin: 5px auto;

        .eqData_box_title1 {
          color: #00C4F1;
          text-align: right;
          font-family: "PingFang SC";
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .eqData_box_title2 {
          color: #00C9FB;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

      }

      .eqData_box_text {
        color: #FFF;
        font-family: "PingFang SC";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
      }

    }

    .eqData_box_center {
      display: flex;
      justify-content: center;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
    }

    .eqData_box:nth-child(1) {
      background-image: url('../../../assets/dcs/eqData/eqDataBoxBg1.svg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .eqData_box:nth-child(2),
    .eqData_box:nth-child(3) {
      background-image: url('../../../assets/dcs/eqData/eqDataBoxBg2.svg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .eqData_box:nth-child(4) {
      background-image: url('../../../assets/dcs/eqData/eqDataBoxBg4.svg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .eqData_box:nth-child(5) {
      background-image: url('../../../assets/dcs/eqData/eqDataBoxBg5.svg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .eqData_right_bottom {
    display: inline-flex;
    padding: 4px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .eqData_right_bottom_title {
      display: flex;
      padding: 10px;
      align-items: flex-start;
      gap: 10px;
      border-radius: 4px;
      border: 1px solid rgba(37, 147, 228, 0.50);
      opacity: 0.9;
      background: rgba(9, 23, 50, 0.90);
      box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.20) inset;

      .eqData_right_bottom_box1 {

        width: 110px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 3px;
        background: #24375B;
        position: relative;

        .eqData_rb_box1_title {
          margin-top: 8px;
          text-align: center;
          font-family: "PingFang SC";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          background: linear-gradient(180deg, #C1F4FF 22.5%, #4DB5FF 75%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

        }

        .eqData_rb_box1_img {
          width: 47px;
          height: 40px;
          flex-shrink: 0;
          position: absolute;
          bottom: 0;
          right: 0;
          fill: linear-gradient(181deg, rgba(88, 123, 190, 0.50) 24.86%, rgba(36, 55, 91, 0.50) 99.15%);
        }
      }

      .eqData_right_bottom_box1_2 {
        background: var(--tailwind-colors-emerald-800, #065F46);
      }

      .eqData_right_bottom_box2 {
        display: flex;
        width: 30px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        background: #213253;

        .eqData_rb_box2_title {
          text-align: center;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          background: linear-gradient(180deg, #C1F4FF 22.5%, #4DB5FF 75%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

      }

      .eqData_right_bottom_box0 {
        width: 241px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 3px;
        background: #24375B;
        position: relative;

        .eqData_rb_box0_title {
          .eqData_rb_box0_title_text {
            text-align: center;
            font-family: "PingFang SC";
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 30px;
            /* 125% */
            background: linear-gradient(180deg, #C1F4FF 22.5%, #4DB5FF 75%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 15px;
          }

        }

        .eqData_rb_box0_img {
          position: absolute;
          bottom: 0;
          left: 0;
        }

        .eqData_rb_box0_right {
          width: 150px;
          display: flex;
          padding: 4px;
          flex-direction: column;
          align-items: center;
          gap: 5px;
          border-radius: 5px;

          .eqData_rb_box0_right_top {
            display: flex;
            padding: 4px;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            /* color: #DCDCDC; */
            font-family: "PingFang SC";
            /* font-size: 16px; */
            font-style: normal;
            font-weight: 400;
            line-height: normal;

            .eqData_rb_box0_right_top_text1 {
              color: #DCDCDC;
              font-size: 16px;
            }

            .eqData_rb_box0_right_top_text2 {
              color: #83D5EB;
              font-size: 24px;
            }
          }

          .eqData_rb_box0_right_bottom {
            display: flex;
            align-items: center;
            gap: 10px;

            .eqData_rb_box0_right_bottom_text1 {
              display: flex;
              width: 88px;
              padding: 4px;
              justify-content: center;
              align-items: center;
              border-radius: 5px;
              background: #10213E;
              color: #F0F9FF;
              font-family: "PingFang SC";
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;

              input {
                width: 30px;
                background-color: transparent;
                border: none;
                color: #F0F9FF;
                font-family: "PingFang SC";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-align: center;
                outline: none;
              }
            }

            .eqData_rb_box0_right_bottom_text2 {
              display: flex;
              padding: 4px 8px;
              justify-content: center;
              align-items: center;
              border-radius: 5px;
              border: 1px solid #2C539B;
              background: linear-gradient(180deg, #3F5F9E 0%, #15305F 100%);
              color: #7ECAFF;
              font-family: "PingFang SC";
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              /* 鼠标悬停改回默认样式 */
              cursor: default;
            }

            .eqData_rb_box0_right_bottom_text2_2 {
              border: 1px solid #138F6B;
              background: linear-gradient(180deg, #3CCC6F 0%, #127131 100%);
            }
          }

        }
      }

      .bg_color2 {
        background-color: #065F46;

      }

      .eqData_rt_boxs1 {
        display: flex;
        // padding: 0 4px;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        border-radius: 5px;

        .eqData_rt_boxs1_box {
          display: flex;
          padding: 4px;
          flex-direction: column;
          align-items: center;
          gap: 5px;
          border-radius: 5px;
          border: 1px solid #192846;

          .eqData_rt_boxs1_box_title {
            display: flex;
            padding: 4px 8px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            border-radius: 0px 0px 5px 5px;
            background: #192846;

            color: #76E1FF;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }

          .eqData_rt_boxs1_box_text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;

            .eqData_rt_boxs1_box_text1 {
              display: flex;
              padding: 4px;
              justify-content: center;
              align-items: center;
              /* gap: 10px; */
              border-radius: 5px;

              .eqData_rt_boxs1_box_text1_1 {
                color: #DCDCDC;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
              }

              .eqData_rt_boxs1_box_text1_2 {
                /* color: #0CABD5; */
                width: 48px;
                color: #20B256;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;

                span {
                  font-size: 8px;
                }
              }
            }
          }
        }
      }
    }

    .eqData_rt_bigbox {
      display: flex;
      width: 1557px;
      padding: 8px 10px 8px 10px;
      align-items: flex-start;
      gap: 10px;
      flex-shrink: 0;
      border-radius: 4px;
      border: 1px solid rgba(37, 147, 228, 0.50);
      opacity: 0.9;
      background: rgba(9, 23, 50, 0.90);
      box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.20) inset;

      .eqData_rt_bigbox_left {
        width: 110px;
        height: 484px;
        flex-shrink: 0;
        border-radius: 3px;
        background: var(--tailwind-colors-red-800, #991B1B);
        text-align: center;

        .eqData_rt_bigbox_left1 {
          width: 86.112px;
          text-align: center;
          font-family: "PingFang SC";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          background: linear-gradient(180deg, #FFDDDA 22.5%, #FF928E 75%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 60px auto 15px;
        }

        .eqData_rt_bigbox_left_img {
          width: 46.031px;
          height: 46.031px;
          transform: rotate(-2.107deg);
          flex-shrink: 0;
        }
      }

      .eqData_rt_bigbox_right {
        display: flex;
        width: 1410px;
        align-items: flex-start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
        border-radius: 5px;

        .eqData_rt_bigbox_right_boxs {
          display: flex;
          /* padding-right: 8px; */
          align-items: center;
          gap: 8px;
          border: 1px solid #203351;

          .eqData_rt_bigbox_right_boxs_title {
            display: flex;
            width: 60px;
            height: 90px;
            padding: 6px 4px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--tailwind-colors-red-900, #7F1D1D);

            .title_text {
              text-align: center;
              font-family: "PingFang SC";
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              background: linear-gradient(180deg, #FFDDDA 22.5%, #FF928E 75%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

          }

          .eqData_rt_bigbox_right_boxs_text {
            display: flex;
            padding: 4px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            border-radius: 5px;
            border: 1px solid #192846;

            .boxs_text1 {
              display: flex;
              padding: 0px 8px;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 5px;

              .boxs_texts {
                display: flex;
                padding: 4px;
                justify-content: center;
                align-items: center;
                /* gap: 10px; */
                border-radius: 5px;
                width: 73px;

                .boxs_text1_1 {
                  color: #DCDCDC;
                  font-family: "PingFang SC";
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                }

                .boxs_text1_2 {
                  color: #0CABD5;
                  font-family: "PingFang SC";
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                }

                .high-temp {
                  font-size: 15px;
                  color: #FF2C2C;
                  /* 高温时的颜色 */
                }
              }

            }

            .boxs_text2 {
              display: flex;
              padding: 4px 8px;
              justify-content: center;
              align-items: center;
              gap: 10px;
              align-self: stretch;
              border-radius: 0px 0px 5px 5px;
              background: #192846;

              .boxs_text2_1 {
                color: #76E1FF;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
              }
            }

            .eqData_rt_boxs1_box_text {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 5px;

              .eqData_rt_boxs1_box_text1 {
                display: flex;
                padding: 4px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 5px;

                .eqData_rt_boxs1_box_text1_1 {
                  color: #DCDCDC;
                  font-family: "PingFang SC";
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                }

                .eqData_rt_boxs1_box_text1_2 {
                  width: 42px;
                  /* color: #0CABD5; */
                  color: #20B256;
                  font-family: "PingFang SC";
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;

                  span {
                    font-size: 8px;
                  }
                }
              }
            }
          }

          .eqData_rt_bigbox_right_boxs_title2 {
            display: flex;
            width: 30px;
            padding: 6px 4px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            background: #213253;

            .boxs_title2_text {
              text-align: center;
              font-family: "PingFang SC";
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              background: linear-gradient(180deg, #C1F4FF 22.5%, #4DB5FF 75%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>