<template>
  <div id="fan_info">
    <div class="title">风机</div>
    <div v-if="socketData==null||socketData.length===0" class="showNull ">
      <div class="loading" v-if="loading===0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>

    <div v-else class="fans">
      <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
        <div>
          <div class="echart"></div>
          <div class="fan-name">{{ changeNum(item) }}号风机</div>
          <div class="option-nav">
            <div class="state">
              <!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
                <div class="state-icon"></div>
                状态：<span class="fan-state">{{ changeStateText(item.breakdown, item.running) }}</span>
              </div>
              <div class="switch">
                <div
                    id="auto"
                    :class="{ active: !item.running }"
                    @click="editOperate(item,true,'启动')"
                >
                  启动
                </div>
                <div
                    id="stop"
                    :class="{ active: item.running }"
                    @click="editOperate(item,false,'停止')"
                >
                  停止
                </div>
              </div>
            </div>
            <div class="power">
              <div class="check-box">
                <el-radio-group v-model="item.autoMode" @change="changeModel(item)">
                  <el-radio :label="true">自动</el-radio>
                  <el-radio :label="false">手动</el-radio>
                </el-radio-group>
              </div>
              <div class="edit-power" title="输入完成后, 请回车进行修改">
                <span style="color: white">给定频率</span>
                <!--                  <span class="units"-->
                <!--                  ><input-->
                <!--                      type="number"-->
                <!--                      min="0"-->
                <!--                      v-model="item.frequencySetting"-->
                <!--                      onchange="changeFrequency(item)"-->
                <!--                      :disabled="item.autoMode"-->
                <!--                  /></span>-->
                <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
                          title="输入完成后, 请回车进行修改" @change="changeFrequency(item)" @focus="item.showTooltip=true"
                          @blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}"
                          @submit="changeFrequency(item)">
                  <template #suffix>
                    <span>Hz</span>
                  </template>
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="current" @click="handleOpenChart(item)">
          <fan-info-item :wp="transducerData[index]"/>
        </div>
        <div class="line"></div>
      </div>
      <div class="shunt-box">
        <div class="shuntThreshold" v-for="(item,index) in shuntList">
          <div class="fenliu-icon"></div>
          {{ index + 1 }}号分流阀值
          <span class="units"
          ><input
              type="number"
              min="0"
              v-model="item.shuntThreshold"
          /></span>
        </div>
      </div>
    </div>

    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="fanIndex+'号风机电流监控数据'"
                 width="2175px"
                 :modal="false" id="fanDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
          <div class="loading"></div>
          <span>加载中...</span>
        </div>
        <div class="chat-dialog" v-else>
          <div id="containerFan"></div>
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
          <div class="export-btn" @click="handleExport">
            导出
          </div>
          <choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
              v-model="selectTimeButton"
              @select="timeSelect"
          />
        </div>
        <div class="change-screen">
          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
                   v-if="isFullScreen">
            <FullScreen/>
          </el-icon>
          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
        </div>
        <div class="left-bottom-icon"></div>
        <div class="right-bottom-icon"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import FanInfoItem from "./FanInfoItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import ChooseDates from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import {
  editFrequency,
  editFrequencyModelSwitch,
  editFrequencyOperationSwitch,
  getFanEchartsInfo
} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import elementResizeDetectorMaker from "element-resize-detector";
import CsvExportor from "csv-exportor";
import {getNowFormatDate} from "@/utils/date.js";

