fj-dc-ui/.svn/pristine/a7/a7d4a817b409b31f02baaf6cf8a5c8c562df6333.svn-base

<template>
 <div class="content">
  <div class="mainBox">
   <div class="slideBar">
     <div class="slideBar-left-top">
       <div class="slideBar-title">
         <img src="../../assets/fujian/dcgk.png"/>
         <span class="titleText">水利督查概况</span>
          <el-date-picker
            v-model="currentYear"
            type="year"
            :picker-options="pickerOptions"
            value-format="yyyy"
            format="yyyy"
            class="titlePicker"
            placeholder="选择年度">
          </el-date-picker>
       </div>
       <div class="slideBar-content">
          <ul class="summary-ul">
            <li>
              <p>年督查项</p>
              <p class="summary-content">
                <countTo class="fontNum-1" :startVal='0' :endVal='statiscsData.ALLOBJSIZE' :duration='2000'></countTo>
              </p>
            </li>
            <li>
              <p>督查组次</p>
              <p class="summary-content">
                <countTo class="fontNum-2" :startVal='0' :endVal='statiscsData.BISINSPALLGROUPSIZE' :duration='2000'></countTo>
              </p>
            </li>
            <li>
              <p>督查人次</p>
              <p class="summary-content">
                <countTo class="fontNum-3" :startVal='0' :endVal='statiscsData.PERNUMSIZE' :duration='2000'></countTo>
              </p>
            </li>
            <li>
              <p>督查市</p>
              <p class="summary-content">
                <countTo class="fontNum-4" :startVal='0' :endVal='statiscsData.OBJADCODESIZES' :duration='2000'></countTo>
              </p>
            </li>
            <li>
              <p>督查区/县</p>
              <p class="summary-content">
                <countTo class="fontNum-5" :startVal='0' :endVal='statiscsData.OBJADCODESIZEX' :duration='2000'></countTo>
              </p>
            </li>
            <!-- <li>
              <p>督查对象</p>
              <p class="summary-content">
                <countTo class="fontNum-6" :startVal='0' :endVal='statiscsData.OBJSIZE' :duration='2000'></countTo>
              </p>
            </li> -->
            <li @click="showMap(0)">
              <p>督查对象</p>
              <p class="summary-content">
               <countTo class="fontNum-6" :startVal='0' :endVal='statiscsData.OBJSIZE' :duration='2000'></countTo>
                <span class="fontNumPercent">
                  <img src="../../assets/fujian/up.png" v-if="statiscsData.objRant>0"/>
                <img src="../../assets/fujian/down.png" v-if="statiscsData.objRant<0"/>
                </span>
              </p>
            </li>
            <!-- <li>
              <p>发现问题</p>
              <p class="summary-content">
                <countTo class="fontNum-5" :startVal='0' :endVal='statiscsData.PBLMSIZE' :duration='2000'></countTo>
              </p>
            </li> -->
            <li @click="showMap(1)">
               <p>发现问题</p>
               <p class="summary-content">
                <countTo class="fontNum-5" :startVal='0' :endVal='statiscsData.PBLMSIZE' :duration='2000'></countTo>
                 <span class="fontNumPercent">
                   <img src="../../assets/fujian/up.png" v-if="statiscsData.pblmAllRant>0"/>
                   <img src="../../assets/fujian/down.png" v-if="statiscsData.pblmAllRant<0"/>
                </span>
               </p>
             </li>
            <!-- <li>
              <p>整改问题</p>
              <p class="summary-content">
                <countTo class="fontNum-2" :startVal='0' :endVal='statiscsData.MENDSIZESYS' :duration='2000'></countTo>
              </p>
            </li> -->
            <li @click="showMap(2)">
               <p>整改问题</p>
               <p class="summary-content">
                 <countTo class="fontNum-2" :startVal='0' :endVal='statiscsData.MENDSIZESYS' :duration='2000'></countTo>
                 <span class="fontNumPercent">
                   <img src="../../assets/fujian/up.png" v-if="statiscsData.pblmRectRant>0"/>
                   <img src="../../assets/fujian/down.png" v-if="statiscsData.pblmRectRant<0"/>
                 </span>
               </p>
             </li>
             <li>
              <p>问题销号</p>
              <p class="summary-content">
                <countTo class="fontNum-4" :startVal='0' :endVal='statiscsData.PBLMLOGSIZE' :duration='2000'></countTo>
              </p>
            </li>
