<template>
  <div class="bg">
    <img src="../../assets/img/synthesis_title_bg.png" class="title_bg" @click="backMainPage" />
    <div class="content">
      <div class="left_top">
        <div class="device_count_bg_item">
          <img src="../../assets/img/online.png" />
          <div style="color: #ABC0E0;font-size: 16px;margin: 0px 5px;">在线设备</div>
          <div class="device_count_text">{{deviceStateData.onlineCount}}</div>
        </div>
        <div class="device_count_bg_item">
          <img src="../../assets/img/alarm.png" />
          <div style="color: #ABC0E0;font-size: 16px;margin: 0px 5px;">故障设备</div>
          <div class="device_count_text">{{deviceStateData.alarmCount}}</div>
        </div>
        <div class="device_count_bg_item">
          <img src="../../assets/img/offline.png" />
          <div style="color: #ABC0E0;font-size: 16px;margin: 0px 5px;">离线设备</div>
          <div class="device_count_text">{{deviceStateData.offlineCount}}</div>
        </div>
        <div class="device_count_bg_item">
          <img src="../../assets/img/repair.png" />
          <div style="color: #ABC0E0;font-size: 16px;margin: 0px 5px;">维修设备</div>
          <div class="device_count_text">{{deviceStateData.repairCount}}</div>
        </div>
      </div>
      <div class="right_top">
        <div class="tabbar_containner" style="width: 100%;padding-left: 17px;">
          <template v-for="(item, index) in alarmCountTabs">
            <div class="tabbar_item" @click="alarmCountTabClick(index)">
              <div class="tabbar_text" :class="{ 'active': alarmCountTabsIndex == index }">{{ item }}</div>
            </div>
          </template>
        </div>
        <div style="background: repeating-linear-gradient(to right,#A0D0FC,#306AF7,#03102E);height: 2px;margin-top: 14px;" />
        <div class="alarm_count_contanner">
          <div style="display: flex;flex-direction: column;align-items: center;width: 49%;">
            <div style="font-size: 30px;color: #608BF3;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
              {{ huoYueDuAlarmData.activityCount }}</div>
            <div style="font-size: 16px;color: #ABC0E0;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">数据收发</div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;width: 49%;">
            <div style="font-size: 30px;color: #E23F3B;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
              {{ huoYueDuAlarmData.faultCount }}</div>
            <div style="font-size: 16px;color: #ABC0E0;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">故障数量</div>
          </div>
        </div>
      </div>
      <div class="left">
        <div style="display: flex;justify-content: center;color: white;font-size: 18px;font-weight: bold;font-family:Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
          <span>设备数量监控</span>
        </div>
        <div class="client_list_title">
          <div style="color: #ABC0E0;font-size: 16px;font-weight: normal;width: 70%">客户名称</div>
          <div style="color: #ABC0E0;font-size: 16px;font-weight: normal;width: 30%">设备数量</div>
        </div>
        <div style="height: 1px;background-color: #417CC4;margin-top: 3px;"/>
        <div class="client-scroll">
          <Vue3SeamlessScroll class="scrollClass" :list="companyDevicesData" step="0.3" hover="true">
            <template v-for="(item,index) in companyDevicesData" :key="index">
              <div class="item" :class="{ 'active': 0 != index }">
                <div style="display: flex;align-items: center;width: 70%;">
                  <div style="background: #4F80F8;width: 3px;height: 13px;border-radius: 2px;"></div>
                  <div style="color: #608BF3;font-size: 14px;margin-left: 15px;">{{ item.companyName }}</div>
                </div>
                <div style="color: #608BF3;font-size: 14px;min-width:30%;">{{ item.count }}</div>
              </div>
            </template>
          </Vue3SeamlessScroll>
        </div>
      </div>
      <div class="right">
        <div class="alarm_count_chart_container">
          <div class="tabbar_containner_chart">
            <template v-for="(item, index) in alarmCountTabs">
              <div class="tabbar_item_chart" @click="alarmCountTabClickChart(index)">
                <div class="tabbar_text_chart" :class="{ 'active': alarmCountTabsIndexChart == index }">{{ item }}</div>
              </div>
            </template>
          </div>
          <div style="width: 95%;height: 100%;left: 20px;" ref="alarmCountChartRef" />
        </div>
        <div style="display: flex;">
          <div class="order_state_bg">
            <div>
              <div style="color: white;font-size: 18px;font-weight: bold;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">工单状态统计</div>
            </div>
            <div class="order_state_container" v-if="repairOrderData.waitSend != undefined">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="font-size: 16px;color: #ABC0E0">待派单</span>
                  <span :style="{backgroundColor:'#F57F29',height:'20px',borderRadius:'2px',width:repairOrderData.waitSend*0.7+'px'}" />  
                <span style="font-size: 18px;color: #608BF3;min-width: 40px;">{{repairOrderData.waitSend}}%</span>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="font-size: 16px;color: #ABC0E0;">待接单</span>
                  <span :style="{backgroundColor:'#E6CD40',height:'20px',borderRadius:'2px',width:repairOrderData.waitAccept*0.7+'px'}" />
                <span style="font-size: 18px;color: #608BF3;min-width: 40px;">{{repairOrderData.waitAccept}}%</span>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="font-size: 16px;color: #ABC0E0;">维修中</span>
                <div :style="{backgroundColor:'#95D333',height:'20px',borderRadius:'2px',width:repairOrderData.repairing*0.7+'px'}" />
                <span style="font-size: 18px;color: #608BF3;min-width: 40px;">{{repairOrderData.repairing}}%</span>
              </div>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span style="font-size: 16px;color: #ABC0E0;">待审核</span>
                <div :style="{backgroundColor:'#0AC97E',height:'20px',borderRadius:'2px',width:repairOrderData.waitAudit*0.7+'px'}" />
                <span style="font-size: 18px;color: #608BF3;min-width: 40px;">{{repairOrderData.waitAudit}}%</span>
              </div>
            </div>
          </div>
          <div class="order_state_bg">
            <div>
              <div style="color: white;font-size: 18px;font-weight: bold;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">本月设备接入</div>
            </div>
            <div class="order_state_container" style="justify-content:space-evenly">
              <echart-gauge unit="%" :value="monthAddDeviceProgressData.growthProgress + ''" title=""
              style="width: 100%;min-height: 100px;margin-top: 10px;" v-if="monthAddDeviceProgressData.monthGrowth != undefined" />
              <div style="display: flex;justify-content: space-evenly;margin-top: -25px;"
                v-if="monthAddDeviceProgressData.monthGrowth != undefined">
                <div class="column_center">
                  <div style="color: #608BF3;font-size: 24px;font-family: OPPOSans;">{{
                    monthAddDeviceProgressData.currentMonthAddCount }}</div>
                  <div style="color: #ABC0E0;font-size: 16px;">接入设备</div>
                </div>

                <div class="column_center">
                  <div style="color: #608BF3;font-size: 24px;font-family: OPPOSans, OPPOSans;">{{
                    monthAddDeviceProgressData.monthGrowth }}%</div>
                  <div style="display: flex;align-items: center;">
                    <div style="color: #ABC0E0;font-size: 16px;">同比增长</div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>
          <div class="device_area_bg">
            <div style="display: flex;justify-content: center;color: white;font-size: 18px;font-weight: bold;font-family:Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
              <span>设备区域统计</span>
            </div>
            <div class="device_area_coatinner">
              <div class="device_area_chart" ref="deviceAreaChartRef"></div>
              <div class="device_area_right">
                <div style="display: flex;flex-direction: column;align-items: center;">
                  <div style="color: #4F80F8;font-size: 30px;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;">{{
                    deviceAreaStatisticsData.deviceCount }}</div>
                  <div style="color: #ABC0E0;font-size: 16px;">设备总数</div>
                  <div style="color: #4F80F8;font-size: 24px;font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;margin-top: 30px;">{{
                      deviceAreaStatisticsData.monthNewCount }}</div>
                  <div style="display: flex;align-items: flex-end;">
                    <span style="color: #ABC0E0;font-size: 14px;">本月新增</span>
                    <el-icon style="color: red"><Top /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="device_state_statistics_container">
          <div style="color: white;font-size: 18px;font-weight: bold;font-family:Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
            <span>设备状态统计</span>
          </div>
          <div style="height: 100%;width: 100%;" ref="deviceStateStatisticsRef"></div>
        </div>
        <div>
          <div class="device_type_bg">
            <div style="display:flex;justify-content:center;color:white;font-size:18px;font-weight:bold;font-family:Alibaba-PuHuiTi, Alibaba-PuHuiTi;">
              <div style="color: white;font-size: 16px;font-weight: bold;">设备类型占比</div>
            </div>

            <div class="device_type_coatinner">

              <div class="device_type_left">
                <div class="column_center" v-if="deviceTypeData.length >= 1">
                    <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[0].count
                    }}</div>
                    <div class="row_center">
                      <div style="width: 10px;height: 10px;background: #306AF7;border-radius: 3px;"></div>
                      <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[0].categoryName }}
                      </div>
                    </div>
                  </div>
                  <div class="column_center" v-if="deviceTypeData.length >= 2">
                    <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[1].count
                    }}</div>
                    <div class="row_center">
                      <div style="width: 10px;height: 10px;background: #0AC97E;border-radius: 3px;"></div>
                      <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[1].categoryName }}
                      </div>
                    </div>
                  </div>
              </div>
              <div class="device_type_chart" ref="deviceTypeChartRef"></div>
              <div class="device_type_right">
                  <div class="column_center" v-if="deviceTypeData.length >= 3">
                    <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[2].count
                    }}</div>
                    <div class="row_center">
                      <div style="width: 10px;height: 10px;background: #F4C766;border-radius: 3px;"></div>
                      <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[2].categoryName }}
                      </div>
                    </div>
                  </div>
                  <div class="column_center" v-if="deviceTypeData.length >= 4">
                    <div style="color: #608BF3;font-size: 26px;font-family: OPPOSans;">{{ deviceTypeData[3].count
                    }}</div>
                    <div class="row_center">
                      <div style="width: 10px;height: 10px;background: #97CB7C;border-radius: 3px;"></div>
                      <div style="color: #ABC0E0;font-size: 16px;margin-left: 5px;">{{ deviceTypeData[3].categoryName }}
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="map_container">
          <!-- <div style="display: flex;margin: 40px 0 0 40px;height: 42px;align-items: center;">
            <div style="color: white;font-size: 16px;font-weight: bold;margin-left: 15px;">设备分布统计</div>
            <div class="tabbar_containner" style="margin-left: 43px;">
              <template v-for="(item, index) in mapTypeTabs">
                <div class="tabbar_item" @click="mapTabClick(index)">
                  <div class="tabbar_text" :class="{ 'active': mapTypeIndex == index }">{{ item }}</div>
                  <div class="tabbar_indicator" :class="{ 'active': mapTypeIndex == index }"></div>
                </div>
              </template>
            </div>
          </div> -->
          <echart-map-effects class="map_chart" :mapType="mapTypeArray[mapTypeIndex]" :coordData="coordData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getCompanyDevices, getDeviceState,
  getDeviceAreaStatistics, getDeviceType,
  getRepairStateStatistics, getMonthAddDeviceProgress,
  getDeviceActivityAndFaultCurves, GetDeviceStateStatistics,
  getDeviceAreaMapData
} from '@/api/bigScreen';
import router from '@/router';
import * as echarts from 'echarts'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import echartGauge from '@/components/echart-gauge/index.vue'
// import echartMapEffects from '@/components/echart-map-effects/index.vue'
import { url } from 'inspector';