const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const props = defineProps({
  list: Array,
  tunnelId: Number,
  fanData: Array,
  transducerData: Array,
  loading: Number,
});
const chooseDayRef = ref();
const chooseMonthRef = ref();
const socketData = ref()
let Echarts_info1 = null;
let fan01_option = reactive();
const transducerData = ref([])
const shuntList = ref([
  {
    shuntThreshold: 23
  },
  {
    shuntThreshold: 14
  },
  {
    shuntThreshold: 22
  },
  {
    shuntThreshold: 46
  },
])
const stateA = ref(false)
const stateB = ref(false)
const stateC = ref(false)
const isVisited = ref(false)
const showLoading = ref(false)
const isFullScreen = ref(false);
let dataZoomTop = reactive('87%')
let chartData = reactive([])
const fanIndex = ref('')
const openEquipmentId = ref(0)
const clickMonth = ref('')
const clickDay = ref('')
let myEcharts = reactive({});
watch(() => props.loading, (now) => {
  props.loading = now
}, {deep: true});
watch(() => props.tunnelId, (now) => {
  props.tunnelId = now
}, {deep: true});
watch(() => props.transducerData, (now) => {
  getTransData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.fanData, (now) => {
  getBasicData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
  socketData.value?.forEach(item => {
    now.forEach(newItem => {
        if (item.equipmentId === newItem.equipmentId) {
          if (newItem.hasOwnProperty('frequencyFeedback')) {
            item.frequencySetting = newItem.frequencySetting
            item.frequencyFeedback = newItem.frequencyFeedback
          } else if (newItem.hasOwnProperty('running')) {
            item.running = newItem.running
            item.breakdown = newItem.breakdown
            item.autoMode = newItem.autoMode
          }
      }
    })
  })
  transducerData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
         if (newItem.hasOwnProperty('phaseCurrentA')) {
          item.valueA = newItem.phaseCurrentA
          item.valueB = newItem.phaseCurrentB
          item.valueC = newItem.phaseCurrentC
        }
      }
    })
  })
  handleOnMounted()
}, {deep: true});

