<template>
  <div class="bg">
    <div class="top-bg" @click="backMainPage">
      <div class="device-name">豫中云 - {{ deviceCode }}</div>
    </div>
    <div class="left">
      <div class="left_top">
        <img src="../../assets/img/img.jpg" style="width: 100%;height: 100%;">  
      </div>
      <div class="left_bottom">
        <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
          大车机构
        </span>
        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between;">
          <div style="display: flex;flex-direction: column;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              大车行程
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                {{ craneStrokeData.value}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 40px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ formatGears(craneGearData) }}
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ craneBrakeData.value!=null ? craneBrakeData.value : '未知' }}
                </span>
              </div>
            </div>
          </div>
          <div style="width: 1px;height: 100%;background-color: #306AF7;" />
          <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              频率
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                {{ craneFrequencyData.value != null ? craneFrequencyData.value : '0.00'}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                Hz
              </span>
            </div>
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
              电流
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                {{craneCurrentData.value != null ? craneCurrentData.value : '0.00'}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                A
              </span>
            </div>
          </div>
        </div>
        <el-carousel indicator-position="outside" :height="'204px'" :interval="10000" style="margin-top: 30px">
          <el-carousel-item v-for="(group, index) in craneSwitchVariablesData" :key="index">
            <div class="left_bottom_grid">
              <div v-for="item in group" :key="item.id" :class="['left_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
                <span>{{ formatStr(item.variableName) }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="middle">
      <div class="middle_top"></div>
      <div class="middle_bottom">
        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
          <div style="padding-left: 100px;padding-top: 4px;color: white;font-size: 18px;font-family: Alibaba-PuHuiTi-B;font-style: normal;text-transform: none;">
            起升机构
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: space-between;padding: 50px 30px 0px 30px;">
          <div style="display: flex;align-items: center;">
            <!-- <img style="width: 41px;height: 234px;" src="../../assets/img/screen_middle_bottom_left.png"> -->
            <div style="display: flex;flex-direction: column;margin-left: 20px;min-width: 130px;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              起升高度
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                {{ hoistStrokeData.value}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 20px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ formatGears(hoistGearData) }}
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ hoistBrakeData.value!=null ? hoistBrakeData.value : '未知' }}
                </span>
              </div>
            </div>
          </div>
          </div>
          <div class="screen_middle_bottom_middle">
            <div style="color: #ABC0E0;font-family: Alibaba-PuHuiTi-R;font-size: 16px;">
              载荷
            </div>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                {{ hoistWeightData.value!=null ? hoistWeightData.value : '0.00' }}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                t
              </span>
            </div>
          </div>
          <div style="margin-right: 20px;min-width: 390px;">
            <div style="display: flex">
              <div style="display: flex;">
                <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
                  <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                    频率
                  </span>
                </div>
                <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                  <div>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
                      {{ hoistFrequencyData.value != null ? hoistFrequencyData.value : '0.00'}}
                    </span>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                      Hz
                    </span>
                  </div>
                </div>
              </div>
              <div style="display: flex;margin-left: 30px;">
                <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
                  <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                    电流
                  </span>
                </div>
                <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                  <div>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
                      {{ hoistCurrentData.value != null ? hoistCurrentData.value : '0.00'}}
                    </span>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                      A
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <el-carousel indicator-position="outside" :height="'180px'" :interval="10000" style="margin-top: 20px">
              <el-carousel-item v-for="(group, index) in hoistSwitchVariablesData" :key="index">
                <div class="middle_bottom_right_grid">
                  <div v-for="item in group" :key="item.id" :class="['middle_bottom_right_grid_item', item.value ? item.trueLight : item.falseLight]">
                    <span>{{ formatStr(item.variableName) }}</span>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_top">
          <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="display: flex;align-items: center;">
                <div style="width: 8px;height: 8px;background-color: #02803A;margin-right: 15px;" />
                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
                  本次工作
                </span>
              </div>
              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
                {{ dutyCycleData.currentDuration }}
              </span>
          </div>
          <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
              <div style="display: flex;align-items: center;">
                <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
                  累计工作
                </span>
              </div>
              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
                {{ dutyCycleData.totalDuration }}
              </span>
          </div>
          <div style="display: flex;justify-content: space-between;align-items: center;border-top:0.5px solid #152844;">
              <div style="display: flex;align-items: center;">
                <div style="width: 8px;height: 8px;background-color: #306AF7;margin-right: 15px;" />
                <span style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
                  工作循环
                </span>
              </div>
              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
                {{ dutyCycleData.totalCount+' 次' }}
              </span>
          </div>
      </div>
      <div class="right_alert">
        <el-carousel height="110px">
          <el-carousel-item v-for="item in alarmRecordArr" :key="item.id">
            <div class="right_alert_item">
              <div style="height: 65%;display: flex;flex-direction: column;justify-content: space-between;">
                <div style="font-size: 24px;color: white;font-family: YouSheBiaoTiHei;">
                  报警
                </div>
                <div>
                  <div style="font-size: 15px;color: white;font-family: Alibaba-PuHuiTi-R;font-style: normal;text-transform: none;">
                    {{ item.time }}
                  </div>
                  <div style="font-size: 16px;color: white;font-family: Alibaba-PuHuiTi-R;">
                    {{ item.message }}
                  </div>  
                </div>
              </div>
              <div>
                <img style="height: 66px;width: 66px;" src="../../assets/img/screen_alert.png">
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right_small">
        <span style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;text-align: right;">
          小车机构
        </span>
        <div style="display: flex;padding:30px 40px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;justify-content: space-between">
          <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              频率
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                {{ trolleyFrequencyData.value != null ? trolleyFrequencyData.value : '0.00'}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                Hz
              </span>
            </div>
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
              电流
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                {{trolleyCurrentData.value != null ? trolleyCurrentData.value : '0.00'}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                A
              </span>
            </div>
          </div>
          <div style="width: 1px;height: 100%;background-color: #306AF7;" />
          <div style="display: flex;flex-direction: column;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              小车行程
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                {{ trolleyStrokeData.value}}
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 40px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ formatGears(trolleyGearData) }}
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;flex-direction: column;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;margin-top: 5px;">
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  {{ trolleyBrakeData.value != null ? trolleyBrakeData.value : '未知' }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 15px">
          <el-carousel-item v-for="(group, index) in trolleySwitchVariablesData" :key="index">
            <div class="right_small_grid">
            <div v-for="item in group" :key="item.id" :class="['right_small_grid_item', item.value ? item.trueLight : item.falseLight]">
              <span>{{ formatStr(item.variableName) }}</span>
            </div>
          </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right_bottom">
        <el-carousel indicator-position="outside" :height="'80px'" :interval="10000" style="margin-top: 20px;width: 360px">
          <el-carousel-item v-for="(group, index) in otherSwitchData" :key="index">
            <div class="right_bottom_grid">
              <div v-for="item in group" :key="item.id" :class="['right_bottom_grid_item', item.value ? item.trueLight : item.falseLight]">
                <span>{{ formatStr(item.variableName) }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import {getRealtime, getAlertRecordsByDevice} from '@/api/bigScreen';
  import { filterTime } from '@/utils/dateUtil'
  import { onSubscribe, onUnsubscribe, formatGears, formatValue, isTrue,parseGear} from '@/utils/tools';
  import router from '@/router';
  const deviceId = ref(0)
  const deviceCode = ref('')
  const deviceData: any = ref({})
  //大车变量
  const craneData: any = ref({})
  const craneStrokeData: any = ref({})
  const craneGearData: any = ref({})
  const craneBrakeData: any = ref({})
  const craneFrequencyData: any = ref({})
  const craneCurrentData: any = ref({})
  const craneSwitchVariablesData: any = ref([])
  //小车变量
  const trolleyData: any = ref({})
  const trolleyStrokeData: any = ref({})
  const trolleyGearData: any = ref({})
  const trolleyBrakeData: any = ref({})
  const trolleyFrequencyData: any = ref({})
  const trolleyCurrentData: any = ref({})
  const trolleySwitchVariablesData: any = ref([])
  //起升变量
  const hoistData: any = ref({})
  const hoistStrokeData: any = ref({})
  const hoistWeightData: any = ref({})
  const hoistGearData: any = ref({})
  const hoistBrakeData: any = ref({})
  const hoistFrequencyData: any = ref({})
  const hoistCurrentData: any = ref({})
  const hoistSwitchVariablesData: any = ref([])
  //总配电变量
  const otherSwitchData: any = ref([])
  //工作循环
  const dutyCycleData: any = ref({})
  //报警集合
  const alarmRecordArr: any = ref([]);


  onMounted(async () => {
    deviceId.value = parseInt(useQuery('id'))
    deviceCode.value = useQuery('code')
    getData()
  })

  onUnmounted(() => {

  })

  const getData = async () => {
    const res: any = await getRealtime({ deviceId: deviceId.value })
    deviceData.value = res
    //大车数据
    craneData.value = deviceData.value.crane
    //大车行程
    craneStrokeData.value = craneData.value.stroke
    //大车挡位
    craneGearData.value = craneData.value.gear
    //大车制动器
    if(craneData.value.brake){
      craneBrakeData.value = craneData.value.brake  
    }
    //大车频率
    if(craneData.value.frequency){
      craneFrequencyData.value = craneData.value.frequency
    }
    //大车电流
    if(craneData.value.current){
      craneCurrentData.value = craneData.value.current
    }
    //大车开关量
    craneSwitchVariablesData.value = chunkArray(craneData.value.switchVariables,10)
    //小车数据
    trolleyData.value = deviceData.value.trolley
    //小车行程
    trolleyStrokeData.value = trolleyData.value.stroke
    //小车挡位
    trolleyGearData.value = trolleyData.value.gear
    //小车制动器
    if(trolleyData.value.brake){
      trolleyBrakeData.value = trolleyData.value.brake
    }
    //小车频率
    if(trolleyData.value.frequency){
      trolleyFrequencyData.value = trolleyData.value.frequency
    }
    //小车电流
    if(trolleyData.value.current){
      trolleyCurrentData.value = trolleyData.value.current
    }
    //小车开关量
    trolleySwitchVariablesData.value = chunkArray(trolleyData.value.switchVariables,16)
    //起升数据
    hoistData.value = deviceData.value.hoist
    //起升重量
    if(hoistData.value.weight){
      hoistWeightData.value = hoistData.value.weight
    }
    //起升行程
    hoistStrokeData.value = hoistData.value.stroke
    //起升挡位
    hoistGearData.value = hoistData.value.gear
    //起升制动器
    if(hoistData.value.brake){
      hoistBrakeData.value = hoistData.value.brake
    }
    //起升频率
    if(hoistData.value.frequency){
      hoistFrequencyData.value = hoistData.value.frequency
    }
    //起升电流
    if(hoistData.value.current){
      hoistCurrentData.value = hoistData.value.current
    }
    //起升开关量
    hoistSwitchVariablesData.value = chunkArray(hoistData.value.switchVariables,12)
    //总配电开关量
    otherSwitchData.value = chunkArray(deviceData.value.otherSwitchData,6)
    //工作云环
    dutyCycleData.value = deviceData.value.dutyCycle
    //获取报警信息
    const record = await getAlertRecordsByDevice({ deviceId: deviceId.value, maxCount: 10 })
    alarmRecordArr.value = record

    onSubscribe([`Json/${deviceCode.value}`], (topic: string, payload: any) => {
        const jsonArray = JSON.parse(payload).Items
        parseMqttData(jsonArray)
    })
  }
  /**
   * 拆分数组
   * @param array 数组
   * @param size 拆分的数量
   */
  const chunkArray = (array: any, size: number) => {
      const arr: any = []
      for (let index = 0; index < array.length; index += size) {
          arr.push(array.slice(index, index + size));
      }
      return arr;
  }
  //解析数据
  const parseMqttData = (jsonArray: any) => {
    console.log(JSON.stringify(jsonArray))
      jsonArray.forEach((res: any) => {
          const { Value, Code } = res
          
          //大车档位
          const craneGear = craneGearData.value
          if (craneGear) {
              if (parseGear(craneGear, Code, Value)) {
                  return
              }
          }
          //大车行程
          const craneStroke = craneStrokeData.value
          if(craneStroke) {
            if (craneStroke.code == Code) {
                craneStroke.value = formatValue(Value, craneStroke.translate)
                return
            }
          }
          //大车制动器
          const craneBrake = craneBrakeData.value
          if(craneBrake) {
            if (craneBrake.code == Code) {
                craneBrake.value = formatValue(Value, craneBrake.translate)
                return
            }
          }
          //大车频率
          const craneFrequency = craneFrequencyData.value
          if(craneFrequency) {
            if (craneFrequency.code == Code) {
                craneFrequency.value = formatValue(Value, craneFrequency.translate)
                return
            }
          }
          //大车电流
          const craneCurrent = craneCurrentData.value
          if(craneCurrent) {
            if (craneCurrent.code == Code) {
              craneCurrent.value = formatValue(Value, craneCurrent.translate)
                return
            }
          }
          //大车开关量
          const craneSwitchVariables = craneSwitchVariablesData.value
          if(craneSwitchVariables){
            craneSwitchVariables.forEach((item: any) => {
              const result = item.find((item: any) => item.code == Code)
              if (result) {
                  result.value = result.isReverse != Value
                  return
              }
            });
          }
          //小车档位
          const trolleyGear = trolleyGearData.value
          if (trolleyGear) {
              if (parseGear(trolleyGear, Code, Value)) {
                  return
              }
          }
          //小车车行程
          const trolleyStroke = trolleyStrokeData.value
          if(trolleyStroke) {
            if (trolleyStroke.code == Code) {
                trolleyStroke.value = formatValue(Value, trolleyStroke.translate)
                return
            }
          }
          //小车制动器
          const trolleyBrake = trolleyBrakeData.value
          if(trolleyBrake) {
            if (trolleyBrake.code == Code) {
                trolleyBrake.value = formatValue(Value, trolleyBrake.translate)
                return
            }
          }
          //小车频率
          const trolleyFrequency = trolleyFrequencyData.value
          if(trolleyFrequency) {
            if (trolleyFrequency.code == Code) {
              trolleyFrequency.value = formatValue(Value, trolleyFrequency.translate)
                return
            }
          }
          //小车电流
          const trolleyCurrent = trolleyCurrentData.value
          if(trolleyCurrent) {
            if (trolleyCurrent.code == Code) {
                trolleyCurrent.value = formatValue(Value, trolleyCurrent.translate)
                return
            }
          }
          //小车开关量
          const trolleySwitchVariables = trolleySwitchVariablesData.value
          if(trolleySwitchVariables){
            trolleySwitchVariables.forEach((item: any) => {
              const result = item.find((item: any) => item.code == Code)
              if (result) {
                  result.value = result.isReverse != Value
                  return
              }
            });
          }
          //起升档位
          const hoistGear = hoistGearData.value
          if (hoistGear) {
              if (parseGear(hoistGear, Code, Value)) {
                  return
              }
          }
          //起升重量
          const hoistWeight = hoistWeightData.value
          if(hoistWeight) {
            if (hoistWeight.code == Code) {
                hoistWeight.value = formatValue(Value, hoistWeight.translate)
                return
            }
          }
          //起升行程
          const hoistStroke = hoistStrokeData.value
          if(hoistStroke) {
            if (hoistStroke.code == Code) {
                hoistStroke.value = formatValue(Value, hoistStroke.translate)
                return
            }
          }
          //起升制动器
          const hoistBrake = hoistBrakeData.value
          if(hoistBrake) {
            if (hoistBrake.code == Code) {
                hoistBrake.value = formatValue(Value, hoistBrake.translate)
                return
            }
          }
          //起升频率
          const hoistFrequency = hoistFrequencyData.value
          if(hoistFrequency) {
            if (hoistFrequency.code == Code) {
              hoistFrequency.value = formatValue(Value, hoistFrequency.translate)
                return
            }
          }
          //起升电流
          const hoistCurrent = hoistCurrentData.value
          if(hoistCurrent) {
            if (hoistCurrent.code == Code) {
                hoistCurrent.value = formatValue(Value, hoistCurrent.translate)
                return
            }
          }
          //起升开关量
          const hoistSwitchVariables = hoistSwitchVariablesData.value
          if(hoistSwitchVariables){
            hoistSwitchVariables.forEach((item: any) => {
              const result = item.find((item: any) => item.code == Code)
              if (result) {
                  result.value = result.isReverse != Value
                  return
              }
            });
          }
          //总配电开关量
          const otherSwitch = otherSwitchData.value
          if(otherSwitch){
            otherSwitch.forEach((item: any) => {
              const result = item.find((item: any) => item.code == Code)
              if (result) {
                  result.value = result.isReverse != Value
                  return
              }
            });
          }
      })
  }

  onUnmounted(() => {
      onUnsubscribe(`Json/${deviceCode.value}`)
  })

  const backMainPage = () => {
    router.go(-1)
  }

  const formatStr = (value:string) => {
    return value.replace('大车','').replace('副小车','').replace('主起升','').replace('配电','')
  }
</script>

<style lang="less" scoped>
  .bg {
    min-height: 1080px;
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/img/screen_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .top-bg {
    width: 100%;
    height: 77px;
    background-image: url(../../assets/img/big_screen_top_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    cursor: pointer;
      .device-name {
        color: white;
        font-size: 30px;
        position: absolute;
        left: 50%;
        top: 35%;
        font-weight: bold;
        transform: translateX(-50%) translateY(-35%);
        font-family: Alibaba-PuHuiTi-R;
        font-style: normal;
        text-transform: none;
      }
  }
  .left {
    top: 77px;
    left: 35px;
    width: 450px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .left_top {
    width: 422px;
    height: 256px;
    background-image: url(../../assets/img/screen_top_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px;
  }
  .left_bottom {
    width: 450px;
    height: 653px;
    background-image: url(../../assets/img/screen_left_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 39px;
  }
  .left_bottom_grid {
    display: grid;
    grid-template-rows: 32px 32px 32px 32px 32px;
    grid-template-columns: 180px 180px;
    gap: 11px;
  }
  .left_bottom_grid_item {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle {
    top: 77px;
    left: 50%;
    transform: translateX(-50%);
    width: 950px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .middle_bottom {
    width: 100%;
    height: 356px;
    background-image: url(../../assets/img/single_middle_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .screen_middle_bottom_middle {
    width: 204px;
    height: 204px;
    background-image: url('../../assets/img/screen_middle_bottom_middle.png');    
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }
  .middle_bottom_right_grid {
    display: grid;
    grid-template-rows: 32px 32px 32px 32px;
    grid-template-columns: 120px 120px 120px;
    gap: 11px;
  }
  .middle_bottom_right_grid_item {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_top {

  }
  .right {
    top: 77px;
    right: 35px;
    width: 450px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right_top {
    width: 100%;
    height: 194px;
    background-image: url(../../assets/img/screen_right_top_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 40px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right_alert {
    width: 100%;
    height: 130px;
    padding: 10px 0px;
  }
  .right_alert_item {
    width: 100%;
    height: 100%;
    padding: 0px 30px 0px 35px;
    background-image: url(../../assets/img/screen_right_alert_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right_small {
    width: 450px;
    height: 502px;
    background-image: url(../../assets/img/screen_right_small_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 39px;
  }
  .right_small_grid {
    display: grid;
    grid-template-rows: 32px 32px;
    grid-template-columns: 115px 115px 115px;
    gap: 11px;
  }
  .right_small_grid_item {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .right_bottom {
    width: 450px;
    height: 151px;
    background-image: url(../../assets/img/screen_right_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right_bottom_grid {
    height: 70px;
    display: grid;
    grid-template-rows: 32px 32px;
    grid-template-columns: 110px 110px 110px;
    gap: 11px;
  }
  .right_bottom_grid_item {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_bottom_right_top {
    width: 100px;
    height: 32px;
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_bottom_right_top.is-active {
    background-color: #158E4B;
  }
  .red{
    color:rgb(251, 104, 104);
    background-color: rgba(125, 32, 32,0.2);
    border: 1px solid #FD4142;
  }
  .green{
    color: #26F884;
    background: rgba(21, 142, 75, 0.2);
    border: 1px solid #02803A;
  }
  .yellow{
    color: #fba34a;
    background-color: rgba(240, 128, 15, 0.2);
    border: 1px solid #fc7e03;
  }
  .gray{
    color: #ABC0E0;
    background-color: rgba(51, 74, 108, 0.2);
    border: 1px solid #455A7A;
  }
</style>
<style lang="less">
  .right_alert {
    .el-carousel__button {
      width: 5px;
      height: 5px;
      border-radius: 2.5px;
    }
    .el-carousel__indicator.is-active button {
      width: 14px;
      height: 5px;
    }
    .el-carousel__indicators--horizontal {
      left: 95px;
      top: 20px;
      transform:none
    }
  }
</style>