//设备区域南丁格尔玫瑰图
const deviceAreaChartRef: any = ref(null)
const deviceAreaChart: any = markRaw({ value: null })

//设备状态图表
const deviceStateStatisticsRef: any = ref(null)
const deviceStateStatisticsChart: any = markRaw({ value: null })

//设备报警、数据转发图表
const alarmCountChartRef: any = ref(null)
const alarmCountChart: any = markRaw({ value: null })

//设备类型占比南丁格尔玫瑰图
const deviceTypeChartRef: any = ref(null)
const deviceTypeChart: any = markRaw({ value: null })

//地图类型菜单
const mapTypeTabs = ['全国', '广东']
const mapTypeIndex = ref(0)
const mapTypeArray = ['china', '广东']

//设备报警、活跃度菜单
const alarmCountTabs = ['本年', '本月', '本周', '本日']
const alarmCountTabsIndex = ref(0)
const alarmCountTabsIndexChart = ref(0)

//定时器
const timer: any = ref('')
const chartTimer: any = ref('')
const mapTimer: any = ref('')

//地图数据
const coordData: any = ref([])
//设备状态
const deviceStateData: any = ref({})
//公司接入数据
const companyDevicesData: any = ref([])
//设备统计
const deviceAreaStatisticsData: any = ref({})
//活跃度、故障数量
const deviceActivityAndFaultCurvesData: any = ref(null)
//工单数据
const repairOrderData: any = ref({})
//月接入设备数据
const monthAddDeviceProgressData: any = ref({})
//设备类型
const deviceTypeData: any = ref([])

