<template>
  <div class="container">
    <div class="header">
      <div class="title"/>
      <div class="options">
        <div class="time">{{ time }}</div>
        <div>|</div>
        <div class="date">{{ date }}</div>
        <div class="week">{{ week }}</div>
        <div v-if="!isFullScreen" class="on-fullscreen" @click="handleFullScreen(undefined)">
          <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 6L16 15.8995" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path
              d="M6 41.8995L16 32"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
            <path
              d="M42.0001 41.8995L32.1006 32"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
            <path
              d="M41.8995 6L32 15.8995"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
            <path d="M33 6H42V15" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M42 33V42H33" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M15 42H6V33" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6 15V6H15" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div v-if="isFullScreen" class="off-fullscreen" @click="handleFullScreen(undefined)">
          <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M33 6V15H42" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M15 6V15H6" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M15 42V33H6" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path
              d="M33 42V33H41.8995"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="logout" @click="$router.push('/index')">
          <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M23.9917 6H6V42H24"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
            <path
              d="M33 33L42 24L33 15"
              stroke="#2aa7d3"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"/>
            <path d="M16 23.9917H42" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="top">
          <div class="title">企业统计</div>
          <div class="content">
            <div>
              <div class="count">{{ regulatoryDepartmentCount }}</div>
              <div class="corlor058">股份公司部门数量</div>
            </div>
            <div>
              <div class="count">{{ corpCount }}</div>
              <div class="corlor058">分子公司数</div>
            </div>
            <div>
              <div class="count">{{ unitCorpCount }}</div>
              <div class="corlor058">相关方单位数</div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="title">客户数据</div>
          <div class="content">
            <div>
              <div class="corlor058">集团用户</div>
              <div class="count">{{ superUserCount }}</div>
            </div>
            <div>
              <div class="corlor058">分公司用户</div>
              <div class="count">{{ corpUserCount }}</div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="title">分公司使用统计</div>
          <div class="content">
            <div class="tabs">
              <div
                v-for="(item,index) in tabsList"
                :key="index"
                :class="['tab',{active:tabsIndex === index}]"
                @click="tabsIndex = index">
                {{ item }}
              </div>
            </div>
            <div v-if="tabsIndex === 0" class="table">
              <div>
                <span>名次</span>
                <span>企业名称</span>
                <span>人员数</span>
              </div>
              <div v-for="(item,index) in staffUsageList" :key="index">
                <span>{{ index + 1 }}</span>
                <span>{{ item.name }}</span>
                <span>{{ item.count }}</span>
              </div>
            </div>
            <div v-if="tabsIndex === 1" class="table">
              <div>
                <span>企业名称</span>
                <span>部门数</span>
                <span>班组数</span>
              </div>
              <div v-for="(item,index) in DepartmentUsageList" :key="index">
                <span>{{ item.corpName }}</span>
                <span>{{ item.deptCount }}</span>
                <span>{{ item.baozuCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="top">
          <div class="title">秦皇岛港区</div>
          <div class="content">
            <div class="map">
              <img src="../../assets/BI/ditu.png" class="baidu-map" >
              <!--              <baidu-map :zoom="10" :scroll-wheel-zoom="true" class="baidu-map" @ready="handler">-->
              <!--                <bm-marker v-for="(item,index) in map.points" :key="index" :position="item" :clicking="false"/>-->
              <!--              </baidu-map>-->
            </div>
            <div id="main1"/>
          </div>
        </div>
        <div class="bottom">
          <div class="left">
            <div class="title">秦港股份</div>
            <div class="content">
              <div id="main2"/>
              <div id="main3"/>
            </div>
          </div>
          <div class="right">
            <div class="title">秦港股份检查类型</div>
            <div class="content">
              <div id="main4"/>
              <div class="table">
                <div>
                  <span>检查名称</span>
                  <span>检查时间</span>
                </div>
                <div v-for="(item,index) in safetyEnvironmentalInspectionList" :key="index">
                  <span>{{ item.INSPECTION_PLACE.length > 6? item.INSPECTION_PLACE.substr(0, 6) + '...': item.INSPECTION_PLACE }}</span>
                  <span>{{ item.INSPECTION_TIME_START.length > 10? item.INSPECTION_TIME_START.substr(0, 10) + '...': item.INSPECTION_TIME_START }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div class="title">隐患来源</div>
          <div class="content">
            <div>
              <div class="corlor058">日常检查</div>
              <div class="count">{{ richang }}</div>
            </div>
            <div>
              <div class="corlor058">安全环保检查</div>
              <div class="count">{{ anquan }}</div>
            </div>
            <div>
              <div class="corlor058">隐患快报</div>
              <div class="count">{{ kuaibao }}</div>
            </div>
          </div>
        </div>
        <div class="center1">
          <div class="title">隐患处置情况统计</div>
          <div id="main5"/>
        </div>
        <div class="center2">
          <div class="title">各分公司一般隐患处理情况</div>
          <div id="main6"/>
        </div>
        <div class="bottom">
          <div class="title">高危作业占比</div>
          <div id="main7"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'
import fullScreenMixins from '@/assets/mixins/fullScreen'
import { requestFN } from '@/utils/request'
let myChart1 = null
let myChart2 = null
let myChart3 = null
let myChart4 = null
let myChart5 = null
let myChart6 = null
let myChart7 = null
export default {
  mixins: [fullScreenMixins],
  data() {
    return {
      week: '',
      time: moment().format('HH:mm:ss'),
      timer: '',
      date: moment().format('YYYY-MM-DD'),
      tabsList: ['人员使用情况', '部门使用情况'],
      tabsIndex: 0,
      staffUsageList: [],
      DepartmentUsageList: [],
      safetyEnvironmentalInspectionList: [],
      map: {
        BMap: '',
        map: '',
        pointLngLat: {},
        points: []
      },
      corpUserCount: 0,
      superUserCount: 0,
      richang: 0,
      anquan: 0,
      corpCount: 0,
      regulatoryDepartmentCount: 0,
      unitCorpCount: 0,
      kuaibao: 0

    }
  },
  mounted() {
    this.getWeek()
    this.getTime()
    this.addPoints()

    // this.initEcharts2()
    // this.initEcharts3()
    // this.initEcharts4()
    // this.initEcharts5()
    // this.initEcharts6()
    // this.initEcharts7()
    window.onresize = function() {
      myChart1 && myChart1.resize()
      myChart2 && myChart2.resize()
      myChart3 && myChart3.resize()
      myChart4 && myChart4.resize()
      myChart5 && myChart5.resize()
      myChart6 && myChart6.resize()
      myChart7 && myChart7.resize()
    }
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  created() {
    this.getCountInsByCorpSource()
    this.getUserCount()
    this.getCorpCount()
    this.getRegulatoryDepartmentCount()
    this.getUnitCorpCount()
    this.getUserCountBuCorpinfo()
    this.getCorpDeptCountTop10()
    this.getSuperInsCountAndHiddeCount()
    this.getSuperInsBySubjectAndTop()
    this.getHiddenCountBySubject()
    this.getHiddenCountByHiddenLevel()
    this.getHiddenCountByCorpInfoHandle()
    this.getHighriskworkCount()
  },

  methods: {
    // 相关方单位数
    getUnitCorpCount() {
      requestFN(
        '/api/biTongji/unitCorpCount',
        { }
      ).then((data) => {
        this.unitCorpCount = data.unitCorpCount
      })
    },
    getRegulatoryDepartmentCount() {
      requestFN(
        '/api/biTongji/getRegulatoryDepartmentCount',
        { }
      ).then((data) => {
        this.regulatoryDepartmentCount = data.regulatoryDepartmentCount
      })
    },
    getCorpCount() {
      requestFN(
        '/api/biTongji/getCorpCount',
        { }
      ).then((data) => {
        this.corpCount = data.corpCount
      })
    },
    getCountInsByCorpSource() {
      var xAxis = []
      var xYxis1 = []
      var xYxis2 = []
      requestFN(
        '/api/biTongji/getCountInsByCorpSource',
        { }
      ).then((data) => {
        data.varList.forEach((item, index) => {
          xAxis.push(item.corpinfName)
          xYxis1[index] = Number(item.supeCount)
          xYxis2[index] = Number(item.corpCount)
        })
        this.initEcharts1(xAxis, xYxis1, xYxis2)
      })
    },
    getUserCount() {
      requestFN(
        '/api/biTongji/getUserCount',
        { }
      ).then((data) => {
        this.corpUserCount = data.corpUserCount
        this.superUserCount = data.superUserCount
      })
    },
    getUserCountBuCorpinfo() {
      requestFN(
        '/api/biTongji/getCorpUserCountTop10',
        { }
      ).then((data) => {
        data.corpUserCountTop10.forEach((item, index) => {
          const map = {}
          map.name = item.CORP_NAME
          map.count = item.count
          this.staffUsageList.push(map)
        })
      })
    },
    getCorpDeptCountTop10() {
      requestFN(
        '/api/biTongji/getCorpDeptCount',
        { }
      ).then((data) => {
        data.valList.forEach((item, index) => {
          const map = {}
          map.corpName = item.corpName
          map.deptCount = (item.departmentLevel0002 - 0) + (item.departmentLevel0001 - 0)
          map.baozuCount = item.departmentLevel0003
          this.DepartmentUsageList.push(map)
        })
      })
    },
    getSuperInsCountAndHiddeCount() {
      requestFN(
        '/api/biTongji/getSuperInsCountAndHiddeCount',
        { }
      ).then((data) => {
        this.initEcharts2(data.superInsCount)
        this.initEcharts3(data.superHiddenCount)
      })
    },
    getSuperInsBySubjectAndTop() {
      requestFN(
        '/api/biTongji/getSuperInsBySubjectAndTop',
        { }
      ).then((data) => {
        let count1, count2, count3
        data.count.forEach((item, index) => {
          if (item.INSPECTION_SUBJECT == '安全') {
            count1 = item.count
          } else if (item.INSPECTION_SUBJECT == '环保') {
            count2 = item.count
          } else if (item.INSPECTION_SUBJECT == '综合') {
            count3 = item.count
          }
        })
        this.safetyEnvironmentalInspectionList = data.insList
        this.initEcharts4(count1, count2, count3)
      })
    },
    getHiddenCountBySubject() {
      requestFN(
        '/api/biTongji/getHiddenCountBySubject',
        {}
      ).then((data) => {
        var richang = 0
        var anquan = 0
        var kuaibao = 0
        data.valList.forEach((item, index) => {
          if (item.SOURCE == '1') {
            kuaibao += item.count
          } else if (item.SOURCE == '4' || item.SOURCE == '5') {
            anquan += item.count
          } else if (item.SOURCE == '2') {
            richang += item.count
          }
        })
        this.richang = richang
        this.anquan = anquan
        this.kuaibao = kuaibao
      })
    },
    getHiddenCountByHiddenLevel() {
      requestFN(
        '/api/biTongji/getHiddenCountByHiddenLevel',
        { }
      ).then((data) => {
        var yinhuanCount = []
        data.valList.forEach((item, index) => {
          if (item.HIDDENLEVEL == 'hiddenLevel1001') { // 忽略
            yinhuanCount[0] = item.count
          } else if (item.HIDDENLEVEL == 'hiddenLevel1002') { // 一般隐患
            yinhuanCount[1] = item.count
          } else if (item.HIDDENLEVEL == 'pecial') { // 特殊处置
            yinhuanCount[2] = item.count
          } else if (item.HIDDENLEVEL == 'jdyh001') { //  较大隐患
            yinhuanCount[3] = item.count
          } else if (item.HIDDENLEVEL == 'hiddenLevel2002') { // 重大隐患
            yinhuanCount[4] = item.count
          }
        })
        this.initEcharts5(yinhuanCount)
      })
    },
    getHiddenCountByCorpInfoHandle() {
      requestFN(
        '/api/biTongji/getHiddenCountByCorpInfoHandle',
        {}
      ).then((data) => {
        var corpinfNames = []
        var findHiddenCounts = []
        var checkHiddenCounts = []
        data.valList.forEach((item, index) => {
          if (item.CORP_NAME) { //
            corpinfNames[index] = item.CORP_NAME
          }
          if (item.countAll) { //
            findHiddenCounts[index] = item.countAll
          }
          if (item.countRec) { //
            checkHiddenCounts[index] = item.countRec
          }
        })
        this.initEcharts6(corpinfNames, findHiddenCounts, checkHiddenCounts)
      })
    },
    getHighriskworkCount() {
      requestFN(
        '/api/biTongji/getHighriskworkCount',
        {}
      ).then((data) => {
        const highriskworkCounts = [0, 0, 0, 0, 0, 0]
        console.info(data)
        if (data.valList[0].hotwork) {
          highriskworkCounts[0] = data.valList[0].hotwork
        }
        if (data.valList[0].electricity) {
          highriskworkCounts[1] = data.valList[0].electricity
        }
        if (data.valList[0].hoisting) {
          highriskworkCounts[2] = data.valList[0].hoisting
        }
        if (data.valList[0].blindboard) {
          highriskworkCounts[3] = data.valList[0].blindboard
        }
        if (data.valList[0].highwork) {
          highriskworkCounts[4] = data.valList[0].highwork
        }
        if (data.valList[0].confinedspace) {
          highriskworkCounts[5] = data.valList[0].confinedspace
        }

        this.initEcharts7(highriskworkCounts)
      })
    },
    getWeek() {
      let week = ''
      switch (moment().day()) {
        case 1:
          week = '星期一'
          break
        case 2:
          week = '星期二'
          break
        case 3:
          week = '星期三'
          break
        case 4:
          week = '星期四'
          break
        case 5:
          week = '星期五'
          break
        case 6:
          week = '星期六'
          break
        case 0:
          week = '星期日'
          break
      }
      this.week = week
    },
    getTime() {
      this.timer = setInterval(() => {
        this.time = moment().format('HH:mm:ss')
      }, 1000)
    },
    handler({ BMap, map }) {
      this.map.BMap = BMap
      this.map.map = map
      const geolocation = new BMap.Geolocation()
      const $this = this
      geolocation.getCurrentPosition(function(r) {
        const myGeo = new BMap.Geocoder()
        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
          if (result) {
            $this.$set($this.map, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
            map.enableScrollWheelZoom(true)
            $this.setCenter({ BMap, map })
          }
        })
      })
    },
    setCenter({ BMap, map }) {
      var point = new BMap.Point(this.map.pointLngLat.lng, this.map.pointLngLat.lat)
      const zoom = map.getZoom()
      setTimeout(() => {
        map.centerAndZoom(point, zoom)
      }, 0)
    },
    addPoints() {
      // for (let i = 0; i < 50; i++) {
      //   this.map.points.push({ lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 })
      // }
    },
    initEcharts1(xAxis, xYxis1, xYxis2) {
      myChart1 = echarts.init(document.querySelector('#main1'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '安全环保检查情况统计',
          textStyle: {
            color: '#05488c',
            fontSize: 16
          },
          left: '0',
          top: '0'
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        legend: {
          data: ['港股公司', '分子公司'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#05488c'
          },
          itemWidth: 24,
          itemHeight: 10
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: '#05488c'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#02cafd'
            }
            // rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#05488c'
            }
          }
        },
        series: [
          {
            name: '港股公司',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#cc976b'
                  },
                  {
                    offset: 1,
                    color: '#ccea34'
                  }
                ])
              }
            },
            data: xYxis1
          },
          {
            name: '分子公司',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#78de95'
                  },
                  {
                    offset: 1,
                    color: '#16b3f8'
                  }
                ])
              }
            },
            data: xYxis2
          }
        ]
      }
      myChart1.setOption(option)
    },
    initEcharts2(superInsCount) {
      myChart2 = echarts.init(document.querySelector('#main2'))
      const option = {
        title: [
          {
            text: '安全环保检查次数',
            left: '48%',
            bottom: '0%',
            textAlign: 'center',
            backgroundColor: 'rgba(6,21,141,0.7)',
            borderWidth: 1,
            borderRadius: 30,
            padding: [5, 10],
            borderColor: '#0f3286',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '14',
              color: '#fff',
              textAlign: 'center'
            }
          }
        ],
        series: [
          {
            type: 'pie',
            hoverAnimation: false,
            radius: ['70%', '80%'],
            center: ['50%', '40%'],
            startAngle: 225,
            data: [
              {
                value: superInsCount,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#3775fe'
                      },
                      {
                        offset: 1,
                        color: '#5da7ff'
                      }
                    ])
                  }
                },
                label: {
                  normal: {
                    formatter: [
                      '{a|{c}}',
                      '{b|次}'
                    ].join('\n'),
                    position: 'center',
                    show: true,
                    rich: {
                      a: {
                        fontSize: '24',
                        fontWeight: 'normal',
                        color: '#00aaff'
                      },
                      b: {
                        fontSize: '16',
                        fontWeight: 'normal',
                        padding: [0, 0, 0, 0],
                        color: '#00aaff'
                      }
                    }
                  }
                }
              },
              {
                value: 25,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        ]
      }
      myChart2.setOption(option)
    },
    initEcharts3(superHiddenCount) {
      myChart3 = echarts.init(document.querySelector('#main3'))
      const option = {
        title: [
          {
            text: '发现隐患数',
            left: '48%',
            bottom: '0%',
            textAlign: 'center',
            backgroundColor: 'rgba(6,21,141,0.7)',
            borderWidth: 1,
            borderRadius: 30,
            padding: [5, 10],
            borderColor: '#0f3286',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '14',
              color: '#fff',
              textAlign: 'center'
            }
          }
        ],
        series: [
          {
            type: 'pie',
            hoverAnimation: false,
            radius: ['70%', '80%'],
            center: ['50%', '40%'],
            startAngle: 225,
            data: [
              {
                value: superHiddenCount,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#3775fe'
                      },
                      {
                        offset: 1,
                        color: '#5da7ff'
                      }
                    ])
                  }
                },
                label: {
                  normal: {
                    formatter: [
                      '{a|{c}}',
                      '{b|项}'
                    ].join('\n'),
                    position: 'center',
                    show: true,
                    rich: {
                      a: {
                        fontSize: '24',
                        fontWeight: 'normal',
                        color: '#00aaff'
                      },
                      b: {
                        fontSize: '16',
                        fontWeight: 'normal',
                        padding: [0, 0, 0, 0],
                        color: '#00aaff'
                      }
                    }
                  }
                }
              },
              {
                value: 25,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        ]
      }
      myChart3.setOption(option)
    },
    initEcharts4(count1, count2, count3) {
      myChart4 = echarts.init(document.querySelector('#main4'))
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} <br/> {d}%'
        },
        legend: {
          data: ['安全', '环保', '综合'],
          icon: 'circle',
          left: 'center',
          bottom: 15,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50', '70'],
            center: ['50%', '40%'],
            color: ['#f8b62c', '#f53f8c', '#28b1ff'],
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#031845'
              }
            },
            data: [
              {
                value: count1,
                name: '安全'
              },
              {
                value: count2,
                name: '环保'
              },
              {
                value: count3,
                name: '综合'
              }
            ],
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 15
              }
            },
            label: {
              normal: {
                formatter: '{d}%',
                textStyle: {
                  color: '#fff'
                }
              }
            }
          }
        ]
      }
      myChart4.setOption(option)
    },
    initEcharts5(yinhuanCount) {
      myChart5 = echarts.init(document.querySelector('#main5'))
      const option = {
        color: ['#10baf8', '#f49545', '#91ee7c', '#ffc602 ', '#fe0000'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}<br/>{d}%'
        },
        legend: {
          right: '0%',
          bottom: '15%',
          data: [
            '忽略',
            '一般',
            '特殊处置',
            '较大隐患',
            '重大隐患'
          ],
          width: '20',
          height: '10',
          textStyle: {
            color: '#05488c'
          }
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            startAngle: 0,
            radius: [35, 100],
            center: ['40%', '30%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: '{d}%',
                textStyle: {
                  color: '#05488c'
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length1: 10,
                length2: 10
              }
            },
            data: [
              {
                value: yinhuanCount[0],
                name: '忽略'
              },
              {
                value: yinhuanCount[1],
                name: '一般'
              },
              {
                value: yinhuanCount[2],
                name: '特殊处置'
              },
              {
                value: yinhuanCount[3],
                name: '较大隐患'
              },
              {
                value: yinhuanCount[4],
                name: '重大隐患'
              },
              {
                value: 0,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
              {
                value: 0,
                name: '',
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ]
      }
      myChart5.setOption(option)
    },
    initEcharts6(corpinfoNames, findHiddenCounts, checkHiddenCounts) {
      myChart6 = echarts.init(document.querySelector('#main6'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '8%',
          top: '30%',
          containLabel: true
        },
        legend: {
          data: ['发现隐患数', '已处理隐患数'],
          right: 10,
          top: '10%',
          textStyle: {
            color: '#05488c'
          },
          itemWidth: 24,
          itemHeight: 10
        },
        xAxis: {
          type: 'category',
          data: corpinfoNames,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#02cafd'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '05488c'
            }
          }
        },
        series: [
          {
            name: '发现隐患数',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#cc976b'
                  },
                  {
                    offset: 1,
                    color: '#ccea34'
                  }
                ])
              }
            },
            data: findHiddenCounts
          },
          {
            name: '已处理隐患数',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#78de95'
                  },
                  {
                    offset: 1,
                    color: '#16b3f8'
                  }
                ])
              }
            },
            data: checkHiddenCounts
          }
        ]
      }
      myChart6.setOption(option)
    },
    initEcharts7(highriskworkCounts) {
      myChart7 = echarts.init(document.querySelector('#main7'))
      const dataValue = highriskworkCounts
      let max = 0
      max = Math.max(...dataValue.map(Number))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: {
          indicator: [
            { name: '动火作业', max },
            { name: '临时用电', max },
            { name: '吊装作业', max },
            { name: '盲板作业', max },
            { name: '高处作业', max },
            { name: '有限空间作业', max }
          ],
          radius: '70%',
          center: ['50%', '55%'],
          shape: 'circle',
          splitNumber: 3,
          name: {
            textStyle: {
              color: '#02cafd'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#073593',
              width: 1
            }
          },
          axisLine: {
            show: false
          }
        },
        series: {
          name: '高危作业占比',
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          data: [
            {
              value: dataValue
            }
          ],
          symbol: 'circle',
          symbolSize: 12,
          itemStyle: {
            normal: {
              color: 'rgba(249,181,44,0.8)',
              borderColor: 'rgba(249,181,44,0.2)',
              borderWidth: 12
            }
          },
          areaStyle: {
            normal: {
              color: 'rgba(10,56,108,0.67)'
            }
          },
          lineStyle: {
            normal: {
              color: 'rgba(249,181,44,1)',
              width: 2
            }
          }
        }
      }
      myChart7.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