<!--             <li>-->
<!--               <p>任务批次(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-1" :startVal='0' :endVal='statiscsData.YEARBATHSIZE' :duration='2000'></countTo>-->
<!--               </p>-->
<!--             </li>-->
<!--             <li>-->
<!--               <p>督查组数(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-2" :startVal='0' :endVal='statiscsData.YEARGROUPSIZE' :duration='2000'></countTo>-->
<!--               </p>-->
<!--             </li>-->
<!--             <li @click="showMap(0)">-->
<!--               <p>督查对象(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-3" :startVal='0' :endVal='statiscsData.OBJSIZE' :duration='2000'></countTo>-->
<!--                 <span class="fontNumPercent">-->
<!--                   <img src="../../assets/fujian/up.png" v-if="statiscsData.objRant>0"/>-->
<!--                   <img src="../../assets/fujian/down.png" v-if="statiscsData.objRant<0"/>-->
<!--&lt;!&ndash;                   <countTo  :startVal='0' :endVal='Math.abs(statiscsData.objRant)' :duration='2000'></countTo>&ndash;&gt;-->
<!--                 </span>-->
<!--               </p>-->
<!--             </li>-->
<!--             <li @click="showMap(1)">-->
<!--               <p>发现问题(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-4" :startVal='0' :endVal='statiscsData.PBLMSIZE' :duration='2000'></countTo>-->
<!--                 <span class="fontNumPercent">-->
<!--                   <img src="../../assets/fujian/up.png" v-if="statiscsData.pblmAllRant>0"/>-->
<!--                   <img src="../../assets/fujian/down.png" v-if="statiscsData.pblmAllRant<0"/>-->
<!--&lt;!&ndash;                   <countTo  :startVal='0' :endVal='Math.abs(statiscsData.pblmAllRant)' :duration='2000'></countTo>&ndash;&gt;-->
<!--                 </span>-->
<!--               </p>-->
<!--             </li>-->
<!--             <li @click="showMap(3)">-->
<!--               <p>确认问题(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-5" :startVal='0' :endVal='statiscsData.SUBMITPLBM' :duration='2000'></countTo>-->
<!--               </p>-->
<!--             </li>-->
<!--             <li @click="showMap(2)">-->
<!--               <p>整改问题(个)</p>-->
<!--               <p class="summary-content">-->
<!--                 <countTo class="fontNum-6" :startVal='0' :endVal='statiscsData.MENDSIZESYS' :duration='2000'></countTo>-->
<!--                 <span class="fontNumPercent">-->
<!--                   <img src="../../assets/fujian/up.png" v-if="statiscsData.pblmRectRant>0"/>-->
<!--                   <img src="../../assets/fujian/down.png" v-if="statiscsData.pblmRectRant<0"/>-->
<!--&lt;!&ndash;                   <countTo :startVal='0' :endVal='Math.abs(statiscsData.pblmRectRant)' :duration='2000'></countTo>&ndash;&gt;-->
<!--                 </span>-->
<!--               </p>-->
<!--             </li>-->
          </ul>
       </div>
     </div>
     <div class="slideBar-left-bottom">
       <div class="slideBar-title">
         <ul class="slideRightUl">
           <li :class="{'is-active':isActive==1}" @click="showTab(1)">类型</li>
           <li :class="{'is-active':isActive==2}" @click="showTab(2)">区域</li>
<!--           <li :class="{'is-active':isActive==3}" @click="showTab(3)">流域</li>-->
         </ul>
       </div>
       <div class="slideBar-table">
         <el-table
           v-if="isActive==1"
           :data="groupTypeData"
           @row-click="showGroupType"
           style="width: 100%">
           <el-table-column
             prop=""
             align="center"
             label="选择"
             width="50">
             <template slot-scope="scope">
               <el-radio v-model="isRadio" :label="scope.row.id">&nbsp;</el-radio>
             </template>
           </el-table-column>
           <el-table-column
             prop="objName"
             label="督查类别"
             show-overflow-tooltip
             align="center"
             min-width="100">
           </el-table-column>
           <el-table-column
             prop="groupSize1"
             label="督查组次"
             show-overflow-tooltip
             align="center"
             min-width="50">
           </el-table-column>
           <el-table-column
             prop="persSize1"
             label="督查人次"
             show-overflow-tooltip
             align="center"
             min-width="50">
           </el-table-column>
           <el-table-column
             prop="adCodeSizeS"
             label="督查市数"
             show-overflow-tooltip
             align="center"
             min-width="50">
           </el-table-column>
           <el-table-column
             prop="adCodeSizeX"
             label="督查县数"
             show-overflow-tooltip
             align="center"
             min-width="50">
           </el-table-column>
           <el-table-column
             prop="objSize"
             label="对象数"
             show-overflow-tooltip
             align="center"
             min-width="70">
           </el-table-column>
           <el-table-column
             prop="pblmSize"
             label="问题数"
             show-overflow-tooltip
             align="center"
             min-width="70">
           </el-table-column>
           <el-table-column
             prop="pblmLogSize"
             label="整改数"
             show-overflow-tooltip
             align="center"
             min-width="70">
           </el-table-column>
<!--           <el-table-column-->
<!--             prop="objSize"-->
<!--             label="对象数"-->
<!--             align="center"-->
<!--             show-overflow-tooltip-->
<!--             min-width="60">-->
<!--           </el-table-column>-->
<!--           <el-table-column-->
<!--             prop="pblmSize"-->
<!--             label="问题数"-->
<!--             align="center"-->
<!--             show-overflow-tooltip-->
<!--             min-width="60">-->
<!--           </el-table-column>-->
<!--           <el-table-column-->
<!--             prop="pblmLogSize"-->
<!--             label="整改数"-->
<!--             align="center"-->
<!--             show-overflow-tooltip-->
<!--             min-width="60">-->
<!--           </el-table-column>-->
         </el-table>
         <el-table
           v-if="isActive==2"
           :data="groupAreaData"
           @row-click="showGroupArea"
           style="width: 100%">
           <el-table-column
             prop=""
             label="选择"
             align="center"
             width="50">
             <template slot-scope="scope">
               <el-radio v-model="isRadio1" :label="scope.row.id">&nbsp;</el-radio>
             </template>
           </el-table-column>
           <el-table-column
             prop="adName"
             label="区划名称"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="objSize"
             label="对象数"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="pblmSize"
             label="问题数"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="mendSize"
             label="整改数"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
         </el-table>
       </div>
       <div class="slideBar-pie" id="chart5"></div>
     </div>
   </div>
   <div class="centerBar">
     <ul class="exampleBack">
       <li v-show="isCityL" @click="backProvince"><i class="el-icon-arrow-left"/>返  回</li>
     </ul>
     <ul class="example">
       <li @click="showMap(null)" v-show="mapIsActive==0 || mapIsActive==1 || mapIsActive==2 || mapIsActive==3"><i class="el-icon-s-grid"/>全部数据</li>
        <li>
           <em style="background: #fff024"/><span>对象数</span>
        </li>
       <li>
         <em style="background: #EB3B46"/><span>问题数</span>
       </li>
       <!-- <li>
         <em style="background: #A02A27"/><span>确认问题数</span>
       </li> -->
       <li>
         <em style="background: white"/><span>整改数</span>
       </li>
     </ul>

<!--     <el-button v-if="isCity" type="primary" size="large" class="backBtn" plain icon="el-icon-arrow-left" @click="backProvince">返回至省级</el-button>-->
     <div class="item-content-center" id="chart4"></div>
   </div>
   <div class="slideBar">
     <div class="slideBar-right-top">
       <div class="slideBar-title">
         <ul class="slideRightUl">
           <li :class="{'is-active':isActive3==3}" @click="showTab3(3)">
<!--             <el-badge v-if="badge3>0" :value="badge3" class="item">待办事项</el-badge>-->
             <span >待办事项</span>
           </li>
           <li :class="{'is-active':isActive3==4}" @click="showTab3(4)">
             <el-badge v-if="badge4>0" :value="badge4" class="item">通知公告</el-badge>
             <span v-else>通知公告</span>
           </li>
           <li :class="{'is-active':isActive3==2}" @click="showTab3(2)">
<!--             <el-badge v-if="badge2>0" :value="badge2" class="item">问题清单库</el-badge>-->
             <span>问题清单库</span>
           </li>
           <li :class="{'is-active':isActive3==1}" @click="showTab3(1)">
             <el-badge v-if="badge1>0" :value="badge1" class="item">法律法规</el-badge>
             <span v-else>法律法规</span>
           </li>
         </ul>
       </div>
       <div class="slideBar-content">
         <ul class="officeNotice" v-if="isActive3==3" @click.stop="showTodo">
           <li>
             <div><img src="../../assets/fujian/db.png"/></div>
             <div>
                <span>待办</span>
                <span>{{todoCount}}</span>
             </div>
           </li>
<!--           <li>-->
<!--             <div><img src="../../assets/fujian/tz.png"/></div>-->
<!--             <div>-->
<!--               <span>通知</span>-->
<!--               <span>999</span>-->
<!--             </div>-->
<!--           </li>-->
         </ul>
         <ul class="ul-notify">
           <li v-for="(item,index) in noticeList1" v-if="isActive3==1" @click="showDialog(item,1)" >
             <span style="color:#ffac3d;"><em style="background:#ffac3d; "/></span>
             <span :title="item.title">{{item.title}}</span>
             <el-badge :is-dot="getCookie(1).indexOf(item.id)>-1" class="item"></el-badge>
           </li>
           <li v-for="(item,index) in noticeList2" v-if="isActive3==2" @click="showDialog(item,2)">
             <span style="color:#ffac3d;"><em style="background:#ffac3d; "/></span>
             <span :title="item.title">{{item.title}}</span>
<!--             <el-badge :is-dot="getCookie(2).indexOf(item.pblmId)>-1" class="item"></el-badge>-->
           </li>
<!--           <li v-for="(item,index) in noticeList3" v-if="isActive3==3" @click="showDialog(item,3)">-->
<!--             <span style="color:#ffac3d;"><em style="background:#ffac3d; "/></span>-->
<!--             <span :title="item.title">{{item.title}}</span>-->
<!--             <el-badge :is-dot="getCookie(3).indexOf(item.id)>-1" class="item"></el-badge>-->
<!--           </li>-->
           <li v-for="(item,index) in noticeList4" v-if="isActive3==4" @click="showDialog(item,4)">
             <span style="color:#ffac3d;"><em style="background:#ffac3d; "/></span>
             <span :title="item.title">{{item.title}}</span>
             <el-badge :is-dot="getCookie(4).indexOf(item.id)>-1" class="item"></el-badge>
           </li>
         </ul>
       </div>
     </div>
     <div class="slideBar-right-center">
       <div class="slideBar-title">
         <ul class="slideRightUl">
           <li :class="{'is-active':isActive1==2}" @click="showTab1(2)">问题数</li>
           <li :class="{'is-active':isActive1==1}" @click="showTab1(1)">对象数</li>
           <li :class="{'is-active':isActive1==4}" @click="showTab1(4)">整改数</li>
         </ul>
       </div>
       <div class="slideBar-content" id="chartComPare"></div>
     </div>
     <div class="slideBar-right-bottom">
       <div class="slideBar-title">
         <img src="../../assets/fujian/zgph.png"/>
         <span class="titleText">整改排行</span>
       </div>
       <div class="slideBar-content rangeTable">
         <el-table
           :data="rangeData"
           style="width: 100%">
           <el-table-column
             prop="adName"
             label="区划名称"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="pblmSize"
             label="问题数"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="pblmLogSize"
             label="整改数"
             show-overflow-tooltip
             align="center"
             min-width="60">
           </el-table-column>
           <el-table-column
             prop="mendAccomplishRant"
             label="整改率(%)"
             show-overflow-tooltip
             align="center"
             min-width="100">
             <template slot-scope="scope">
               <span class="rangText">{{scope.row.mendAccomplishRant}}</span>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
   </div>
   <messageDetail  v-if="isShowMessageDetail" :data="messageData" @closeDialog="closeDialog"></messageDetail>
    <el-dialog
      class="custom_dialog"
      title="问题标准"
      width="60%"
      @close="dialogCloseDetail"
      append-to-body
      v-if="supervisionDetailsVisible"
      :visible.sync="supervisionDetailsVisible">
      <div style="width: 100%;height:600px;overflow-y: auto;overflow-x: hidden">
        <p class="DictTitle">{{pblmDict.inspObjName}}</p>
         <div v-for="(item,index) in pblmDict.children" class="pblmDictContent">
           <span class="level1Title">{{index+1}}、{{item.inspObjName}}</span>
            <div v-for="(item1,index1) in item.children">
               <span class="level2Title">{{index+1}}.{{index1+1}}、{{item1.inspObjName}}</span>
               <div v-for="(item2,index2) in item1.children">
                 <span  class="level3Title">{{index+1}}.{{index1+1}}.{{index2+1}}、{{item2.inspObjName}}</span>
               </div>
            </div>
         </div>
      </div>
    </el-dialog>
   <el-dialog
    class="custom_dialog"
    title="法律法规"
    width="70%"
    @close="dialogCloseDetailLaw"
    append-to-body
    v-if="viewLawListVisible"
    :visible.sync="viewLawListVisible">
    <viewLawList :lawName="lawName"></viewLawList>
  </el-dialog>
   <el-dialog
    class="custom_dialog"
    title="待办事项"
    width="70%"
    @close="dialogCloseDetailWork"
    append-to-body
    v-if="viewWorkListVisible"
    :visible.sync="viewWorkListVisible">
    <toDoTaskPage type="dc" :workName="workName"></toDoTaskPage>
  </el-dialog>
  </div>
 </div>
</template>

<script>
  import countTo from 'vue-count-to';
  import Viewer from 'viewerjs';
  import axios from 'axios' //引入axios
  import 'viewerjs/dist/viewer.css';
  import echarts from "echarts";
  import '@util/echarts-gl.min.js';
  import request from "@util/gw_ajax_request.js";
  import {getStatiscsData,getPblmPro,getGroupType,getGroupTypeSd,initPblmTypeList,initAreaObjTypeList,initCompareObjTypeList,initNoticeList} from "../../api/homeMainView.js";
  import obj from '../../assets/fujian/obj.png';
  import pblm from '../../assets/fujian/pblm.png';
  import mend from '../../assets/fujian/mend.png';
  import submit from '../../assets/fujian/submit.png';
  import messageDetail from "./messageDetail";
  export default {
    components: {
        countTo,
        messageDetail,
        problemDetail: resolve => {
            require(["./problemDetail.vue"], resolve);
        },
        viewLawList: resolve =>{
            require(["../Inspection/viewLawList.vue"], resolve);
        },
        toDoTaskPage: resolve =>{
            require(["../toDoTask/toDoTaskPage.vue"], resolve);
        }

    },
    props: [],
    data() {
        //这里存放数据
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            currentYear:new Date().getFullYear().toString(),
            currentAdCode:"",
            currentAdName:"",
            isRadio:"",
            isRadio1:null,
            isActive:1,
            isActive1:2,
            isActive2:3,
            isActive3:3,
            badge1:0,
            badge2:0,
            badge3:0,
            badge4:0,
            dateStr:"",
            chart1:null,
            chart2:null,
            chart4:null,
            chart5:null,
            chartRang:null,
            chartComPare:null,
            chart5Title:"",
            mapIsActive:null,
            activeName:"first",
            isCity:false,
            groupTypeData:[],
            groupAreaData:[],
            chartMapData:{
                mapPercent:[],
                geoCoordMap:{},
                geoCoordMapList:[],
                geoCoordMap1:{},
                geoCoordMapList1:[],
                geoCoordMap2:{},
                geoCoordMapList2:[],
                geoCoordMap3:{},
                geoCoordMapList3:[],
                geoCoordMap4:{},
                geoCoordMapList4:[],
            },
            statiscsData:{
                BISINSPALLGROUPSIZE:0,
                BISINSPALLSIZE: 0,
                BISINSPALLSIZEMONTH: 0,
                HASOBJSIZE: 0,
                MENDSIZE: 0,
                MENDSIZESYS: 0,
                MENDSIZEMONTH: 0,
                OBJSIZE: 0,
                OBJSIZEREPEAT: 0,
                OBJTYPESIZE: 0,
                OBJTYPESIZEMONTH: 0,
                PBLMLOGSIZE: 0,
                PBLMLOGSIZEMONTH: 0,
                PBLMSIZE: 0,
                PBLMSIZEMONTH: 0,
                PERSIZE: 0,
                PERSIZEALL: 0,
                YEARBATHSIZE:0,
                YEARGROUPSIZE:0,
                SUBMITPLBM:0,
                objRant:0,
                pblmAllRant:0,
                pblmRectRant:0,
                OBJADCODESIZEX:0,
                OBJADCODESIZES:0,
                ALLOBJSIZE:0,
                PERNUMSIZE:0
            },
            chartPblmLevelData:{
                info:0,
                warn:0,
                fatal:0,
                error:0,
                count:0
            },
            pblmTypeObj:{
                list:[],
                count:0
            },
            AreaObjTypeObj:{
                xAxis:[],
                list:[]
            },
            rangeData:[],
            compareListObj:{
                xAxis:[],
                list:[]
            },
            noticeList1:[],
            noticeList2:[],
            noticeList3:[],
            noticeList4:[],
            todoCount:0,
            isShowMessageDetail:false,
            messageData:null,
            supervisionDetailsVisible:false,
            pblmDict:[],
            problemId:"",
            viewLawListVisible:false,
            lawName:"",
            viewWorkListVisible:false,
            workName:"",
            provTitle:""
        }
    },
    //监听属性 类似于data概念
    computed: {
        organNm() {
            return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
        },
        organCode() {
            return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
        },
        currentOrgId() {
            return localStorage.getItem('currentOrgId') ? localStorage.getItem('currentOrgId') : ''
        },
        isCityL(){
            return this.currentAdCode.replace(/00/g,"").length==4?true:false
        }
    },
    //监控data中的数据变化
    watch: {
        currentYear(n,o){
            if(n){
                if(n < new Date().getFullYear().toString()){
                    this.dateStr = n +"年12月31日"
                }else{
                    this.dateStr = (this.formatDate(new Date().getTime()))
                }
                this.initStatiscsData();
                this.initGroupType();
                this.initMulData();
                [1,2,3,4].forEach((item)=>{
                    this.initNoticeData(item);
                })
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.dateStr = (this.formatDate(new Date().getTime()));
        this.currentAdCode = this.organCode;
        this.currentAdName = this.organNm;
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.$nextTick(()=>{
            this.initStatiscsData();
            this.initGroupType();
            this.initMulData();
            this.initCompareObjTypeData();
            [1,2,3,4].forEach((item)=>{
                this.initNoticeData(item);
            })
            var _self = this;
            window.onresize = function() {
                _self.resizeCharts();
            }
        })
    },
    //方法集合
    methods: {
        showTodo(){
            this.$router.push({path: '/toDoTask/dc',query:{source:"home"}});
        },
        dialogCloseDetailWork(){
            this.viewWorkListVisible = false;
            this.workName = "";
        },
        dialogCloseDetailLaw(){
            this.lawName = "";
            this.viewLawListVisible = false;
        },
        dialogCloseDetail(){
            this.supervisionDetailsVisible = false;
            this.problemId = "";
        },
        closeDialog(){
            this.isShowMessageDetail = false;
            this.messageData = null;
        },
        showDialog(item,args){
           var arr = [];
           var arr1 = [];
           if(args==1){
               this.viewLawListVisible = true;
               this.lawName = item.lawKeyword;
               arr = this.getCookie(args).filter(item1 => item1 != item.id)
               arr1 = this.getReadCookie(args).concat(this.getCookie(args).filter(item1 => item1 == item.id))
               this.badge1 = arr.length;
               this.setCookie(args,arr.join(","));
               this.setReadCookie(args,arr1.join(","));
           }
           if(args==2){
              this.supervisionDetailsVisible = true;
              this.pblmDict = item;
              // this.problemId = item.pblmId;
              // arr = this.getCookie(args).filter(item1 => item1 != item.pblmId);
              // arr1 = this.getReadCookie(args).concat(this.getCookie(args).filter(item1 => item1 == item.pblmId))
              // this.badge2 = arr.length;
              // this.setCookie(args,arr.join(","));
              // this.setReadCookie(args,arr1.join(","));
           }
           if(args==3){
               this.workName = item.procInstName;
               this.viewWorkListVisible = true;
               arr = this.getCookie(args).filter(item1 => item1 != item.procInstId);
               arr1 = this.getReadCookie(args).concat(this.getCookie(args).filter(item1 => item1 == item.procInstId))
               this.badge3 = arr.length;
               this.setCookie(args,arr.join(","));
               this.setReadCookie(args,arr1.join(","));
           }
           if(args==4){
               this.isShowMessageDetail = true;
               this.messageData = item;
               arr = this.getCookie(args).filter(item1 => item1 != item.id);
               arr1 = this.getReadCookie(args).concat(this.getCookie(args).filter(item1 => item1 == item.id))
               this.badge4 = arr.length;
               this.setCookie(args,arr.join(","));
               this.setReadCookie(args,arr1.join(","));
           }
        },
        resizeCharts(){
            // this.chart1.resize();
            // this.chart2.resize();
            this.chart4.resize();
            this.chart5.resize();
            // this.chartRang.resize();
            this.chartComPare.resize();
        },
        backProvince(){
            this.isCity = false;
            this.currentAdCode = this.organCode;
            this.currentAdName = this.organNm;
            this.$nextTick(()=>{
                this.initStatiscsData();
                this.initGroupType();
                this.initMulData();
                this.initCompareObjTypeData();
                [1,2,3,4].forEach((item)=>{
                    this.initNoticeData(item);
                })
            })
        },
        showMap(args){
           this.mapIsActive = args;
           this.initMulData();
        },
        showGroupType(row, column, event){
            if (event.target.tagName === 'INPUT') {
                return;
            }
            this.isRadio= row.id;
            this.initPblmTypeData(row.objType);
        },
        showGroupArea(row, column, event){
            if (event.target.tagName === 'INPUT') {
                return;
            }
            this.isRadio1= row.id;
            this.initAreaObjTypeData(row.adCode,row.adName);
        },
        showTab(args){
            this.isActive = args;
        },
        showTab1(args){
            this.isActive1 = args;
            this.initCompareObjTypeData();
        },
        // showTab2(args){
        //     this.isActive2 = args;
        //     if(args==1){
        //         this.initRangChart1()
        //     }
        //     if(args==2){
        //         this.initRangChart2()
        //     }
        //     if(args==3){
        //         this.initRangChart3()
        //     }
        //
        // },
        showTab3(args){
            this.isActive3 = args;
        },
        formatDate(date){
            if(date){
                var date = new Date(date);
                return date.getFullYear()+'年'+((date.getMonth()+1)>9?(date.getMonth()+1):'0'+(date.getMonth()+1))+'月'+(date.getDate()>9?date.getDate():'0'+date.getDate()+'日');
            }
            return '';
        },
        //统计数
        initStatiscsData(){
            var _self = this;
            _self.statiscsData = {
                BISINSPALLGROUPSIZE:0,
                BISINSPALLSIZE: 0,
                BISINSPALLSIZEMONTH: 0,
                HASOBJSIZE: 0,
                MENDSIZE: 0,
                MENDSIZESYS: 0,
                MENDSIZEMONTH: 0,
                OBJSIZE: 0,
                OBJSIZEREPEAT: 0,
                OBJTYPESIZE: 0,
                OBJTYPESIZEMONTH: 0,
                PBLMLOGSIZE: 0,
                PBLMLOGSIZEMONTH: 0,
                PBLMSIZE: 0,
                PBLMSIZEMONTH: 0,
                PERSIZE: 0,
                PERSIZEALL: 0,
                YEARBATHSIZE:0,
                YEARGROUPSIZE:0,
                SUBMITPLBM:0,
                objRant:0,
                pblmAllRant:0,
                pblmRectRant:0,
                OBJADCODESIZEX:0,
                OBJADCODESIZES:0,
                ALLOBJSIZE:0,
                PERNUMSIZE:0
            }
            getStatiscsData("7","",this.currentAdCode,this.currentYear).then((res) => {
                if(res.data!=null){
                    _self.statiscsData.BISINSPALLGROUPSIZE = parseInt(res.data.BISINSPALLGROUPSIZE==null?0:res.data.BISINSPALLGROUPSIZE);
                    _self.statiscsData.BISINSPALLSIZE = parseInt(res.data.BISINSPALLSIZE==null?0:res.data.BISINSPALLSIZE);
                    _self.statiscsData.BISINSPALLSIZEMONTH = parseInt(res.data.BISINSPALLSIZEMONTH==null?0:res.data.BISINSPALLSIZEMONTH);
                    _self.statiscsData.HASOBJSIZE = parseInt(res.data.HASOBJSIZE==null?0:res.data.HASOBJSIZE);
                    _self.statiscsData.MENDSIZE = parseInt(res.data.MENDSIZE==null?0:res.data.MENDSIZE);
                    _self.statiscsData.MENDSIZESYS = parseInt(res.data.MENDSIZESYS==null?0:res.data.MENDSIZESYS);
                    _self.statiscsData.MENDSIZEMONTH = parseInt(res.data.MENDSIZEMONTH==null?0:res.data.MENDSIZEMONTH);
                    _self.statiscsData.OBJSIZE = parseInt(res.data.OBJSIZE==null?0:res.data.OBJSIZE);
                    _self.statiscsData.OBJSIZEREPEAT = parseInt(res.data.OBJSIZEREPEAT==null?0:res.data.OBJSIZEREPEAT);
                    _self.statiscsData.OBJTYPESIZE = parseInt(res.data.OBJTYPESIZE==null?0:res.data.OBJTYPESIZE);
                    _self.statiscsData.OBJTYPESIZEMONTH = parseInt(res.data.OBJTYPESIZEMONTH==null?0:res.data.OBJTYPESIZEMONTH);
                    _self.statiscsData.PBLMLOGSIZE = parseInt(res.data.PBLMLOGSIZE==null?0:res.data.PBLMLOGSIZE);
                    _self.statiscsData.PBLMLOGSIZEMONTH = parseInt(res.data.PBLMLOGSIZEMONTH==null?0:res.data.PBLMLOGSIZEMONTH);
                    _self.statiscsData.PBLMSIZE = parseInt(res.data.PBLMSIZE==null?0:res.data.PBLMSIZE);
                    _self.statiscsData.PBLMSIZEMONTH = parseInt(res.data.PBLMSIZEMONTH==null?0:res.data.PBLMSIZEMONTH);
                    _self.statiscsData.PERSIZE = parseInt(res.data.PERSIZE==null?0:res.data.PERSIZE);
                    _self.statiscsData.PERSIZEALL = parseInt(res.data.PERSIZEALL==null?0:res.data.PERSIZEALL);
                    _self.statiscsData.YEARBATHSIZE = parseInt(res.data.YEARBATHSIZE==null?0:res.data.YEARBATHSIZE);
                    _self.statiscsData.YEARGROUPSIZE = parseInt(res.data.YEARGROUPSIZE==null?0:res.data.YEARGROUPSIZE);
                    _self.statiscsData.SUBMITPLBM = parseInt(res.data.SUBMITPLBM==null?0:res.data.SUBMITPLBM);
                    _self.statiscsData.objRant = parseFloat(res.data.objRant?res.data.objRant.replace("%",""):0);
                    _self.statiscsData.pblmAllRant = parseFloat(res.data.pblmAllRant?res.data.pblmAllRant.replace("%",""):0);
                    _self.statiscsData.pblmRectRant = parseFloat(res.data.pblmRectRant?res.data.pblmRectRant.replace("%",""):0);
                    _self.statiscsData.OBJADCODESIZEX = parseInt(res.data.OBJADCODESIZEX==null?0:res.data.OBJADCODESIZEX);
                    _self.statiscsData.OBJADCODESIZES = parseInt(res.data.OBJADCODESIZES==null?0:res.data.OBJADCODESIZES);
                    _self.statiscsData.ALLOBJSIZE = parseInt(res.data.ALLOBJSIZE==null?0:res.data.ALLOBJSIZE);
                    _self.statiscsData.PERNUMSIZE = parseInt(res.data.PERNUMSIZE==null?0:res.data.PERNUMSIZE);
                }
            });
        },
        //按类型分组
        initGroupType(){
            this.groupTypeData = [];
            var _self = this;
            getGroupTypeSd({timeType:"7",year:this.currentYear,adCode:this.currentAdCode}).then((res) => {
                if(res.data!=null && res.data.length>0){
                    _self.groupTypeData = res.data;
                    _self.groupTypeData.forEach((item,index)=>{
                        item.id = index+1
                    })
                }
                // this.initChart1()
            });
        },
        //行政区划相关数据
        initMulData(){
            this.chartPblmLevelData.info = 0;
            this.chartPblmLevelData.warn = 0;
            this.chartPblmLevelData.fatal = 0;
            this.chartPblmLevelData.error = 0;
            this.chartMapData.geoCoordMap = [];
            this.chartMapData.geoCoordMapList = [];
            this.chartMapData.geoCoordMap1 = [];
            this.chartMapData.geoCoordMapList1 = [];
            this.chartMapData.geoCoordMap2 = [];
            this.chartMapData.geoCoordMapList2 = [];
            this.chartMapData.geoCoordMap3 = [];
            this.chartMapData.geoCoordMapList3 = [];
            this.chartMapData.geoCoordMap4 = [];
            this.chartMapData.geoCoordMapList4 = [];
            this.groupAreaData = [];
            this.rangeData = [];
            this.provTitle = "";
            var list = [];
            var list1 = [];
            var maxNum=0;
            var _self = this;
            getPblmPro({timeType:"7",year:this.currentYear,adCode:this.currentAdCode}).then((res) => {
                if(res.data!=null && res.data.length>0){
                    for(var i = 0;i<res.data.length;i++){
                        if(res.data[i].adName!="合计"){
                            if(res.data[i].adName=="平潭综合试验区"){
                                res.data[i].adName = "平潭区"
                            }
                            list.push(res.data[i]);
                            _self.groupAreaData.push(res.data[i]);
                            _self.groupAreaData.forEach((item,index)=>{
                                item.id = index+1;
                            })
                            if(res.data[i].adName=="省本级"){
                                this.provTitle = `[省本级:对象数:${res.data[i].objSize},问题数:${res.data[i].pblmSize},提交问题数:${res.data[i].submitPlbm},整改数:${res.data[i].mendSize}]`
                            }
                            var str = "";
                            if(_self.mapIsActive==0){
                                str = res.data[i].objSize;
                            }
                            if(_self.mapIsActive==1){
                                str = res.data[i].pblmSize;
                            }
                            if(_self.mapIsActive==2){
                                str = res.data[i].mendSize
                            }
                            if(_self.mapIsActive==3){
                                str = res.data[i].submitPlbm
                            }
                            if(!_self.mapIsActive && _self.mapIsActive!=0){
                                str = res.data[i].objSize+","+res.data[i].pblmSize+","+res.data[i].submitPlbm+","+res.data[i].mendSize
                            }
                            if(res.data[i].adName!="省本级") {
                                _self.chartMapData.geoCoordMapList.push({
                                    name: res.data[i].adName,
                                    value:str,
                                    adCode:res.data[i].adCode
                                });
                                if(!_self.mapIsActive && _self.mapIsActive!=0){
                                    _self.chartMapData.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd)-(_self.isCity?0.06:0.06):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap1[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd)-(_self.isCity?0.1:0.2):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap2[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd)-(_self.isCity?0.05:0.1):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    // _self.chartMapData.geoCoordMap3[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap3[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd)-(_self.isCity?0.025:0.05):res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap4[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd)+(_self.isCity?0.005:0.005):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                }else{
                                    _self.chartMapData.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap1[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap2[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap3[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                    _self.chartMapData.geoCoordMap4[res.data[i].adName] = [res.data[i].lgtd?parseFloat(res.data[i].lgtd):res.data[i].lgtd, res.data[i].lttd?parseFloat(res.data[i].lttd):res.data[i].lttd, res.data[i].adCode];
                                }

                                _self.chartMapData.geoCoordMapList1.push({
                                    name: res.data[i].adName,
                                    value: res.data[i].objSize
                                });

                                _self.chartMapData.geoCoordMapList2.push({
                                    name: res.data[i].adName,
                                    value: res.data[i].pblmSize
                                });

                                _self.chartMapData.geoCoordMapList3.push({
                                    name: res.data[i].adName,
                                    value: res.data[i].submitPlbm
                                });

                                _self.chartMapData.geoCoordMapList4.push({
                                    name: res.data[i].adName,
                                    value: res.data[i].mendSize,
                                });
                                list1.push(res.data[i].objSize);
                                list1.push(res.data[i].pblmSize);
                                list1.push(res.data[i].submitPlbm);
                                list1.push(res.data[i].mendSize);
                                maxNum = Math.max(...list1)
                            }

                        }else{
                            _self.chartPblmLevelData.info = res.data[i].infoPlbm;
                            _self.chartPblmLevelData.warn = res.data[i].warmPlbm;
                            _self.chartPblmLevelData.fatal = res.data[i].errorPlbm;
                            _self.chartPblmLevelData.error = res.data[i].errorsPlbm;
                            _self.chartPblmLevelData.count = parseInt(res.data[i].infoPlbm)+parseInt(res.data[i].warmPlbm)+parseInt(res.data[i].errorPlbm)+parseInt(res.data[i].errorsPlbm)
                        }
                    }
                    list = list.sort(this.compare('mendAccomplishRant'));
                    list.forEach((item)=>{
                        _self.rangeData.push(item);
                    })

                }
                // this.initChart1();
                // this.initChart2();
                this.initChart4(maxNum);
                this.initChart5();
                // this.initRangChart3();
            });
        },
        compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            }
        },
        //问题类别数据
        initPblmTypeData(objType){
            this.pblmTypeObj.list = [];
            this.pblmTypeObj.count = 0;
            var _self = this;
            initPblmTypeList({timeType:"7",year:this.currentYear,adCode:this.currentAdCode,objType:objType}).then((res) => {
                if(res.data!=null && res.data.length>0){
                    for(var i = 0;i<res.data.length;i++){
                        _self.pblmTypeObj.list.push(
                            {
                                typeName: res.data[i].NAME,
                                name:  res.data[i].PBLMNAME,
                                ptype: res.data[i].PTYPE,
                                value: res.data[i].VALUE,
                            }
                        );
                        _self.pblmTypeObj.count+=parseInt(res.data[i].VALUE);
                    }
                }
                this.initChart5_1();
            });
        },
        //问题类别数据
        initAreaObjTypeData(adCode,adName){
            this.AreaObjTypeObj.xAxis = [];
            this.AreaObjTypeObj.list = [];
            var _self = this;
            initAreaObjTypeList({timeType:"7",year:this.currentYear,adCode:adCode}).then((res) => {
                if(res.data){
                    _self.AreaObjTypeObj.xAxis = res.data.xAxis;
                    for(let k in res.data){
                        if(k != "yTypeCode" && k != "xAxis"){
                            _self.AreaObjTypeObj.list.push({
                                name:k,
                                value:res.data[k]
                            });
                        }
                    }
                }
                this.initChart5_2(adName);
            });
        },
        initCompareObjTypeData(){
            this.compareListObj.xAxis = [];
            this.compareListObj.list = [];
            var _self = this;
            initCompareObjTypeList({adCode:this.currentAdCode,compareType:this.isActive1}).then((res) => {
                if(res.data){
                    this.compareListObj.xAxis = res.data.xAxis;
                    this.compareListObj.list = res.data.yAxis;
                    if(this.isActive1==1){
                        this.initCompare1();
                    }
                    if(this.isActive1==2){
                        this.initCompare2();
                    }
                    if(this.isActive1==4){
                        this.initCompare3();
                    }
                }
            });
        },
        initNoticeData(args){
            this.noticeList1 = [];
            this.noticeList2 = [];
            this.todoCount = 0;
            this.noticeList4 = [];
            var ids = [];
            var _self = this;
            initNoticeList({topType:args,topNum:5,timeType:'7',year:this.currentYear,adCode:this.currentAdCode,objType:''}).then((res) => {
                if(res.data && res.data.length>0){
                    res.data.forEach((item)=>{

                        if(args==1){
                            ids.push(item.id);
                            item.title = item.lawKeyword;
                        }
                        if(args==2){
                            // ids.push(item.pblmId);
                            item.title = item.inspObjName;
                        }
                        // if(args==3){
                        //     ids.push(item.procInstId);
                        //     item.title = item.procInstName;
                        // }
                        if(args==4){
                            ids.push(item.id);
                        }
                    })
                    if(args==3){
                        _self.todoCount = res.data.todoCount;
                    }
                    if(args==4){
                        _self.noticeList4 = res.data;
                    }
                    if(args==2){
                        _self.noticeList2 = res.data;
                    }
                    if(args==1){
                        _self.noticeList1 = res.data;
                    }
                    if(args!=3 && args!=2){
                        var list = _self.getArr(this.getReadCookie(args),ids);
                        _self.setCookie(args,list.join(","));
                    }
                    if(args==1){
                        _self.badge1 = _self.getCookie(args).length;
                    }
                    // if(args==2){
                    //     _self.badge2 = _self.getCookie(args).length;
                    // }
                    // if(args==3){
                    //     _self.badge3 = _self.getCookie(args).length;
                    // }
                    if(args==4){
                        _self.badge4 = _self.getCookie(args).length;
                    }
                }

            });
        },
        getArr(arr,arr1){
           var newArr = [];
           if(arr.length==0){
              return arr1;
           }
           if(arr1.length==0){
             return [];
           }
           arr1.forEach((item)=>{
               if(arr.indexOf(item)<0){
                   newArr.push(item);
               }
           })

           return newArr;
        },
        getReadCookie(isActive){
            var str = document.cookie;
            //将值切割成数组
            var arr = str.split(";");
            var valueStr="";
            //遍历数组
            for(var i=0;i<arr.length;i++){
                var value = arr[i].split("=");
                if(isActive==1 && value[0].trim() == 'noticeLId_1'){
                    valueStr = value[1];
                }
                if(isActive==2 && value[0].trim() == 'noticeLId_2'){
                    valueStr = value[1];
                }
                if(isActive==3 && value[0].trim() == 'noticeLId_3'){
                    valueStr = value[1];
                }
                if(isActive==4 && value[0].trim() == 'noticeLId_4'){
                    valueStr = value[1];
                }
            }
            return valueStr?valueStr.split(","):[]
        },
        getCookie(isActive){
            var str = document.cookie;
            //将值切割成数组
            var arr = str.split(";");
            var valueStr="";
            //遍历数组
            for(var i=0;i<arr.length;i++){
                var value = arr[i].split("=");
                if(isActive==1 && value[0].trim() == 'noticeId_1'){
                    valueStr = value[1];
                }
                if(isActive==2 && value[0].trim() == 'noticeId_2'){
                    valueStr = value[1];
                }
                if(isActive==3 && value[0].trim() == 'noticeId_3'){
                    valueStr = value[1];
                }
                if(isActive==4 && value[0].trim() == 'noticeId_4'){
                    valueStr = value[1];
                }
            }
            return valueStr?valueStr.split(","):[]
        },
        setCookie(isActive,str){
            var expires = new Date();
            expires.setTime(expires.getTime()+1000*24*60*60*1000);
            if(isActive==1){
                document.cookie = "noticeId_1="+str+";expires="+expires.toGMTString();
            }
            if(isActive==2){
                document.cookie = "noticeId_2="+str+";expires="+expires.toGMTString();
            }
            if(isActive==3){
                document.cookie = "noticeId_3="+str+";expires="+expires.toGMTString();
            }
            if(isActive==4){
                document.cookie = "noticeId_4="+str+";expires="+expires.toGMTString();
            }
        },
        setReadCookie(isActive,str){
            var expires = new Date();
            expires.setTime(expires.getTime()+1000*24*60*60*1000);
            if(isActive==1){
                document.cookie = "noticeLId_1="+str+";expires="+expires.toGMTString();
            }
            if(isActive==2){
                document.cookie = "noticeLId_2="+str+";expires="+expires.toGMTString();
            }
            if(isActive==3){
                document.cookie = "noticeLId_3="+str+";expires="+expires.toGMTString();
            }
            if(isActive==4){
                document.cookie = "noticeLId_4="+str+";expires="+expires.toGMTString();
            }
        },
        toVal(val){
            if(val!=null && val!=""){
                return val.toFixed(2)
            }
            return 0;
        },
        // initChart1(){
        //     var target = document.getElementById('chart1');
        //     var box = document.getElementsByClassName('item-center')[0];
        //     target.style.width = box.clientWidth - 20 + 'px';
        //     target.style.height = box.clientHeight - 50 + 'px';
        //     this.chart1 = echarts.init(document.getElementById('chart1'));
        //     var option = {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '3%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '1%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             data: this.groupTypeData.xAxis,
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 },
        //                 formatter: function(val) {
        //                     if(val){
        //                         return val.length>5? val.substring(0,5):val;
        //                     }
        //                 }
        //             }
        //         }],
        //         yAxis: [{
        //             name:"数量(个)",
        //             type:'value',
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             }
        //         }],
        //         series: [{
        //             name: "对象数",
        //             type: 'bar',
        //             data: this.groupTypeData.objSize,
        //             barWidth: '5px',
        //             itemStyle: {
        //                 normal: {
        //                     show: true,
        //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //                         offset: 0,
        //                         color: '#00C6FF'
        //                     }, {
        //                         offset: 1,
        //                         color: '#0072FF'
        //                     }]),
        //                     barBorderRadius: [30,30,0,0],
        //                     borderWidth: 0,
        //                 }
        //             }
        //         },
        //             {
        //                 name: "问题数",
        //                 type: 'bar',
        //                 data: this.groupTypeData.pblmSize,
        //                 barWidth: '5px',
        //                 itemStyle: {
        //                     normal: {
        //                         show: true,
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: '#FFFF00'
        //                         }, {
        //                             offset: 1,
        //                             color: '#00E6FF'
        //                         }]),
        //                         barBorderRadius: [30,30,0,0],
        //                         borderWidth: 0
        //                     }
        //                 }
        //             },
        //             {
        //                 name: "整改数",
        //                 type: 'bar',
        //                 data: this.groupTypeData.mendSize,
        //                 barWidth: '5px',
        //                 itemStyle: {
        //                     normal: {
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: 'rgba(102,159,239,1)'
        //                         }, {
        //                             offset: 1,
        //                             color: 'rgba(170,202,246,1)'
        //                         }], false),
        //                         barBorderRadius: [30,30,0,0],
        //                         borderWidth: 0
        //                     }
        //                 }
        //             }]
        //     };
        //     this.chart1.clear();
        //     this.chart1.setOption(option);
        //     var _self = this;
        //     this.chart1.off('click');
        //     this.chart1.on('click', function (param) {
        //         _self.initPblmTypeData(param.data.objType);
        //     });
        // },
        // initChart2(){
        //     var target = document.getElementById('chart2');
        //     var box = document.getElementsByClassName('item-center')[0];
        //     target.style.width = box.clientWidth - 20 + 'px';
        //     target.style.height = box.clientHeight - 50 + 'px';
        //     this.chart2 = echarts.init(document.getElementById('chart2'));
        //     var option = {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '3%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '1%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             data: this.groupAreaData.xAxis,
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 },
        //                 formatter: function(val) {
        //                     if(val){
        //                         return val.length>5? val.substring(0,5):val;
        //                     }
        //                 }
        //             }
        //         }],
        //         yAxis: [{
        //             name:"数量(个)",
        //             type:'value',
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             }
        //         }],
        //         series: [{
        //             name: "对象数",
        //             type: 'bar',
        //             data: this.groupAreaData.objSize,
        //             barWidth: '5px',
        //             itemStyle: {
        //                 normal: {
        //                     show: true,
        //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //                         offset: 0,
        //                         color: '#00C6FF'
        //                     }, {
        //                         offset: 1,
        //                         color: '#0072FF'
        //                     }]),
        //                     barBorderRadius: [30,30,0,0],
        //                     borderWidth: 0
        //                 }
        //             }
        //         },
        //             {
        //                 name: "问题数",
        //                 type: 'bar',
        //                 data: this.groupAreaData.pblmSize,
        //                 barWidth: '5px',
        //                 itemStyle: {
        //                     normal: {
        //                         show: true,
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: '#FFFF00'
        //                         }, {
        //                             offset: 1,
        //                             color: '#00E6FF'
        //                         }]),
        //                         barBorderRadius: [30,30,0,0],
        //                         borderWidth: 0
        //                     }
        //                 }
        //             },
        //             {
        //                 name: "整改数",
        //                 type: 'bar',
        //                 data: this.groupAreaData.mendSize,
        //                 barWidth: '5px',
        //                 itemStyle: {
        //                     normal: {
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: 'rgba(102,159,239,1)'
        //                         }, {
        //                             offset: 1,
        //                             color: 'rgba(170,202,246,1)'
        //                         }], false),
        //                         barBorderRadius: [30,30,0,0],
        //                         borderWidth: 0
        //                     }
        //                 }
        //             }]
        //     };
        //     this.chart2.clear();
        //     this.chart2.setOption(option);
        //     this.chart2.off('click');
        //     var _self = this;
        //     this.chart2.on('click', function (param) {
        //         _self.initAreaObjTypeData(param.data.adCode,param.data.adName);
        //     });
        // },
        initAddVcdFeatures(){
            let geoJsonName = this.currentAdCode.substr(0, 6) + "DATA.json";
            return axios.get('/src/assets/addvGeoData/' + geoJsonName);
        },
        async initChart4(maxNum) {
            var _self = this;
            // 动态计算柱形图的高度（定一个max）
            function lineMaxHeight() {
                if(_self.isCity){
                    return 0.2 / maxNum;
                }else{
                    return 0.6 / maxNum;
                }

            }
            // 柱状体的主干
            function lineData(index) {
                return _self.chartMapData['geoCoordMapList'+index].map((item) => {
                    return {
                        coords: [
                            _self.chartMapData['geoCoordMap'+index][item.name],
                            [
                                _self.chartMapData['geoCoordMap'+index][item.name][0],
                                _self.chartMapData['geoCoordMap'+index][item.name][1] + item.value * lineMaxHeight(),
                            ],
                        ],
                    };
                });
            }

            // 柱状体的顶部
            function scatterData(index) {
                return _self.chartMapData['geoCoordMapList'+index].map((item) => {
                    return [
                        _self.chartMapData['geoCoordMap'+index][item.name][0],
                        _self.chartMapData['geoCoordMap'+index][item.name][1] + item.value * lineMaxHeight(),
                    ];
                });
            }
            // 柱状体的底部
            function scatterData2(index) {
                return _self.chartMapData['geoCoordMapList'+index].map((item) => {
                    return {
                        name: item.name,
                        value: _self.chartMapData['geoCoordMap'+index][item.name],
                    };
                });
            }
            var convertData = function () {
                var res = [];
                for (var i = 0; i < _self.chartMapData.geoCoordMapList.length; i++) {
                    var geoCoord = _self.chartMapData.geoCoordMap[_self.chartMapData.geoCoordMapList[i].name];
                    if (geoCoord) {
                        res.push({
                            name: _self.chartMapData.geoCoordMapList[i].name,
                            value: geoCoord.concat(_self.chartMapData.geoCoordMapList[i].value),
                            datas: _self.chartMapData.geoCoordMapList[i].value,
                            adCode:_self.chartMapData.geoCoordMapList[i].adCode,
                        });
                    }
                }

                return res;
            };

            this.chart4 = echarts.init(document.getElementById('chart4'));
            var jsonFeatures = await this.initAddVcdFeatures();
            echarts.registerMap(this.currentAdName, jsonFeatures.data);
            var title = "";
            var  option = {
                title:{
                    text:this.currentAdName+title+this.provTitle,
                    x:'center',
                    y:'top',
                    top:5
                },
                geo: [
                    {
                        map: this.currentAdName,
                        aspectScale: 1,
                        zoom: 0.55,
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '180%',
                        show: true,
                        roam: false,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(192,245,249,.8)',
                                borderWidth: 3,
                                shadowColor: '#37dfff',
                                shadowOffsetY: 0,
                                shadowBlur: 10,
                                areaColor: 'rgba(29,85,139,0.3)',
                            },

                        },
                        emphasis: {
                            areaColor: 'rgba(29,85,139,0.3)',
                        }
                    }, {
                        map: this.currentAdName,
                        aspectScale: 1,
                        zoom: 0.55,
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '180%',
                        show: true,
                        roam: false,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(192,245,249,.8)',
                                borderWidth: 3,
                                shadowColor: '#2C99F6',
                                shadowOffsetY: 0,
                                shadowBlur: 120,
                                areaColor: 'rgba(29,85,139,0.3)',
                            },

                        },
                        emphasis: {
                            areaColor: 'rgba(29,85,139,0.3)',
                        }
                    },
                    //重影
                    {
                        type: 'map',
                        map: this.currentAdName,
                        zlevel: -1,
                        aspectScale: 1,
                        zoom: 0.55,
                        layoutCenter: ['50%', '50.7%'],
                        layoutSize: '180%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(29,85,139,0.3)',
                                shadowColor: 'rgba(29,85,139,0.3)',
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: 'rgba(29,85,139,0.3)'
                            }
                        }
                    },
                    {
                        type: 'map',
                        map: this.currentAdName,
                        zlevel: -2,
                        aspectScale: 1,
                        zoom: 0.55,
                        layoutCenter: ['50%', '51.4%'],
                        layoutSize: '180%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(29,85,139,0.3)',
                                shadowColor: 'rgba(29,85,139,0.3)',
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: 'rgba(29,85,139,0.3)'
                            }
                        }
                    },
                    {
                        type: 'map',
                        map: this.currentAdName,
                        zlevel: -3,
                        aspectScale: 1,
                        zoom: 0.55,
                        layoutCenter: ['50%', '52.1%'],
                        layoutSize: '180%',
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(29,85,139,0.3)',
                                shadowColor: 'rgba(29,85,139,0.3)',
                                shadowOffsetY: 15,
                                shadowBlur: 8,
                                areaColor: 'rgba(29,85,139,0.3)'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: this.currentAdName,
                        type: 'map',
                        map: this.currentAdName, // 自定义扩展图表类型
                        aspectScale: 1,
                        zoom: 0.55, //缩放
                        showLegendSymbol: false,
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 300,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#40a2ff' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#85c4ff' // 50% 处的颜色
                                    }],
                                    global: true // 缺省为 false
                                },
                                borderColor: 'rgb(175,255,247)',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: {
                                    type: 'linear-gradient',
                                    x: 0,
                                    y: 300,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#53cfff' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#53cfff' // 50% 处的颜色
                                    }],
                                    global: true // 缺省为 false
                                },
                            }
                        },
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '180%',
                        markPoint: {
                            symbol: 'none'
                        },
                        data: convertData(),
                    },
                    // {
                    //     type: 'scatter',
                    //     coordinateSystem: 'geo',
                    //     geoIndex: 1,
                    //     label: {
                    //         normal: {
                    //             show: true,
                    //             formatter: function (params) {
                    //                 var name = params.name;
                    //                 var value = params.data.datas;
                    //                 var text = "";
                    //                 if(_self.mapIsActive==0){
                    //                    text = `{obj|${value}}`;
                    //                 }
                    //                 if(_self.mapIsActive==1){
                    //                    text = `{pblm|${value}}`;
                    //                 }
                    //                 if(_self.mapIsActive==2){
                    //                    text = `{mend|${value}}`;
                    //                 }
                    //                 if(_self.mapIsActive==3){
                    //                     text = `{submit|${value}}`;
                    //                 }
                    //                 if(!_self.mapIsActive && _self.mapIsActive!=0){
                    //                    text = `{obj|${value.split(",")[0]}}{pblm|/${value.split(",")[1]}}{submit|/${value.split(",")[2]}}{mend|/${value.split(",")[3]}}`;
                    //                 }
                    //
                    //                 return text;
                    //             },
                    //             rich: {
                    //                 obj: {
                    //                     color: '#ff09ef',
                    //                     fontSize: 15,
                    //                     fontWeight:'bold',
                    //                     align: 'center',
                    //                     fontFamily:'italic'
                    //                 },
                    //                 pblm: {
                    //                     color: '#f2a224',
                    //                     fontSize: 15,
                    //                     fontWeight:'bold',
                    //                     fontFamily:'italic',
                    //                     align: 'center'
                    //                 },
                    //                 mend:{
                    //                     color: '#1781ff',
                    //                     fontSize: 15,
                    //                     fontWeight:'bold',
                    //                     align: 'center',
                    //                     fontFamily:'italic'
                    //                 },
                    //                 submit:{
                    //                     color: '#ff145c',
                    //                     fontSize: 15,
                    //                     fontWeight:'bold',
                    //                     fontFamily:'italic',
                    //                     align: 'center'
                    //                 }
                    //             },
                    //         },
                    //         emphasis: {
                    //             show: true,
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'transparent',
                    //     },
                    //
                    //     symbolOffset: [0,40],
                    //     z: 999,
                    //     data: convertData(),
                    // },
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var name = params.name;
                                    var value = params.data.datas;
                                    var text = `{fline|${name}}\n`;
                                    if(_self.mapIsActive==0){
                                       text += `{obj|${value}}`;
                                    }
                                    if(_self.mapIsActive==1){
                                       text += `{pblm|${value}}`;
                                    }
                                    if(_self.mapIsActive==2){
                                       text += `{mend|${value}}`;
                                    }
                                    if(_self.mapIsActive==3){
                                        text += `{submit|${value}}`;
                                    }
                                    if(!_self.mapIsActive && _self.mapIsActive!=0){
                                    //    text += `{obj|${value.split(",")[0]}}{pblm|/${value.split(",")[1]}}{submit|/${value.split(",")[2]}}{mend|/${value.split(",")[3]}}`;
                                    text += `{obj|${value.split(",")[0]}}{pblm|/${value.split(",")[1]}}{mend|/${value.split(",")[3]}}`;
                                    }

                                    return text;
                                },
                                color: "#fff",
                                rich: {
                                    fline: {
                                        color: "#fff",
                                        fontSize: 15,
                                        fontWeight:'bold',
                                        align: 'center',
                                        padding:[2,0]
                                    },
                                    tline: {
                                        color: "#ABF8FF",
                                        align: 'center',
                                        fontSize: 15,
                                        padding:[2,0]
                                    },
                                    obj: {
                                        color: '#fff024',
                                        fontSize: 16,
                                        fontWeight:'bold',
                                        align: 'center',
                                        fontFamily:'italic',
                                        padding:[3,0]
                                    },
                                    pblm: {
                                        color: '#EB3B46',
                                        fontSize: 16,
                                        fontWeight:'bold',
                                        fontFamily:'italic',
                                        align: 'center',
                                        padding:[3,0]
                                    },
                                    mend:{
                                        color: '#fff',
                                        fontSize: 16,
                                        fontWeight:'bold',
                                        align: 'center',
                                        fontFamily:'italic',
                                        padding:[3,0]
                                    },
                                    submit:{
                                        color: '#A02A27',
                                        fontSize: 16,
                                        fontWeight:'bold',
                                        fontFamily:'italic',
                                        align: 'center',
                                        padding:[3,0]
                                    }
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            color: "none",
                        },
                        symbolOffset: [0, 28],
                        z: 999,
                        data: convertData(),
                    }
                ],
            };
            if(this.mapIsActive==0 || (!this.mapIsActive && this.mapIsActive!=0)){
                option.series.push({
                        type: "lines",
                        zlevel: 5,
                        effect: {
                            show: false,
                            period: 5, // 箭头指向速度，值越小速度越快
                            trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                        },
                        lineStyle: {
                            width: 3, // 尾迹线条宽度
                            color: "#fff024",
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0, // 尾迹线条曲直度
                        },
                        label: {
                            show: false,
                            position: "end",
                            formatter: "245",
                        },
                        silent: true,
                        animation:true,
                        animationDuration:2000,
                        data: lineData(1),
                    },

                    // 柱状体的顶部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 5,
                        symbol: "circle",
                        symbolSize: [3, 2],
                        itemStyle: {
                            color: "#fff024",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData(1),
                    },
                    // 柱状体的底部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 4,
                        label: {
                            // 这儿是处理的
                            formatter: "{b}",
                            position: "bottom",
                            color: "#fff",
                            fontSize: 12,
                            distance: 20,
                            show: false,
                        },
                        symbol: "circle",
                        symbolSize: [8, 3],
                        itemStyle: {
                            // color: '#F7AF21',
                            color: "#fff024",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData2(1),
                    })
            }
            if(this.mapIsActive==1 || (!this.mapIsActive && this.mapIsActive!=0)){
                option.series.push({
                        type: "lines",
                        zlevel: 5,
                        effect: {
                            show: false,
                            period: 5, // 箭头指向速度，值越小速度越快
                            trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                        },
                        lineStyle: {
                            width: 3, // 尾迹线条宽度
                            color: "#EB3B46",
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0, // 尾迹线条曲直度
                        },
                        label: {
                            show: false,
                            position: "end",
                            formatter: "245",
                        },
                        animation:true,
                        animationDuration:2000,
                        silent: true,
                        data: lineData(2),
                    },

                    // 柱状体的顶部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 5,
                        symbol: "circle",
                        symbolSize: [3, 2],
                        itemStyle: {
                            color: "#EB3B46",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData(2),
                    },
                    // 柱状体的底部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 4,
                        label: {
                            // 这儿是处理的
                            formatter: "{b}",
                            position: "bottom",
                            color: "#fff",
                            fontSize: 12,
                            distance: 20,
                            show: false,
                        },
                        symbol: "circle",
                        symbolSize: [8, 3],
                        itemStyle: {
                            // color: '#F7AF21',
                            color: "#EB3B46",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData2(2),
                    })
            }
            // if(this.mapIsActive==3 || (!this.mapIsActive && this.mapIsActive!=0)){
            //     option.series.push({
            //             type: "lines",
            //             zlevel: 5,
            //             effect: {
            //                 show: false,
            //                 period: 5, // 箭头指向速度，值越小速度越快
            //                 trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
            //             },
            //             lineStyle: {
            //                 width: 3, // 尾迹线条宽度
            //                 color: "#A02A27",
            //                 opacity: 1, // 尾迹线条透明度
            //                 curveness: 0, // 尾迹线条曲直度
            //             },
            //             label: {
            //                 show: false,
            //                 position: "end",
            //                 formatter: "245",
            //             },
            //             animation:true,
            //             animationDuration:2000,
            //             silent: true,
            //             data: lineData(3),
            //         },

            //         // 柱状体的顶部
            //         {
            //             type: "scatter",
            //             coordinateSystem: "geo",
            //             geoIndex: 0,
            //             zlevel: 5,
            //             symbol: "circle",
            //             symbolSize: [3, 2],
            //             itemStyle: {
            //                 color: "#A02A27",
            //                 opacity: 1,
            //             },
            //             silent: true,
            //             data: scatterData(3),
            //         },
            //         // 柱状体的底部
            //         {
            //             type: "scatter",
            //             coordinateSystem: "geo",
            //             geoIndex: 0,
            //             zlevel: 4,
            //             label: {
            //                 // 这儿是处理的
            //                 formatter: "{b}",
            //                 position: "bottom",
            //                 color: "#fff",
            //                 fontSize: 12,
            //                 distance: 20,
            //                 show: false,
            //             },
            //             symbol: "circle",
            //             symbolSize: [8, 3],
            //             itemStyle: {
            //                 // color: '#F7AF21',
            //                 color: "#A02A27",
            //                 opacity: 1,
            //             },
            //             silent: true,
            //             data: scatterData2(3),
            //         })
            // }
            if(this.mapIsActive==2 || (!this.mapIsActive && this.mapIsActive!=0)){
                option.series.push({
                        type: "lines",
                        zlevel: 5,
                        effect: {
                            show: false,
                            period: 5, // 箭头指向速度，值越小速度越快
                            trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                        },
                        lineStyle: {
                            width: 3, // 尾迹线条宽度
                            color: "#F5F6F2",
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0, // 尾迹线条曲直度
                        },
                        label: {
                            show: 0,
                            position: "end",
                            formatter: "245",
                        },
                        animation:true,
                        animationDuration:2000,
                        silent: true,
                        data: lineData(4),
                    },

                    // 柱状体的顶部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 5,
                        symbol: "circle",
                        symbolSize: [3, 2],
                        itemStyle: {
                            color: "#F5F6F2",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData(4),
                    },
                    // 柱状体的底部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 4,
                        label: {
                            // 这儿是处理的
                            formatter: "{b}",
                            position: "bottom",
                            color: "#fff",
                            fontSize: 12,
                            distance: 20,
                            show: false,
                        },
                        symbol: "circle",
                        symbolSize: [8, 3],
                        itemStyle: {
                            // color: '#F7AF21',
                            color: "#F5F6F2",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData2(4),
                    })
            }
            this.chart4.clear();
            this.chart4.setOption(option);
            var _self = this;
            this.chart4.on('click', function (params) {
                if(_self.currentAdCode.replace(/00/g,"").length==2){
                    _self.isCity = true;
                    if(params.data){
                        _self.currentAdCode = params.data.adCode;
                        _self.currentAdName = params.data.name;
                    }else{
                        _self.chartMapData.geoCoordMapList.forEach((item)=>{
                            if(item.name == params.name){
                                _self.currentAdCode = item.adCode;
                                _self.currentAdName = item.name;
                            }
                        })
                    }
                    _self.$nextTick(()=>{
                        _self.initStatiscsData();
                        _self.initGroupType();
                        _self.initMulData();
                        _self.initCompareObjTypeData();
                        [1,2,3,4].forEach((item)=>{
                            _self.initNoticeData(item);
                        })
                    })
                }
            });
        },
        // initChart5(){
        //     this.chart5Title = "问题严重程度统计"
        //     this.chart5 = echarts.init(document.getElementById('chart5'));
        //     var option = {
        //         color: ['#1B84F0', '#FCC00A', '#FE8831', '#FF4258'],
        //         tooltip : {
        //             trigger: 'item',
        //             formatter: "{a} <br/>{b} : {c} ({d}%)"
        //         },
        //         legend:{
        //             orient:'vertical',
        //             icon: 'circle', //图例形状
        //             top:'25%',
        //             bottom:'25%',
        //             right:'5%',
        //             y:'center',
        //             textStyle: { //图例文字的样式
        //                 color: '#909399',
        //                 fontSize: 12
        //             },
        //         },
        //         series : [
        //             {
        //                 name:'问题严重程度',
        //                 type:'pie',
        //                 center: ['45%', '50%'],
        //                 radius: ['0%', '75%'],
        //                 labelLine:{
        //                     normal:{
        //                         length:5
        //                     }
        //                 },
        //                 label: {
        //                     normal: {
        //                         show:false,
        //                         formatter: function(params) {
        //                             return params.name+" ("+params.value+"个)"
        //                         },
        //                     }
        //                 },
        //                 data:[
        //                     {value:this.chartPblmLevelData.info, name:'一般',level:0},
        //                     {value:this.chartPblmLevelData.warn, name:'较重',level:1},
        //                     {value:this.chartPblmLevelData.fatal, name:'严重',level:2},
        //                     {value:this.chartPblmLevelData.error, name:'特重',level:3}
        //                 ]
        //             }
        //         ]
        //     };
        //     this.chart5.clear();
        //     this.chart5.setOption(option);
        // },
        initChart5(){
            this.chart5Title = "问题严重程度统计"
            this.chart5 = echarts.init(document.getElementById('chart5'));
            var option = {
                title: [
                    {
                        text: '严重程度',
                        textStyle:{
                            fontSize:14,
                            color:"#666",
                            fontWeight:'normal'
                        },
                        textAlign:"center",
                        x: '48%',
                        y: '43%',
                 },
                {
                    subtext: this.chartPblmLevelData.count + '个',
                    subtextStyle: {
                        fontSize: 14,
                        color: '#666',
                        fontWeight:'bold'
                    },
                    textAlign:"center",
                    x: '48%',
                    y: '46%',
                }],
                color: ['#1B84F0', '#FCC00A', '#FE8831', '#FF4258'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series : [
                    {
                        name:'问题严重程度',
                        type:'pie',
                        center: ['50%', '50%'],
                        radius: ['45%', '70%'],
                        labelLine:{
                            normal:{
                                length:5
                            }
                        },
                        label: {
                            normal: {
                                formatter: function(params) {
                                    return params.name+" ("+params.value+"个)"
                                },
                            }
                        },
                        data:[

                            {value:this.chartPblmLevelData.info, name:'一般',level:0},
                            {value:this.chartPblmLevelData.warn, name:'较重',level:1},
                            {value:this.chartPblmLevelData.fatal, name:'严重',level:2},
                            {value:this.chartPblmLevelData.error, name:'特重',level:3}
                        ]
                    }
                ]
            };
            this.chart5.clear();
            this.chart5.setOption(option);
        },
        initChart5_1(){
            this.chart5Title = "问题类别统计"+(this.pblmTypeObj.list.length>0?"("+this.pblmTypeObj.list[0].typeName+")":"")
            this.chart5 = echarts.init(document.getElementById('chart5'));
            var option = {
                color: [
                    "#4150d8",
                    "#28bf7e",
                    "#ed7c2f",
                    "#f2a93b",
                    "#f9cf36",
                    "#4a5bdc",
                    "#4cd698",
                    "#f4914e",
                    "#fcb75b",
                    "#ffe180",
                    "#b6c2ff",
                    "#96edc1"
                ],
                title: [
                    {
                        text: this.chart5Title,
                        textStyle:{
                            fontSize:14,
                            color:"#666",
                            fontWeight:'bold'
                        },
                        textAlign:"center",
                        x: '50%',
                        y: 'top',
                    },
                    {
                        subtext: this.pblmTypeObj.count + '个',
                        subtextStyle: {
                            fontSize: 14,
                            color: '#666',
                            fontWeight:'bold'
                        },
                        textAlign:"center",
                        x: '48%',
                        y: '45%',
                    }],
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} : {c}个"
                },
                grid: {
                    top: '12%',
                    left: '3%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true
                },
                series: [
                    {
                        name:'标题',
                        type:'pie',
                        center: ['50%', '50%'],
                        radius: ['45%', '70%'],
                        clockwise: false, //饼图的扇区是否是顺时针排布
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'outter',
                                formatter:function (parms){
                                    return parms.data.name+":"+parms.data.value + '个';
                                }
                            }
                        },
                        labelLine: {
                            show:false,
                            normal: {
                                length:8,
                                length2:5,
                                smooth:false,
                            }
                        },
                        data:this.pblmTypeObj.list
                    }
                ]
            };
            this.chart5.clear();
            this.chart5.setOption(option);
        },
        // initChart5_1(){
        //     this.chart5Title = "问题类别统计"+(this.pblmTypeObj.list.length>0?"("+this.pblmTypeObj.list[0].typeName+")":"")
        //     this.chart5 = echarts.init(document.getElementById('chart5'));
        //     var option = {
        //         color: [
        //             "#4150d8",
        //             "#28bf7e",
        //             "#ed7c2f",
        //             "#f2a93b",
        //             "#f9cf36",
        //             "#4a5bdc",
        //             "#4cd698",
        //             "#f4914e",
        //             "#fcb75b",
        //             "#ffe180",
        //             "#b6c2ff",
        //             "#96edc1"
        //         ],
        //         // title: [
        //         //     {
        //         //         text: '全部',
        //         //         subtext: this.pblmTypeObj.count + '个',
        //         //         textStyle:{
        //         //             fontSize:14,
        //         //             color:"#666",
        //         //             fontWeight:'normal'
        //         //         },
        //         //         subtextStyle: {
        //         //             fontSize: 14,
        //         //             color: '#666',
        //         //             fontWeight:'bold'
        //         //         },
        //         //         textAlign:"center",
        //         //         x: '48%',
        //         //         y: '45%',
        //         // }],
        //         legend:{
        //             type: 'scroll',
        //             orient:'vertical',
        //             icon: 'circle', //图例形状
        //             top:'25%',
        //             bottom:'25%',
        //             right:'2%',
        //             y:'center',
        //             textStyle: { //图例文字的样式
        //                 color: '#77797e',
        //                 fontSize: 12
        //             },
        //             pageButtonPosition:'start',
        //             pageIconColor: '#77797e', //翻页下一页的三角按钮颜色
        //             pageIconInactiveColor: '#77797e', //翻页（即翻页到头时）
        //             pageIconSize: 10, //翻页按钮大小
        //             pageFormatter: '',//隐藏翻页的数字
        //             pageButtonItemGap: -6,//翻页按钮的两个之间的间距
        //             formatter: function (name) {
        //               return name.length > 10 ? name.substr(0, 10) + '...' : name
        //             },
        //         },
        //         tooltip : {
        //             trigger: 'item',
        //             formatter: "{b} : {c}个"
        //         },
        //         series: [
        //             {
        //                 name:'标题',
        //                 type:'pie',
        //                 center: ['25%', '50%'],
        //                 radius: ['0%', '70%'],
        //                 clockwise: false, //饼图的扇区是否是顺时针排布
        //                 avoidLabelOverlap: false,
        //                 label: {
        //                     normal: {
        //                         show: false,
        //                         position: 'outter',
        //                         formatter:function (parms){
        //                             return parms.data.name+":"+parms.data.value + '个';
        //                         }
        //                     }
        //                 },
        //                 labelLine: {
        //                     show:false,
        //                     normal: {
        //                         length:8,
        //                         length2:5,
        //                         smooth:false,
        //                     }
        //                 },
        //                 data:this.pblmTypeObj.list
        //             }
        //         ]
        //     };
        //     this.chart5.clear();
        //     this.chart5.setOption(option);
        // },
        initChart5_2(adName){
            this.chart5Title = "督查类别统计问题数"+(adName?"("+adName+")":"");
            this.chart5 = echarts.init(document.getElementById('chart5'));
            var option = {
                color: [
                    "#4150d8",
                    "#28bf7e",
                    "#ed7c2f",
                    "#f2a93b",
                    "#f9cf36",
                    "#4a5bdc",
                    "#4cd698",
                    "#f4914e",
                    "#fcb75b",
                    "#ffe180",
                    "#b6c2ff",
                    "#96edc1"
                ],
                title: [
                    {
                        text: this.chart5Title,
                        textStyle:{
                            fontSize:14,
                            color:"#666",
                            fontWeight:'bold'
                        },
                        textAlign:"center",
                        x: '50%',
                        y: 'top',
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '6%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this.AreaObjTypeObj.xAxis,
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        rotate:40,
                        textStyle:{
                            color:"#a4a4a4"
                        },
                        formatter: function(val) {
                            if(val){
                                return val.length>5? val.substring(0,5):val;
                            }
                        }
                    }
                }],
                yAxis: [{
                    name:"数量(个)",
                    type:'value',
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        rotate:40,
                        textStyle:{
                            color:"#a4a4a4"
                        }
                    }
                }],
                series: []
            };
            this.AreaObjTypeObj.list.forEach((item,index)=>{
                var color = this.AreaObjTypeObj.list.length-1 == index?[30, 30, 0, 0]:[0,0,0,0];
                var obj = {
                    name: item.name,
                    type: 'bar',
                    stack:"all",
                    data: item.value,
                    barWidth: '8px',
                    itemStyle: {
                        normal: {
                            show: true,
                            barBorderRadius:color,
                            borderWidth: 0
                        }
                    }
                }
                option.series.push(obj);
            })
            this.chart5.clear();
            this.chart5.setOption(option);
        },
        // initRangChart1(){
        //     this.chartRang = echarts.init(document.getElementById('chartRang'));
        //     var option = {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '15%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '3%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             data: this.rangeListObj.xAxis1,
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 },
        //                 formatter: function(val) {
        //                     if(val){
        //                         return val.length>5? val.substring(0,5):val;
        //                     }
        //                 }
        //             }
        //         }],
        //         yAxis: [{
        //             name:"问题数(个)",
        //             type:'value',
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             }
        //         }],
        //         series: [{
        //             name: "问题数",
        //             type: 'bar',
        //             data: this.rangeListObj.list1,
        //             barWidth: '20px',
        //             itemStyle: {
        //                 normal: {
        //                     show: true,
        //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //                         offset: 0,
        //                         color: '#31d3ff'
        //                     }, {
        //                         offset: 1,
        //                         color: '#33b1ff'
        //                     }]),
        //                     barBorderRadius: [30, 30, 0, 0],
        //                     borderWidth: 0,
        //                 }
        //             }
        //         }]
        //     };
        //     this.chartRang.clear();
        //     this.chartRang.setOption(option);
        // },
        // initRangChart2(){
        //     this.chartRang = echarts.init(document.getElementById('chartRang'));
        //     var option = {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '15%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '3%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             data: this.rangeListObj.xAxis2,
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 },
        //                 formatter: function(val) {
        //                     if(val){
        //                         return val.length>5? val.substring(0,5):val;
        //                     }
        //                 }
        //             }
        //         }],
        //         yAxis: [{
        //             name:"整改数(个)",
        //             type:'value',
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             }
        //         }],
        //         series: [{
        //             name: "整改数",
        //             type: 'bar',
        //             data: this.rangeListObj.list2,
        //             barWidth: '20px',
        //             itemStyle: {
        //                 normal: {
        //                     show: true,
        //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //                         offset: 0,
        //                         color: '#31d3ff'
        //                     }, {
        //                         offset: 1,
        //                         color: '#33b1ff'
        //                     }]),
        //                     barBorderRadius: [30, 30, 0, 0],
        //                     borderWidth: 0,
        //                 }
        //             }
        //         }]
        //     };
        //     this.chartRang.clear();
        //     this.chartRang.setOption(option);
        // },
        // initRangChart3(){
        //     this.chartRang = echarts.init(document.getElementById('chartRang'));
        //     var option = {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '15%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '3%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             data: this.rangeListObj.xAxis3,
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 },
        //                 formatter: function(val) {
        //                     if(val){
        //                         return val.length>5? val.substring(0,5):val;
        //                     }
        //                 }
        //             }
        //         }],
        //         yAxis: [{
        //             name:"整改率(%)",
        //             type:'value',
        //             axisLine:{
        //                 lineStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             },
        //             axisLabel:{
        //                 rotate:40,
        //                 textStyle:{
        //                     color:"#a4a4a4"
        //                 }
        //             }
        //         }],
        //         series: [{
        //             name: "整改率",
        //             type: 'bar',
        //             data: this.rangeListObj.list3,
        //             barWidth: '20px',
        //             itemStyle: {
        //                 normal: {
        //                     show: true,
        //                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //                         offset: 0,
        //                         color: '#31d3ff'
        //                     }, {
        //                         offset: 1,
        //                         color: '#33b1ff'
        //                     }]),
        //                     barBorderRadius: [30, 30, 0, 0],
        //                     borderWidth: 0,
        //                 }
        //             }
        //         }]
        //     };
        //     this.chartRang.clear();
        //     this.chartRang.setOption(option);
        // },
        initCompare1(){
            this.chartComPare = echarts.init(document.getElementById('chartComPare'));
            var option = {
                color: [
                    "#2ca1ff",
                    "#0adbfa",
                    "#febe13",
                    "#65e5dd",
                    "#7b2cff",
                    "#fd5151",
                    "#f071ff",
                    "#85f67a"
                ],
                tooltip: {
                    trigger: 'axis',
                },
                // legend:{
                //     top:'5%',
                //     bottom:'3%',
                //     pageIconColor: '#909399', //翻页下一页的三角按钮颜色
                //     pageIconInactiveColor: '#909399', //翻页（即
                //     pageIconSize: 14, //翻页按钮大小
                //     type: 'scroll',
                //     icon: "circle",
                //     itemWidth: 10,  // 设置宽度
                //     itemHeight: 10, // 设置高度
                //     itemGap: 10, // 设置间距，
                //     x:'center',      //可设定图例在左、右、居中
                //     y:'top',
                //     textStyle: { //图例文字的样式
                //         color: '#909399',
                //         fontSize: 12
                //     },
                // },
                grid: {
                    top: '15%',
                    left: '10%',
                    right: '0%',
                    bottom: '10%',
                },
                xAxis: [{
                    type: 'category',
                    data: this.compareListObj.xAxis,
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#a4a4a4"
                        },
                        formatter: function(val) {
                            if(val){
                                return val.length>5? val.substring(0,5):val;
                            }
                        }
                    }
                }],
                yAxis: [{
                    name:"对象数(个)",
                    type:'value',
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        rotate:40,
                        textStyle:{
                            color:"#a4a4a4"
                        }
                    }
                }],
                series: []
            };
            this.compareListObj.list.forEach((item,index)=>{
                // var color = this.compareListObj.list.length-1 == index?[30, 30, 0, 0]:[0,0,0,0];
                var obj = {
                    name: item.typeName,
                    type: 'bar',
                    stack:"all",
                    data: item.typeValue,
                    barWidth: '20px',
                    itemStyle: {
                        normal: {
                            show: true,
                            // barBorderRadius: color,
                            borderWidth: 0
                        }
                    }
                }
                option.series.push(obj);
            })
            this.chartComPare.clear();
            this.chartComPare.setOption(option);
        },
        initCompare2(){
            this.chartComPare = echarts.init(document.getElementById('chartComPare'));
            var option = {
                color: [
                    "#2ca1ff",
                    "#0adbfa",
                    "#febe13",
                    "#65e5dd",
                    "#7b2cff",
                    "#fd5151",
                    "#f071ff",
                    "#85f67a"
                ],
                tooltip: {
                    trigger: 'axis',
                },
                // legend:{
                //     top:'5%',
                //     bottom:'3%',
                //     pageIconColor: '#909399', //翻页下一页的三角按钮颜色
                //     pageIconInactiveColor: '#909399', //翻页（即
                //     pageIconSize: 14, //翻页按钮大小
                //     type: 'scroll',
                //     icon: "circle",
                //     itemWidth: 10,  // 设置宽度
                //     itemHeight: 10, // 设置高度
                //     itemGap: 10, // 设置间距，
                //     x:'center',      //可设定图例在左、右、居中
                //     y:'top',
                //     textStyle: { //图例文字的样式
                //         color: '#909399',
                //         fontSize: 12
                //     },
                // },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '0%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this.compareListObj.xAxis,
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#a4a4a4"
                        },
                        formatter: function(val) {
                            if(val){
                                return val.length>5? val.substring(0,5):val;
                            }
                        }
                    }
                }],
                yAxis: [{
                    name:"问题数(个)",
                    type:'value',
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        rotate:40,
                        textStyle:{
                            color:"#a4a4a4"
                        }
                    }
                }],
                series: []
            };
            this.compareListObj.list.forEach((item,index)=>{
                // var color = this.compareListObj.list.length-1 == index?[30, 30, 0, 0]:[0,0,0,0];
                var obj = {
                    name: item.typeName,
                    type: 'bar',
                    stack:"all",
                    data: item.typeValue,
                    barWidth: '20px',
                    itemStyle: {
                        normal: {
                            show: true,
                            // barBorderRadius: color,
                            borderWidth: 0
                        }
                    }
                }
                option.series.push(obj);
            })
            this.chartComPare.clear();
            this.chartComPare.setOption(option);
        },
        initCompare3(){
            this.chartComPare = echarts.init(document.getElementById('chartComPare'));
            var option = {
                color: [
                    "#2ca1ff",
                    "#0adbfa",
                    "#febe13",
                    "#65e5dd",
                    "#7b2cff",
                    "#fd5151",
                    "#f071ff",
                    "#85f67a"
                ],
                tooltip: {
                    trigger: 'axis',
                },
                // legend:{
                //     top:'5%',
                //     bottom:'3%',
                //     pageIconColor: '#909399', //翻页下一页的三角按钮颜色
                //     pageIconInactiveColor: '#909399', //翻页（即
                //     pageIconSize: 14, //翻页按钮大小
                //     type: 'scroll',
                //     icon: "circle",
                //     itemWidth: 10,  // 设置宽度
                //     itemHeight: 10, // 设置高度
                //     itemGap: 10, // 设置间距，
                //     x:'center',      //可设定图例在左、右、居中
                //     y:'top',
                //     textStyle: { //图例文字的样式
                //         color: '#909399',
                //         fontSize: 12
                //     },
                // },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '0%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this.compareListObj.xAxis,
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:"#a4a4a4"
                        },
                        formatter: function(val) {
                            if(val){
                                return val.length>5? val.substring(0,5):val;
                            }
                        }
                    }
                }],
                yAxis: [{
                    name:"整改数(个)",
                    type:'value',
                    axisLine:{
                        lineStyle:{
                            color:"#a4a4a4"
                        }
                    },
                    axisLabel:{
                        rotate:40,
                        textStyle:{
                            color:"#a4a4a4"
                        }
                    }
                }],
                series: []
            };
            this.compareListObj.list.forEach((item,index)=>{
                // var color = this.compareListObj.list.length-1 == index?[30, 30, 0, 0]:[0,0,0,0];
                var obj = {
                    name: item.typeName,
                    type: 'bar',
                    stack:"all",
                    data: item.typeValue,
                    barWidth: '20px',
                    itemStyle: {
                        normal: {
                            show: true,
                            // barBorderRadius: color,
                            borderWidth: 0
                        }
                    }
                }
                option.series.push(obj);
            })
            this.chartComPare.clear();
            this.chartComPare.setOption(option);
        },
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style scoped>
  .content{
     width: 100%;
     height:100%;
     background: #F8F8F8;
     position: relative;
  }
  .mainBox{
     position: absolute;
     z-index: 300;
     top:20px;
     left:14px;
     width: calc(100% - 28px);
     height:calc(100% - 40px);
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .slideBar{
     width: 440px;
     max-width: 440px;
     height:100%;
  }
  .centerBar{
    width: calc(100% - 880px);
    height:100%;
    position: relative;
    background:#F0FAFF;
  }
  .slideBar-left-top{
    width: 100%;
    height:25%;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
  }
  .slideBar-left-bottom{
    width: 100%;
    height:calc(75% - 10px);
    margin-top: 10px;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
  }
  .slideBar-right-top{
    width: 100%;
    height:20%;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
  }
  .slideBar-right-center{
    width: 100%;
    height:calc(37% - 10px);
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
    margin-top: 10px;
  }
  .slideBar-right-bottom{
    width: 100%;
    height:calc(43% - 10px);
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
    margin-top: 10px;
  }
  .slideBar-title{
     width: calc(100% - 39px);
     height:39px;
     margin: 0 auto;
     border-bottom: 1px solid #DDDDDD;
     display: flex;
     align-items: center;
     position: relative;
  }
  .slideBar-title img{
    width: 18px;
    height:18px;
    margin-right: 10px;
  }
  .slideBar-title span.titleText{
    font-size: 18px;
    font-family: 黑体;
    font-weight: bold;
    color: #222222;
  }
  .titlePicker{
    width: 110px;
    position: absolute;
    z-index: 1001;
    top:5px;
    right:0px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  .slideRightUl{
    list-style: none;
    display: flex;
    align-items: center;
    height:100%;
  }
  .slideRightUl li:first-child{
    margin-left: 0px !important;
  }
  .slideRightUl li{
    height:calc(100% - 2px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: 黑体;
    font-weight: bold;
    color: #777777;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-left: 18px;
  }
  .is-active{
    font-size: 18px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    border-bottom: 2px solid #0896eb !important;
    color:#222222 !important;
  }
  .slideBar-content{
    width: calc(100% - 40px);
    margin: 0 auto;
    height:calc(100% - 40px);
  }

  .slideBar-table{
    width: calc(100% - 40px);
    margin-left: 20px;
    height:calc(55% - 20px);
    overflow: auto;
  }
  .slideBar-pie{
    width: calc(100% - 40px);
    margin-left: 20px;
    height:calc(45% - 20px);
  }
  .ul-notify{
    width: 100%;
    line-height: 30px;
    list-style: none;
    height: 100%;
    overflow-y: auto;
  }
  .ul-notify li{
    width: 100%;
    line-height: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #817c7c;
    border-bottom: 1px dashed #cdced9;
    cursor: pointer;
  }
  .ul-notify li:hover{
    color: #33b1ff;
  }
  .ul-notify li em{
    display: block;
    width: 4px;
    height:4px;
    border-radius: 30px;
    margin-right: 10px;
  }
  .ul-notify li span:first-child{
    display: flex;
    align-items: center;
  }
  .ul-notify li span:nth-child(2){
    width: calc(100% - 20px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap!important;
  }
  .el-table {
     margin-top: 5px;
  }
  .el-table /deep/ th{
     background: #E1F0FF !important;
     color: #507896!important;
  }
  .el-table /deep/ th{
     box-shadow: none !important;
  }
  .el-table /deep/ tr{
     box-shadow: none !important;
  }
  .rangText{
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #0078FF;
  }
  .rangeTable{
     overflow: auto;
  }
  #chart4{
     width: 100%;
     height:100%;
  }
  .backBtn{
    position: absolute;
    z-index: 1002;
    top:10px;
    right:10px;
  }
  .summary-ul{
     list-style: none;
     width: 100%;
     height:100%;
  }
  .summary-ul li{
    float: left;
    width: calc(33.33% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    height: calc(33.33% - 5px);
    margin-top: 5px;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px 0px rgba(100,180,255,0.5);
    border-radius: 5px;
    cursor: pointer;
  }
  .summary-ul li p{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #666666;
  }
  .fontNum-1{
    color:#00B4FF;
  }
  .fontNum-2{
    color:#738CFF;
  }
  .fontNum-3{
    color: #FF9141;
  }
  .fontNum-4{
    color: #00C3A5;
  }
  .fontNum-5{
    color:#FF6E96;
  }
  .fontNum-6{
    color:#FF6ECD;
  }
  .fontNumPercent{
     position: absolute;
     z-index:1200;
     right:10px;
     bottom:0px;
     font-size: 10px;
  }
  .fontNumPercent img{
    width: 18px;
    height:20px;
  }
  .summary-content{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold !important;
    position: relative;
  }
  .officeNotice{
     list-style: none;
     width: 100%;
     height:calc(100% - 40px);
     margin-top: 20px;
     padding: 0;
     cursor: pointer;
  }
  .officeNotice li:first-child{
    padding: 10px;
    display: flex;
    float: left;
    justify-content: center;
    list-style: none;
    width: calc(100% - 40px);
    height: calc(100% - 20px);
    margin-left: 20px;
    /* padding: 0; */
    /*margin-right: 5px;*/
    background: url("../../assets/fujian/syx.png") no-repeat;
    background-size: 100% 100%;
    /* box-shadow: 0px 1px 5px 0px rgb(255 125 30 / 40%); */
    border: 1px solid #dddddd;
  }
  .officeNotice li:nth-child(2){
    padding: 10px;
    display: flex;
    float: left;
    list-style: none;
    width: calc(50% - 40px);
    height: calc(100% - 20px);
    margin: 0;
    /* padding: 0; */
    margin-left: 20px;
    background: url("../../assets/fujian/syx1.png") no-repeat;
    background-size: 100% 100%;
    /* box-shadow: 0px 1px 5px 0px rgb(255 125 30 / 40%); */
    border: 1px solid #dddddd;
  }
  .officeNotice li div:first-child{
    width: 30%;
    height:100%;
  }
  .officeNotice li div:nth-child(2){
    width: 30%;
    height:100%;
  }
  .officeNotice li div img{
    width: 65px;
    height:100%;
  }
  .officeNotice li div span:first-child{
    display: block;
    width: 100%;
    height:50%;
    text-align: center;
    font-size: 20px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: bold;
    color: #666666;
  }
  .officeNotice li div span:nth-child(2){
    display: block;
    width: 100%;
    height:50%;
    text-align: center;
    font-size: 20px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #4A4A4A;
  }
  .example{
     width: 120px;
     list-style: none;
     position: absolute;
     z-index:1005;
     right:10px;
     bottom:30px;
     background: #e2f1ff;
     box-shadow: 1px 1px 5px 0px rgb(156 158 167);
     border-radius: 3px;
  }
  .example li{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: bold;
    color: #4A4A4A;
  }
  .example li:first-child{
    border-bottom: 1px solid #DDDDDD;
    cursor: pointer;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .example li em{
    display: block;
    width: 20px;
    height:20px;
    margin-left: 15px;
    margin-right: 15px;
  }
  .example li:first-child:hover{
    color:#37AAFF !important;
  }
  /*.example li:nth-child(2){*/
  /*  border-bottom: 1px solid #DDDDDD;*/
  /*  cursor: pointer;*/
  /*}*/
  /*.example li:nth-child(2):hover{*/
  /*  color:#37AAFF !important;*/
  /*}*/
  .example li img{
     width: 20px;
     height:20px;
     margin-right: 15px;
     margin-left: 15px;
  }
  .exampleBack{
    width: 120px;
    list-style: none;
    position: absolute;
    z-index:1005;
    right:10px;
    top:5px;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.7);
    border-radius: 3px;
    cursor: pointer;
  }
  .exampleBack li{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    color: #4A4A4A;
    letter-spacing: 3px;
  }
  .exampleBack li:first-child{
    border-bottom: 1px solid #DDDDDD;
    cursor: pointer;
  }
  .exampleBack li:first-child:hover{
    color:#37AAFF !important;
  }
  .exampleBack li:nth-child(2):hover{
    color:#37AAFF !important;
  }
  .DictTitle{
     width: 100%;
     padding: 10px;
     font-weight: bold;
     font-size: 18px;
     text-align: center;
  }
  .pblmDictContent{
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 20px;
  }
  .level1Title{
    display: block;
    line-height: 30px;
    width: 100%;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #ebeef5;
  }
  .level2Title{
    display: block;
    width: 100%;
    line-height: 30px;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    text-indent: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .level3Title{
    display: block;
    line-height: 30px;
    width: 100%;
    padding: 10px;
    font-weight: bold;
    font-size: 14px;
    text-indent: 60px;
    border-bottom: 1px solid #ebeef5;
  }
  ::-webkit-scrollbar {
    width: 8px;
    background: #F5F5F5;
    box-shadow: inset 0px 0px 5px 0px rgba(180,180,180,0.4);
    border-radius: 4px;
  }

  /* 滚动条上的滚动滑块 */
  ::-webkit-scrollbar-thumb {
    background: #C8DCE6;
    border-radius: 3px;
  }
</style>