onMounted(async () => {
  deviceAreaChart.value = echarts.init(deviceAreaChartRef.value)
  deviceStateStatisticsChart.value = echarts.init(deviceStateStatisticsRef.value)
  alarmCountChart.value = echarts.init(alarmCountChartRef.value)
  alarmCountChart.value.setOption(alarmCountOption)
  deviceTypeChart.value = echarts.init(deviceTypeChartRef.value)
  deviceTypeChart.value.setOption(deviceTypeOption)
  
  getData()
  timer.value = setInterval(() => getData(), 1000 * 60 * 30)
  chartTimer.value = setInterval(() => {
    if (deviceActivityAndFaultCurvesData.value != null) {
      let a = alarmCountTabsIndex.value
      let b = a + 1
      let c = b == 4 ? 0 : b
      alarmCountTabClick(c)
      let e = alarmCountTabsIndexChart.value
      let f = e + 1
      let g = f == 4 ? 0 : f
      alarmCountTabClickChart(g)
    }
  }, 1000 * 10)

  mapTimer.value = setInterval(() => {
    if (coordData.value.length > 0) {
      let a = mapTypeIndex.value
      let b = a + 1
      let c = b == 2 ? 0 : b
      mapTabClick(0)
    }
  }, 1000 * 60 * 30)

  window.addEventListener('resize', () => {
    //窗口变化 重置高度
    deviceAreaChart.value.resize()
    deviceStateStatisticsChart.value.resize()
    alarmCountChart.value.resize()
    deviceTypeChart.value.resize()
  })
})

