<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('/map')">-->
        <!--          <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">-->
        <!--            <path-->
        <!--              d="M24 44.0002C35.0457 44.0002 44 35.0459 44 24.0002C44 12.9545 35.0457 4.00024 24 4.00024C12.9543 4.00024 4 12.9545 4 24.0002C4 35.0459 12.9543 44.0002 24 44.0002Z"-->
        <!--              stroke="#2aa7d3"-->
        <!--              stroke-width="3"/>-->
        <!--            <path-->
        <!--              d="M6 30.9856C8.63192 32.041 10.5266 32.041 11.6839 30.9856C13.4199 29.4025 11.9219 24.5978 14.3532 23.2727C16.7844 21.9476 20.4886 27.8214 23.9508 25.8887C27.4129 23.9559 23.6246 18.8023 26.0272 16.713C28.4298 14.6237 31.554 16.98 32.1001 13.4865C32.6462 9.99304 29.5521 11.5082 28.9584 8.20693C28.5625 6.00611 28.5625 4.84884 28.9584 4.73511"-->
        <!--              stroke="#2aa7d3"-->
        <!--              stroke-width="3"-->
        <!--              stroke-linecap="round"/>-->
        <!--            <path-->
        <!--              d="M29.0209 43.3505C27.1468 41.4325 26.4721 39.6497 26.9969 38.0019C27.7841 35.5303 29.0826 35.6764 29.6488 34.1482C30.2149 32.6199 28.6156 30.4433 32.1643 28.5826C34.5301 27.3421 37.783 28.7794 41.9228 32.8944"-->
        <!--              stroke="#2aa7d3"-->
        <!--              stroke-width="3"-->
        <!--              stroke-linecap="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>
            <!--            <el-button @click="visibleDialog = true">示意图</el-button>-->
            <a @click="visibleDialog = true">示意图</a>
          </div>
          <div class="content">
            <div>
              <div class="count">{{ regulatoryDepartmentCount }}</div>
              <div>股份公司部门数量</div>
            </div>
            <div>
              <div class="count">{{ corpCount }}</div>
              <div>分子公司数</div>
            </div>
            <div>
              <div class="count">{{ unitCorpCount }}</div>
              <div>相关方单位数</div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="title">客户数据</div>
          <div class="content">
            <div>
              <div>监管端人员数</div>
              <div class="count">{{ regulatoryUserCount }}</div>
            </div>
            <div>
              <div>分子公司人数</div>
              <div class="count">{{ corpUserCount }}</div>
            </div>
            <div>
              <div>相关方人员数</div>
              <div class="count">{{ unitUserCount }}</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>
            <img src="../../assets/BI/map.png" alt="" width="24" height="24" style="cursor:pointer;" @click="$router.push('/map')">
          </div>
          <div class="content">
            <!--            <div class="map">-->
            <!--              <img src="../../assets/BI/ditu.jpg" 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 class="block1">
              <div class="subtitle">安全动态</div>
              <div class="text">本质安全：通过消除隐患减少并杜绝事故</div>
              <div class="trapezoid one">消除{{ hiddenAllCount1 }}<br>起严重事故</div>
              <div class="trapezoid two">避免{{ hiddenAllCount2 }}次轻微事故</div>
              <div class="trapezoid three">避免{{ hiddenAllCount3 }}次未遂事故征兆</div>
              <div class="trapezoid four">消除{{ hiddenAllCount4 }}次安全隐患</div>
              <div class="content_title">海因里希法则 1000∶300∶29∶1法则</div>
              <div class="text">每1起严重事故背后都存在着29次轻微事故,300次未遂事故征兆(事故险情)和1000次事故隐患</div>
            </div>
            <div class="line"/>
            <div class="block2">
              <div class="subtitle">安全隐患</div>
              <div id="main1"/>
            </div>
          </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>隐患排查</div>
              <div class="count">{{ richang }}</div>
            </div>
            <div>
              <div>安全环保检查</div>
              <div class="count">{{ anquan }}</div>
            </div>
            <div>
              <div>隐患快报</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 class="bi-different-dialog">
      <el-dialog :visible.sync="visibleDialog" :close-on-click-modal="false" width="70%">
        <img src="../../assets/BI/fenjiguankong.png" class="baidu-map" width="100%">
      </el-dialog>
    </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 {
      visibleDialog: false,
      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,
      kuaibao: 0,
      regulatoryUserCount: 0,
      supeCount: 0,
      corpCount: 0,
      regulatoryDepartmentCount: 0,
      unitCorpCount: 0,
      allHiddenCount: 0,
      regulatoryHiddenCount: 0,
      corpHiddenCount: 0,
      supeHiddenCount: 0,
      unitUserCount: 0,
      hiddenAllCount1: 0,
      hiddenAllCount2: 0,
      hiddenAllCount3: 0,
      hiddenAllCount4: 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.getHiddenCountByHiddenType()
    this.getUserCount()
    this.getUserCountBuCorpinfo()
    this.getCorpDeptCountTop10()
    this.getSuperInsCountAndHiddeCount()
    this.getSuperInsBySubjectAndTop()
    this.getHiddenCountBySubject()
    this.getHiddenCountByHiddenLevel()
    // this.getHiddenCountByCorpInfoHandle()
    this.getHighriskworkCount()
    this.getregulatoryUserCount()
    this.getCorpCount()
    this.getRegulatoryDepartmentCount()
    this.getUnitCorpCount()
    this.getUnitUserInfo()
    this.getHeinrichData()
  },

  methods: {
    getHeinrichData() {
      requestFN(
        '/biTongji/getHiddenCountByHeinrich',
        {}
      ).then((data) => {
        var hiddenAllCount = data.pd.HIDDEN_COUNT
        this.hiddenAllCount4 = hiddenAllCount
        this.hiddenAllCount3 = (hiddenAllCount / 3).toFixed(0)
        this.hiddenAllCount2 = Math.floor(hiddenAllCount * (29 / 1000))
        this.hiddenAllCount1 = Math.floor(hiddenAllCount * (1 / 1000))
      }).catch((e) => {})
    },
    getUnitUserInfo() {
      requestFN(
        '/xgf/user/unitUserCount',
        {}
      ).then((data) => {
        console.log(data)
        this.unitUserCount = data.unitUserCount
      })
    },
    // 相关方单位数
    getUnitCorpCount() {
      requestFN(
        '/xgf/corp/unitCorpCount',
        {}
      ).then((data) => {
        this.unitCorpCount = data.unitCorpCount
      })
    },
    getRegulatoryDepartmentCount() {
      requestFN(
        '/biTongji/getRegulatoryDepartmentCount',
        {}
      ).then((data) => {
        this.regulatoryDepartmentCount = data.regulatoryDepartmentCount
      })
    },
    getCorpCount() {
      requestFN(
        '/biTongji/getCorpCount',
        {}
      ).then((data) => {
        this.corpCount = data.corpCount
      })
    },
    getCountInsByCorpSource() {
      var xAxis = []
      var xYxis1 = []
      var xYxis2 = []
      var xYxis3 = []
      var xYxis4 = []
      requestFN(
        '/biTongji/getCountInsByCorpSource',
        {}
      ).then((data) => {
        data.varList.forEach((item, index) => {
          xAxis.push(item.corpinfName) // 安全环保统计图名称
          xYxis1[index] = Number(item.supeCount) // 港股公司环保检查
          xYxis2[index] = Number(item.corpCount) // 分子公司环保检查
          xYxis3[index] = Number(item.supeHiddenCount) // 港股公司发现隐患数
          xYxis4[index] = Number(item.corpHiddenCount) // 分子公司发现隐患数
        })
        this.initEcharts6(xAxis, xYxis1, xYxis2, xYxis3, xYxis4)
      })
    },
    getHiddenCountByHiddenType() {
      requestFN(
        '/api/biTongji/getHiddenCountByHiddenType',
        { }
      ).then((data) => {
        let count = 0
        data.varList.forEach((item) => {
          count += item.HIDDEN_COUNT
        })
        this.initEcharts1(data.varList, count)
      })
    },
    getUserCount() {
      requestFN(
        '/biTongji/getcorpUserCount',
        {}
      ).then((data) => {
        this.corpUserCount = data.corpUserCount
      })
    },
    getregulatoryUserCount() {
      requestFN(
        '/biTongji/getRegulatoryUserCount',
        {}
      ).then((data) => {
        this.regulatoryUserCount = data.regulatoryUserCount
      })
    },
    getUserCountBuCorpinfo() {
      requestFN(
        '/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(
        '/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(
        '/biTongji/getSuperInsCountAndHiddeCount',
        {}
      ).then((data) => {
        this.initEcharts2(data.superInsCount)
        this.initEcharts3(data.superHiddenCount)
      })
    },
    getSuperInsBySubjectAndTop() {
      requestFN(
        '/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.length > 4 ? data.insList.splice(0,4) : data.insList
        this.initEcharts4(count1, count2, count3)
      })
    },
    getHiddenCountBySubject() {
      requestFN(
        '/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(
        '/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
          // }
          if (item.HIDDENLEVEL == 'hiddenLevel1004') { // 轻微隐患
            yinhuanCount[0] = item.count
          }else  if (item.HIDDENLEVEL == 'hiddenLevel1002') { // 一般隐患
            yinhuanCount[1] = item.count
          } else  if (item.HIDDENLEVEL == 'jdyh001') { //  较大隐患
            yinhuanCount[2] = item.count
          } else if (item.HIDDENLEVEL == 'hiddenLevel2002') { // 重大隐患
            yinhuanCount[3] = item.count
          }
        })
        this.initEcharts5(yinhuanCount)
      })
    },
    getHiddenCountByCorpInfoHandle() {
      requestFN(
        '/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(
        '/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(data, all) {
      myChart1 = echarts.init(document.querySelector('#main1'))
      // var data = [
      //   { station: '人的不安全因素', value: 20 },
      //   { station: '物的不安全状态', value: 60.8 },
      //   { station: '环境的不安全因素', value: 70.2 },
      //   { station: '管理的缺陷', value: 30.8 },
      //   { station: '其他安全隐患', value: 40.6 }
      // ]
      var stationData = []
      var values = []
      for (let i = 0; i < data.length; i++) {
        stationData.push(data[i].LABEL)
        values.push(data[i].HIDDEN_COUNT)
      }
      var MaxData = new Array(data.length).fill(all)
      var seriesName = ['当前', '总计']
      var attackSourcesColor = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#ffae00' },
          { offset: 1, color: '#f4d504' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#48a883' },
          { offset: 1, color: '#00f0ff' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#06ff00' },
          { offset: 1, color: '#eaff00' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#00d2ff' },
          { offset: 1, color: '#bcf0ff' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#55c49f' },
          { offset: 1, color: '#fff080' }
        ])
      ]
      function dataFormat(data) {
        var arr = []
        data.forEach(function(item, i) {
          arr.push({
            value: item,
            itemStyle: {
              color: attackSourcesColor[i]
            }
          })
        })
        return arr
      }
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '0%',
          right: '2%',
          bottom: '3%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: '13'
              },
              formatter: (value) => {
                if (value != 0) {
                  return ((value / all) * 100).toFixed(2) + '%'
                } else {
                  return '0%'
                }
              }
            },
            data: dataFormat(values)
          },
          {
            type: 'category',
            inverse: true,
            position: 'left',
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              interval: 0,
              inside: true,
              color: '#fff',
              align: 'left',
              verticalAlign: 'bottom',
              lineHeight: 42,
              fontSize: 14
            },
            data: dataFormat(stationData)
          }
        ],
        series: [
          {
            zlevel: 1,
            name: seriesName[0],
            type: 'bar',
            barWidth: 20,
            data: dataFormat(values),
            align: 'center',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: false
            }
          },
          {
            name: seriesName[1],
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: MaxData,
            itemStyle: {
              normal: {
                color: 'rgba(200,200,200,.3)',
                fontSize: 12,
                barBorderRadius: 30
              }
            }
          }
        ]
      }
      myChart1.setOption(option)
    },

    initEcharts2(superInsCount) {
      myChart2 = echarts.init(document.querySelector('#main2'))
      const option = {
        title: [
          {
            text: '安全环保检查次数',
            left: '43%',
            bottom: '0%',
            textAlign: 'center',
            backgroundColor: 'rgba(6,21,141,0.7)',
            borderWidth: 1,
            borderRadius: 30,
            padding: [5, 10],
            borderColor: '#0f3286',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '12',
              color: '#fff',
              textAlign: 'center'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        graphic: [{
          show: true,
          type: 'text',
          left: 'center',
          top: '25%',
          style: {
            text: superInsCount[0].COUNT + superInsCount[1].COUNT + superInsCount[2].COUNT,
            textAlign: 'center',
            fill: '#ffffff',
            fontSize: '20px'
          }
        }, {
          show: true,
          type: 'text',
          left: 'center',
          top: '30%',
          style: {
            text: '\n\n次',
            fill: '#ffffff',
            textAlign: 'center',
            fontSize: '12px',
            textDecoration: 'underline'
          }
        }],
        series: [
          {
            name: '发起检查数',
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['75%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#031845',
              borderWidth: 3
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: superInsCount[0].COUNT,
                name: superInsCount[0].INSPECTION_SUBJECT,
                itemStyle: { color: superInsCount[0].ITEMCOLOR }
              },
              {
                value: superInsCount[1].COUNT,
                name: superInsCount[1].INSPECTION_SUBJECT,
                itemStyle: { color: superInsCount[1].ITEMCOLOR }
              },
              {
                value: superInsCount[2].COUNT,
                name: superInsCount[2].INSPECTION_SUBJECT,
                itemStyle: { color: superInsCount[2].ITEMCOLOR }
              }
            ]
          }
        ]
      }
      myChart2.setOption(option)
    },
    initEcharts3(superHiddenCount) {
      myChart3 = echarts.init(document.querySelector('#main3'))
      const option = {
        title: [
          {
            text: '发现隐患数',
            left: '43%',
            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'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        graphic: [{
          show: true,
          type: 'text',
          left: 'center',
          top: '25%',
          style: {
            text: superHiddenCount[0].COUNT + superHiddenCount[1].COUNT + superHiddenCount[2].COUNT,
            textAlign: 'center',
            fill: '#ffffff',
            fontSize: '20px'
          }
        }, {
          show: true,
          type: 'text',
          left: 'center',
          top: '30%',
          style: {
            text: '\n\n项',
            fill: '#ffffff',
            textAlign: 'center',
            fontSize: '12px',
            textDecoration: 'underline'
          }
        }],
        series: [
          {
            name: '发起检查数',
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['75%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#031845',
              borderWidth: 3
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: superHiddenCount[0].COUNT,
                name: superHiddenCount[0].INSPECTION_SUBJECT,
                itemStyle: { color: superHiddenCount[0].ITEMCOLOR }
              },
              {
                value: superHiddenCount[1].COUNT,
                name: superHiddenCount[1].INSPECTION_SUBJECT,
                itemStyle: { color: superHiddenCount[1].ITEMCOLOR }
              },
              {
                value: superHiddenCount[2].COUNT,
                name: superHiddenCount[2].INSPECTION_SUBJECT,
                itemStyle: { color: superHiddenCount[2].ITEMCOLOR }
              }
            ]
          }
        ]
      }
      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: 1,
                length2: 1
              }
            },
            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: '#fff'
          }
        },
        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: '#fff'
                }
              }
            },
            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: 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: '#fff'
    //       },
    //       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: 'rgba(255,255,255,0.3)'
    //         }
    //       }
    //     },
    //     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)
    // },
    initEcharts6(xAxis, xYxis1, xYxis2, xYxis3, xYxis4) {
      myChart6 = echarts.init(document.querySelector('#main6'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // title: {
        //   text: '安全环保检查情况统计',
        //   textStyle: {
        //     color: '#33dcfd',
        //     fontSize: 16
        //   },
        //   left: '0',
        //   top: '-4'
        // },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '35%',
          containLabel: true
        },
        legend: {
          data: ['股份安全环保检查', '分子公司安全环保自查', '股份发现隐患数量', '分子公司自查发现问题'],
          right: 0,
          top: 20,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 24,
          itemHeight: 10
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#02cafd'
            }
            // rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          }
        },
        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
          },
          {
            name: '港股公司检查发现隐患数',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FF0066'
                  },
                  {
                    offset: 1,
                    color: '#F73809'
                  }
                ])
              }
            },
            data: xYxis3
          },
          {
            name: '分子公司检查发现隐患数',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#421AE6'
                  },
                  {
                    offset: 1,
                    color: '#E61AE6'
                  }
                ])
              }
            },
            data: xYxis4
          }
        ]
      }
      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 = {
        title: {
          left: 'center'
        },
        tooltip: {
          // trigger: 'item',
          formatter: '{b}：{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'bottom'
        },
        color: ['#F14040', '#41F040', '#F1F040',
          '#4140F0', '#41F0F0', '#F140F0'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: dataValue[0], name: '动火作业' },
              { value: dataValue[1], name: '临时用电' },
              { value: dataValue[2], name: '吊装作业' },
              { value: dataValue[3], name: '盲板作业' },
              { value: dataValue[4], name: '高处作业' },
              { value: dataValue[5], name: '有限空间作业' }
            ]
          }
        ]
      }
      myChart7.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
