<template>
  <div class="eqSetting flex-col">
    <div class="setting_dialog flex-col">

      <div class="eq">
        <!-- 标题 -->
        <div class="setting_title">
          <div class="setting_title_text">系统名称</div>
        </div>
        <!-- <i class="el-icon-circle-close self-end close_icon" /> -->
        <div class="flex-row">
          <div class="flex-col ml-20">
            <!-- 反应塔选择框 -->
            <div class="flex-col ml-11">
              <div class="flex-row">
                <button class="flex-row items-center self-start"
                  :class="reactionTowerSelectedBtn === 'RT_btn1' ? 'section3_selected' : 'section3_default'"
                  @click="selectRTBtn('RT_btn1')">
                  <img class="image_6" :src="reactionTowerImg">
                  <span class="ml-11">反应塔</span>
                </button>
                <i v-if="reactionTowerSelectedBtn === 'RT_btn1'" class="el-icon-caret-left reactionTower_icon" />
              </div>
              <div class="flex-row">
                <button class="flex-row items-center self-start"
                  :class="reactionTowerSelectedBtn === 'RT_btn2' ? 'section3_selected' : 'section3_default'"
                  @click="selectRTBtn('RT_btn2')">
                  <img class="image_6" :src="reactionTowerImg">
                  <span class="ml-11">反应塔容量</span>
                </button>
                <i v-if="reactionTowerSelectedBtn === 'RT_btn2'" class="el-icon-caret-left reactionTower_icon" />
              </div>
              <div class="flex-row">
                <button class="flex-row items-center self-start"
                  :class="reactionTowerSelectedBtn === 'RT_btn3' ? 'section3_selected' : 'section3_default'"
                  @click="selectRTBtn('RT_btn3')">
                  <img class="image_6" :src="reactionTowerImg">
                  <span class="ml-11">反应塔容量</span>
                </button>
                <i v-if="reactionTowerSelectedBtn === 'RT_btn3'" class="el-icon-caret-left reactionTower_icon" />
              </div>
            </div>
            <!-- 左下方数量选择框 -->
            <div class="flex-row group_17">
              <img class="self-start image_29" :src="vectorImg">
              <div class="flex-col section_14 ml-10">
                <div v-for="(item, index) in groupArr" :key="index" class="flex-col items-center groupArr_default"
                  :class="{ groupArr_selected: selectedNumIndex == index }" @click="selectGroup(index)">
                  <span class="text_20">{{ item }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="selectedNumIndex == 0" class="selectedNum0">
            <!-- 顶部按钮 -->
            <div class="flex-row self-start section_4 ml-11">
              <el-button v-for="(btnName, index) in buttonArr1" :key="index"
                :class="selectedBtnIndex === index ? 'btn2_selected' : 'btn2_default'" @click="selectBtn(index)">
                {{ btnName }}
              </el-button>
            </div>
            <!-- <EqInfoComponent /> -->
            <router-view/>
          </div>
          <div v-if="selectedNumIndex == 3" class="flex-col">
            <!-- 顶部按钮 -->
            <div class="flex-row self-start section_4 ml-11">
              <el-button v-for="(btnName, index) in buttonArr1" :key="index"
                :class="selectedBtnIndex === index ? 'btn2_selected' : 'btn2_default'" @click="selectBtn(index)">
                {{ btnName }}
              </el-button>
            </div>
            <div class="flex-row">
              <div class="flex-col">
                <!-- 吸附塔上开度数据 -->
                <div class="flex-row mt-22 ml-132">
                  <template>
                    <div class="flex-col border_1 ml-132">
                      <div v-for="(item, index) in flowData" :key="index">
                        <span class="font_01">{{ item.label }}:</span>
                        <span class="font_02">{{ item.value }}%</span>
                      </div>
                    </div>
                  </template>

                  <div class="flex-col border_1 ml-132">
                    <!-- <div>
                      <span class="font_01">开度id:</span>
                      <span class="font_02">{{ kdData.id }}</span>
                    </div> -->
                    <div>
                      <span class="font_01">开度值:</span>
                      <span class="font_02">{{ kdData.value }}%</span>
                    </div>
                  </div>
                </div>
                <!-- 吸附塔 -->
                <div class="flex-col">
                  <div class="flex-row items-center self-stretch relative group_1">
                    <div class="flex-row relative group_6">
                      <span class="font_6 pos_10">上进水</span>
                      <span class="font_6 pos_26">下进水</span>
                      <img class="image_14 pos_6" :src="upInletWaterImg" @click="showProgressBar(1)">
                      <img class="image_16 pos_8" :src="p2Img">
                      <img class="image_15 pos_7" :src="shortFlowImg">
                      <div class="flex-col justify-start items-center image-wrapper pos_5">
                        <img class="shrink-0 image_13" :src="flowDirectionImg">
                      </div>
                      <!-- 吸附塔数据 -->
                      <template>
                        <div class="flex-col items-start section_8 pos_12">
                          <span class="text_9">吸附塔数据</span>
                          <div v-for="(data, index) in adsorberData" :key="index" class="mt-12">
                            <span class="font_7">·</span>
                            <span class="font_2">{{ data.label }}：</span>
                            <span class="font_3">{{ data.value }}</span>
                          </div>
                        </div>
                      </template>
                    </div>
                    <div class="flex-col group_7">
                      <div class="flex-col items-center self-stretch">
                        <img class="image_14" :src="inImg" @click="showProgressBar(2)">
                        <span class="font_6 text_8 mt-16">进气阀</span>
                      </div>
                      <div class="flex-col items-center self-stretch group_10">
                        <img class="image_14" :src="inImg" @click="showProgressBar(3)">
                        <span class="font_6 text_14 mt-25">出气口</span>
                      </div>
                      <img class="self-end image_26 image_27" :src="onImg" @click="showProgressBar(4)">
                    </div>
                    <img class="image_17 pos_9" :src="p5Img">
                    <img class="image_22 pos_21" :src="p4Img">
                    <div class="flex-col justify-start items-end group_16 pos_24">
                      <span class="font_6 text_17">出水口</span>
                      <img class="image_25 pos_25" :src="p3Img">
                    </div>
                    <div class="flex-col justify-start items-center section_9 pos_14">
                      <div class="flex-col justify-start items-center relative section_10">
                        <div class="flex-col justify-start items-center relative section_11">
                          <div class="flex-col justify-start items-center section_12">
                            <div class="flex-col justify-start items-center relative section_13" />
                          </div>
                        </div>
                      </div>
                    </div>

                    <img class="image_26 pos_27" :src="downInletWaterImg" @click="showProgressBar(5)">
                    <img class="image_24 pos_23" :src="p1Img">
                  </div>
                </div>
                <!-- 吸附塔下开度数据 -->
                <div class="flex-row ml-132">
                  <template>
                    <div class="flex-col border_1 ml-132">
                      <div v-for="(item, index) in flowData" :key="index">
                        <span class="font_01">{{ item.label }}:</span>
                        <span class="font_02">{{ item.value }}%</span>
                      </div>
                    </div>
                  </template>

                  <template>
                    <div class="flex-col border_1 ml-132">
                      <div v-for="(item, index) in flowData" :key="index">
                        <span class="font_01">{{ item.label }}:</span>
                        <span class="font_02">{{ item.value }}%</span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div v-if="progressBarIndex > 0" class="flex-col ml-24 mt-60 border_2">
                <!-- 进度条 -->
                <div class="flex-row items-center relative group_4">
                  <span class="font_2 text_4">开度:</span>
                  <i class="el-icon-remove progressBar_icon" @click="decrease" />
                  <el-progress :percentage="percentage" :color="customColor" class="flex-1 progressBar" />
                  <i class="el-icon-circle-plus progressBar_icon" @click="increase" />
                </div>
                <!-- 进度条百分比选择按钮 -->
                <!-- <template> -->
                <div class="flex-row group_5">
                  <div v-for="(percent, index) in percentages" :key="index"
                    class="flex-col justify-start items-center text-wrapper_2 ml-3"
                    :class="{ 'progressBarBtn_default': selectedPercent === index }" @click="selectPercent(index)">
                    <span class="font_4" :class="{ 'text_5': selectedPercent === index }">{{ percent }}%</span>
                  </div>
                </div>
                <!-- </template> -->

                <div class="flex-row justify-center group_8">
                  <div class="flex-col justify-start items-center text-wrapper_4">
                    <span class="font_5 text_6" @click="confirmKD">确 定</span>
                  </div>
                  <div class="flex-col justify-start items-center text-wrapper_5 ml-11">
                    <span class="font_5 text_7" @click="cancelKD">取 消</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import '@/css/dcs/style.css'
import EqInfoComponent from '@/components/dcs/EqInfoComponent'

export default {
  components: {
    EqInfoComponent
  },
  props: {},
  data() {
    return {
      ws: null,
      messages: '',
      wsUrl: 'ws://10.147.17.240:9000', // 替换为你的 WebSocket 服务器地址
      getKD: JSON.stringify({
        'ip': '127.0.0.1',
        'port': '22502',
        'type': 'forward',
        'value': '0001 0000 0006 01 03 00 00 00 01'
      }),
      setKD: {
        'ip': '127.0.0.1',
        'port': '22502',
        'type': 'forward',
        'value': '0001 0000 0006 01 06 00 00 00 01'
      },
      intervalId: null,
      kdData: {
        id: '',
        value: '50'
      },

      reactionTowerImg: require('@/assets/dcs/eqName/Group 1175.svg'), // 反应塔
      vectorImg: require('@/assets/dcs/eqName/Vector.svg'), // 矢量
      // adsorberImg: require('@/assets/dcs/eqName/Adsorber.svg'), //吸附塔
      upInletWaterImg: require('@/assets/dcs/eqName/upInletWater.svg'), // 上游入水口
      downInletWaterImg: require('@/assets/dcs/eqName/downInletWater.svg'), // 下游入水口
      p1Img: require('@/assets/dcs/eqName/p1.svg'), // P1管道
      p2Img: require('@/assets/dcs/eqName/p2.svg'), // P2管道
      p3Img: require('@/assets/dcs/eqName/p3.svg'), // P3管道
      p4Img: require('@/assets/dcs/eqName/p4.svg'), // P4管道
      p5Img: require('@/assets/dcs/eqName/p5.svg'), // P5管道
      Vector246Img: require('@/assets/dcs/eqName/Vector246.svg'), // 矢量246
      flowDirectionImg: require('@/assets/dcs/eqName/flowDirection.svg'), // 流向
      shortFlowImg: require('@/assets/dcs/eqName/shortFlow.svg'), // 短流
      vector245Img: require('@/assets/dcs/eqName/Vector245.svg'), // 矢量246
      saicFlowRateImg: require('@/assets/dcs/eqName/saicFlowRate.svg'), // 上气流量
      inImg: require('@/assets/dcs/eqName/in.svg'), // 进气阀
      onImg: require('@/assets/dcs/eqName/on.svg'), // 出水口

      footTabImg1: require('@/assets/dcs/eqName/footTab1.svg'), // 主页图标
      footTabImg2: require('@/assets/dcs/eqName/footTab2.svg'), // 设备图标
      footTabImg3: require('@/assets/dcs/eqName/footTab3.svg'), // 控制图标

      selectedBtnIndex: -1, // 用于跟踪当前选中的按钮
      buttonArr1: ['打开连接', '关闭连接', '实时数据', '读取数据'],
      reactionTowerSelectedBtn: 'RT_btn1', // 用于跟踪当前选中反应塔的按钮
      selectedNumIndex: 3, // 用于跟踪当前选中的索引
      groupArr: ['40个一组', '12个一组', '10个一组', '单个'], // 数据数组
      adsorberData: [{
        label: '编号',
        value: '124124'
      },
      {
        label: '料位',
        value: '90'
      },
      {
        label: '液位',
        value: '60'
      },
      {
        label: '压力',
        value: '200'
      },
      {
        label: '内温',
        value: '69°'
      },
      {
        label: '外温',
        value: '40°'
      }
      ], // 吸附塔数据
      flowData: [{
        label: '开度',
        value: '50'
      }, // 开度数据
      {
        label: '流量',
        value: '100'
      } // 流量数据
      ], // 这里存储所有需要显示的数据
      percentage: 50, // 进度条百分比
      customColor: '#409eff',
      selectedPercent: 2, // 用于跟踪当前选中的百分比索引
      percentages: ['10', '30', '50', '70', '90', '100'], // 百分比数组
      taskFlag: false, // 用于控制定时任务是否开启

      progressBarIndex: 0 // 进度条是否显示
    }
  },
  mounted() {
    // this.connect(); // 在组件挂载时建立 WebSocket 连接
  },
  beforeDestroy() {
    this.disconnect() // 在组件销毁前关闭 WebSocket 连接
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },

  methods: {
    // 上方按钮选择
    selectBtn(index) {
      this.selectedBtnIndex = index // 更新选中的按钮索引
      // this.sendMessage();
      if (index === 0) {
        this.connect() // 打开连接
      } else if (index === 1) {
        this.disconnect() // 关闭连接
      } else if (index === 2) {
        this.sendMessageIntrval()
      } else if (index === 3) {
        this.sendMessage()
      }
    },
    // 左上方反应塔选择
    selectRTBtn(button) {
      // 更新选中状态
      this.reactionTowerSelectedBtn = button
    },
    // 左下方分组选择
    selectGroup(index) {
      // 更新选中状态为当前点击的索引
      this.selectedNumIndex = index
    },
    // 进度条控制
    // 进度条减小10
    increase() {
      this.percentage += 10
      if (this.percentage > 100) {
        this.percentage = 100
      }
    },
    // 进度条增大10
    decrease() {
      this.percentage -= 10
      if (this.percentage < 0) {
        this.percentage = 0
      }
    },
    // 进度条百分比选择
    selectPercent(index) {
      // 选择当前点击的百分比
      this.selectedPercent = index
      this.percentage = Number(this.percentages[index])
    },
    connect() {
      this.ws = new WebSocket(this.wsUrl)

      this.ws.onopen = () => {
        console.log('WebSocket connection opened')
      }

      this.ws.onmessage = (event) => {
        const receivedMsg = event.data
        this.messages = (`Server: ${receivedMsg}`)
        console.log('get message:', this.messages)
        const jsonData = JSON.parse(receivedMsg)
        const extractedData = jsonData.data.substring(10)// 截取数据
        const groupedData = []
        for (let i = 0; i < extractedData.length; i += 2) {
          groupedData.push(extractedData.substr(i, 2))
        }
        this.kdData.id = groupedData[1]
        console.log(groupedData[0])
        this.kdData.value = parseInt(jsonData.data.slice(-4), 16)
      }

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

      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error)
      }
    },
    sendMessage() {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(this.getKD)
      } else {
        console.warn('WebSocket 连接未打开，无法发送消息。1')
      }
    },
    setKDValue() {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify(this.setKD))
      } else {
        console.warn('WebSocket 连接未打开，无法发送消息。2')
      }
    },
    // 定时任务
    startInterval() {
      // 将 kdData.value 转换为整数并再转换为十六进制字符串
      let numericValue = parseInt(this.kdData.value, 10) // 将字符串转换为整数
      let dd = numericValue.toString(16).toUpperCase().padStart(4, '0') // 转换为十六进制并补齐四位
      if (numericValue === this.percentage) {
        this.taskFlag = false
        return
      } else if (numericValue < this.percentage) {
        numericValue += 1 // 加1
      } else {
        numericValue -= 1 // 减1
      }
      // console.log('1111', dd);
      dd = numericValue.toString(16).toUpperCase().padStart(4, '0') // 更新 dd
      // console.log('2222', dd);
      this.setKD.value = '0001 0000 0006 01 06 00 00' + dd
      this.setKDValue()
      if (this.taskFlag) {
        setTimeout(() => {
          this.startInterval()
        }, 1000)
      }
    },
    // 定时发送消息
    sendMessageIntrval() {
      this.intervalId = setInterval(() => {
        this.sendMessage()
      }, 1000)
    },

    disconnect() {
      this.taskFlag = false
      if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) {
        this.ws.close()
      } else {
        console.warn('WebSocket 已经关闭或正在关闭，无法再关闭。')
      }
    },
    confirmKD() {
      console.log('设定百分比', this.percentage)
      this.taskFlag = true
      this.startInterval()
    },
    cancelKD() {
      if (this.intervalId) {
        clearInterval(this.intervalId)
      }
      this.taskFlag = false
      this.progressBarIndex = 0
      console.log('取消设定百分比', this.progressBarIndex)
    },
    showProgressBar(index) {
      this.progressBarIndex = index
    },
    jumpToData() {
      this.$router.push({ path: '/equipment/eqData' })
    },
    jumpToSetting() {
      this.$router.push({ path: '/equipment/eqSetting' })
    }
  }
}
</script>

