fj-dc-ui/.svn/pristine/9b/9b61606964e525de043ef57c5a053a19983af231.svn-base

<!--  -->
<template>
  <div class="mainDiv">
      <div class="dc-title">水利监管</div>
      <div class="dc-left">
         <div class="dc-left-box">
             <div class="box-title">监管动态</div>
             <div class="box-charts">
                <ul id="box-ul">
                    <li v-if="messageList!=null && messageList.length>0"   v-for="(item,index) in messageList">
                      <div class="dot-img"><span></span></div>
                      <div class="dot-content">
                        <p>{{item.title}}</p>
                        <p>{{formatDateTime(item.intm)}}</p>
                      </div>
                    </li>
                </ul>
               <el-pagination
                 class="pager-new"
                 background
                 layout="prev, pager, next"
                 :pager-count="5"
                 :current-page="pageNum"
                 :page-size="pageSize"
                 :total="total"
                 @current-change="pageIndexChange">
               </el-pagination>
             </div>
         </div>
         <div class="dc-left-box">
           <div class="box-title">问题类别</div>
           <div class="box-charts">
             <div class="chart-tj" id="chart1"></div>
           </div>
         </div>
      </div>
      <div class="dc-center">
        <ul>
          <li>
             <div class="center-title">批次</div>
             <div class="center-content">
                <p>{{statiscsData.BISINSPALLSIZE}}</p>
                <p>本月+{{statiscsData.BISINSPALLSIZEMONTH}}</p>
             </div>
          </li>
          <li>
            <div class="center-title">人员</div>
            <div class="center-content">
              <p>{{statiscsData.PERSIZE}}</p>
              <p>本月</p>
            </div>
          </li>
          <li>
            <div class="center-title">类别</div>
            <div class="center-content">
              <p>{{statiscsData.OBJTYPESIZE}}</p>
              <p>本月+{{statiscsData.OBJTYPESIZEMONTH}}</p>
            </div>
          </li>
          <li>
            <div class="center-title">问题数</div>
            <div class="center-content">
              <p>{{statiscsData.PBLMSIZE}}</p>
              <p>本月+{{statiscsData.PBLMSIZEMONTH}}</p>
            </div>
          </li>
          <li>
            <div class="center-title">整改数</div>
            <div class="center-content">
              <p>{{statiscsData.MENDSIZE}}</p>
              <p>本月+{{statiscsData.MENDSIZEMONTH}}</p>
            </div>
          </li>
          <li>
            <div class="center-title">销号数</div>
            <div class="center-content">
              <p>{{statiscsData.PBLMLOGSIZE}}</p>
              <p>本月+{{statiscsData.PBLMLOGSIZEMONTH}}</p>
            </div>
          </li>
        </ul>
        <div class="mapNode">
           <el-select v-model="dateSelect" @change="changeDate" placeholder="请选择" class="dataContent">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
           </el-select>
          <el-select v-model="objType" @change="changeDcType" placeholder="请选择" class="dcTypeContent">
            <el-option
              v-for="item in dcTypeList"
              :key="item.inspType"
              :label="item.inspName"
              :value="item.inspType">
            </el-option>
          </el-select>
           <div id="mapChart"></div>
        </div>
      </div>
      <div class="dc-right">
        <div class="dc-right1-box">
          <div class="box-title1">监管成果</div>
          <div class="box-charts">
            <div class="chart-tj" id="chart2"></div>
          </div>
        </div>
        <div class="dc-right2-box">
          <div class="box-title1">问题分布</div>
          <div class="box-charts">
            <div class="chart-tj" id="chart3" v-if="!isShow"></div>
            <div class="chart-single" id="chart5" v-if="isShow"></div>
          </div>
        </div>
        <div class="dc-right3-box">
          <div class="box-title2">问题严重程度</div>
          <div class="box-charts">
            <div class="chart-tj" id="chart4"></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import axios from 'axios' //引入axios
  import request from "@util/gw_ajax_request.js";
  import {formatDate} from "@util/gw_date.js"
  import {
      getMessage,
      getDcPblmCount,
      getDcANCount,
      getDcType,
      getPblmPro,
      getStatiscsData,
      getDcTbItem
  } from "../../api/homeMainView.js";
  export default {
    components: {
    },
    props: [],
    data() {
      //这里存放数据
      return {
          chart1:null,
          chart2:null,
          chart3:null,
          chart4:null,
          chart5:null,
          chart6:null,
          isShow:false,
          pageNum:1,
          pageSize:5,
          total:0,
          dateSelect:'1',
          objType:'',
          options:[
              {
                  label:"近一个月",
                  value:"1"
              },
              {
                  label:"近三个月",
                  value:"2"
              },
              {
                  label:"近半年",
                  value:"3"
              },
              {
                  label:"近一年",
                  value:"4"
              },
              {
                  name:"有记录至今",
                  value:""
              }
          ],
          messageList:[],
          dcTypeList:[],
          chart1Data:{
              chart1Count:0,
              nameList:[],
              dataList:[]
          },
          chart2Data:{
              dcF:0,
              dcN:0,
          },
          chart3Data:{
              xData:[],
              questionList:[],
              changeList:[],
          },
          chart4Data:{
              qustionTotal:0,
              list:[]
          },
          statiscsData:{
              BISINSPALLSIZE: 0,
              BISINSPALLSIZEMONTH: 0,
              HASOBJSIZE: 0,
              MENDSIZE: 0,
              MENDSIZEMONTH: 0,
              OBJSIZE: 0,
              OBJTYPESIZE: 0,
              OBJTYPESIZEMONTH: 0,
              PBLMLOGSIZE: 0,
              PBLMLOGSIZEMONTH: 0,
              PBLMSIZE: 0,
              PBLMSIZEMONTH: 0,
              PERSIZE: 0
          },
          chart5Data:{
              mapPercent:[],
              geoCoordMap:{},
              geoCoordMapList:[],
          },
          chart6Data:{
              legend:[],
              xAxis:[],
              list:[]
          }
      }
    },
    //监听属性 类似于data概念
    computed: {
        formatDateTime() {
            return formatDate
        },
        organNm() {
            return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
        },
        organCode() {
            return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
        },
        currentOrgId() {
            return localStorage.getItem('currentOrgId') ? localStorage.getItem('currentOrgId') : ''
        },
    },
    //监控data中的数据变化
    watch: {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
       this.initStatiscsData();
       this.initDcType();
       this.initMessage();
       this.initChart1Data();
       this.initChart2Data();
       this.initChart3Data();
       this.$nextTick(function () {
            let _self = this;
            window.onresize = function() {
                _self.resizeChart();
            }
        })
    },
    //方法集合
    methods: {
        resizeChart(){
            this.chart1.resize();
            this.chart2.resize();
            this.chart3.resize();
            this.chart4.resize();
            this.chart5.resize();
            this.chart6.resize();
        },
        toVal(val){
            if(val!=null && val!=""){
                return val.toFixed(2)
            }
            return 0;
        },
        changeDate(){
            this.initChart1Data();
            this.initChart2Data();
            this.initChart3Data();
            this.isShow = false;
            if(this.objType!=null && this.objType!=""){
                this.initChart4Data();
                this.isShow = true;
            }
            this.resizeChart();
        },
        changeDcType(){
            this.initChart1Data();
            this.initChart2Data();
            this.initChart3Data();
            this.isShow = false;
            if(this.objType!=null && this.objType!=""){
                this.initChart4Data();
                this.isShow = true;
            }
            this.resizeChart();
        },
        pageIndexChange(val){
           this.pageNum = val;
           this.initMessage();
        },
        initStatiscsData(){
            var _self = this;
            _self.statiscsData = {
                BISINSPALLSIZE: 0,
                BISINSPALLSIZEMONTH: 0,
                HASOBJSIZE: 0,
                MENDSIZE: 0,
                MENDSIZEMONTH: 0,
                OBJSIZE: 0,
                OBJTYPESIZE: 0,
                OBJTYPESIZEMONTH: 0,
                PBLMLOGSIZE: 0,
                PBLMLOGSIZEMONTH: 0,
                PBLMSIZE: 0,
                PBLMSIZEMONTH: 0,
                PERSIZE: 0
            }
            getStatiscsData().then((res) => {
                if(res.data!=null){
                  _self.statiscsData.BISINSPALLSIZE = res.data.BISINSPALLSIZE;
                  _self.statiscsData.BISINSPALLSIZEMONTH = res.data.BISINSPALLSIZEMONTH;
                  _self.statiscsData.HASOBJSIZE = res.data.HASOBJSIZE;
                  _self.statiscsData.MENDSIZE = res.data.MENDSIZE;
                  _self.statiscsData.MENDSIZEMONTH = res.data.MENDSIZEMONTH;
                  _self.statiscsData.OBJSIZE = res.data.OBJSIZE;
                  _self.statiscsData.OBJTYPESIZE = res.data.OBJTYPESIZE;
                  _self.statiscsData.OBJTYPESIZEMONTH = res.data.OBJTYPESIZEMONTH;
                  _self.statiscsData.PBLMLOGSIZE = res.data.PBLMLOGSIZE;
                  _self.statiscsData.PBLMLOGSIZEMONTH = res.data.PBLMLOGSIZEMONTH;
                  _self.statiscsData.PBLMSIZE = res.data.PBLMSIZE;
                  _self.statiscsData.PBLMSIZEMONTH = res.data.PBLMSIZEMONTH;
                  _self.statiscsData.PERSIZE = res.data.PERSIZE;
                }
            });
        },
        initDcType(){
            var _self = this;
            _self.dcTypeList = [];
            getDcType(_self.currentOrgId).then((res) => {
                if(res!=null && res.data.length>0){
                    _self.dcTypeList = res.data;
                    _self.dcTypeList.push({inspName:"全部",inspType:""})
                }
            });
        },
        initMessage(){
            var _self = this;
            getMessage({pageNum:_self.pageNum,pageSize:_self.pageSize}).then((res) => {
                _self.messageList = res.data.list;
                _self.total = res.data.total;
            });
        },
        initChart1Data(){
            var _self = this;
            _self.chart1Data.nameList = [];
            _self.chart1Data.dataList = [];
            _self.chart1Data.chart1Count = 0;
            getDcPblmCount(_self.dateSelect).then((res) => {
                if(res!=null && res.data.length>0){
                   for(var i = 0;i<res.data.length;i++){
                       _self.chart1Data.nameList.push(res.data[i].NAME);
                       _self.chart1Data.dataList.push(res.data[i].VALUE);
                       _self.chart1Data.chart1Count+=res.data[i].VALUE;
                   }
                }
                _self.initChart1();
            });
        },
        initChart2Data(){
            var _self = this;
            _self.chart2Data.dcF = 0;
            _self.chart2Data.dcN = 0;
            getDcANCount({timeType:_self.dateSelect,objType:_self.objType}).then((res) => {
                if(res.data!=null){
                    _self.chart2Data.dcF = res.data.HASOBJSIZE;
                    _self.chart2Data.dcN = res.data.objSize - res.data.HASOBJSIZE;
                }
                _self.initChart2();
            });
        },
        initChart3Data(){
            var _self = this;
            _self.chart3Data.xData = [];
            _self.chart3Data.questionList = [];
            _self.chart3Data.changeList = [];
            _self.chart4Data.qustionTotal = 0;
            _self.chart4Data.list = [];
            _self.chart5Data.mapPercent = [];
            _self.chart5Data.geoCoordMap = [];
            _self.chart5Data.geoCoordMapList = [];
            getPblmPro({timeType:_self.dateSelect,objType:_self.objType}).then((res) => {
                if(res!=null && res.data.length>0){
                    for(var i = 0;i<res.data.length;i++){
                        if(res.data[i].adName!="合计"){
                            _self.chart3Data.xData.push(res.data[i].adName);
                            _self.chart3Data.questionList.push(res.data[i].pblmSize);
                            _self.chart3Data.changeList.push(res.data[i].mendSize);
                            var obj = {
                                name:res.data[i].adName,
                                value:_self.toVal(res.data[i].mendSizeRant)
                            }
                            _self.chart5Data.mapPercent.push(obj);
                            _self.chart5Data.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd,res.data[i].lttd];
                            _self.chart5Data.geoCoordMapList.push({
                                name:res.data[i].adName,
                                value:res.data[i].pblmSize
                            });
                        }else{
                            _self.chart4Data.qustionTotal = res.data[i].infoPlbm+res.data[i].errorPlbm+res.data[i].warmPlbm;
                            _self.chart4Data.list = [{
                                name: '一般',
                                value: res.data[i].infoPlbm
                            }, {
                                name: '严重',
                                value: res.data[i].errorPlbm
                            }, {
                                name: '较重',
                                value: res.data[i].warmPlbm
                            }];
                        }
                    }
                }
                _self.initChart3();
                _self.initChart4();
                _self.initMapChart();
            });
        },
        initChart4Data(){
            var _self = this;
            _self.chart6Data.legend = [];
            _self.chart6Data.xAxis = [];
            _self.chart6Data.list = [];
            getDcTbItem({timeType:_self.dateSelect,objType:_self.objType}).then((res) => {
                if(res!=null && res.data.length>0){
                    var dataList = res.data;

                    for(var i = 0;i<res.data.length;i++){
                        if(res.data[i].itemName!=null && res.data[i].itemName!="" && _self.chart6Data.legend.indexOf(res.data[i].itemName) < 0){
                            _self.chart6Data.legend.push(res.data[i].itemName);
                        }
                        if(res.data[i].adName!=null && res.data[i].adName!="" && _self.chart6Data.xAxis.indexOf(res.data[i].adName) < 0){
                            _self.chart6Data.xAxis.push(res.data[i].adName);
                        }
                    }
                    for(var i = 0;i<_self.chart6Data.legend.length;i++){
                        var obj = {
                            name: _self.chart6Data.legend[i],
                            type: 'bar',
                            stack: "总量",
                            data: [],
                            barWidth: 8,
                            barGap:1,//柱间距离
                        }
                        for(var j = 0;j< _self.chart6Data.xAxis.length;j++){
                            var val = 0;
                            for(var k = 0;k<dataList.length;k++){
                                if((_self.chart6Data.legend[i] == dataList[k].itemName) && (_self.chart6Data.xAxis[j] == dataList[k].adName)){
                                    val = (dataList[k].pblmSize==null?0:dataList[k].pblmSize);
                                    break;
                                }else{
                                    val = 0;
                                }
                            }
                            obj.data.push(val);
                        }
                        _self.chart6Data.list.push(obj);
                    }
                    _self.initChart5();
                }
            });
        },
        initChart1(){
            this.chart1 = echarts.init(document.getElementById('chart1'));
            var option = {
                title:{
                    padding: 0,
                    text:"全省合计"+this.chart1Data.chart1Count+"个问题",
                    left:'center',
                },
                tooltip: {
                    trigger: 'axis',
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        yAxisIndex: [0],
                        width: 12,
                        left: '93%',
                        start: 0, //数据窗口范围的起始百分比
                        end: 100
                    }
                ],
                // backgroundColor: '#fff',
                yAxis: {
                    type: 'category',
                    axisLine: {
                        show: false //坐标线
                    },
                    axisTick: {
                        show: false //小横线
                    },
                    axisLabel: {
                        textStyle:{
                            color:"grey", //刻度颜色
                            fontSize:12  //刻度大小
                        },
                    },
                    data:this.chart1Data.nameList
                },
                xAxis: {
                    show: false,
                },
                grid: {
                    top: '20',
                    right: '40',
                    left: '120',
                    bottom: '10' //图表尺寸大小
                },
                animationDuration: 9000,
                series: [{
                    type: 'bar',
                    barWidth: '10px',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(60,131,222,0.4)',
                        barBorderRadius: [30, 30, 30, 30] //圆角大小
                    },
                    label: {
                        show: true,
                        position: 'right' //每一条的数据位置
                    },
                    itemStyle: {
                        normal: {
                            color: (params) => {
                            let colors = [
                                '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                                '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                                '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
                                '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5',
                                '#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe',
                                '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
                                '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
                                '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
                            ]
                                return colors[params.dataIndex]
                            }, //每个数据的颜色
                            // barBorderRadius: [30, 30, 30, 30], //圆角大小
                            // shadowBlur: 10,
                            // shadowColor: 'rgba(0, 103, 255, 0.2)',
                            // shadowOffsetX: -5,
                            // shadowOffsetY: 5,

                        },
                    },
                    data: this.chart1Data.dataList
                }]
            };
            this.chart1.clear();
            this.chart1.setOption(option);
        },
        initChart2(){
            this.chart2 = echarts.init(document.getElementById('chart2'));
            var option = {
                color: ['#4e8cfb','#3dedc9'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} {b} : {c} (个)"
                },
                toolbox: {
                    show : true,
                },
                series : [
                    {
                        name:'督查',
                        type:'pie',
                        radius : [0, 65],
                        labelLine:{
                            normal: {
                                length:20,
                            }
                        },
                        label: {
                            formatter: '{b}{c}个-{d}%',
                        },
                        data:[
                            {value:this.chart2Data.dcN, name:'未督察'},
                            {value:this.chart2Data.dcF, name:'已督察'},

                        ]
                    }
                ]
            };
            this.chart2.clear();
            this.chart2.setOption(option);
        },
        initChart3(){
            this.chart3 = echarts.init(document.getElementById('chart3'));
            var option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top:'20%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {//图例组件，颜色和名字
                    left:'center',
                    top:'0%',
                    data:[{
                        name:'问题数',
                    },
                        {
                            name:'整改数',
                        },
                        {
                            name:'整改率',
                        }],
                    textStyle: {
                        color: 'grey',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chart3Data.xData,
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            textStyle: {
                                color: 'grey',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 10,
                            },
                            rotate:0,
                        },
                        axisTick:{//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine:{//坐标轴轴线相关设置
                            lineStyle:{
                                color:'grey',
                                opacity:0.2
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false,
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 10,
                        axisLabel: {
                            textStyle: {
                                color: 'grey',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            }
                        },
                        axisLine:{
                            show: false
                        },
                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['grey'],
                                opacity:0.06
                            }
                        }

                    }
                ],
                yAxis: [
                    {
                        name:'(个)',
                        type: 'value',
                        splitNumber: 10,
                        axisLabel: {
                            textStyle: {
                                color: 'grey',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            }
                        },
                        axisLine:{
                            show: false
                        },
                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['grey'],
                                opacity:0.06
                            }
                        }

                    }
                ],
                dataZoom: [{
                    type: 'slider', //图表下方的伸缩条
                    show: true, //是否显示
                    height: 10,//这里可以设置dataZoom的尺寸
                    realtime: true, //拖动时，是否实时更新系列的视图
                    start: 0, //伸缩条开始位置（1-100），可以随时更改
                    end: 100, //伸缩条结束位置（1-100），可以随时更改
                    bottom:"0",
                    textStyle:{
                        color:'grey'
                    }
                }],
                series : [
                    {
                        name:'问题数',
                        type:'bar',
                        data:this.chart3Data.questionList,
                        barWidth: 8,
                        barGap:1,//柱间距离
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#4e8cfb',
                                }, {
                                    offset: 1,
                                    color: '#4e8cfb',
                                }]),
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        }
                    },
                    {
                        name:'整改数',
                        type:'bar',
                        data:this.chart3Data.changeList,
                        barWidth: 8,
                        barGap:1,//柱间距离
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3dedc9',
                                }, {
                                    offset: 1,
                                    color: '#3dedc9',
                                }]),
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        }
                    }
                ]
            };
            this.chart3.clear();
            this.chart3.setOption(option);

        },
        initChart4() {
            this.chart4 = echarts.init(document.getElementById('chart4'));
            var data = [];
            var color = ['#3e69fe', '#89bafe', '#9cf3e5']
            for (var i = 0; i < this.chart4Data.list.length; i++) {
                data.push({
                    value: this.chart4Data.list[i].value,
                    name: this.chart4Data.list[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 0,
                            // shadowBlur: 20,
                            borderColor: color[i],
                            shadowColor: color[i]
                        }
                    }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [50, 65],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: 'grey',
                            formatter: function (params) {
                                if (params.name !== '') {
                                    return params.name + ' ：' + params.value + '个';
                                } else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length: 10,
                            show: true,
                            color: 'grey',
                        }
                    }
                },
                data: data
            }];
            var option = {
                color: color,
                title: {
                    text: this.chart4Data.qustionTotal+'个\n问题',
                    top: '40%',
                    textAlign: "center",
                    left: "49%",
                    textStyle: {
                        color: 'grey',
                        fontSize: 14,
                        fontWeight: '400'
                    }
                },
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '10%',
                    containLabel: true,
                },
                series: seriesOption
            }
            this.chart4.clear();
            this.chart4.setOption(option);
        },
        initChart5() {
            this.chart6 = echarts.init(document.getElementById('chart5'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
               color:[
                    '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
                    '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
                    '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
                ],
                legend: {
                    type: 'scroll',
                    orient: 'horizontal',
                    data: this.chart6Data.legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chart6Data.xAxis,
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            textStyle: {
                                color: 'grey',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 10,
                            },
                            rotate:0,
                        },
                        axisTick:{//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine:{//坐标轴轴线相关设置
                            lineStyle:{
                                color:'grey',
                                opacity:0.2
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false,
                        }
                    }
                ],
                yAxis: [
                    {
                        name:'(个)',
                        type: 'value',
                        splitNumber: 10,
                        axisLabel: {
                            textStyle: {
                                color: 'grey',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            }
                        },
                        axisLine:{
                            show: false
                        },
                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['grey'],
                                opacity:0.06
                            }
                        }
                    }
                ],
                dataZoom: [{
                    type: 'slider', //图表下方的伸缩条
                    show: true, //是否显示
                    height: 10,//这里可以设置dataZoom的尺寸
                    realtime: true, //拖动时，是否实时更新系列的视图
                    start: 0, //伸缩条开始位置（1-100），可以随时更改
                    end: 100, //伸缩条结束位置（1-100），可以随时更改
                    bottom:"0",
                    textStyle:{
                        color:'grey'
                    }
                }],
                series: this.chart6Data.list
            };
            this.chart6.clear();
            this.chart6.setOption(option);
        },
        initAddVcdFeatures(){
            let geoJsonName = this.organCode.substr(0, 6) + "DATA.json";
            return axios.get('/src/assets/addvGeoData/' + geoJsonName);
        },
        initMapChart:async function() {
            var _self = this;
            var convertData = function () {
                var res = [];
                for (var i = 0; i < _self.chart5Data.geoCoordMapList.length; i++) {
                    var geoCoord = _self.chart5Data.geoCoordMap[_self.chart5Data.geoCoordMapList[i].name];
                    if (geoCoord) {
                        res.push({
                            name: _self.chart5Data.geoCoordMapList[i].name,
                            value: geoCoord.concat(_self.chart5Data.geoCoordMapList[i].value)
                        });
                    }
                }
                return res;
            };
            this.chart5 = echarts.init(document.getElementById('mapChart'));
            var jsonFeatures = await this.initAddVcdFeatures();
            echarts.registerMap(this.organNm, jsonFeatures.data);
            let option = {
                title: {
                    text: this.mapTitleFocusName + '数量分布情况',
                    left: 'center',
                    textStyle: {
                        color: this.themeColor
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter(params){
                       if(params.seriesType=="map"){
                           return params.data.name+":整改率"+params.data.value+"%";
                       }else{
                           return params.data.name+":问题数"+params.data.value[2]+"个";
                       }
                    }
                },
                geo: {
                    itemStyle: {
                        normal: {
                            borderColor: 'white',
                            borderWidth: 1,
                        },

                    },
                    show: true,
                    map: this.organNm,
                    top: "80",
                    bottom: "30",
                    roam: true,
                    zoom: .9,
                    // regions: this.customSettings,
                    selectedMode: false, //选中模式：single | multiple
                    left: 0,
                    right: 0,
                    layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
                    layoutSize: "100%",
                    label: {
                        normal: { //静态的时候展示样式
                            show: true, //是否显示地图省份得名称
                            textStyle: {
                                color: "#000",
                                fontSize: 12,
                                fontFamily: "Arial"
                            }
                        },
                        emphasis: { //动态展示的样式
                            color: '#6e6e6e',
                        }
                    },
                },
                visualMap: {
                    show: true,
                    min: 1,
                    max: 20,
                    left: 'right',
                    top: 'bottom',
                    orient:'horizontal',
                    text: ['高(整改率%)', '低'],
                    textStyle: {
                        color: '#ccc'
                    },
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#eeeeee', '#ffa150']
                    }
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    right:'0',
                    itemWidth: 15,
                    padding: 50,
                    data: [
                        {
                            name: '问题数',

                        }
                    ],
                    textStyle: {
                        color: 'grey'
                    }
                },
                series: [
                    {
                        name: '问题数',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: [50,50],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                },
                                formatter (value){
                                    return value.data.value[2]
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#007dfe', //标志颜色
                            }
                        },
                        data:convertData(),
                    },
                    {
                        name: '整改率',
                        type: 'map',
                        map: this.mapName,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        animation: false,
                        roam: true,
                        data:this.chart5Data.mapPercent
                    },
                ]
            };
            this.chart5.clear();
            this.chart5.setOption(option);
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style>
  .mainDiv{
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .dc-title{
    width: 100%;
    height:90px;
    background: url(../../assets/titleBG.png) no-repeat;
    background-size: 100% 100%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    text-align: center;
    line-height: 75px;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
  }
  .dc-left{
    position: absolute;
    z-index: 10;
    width: 31.33%;
    height:100%;
    top:40px;
    left:0;
  }
  .dc-center{
    position: absolute;
    z-index: 10;
    width: 37%;
    height:calc(100% - 50px);
    top:90px;
    left:31.33%;                   :0;
  }
  .dc-right{
    position: absolute;
    z-index: 10;
    width: 31.33%;
    height:100%;
    top:40px;
    right:0;
  }
  .dc-left-box{
     position: relative;
     width: calc(100% - 60px);
     height:calc(50% - 50px);
     margin-top: 20px;
     margin: 0 auto;
     margin-top: 20px;
     background: url(../../assets/box1.png) no-repeat ;
     background-size: 100%  100%;
  }
  .dc-right1-box{
    position: relative;
    width: calc(100% - 60px);
    height:calc(30% - 40px);
    margin-top: 20px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(../../assets/box2.png) no-repeat ;
    background-size: 100%  100%;
  }
  .dc-right2-box{
    position: relative;
    width: calc(100% - 60px);
    height:calc(40% - 40px);
    margin-top: 20px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(../../assets/box2.png) no-repeat ;
    background-size: 100%  100%;
  }
  .dc-right3-box{
    position: relative;
    width: calc(100% - 60px);
    height:calc(30% - 40px);
    margin-top: 20px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(../../assets/box2.png) no-repeat ;
    background-size: 100%  100%;
  }
  .box-title{
    position: absolute;
    z-index: 20;
    top: -15px;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #5B9FFF;
    left: 30px;
  }
  .box-title1{
    position: absolute;
    z-index: 20;
    top: -15px;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #5B9FFF;
    right: 30px;
  }
  .box-title2{
    position: absolute;
    z-index: 20;
    top: -15px;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #5B9FFF;
    right: 10px;
  }
  .box-charts{
     width: 100%;
     height:100%;
  }
  .box-charts p{
    text-indent: 10px;
    font-size: 10px;
    height:20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .box-charts p:nth-child(2){
    color:#AAAAAA;
  }
  #box-ul{
     list-style: none;
     width: calc(100% - 20px);
     height:calc(100% - 60px);
     margin: 0 auto;
     padding-top: 10px;
  }
  #box-ul li{
     width: 100%;
     height:40px;
     display: flex;
     margin-top: 10px;
  }
  .dot-content{
     width: calc(100% - 20px);
  }
  .dot-img{
    display: flex;
    align-items: center;
  }
  .dot-img span{
    background: #2d8cf0;
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 10px;
  }
  .pager-new{
     text-align: center;
  }
  .chart-tj{
     width: calc(100% - 10px);
     height:calc(100% - 60px);
     margin: 0 auto;
     padding-top: 30px;
  }
  .chart-single{
     width: calc(100% - 10px);
     height:calc(100% - 60px);
     margin: 0 auto;
     padding-top: 30px;
  }
  .dc-center ul{
     width: 100%;
     list-style: none;
  }
  .dc-center ul li{
    width: 100%;
    list-style: none;
    display: inline-block;
    width: calc(33.33% - 10px);
    height:90px;
    margin-left: 5px;
  }
  .center-title{
     width: 100%;
     height:30px;
     text-align: center;
     line-height: 30px;
     font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 18px;
     color: #330006;
  }
  .center-content{
    width: 100%;
    height:60px;
    background: url("../../assets/images/countBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .center-content p{
     padding:0;
     margin:0;
     height:30px;
     text-align: center;
     line-height:30px;
  }

  .center-content p:first-child{
    padding:0;
    margin:0;
    height:30px;
    line-height: 30px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    color: #D9001B;
    font-size: 20px;
  }
  .center-content p:nth-child(2){
    padding:0;
    margin:0;
    height:30px;
    line-height: 30px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }
  .mapNode{
    width: 100%;
    height:calc(100% - 240px);
    position: relative;
  }
  #mapChart{
    width: 100%;
    height:100%;
  }
  .dataContent{
     position: absolute;
     z-index: 100;
     top:10px;
     left:10px;
  }
  .dcTypeContent{
    position: absolute;
    z-index: 100;
    top:10px;
    right:10px;
    display: inline-grid;
  }
</style>