//导出csv
const handleExport = () => {
  const header = ['时间', 'A相电流(A)', 'B相电流(A)', 'C相电流(A)'];
  let newArray = []
  chartData.dates.forEach((item, index) => {
    let obj = {
      dates: chartData.dates[index],
      currentsA: chartData.currentsA[index],
      currentsB: chartData.currentsB[index],
      currentsC: chartData.currentsC[index]
    }
    newArray.push(obj)
  })
  let time = ''
  if (selectTimeButton.value === 1) {
    if (clickMonth.value) {
      const index = clickMonth.value.lastIndexOf("\-");
      time = clickMonth.value.substring(0, index)
    } else {
      time = getNowFormatDate(false)
    }
  } else if (selectTimeButton.value === 2) {
    if (clickDay.value) {
      if (clickDay.value[1]) {
        time = clickDay.value.map(item => item).join('到')
      } else {
        time = clickDay.value
      }
    } else {
      time = getNowFormatDate(true)
    }
  } else if (selectTimeButton.value === 0) {
    time = new Date().getFullYear() + '年'
  }
  const name = fanIndex.value + '号风机电流监控数据-' + time
  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
}
const daySelect = (val) => {
  if (val) {
    clickDay.value = val
    if (isFullScreen.value) {
      getFanInfo(openEquipmentId.value, 'day', '', '', val[0], val[1])
    } else {
      getFanInfo(openEquipmentId.value, 'day', '', true, val[0], val[1])
    }
  } else {
    if (isFullScreen.value) {
      getFanInfo(openEquipmentId.value, 'day', '')
    } else {
      getFanInfo(openEquipmentId.value, 'day', '', true)
    }
  }
}
const monthSelect = (val) => {
  clickMonth.value = val
  if (isFullScreen.value) {
    getFanInfo(openEquipmentId.value, 'month', val)
  } else {
    getFanInfo(openEquipmentId.value, 'month', val, true)
  }
}
const changeDate = (index) => {
  switch (index) {
    case 0:
      return 'years'
    case 1:
      return 'month'
    case 2:
      return 'day'
  }
}
const timeSelect = (index) => {
  if (isFullScreen.value) {
    getFanInfo(openEquipmentId.value, changeDate(index))
  } else {
    getFanInfo(openEquipmentId.value, changeDate(index), '', true)
  }
}
//放大弹窗
const handleFullScreen = () => {
  const titleName = document.getElementsByClassName('el-dialog__title')[0]
  const fan = document.getElementById('fanDialog')
  const fanChart = document.getElementById('containerFan')
  const erd = elementResizeDetectorMaker();
  fan.classList.remove('shrink-screen-dialog')
  titleName.style.fontSize = '70px'
  erd.listenTo(document.getElementById('fanDialog'), (element) => {
    fanChart.style.height = (element.offsetHeight - 140) + 'px'
    myEcharts.resize();
  });
  nextTick(() => {
    isFullScreen.value = false
    initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
  })
}
const shrinkScreen = () => {
  const fan = document.getElementById('fanDialog')
  const fanChart = document.getElementById('containerFan')
  const titleName = document.getElementsByClassName('el-dialog__title')[0]
  titleName.style.fontSize = '50px'
  fan.classList.add('shrink-screen-dialog')
  fanChart.style.height = '1200px'
  myEcharts.resize();
  nextTick(() => {
    isFullScreen.value = true
    initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, dataZoomTop)
  })
}
const packageData = (item, type, flag) => {
  let number = 0
  if (item.equipmentType === "frequency1") {
    number = 1
  } else if (item.equipmentType === "frequency2") {
    number = 2
  }
  if (flag) {
    return {
      number: number,
      value: type,//浮点数
      tunnelId: props.tunnelId,
    }
  } else {
    return {
      number: number,
      state: type === true ? 1 : 0,
      tunnelId: props.tunnelId,
    }
  }
}
//启动/停止
const editOperate = (item, flag, type) => {
  ElMessageBox.confirm(`确认${type}${changeNum(item)}号风机吗？`, '系统提示', {
    type: 'warning',
    closeOnClickModal: false
  }).then(() => {
    const data = packageData(item, flag)
    editFrequencyOperationSwitch(data).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(() => {
    item.running = !item.running
  });
}

const changeFrequency = (item) => {
  ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的频率为${item.frequencySetting}Hz吗？`, '系统提示', {
    type: 'warning',
    closeOnClickModal: false
  }).then(() => {
    const data = packageData(item, item.frequencySetting, true)
    editFrequency(data).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.warning(res.msg)
      }
    })
  }).catch(() => {
    // item.running=!item.running
  });
}
const changeModel = (item) => {
  let flag
  if (item.autoMode) {
    flag = '自动'
  } else {
    flag = '手动'
  }
  let number = 0
  if (item.equipmentType === "frequency1") {
    number = 1
  } else if (item.equipmentType === "frequency2") {
    number = 2
  }
  ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗？`, '系统提示', {
    type: 'warning',
    closeOnClickModal: false
  }).then(() => {
    const data =  {
      number: number,
      state: item.autoMode?1:0,
      tunnelId: props.tunnelId,
    }
    editFrequencyModelSwitch(data).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.warning(res.msg)
      }
    })
  }).catch(() => {
    item.autoMode = !item.autoMode
  });
}
const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
  showLoading.value = true
  nextTick(() => {
    if (flag) {
      const fan = document.getElementById('fanDialog')
      fan.classList.remove('shrink-screen-dialog')
      if (!isFullScreen.value) {
        const titleName = document.getElementsByClassName('el-dialog__title')[0]
        titleName.style.fontSize = '70px'
      }
    }
  })
  getFanEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      chartData = res.data
      nextTick(() => {
        if (flag) {
          const fanChart = document.getElementById('containerFan')
          const erd = elementResizeDetectorMaker();
          erd.listenTo(document.getElementById('fanDialog'), (element) => {
            fanChart.style.height = element.offsetHeight - 140 + 'px'
            myEcharts.resize();
          });
          if (!isFullScreen.value) {
            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
          }
        } else {
          shrinkScreen()
          // const fan = document.getElementById('fanDialog')
          // fan.classList.add('shrink-screen-dialog')
          // initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
        }
      })
    }
  })
}
const handleOpenChart = (item) => {
  nextTick(() => {
    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
    }
    if (chooseDayRef.value) {
      chooseDayRef.value.clearData()
    }
  })
  clickMonth.value = ''
  clickDay.value = ''
  isVisited.value = true
  selectTimeButton.value = 2
  openEquipmentId.value = item.equipmentId
  isFullScreen.value = false
  getFanInfo(item.equipmentId, 'day', '', true)
  if (item.equipmentType === "frequency1") {
    fanIndex.value = '一'
  } else {
    fanIndex.value = '二'
  }
}
const getTransData = (data) => {
  let tranObj = {}
  let tranArr = []
  data?.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
      max: 600,
      valueA: item.phaseCurrentA,
      pointA: item.phaseCurrentAThreshold,
      valueB: item.phaseCurrentB,
      pointB: item.phaseCurrentBThreshold,
      valueC: item.phaseCurrentC,
      pointC: item.phaseCurrentCThreshold,
      frequencySetting: item.frequencySetting,
      frequencyFeedback: item.frequencyFeedback,
    }
    stateA.value = item.phaseCurrentA > item.phaseCurrentAThreshold
    stateB.value = item.phaseCurrentB > item.phaseCurrentBThreshold
    stateC.value = item.phaseCurrentC > item.phaseCurrentCThreshold
    tranArr.push(tranObj)
  })
  transducerData.value = tranArr
}