onUnmounted(() => {
  clearInterval(timer.value)
  clearInterval(chartTimer.value)
  clearInterval(mapTimer.value)
})

const getData = () => {
  getDeviceStateData()
  getCompanyDevicesData()
  getDeviceAreaStatisticsData()
  getDeviceStateStatisticsData()
  getDeviceActivityAndFaultCurvesData()
  getRepairOrderData()
  getMonthAddDeviceProgressData()
  getDeviceTypeData()
  getDeviceMapData()
}

const getDeviceStateData = async () => {
  let data = await getDeviceState()
  deviceStateData.value = data
}


const getCompanyDevicesData = async () => {
  let data = await getCompanyDevices()
  companyDevicesData.value = data
}

const getDeviceAreaStatisticsData = async () => {
  let data = await getDeviceAreaStatistics()
  deviceAreaStatisticsData.value = data

  let array: any = []
  deviceAreaStatisticsData.value.data.forEach((element: any) => {
    array.push({ name: element.province, value: element.count })
  });
  deviceAreaOption.series[0].data = array
  deviceAreaChart.value.setOption(deviceAreaOption)
}


const getDeviceStateStatisticsData = async () => {
  let data: any = await GetDeviceStateStatistics()
  // let data: any = {
  //       "keyDatas": [
  //           "10月",
  //           "11月",
  //           "12月",
  //           "1月",
  //           "2月",
  //           "3月"
  //       ],
  //       "faultDatas": [
  //           3,
  //           6,
  //           43,
  //           5,
  //           5,
  //           5
  //       ],
  //       "repairDatas": [
  //           2,
  //           5,
  //           10,
  //           60,
  //           3,
  //           4
  //       ],
  //       "planDatas": [
  //           95,
  //           30,
  //           57,
  //           65,
  //           11,
  //           25
  //       ],
  //       "lifeDatas": [
  //           88,
  //           65,
  //           81,
  //           12,
  //           15,
  //           87
  //       ]
  //   }
  let a = Math.max(...data.faultDatas)
  let b = Math.max(...data.repairDatas)
  let c = Math.max(...data.planDatas)
  let d = Math.max(...data.lifeDatas)
  //取最大值最为y轴的最大值
  let maxValue = Math.max(a, b, c, d)
  deviceStateOption.yAxis.max = maxValue == 0 ? maxValue + 4 : Math.ceil(maxValue * 1.4)
  deviceStateOption.xAxis.data = data.keyDatas
  deviceStateOption.series[0].data = data.faultDatas
  deviceStateOption.series[1].data = data.repairDatas
  deviceStateOption.series[2].data = data.planDatas
  deviceStateOption.series[3].data = data.lifeDatas
  deviceStateStatisticsChart.value.setOption(deviceStateOption)
}