<style scoped lang="scss">
.eqSetting {
  width: 1920px;
  height: 1080px;

  .setting_dialog {
    margin: auto;
    width: 1299px;
    height: 776px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid rgba(16, 127, 209, 0.50);
    opacity: 0.9;
    background: rgba(1, 17, 48, 0.90);
    box-shadow: 0px 0px 6px 3px rgba(126, 230, 246, 0.30) inset;
    backdrop-filter: blur(2px);

  }
}

.ml-132 {
  margin-left: 8.31rem;
}

.ml-99 {
  margin-left: 6.19rem;
}

.mt-7 {
  margin-top: 0.44rem;
}

.mt-11 {
  margin-top: 0.69rem;
}

.mt-13 {
  margin-top: 0.81rem;
}

.ml-5 {
  margin-left: 0.31rem;
}

.mt-51 {
  margin-top: 3.19rem;
}

.ml-3 {
  margin-left: 0.19rem;
}

.ml-11 {
  margin-left: 0.69rem;
}

.mt-3 {
  margin-top: 0.19rem;
}

.close_icon {
  margin-right: 2rem;
  font-size: 30px;
  color: ghostwhite;
}

.group {
  padding: 0 0.81rem;
}

.section3_selected {

  font-size: 1.5rem;
  font-family: PingFang SC;
  line-height: 1.39rem;
  color: #ffffff;
  width: 12rem;
  margin: 0.5rem;
  padding: 0.38rem 0.73rem 0.41rem;
  border: solid 0.094rem #366b92;
  background-color: #1691d0;
}