const changeNum = (item) => {
  switch (item.equipmentType) {
    case "frequency1":
      return '一';
    case "frequency2":
      return '二';
  }
}
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data?.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
      equipmentName: item.equipmentName,
      equipmentType: item.equipmentType,
      autoMode: item.autoMode,//自动模式
      breakdown: item.breakdown,//故障
      running: item.running,//启动,
      showTooltip: false,
      frequencyFeedback: item.frequencyFeedback,
      frequencySetting: item.frequencySetting
    }
    tranArr.push(tranObj)
  })
  socketData.value = tranArr
  nextTick(() => {
    handleOnMounted()
  })
}

const handleOnMounted = () => {
  const chart = document.getElementsByClassName('echart');
  for (let i = 0; i < chart.length; i++) {
    Echarts_info1 = echarts.init(chart[i]);
    fan01_option = {
      series: [
        {
          type: "gauge",
          startAngle: -120,
          endAngle: -420,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 10,
              borderColor: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#4BB10E", // 0% 处的颜色
                  },
                  {
                    offset: 0.25,
                    color: "#B1AD0E", // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "#B1880E", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D77E01", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#4BB10E", // 0% 处的颜色
                  },
                  {
                    offset: 0.25,
                    color: "#B1AD0E", // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "#B1880E", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D77E01", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }
            },
          },
          max: 50,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 10,
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value: socketData.value[i].frequencyFeedback,
              fontSize: 2100,
              detail: {
                valueAnimation: true,
                offsetCenter: ["0%", "0%"],
                fontSize: 40,
                color: "white",
              },
            },
          ],
          axisLine: {
            lineStyle: {
              width: 3,
              color: [[1, "#155F7C"]],
            },
          },
          detail: {
            width: 100,
            height: 14,
            fontSize: 26,
            color: "inherit",
            formatter: "{value}",
          },
        },
      ],
    }
    fan01_option && Echarts_info1.setOption(fan01_option);
  }
}
const changeStopColor = (breakdown, running) => {
  if (breakdown) {
    return 'red'
  } else {
    if (running) {
      return '#3eab3f'
    } else {
      return '#E6A23C'
    }
  }
}
const changeStateText = (breakdown, running) => {
  if (breakdown) {
    return '故障'
  } else {
    if (running) {
      return '运行'
    } else {
      return '停止'
    }
  }
}
/**
 * 初始化echarts实例方法
 */
