fj-dc-ui/.svn/pristine/25/25c26d2fbf4aeac1d4fe0dd806380330b6d64f78.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>
         <span class="titleSearch">年度:</span>
         <el-select v-model="selectDate" placeholder="年度" style="width: 80px;" @change="dateChange">
            <el-option v-for="item in yearList" :label="item.year" :value="item.year"></el-option>
         </el-select>
         <span class="titleSearch">批次:</span>
         <el-select v-model="selectBatch" placeholder="全部批次" style="width: 90px;" @change="batchChange" clearable>
           <el-option v-for="item in batchList" :label="item.batchName" :value="item.batch"></el-option>
         </el-select>
       </div>
       <div class="slideBar-content">
          <ul class="summary-ul">
             <li>
               <p>人员(个)</p>
               <p class="summary-content">
                 <countTo class="fontNum-1" :startVal='0' :endVal='statiscsData.PERSIZE' :duration='2000'></countTo>
               </p>
             </li>
            <li>
              <p>组(个)</p>
              <p class="summary-content">
                <countTo class="fontNum-3" :startVal='0' :endVal='statiscsData.GROUPSIZE' :duration='2000'></countTo>
              </p>
            </li>
            <li>
              <p>工程(个)</p>
              <p class="summary-content">
                <countTo class="fontNum-5" :startVal='0' :endVal='statiscsData.OBJSIZE' :duration='2000'></countTo>
              </p>
            </li>
             <li>
               <p>问题数(个)</p>
               <p class="summary-content">
                 <countTo class="fontNum-2" :startVal='0' :endVal='statiscsData.PBLMSIZE' :duration='2000'></countTo>
               </p>
             </li>
             <li>
               <p>整改数(个)</p>
               <p class="summary-content">
                 <countTo class="fontNum-4" :startVal='0' :endVal='statiscsData.MENDSIZE' :duration='2000'></countTo>
               </p>
             </li>
             <li>
               <p>销号数(个)</p>
               <p class="summary-content">
                 <countTo class="fontNum-6" :startVal='0' :endVal='statiscsData.PBLMLOGSIZE' :duration='2000'></countTo>
               </p>
             </li>
          </ul>
       </div>
     </div>
     <div class="slideBar-left-bottom">
       <div class="slideBar-title">
         <img src="../../assets/fujian/jczyflwts.png"/>
         <span class="titleText">稽察专业分类问题数</span>
       </div>
       <div class="slideBar-table" id="chart2">

       </div>
       <div class="slideBar-title">
         <img src="../../assets/fujian/ds.png"/>
         <span class="titleText">稽察地市问题分布</span>
       </div>
       <div class="slideBar-pie" id="chart4"></div>
     </div>
   </div>
   <div class="centerBar">
     <ul class="exampleBack">
       <li v-show="adCode"><span>当前页面数据:{{adName}}</span><span @click="backProvince" style="text-decoration: underline;">返回全省数据</span></li>
     </ul>
     <ul class="example">
       <li @click="hrefClick('/queryResults')">成果查询</li>
       <li @click="hrefClick('/inspection_resultTable')">汇总成果</li>
       <li @click="hrefClick('inspection_chart')">汇总统计</li>
       <li @click="hrefClick('/report_jcbg_doc')">稽察报告</li>
     </ul>

     <div class="item-content-center" id="chart1"></div>
   </div>
   <div class="slideBar">
     <div class="slideBar-right-top">
       <div class="slideBar-title">
         <img src="../../assets/fujian/level.png"/>
         <span class="titleText">问题等级统计</span>
       </div>
       <div class="slideBar-content" id="chart5">

       </div>
     </div>
     <div class="slideBar-right-center">
       <div class="slideBar-title">
         <img src="../../assets/fujian/tzgg.png"/>
         <span class="titleText">通知公告</span>
       </div>
       <div class="slideBar-content box-list">
         <ul>
           <li v-if="messageList!=null && messageList.length>0" v-for="(item,index) in messageList" @click="showMessage(item)" :title="item.title"><img src="../../assets/fujian/dot.png"/><span>{{item.title}}</span><span>{{formatDateTime(item.intm)}}</span></li>
         </ul>
       </div>
     </div>
     <div class="slideBar-right-bottom">
       <div class="slideBar-title">
         <img src="../../assets/fujian/gc.png"/>
         <span class="titleText">工程列表信息</span>
       </div>
       <div class="slideBar-content rangeTable box-list">
         <ul>
           <li v-if="projectList!=null && projectList.length>0" v-for="(item,index) in projectList" @click="showProPblmDetail(item)" :title="item.title"><img src="../../assets/fujian/dot.png"/><span>{{item.name?item.name:item.ojbNm}}</span><span>{{formatDateTime(item.intm)}}</span></li>
         </ul>
       </div>
     </div>
   </div>
  </div>
 <messageDetail  v-if="isShowMessageDetail" :data="messageData" @closeDialog="closeDialogNotice"></messageDetail>
 <proPblmDetail v-if="proPblmVisible" :proPblmId="proPblmId" :title="proTitle" @closeDialog="closeDialog"></proPblmDetail>
 <showMessage v-if="showMessageVisible" :clctzUrl="clctzUrl" @closeDialog="closeMessageDialog"></showMessage>
 <personList  v-if="isShowPersonList" :param="personParam" @closeDialogPerson="closeDialogPerson"></personList>
 <groupList  v-if="isShowGroupList" :param="groupParam" @closeDialogGroup="closeDialogGroup"></groupList>
 <objList  v-if="isShowObjList" :param="objParam" @closeDialogObj="closeDialogObj"></objList>
 <pblmList  v-if="isShowPblmList" :param="pblmParam" @closeDialogPblm="closeDialogPblm"></pblmList>
 </div>
</template>

