<template>
  <div class="dataView-content">
    <!-- <dv-loading>Loading...</dv-loading> -->
    <div class="data-header">
      <div class="total-block">
        <div>
          <div class="total-label"><i class="cor1" v-for="item in 3" :key="item">|</i>用户总数</div>
          <div class="total-value cor1">{{ userTotal }}</div>
        </div>
        <div>
          <div class="total-label"><i class="cor2" v-for="item in 3" :key="item">|</i>试点单位数</div>
          <div class="total-value cor2">{{ dwTotal }}</div>
        </div>
        <div>
          <div class="total-label"><i class="cor3" v-for="item in 3" :key="item">|</i>设备总数</div>
          <div class="total-value cor3">{{ devTotal }}</div>
        </div>
      </div>
      <div class="page-title">
        <!-- 智享亿家投递大数据 -->
      </div>
      <div>
        <div class="border-box-content">
          <div>区域</div>
          <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
          <option value="">省</option>
          <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
        </select> -->
          <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
            <option value="">全部</option>
            <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}
            </option>
          </select>
          <!-- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
          <option value="">全部区/县</option>
          <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
        </select> -->
          <a-icon
            @click="isFullscreenMap"
            :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
            :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
        </div>
      </div>
    </div>
    <div class="data-body">
      <div class="b-middle">
        <div>
          <dv-border-box-8 ref="map" style="padding: 10px;">
            <div class="lajiliang">
              <div class="laji-title">垃圾产生量</div>
              <div class="laji-item">
                <div class="cor1">可回收垃圾</div>
                <div>{{ rubbishWeightData.RECYCLING }} kg</div>
              </div>
              <div class="laji-item">
                <div class="cor2">其它垃圾</div>
                <div>{{ rubbishWeightData.GATHER_OTHER }} kg</div>
              </div>
              <div class="laji-item">
                <div class="cor3">厨余垃圾</div>
                <div>{{ rubbishWeightData.GATHER_KITCHEN }} kg</div>
              </div>
              <div class="laji-item">
                <div class="cor4">建筑垃圾</div>
                <div>{{ rubbishWeightData.GATHER_BUILDING }} kg</div>
              </div>
              <div class="laji-item">
                <div class="cor5">有害垃圾</div>
                <div>{{ rubbishWeightData.HARM }} kg</div>
              </div>
              <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>kg</div>
            </div>
            <div id="map" :style="{height: '100%'}"></div>
          </dv-border-box-8>
        </div>
        <div>
          <div>
            <dv-border-box-13 ref="con1">
              <div id="con1" style="width: 100%;height: 100%;"></div>
            </dv-border-box-13>
          </div>
          <div>
            <dv-border-box-13 ref="con2">
              <div id="con2" style="width: 100%;height: 100%;"></div>
            </dv-border-box-13>
          </div>
          <div>
            <dv-border-box-13 ref="con4">
              <div id="con4" style="width: 100%;height: 100%;"></div>
            </dv-border-box-13>
          </div>
        </div>
      </div>
      <div class="b-right">
        <!-- 设备比例分布 -->
        <div>
          <dv-border-box-13 ref="con3">
            <div id="con3" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
        <!-- 各分类垃圾量分布 -->
        <div>
          <dv-border-box-13 ref="con5">
            <div id="con5" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
        <!-- 各机构投递量分布比例 -->
        <div>
          <dv-border-box-13 ref="con6">
            <div id="con6" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {
  getUserTotal,
  getDeviceTotal,
  getMapStation
} from '@/api/nodeMap.js'
import {
  getNewRegister,
  getTimeSharingLog,
  getDeliveryTop,
  getHeatMapData,
  getLocationCode,
  getRubbishTypeTotal,
  querySumWeight,
  labelWeightPercent,
  devicePercent,
  getDwTotal
} from '@/api/borard.js'
import {
  getProvince,
  getCityByPro,
  getDistrictByCity
} from '@/api/station'
import moment from 'moment'
import getDate from '@/libs/getDate.js'
export default {
  name: 'DataBoratd',
  data () {
    return {
      queryParam: {
        provinceCode: '610000', //  省
        cityCode: '', // 市
        districtCode: '' // 区
      },
      addrProvinceList: [{
        code: '610000',
        id: '610000',
        isOpen: '0',
        name: '陕西省',
        parentId: '100000',
        parentIds: '100000',
        sort: 27,
        type: '2'
      }], //  省下拉
      addrCityList: [{
        'id': '610100',
        'sort': 1,
        'parentId': '610000',
        'parentIds': '100000,610000',
        'isOpen': '0',
        'name': '西安市',
        'code': '610100'
      },
      {
        'id': '610400',
        'sort': 4,
        'parentId': '610000',
        'parentIds': '100000,610000',
        'isOpen': '0',
        'name': '咸阳市',
        'code': '610400'
      }
      ], //  市下拉
      addrDistrictList: [], //  区下拉
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      userTotal: 0,
      devTotal: 0,
      dwTotal: 0,
      isMapFull: false,
      map: null, // 地图对象
      markerLayer: null, // 地图点标记对象
      infoWindow: null, // 地图信息窗口对象
      beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
      endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59'), // 查询结束时间
	  rubbishWeightData: {
		  'GATHER_OTHER': 0, // 其它垃圾
		  'GATHER_KITCHEN': 0, // 厨余垃圾
		  'GATHER_BUILDING': 0, // 建筑垃圾
		  'HARM': 0, // 有害垃圾
		  'RECYCLING': 0 // 可回收垃圾
	  }, // 垃圾产生量数据
	  rubbishWeightTotal: 0 // 垃圾产生量数据总计
    }
  },
  methods: {
    // 获取省列表'
    getProvinceList () {
      getProvince().then(res => {
        if (res.status == 200) {
          this.addrProvinceList = res.data || []
        } else {
          this.addrProvinceList = []
        }
      })
    },
    // 获取城市列表
    getCityList (e) {
      if (e.target.value == '') return
      this.addrCityList = []
      this.addrDistrictList = []
      this.queryParam.cityCode = ''
      this.queryParam.districtCode = ''
      this.getCityListRequest(e.target.value)
    },
    getCityListRequest (val) {
      getCityByPro({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrCityList = res.data || []
        } else {
          this.addrCityList = []
        }
      })
    },
    // 获取区县列表
    getAreaList (e) {
      if (e.target.value == '') {
        this.initChart()
        return
      }
      this.addrDistrictList = []
      this.queryParam.districtCode = ''
	  // 地图经纬度
	  this.getLocationCode()
      this.getAreaListRequest(e.target.value)
      this.initChart()
    },
    getAreaListRequest (val) {
      getDistrictByCity({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrDistrictList = res.data || []
        } else {
          this.addrDistrictList = []
        }
      })
    },
    // 全屏
    fullScreen () {
      var element = document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      }
    },
    // 退出全屏
    exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    // 地图是否全屏展示
    isFullscreenMap () {
      this.isMapFull = !this.isMapFull
      if (this.isMapFull) {
        this.fullScreen()
      } else {
        this.exitFullscreen()
      }
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
      this.chart4.resize()
    },
    formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    },
    // 获取用户总数
    getUser () {
      getUserTotal({}).then(res => {
        const data = res.data || 0
        this.userTotal = data
      })
    },
    // 获取设备总数
    getDevice () {
      getDeviceTotal({}).then(res => {
        const data = res.data || 0
        this.devTotal = data
      })
    },
    // 获取试点单位数（网点数量）
    getDwTotal () {
	  getDwTotal({}).then(res => {
	    const data = res.data.count || 0
	    this.dwTotal = data
	  })
    },
    // 获取新用户注册量
    getNewRegister () {
      const params = {
        beginRegisterTime: this.beginDate,
        endRegisterTime: this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getNewRegister(params).then(res => {
        if (res.status == 200) {
          const xData = res.data.dateTime
          const yData = res.data.registerNum
          const arr = []
          yData.map(item => {
            arr.push(Number(item))
          })
          this.initChart1(xData, arr)
        }
      })
    },
    // 获取分时投递
    getTimeSharingLog () {
      const params = {
        'beginDeliveryDate': this.beginDate,
        'endDeliveryDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getTimeSharingLog(params).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.initChart2(res.data)
        }
      })
    },
    // 排行榜
    getDeliveryTop () {
      const params = {
        'findRubbishDataBeginDate': this.beginDate,
        'findRubbishDataEndDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getDeliveryTop(params).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.initChart3(res.data)
        }
      })
    },
    // 设备分布比例
    getDevicePercent () {
      devicePercent({}).then(res => {
        console.log(res, '------------设备分布比例')
        const data = res.data || []

        data.forEach(item => {
          item.name = item.LABEL_NAME
          item.value = item.DEVCIE_NUM
        })
        const con3 = document.getElementById('con3')
        const chart3 = echarts.init(con3)
        const option3 = this.initPie(chart3, '设备分布比例', data, '个')
        chart3.setOption(option3)
        this.chart3 = chart3
        this.chart3.resize()
      })
    },
    // 各机构投递量分布比例
    getLabelWeightPercent () {
      labelWeightPercent({}).then(res => {
        console.log(res, '-------各机构投递量分布比例')
        if (res.status == 200) {
          const data = res.data || []
          data.forEach(item => {
			  item.name = item.labelName
			  item.value = Math.round(item.weight / 1000)
          })
          const con6 = document.getElementById('con6')
          const chart6 = echarts.init(con6)
          const option6 = this.initPie(chart6, '各机构投递量分布比例', data, '吨')
          chart6.setOption(option6)
          this.chart6 = chart6
          this.chart6.resize()
        }
      })
    },
    // 垃圾产生量
    getRubbishWeight () {
      querySumWeight({}).then(res => {
        console.log(res, '垃圾产生量')
        if (res.status == 200) {
		  Object.keys(this.rubbishWeightData).map(item => {
			  this.rubbishWeightData[item] = this.formatter(Math.round((res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000))
		  })
		  this.rubbishWeightTotal = this.formatter(Math.round(res.data.total / 1000))
        } else {
          this.rubbishWeightTotal = 0
		  this.rubbishWeightData = {
			  'GATHER_OTHER': 0, // 其它垃圾
			  'GATHER_KITCHEN': 0, // 厨余垃圾
			  'GATHER_BUILDING': 0, // 建筑垃圾
			  'HARM': 0, // 有害垃圾
			  'RECYCLING': 0 // 可回收垃圾
		  }
        }
      })
    },
    // 各分类垃圾量分布
    getRubbishTypeChart () {
      getRubbishTypeTotal({}).then(res => {
        console.log(res)
        let data = []
        if (res.status == 200 && res.data) {
          // this.initChart3(res.data)
		  Object.keys(this.rubbishWeightData).map(item => {
			  const p = res.data.find(key => key.rubbishType == item)
            if (p) {
              data.push({
                name: p.rubbishTypeDict,
                value: p.rubbishWeight
              })
            }
		  })
        } else {
          data = [{
			  name: '可回收垃圾',
			  value: 0
          },
          {
			  name: '其他垃圾',
			  value: 0
          },
          {
			  name: '厨余垃圾',
			  value: 0
          },
          {
			  name: '建筑垃圾',
			  value: 0
          },
          {
			  name: '有害垃圾',
			  value: 0
          }
          ]
        }
        const con5 = document.getElementById('con5')
        const chart5 = echarts.init(con5)
        const option = this.initPie(chart5, '各分类垃圾量分布', data)
        chart5.setOption(option)
        this.chart5 = chart5
        this.chart5.resize()
      })
    },
    getLocationCode () {
      const cityCode = this.queryParam.cityCode
      const districtCode = this.queryParam.districtCode
      getLocationCode({
        keyword: districtCode || cityCode
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          if (this.map) {
            this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
          } else {
            this.initMap(res.data)
          }
        }
      })
    },
    // 初始化地图
    initMap (res) {
      // 定义地图中心点坐标 默认定位在陕西省咸阳市
      var center = new TMap.LatLng(res.lat, res.lng)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.map = new TMap.Map(document.getElementById('map'), {
        center: center, // 设置地图中心点坐标
        mapStyleId: 'style3',
        zoom: 13, // 设置地图缩放级别
        pitch: 0, // 设置俯仰角
        showControl: false,
        rotation: 45 // 设置地图旋转角度
      })
      // 创建并初始化MultiMarker 点标记
      this.markerLayer = new TMap.MultiMarker({
        map: this.map, // 指定地图容器
        // 样式定义
        styles: {
          // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          'myStyle': new TMap.MarkerStyle({
            'width': 40, // 点标记样式宽度（像素）
            'height': 40, // 点标记样式高度（像素）
            'src': '../ldt.png', // 图片路径
            // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            'anchor': {
              x: 8,
              y: 15
            }
          })
        },
        // 点标记数据数组
        geometries: []
      })
      // 初始化infoWindow
      this.infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: new TMap.LatLng(39.984104, 116.307503),
        offset: {
          x: 0,
          y: -32
        } // 设置信息窗相对position偏移像素
      })
      this.infoWindow.close() // 初始关闭信息窗关闭
      this.markerLayer.on('mousemove', this.showMarkTitle)
      // 监听地图加载完成
      // this.map.on('tilesloaded', this.getMapMark)
    },
    // 获取热力图
    getHeatMapData () {
      // 初始化热力图并添加至map图层
      const heat = new TMap.visualization.Heat({
        max: 180, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 40, // 峰值高度
        gradientColor: { // 渐变颜色
          0.2: '#0a8b4d',
          0.3: '#57e0a5',
          0.5: '#05a8a4'
        },
        radius: 30 // 最大辐射半径
      }).addTo(this.map)
      const params = {
        'beginDeliveryDate': this.beginDate,
        'endDeliveryDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getHeatMapData(params).then(res => {
        if (res.status == 200) {
          const ret = []
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].lat <= 90) {
              ret.push({
                count: res.data[i].deliveryTimes,
                lat: res.data[i].lat,
                lng: res.data[i].lng
              })
            }
          }
          // console.log(ret)
          heat.setData(ret) // 设置数据
        }
      })
    },
    // 获取地图点坐标
    getMapMark () {
      this.getHeatMapData()
      getMapStation({
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }).then(res => {
        const list = res.data || []
        const data = []
        list.map((item, index) => {
          if (item.lat <= 85.051128 && item.lat >= -85.051128) {
            const p = {
              'id': item.id, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              'styleId': 'myStyle', // 指定样式id
              'position': new TMap.LatLng(Number(item.lat), Number(item
                .lng)), // 点标记坐标位置
              'properties': { // 自定义属性
                'title': item.name
              }
            }
            data.push(p)
          }
        })
        // 增加点标记
        this.markerLayer.add(data)
      })
    },
    // 显示地图标记点名称
    showMarkTitle (evt) {
      this.infoWindow.open() // 打开信息窗
      this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
      this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
    },
    // 初始化图表
    initChart () {
      // 用户总数
      this.getUser()
      // 设备总数
      this.getDevice()
	  // 网点总数
      this.getDwTotal()
      // 新注册用户
      this.getNewRegister()
      // 分时投递
      this.getTimeSharingLog()
      // 垃圾产生量
      this.getRubbishWeight()
      // 各分类垃圾量分布
      this.getRubbishTypeChart()
      // 设备分布比例
	  this.getDevicePercent()
      // 各机构投递量分布比例
      this.getLabelWeightPercent()
      // 网点投递量排名
      this.getDeliveryTop()
    },
    // 排行榜
    initChart3 (res) {
      const con4 = document.getElementById('con4')
      const chart4 = echarts.init(con4)
      const option4 = {
        title: {
          text: '网点投递量排名',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          formatter: '{b0}: {c0}kg'
        },
        grid: {
          left: 15,
          right: 15,
          bottom: 20,
          top: 85,
          containLabel: true
        },
        xAxis: {
          data: res.stationName,
		  show: false
        },
        yAxis: {
          name: 'kg',
          type: 'value'
        },
        series: [{
          data: res.deliveryWeight,
          type: 'bar',
          barWidth: 30,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            color: '#37a2da',
            shadowColor: '#246d91',
            shadowOffsetX: 8,
            shadowOffsetY: 0
          }
        }]
      }
      chart4.setOption(option4)
      this.chart4 = chart4
      this.chart4.resize()
    },
    // 分时投递记录
    initChart2 (res) {
      const con2 = document.getElementById('con2')
      const chart2 = echarts.init(con2)
      const series = []
      const arr = res.dayKey.slice(res.dayKey.length - 3)
      console.log(arr)
      for (let i = 0; i < arr.length; i++) {
        series.push({
          name: arr[i],
          data: res.value[arr[i]],
          type: 'line',
          stack: '投递量',
          smooth: true,
          barWidth: 10,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          }
        })
      }
      const option2 = {
        title: {
          text: '分时投递量',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          formatter: '{b0}时: {c0}kg'
        },
        grid: {
          left: 20,
          right: 40,
          bottom: 20,
          top: 85,
          containLabel: true
        },
        legend: {
          data: arr,
          orient: 'vertical',
          textStyle: {
            fontSize: 10,
            color: '#abd7ff'
          },
          top: 15,
          left: 'right'
        },
        xAxis: {
          name: '时',
          type: 'category',
          data: res.hourKey,
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: {
          name: 'kg',
          type: 'value',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        series: series
      }
      chart2.setOption(option2)
      this.chart2 = chart2
      this.chart2.resize()
    },
    // 初始化新用户注册量
    initChart1 (xData, yData) {
      const con1 = document.getElementById('con1')
      const chart1 = echarts.init(con1)
      const option1 = {
        title: {
          text: '新用户注册量',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          formatter: '{b0}日: {c0}人'
        },
        grid: {
          left: 15,
          right: 60,
          bottom: 20,
          top: 85,
          containLabel: true
        },
        xAxis: {
          name: '日期',
          data: xData,
          type: 'category',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: {
          name: '用户',
          type: 'value',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        series: [{
          data: yData,
          type: 'line',
          smooth: true,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          lineStyle: {
            color: 'rgba(55, 162, 218, 0.9)'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
              }]
            }
          }
        }]
      }
      chart1.setOption(option1)
      this.chart1 = chart1
      this.chart1.resize()
	  window.addEventListener('pageshow', this.chart1.resize())
	  on(window, 'pageshow', this.chart1.resize())
    },
    // 初始化饼图 title: 标题 data：数据 bit：单位
    initPie (chart, title, data, bit) {
	 const legend = []
	 if (bit) {
        data.map(item => {
			 const p = `${item.name}: ${item.value}${bit}`
			 legend.push(p)
        })
	 }
      const option = {
        color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
        title: {
          text: title,
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: `{b} : {d}%`
        },
        legend: {
		  orient: 'horizontal',
		  left: 'center',
		  bottom: '5',
		  padding: 5,
		  textStyle: {
		    color: '#abd7ff',
            fontSize: 10
		  },
		  show: !!bit,
		  formatter: function (name) {
			  if (bit) {
              const p = data.find(item => item.name == name)
              return name + (p ? ('：' + p.value + bit) : '')
			  }
		  }
        },
        series: [{
          type: 'pie',
          radius: ['30%', '50%'],
          startAngle: 75,
          top: 50,
          avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
          label: {
            normal: {
              formatter: params => {
                // console.log(params, 'ppppppp')
                return (
                  '{name|' + params.name + '}{value|' +
										params.percent + '%' + '}'
                )
              },
              padding: [0, -70, 25, -70],
              rich: {
                name: {
                  fontSize: 12,
                  padding: [0, 4, 0, 4],
                  color: '#999'
                },
                value: {
                  fontSize: 12,
                  color: '#999'
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 70,
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          },
          data: data,
          insideLabel: {
            show: true
          }
        }]
      }
	  return option
    }
  },
  watch: {

  },
  mounted () {
    const that = this
    // 默认定位在陕西省咸阳市
    this.initMap({ lat: 34.32932, lng: 108.70929 })
    window.onresize = () => {
      return (() => {
        that.chart1.resize()
        that.chart2.resize()
        that.chart3.resize()
        that.chart4.resize()
        that.chart5.resize()
        that.chart6.resize()
      })()
    }
    // 监听页面刷新，重置边框宽高
    window.addEventListener('pageshow', (e) => {
      // console.log(e, this.chart1, 'eeeeeeeeeeee')
      this.$refs.map.initWH()
      this.$refs.con1.initWH()
      this.$refs.con2.initWH()
      this.$refs.con3.initWH()
      this.$refs.con4.initWH()
      this.$refs.con5.initWH()
      this.$refs.con6.initWH()
    })
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getMapMark()
      setTimeout(() => {
        vm.initChart()

        if (vm.queryParam.cityCode != '') {
          vm.getAreaListRequest(vm.queryParam.cityCode)
        }
      }, 150)
    })
  },
  beforeRouterLeave (to, from, next) {
    next(vm => {
      // 销毁地图
      vm.map.destroy()
      vm.map = null
    })
  }
}
</script>