const initChart = (type, valueA, valueB, valueC, top) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerFan'));
  //5.传入数据
  let option = {
    //图例
    legend: {
      left: 0,
      textStyle: {
        color: '#FFFFFF',
        fontSize: 45
      },
      itemWidth: 30,
      itemHeight: 30,
      icon: "circle",
    },
    //离容器四侧的距离
    grid: {
      left: 0, // 左边距
      right: 20, // 右边距
      top: 80, // 顶边距
      bottom: 170, // 底边距
      containLabel: true,
    },
    //提示框组件
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: "rgba(20,36,51,0.7)", // 设置背景颜色为透明
      borderColor: "#6087BA", // 设置边框颜色为透明
      padding: 0, // 设置内边距为0
      borderWidth: 2,
      textStyle: {
        fontSize: 40
      },
      formatter: (params) => {
        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
        for (let i = 0; i < params.length; i++) {
          res += `
              <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
             `;
        }
        return res
      },
    },
    dataZoom: [{
      type: 'inside',
    },
      {
        type: 'slider',
        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
          color: '#fffff'
        }
      }
    ],
    //X轴
    xAxis: {
      type: 'category',
      // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
      data: type,
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //Y轴
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //配置项
    series: [
      {
        // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
        name: 'A相电流',
        data: valueA,
        type: 'line',
        smooth: true,
        symbolSize: 24,
        lineStyle: {
          width: 5
        },
      },
      {
        name: 'B相电流',
        data: valueB,
        type: 'line',
        smooth: true,
        symbolSize: 24,
        lineStyle: {
          width: 5
        },
      },
      {
        name: 'C相电流',
        data: valueC,
        type: 'line',
        smooth: true,
        symbolSize: 24,
        lineStyle: {
          width: 5
        },
      }
    ]
  }
  myEcharts.setOption(option);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
}

</script>

<style lang="scss" scoped>

#fanDialog {
  overflow: hidden;
}


:deep( .el-radio__input.is-checked + .el-radio__label) {
  color: #38CAFB;
}

:deep( .el-radio__input.is-checked .el-radio__inner) {
  border-color: #062247;
  background: #38CAFB;
}

:deep( .el-radio__inner) {
  border: none;
  background: none;
}