const huoYueDuAlarmData: any = ref({
  activityCount: 0,
  faultCount: 0,
  keyData: [],
  activityData: [],
  faultData: []
})

const getDeviceActivityAndFaultCurvesData = async () => {
  let data: any = await getDeviceActivityAndFaultCurves()
  deviceActivityAndFaultCurvesData.value = data
  switch (alarmCountTabsIndex.value) {
    case 0:
      huoYueDuAlarmData.value = data.yearData
      break;
    case 1:
      huoYueDuAlarmData.value = data.monthData
      break;
    case 2:
      huoYueDuAlarmData.value = data.weekData
      break;
    default:
      huoYueDuAlarmData.value = data.dayData
      break;
  }
  alarmCountOption.xAxis.data = huoYueDuAlarmData.value.keyData
  let a = Math.max(...huoYueDuAlarmData.value.activityData)
  let b = Math.max(...huoYueDuAlarmData.value.faultData)
  //取最大值最为y轴的最大值
  alarmCountOption.yAxis[0].max = a == 0 ? a + 5 : Math.ceil(a * 1.4)
  alarmCountOption.yAxis[1].max = b == 0 ? b + 5 : Math.ceil(b * 1.4)
  alarmCountOption.series[0].data = huoYueDuAlarmData.value.activityData
  alarmCountOption.series[1].data = huoYueDuAlarmData.value.faultData
  alarmCountChart.value.setOption(alarmCountOption)
}
const getRepairOrderData = async () => {
  let data: any = await getRepairStateStatistics()
  // let data: any = [
  //       {
  //           "state": 1,
  //           "count": 10
  //       },
  //       {
  //           "state": 2,
  //           "count": 8
  //       },
  //       {
  //           "state": 3,
  //           "count": 4
  //       },
  //       {
  //           "state": 4,
  //           "count": 1
  //       }
  //   ]
  if (data.length > 3) {
    repairOrderData.value = {
      waitSend: data.find((res: any) => res.state == 1).count,
      waitAccept: data.find((res: any) => res.state == 2).count,
      repairing: data.find((res: any) => res.state == 3).count,
      waitAudit: data.find((res: any) => res.state == 4).count
    }
  }
}

const getMonthAddDeviceProgressData = async () => {
  let data: any = await getMonthAddDeviceProgress()
  // let data: any = {
  //       "currentMonthAddCount": 3,
  //       "growthProgress": 100,
  //       "monthGrowth": 0
  //   }
  monthAddDeviceProgressData.value = data
}