<script>
    import {hostUrl} from '@util/global_variable.js'
    import countTo from 'vue-count-to';
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    import echarts from "echarts";
    // import  'echarts-gl';
    import '@util/echarts-gl.min.js';
    import axios from 'axios' //引入axios
    import request from "@util/gw_ajax_request.js";
    import {formatDate,formatDateTimstamp} from "@util/gw_date.js"
    import proPblmDetail from "./proPblmDetail"
    import showMessage from "./showMessage"
    import personList from "./personList_jc";
    import groupList from "./groupList_jc";
    import objList from "./objList_jc";
    import pblmList from "./pblmList_jc";
    import messageDetail from "./messageDetail";
    import {
        getMessage,
        getJcPblmCount,
        getYear,
        getBatch,
        getJcData,
        getJcTotalData,
        getTopTacPblm,
        getQuestionImgList,
        getTopTacPblmvideo,
        getJcDataProject
    } from "../../api/homeMainView.js";
    export default {
        components: {
            countTo,
            proPblmDetail,
            showMessage,
            personList,
            groupList,
            objList,
            pblmList,
            messageDetail
        },
        props: [],
        data() {
            //这里存放数据
            return {
                currentHeight:window.innerHeight,
                title:"福建水利监管可视化",
                turnvalue:"0",
                fullvalue:"0",
                turnName:"全屏",
                selectDate:new Date().getFullYear().toString(),
                selectDateName:new Date().getFullYear().toString(),
                isDateVisible:false,
                selectBatch:"",
                selectBatchName:"全部",
                isBatchVisible:false,
                iconDown:"el-icon-arrow-down myselect",
                iconUp:"el-icon-arrow-up myselect",
                iconBatch:"el-icon-arrow-down myselect",
                iconDate:"el-icon-arrow-down myselect",
                chart1:null,
                chart2:null,
                // chart3:null,
                chart4:null,
                chart5:null,
                currentTimestap:"",
                currentWeek:"",
                currentTime:"",
                //督察类别
                batchList:[],
                yearList:[],
                //统计看板数据
                statiscsData:{
                    GROUPSIZE: 0,//组
                    MENDSIZE: 0,//整改
                    OBJSIZE: 0,//工程
                    PBLMLOGSIZE: 0,//归档数
                    PBLMSIZE: 0,//问题数
                    PERSIZE: 0//人员个数
                },
                //地图数据
                chartMapData:{
                    mapPercent:[],
                    geoCoordMap:{},
                    geoCoordMapList:[],
                },
                //督察类别数量
                chartDcTypeData:{
                    count:0,
                    dataList:[]
                },
                chartObjData:{
                    xData:[],
                    dataList:[]
                },
                chartPblmData:{
                    xData:[],
                    dataList:[]
                },
                chartMendPblmData:{
                    xData:[],
                    dataList:[]
                },
                chartPblmTypeData:{
                    info:0,
                    warn:0,
                    fatal:0,
                    error:0
                },
                messageList:[],
                bannerList:[],
                bannerHeight:"0",
                addvcdList:[],
                adCode:"",
                adName:"",
                nearFaceList:[],
                questionImgList:[],
                questionVideoList:[],
                timerData:null,
                proPblmVisible:false,
                proPblmId:"",
                projectList:[],
                proTitle:"",
                adCode:"",
                showMessageVisible:false,
                clctzUrl:"",
                personParam:{},
                isShowPersonList:false,
                groupParam:{},
                isShowGroupList:false,
                isShowObjList:false,
                objParam:{},
                isShowPblmList:false,
                pblmParam:{},
                isShowMessageDetail:false,
                messageData:null

            }
        },
        //监听属性 类似于data概念
        computed: {
            formatDateTime() {
                return formatDateTimstamp
            },
            hostUrl(){
                return hostUrl
            },
            organNm() {
                return localStorage.getItem('currentOrgNm') ? localStorage.getItem('currentOrgNm') : ''
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
            currentOrgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem('currentOrgId') : ''
            },
        },
        //监控data中的数据变化
        watch: {

        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.initYear();
            this.initBatch();
            let currentOrgId = localStorage.getItem("currentOrgId")
            if(currentOrgId == '041'){
                this.title = '水利稽察'
            }else if(this.organCode.indexOf("33")>-1){
                this.title = localStorage.getItem("currentOrgNm")+'水利稽察数字化应用'
            }else if(localStorage.getItem('currentRlcode').substring(0,2)=='37'){
                this.title = '山东省水利稽察信息系统'
            }else if(currentOrgId == '055'){
                this.title = '海南水务稽察平台'
            }else if (localStorage.getItem('currentRlcode').substring(0,2)=='44') {
                this.title = '广东省水利稽察'
            }else{
                this.title = localStorage.getItem("currentOrgNm")+'水利稽察'
            }
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            var _self = this;
            // document.addEventListener('click',function(e){
            //     if(e.target.className!='myselect'){
            //         _self.isDateVisible = false;
            //         _self.isBatchVisible = false;
            //         _self.iconDate = _self.iconDown;
            //         _self.iconBatch = _self.iconDown;
            //     }
            // })
            // setInterval(function(){ _self.myTimer() }, 1000);
            this.initStatiscsData(null);
            this.initData();
            this.initData1();
            this.initMessage();
            this.getProjectList(null);
            // this.initNearFace(this.organCode);
            // this.initQuestionImg(this.organCode);
            // this.initQuestionVideo(this.organCode);
            this.$nextTick(function () {
                // var height= this.$refs.banner.offsetHeight;
                // this.bannerHeight = height+"px";
                var _self = this;
                window.onresize = function() {
                    // var height= _self.$refs.banner.offsetHeight;
                    // _self.bannerHeight = height+"px";
                    _self.resizeCharts();
                }
            });
            this.timerData = setInterval(this.IntervalData, 600000);
        },
        //方法集合
        methods: {
            backProvince(){
              this.adCode = null;
              this.initStatiscsData(null);
              this.initData();
              this.initData1();
              this.initMessage();
              this.getProjectList(null);
            },
            closeDialogPerson(){
                this.isShowPersonList = false;
                this.personParam = {};
            },
            closeDialogGroup(){
                this.isShowGroupList = false;
                this.groupParam = {};
            },
            closeDialogObj(){
                this.isShowObjList = false;
                this.objParam = {};
            },
            closeDialogPblm(){
                this.isShowPblmList = false;
                this.pblmParam = {};
            },
            showPerson(){
                this.isShowPersonList = true;
                this.personParam["year"] = this.selectDate;
                this.personParam["batch"] = this.selectBatch;
                this.personParam["adCode"] = this.adCode;
            },
            showGroup(){
                this.isShowGroupList = true;
                this.groupParam["year"] = this.selectDate;
                this.groupParam["batch"] = this.selectBatch;
                this.groupParam["adCode"] = this.adCode;
            },
            showObj(){
                this.isShowObjList = true;
                this.objParam["year"] = this.selectDate;
                this.objParam["batch"] = this.selectBatch;
                this.objParam["adCode"] = this.adCode;
            },
            showPblm(){
                this.isShowPblmList = true;
                this.pblmParam["year"] =  this.currentCode;
                this.pblmParam["batch"] = this.selectDate;
                this.pblmParam["adCode"] = this.selectType;
            },
            hrefClick(path){
                this.$router.push({
                    path: path,
                    query:{
                        date:this.selectDate,
                        batch:this.selectBatch,
                        adCode:this.adCode
                    }
                });
            },
            getProjectList(adCode){
                this.projectList = [];
                var params = {
                    year:this.selectDate,
                    batch:this.selectBatch,
                    adCode:adCode
                }
                request.post(`/tac/insp/year/batch/obj/getObjPage`,params).then(res=>{
                    if(res.success){
                        this.loading = false
                        this.projectList = res.data.list
                    }else{
                        this.loading = false
                        this.$message.error(res.message)
                    }
                }).catch(err=>{
                    this.$message.error(err)
                })
            },
            closeDialogNotice(){
                this.isShowMessageDetail = false;
                this.messageData = null;
            },
            closeDialog(){
                this.proPblmVisible = false;
                this.proPblmId = "";
            },
            closeMessageDialog(){
                this.showMessageVisible = false;
            },
            showProPblmDetail(item){
                this.proPblmVisible = true;
                this.proPblmId = item.id;
                this.proTitle = item.name?item.name:item.ojbNm;
            },
            showMessage(item) {
                if(item.clcUrl){
                    this.clctzUrl=this.hostUrl + item.clcUrl;
                    this.showMessageVisible=true;
                }else{
                    this.isShowMessageDetail = true;
                    this.messageData = item;
                }
            },
            urlReplace(d){
                return this.hostUrl;
            },
            showHideDate(){
                this.isDateVisible = !this.isDateVisible;
                this.iconDate = (this.iconDate==this.iconDown?this.iconUp:this.iconDown);
            },
            showHideType(){
                this.isBatchVisible = !this.isBatchVisible;
                this.iconBatch = (this.iconBatch==this.iconDown?this.iconUp:this.iconDown);
            },
            IntervalData(){
                this.initStatiscsData(null);
                this.initData();
                this.initData1();
                this.initMessage();
                this.initNearFace(this.organCode);
                this.initQuestionImg(this.organCode);
                this.initQuestionVideo(this.organCode);
            },
            resizeCharts(){
                this.chart1.resize();
                this.chart2.resize();
                // this.chart3.resize();
                this.chart4.resize();
                this.chart5.resize();
            },
            initMessage(){
                var _self = this;
                getMessage({pageNum:1,pageSize:10,app:"2"}).then((res) => {
                    _self.messageList = res.data.list;
                });
            },
            initNearFace(adCode){
                var _self = this;
                getTopTacPblm(adCode).then((res) => {
                    _self.nearFaceList = res.data;
                    _self.$nextTick(function(){
                        var  ViewerDom = document.getElementById('nearFace1');
                        var  viewer = new Viewer(ViewerDom, {

                        })
                    });
                });
            },
            initQuestionImg(adCode){
                var _self = this;
                getQuestionImgList(adCode,this.selectBatch).then((res) => {
                    _self.questionImgList = res.data;
                });
            },
            initQuestionVideo(adCode){
                var _self = this;
                getTopTacPblmvideo(adCode).then((res) => {
                    _self.questionVideoList = res.data;
                });
            },
            dateChange(value){
                this.selectDate = value;
                // this.selectDateName = name;
                //this.iconDate = this.iconDown;
                // this.isDateVisible = false;
                this.initBatch();
                this.initData();
                this.initData1();
                this.initStatiscsData(null);
                this.getProjectList(null);
                this.adCode = "";

            },
            batchChange(value){
                this.selectBatch = value;
                // this.selectBatchName = value=="全部"?"全部":(value+" "+"("+name+")");
                // this.iconBatch = this.iconDown;
                // this.isBatchVisible = false;
                this.initData();
                this.initData1();
                this.initStatiscsData(null);
                this.getProjectList(null);
                this.adCode = "";
                // this.initNearFace(this.organCode);
                // this.initQuestionImg(this.organCode);
                // this.initQuestionVideo(this.organCode);
            },
            toVal(val){
                if(val!=null && val!=""){
                    return val.toFixed(2)
                }
                return 0;
            },
            initData(){
                var _self = this;
                _self.chartPblmTypeData.info = 0;
                _self.chartPblmTypeData.warn = 0;
                _self.chartPblmTypeData.fatal = 0;
                _self.chartPblmTypeData.error = 0;
                _self.chartObjData.xData = [];
                _self.chartObjData.dataList = [];
                _self.chartPblmData.xData = [];
                _self.chartPblmData.dataList = [];
                _self.chartMendPblmData.xData = [];
                _self.chartMendPblmData.dataList = [];
                _self.chartMapData.mapPercent = [];
                _self.chartMapData.geoCoordMap = [];
                _self.chartMapData.geoCoordMapList = [];
                _self.addvcdList = [];
                var list = [];
                var maxNum=0;
                getJcData({year:_self.selectDate,batch:_self.selectBatch,objType:"008"}).then((res) => {
                    if(res.data!=null && res.data.length>0){
                        for(var i = 0;i<res.data.length;i++){
                            if(res.data[i].adName!="合计"){
                                _self.chartObjData.xData.push(res.data[i].adName);
                                _self.chartObjData.dataList.push(res.data[i].objSize);
                                _self.chartPblmData.xData.push(res.data[i].adName);
                                _self.chartPblmData.dataList.push(res.data[i].pblmSize);
                                _self.chartMendPblmData.xData.push(res.data[i].adName);
                                _self.chartMendPblmData.dataList.push(res.data[i].mendSize);
                                var obj = {
                                    name:res.data[i].adName,
                                    value:_self.toVal(res.data[i].mendSizeRant)
                                }
                                _self.addvcdList.push({
                                    name:res.data[i].adName,
                                    value:res.data[i].adCode,
                                });
                                _self.chartMapData.mapPercent.push(obj);
                                _self.chartMapData.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd,res.data[i].lttd,res.data[i].adCode];
                                _self.chartMapData.geoCoordMapList.push({
                                    name:res.data[i].adName,
                                    value:res.data[i].pblmSize,
                                    adCode:res.data[i].adCode,
                                });
                                list.push(res.data[i].pblmSize);
                                maxNum = Math.max(...list)
                            }else{
                                _self.chartPblmTypeData.info = res.data[i].infoPlbm;
                                _self.chartPblmTypeData.warn = res.data[i].warmPlbm;
                                _self.chartPblmTypeData.fatal = res.data[i].errorPlbm;
                                _self.chartPblmTypeData.error = res.data[i].errorsPlbm;
                            }
                        }
                    }
                    // //debugger
                    _self.initChart1(maxNum);
                    // _self.initChart3();
                    _self.initChart4();
                    _self.initChart5();
                });
            },
            initDataCity(adCode){
                var _self = this;
                _self.chartPblmTypeData.info = 0;
                _self.chartPblmTypeData.warn = 0;
                _self.chartPblmTypeData.fatal = 0;
                _self.chartPblmTypeData.error = 0;
                _self.chartObjData.xData = [];
                _self.chartObjData.dataList = [];
                getJcData({year:_self.selectDate,batch:_self.selectBatch,adCode:adCode,objType:"008"}).then((res) => {
                    if(res.data!=null && res.data.length>0){
                        for(var i = 0;i<res.data.length;i++){
                            if(res.data[i].adName!="合计"){
                                _self.chartObjData.xData.push(res.data[i].adName);
                                _self.chartObjData.dataList.push(res.data[i].objSize);
                            }else{
                                _self.chartPblmTypeData.info = res.data[i].infoPlbm;
                                _self.chartPblmTypeData.warn = res.data[i].warmPlbm;
                                _self.chartPblmTypeData.fatal = res.data[i].errorPlbm;
                                _self.chartPblmTypeData.error = res.data[i].errorsPlbm;
                            }
                        }
                    }
                    // _self.initChart3();
                    // _self.initChart4();
                    _self.initChart5();
                });
            },
            getDataProjectPblm(adCode){
                var _self = this;
                _self.chartPblmData.xData = [];
                _self.chartPblmData.dataList = [];
                _self.chartMendPblmData.xData = [];
                _self.chartMendPblmData.dataList = [];
                getJcDataProject({year:_self.selectDate,batch:_self.selectBatch,adCode:adCode,objType:"008"}).then((res) => {
                    if(res.data!=null && res.data.length>0){
                        for(var i = 0;i<res.data.length;i++){
                            if(res.data[i].name!="合计"){
                                _self.chartPblmData.xData.push(res.data[i].name);
                                _self.chartPblmData.dataList.push(res.data[i].count);
                                _self.chartMendPblmData.xData.push(res.data[i].name);
                                _self.chartMendPblmData.dataList.push(res.data[i].mendSize==undefined?0:res.data[i].mendSize);
                            }
                        }
                    }
                    // _self.initChart3();
                    _self.initChart4();
                });
            },
            initData1(){
                var _self = this;
                _self.chartDcTypeData.dataList = [];
                _self.chartDcTypeData.count = 0;
                getJcPblmCount(_self.selectDate,_self.selectBatch,_self.organCode).then((res) => {
                    if(res.data!=null && res.data.length>0){
                        for(var i = 0;i<res.data.length;i++){
                            var obj = {
                                name: res.data[i].NAME+""+res.data[i].VALUE+"个",
                                value: res.data[i].VALUE
                            }
                            _self.chartDcTypeData.dataList.push(obj);
                            _self.chartDcTypeData.count+=res.data[i].VALUE;
                        }
                    }
                    _self.initChart2();
                });
            },
            initData1City(adCode){
                var _self = this;
                _self.chartDcTypeData.dataList = [];
                _self.chartDcTypeData.count = 0;
                getJcPblmCount(_self.selectDate,_self.selectBatch,adCode).then((res) => {
                    if(res.data!=null && res.data.length>0){
                        for(var i = 0;i<res.data.length;i++){
                            var obj = {
                                name: res.data[i].NAME+""+res.data[i].VALUE+"个",
                                value: res.data[i].VALUE
                            }
                            _self.chartDcTypeData.dataList.push(obj);
                            _self.chartDcTypeData.count+=res.data[i].VALUE;
                        }
                    }
                    _self.initChart2();
                });
            },
            initStatiscsData(adCode){
                var _self = this;
                var obj = {
                    year:_self.selectDate,
                    batch:_self.selectBatch,
                    adCode:adCode
                }
                _self.statiscsData = {
                    GROUPSIZE: 0,//组
                    MENDSIZE: 0,//整改
                    OBJSIZE: 0,//工程
                    PBLMLOGSIZE: 0,//归档数
                    PBLMSIZE: 0,//问题数
                    PERSIZE: 0//人员个数
                }
                getJcTotalData(obj).then((res) => {
                    if(res.data!=null){
                        _self.statiscsData.GROUPSIZE = parseInt(res.data.GROUPSIZE==null?0:res.data.GROUPSIZE);
                        _self.statiscsData.MENDSIZE = parseInt(res.data.MENDSIZE==null?0:res.data.MENDSIZE);
                        _self.statiscsData.OBJSIZE = parseInt(res.data.OBJSIZE==null?0:res.data.OBJSIZE);
                        _self.statiscsData.PBLMLOGSIZE = parseInt(res.data.PBLMLOGSIZE==null?0:res.data.PBLMLOGSIZE);
                        _self.statiscsData.PBLMSIZE = parseInt(res.data.PBLMSIZE==null?0:res.data.PBLMSIZE);
                        _self.statiscsData.PERSIZE = parseInt(res.data.PERSIZE==null?0:res.data.PERSIZE);
                    }
                });
            },
            initYear(){
                var _self = this;
                _self.yearList = [];
                getYear().then((res) => {
                    if(res.data!=null && res.data.length>0){
                        _self.yearList = res.data;
                    }
                });
            },
            initBatch(){
                var _self = this;
                _self.batchList = [];
                // getBatch().then((res) => {
                //     if(res.data!=null && res.data.length>0){
                //         _self.batchList = res.data;
                //         _self.batchList.push({batch:"全部",id:""})
                //     }
                // });
                var params = {
                    year:this.selectDate,
                }
                request.post(`/tac/insp/year/batch/area/areasListByBatch`,params).then(res=>{
                    if(res.success){
                        if(res.data!=null && res.data.length>0){
                            res.data.forEach((item)=>{
                                item.batchName = item.batch+item.adName
                            })
                            _self.batchList = res.data;
                        }
                    }else{
                    }
                })
            },
            slideHeader(){
                if(this.turnvalue=='0'){
                    var docElm = document.documentElement;
                    //W3C
                    if(docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    }
                    //FireFox
                    else if(docElm.mozRequestFullScreen) {
                        docElm.mozRequestFullScreen();
                    }

                    //Chrome等
                    else if(docElm.webkitRequestFullScreen) {
                        docElm.webkitRequestFullScreen();
                    }

                    //IE11
                    else if(docElm.msRequestFullscreen) {
                        docElm.msRequestFullscreen();
                    }
                    document.getElementById("mainBox").style.height = window.screen.height+"px";
                    this.turnvalue = "1";
                    this.turnName = "收缩";
                    this.$emit('turnHandle',"1");
                    this.resizeCharts();
                }else{
                    this.$nextTick(function () {
                        // //W3C
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        }
                        //FireFox
                        else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        }
                        //Chrome等
                        else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        }
                        //IE11
                        else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                    })
                    document.getElementById("mainBox").style.height = (this.currentHeight-86)+"px";
                    this.turnvalue = "0";
                    this.$emit('turnHandle',"0");
                    this.turnName = "全屏";
                }
            },
            initAddVcdFeatures(){
                let geoJsonName = this.organCode.substr(0, 6) + ".json";
                return axios.get('/src/assets/addvGeoData/' + geoJsonName);
            },
            async initChart1(maxNum) {
                // //debugger
                var _self = this;
                // 动态计算柱形图的高度（定一个max）
                function lineMaxHeight() {
                   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]?parseFloat(_self.chartMapData['geoCoordMap'+index][item.name][1]):0) + parseFloat(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,
                                selected:false
                            });
                        }
                    }

                    return res;
                };
                this.chart1 = echarts.init(document.getElementById('chart1'));
                var jsonAddvcd  = await this.initAddVcdFeatures();
                echarts.registerMap(this.organNm, jsonAddvcd.data);
                var title = "";
                var  option = {
                    title:{
                        text:this.organCode.substr(0, 2)=="66"?'各师问题数量分布':'各市问题数量分布',
                        x:'center',
                        y:'top',
                        top:5
                    },
                    geo: [
                        {
                            map: this.organNm,
                            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.organNm,
                            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.organNm,
                            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.organNm,
                            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.organNm,
                            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.organNm,
                            type: 'map',
                            map: this.organNm, // 自定义扩展图表类型
                            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 = `{fline|${name}}\n`;
                                        text += `{pblm|${value}}`;
                                        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]
                                        },
                                        pblm: {
                                            color: '#EB3B46',
                                            fontSize: 16,
                                            fontWeight:'bold',
                                            fontFamily:'italic',
                                            align: 'center',
                                            padding:[3,0]
                                        }
                                    },
                                },
                                emphasis: {
                                    show: true,
                                },
                            },
                            itemStyle: {
                                color: "none",
                            },
                            symbolOffset: [0, 28],
                            z: 999,
                            data: convertData(),
                        }
                    ],
                };
                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",
                        },
                        silent: true,
                        animation:true,
                        animationDuration:2000,
                        data: lineData(""),
                    },

                    // 柱状体的顶部
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        geoIndex: 0,
                        zlevel: 5,
                        symbol: "circle",
                        symbolSize: [3, 2],
                        itemStyle: {
                            color: "#EB3B46",
                            opacity: 1,
                        },
                        silent: true,
                        data: scatterData(""),
                    },
                    // 柱状体的底部
                    {
                        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(""),
                    })

                this.chart1.clear();
                this.chart1.setOption(option);
                var _self = this;
                this.chart1.on('click', function (params) {
                    if(params.name!=_self.adName){

                        _self.adName = params.name;
                        for(var i = 0;i<_self.addvcdList.length;i++){
                            if(_self.addvcdList[i].name==params.name){
                                _self.initDataCity(_self.addvcdList[i].value);
                                _self.initData1City(_self.addvcdList[i].value);
                                _self.initNearFace(_self.addvcdList[i].value);
                                _self.initQuestionImg(_self.addvcdList[i].value);
                                _self.initQuestionVideo(_self.addvcdList[i].value);
                                _self.getProjectList(_self.addvcdList[i].value);
                                _self.getDataProjectPblm(_self.addvcdList[i].value);
                                _self.initStatiscsData(_self.addvcdList[i].value);
                                _self.adCode = _self.addvcdList[i].value
                            }
                        }
                    }
                });
            },
            // async initChart1() {
            //     var _self = this;
            //     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)
            //                 });
            //             }
            //         }
            //         return res;
            //     };
            //     this.chart1 = echarts.init(document.getElementById('chart1'));
            //     var jsonAddvcd  = await this.initAddVcdFeatures();
            //     echarts.registerMap(this.organNm, jsonAddvcd.data);
            //     let option = {
            //         title:{
            //             text:this.organCode.substr(0, 2)=="66"?'各师问题数量分布':'各市问题数量分布',
            //             left:'center',
            //             padding: 20,
            //             textStyle:{
            //                 color:'rgb(62,215,213)',
            //
            //             }
            //         },
            //         tooltip: {
            //             trigger: 'axis',
            //         },
            //         geo3D: {
            //             map: this.organNm,
            //             show: true,
            //             zlevel: 15,
            //             boxWidth:80,
            //             boxHeight:30,
            //             label: {
            //                 show:true,
            //                 formatter:function(params){
            //                     var content='',
            //                         content=params.name;
            //                     return content;
            //                 },
            //                 distance:0,
            //                 textStyle:{
            //                     color:'#ffffff',
            //                     fontWeight : 'bold',
            //                     fontSize :17,
            //                     backgroundColor: 'rgba(255,255,255,0)'
            //                 },
            //             },
            //             viewControl: { // 用于鼠标的旋转，缩放等视角控制。
            //                 distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
            //                 minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
            //                 maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
            //                 alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            //                 beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
            //                 minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            //                 maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            //                 minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            //                 maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            //                 center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
            //                 animation: true, // 是否开启动画。[ default: true ]
            //                 animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            //                 animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
            //             },
            //             light: {
            //                 main: {
            //                     shadow: true,
            //                     shadowQuality: 'ultra',
            //                 },
            //
            //             },
            //             //地面的背景颜色
            //             groundPlane: {
            //                 show: true,
            //                 color:'transparent'
            //             },
            //             //特效设置
            //             postEffect: {
            //                 enable:false
            //             },
            //             itemStyle: {
            //                 areaColor: '#1b4474',
            //                 color:'#1b4474',
            //                 borderColor: 'rgb(62,215,213)',
            //                 borderWidth: 1
            //             },
            //             //鼠标 hover 高亮时图形和标签的样式
            //             emphasis:{
            //                 label:{
            //                     show:true,
            //                     distance:10
            //                 },
            //                 itemStyle: {
            //                     color:'#15244a',
            //                 }
            //             }
            //         },
            //
            //         series: [
            //             {
            //                 type: 'bar3D',
            //                 coordinateSystem: 'geo3D',
            //                 zlevel: 1,
            //                 barSize: 0.5,
            //                 shading: 'lambert',
            //                 itemStyle: {
            //                     color: '#c2f151'
            //                 },
            //                 label: {
            //                     show: true,
            //                     position: 'top',
            //                     textStyle: {
            //                         color: '#c2f151',
            //                         backgroundColor: 'transparent'
            //                     },
            //                     formatter: function(params) {
            //                         return params.value[2]
            //                     }
            //                 },
            //                 data:convertData()
            //             }
            //         ]
            //     };
            //     this.chart1.clear()
            //     this.chart1.setOption(option);
            //     var _self = this;
            //     this.chart1.on('click', function (params) {
            //         if(params.name!=_self.adName){
            //             _self.adName = params.name;
            //             for(var i = 0;i<_self.addvcdList.length;i++){
            //                 if(_self.addvcdList[i].name==params.name){
            //                     _self.initDataCity(_self.addvcdList[i].value);
            //                     _self.initData1City(_self.addvcdList[i].value);
            //                     _self.initNearFace(_self.addvcdList[i].value);
            //                     _self.initQuestionImg(_self.addvcdList[i].value);
            //                     _self.initQuestionVideo(_self.addvcdList[i].value);
            //                     _self.getProjectList(_self.addvcdList[i].value);
            //                     _self.getDataProjectPblm(_self.addvcdList[i].value);
            //                     _self.initStatiscsData(_self.addvcdList[i].value);
            //                     _self.adCode = _self.addvcdList[i].value
            //                 }
            //             }
            //         }
            //     });
            // },
            myTimer(){
                var d = new Date();
                this.currentTimestap = (d.getHours()<=9?'0'+d.getHours():d.getHours())+":"+(d.getMinutes()<=9?'0'+d.getMinutes():d.getMinutes())+":"+(d.getSeconds()<=9?'0'+d.getSeconds():d.getSeconds());
                this.currentTime = d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate();
                var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                this.currentWeek = weeks[d.getDay()];
            },
            initChart2(){
                this.chart2 = echarts.init(document.getElementById('chart2'));
                var option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    title: {
                        text: this.chartDcTypeData.count,
                        textStyle: {
                            color: '#666',
                            fontSize: 14
                        },
                        subtext: '问题数',
                        subtextStyle: {
                            color: '#666',
                            fontSize: 14
                        },
                        itemGap: 10,
                        left: '20%',
                        top: '40%'
                    },
                    // color: ['#2872ea','#95ff2b','#01dc8a','#02f5e9'],
                    color: [
                        '#1B84F0', '#FCC00A', '#FE8831', '#FF4258',
                        "#4150d8", "#28bf7e", "#ed7c2f", "#f2a93b",
                        "#f9cf36", "#4a5bdc", "#4cd698", "#f4914e",
                        "#fcb75b", "#ffe180", "#b6c2ff", "#96edc1"
                    ],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}"
                    },
                    legend: {
                        selectedMode:false,
                        type: 'scroll',
                        orient:'vertical',
                        icon: 'circle', //图例形状
                        top:'15%',
                        bottom:'15%',
                        left:'55%',
                        itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
                        itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
                        itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                        textStyle: {
                            fontSize: 14,
                            color: '#666',
                        },
                        pageButtonPosition:'start',
                        pageIconColor: '#666', //翻页下一页的三角按钮颜色
                        pageIconInactiveColor: '#666', //翻页（即翻页到头时）
                        pageIconSize: 10, //翻页按钮大小
                        pageFormatter: '',//隐藏翻页的数字
                        pageButtonItemGap: -6,//翻页按钮的两个之间的间距
                        label: {
                            normal: {
                                show: true,
                                position: 'inner',
                                formatter: function (name) {
                                    return (name.length > 8 ? (name.slice(0, 8) + "...") : name);
                                },
                                fontSize: 12
                            }
                        }
                    },
                    series: [{
                        type: "pie",
                        data: this.chartDcTypeData.dataList,
                        radius: ['40%', '60%'],
                        center: ["28%", "50%"],
                        labelLine: {
                            show: false
                        },
                        label:{
                            show: false
                        }

                    }]
                };
                var option_1 = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    title: {
                        text: 0,
                        textStyle: {
                            color: '#666',
                            fontSize: 14
                        },
                        subtext: '问题数',
                        subtextStyle: {
                            color: '#666',
                            fontSize: 14
                        },
                        itemGap: 10,
                        left: '43%',
                        top: '45%'
                    },
                    color: [
                        '#FCC00A', '#FE8831', '#1B84F0', '#FF4258',
                        "#4150d8", "#28bf7e", "#ed7c2f", "#f2a93b",
                        "#f9cf36", "#4a5bdc", "#4cd698", "#f4914e",
                        "#fcb75b", "#ffe180", "#b6c2ff", "#96edc1"
                    ],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}"
                    },
                    series: [{
                        type: "pie",
                        data: [{name:"",value:0}],
                        radius: ['55%', '75%'],
                        center: ["50%", "50%"],
                        labelLine: {
                            show: false
                        },
                        label:{
                            show: false
                        }

                    }]
                };
                if(this.chartDcTypeData.dataList && this.chartDcTypeData.dataList.length>0){
                    this.chart2.clear();
                    this.chart2.setOption(option);
                }else{
                    this.chart2.clear();
                    this.chart2.setOption(option_1);
                }

            },
            // initChart3(){
            //     this.chart3 = echarts.init(document.getElementById('chart3'));
            //     var option= {
            //         tooltip: {
            //             trigger: 'axis',
            //         },
            //         grid: {
            //             top: '20%',
            //             left: '7%',
            //             right: '2%',
            //             bottom: '10%',
            //             containLabel: true
            //         },
            //         dataZoom: [{
            //             borderColor:'#3e7b92',
            //             backgroundColor:'rgba(108,217,255,0)', //组件的背景
            //             type: 'slider', //图表下方的伸缩条
            //             show: true, //是否显示
            //             height:8,
            //             realtime: true, //拖动时，是否实时更新系列的视图
            //             start: 0, //伸缩条开始位置（1-100），可以随时更改
            //             end: 99, //伸缩条结束位置（1-100），可以随时更改
            //             bottom:"5",
            //             textStyle:{
            //                 color:'#31586C'
            //             }
            //         }],
            //         // legend: {
            //         //     data: ['未督察','已督察'],
            //         //     right: "3%",
            //         //     top:"4%",
            //         //     textStyle: {
            //         //         color: "#AAE0FC",
            //         //         fontSize: 12
            //         //     },
            //         //     itemWidth: 5,  // 设置宽度
            //         //     itemHeight:10, // 设置高度
            //         //     itemGap: 10 // 设置间距
            //         // },
            //         xAxis: [{
            //             data: this.chartObjData.xData,
            //             axisLabel: {
            //                 margin: 10,
            //                 color: '#437d9b',
            //                 textStyle: {
            //                     fontSize: 12
            //                 },
            //             },
            //             axisLine: {
            //                 lineStyle: {
            //                     color: '#437d9b',
            //                 }
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //         }],
            //         yAxis: [{
            //             name:"督察对象/个",
            //             type:'value',
            //             axisLabel: {
            //                 color: '#437d9b',
            //                 textStyle: {
            //                     fontSize: 12
            //                 },
            //             },
            //             axisLine: {
            //                 show:true,
            //                 lineStyle:{
            //                     color:'#437d9b' //更改坐标轴颜色
            //                 }
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //             splitLine: {
            //                 lineStyle: {
            //                     color: '#31586C',
            //                 }
            //             }
            //         }],
            //         series: [
            //             {
            //                 name: "对象数",
            //                 type: 'bar',
            //                 data: this.chartObjData.dataList,
            //                 barWidth: '8px',
            //                 itemStyle: {
            //                     normal: {
            //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                             offset: 0,
            //                             color: '#72FAFE' // 0% 处的颜色
            //                         }, {
            //                             offset: 1,
            //                             color: '#04BEFE' // 100% 处的颜色
            //                         }], false)
            //                     }
            //                 },
            //             }
            //             // ,{
            //             //     name: "已督察",
            //             //     type: 'bar',
            //             //     data: getlkrs,
            //             //     barWidth: '8px',
            //             //     itemStyle: {
            //             //         normal: {
            //             //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //             //                 offset: 0,
            //             //                 color: '#06DD8D' // 0% 处的颜色
            //             //             }, {
            //             //                 offset: 1,
            //             //                 color: '#78FFCF' // 100% 处的颜色
            //             //             }], false)
            //             //         }
            //             //     },
            //             // }
            //         ]
            //     }
            //     this.chart3.clear();
            //     this.chart3.setOption(option);
            // },
            initChart4(){
                this.chart4 = echarts.init(document.getElementById('chart4'));
                var option= {
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        top: '15%',
                        left: '0%',
                        right: '5%',
                        bottom: '15%',
                        containLabel: true
                    },
                    dataZoom: [{
                        borderColor:'#a4a4a4',
                        backgroundColor:'rgba(107,219,255,0)', //组件的背景
                        type: 'slider', //图表下方的伸缩条
                        show: true, //是否显示
                        height:8,
                        realtime: true, //拖动时，是否实时更新系列的视图
                        start: 0, //伸缩条开始位置（1-100），可以随时更改
                        end: 99, //伸缩条结束位置（1-100），可以随时更改
                        bottom:"30",
                        textStyle:{
                            color:'#a4a4a4'
                        }
                    }],
                    xAxis: [{
                        data:this.chartPblmData.xData,
                        axisLabel: {
                            margin: 10,
                            color: '#a4a4a4',
                            rotate:5,
                            textStyle: {
                                fontSize: 12
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#a4a4a4',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                    }],
                    yAxis: [{
                        name:"问题/个",
                        type:'value',
                        nameTextStyle:{
                            color:"#a4a4a4",
                            fontSize:14,
                        },
                        axisLabel: {
                            color: '#a4a4a4',
                            textStyle: {
                                fontSize: 14
                            },
                        },
                        axisLine: {
                            show:true,
                            lineStyle:{
                                color:'#a4a4a4', //更改坐标轴颜色
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#a4a4a4',
                            }
                        }
                    }],
                    series: [
                        {
                            name: "问题数",
                            type: 'bar',
                            data: this.chartPblmData.dataList,
                            barWidth: '8px',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1B84F0' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#4fa2f0' // 100% 处的颜色
                                    }], false)
                                }
                            }
                        },
                        {
                            name: "整改数",
                            type: 'bar',
                            data: this.chartMendPblmData.dataList,
                            barWidth: '8px',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#FE8831' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#feab22' // 100% 处的颜色
                                    }], false)
                                }
                            }
                        }
                    ]
                }
                this.chart4.clear();
                this.chart4.setOption(option);
            },
            initChart5(){
                this.chart5 = echarts.init(document.getElementById('chart5'));
                // var data = [
                //     {
                //         name: "一般问题"+this.chartPblmTypeData.info+"(个)",
                //         value: this.chartPblmTypeData.info
                //     },
                //     {
                //         name: "较严重问题"+this.chartPblmTypeData.warn+"(个)",
                //         value: this.chartPblmTypeData.warn
                //     },
                //     {
                //         name: "严重问题"+this.chartPblmTypeData.fatal+"(个)",
                //         value: this.chartPblmTypeData.fatal
                //     },
                //     {
                //         name: "特别严重问题"+this.chartPblmTypeData.error+"(个)",
                //         value: this.chartPblmTypeData.error
                //     }
                // ];
                // var sumValue = this.chartPblmTypeData.info+this.chartPblmTypeData.warn+this.chartPblmTypeData.fatal+this.chartPblmTypeData.error;
                // var optionData = {
                //     series: [],
                //     yAxis: []
                // };
                // for (let i = 0; i < data.length; i++) {
                //     optionData.series.push({
                //         name: '个数',
                //         type: 'pie',
                //         clockWise: true,
                //         z: 2,
                //         hoverAnimation: false,
                //         radius: [83 - i * 15 + '%', 77 - i * 15 + '%'],
                //         center: ["50%", "55%"],
                //         label: {
                //             show: true,
                //             formatter: '{d}%',
                //             color: 'RGB(246,175,101)',
                //             fontSize: 10,
                //             position: 'inside'
                //         },
                //         labelLine: {
                //             show: false
                //         },
                //         data: [{
                //             value: data[i].value,
                //             name: data[i].name
                //         }, {
                //             value: sumValue - data[i].value,
                //             name: '',
                //             itemStyle: {
                //                 color: "rgba(0,0,0,0)",
                //                 borderWidth: 0
                //             },
                //             tooltip: {
                //                 show: false
                //             },
                //             label: {
                //                 show: false
                //             },
                //             hoverAnimation: false
                //         }]
                //     });
                //     optionData.series.push({
                //         name: '背景线',
                //         type: 'pie',
                //         silent: true,
                //         z: 1,
                //         clockWise: true,
                //         hoverAnimation: false,
                //         radius: [81 - i * 15 + '%', 79 - i * 15 + '%'],
                //         center: ["50%", "55%"],
                //         label: {
                //             show: false
                //         },
                //         itemStyle: {
                //             label: {
                //                 show: false,
                //             },
                //             labelLine: {
                //                 show: false
                //             },
                //             borderWidth: 5,
                //         },
                //         data: [{
                //             value: 100,
                //             itemStyle: {
                //                 color: "#003a5c",
                //                 borderWidth: 0
                //             },
                //             tooltip: {
                //                 show: false
                //             },
                //             hoverAnimation: false
                //         }]
                //     });
                //     optionData.yAxis.push(data[i].name);
                // }
                // var option = {
                //     color: [{
                //         type: 'linear',
                //         x: 0,
                //         y: 0,
                //         x2: 1,
                //         y2: 1,
                //         colorStops: [{
                //             offset: 0,
                //             color: '#00385e'
                //         }, {
                //             offset: 1,
                //             color: 'rgba(1,232,254,1)'
                //         }],
                //         global: false
                //     }],
                //     grid: {
                //         top: '10%',
                //         bottom: '54%',
                //         left: "50%",
                //         containLabel: false
                //     },
                //     yAxis: [{
                //         type: 'category',
                //         inverse: true,
                //         z: 3,
                //         axisLine: {
                //             show: false
                //         },
                //         axisTick: {
                //             show: false
                //         },
                //         axisLabel: {
                //             interval: 0,
                //             inside: false,
                //             textStyle: {
                //                 color: "#437d9b",
                //                 fontSize: 12,
                //             },
                //             show: true
                //         },
                //         data: optionData.yAxis
                //     }],
                //     xAxis: [{
                //         show: false
                //     }],
                //     series: optionData.series
                // };
                // var option = {
                //     tooltip: {
                //         trigger: 'item'
                //     },
                //     legend: {
                //         orient:'vertical',
                //         icon: 'circle', //图例形状
                //         bottom:'20%',
                //         right:'3%',
                //         itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
                //         itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
                //         itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                //         textStyle: {
                //             fontSize: 12,
                //             color: '#66FBF9',
                //         }
                //     },
                //     series: [
                //         {
                //             name:'问题严重程度',
                //             type:'funnel',
                //             left: '5%',
                //             width: '50%',
                //             minSize: '0%',
                //             maxSize: '100%',
                //             sort: 'ascending',
                //             top:20,
                //             bottom:20,
                //             label: {
                //                 show:false,
                //                 position: 'inside'
                //             },
                //             itemStyle: {
                //                 borderColor: '#fff',
                //                 borderWidth: 1
                //             },
                //             emphasis: {
                //                 label: {
                //                     show:false,
                //                     fontSize: 20
                //                 }
                //             },
                //             data: [
                //                 {value:this.chartPblmTypeData.info, name: '一般问题',itemStyle:{normal:{color:'#95ff2b'}}},
                //                 {value:this.chartPblmTypeData.warn, name: '较严重问题',itemStyle:{normal:{color:'#00dd8a'}}},
                //                 {value:this.chartPblmTypeData.fatal, name: '严重问题',itemStyle:{normal:{color:'#ffe425'}}},
                //                 {value:this.chartPblmTypeData.error, name: '特别严重问题',itemStyle:{normal:{color:'#01d8da'}}},
                //             ]
                //         }
                //     ]
                // };
                var option = {
                    title: {
                        text: "严重程度",
                        textStyle: {
                            color: '#7a7a7a',
                            fontSize: 14
                        },
                        itemGap: 10,
                        left: '42%',
                        top: '45%'
                    },
                    color: ['#fe7627', '#feab22', '#259df8', '#e55148'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name:'问题严重程度',
                            type:'pie',
                            labelLine:{
                                normal:{
                                    length:8
                                }
                            },
                            label: {
                                normal: {
                                    // position: 'inside',
                                    formatter: function(params) {
                                        return params.name+" ("+params.value+"个)"
                                    },
                                }
                            },
                            radius : ['50%', '70%'],
                            data:[

                                {value:this.chartPblmTypeData.info, name:'一般'},
                                {value:this.chartPblmTypeData.warn, name:'较重'},
                                {value:this.chartPblmTypeData.fatal, name:'严重'}
                                /* , {value:this.chartPblmTypeData.error, name:'特重'}*/
                            ]
                        }
                    ]
                };
                this.chart5.setOption(option);
            }
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
            clearInterval(this.timerData);
        }, //生命周期 - 销毁之前
        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:30%;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px 0px rgba(210,220,225,0.5);
    border-radius: 8px;
  }
  .slideBar-right-center{
    width: 100%;
    height:calc(35% - 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(35% - 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.titleSearch{
    font-size: 14px;
    font-family: 黑体;
    color: #222222;
    margin-left: 10px;
  }
  #chart1{
    width: 100%;
    height:100%;
  }
  .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(45% - 20px);
    overflow: auto;
  }
  .slideBar-pie{
    width: calc(100% - 40px);
    margin-left: 20px;
    height:calc(55% - 40px);
  }
  .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(50% - 20px);
    margin-top: 10px;
    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:20px;
     bottom:30px;
  }
  .example li{
    display: flex;
    font-size: 14px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 500;
    color: #2196F3;
    justify-content: center;
    margin-top: 10px;
    font-size: 15px;
    background: #d9edff;
    border: 1px solid #85c4ff;
    text-decoration: underline;
    cursor: pointer;
  }
  .example li:hover{
    color: #217cff !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{
    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;
    padding: 0px 10px
  }
  .exampleBack li span:first-child{
    margin-right: 20px;
  }
  .exampleBack li span:nth-child(2):hover{
    color:#37AAFF !important;
  }
  .box-list {
    width: 100%;
    height: calc(100% - 40px);
    padding: 0 10px;
  }
  .box-list ul {
    width: 100%;
    height:100%;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .box-list ul li {
    width: 100%;
    display: flex;
    align-items: center;
    height: 25px;
    font-size: 14px;
    color: #6d6d6d;
    font-family: "微软雅黑";
    cursor: pointer;
  }
  .box-list ul li img{
    margin-right: 5px;
    width: 15px;
    height:15px;
  }
  .box-list ul li span:nth-child(2) {
    width: calc(100% - 130px);
    letter-spacing: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .box-list ul li span:nth-child(2):hover{
     color: #4fa2f0;
   }
  .box-list ul li span:nth-child(3) {
    width: 90px;
    color: #636363;
    text-align: center;
  }
  .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>