:deep(.el-radio__inner::after) {
  display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

:deep(.el-radio-group) {
  .el-radio {
    display: flex;
    align-items: center;
  }

}

:deep( .el-radio__input) {
  width: 28px;
  height: 28px;
  border: 2px solid #38cafb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep( .el-radio__label) {
  font-size: 30px;
  color: #38cafb;
  margin-top: -5px;
}

#fan_info {
  //height: 1465px;
  //height: 1000px;
  min-height: 350px;
  width: 830px;
  //position: absolute;
  z-index: 100;
  //top: 184px;
  //left: 68px;
  padding: 10px 10px 20px 10px;
  background-image: url(../../../assets/images/fanInfo/bg.png);
  color: #2fb0df;
  box-sizing: border-box;

  .title {
    width: 40%;
    text-align: left;
    padding: 0 0 0 50px;
    font-size: 38px;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .fans {
    height: calc(100% - 30px);

    .shunt-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 15px;
      margin-top: 15px;

      .shuntThreshold {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        padding-right: 45px;
        font-size: 28px;
        color: #FFFFFF;
        border-right: 2px solid #38CAFB;
        margin-right: 45px;

        &:nth-child(2n) {
          border-right: none;
          margin-right: 0;
          padding-right: 0;
        }

        &:nth-child(3), &:nth-child(4) {
          padding-bottom: 0;
        }

        .fenliu-icon {
          margin-right: 9px;
          width: 31px;
          height: 28px;
          background-image: url('../../../assets/images/fanInfo/fsp_icon_flf.png');
        }

        .units {
          z-index: 22;
          position: relative;
        }

        input {
          width: 130px;
          height: 44px;
          border: 2px solid #0f82af;
          background: transparent;
          margin-left: 14px;
          outline: none;
          font-size: 28px;
          font-weight: bold;
          color: #38cafb;
          line-height: 37px;
        }

        .units::after {
          content: "%";
          position: absolute;
          right: 6px;
          top: 40%;
          bottom: 0;
          transform: translateY(-50%);
          font-size: 28px;
          color: #38cafb;
          line-height: 37px;
        }
      }
    }

    .fan-item {
      //height: 33.5%;
      height: 50%;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      //border-bottom: 2px solid rgba(107, 163, 237, 0.4);

      > div:first-child {
        display: flex;

        .echart {
          height: 245px;
          width: 34%;
          margin: 0px 0px 0px 10px;
          position: relative;
        }

        .echart::after {
          content: "Hz";
          font-size: 24px;
          font-weight: bold;
          color: #ffffff;
          line-height: 31px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, 60%);
        }

        .fan-name {
          width: 39px;
          height: 140px;
          font-size: 29px;
          color: #38cafb;
          line-height: 35px;
          text-align: center;
          margin-right: 25px;
          transform: translateY(33%);
        }

        .option-nav {
          width: 70%;
          display: flex;
          align-items: center;

          .state {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 29px;
            color: #38cafb;
            line-height: 35px;
            gap: 40px;

            .stopColor {
              background-color: red !important;
            }

            .blue-state {
              display: flex;
              align-items: center;
              height: 45px;
              //margin-right: 15px;
              color: #fff;
              background-color: #3eab3f;
              padding-left: 10px;
              border-radius: 8px;
              margin-left: -5px;

              .state-icon {
                width: 28px;
                height: 28px;
                background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
                margin-right: 10px;
              }

              .fan-state {
                color: #FFFFFF;
              }
            }


            .switch {
              display: flex;
              width: 165px;
              height: 45px;
              border-radius: 22px;
              border: 2px solid #0f82af;
              overflow: hidden;
              font-weight: bold;
              color: #127399;
              line-height: 40px;

              & > div {
                flex: 1;
                text-align: center;
                cursor: pointer;
              }
            }
          }

          .power {
            flex: 1.3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            //padding: 0 20px;
            font-size: 29px;
            color: #38cafb;
            line-height: 43px;
            gap: 40px;

            .check-box {
              display: flex;
              align-items: center;
              justify-content: center;
              //margin-left: 20px;
            }

            .edit-power {
              margin-top: 10px;
              display: flex;
              //flex-direction: column;
              > span:first-child {
                white-space: pre;
                margin-right: 14px;
              }

              :deep(.is-focus) {
                .el-input__inner {
                  font-weight: normal !important;
                  color: #fff !important;
                }
              }

              :deep(.el-input__wrapper) {
                width: 160px;
                height: 44px;
                background-color: transparent;
                box-shadow: none;
                border: 1px solid #38CAFB;
                transform: none;
                transition: none;
                margin-right: 10px;

                .el-input__inner {
                  height: 44px;
                  font-size: 30px;
                  font-weight: bold;
                  color: #38CAFB;
                }


                .el-input__suffix-inner {
                  font-size: 30px;
                  color: #38CAFB;
                  line-height: 40px;
                  font-weight: bold;
                }
              }

              //.units {
              //  position: relative;
              //}
              //
              //.units::after {
              //  content: "Hz";
              //  position: absolute;
              //  right: 6px;
              //  top: 50%;
              //  transform: translateY(-50%);
              //  font-size: 28px;
              //  color: #38cafb;
              //  line-height: 37px;
              //}
              //
              //input {
              //  width: 130px;
              //  height: 44px;
              //  border: 2px solid #0f82af;
              //  background: transparent;
              //  margin-left: 14px;
              //  outline: none;
              //  font-size: 28px;
              //  font-weight: bold;
              //  color: #38cafb;
              //  line-height: 37px;
              //}
            }

          }
        }
      }

      .current {
        //margin-top: 30px;
        margin-right: 20px;
        margin-left: 26px;
        //height: 37px;
        font-size: 29px;
        color: #FFFFFF;
        cursor: pointer;

        &:hover {
          background-color: #2E5589;
          border-radius: 6px;
        }
      }

      .line {
        margin-top: 20px;
        margin-left: 15px;
        width: 776px;
        height: 2px;
        background: rgba(107, 163, 237, 0.4);
        border-radius: 10px;
      }
    }
  }
}


.active {
  color: white;
  background: #0f7da9;
}


//.stopColor:hover {
//  color: #fff;
//  width: 180px;
//  background: #9B2222;
//  border-radius: 8px;
//
//  > div:first-child {
//    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
//  }
//}
</style>