.image_2 {
  margin-top: 0.094rem;
  border-radius: 0.031rem;
  width: 0.88rem;
  height: 1.25rem;
}

.section3_default {
  font-size: 1.5rem;
  font-family: PingFang SC;
  line-height: 1.39rem;
  color: #5fa9cd;
  width: 12rem;
  margin: 0.5rem;
  padding: 0.38rem 0.73rem 0.41rem;
  background-color: #00354b;
  border: solid 0.094rem #366b92;

}

.image_6 {
  filter: drop-shadow(0rem 0rem 0.094rem #6ef6fd, 0rem 0rem 0.031rem #57e9ff80);
  width: 1.5rem;
  height: 2rem;
}

.text_3 {
  margin-right: 1.02rem;
  color: #5fa9cd;
  font-size: 1.5rem;
  font-family: PingFang SC;
  line-height: 1.39rem;
}

.section_4 {
  width: 90vh;
  margin-top: 0.66rem;
  padding: 0.8rem 1.39rem 0.8rem;
  background-image: linear-gradient(90deg, #034269 0%, #01243c 100%);
  border: 0.063rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #2f6f97 0%, #01233b 100%);
}

.text-wrapper {
  padding: 0.42rem 0 0.39rem;
  background-image: linear-gradient(180deg, #f0b419 0%, #e68a00 100%);
  border-radius: 0.31rem;
  width: 4.81rem;
  height: 2.56rem;
  border: solid 0.063rem #ffddab;
}

.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  color: #ffffff;
}

.text_2 {
  color: #fff2e4;
  line-height: 0.81rem;
}

.image_4 {
  border-radius: 0.31rem;
  width: 4.75rem;
  height: 2.5rem;
}

.image_5 {
  margin-right: 19.36rem;
}

.group_17 {
  margin-top: 13.53rem;
  margin-left: 2rem;
}

.image_29 {
  margin-top: 4.91rem;
  width: 1.19rem;
  height: 1.31rem;
}

.section_14 {

  background-color: #2b3a56;
  border: solid 0.063rem #0185d9;
}

.font_9 {
  cursor: default;
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 700;
  color: #ffffff;
}

.groupArr_default {
  color: #FFF;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: default;
  padding: 0.51rem 0 0.43rem;
  background-color: #2C3B56;
  width: 8rem;
}

.groupArr_selected {
  background-color: #002636;
}

.image_7 {
  width: 5.5rem;
  height: 3.63rem;
}

.image_8 {
  margin-left: 6.77rem;
  margin-bottom: 0.13rem;
}

.image_9 {
  width: 5.5rem;
  height: 1.81rem;
}

.group_6 {
  padding: 0 2.79rem 0.51rem;
  width: 23.85rem;
  height: 26.69rem;
}

.font_6 {
  font-size: 1.25rem;
  font-family: PingFang SC;
  line-height: 1.17rem;
  font-weight: 600;
  color: #8fddff;
}

.pos_10 {
  position: absolute;
  right: 5.57rem;
  top: 3.44rem;
}

.pos_26 {
  position: absolute;
  right: 9.26rem;
  bottom: 1.02rem;
}

.image_13 {
  width: 16.06rem;
  height: 26.75rem;
}

.pos_12 {
  position: absolute;
  right: 3.82rem;
  top: 5.91rem;
}

.text_9 {
  color: #ffffff;
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.93rem;
}

.group_9 {
  line-height: 0.81rem;
}

.font_7 {
  font-size: 1.25rem;
  font-family: PingFang SC;
  line-height: 0.19rem;
  color: #ff6b00;
}

.text_10 {
  line-height: 0.81rem;
}

.font_3 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.65rem;
  color: #01e8fe;
}

.text_11 {
  line-height: 0.64rem;
}

.group_11 {
  line-height: 0.82rem;
}

.text_12 {
  line-height: 0.82rem;
}

.group_12 {
  line-height: 0.82rem;
}

.section_6 {
  margin-top: 1.02rem;
  background-color: #000c14;
  width: 16.23rem;
  height: 7rem;
  border: solid 0.063rem #0a4d5c;
}

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

.image_10 {
  /* position: absolute; */
  width: 0.38rem;
  height: 0.31rem;
}

.image_11 {
  width: 0.44rem;
  height: 0.38rem;
}

.pos_2 {
  position: absolute;
  right: 0;
  top: 0;
}

.group_3 {
  width: 14.94rem;
}

.pos_3 {
  position: absolute;
  left: 0.44rem;
  right: 0.73rem;
  top: 50%;
  transform: translateY(-50%);
}

.group_4 {
  padding-left: 0.12rem;
}

.text_4 {
  color: #72a5ca;
  line-height: 0.81rem;
}

.progressBar {
  stroke-width: 1rem;
  margin-left: 0.28rem;
  height: 1.25rem;
}

.section_7 {
  margin-left: 0.28rem;
  opacity: 0.4;
  background-color: #1356a4;
  border-radius: 0.19rem;
  width: 3.56rem;
  height: 1.5rem;
  border: solid 0.063rem #abf2ff;
}

.pos_4 {
  position: absolute;
  right: 0.77rem;
  top: 50%;
  transform: translateY(-50%);
}

.group_5 {
  margin-top: 0.28rem;
}

.text-wrapper_2 {
  flex: 1 1 2.13rem;
  padding: 0.13rem 0 0.15rem;
  border-radius: 0.19rem;
  height: 1.25rem;
  border: solid 0.063rem #39a0ee;
}

.font_4 {
  cursor: default;
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.56rem;
  color: #39a0ee;
  margin-top: 0.1875rem;
}

.progressBarBtn_default {
  background-image: linear-gradient(180deg, #568ad0 0%, #1b3a6e 100%);
}

.text_5 {
  color: #092d45;
}

.group_8 {
  margin-top: 0.63rem;
  padding-left: 1.63rem;
  padding-right: 1.38rem;
}

.text-wrapper_4 {
  padding: 0.3rem 0 0.12rem;
  background-image: linear-gradient(180deg, #6fdcff -37%, #0061a8 100%);
  border-radius: 0.25rem;
  overflow: hidden;
  width: 3.75rem;
  height: 1.44rem;
  border: solid 0.063rem #2895c9;
}

.font_5 {
  cursor: default;
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.65rem;
  color: #ffffff;
}

.text_6 {
  line-height: 0.69rem;
}

.text-wrapper_5 {
  padding: 0.3rem 0 0.12rem;
  background-image: linear-gradient(180deg, #568ad0 0%, #1b3a6e 100%);
  border-radius: 0.25rem;
  overflow: hidden;
  width: 3.75rem;
  height: 1.44rem;
  border: solid 0.063rem #2097d1;
}

.text_7 {
  line-height: 0.69rem;
}

.pos_11 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.image_28 {
  margin-left: 7.64rem;
}

.operationBtn {
  display: block;
  text-align: center;
}

.mt-25 {
  margin-top: 1.56rem;
}

.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  color: #ffffff;
}

.group_1 {
  padding: 0 0.84rem 0.13rem;
}

.group_6 {
  padding: 0 5.57rem 1.02rem;
  width: 23.79rem;
  height: 26.69rem;
}

.font_6 {
  font-size: 1.25rem;
  font-family: PingFang SC;
  line-height: 1.17rem;
  font-weight: 600;
  color: #8fddff;
}

.pos_10 {
  position: absolute;
  right: 5.57rem;
  top: 3.44rem;
}

.pos_26 {
  position: absolute;
  right: 9.26rem;
  bottom: 1.02rem;
}

.image_14 {
  width: 2.81rem;
  height: 2.81rem;
}

.pos_6 {
  position: absolute;
  right: 6.32rem;
  top: 0;
}

.image_16 {
  width: 6.19rem;
  height: 5.31rem;
}

.pos_8 {
  position: absolute;
  right: 0;
  top: 1.48rem;
}

.image_15 {
  width: 5.81rem;
  height: 0.38rem;
}

.pos_7 {
  background-image: url('../../../assets/dcs/eqName/Vector245.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 8.53rem;
  top: 1.41rem;
}

.image-wrapper {
  background-image: url('../../../assets/dcs/eqName/P6.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 16.13rem;
  height: 26.69rem;
}

.pos_5 {
  position: absolute;
  left: 0;
  top: 0;
}

.image_13 {
  width: 16.06rem;
  height: 26.75rem;
}

.section_8 {
  padding: 0.8rem 1.26rem 1.22rem;
  background-image: url('../../../assets/dcs/eqName/table.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 9.5rem;
}

.text_9 {
  color: #ffffff;
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.93rem;
}

.group_9 {
  line-height: 0.81rem;
}

.font_7 {
  font-size: 1.25rem;
  font-family: PingFang SC;
  line-height: 0.19rem;
  color: #ff6b00;
}

.text_10 {
  line-height: 0.81rem;
}

.font_3 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.65rem;
  color: #01e8fe;
}

.text_11 {
  line-height: 0.64rem;
}

.group_11 {
  line-height: 0.82rem;
}

.text_12 {
  line-height: 0.82rem;
}

.group_12 {
  line-height: 0.82rem;
}

.text_13 {
  line-height: 0.82rem;
}

.group_13 {
  line-height: 0.81rem;
}

.text_15 {
  line-height: 0.81rem;
}

.group_14 {
  line-height: 0.74rem;
}

.font_8 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.74rem;
  color: #01e8fe;
}

.group_15 {
  line-height: 0.74rem;
}

.text_16 {
  line-height: 0.81rem;
}

.group_7 {
  margin-left: 8.31rem;
}

.text_8 {
  line-height: 1.18rem;
}

.group_10 {
  margin-top: 4.43rem;
}

.text_14 {
  line-height: 1.17rem;
}

.image_26 {
  width: 2.81rem;
  height: 2.81rem;
}

.image_27 {
  margin-top: 9.99rem;
}

.image_17 {
  width: 7.31rem;
  height: 5.06rem;
}

.pos_9 {
  position: absolute;
  right: 4.16rem;
  top: 1.59rem;
}

.image_22 {
  width: 5.13rem;
  height: 0.94rem;
}

.pos_21 {
  position: absolute;
  right: 4.16rem;
  top: 10.76rem;
}

.image_19 {
  width: 0.75rem;
  height: 15.88rem;
}

.pos_16 {
  position: absolute;
  right: 8.28rem;
  bottom: 4.85rem;
}

.group_16 {
  padding: 1.03rem 0 1rem;
  width: 6.38rem;
}

.pos_24 {
  position: absolute;
  right: 4.16rem;
  top: 23.41rem;
}

.text_17 {
  margin-right: 0.35rem;
  line-height: 1.15rem;
}

.image_25 {
  width: 6.38rem;
  height: 3.19rem;
}

.pos_25 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.image_18 {
  width: 6.31rem;
  height: 2.35rem;
}

.pos_13 {
  position: absolute;
  right: 8.81rem;
  top: 6.91rem;
}

.section_9 {
  background-image: url('../../../assets/dcs/eqName/Adsorber.svg');
  background-repeat: no-repeat;
  width: 8rem;
  height: -webkit-fill-available;
}

.pos_14 {
  position: absolute;
  right: 8.1rem;
  top: 6.8rem;
}

.image_21 {
  width: 1.5rem;
  height: 12.63rem;
}

.pos_18 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pos_19 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.pos_17 {
  position: absolute;
  left: 0.14rem;
  top: 50%;
  transform: translateY(-50%);
}

.image_20 {
  width: 0.88rem;
  height: 15.88rem;
}

.pos_15 {
  position: absolute;
  right: 8.78rem;
  bottom: 4.85rem;
}

.pos_20 {
  position: absolute;
  right: 8.91rem;
  bottom: 6.67rem;
}

.image_23 {
  width: 5.71rem;
  height: 0.87rem;
}

.pos_22 {
  position: absolute;
  right: 9.41rem;
  bottom: 6.71rem;
}

.pos_27 {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.image_24 {
  width: 4.06rem;
  height: 3.25rem;
}

.pos_23 {
  position: absolute;
  right: 13.01rem;
  bottom: 1.44rem;
}

.reactionTower_icon {
  color: #5FC8FB;
  margin-top: 1.5rem;
}

.custom-radio-group {
  display: flex;
  flex-direction: column;
}

.custom-radio-group .el-radio-button {
  margin-bottom: 10px;
}

.custom-radio-group .group-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.btn2_selected {
  color: #ffffff;
  background: linear-gradient(180deg, #F1B419 0%, #E68A00 100%);
}

.btn2_default {
  border: 1px solid #16759D;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(27, 125, 196, 0.00) 12.5%, rgba(17, 164, 247, 0.20) 100%), #0B2A59;
}

.font_01 {
  color: #72A5CA;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 10px;
}

.font_02 {
  color: #14FFFF;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 100;
  line-height: normal;
}

.border_1 {
  width: 100px;
  border: 0.5px solid #163A3D;
  background-color: #040d1b;
}

.group_1 {
  margin-bottom: 1rem;
}

.progressBar_icon {
  color: #0e89cf;
  font-size: 1.2rem;
}

.setting_title {
  width: 344px;
  height: 48.946px;
  flex-shrink: 0;
  background-image: url('../../../assets/dcs/eqSetting/header.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;

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

.image_31 {
  margin-top: -21px;
  width: 7.44rem;
  height: 4.13rem;
}

.selectedNum0 {
  width: 1000px;
  /* padding: 5.43rem 6.56rem 6.5rem; */
  background-color: #082a4e;
  margin-top: 10px;
  border: solid 0.063rem #28b9ff;
  .section_4{
    margin-left: 70px;
    width: 900px;
  }
}

.border_2 {
  width: 259px;
  height: 111px;
  flex-shrink: 0;
  border: 1px solid #0B4E5C;
  background: #000C14;
  padding: 15px;
}
</style>