const getDeviceTypeData = async () => {
  let data: any = await getDeviceType()
  // let data: any = [
  //       {
  //           "categoryId": 2,
  //           "categoryName": "门机",
  //           "count": 0
  //       },
  //       {
  //           "categoryId": 3,
  //           "categoryName": "桥机",
  //           "count": 4
  //       },
  //       {
  //           "categoryId": 4,
  //           "categoryName": "葫芦",
  //           "count": 83
  //       },
  //       {
  //           "categoryId": 5,
  //           "categoryName": "卷扬式",
  //           "count": 6
  //       }
  //   ]
  deviceTypeData.value = data


  let arr: any = []
  data.forEach((item: any) => {
    arr.push({ value: item.count, name: item.categoryName })
  })
  deviceTypeOption.series[0].data = arr
  deviceTypeChart.value.setOption(deviceTypeOption)
}


const getDeviceMapData = async () => {
  coordData.value = []
  let data: any = await getDeviceAreaMapData({
    code: mapTypeTabs[mapTypeIndex.value] == '广东' ? '440000' : ''
  })

  coordData.value = data.map((item: any) => {
    return {
      name: item.area,
      value: [item.longitude, item.latitude, item.deviceCount]
    }
  })
}
const backMainPage = () => {
  router.go(-1)
}

const mapTabClick = (e: number) => {
  // mapTypeIndex.value = e
  getDeviceMapData()
}

const alarmCountTabClick = (e: number) => {
  alarmCountTabsIndex.value = e
  if (deviceActivityAndFaultCurvesData.value == null) {
    return
  }
  switch (e) {
    case 0:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.yearData
      break;
    case 1:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.monthData
      break;
    case 2:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.weekData
      break;
    case 3:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.dayData
      break
    default:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.yearData
      break;
  }
}
const alarmCountTabClickChart = (e: number) => {
  alarmCountTabsIndexChart.value = e
  if (deviceActivityAndFaultCurvesData.value == null) {
    return
  }
  switch (e) {
    case 0:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.yearData
      break;
    case 1:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.monthData
      break;
    case 2:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.weekData
      break;
    case 3:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.dayData
      break
    default:
      huoYueDuAlarmData.value = deviceActivityAndFaultCurvesData.value.yearData
      break;
  }
  alarmCountOption.xAxis.data = huoYueDuAlarmData.value.keyData

  let a = Math.max(...huoYueDuAlarmData.value.activityData)
  let b = Math.max(...huoYueDuAlarmData.value.faultData)
  //取最大值最为y轴的最大值
  alarmCountOption.yAxis[0].max = a == 0 ? a + 5 : Math.ceil(a * 1.4)
  alarmCountOption.yAxis[1].max = b == 0 ? b + 5 : Math.ceil(b * 1.4)
  alarmCountOption.series[0].data = huoYueDuAlarmData.value.activityData
  alarmCountOption.series[1].data = huoYueDuAlarmData.value.faultData
  alarmCountChart.value.setOption(alarmCountOption)
}

import synthesis_circular from '@/assets/img/synthesis_circular.png'
let deviceAreaOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}台 ({d}%)'
  },
  textStyle: {
    fontSize: 10
  },
  graphic:{
    elements: [{
      type:"image",
      style:{
        image:synthesis_circular,
        width:74,
        height:74
      },
      left:"center",
      top:"center",
    }]
  },
  series: [
    {
      name: '区域分布',
      type: 'pie',
      avoidLabelOverlap: false,
      radius: ['35%', '45%'],
      padAngle: 10,
      label: {
        normal: {
          show: true,
          color: 'inherit',
          fontSize: '16px'
        }
      },
      labelLine: {
        normal: {
          show: true
        }
      },
      data: [
        { value: 0, name: '无数据' }
      ]
    }
  ]
};

let deviceTypeOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}台 ({d}%)'
  },
  textStyle: {
    fontSize: 10
  },
  graphic:{
    elements: [{
      type:"image",
      style:{
        image:synthesis_circular,
        width:74,
        height:74
      },
      left:"center",
      top:"center",
    }]
  },
  color: ['#FD4142', '#0AC97E', '#F4C766', '#97CB7C'],
  series: [
    {
      name: '设备类型',
      type: 'pie',
      radius: ['50%', '75%'],
      padAngle: 10,
      avoidLabelOverlap: true,
      // roseType: 'radius',
      label: {
        normal: {
          show: false
        },
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        { value: 0, name: '桥机' },
        { value: 0, name: '门机' },
        { value: 0, name: '葫芦' },
        { value: 0, name: '卷扬机' }
      ]
    }
  ]
};


let deviceStateOption = {
  tooltip: { trigger: 'axis' },
  grid: { left: '0%', right: '0%', top: '18%', bottom: '5%', containLabel: true },
  legend: {
    textStyle: {
      color: '#417CC4'
    },
    right: '0%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#417CC4',
        fontSize: 12
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    data: ['1', '2', '3', '4', '5', '6']
  },
  yAxis: {
    type: 'value',
    max: 4,
    axisLabel: {
      textStyle: {
        color: '#417CC4',
        fontSize: 12
      }
    },
    splitLine: {
      lineStyle: {
        color: '#417CC4'
      }
    },
  },
  series: [
    {
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(79, 128, 248, 0.2)',
      },
      name: '状态异常',
      type: 'bar',
      itemStyle: {
        color: '#E23F3B'
      },
      barWidth: 10,
      barGap:'50%',
      data: [12, 12, 12, 12, 12, 12]
    },
    {
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(79, 128, 248, 0.2)'
      },
      name: '维修中',
      type: 'bar',
      itemStyle: {
        color:' #A38375'
      },
      barWidth: 10,
      barGap:'50%',
      data: [31, 31, 31, 31, 31, 31]
    },
    {
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(79, 128, 248, 0.2)'
      },
      name: '待维保',
      type: 'bar',
      itemStyle: {
        color: '#57FDF3'
      },
      barWidth: 10,
      barGap:'50%',
      data: [42, 42, 42, 42, 42, 42]
    },
    {
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(79, 128, 248, 0.2)'
      },
      name: '部件寿命临期',
      type: 'bar',
      itemStyle: {
        color:'#3954FD'
      },
      barWidth: 10,
      barGap:'50%',
      data: [20, 20, 20, 20, 20, 20]
    }
  ]
};


let alarmCountOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: '3%',
    align:'top',
    formatter: function(name) {
        // 返回一个带有 rich 文本样式的字符串
        return '{a|' + name + '}';
    },
    textStyle: {
        // 定义 rich 文本样式
        rich: {
            a: {
                // 定义样式，比如字体大小、颜色等
                fontSize: 12,
                color: '#417CC4',
                padding:[0,0,-40,-5]
            }
        }
    },
  },
  grid: {
    top: '30%',
    left: '0%',
    right: '3%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#417CC4',
        fontSize: 12
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  },
  yAxis: [
    {
      type: 'value',
      max: 20,
      minInterval: 1,
      axisLabel: {
        textStyle: {
          color: '#417CC4',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: '#417CC4'
        }
      }
    },
    {
      type: 'value',
      max: 20,
      minInterval: 1,
      axisLabel: {
        textStyle: {
          color: '#417CC4',
          fontSize: 12
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [{
    name: '数据转发',
    type: 'line',
    smooth: true,
    itemStyle: {
      color: '#2EA8FD'
    },
    yAxisIndex: 0,
    data: [0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  },
  {
    name: '故障数量',
    type: 'line',
    smooth: true,
    itemStyle: {
      color: '#FD4142'
    },
    yAxisIndex: 1,
    data: [0, 5, 6, 7, 8, 0, 0, 0, 0, 0, 0, 0]
  }]
};

</script>

<style lang="less" scoped>
  .bg {
    min-height: 1080px;
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/img/synthesis_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .title_bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  .content {
    width: 100%;
    height: calc(100% - 62px);
    top: 62px;
    background: transparent;
    position: relative;
    padding: 0px 40px 40px 40px;
  }
  .left_top {
    width: 535px;
    height: 184px;
    position: absolute;
    background-image: url(../../assets/img/synthesis_online_count.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: grid;
    grid-template-columns:  50% 50%;
    grid-template-rows: 50% 50%;
    padding: 20px 30px 20px 35px;
  }
  .device_count_bg_item {
    display: flex;
    align-items:center;
  }
  .device_count_text {
    color: #608BF3;
    font-weight: bold;
    font-size: 30px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
  }
  .right_top {
    right: 40px;
    width: 535px;
    height: 184px;
    position: absolute;
    background-image: url(../../assets/img/synthesis_rigth_top_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 0px 20px 45px;
  }
  .tabbar_containner {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 17px;
    .tabbar_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      .tabbar_text {
        color: #ABC0E0;
        font-size: 16px;
        font-weight: normal;
        font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
        cursor: pointer;
        &.active {
          color: white;
          font-size: 18px;
          font-weight: bold;
        }
      }
      .tabbar_indicator {
        width: 35px;
        height: 3px;
        background: transparent;
        border-radius: 2px;
        margin-top: 7px;
        &.active {
          background: #57FDF3;
        }
      }
    }
  }
  .alarm_count_contanner {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .left {
    top:184px;
    width: 470px;
    height: 465px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../assets/img/synthesis_client_bg.png);
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 28px 35px 25px 35px;
  }
  .client_list_title {
    width: 100%;
    height: 42px;
    margin-top: 15px;
    align-items: center;
    display: flex;
  }
  .client-scroll {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .client-scroll .item {
    height: 40px;
    display: flex;
    align-items: center;
    &.active {
      border-top: 1px solid rgba(65, 124, 196, 0.4);
    }
  }
  .right {
    right: 40px;
    top:184px;
    width: 470px;
    height: 465px;
    position: absolute;
    display: flex;
    flex-direction: column;
    flex: 1;
    z-index: 1;
  }
  .alarm_count_chart_container {
    width: 470px;
    height: 231px;
    background-image: url(../../assets/img/synthesis_col_1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    position: relative;
  }
  .tabbar_containner_chart {
    width: auto;
    position: absolute;
    top: 30px;
    left: 35px;
    display: flex;
    align-items: center;
    z-index: 2;
    .tabbar_item_chart {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;

      .tabbar_text_chart {
        color: #ABC0E0;
        font-size: 16px;
        font-weight: normal;
        font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;

        cursor: pointer;

        &.active {
          color: white;
          font-size: 18px;
          font-weight: bold;
        }
      }
      .tabbar_indicator {
        width: 35px;
        height: 3px;
        background: transparent;
        border-radius: 2px;
        margin-top: 7px;

        &.active {
          background: #57FDF3;
        }
      }
    }
  }
  .order_state_bg {
    height: 232px;
    width: 235px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../assets/img/synthesis_order_state_bg.png);
    padding: 28px 25px;
  }
  .order_state_container {
    margin-top: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px 10px;
  }
  .column_center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .row_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bottom {
    bottom: 40px;
    width: calc(100% - 80px);
    height: 326px;
    position: absolute;
    display: flex;
    justify-content: space-between;
  }
  .device_area_bg {
    width: 470px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../assets/img/synthesis_device_area_bg.png);
    display: flex;
    flex-direction: column;
    padding: 28px 20px 0px 20px;
  }
  .device_area_coatinner {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .device_area_chart {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  .device_area_right {
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .device_state_statistics_container {
    width: 880px;
    height: 100%;
    background-image: url(../../assets/img/statistics_container_bg.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    padding: 25px 35px 40px 40px;
  }
  .device_type_bg {
    width: 470px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../../assets/img/synthesis_device_area_bg.png);
    padding: 28px 25px;
  }
  .device_type_coatinner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .device_type_chart {
    width: 50%;
    height: 100%;
    display: flex;
  }
  .device_type_right {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .device_type_left {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .middle {
    width: calc(100% - 80px);
    height: 590px;
    top: 50px;
    position: absolute;
    display: flex;
    justify-content: center;
  }
  .map_container {
    width: 750px;
    height: 100%;
  }
  .map_chart {
    width: 100%;
    height: 100%;
  }
</style>