<style lang="less">
	.dataView-content {
		width: 100%;
		height: 100%;
		min-height: 600px;
		background-image: url(../../assets/dataViewBg.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;

		.data-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-image: url(../../assets/headBg.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto 80%;
			padding: 10px 0 0;

			.total-block {
				width: 35%;
				display: flex;
				align-items: center;
				justify-content: center;

				>div {
					width: 30%;
					padding-right: 10px;
				}

				.total-label {
					color: #fff;
					text-align: left;
					display: flex;

					i {
						transform: rotate(330deg);
						display: inline-block;
						font-size: 12px;
						margin: 0 1px;

						&:last-child {
							margin-right: 10px;
						}
					}
				}

				.total-value {
					font-size: 22px;
					font-weight: bold;
				}

				.cor1 {
					color: #00ff84;
				}

				.cor2 {
					color: #d7ff00;
				}

				.cor3 {
					color: #00c0ff;
				}
			}

			.page-title {
				width: 50%;
				flex-grow: 1;
				color: #00aaff;
				font-size: 32px;
				text-align: center;
			}

			>div {
				padding: 15px;

				&:last-child {
					width: 25%;
					color: #0ed3ff;

					.border-box-content {
						font-size: 18px;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-left: 50px;

						select {
							background: #021931;
							border: 1px solid #3e566d;
							min-width: 30%;
							padding: 2px 20px;
							margin: 0 10px;
							box-shadow: inset 0 0 2px #69b2ff;
							border-radius: 60px;
						}
					}
				}
			}
		}

		.data-body {
			flex-grow: 1;
			display: flex;
			padding: 0 15px 15px;

			.b-right {
				width: 25%;
				display: flex;
				padding: 5px;
				flex-direction: column;
				justify-content: space-around;

				>div {
					height: 33%;
				}
			}

			.b-middle {
				width: 75%;
				padding: 5px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				>div {
					&:first-child {
						height: 66%;

						.lajiliang {
							width: 23%;
							position: absolute;
							padding: 15px;
							background: rgba(255, 255, 255, 0.3);
							border-radius: 6px;
							left: 20px;
							top: 20px;
							z-index: 1000;
							color: #fff;

							.laji-title {
								text-align: center;
								padding: 0 0 10px;
							}

							.laji-item {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin: 15px 0;

								>div {
									&:first-child {
										border-radius: 30px;
										padding: 2px 10px;
										font-size: 12px;
										width: 50%;
										text-align: center;
									}
								}

								.cor1 {
									background-color: #c2523f;
								}

								.cor2 {
									background-color: #c59b16;
								}

								.cor3 {
									background-color: #7561af;
								}

								.cor4 {
									background-color: #418ec6;
								}

								.cor5 {
									background-color: #20ce7a;
								}
							}
						}
					}

					&:last-child {
						height: 33%;
						display: flex;

						>div {
							width: 33.3%;
							justify-content: space-around;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>