@mixin title {
  position: relative;
  .title {
    position: absolute;
    left: 0;
    top: 0;
    color: #05488c;
    font-size: 16px;
  }
}
.corlor058{
  color: #05488c;
}
.container {
  width: 100vw;
  height: 100vh;
  // background-image: url("../../assets/BI/bodybg.jpg");
  // background-size: 100% 100%;
  background: #f0f3fa;
  background-repeat: no-repeat;
  color: #4d94dc;
  font-size: 14px;

  .header {
    width: 100vw;
    height: 8.965vh;
    background-image: url("../../assets/BI/topbg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    .title {
      width: 470px;
      height: 5.123vh;
      background-image: url("../../assets/BI/title.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      left: 50%;
      top: 0.747vh;
      transform: translateX(-50%);
    }

    .options {
      display: flex;
      align-items: center;
      position: absolute;
      right: 30px;
      top: 3.915vh;
      height: 1.921vh;
      line-height: 1.921vh;
      font-size: 16px;

      .time {
        padding: 0 15px;
      }

      .date {
        padding: 0 15px;
      }

      .logout, .on-fullscreen, .off-fullscreen {
        cursor: pointer;
        margin-left: 15px;
      }

      div {
        display: flex;
        align-items: center;
      }
    }
  }

  .main {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;

    .left {
      width: 492px;

      .top {
        width: 492px;
        height: 17.277vh;
        background-image: url("../../assets/BI/leftbg1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include title;

        .content {
          display: flex;
          justify-content: center;
          flex-basis: 100%;

          > div {
            flex: 1;
            text-align: center;

            .count {
              font-size: 36px;
              font-weight: bold;
              padding-bottom: 1.067vh;
            }

            &:nth-child(1) .count {
              color: #fec72c;
            }

            &:nth-child(2) .count {
              color: #8dee7b;
            }

            &:nth-child(3) .count {
              color: #0fb9f7;
            }
          }
        }
      }

      .center {
        margin-top: 1.601vh;
        width: 492px;
        height: 21.760vh;
        background-image: url("../../assets/BI/leftbg2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include title;

        .content {
          display: flex;
          justify-content: center;
          flex-basis: 100%;

          > div {
            flex-basis: 40%;
            text-align: center;
            background-color: rgba(184, 219, 255, 0.7);
            margin-left: 15px;
            padding: 3.202vh 30px;

            &:first-child {
              margin-left: 0;
            }

            .count {
              font-size: 36px;
              font-weight: bold;
              padding-top: 1.067vh;
              color: #0fb9f7;
            }
          }
        }
      }

      .bottom {
        margin-top: 1.601vh;
        width: 492px;
        height: 47.587vh;
        background-image: url("../../assets/BI/leftbg3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        @include title;

        .content {
          padding: 3.202vh 25px 1.601vh 25px;

          .tabs {
            display: flex;

            .tab {
              width: 118px;
              height: 3.415vh;
              line-height: 3.415vh;
              text-align: center;
              background-image: url("../../assets/BI/tab_on.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              margin-left: 15px;
              cursor: pointer;
              font-size: 14px;

              &.active {
                background-image: url("../../assets/BI/tab.png");
              }

              &:first-child {
                margin-left: 0;
              }
            }
          }

          .table {
            text-align: center;
            margin-top: 2.377vh;
            height: 36.5vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;

            div {
              padding: 0.747vh 0;
              display: flex;
              justify-content: space-between;
              &:nth-child(odd) {
                background-color: rgba(99, 162, 256, 0.4);
              }
              &:first-child {
                color: #05488c;
              }

              span {
                flex: 1;
              }
            }
          }
        }
      }
    }

    .center {
      width: 822px;

      .top {
        width: 822px;
        height: 58.769vh;
        background-image: url("../../assets/BI/midbg1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 3.735vh 20px;
        @include title;

        .map {
          width: 100%;

          .baidu-map {
            width: 100%;
            height: 26vh;
          }
        }

        #main1 {
          margin-top: 1vh;
          width: 100%;
          height: 26vh;
        }
      }

      .bottom {
        margin-top: 1.067vh;
        display: flex;
        justify-content: space-between;

        .left {
          width: 207px;
          height: 30.377vh;
          background-image: url("../../assets/BI/midbg2.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding: 3.735vh 20px 0 20px;
          @include title;

          #main2, #main3 {
            width: 100%;
            height: 12vh;
          }

          #main3 {
            margin-top: 1vh;
          }
        }

        .right {
          width: 580px;
          height: 30.377vh;
          background-image: url("../../assets/BI/midbg3.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding: 0 20px;
          @include title;

          .content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            #main4 {
              width: 48%;
              height: 27vh;
              margin-top: 3.377vh;
            }

            .table {
              width: 48%;
              text-align: center;
              margin: 2.377vh 0 0 4%;
              height: 25vh;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              div {
                padding: 0.747vh 0;
                background-color: rgba(99, 162, 256, 0.4);
                display: flex;
                justify-content: space-between;

                &:first-child {
                  color: #05488c;
                }

                span {
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }

    .right {
      width: 492px;

      .top {
        width: 492px;
        height: 9.419vh;
        background-image: url("../../assets/BI/rightbg1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include title;

        .content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;

          > div {
            flex: 1;

            .count {
              color: #02cafd;
              font-size: 22px;
            }
          }
        }
      }

      .center1 {
        margin-top: 1.601vh;
        width: 492px;
        height: 19.985vh;
        background-image: url("../../assets/BI/rightbg2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 20px;
        @include title;

        #main5 {
          width: 100%;
          height: 19.985vh;
        }
      }

      .center2 {
        margin-top: 1.601vh;
        width: 492px;
        height: 19.878vh;
        background-image: url("../../assets/BI/rightbg3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 20px;
        @include title;

        #main6 {
          width: 100%;
          height: 19.878vh;
        }
      }

      .bottom {
        margin-top: 1.601vh;
        width: 492px;
        height: 35.780vh;
        background-image: url("../../assets/BI/rightbg4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 20px;
        @include title;

        #main7 {
          width: 100%;
          height: 35.780vh;
        }
      }
    }
  }
}
</style>