@mixin title {
  position: relative;
  .title {
    position: absolute;
    left: 0;
    top: 0;
    color: #33dcfb;
    font-size: 16px;
    display: flex;
    align-items: center;
    div{
      margin-right: 10px;
    }
    .el-button{
      background-color: rgba(65, 106, 234, 0.38);
      border: 1px solid rgba(15, 185, 247, 0.55);
      color: #fff;
      font-size: 12px;
      padding: 5px 10px;
    }
  }
}

.container {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/BI/bodybg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #c2d8e5;
  font-size: 14px;

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

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

    .options {
      display: flex;
      align-items: center;
      position: absolute;
      right: 30px;
      top: 37px;
      height: 18px;
      line-height: 18px;
      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: 162px;
        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: 10px;
            }

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

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

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

      .center {
        margin-top: 15px;
        width: 492px;
        height: 204px;
        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: 32%;
            text-align: center;
            background-color: #051e57;
            margin-left: 15px;
            padding: 30px 30px;

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

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

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

        .content {
          padding: 30px 25px 15px 25px;

          .tabs {
            display: flex;

            .tab {
              width: 118px;
              height: 32px;
              line-height: 32px;
              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: 22px;
            height: 342px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;

            div {
              padding: 7px 0;
              display: flex;
              justify-content: space-between;

              &:nth-child(odd) {
                background-color: rgba(29, 55, 124, 0.5);
              }

              &:first-child {
                color: #12a7df;
              }

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

    .center {
      width: 822px;

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

        //.map {
        //  width: 100%;
        //
        //  .baidu-map {
        //    width: 100%;
        //    height: 244px;
        //  }
        //}
        .content {
          display: flex;

          .block1 {
            width: calc(50% - 0.5px);
            padding-right: 5%;

            .subtitle {
              font-weight: bold;
              font-size: 16px;
              border-bottom: 1px solid #103e6b;
              padding-bottom: 13px;
              padding-top: 10px;
              padding-left: 5px;
              margin-left: 10px;
              color: #fff;
            }

            .text {
              font-size: 14px;
              padding-left: 15px;
            }

            .trapezoid {
              margin-left: 15px;
              width: calc(100% - 15px);
              height: 75px;
              margin-top: 2px;
              font-size: 12px;
              color: #fff;
              text-align: center;
              line-height: 75px;
              cursor: pointer;
              position: relative;
              z-index: 0;
              &:hover {
                transform: scale(1.05);
                transition: 0.3s;
                z-index: 1;
              }

              &.one {
                margin-top: 20px;
                clip-path: polygon(50% 0%, 50% 0%, 62.5% 100%, 37.5% 100%);
                line-height: unset;
                padding-top: 37px;
                background-color: #ef4545;
              }

              &.two {
                font-size: 13px;
                clip-path: polygon(37.5% 0%, 62.5% 0%, 75% 100%, 25% 100%);
                background-color: #f97a1d;
              }

              &.three {
                font-size: 17px;
                clip-path: polygon(25% 0%, 75% 0%, 87.5% 100%, 12.5% 100%);
                background-color: #fac858;
              }

              &.four {
                font-size: 25px;
                clip-path: polygon(12.5% 0%, 87.5% 0%, 100% 100%, 0% 100%);
                background-color: #416aea;
              }
            }
            .content_title{
              font-weight: bold;
              font-size: 16px;
              padding-top: 10px;
              color: #fff;
              text-align: center;
            }
          }

          .line {
            margin-top: 47px;
            width: 1px;
            height: 410px;
            background-color: #334774;
          }

          .block2 {
            width: calc(50% - 0.5px);
            padding-left: 5%;

            .subtitle {
              font-weight: bold;
              font-size: 16px;
              border-bottom: 1px solid #103e6b;
              padding-bottom: 13px;
              padding-top: 10px;
              padding-left: 5px;
              margin-left: 10px;
              color: #fff;
            }
            #main1 {
              margin-top: 9px;
              width: 100%;
              height: 429px;
            }
          }
        }
      }

      .bottom {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

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

          #main2, #main3 {
            width: 100%;
            height: 112px;
          }

          #main3 {
            margin-top: 9px;
          }
        }

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

          .content {
            display: flex;
            justify-content: space-between;

            #main4 {
              width: 48%;
              height: 240px;
            }

            .table {
              width: 48%;
              text-align: center;
              margin: 22px 0 0 22px;
              height: 150px;

              div {
                margin-top: 1px;
                padding: 7px 0;
                background-color: rgba(29, 55, 124, 0.5);
                display: flex;
                justify-content: space-between;

                &:first-child {
                  color: #12a7df;
                }

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

    .right {
      width: 492px;

      .top {
        width: 492px;
        height: 88px;
        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: 15px;
        width: 492px;
        height: 187px;
        background-image: url("../../assets/BI/rightbg2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 20px;
        @include title;

        #main5 {
          width: 100%;
          height: 187px;
        }
      }

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

        #main6 {
          width: 100%;
          height: 186px;
        }
      }

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

        #main7 {
          width: 100%;
          height: 335px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.bi-different-dialog {
  .el-dialog__wrapper {
    overflow: visible;
  }

  .el-dialog {
    border: 1px solid rgba(64, 156, 255, 0.3);
    border-radius: 10px;
    background-color: rgba(2, 30, 81, 0.851);
    padding: 22px 34px;

    .el-dialog__header {
      border-bottom: 2px solid #316b8b;
      padding: 0 0 10px;

      .el-dialog__title {
        color: #fff;
      }

      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }

    .el-dialog__body {
      font-size: 14px;
      color: #fff;
      overflow-y: auto;
      max-height: 60vh;

      //设置滚动条样式
      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: rgba(2, 30, 81, 0.851);
      }

      &::-webkit-scrollbar-track {
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}
</style>
