fj-dc-ui/.svn/pristine/af/af1eb2675eb38ff615b4810578d5c0554567e8b5.svn-base

<template>
  <div class="mainBox" id="mainBox">
    <div class="mainHeader">
      <div class="header-left">
        <div class="date-down myselect" @click="showHideDate">
          <div class="myselect">年度</div>
          <div class="myselect">{{selectDateName}}</div>
          <div class="myselect"><i :class="iconDate"></i></div>
          <ul class="myselect" v-if="isDateVisible">
            <li class="myselect"  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" @click.stop="dateChange(item.year,item.year)" v-for="item in yearList" :title="item.year">{{item.year}}</li>
          </ul>
        </div>
        <div class="date-down " @click="showHideType">
          <div class="myselect">批次</div>
          <div class="myselect">{{selectBatchName}}</div>
          <div class="myselect"><i :class="iconBatch"></i></div>
          <ul class="myselect" v-if="isBatchVisible">
            <li class="myselect" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" @click.stop="batchChange(item.adName,item.batch)" v-for="item in batchList" :title="item.adName">{{item.batch}}{{item.adName}}</li>
          </ul>
        </div>
        <!--            <el-select v-model="selectDate" placeholder="请选择" size="mini" @change="dateChange">-->
        <!--              <el-option-->
        <!--                v-for="item in options"-->
        <!--                :key="item.value"-->
        <!--                :label="item.label"-->
        <!--                :value="item.value">-->
        <!--              </el-option>-->
        <!--            </el-select>-->
        <!--            <el-select v-model="selectBatch" placeholder="请选择" size="mini" @change="batchChange">-->
        <!--              <el-option-->
        <!--                v-for="item in dcTypeList"-->
        <!--                :key="item.inspType"-->
        <!--                :label="item.inspName"-->
        <!--                :value="item.inspType">-->
        <!--              </el-option>-->
        <!--            </el-select>-->
      </div>
      <div class="header-middle">{{title}}</div>
      <div class="header-right">
        <div class="hourMs">{{currentTimestap}}</div>
        <div class="timeContent">
          <div class="timeOrWeek times">{{currentTime}}</div>
          <div class="timeOrWeek weeks">{{currentWeek}}</div>
        </div>
        <div class="turnBtn" @click="slideHeader">{{turnName}}</div>
      </div>
    </div>
    <div class="mainContent" id="mainContent">
      <div class="mainContent-left">
        <div class="mainContent-left-top">
          <div class="mainContent-left-top-left">
            <div class="summary-item">
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/person.png">
                  <div class="summary-text">
                    <span class="summary-pointer">人员</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.PERSIZE' :duration='2000'></countTo>
                </div>
              </div>
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/question.png">
                  <div class="summary-text">
                    <span class="summary-pointer">问题数</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.PBLMSIZE' :duration='2000'></countTo>
                </div>
              </div>
            </div>
            <div class="summary-item">
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/group.png">
                  <div class="summary-text">
                    <span class="summary-pointer">组</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.GROUPSIZE' :duration='2000'></countTo>
                </div>
              </div>
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/zgnum.png">
                  <div class="summary-text">
                    <span class="summary-pointer">整改数</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.MENDSIZE' :duration='2000'></countTo>
                </div>
              </div>
            </div>
            <div class="summary-item">
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/object.png">
                  <div class="summary-text">
                    <span class="summary-pointer">工程</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.OBJSIZE' :duration='2000'></countTo>
                </div>
              </div>
              <div class="summary-item-col">
                <div class="summary-title">
                  <img src="../../assets/xhNum.png">
                  <div class="summary-text">
                    <span class="summary-pointer">销号数</span>
                    <span class="summary-group">单位:(个)</span>
                  </div>
<!--                  <img src="../../assets/right.png">-->
                </div>
                <div class="summary-content">
                  <countTo :startVal='0' :endVal='statiscsData.PBLMLOGSIZE' :duration='2000'></countTo>
                </div>
              </div>
            </div>
          </div>
          <div class="mainContent-left-top-right">
            <div class="shortcutkey">
               <ul>
                 <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>
            <div class="mapEchart" id="chart1"></div>
          </div>
        </div>
        <div class="mainContent-left-bottom">
          <div class="echarts-bottom">
            <div class="echarts-bottom-title"><img src="../../assets/xxm.png"><span>稽察专业分类问题数</span></div>
            <div class="echarts-bottom-content" id="chart2"></div>
          </div>
          <!--               <div class="echarts-bottom">-->
          <!--                 <div class="echarts-bottom-title"><span>督查对象区域分布</span></div>-->
          <!--                 <div class="echarts-bottom-content" id="chart3"></div>-->
          <!--               </div>-->
          <div class="echarts-bottom">
            <div class="echarts-bottom-title"><img src="../../assets/xxm.png"><span>稽察地市问题分布</span></div>
            <div class="echarts-bottom-content" id="chart4"></div>
          </div>
          <div class="echarts-bottom">
            <div class="echarts-bottom-title"><img src="../../assets/xxm.png"><span>问题等级统计</span></div>
            <div class="echarts-bottom-content" id="chart5"></div>
          </div>
        </div>
      </div>
      <div class="mainContent-right">
        <div class="mainContent-right-top">
          <div class="echarts-bottom-title"><img src="../../assets/zz.png"><span>通知公告</span></div>
          <div class="echarts-bottom-content tzgg">
            <ul class="cms-news">
              <li v-if="messageList!=null && messageList.length>0" v-for="(item,index) in messageList" @click="showMessage(item)" :title="item.title">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <div class="mainContent-right-bottom">
          <div class="echarts-bottom-title"><img src="../../assets/zz.png"><span>工程问题详细</span></div>
          <div class="echarts-bottom-content proPblm">
            <ul>
              <li v-if="projectList!=null && projectList.length>0" v-for="(item,index) in projectList" @click="showProPblmDetail(item)"><i class="el-icon-s-opportunity"></i><div :title="item.name">{{item.name?item.name:item.ojbNm}}</div><span>{{formatDateTime(item.intm)}}</span></li>
            </ul>
          </div>
        </div>
        <!--           <div class="mainContent-right-style1">-->
        <!--             <div class="echarts-bottom-title"><span>近期面貌</span></div>-->
        <!--             <div class="echarts-bottom-content" ref="banner">-->
        <!--               <el-carousel :height="bannerHeight" id="nearFace1">-->
        <!--                 <el-carousel-item v-if="nearFaceList!=null && nearFaceList.length>0" v-for="(item,index) in nearFaceList" >-->
        <!--&lt;!&ndash;                   <a :href="`${hostUrl}/${item.filePath}`" target="_blank" style="position: relative;display: block;;width: 100%;height:100%;">&ndash;&gt;-->
        <!--                     <div class="titleCar" :title="item.objName">{{item.objName}}</div>-->
        <!--                     <img :src="`${urlReplace(item.filePath)}`" :alt="item.objName" style="width: 100%;height:100%;">-->
        <!--&lt;!&ndash;                   </a>&ndash;&gt;-->
        <!--                 </el-carousel-item>-->
        <!--               </el-carousel>-->
        <!--             </div>-->
        <!--           </div>-->
        <!--           <div class="mainContent-right-style">-->
        <!--             <div class="echarts-bottom-title"><span>问题图片</span></div>-->
        <!--             <div class="echarts-bottom-content">-->
        <!--               <el-carousel :height="bannerHeight">-->
        <!--                 <el-carousel-item  v-if="questionImgList!=null && questionImgList.length>0" v-for="(item,index) in questionImgList">-->
        <!--                   <a :href="`${hostUrl}/${item.filePath}`" target="_blank"><img :src="`${hostUrl}/${item.filePath}`"></a>-->
        <!--                 </el-carousel-item>-->
        <!--               </el-carousel>-->
        <!--             </div>-->
        <!--           </div>-->
        <!--           <div class="mainContent-right-style2">-->
        <!--             <div class="echarts-bottom-title"><span>问题视频</span></div>-->
        <!--             <div class="echarts-bottom-content">-->
        <!--               <el-carousel :height="bannerHeight">-->
        <!--                 <el-carousel-item  v-if="questionVideoList!=null && questionVideoList.length>0" v-for="(item,index) in questionVideoList">-->
        <!--                   <a :href="`${hostUrl}/${item.filePath}`" target="_blank" style="position: relative;display: block;width: 100%;height:100%;">-->
        <!--                     <div class="titleCar" :title="item.objName">{{item.objName}}</div>-->
        <!--                     <video :src="`${urlReplace(item.filePath)}`" controls="controls" style="width:100%;height:100%;"></video>-->
        <!--                   </a>-->
        <!--                 </el-carousel-item>-->
        <!--               </el-carousel>-->
        <!--             </div>-->
        <!--           </div>-->
      </div>
    </div>
    <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 {
        getMessage,
        getJcPblmCount,
        getYear,
        getBatch,
        getJcData,
        getJcTotalData,
        getTopTacPblm,
        getQuestionImgList,
        getTopTacPblmvideo,
        getJcDataProject
    } from "../../api/homeMainView.js";
    export default {
        components: {
            countTo,
            proPblmDetail,
            showMessage,
            personList,
            groupList,
            objList,
            pblmList
        },
        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:{}

            }
        },
        //监听属性 类似于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: {
            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)
                })
            },
            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;
              }
            },
            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(name,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(name,value){
                this.selectBatch = (value=="全部"?"":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 = [];
                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];
                                _self.chartMapData.geoCoordMapList.push({
                                    name:res.data[i].adName,
                                    value:res.data[i].pblmSize
                                });
                            }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.initChart1();
                    // _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){
                  _self.batchList = res.data;
                }
                _self.batchList.push({batch:"全部",adName:""})
              }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() {
                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:'#3476d0',

                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    geo: {
                        map: this.organNm,
                        show: true,
                        roam: true,
                        zoom:1,
                        label: {
                            normal: {
                                show: true,
                                color:'#fff'
                            },
                            emphasis: {
                                show: true,
                                color:'#fff'
                            },
                        },
                        itemStyle: {
                            normal: {
                                label: { show: true },
                                color: '#F4F4F4',
                                borderWidth: 1, //区域边框宽度
                                borderColor: '#6fc4f0', //区域边框颜色
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.9,
                                    colorStops: [{
                                        offset: 0, color: document.documentElement.style.getPropertyValue("--echarts_map_bg_start")
                                    }, {
                                        offset: 1, color: document.documentElement.style.getPropertyValue("--echarts_map_bg")
                                    }],
                                    global: false
                                }
                            },
                            emphasis: {
                                areaColor: '#3476d0',
                                color: "#fff",
                            },
                        },
                    },

                    series: [

                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin',
                            legendHoverLink: true,
                            symbolSize: [50, 50],
                            label: {
                                show: true,
                                formatter(value) {
                                    return value.data.value[2];
                                },
                                color: 'white',
                            },
                            itemStyle: {
                                normal: {
                                    color: document.documentElement.style.getPropertyValue("--echarts_map_spin"),
                                },
                            },
                            data: convertData(),
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke',
                            },
                            hoverAnimation: true,
                            zlevel: 1,
                        },
                    ]
                };
                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: '#0c92d5',
                            fontSize: 14
                        },
                        subtext: '问题总数',
                        subtextStyle: {
                            color: '#0c92d5',
                            fontSize: 14
                        },
                        itemGap: 10,
                        left: '13%',
                        top: '40%'
                    },
                    // color: ['#2872ea','#95ff2b','#01dc8a','#02f5e9'],
                    color:[
                        '#2872ea','#95ff2b','#01dc8a','#02f5e9',
                        '#3593ff', '#5587d3', '#679ccd', '#41afff', '#40e0d0',
                        '#4b3eff', '#0cffd5', '#afeea7', '#05d089', '#ffd700',
                        '#6c8e37', '#4ea397', '#3cb371', '#6db8a9', '#7bd9a5',
                        '#15a7ff', '#9de0ff', '#9da7ff', '#4cbbfe', '#7dc3fe',
                        '#1658bb', '#433e7c', '#11ddf4', '#009db2', '#024b51',
                        '#0d61cf', '#127619', '#e7be36', '#26ccd8', '#3685fe',
                        '#4065ef', '#5160f5', '#f7b13f', '#f9e264', '#50c48f'
                    ],
                    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: '#0c92d5',
                        },
                        pageButtonPosition:'start',
                        pageIconColor: '#0c92d5', //翻页下一页的三角按钮颜色
                        pageIconInactiveColor: '#0c92d5', //翻页（即翻页到头时）
                        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: ['45%', '52%'],
                        center: ["20%", "50%"],
                        labelLine: {
                            show: false
                        },
                        label:{
                            show: false
                        }

                    }]
                };
                this.chart2.clear();
                this.chart2.setOption(option);
            },
            // 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: '20%',
                        left: '0%',
                        right: '0%',
                        bottom: '10%',
                        containLabel: true
                    },
                    dataZoom: [{
                        borderColor:'#0c92d5',
                        backgroundColor:'rgba(107,219,255,0)', //组件的背景
                        type: 'slider', //图表下方的伸缩条
                        show: true, //是否显示
                        height:12,
                        realtime: true, //拖动时，是否实时更新系列的视图
                        start: 0, //伸缩条开始位置（1-100），可以随时更改
                        end: 99, //伸缩条结束位置（1-100），可以随时更改
                        bottom:"5",
                        textStyle:{
                            color:'#0c92d5'
                        }
                    }],
                    xAxis: [{
                        data:this.chartPblmData.xData,
                        axisLabel: {
                            margin: 10,
                            color: '#0c92d5',
                            textStyle: {
                                fontSize: 16
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0c92d5',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                    }],
                    yAxis: [{
                        name:"问题/个",
                        type:'value',
                        nameTextStyle:{
                            color:"#0c92d5",
                            fontSize:16,
                        },
                        axisLabel: {
                            color: '#0c92d5',
                            textStyle: {
                                fontSize: 16
                            },
                        },
                        axisLine: {
                            show:true,
                            lineStyle:{
                                color:'#0c92d5', //更改坐标轴颜色
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#0c92d5',
                            }
                        }
                    }],
                    series: [
                        {
                            name: "问题数",
                            type: 'bar',
                            data: this.chartPblmData.dataList,
                            barWidth: '12px',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#72FAFE' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#0c92d5' // 100% 处的颜色
                                    }], false)
                                }
                            }
                        },
                        {
                            name: "整改数",
                            type: 'bar',
                            data: this.chartMendPblmData.dataList,
                            barWidth: '12px',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#72fefb' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#0c92d5' // 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 = {
                    color: ['#56dcfd', '#ffeb3b', '#f2c5ff', '#f5839e'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name:'问题严重程度',
                            type:'pie',
                            labelLine:{
                                normal:{
                                    length:1
                                }
                            },
                            label: {
                                normal: {
                                    // position: 'inside',
                                    formatter: function(params) {
                                        return params.name+" ("+params.value+"个)"
                                    },
                                }
                            },
                            radius : ['45%', '52%'],
                            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>
  .mainBox{
    width: 100%;
    height:100%;
    background: var(--main_background);
    background-size: 100% 100%;
  }
  .mainHeader{
    width: 100%;
    height:49px;
    background: var(--header_background); /*i*/
    background-size: 100% 100%;
    min-width:1366px ;
    min-height:49px ;
    border-bottom: 1px dashed grey;
    display: flex;
  }
  .header-left{
    width:25%;
    height:100%;
    display: flex;
    align-items: center;
  }
  /*.header-left .el-select{*/
  /*   padding-left: 20px !important;*/
  /*   border-radius: 10px !important;*/
  /*}*/
  /*.header-left .el-input__inner{*/
  /*  border: 1px solid #001C2E;*/
  /*  outline: none !important;*/
  /*  background: #001C2E;*/
  /*  box-shadow: 0px 0px 32px 0px rgba(131, 219, 255, 0.3);*/
  /*  border-radius: 16px;*/
  /*}*/
  /*.el-scrollbar{*/
  /*  background: #001C2E !important;*/
  /*}*/
  /*.el-select-dropdown {*/
  /*  border: 1px solid #004266 !important;*/
  /*}*/
  /*.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {*/
  /*  background-color: #002e4e !important;*/
  /*}*/
  /*.header-left  .el-select .el-input.is-focus .el-input__inner {*/
  /*  border-color: #001C2E;*/
  /*}*/
  .header-middle{
    width:50%;
    height:100%;
    font-size: 30px;/*i*/
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5D9AF5;
    background: linear-gradient(180deg, #EFF3F5 0%, #EFF3F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 50px;
    text-align: center;
  }
  .header-right{
    width:25%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hourMs{
    width: 100px;
    height:100%;
    line-height: 50px; /*i*/
    font-size: 20px;
    font-family: Arial;
    font-weight: 400;
    color: #FFFFFF;
  }
  .timeContent{
    height:100%;
    margin-left: 10px;
    display: flex;
  }
  .timeOrWeek{
    height:100%;
    line-height:50px;/*i*/
  }
  .times{
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: white;/*i*/
    line-height: 50px;/*i*/
  }
  .weeks{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #C1F051;
    line-height: 50px;/*i*/
    margin-left: 10px;
  }
  /*.el-popper[x-placement^=bottom] .popper__arrow::after {*/
  /*  border-bottom-color: #01456a !important;*/
  /*}*/
  /*.el-popper[x-placement^=bottom] .popper__arrow {*/
  /*  border-bottom-color: #01456a !important;*/
  /*}*/
  .mainContent{
    width: 100%;
    height:calc(100% - 50px);
    display: flex;
  }
  .mainContent-left{
    width: calc(100% - 315px);
    height:100%;
  }
  .mainContent-right{
    width: 315px;
    height:100%;
    border-left:  var(--boxborder_color);
  }
  .mainContent-left-top{
    width: 100%;
    height:60%;
    display: flex;
  }
  .mainContent-left-bottom{
    width: 100%;
    height:40%;
    display: flex;
  }
  .mainContent-left-top-left{
    width: calc(30% - 15px);
    height:100%;
    margin-left: 15px;
    border-left: var(--boxborder_color);
    border-right:  var(--boxborder_color);
  }
  .mainContent-left-top-right{
    width: calc(70% - 15px);
    height:100%;
    margin-left: 15px;
    position: relative;
  }
  .summary-item {
    width: 100%;
    height: calc(33.33% - 20px);
    margin-top: 20px;
    display: flex;
  }
  .summary-item div.summary-item-col:first-child{
    margin-left: 15px;
  }
  .summary-item div.summary-item-col:nth-child(2){
    margin-left: 100px;
  }
  .summary-item-col{
    width: 140px;
    height:100%;
  }
  .summary-title{
    width: 140px;
    height:50px;
    display: flex;
  }
  .summary-title img:first-child{
    width: 30px;
    height:30px;
    border:1px dashed #66FBF9;
    background: var(--summary-img-bg);/*i*/
  }
  .summary-text{
    width: 80px;
    height:50px;
    text-align: center;
    display: grid;
  }
  .summary-title img:nth-child(3){
    width: 20px;
    height:20px;
    border:1px dashed #66FBF9;
    background: var(--summary-img-bg);/*i*/
  }
  .summary-pointer{
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #66FBF9;
    line-height: 20px;
    background: var(--summary-bg);/*i*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .summary-group{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: var(--summary-color);/*i*/
    line-height: 0px;
  }
  .summary-content{
    font-size: 30px;
    font-family: Bahnschrift;
    font-weight: bold;
    color: var(--summary-color);/*i*/
    /*line-height: 70px;*/
    text-align: center;
  }
  .echarts-bottom:first-child{
    width: calc(30% - 15px);
    height:100%;
    margin-left: 15px;
    border-left:  var(--boxborder_color);
    border-right:  var(--boxborder_color);
  }
  .echarts-bottom:nth-child(2){
    width: calc(45% - 15px);
    height:100%;
    margin-left: 15px;
    border-left:  var(--boxborder_color);
    border-right:  var(--boxborder_color);
  }
  .echarts-bottom:nth-child(3){
    width: calc(25% - 15px);
    height:100%;
    margin-left: 15px;
    border-left:  var(--boxborder_color);
  }
  .echarts-bottom:nth-child(4){
    width: calc(20% - 20px);
    height:100%;
    margin-left: 15px;
  }
  .echarts-bottom-title{
    width: 100%;
    height:25px;
    /*border-bottom: var(--echart_border);*/
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    display: flex;
    align-items: center;
    background: var(--echart_title);
    background-size: 70px 20px;
  }
  .echarts-bottom-title span{
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;/*i*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    /*text-indent: 15px;!*i*!*/
  }
  .echarts-bottom-title img{
    width: 27px;
    height:23px;
  }
  .echarts-bottom-content{
    width: 100%;
    height:calc(100% - 25px);
  }
  /*.echarts-bottom-content img{*/
  /*   border:5px solid #01456a;*/
  /*}*/
  .mainContent-right-top{
    width: 100%;
    height:50%;
  }
  .mainContent-right-bottom{
    width: 100%;
    height:50%;
  }
  .mainContent-right-style1{
    width: 100%;
    height:40%;
  }
  .mainContent-right-style2{
    width: 100%;
    height:40%;
  }
  .proPblm{
    overflow: auto;
  }
  .proPblm ul{
    list-style: none;
  }
  .proPblm ul li{
    width: 100%;
    height:30px;
    display: flex;
    align-items: center;
    color: var(--news_color);
    font-size: 13px;
    border-bottom: var(--news_border);
    cursor: pointer;
  }
  .proPblm ul li div{
    width: calc(100% - 110px);
    height:100%;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .proPblm ul li i{
    color: #ff9b41;
    font-size: 13px;
  }
  .proPblm ul li:hover{
    color: #1890ff !important;
  }
  .cms-news{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cms-news li{
    width: 100%;
    height:30px;
    line-height: 30px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: var(--news_color);
    text-indent: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    border-bottom: var(--news_border);
  }
  /*.cms-news li:nth-child(odd){*/
  /*  background: #294658;*/
  /*}*/
  /*.cms-news li:nth-child(even){*/
  /*  background: #003c5e;*/
  /*}*/
  .turnBtn{
    color: #41a4ff;/*i*/
    width: 35px;
    height:35px;
    line-height: 35px;
    border-radius: 20px;
    background: #ffffff;
    position: absolute;
    z-index: 100;
    right:5px;
    font-size: 10px;
    box-shadow: 0 1px 10px 0 #5fb6e6;
    text-align: center;
    cursor: pointer;
  }
  .tzgg{
    overflow:auto;
  }
  .tzgg::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  .tzgg::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #006397;
  }
  .tzgg::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #003c5e;
  }
  .el-carousel__button {
    display: block;
    opacity: .48;
    width: 10px !important;
    height: 10px !important;
    border-radius: 10px !important;
  }
  .mainContent-right-style a{
    width: 100%;
    height:100%;
    display: block;
  }
  .mainContent-right-style img{
    width: 100%;
    height:100%;
  }
  .titleCar{
    width: 100%;
    top:0;
    position: absolute;
    z-index:100;
    height:30px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .date-down{
    width: 202px;
    display: flex;
    background: var(--bg_color);/*i*/
    box-shadow: 0px 0px 32px 0px rgba(131, 219, 255, 0.3);
    border-radius: 15px;
    margin-left: 20px;
    position: relative;
    cursor:pointer;
  }
  .date-down div:first-child{
    width: 50px;
    height:30px;
    border-right: 1px solid;/*i*/
    border-color: var(--border-color);
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    font-size:12px;
    color:var(--main_color);
    text-align: center;
    line-height: 30px;
  }
  .date-down div:nth-child(2){
    width: 120px;
    height:30px;
    color:var(--main_color);
    text-align: center;
    line-height: 30px;
    font-size:12px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
  .date-down div:nth-child(3){
    width: 30px;
    height:30px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-left: 1px solid;/*i*/
    border-color: var(--border-color);
    font-size:16px;
    text-align: center;
    line-height: 30px;
    color: var(--main_color);
  }
  .date-down ul{
    width: 90%;
    overflow: auto;
    max-height: 300px;
    list-style: none;
    position: absolute;
    z-index:100;
    top:32px;
    left:5%;
    background: var(--bg_color);
    border:1px solid #C0C4CC;
    border-color: var(--border-color);
    scrollbar-color: #0c92d5 white;
  }
  .date-down ul li{
    width: 100%;
    height:30px;
    line-height: 30px;
    border-bottom:1px solid;
    border-color: var(--border-color);
    color: var(--main_color);
    font-size: 12px;
    text-align: center;
    cursor:pointer;
  }
  .date-down ul li:hover{
    background: #0c92d5!important;
    color: white !important;
  }
  .date-down ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  .date-down ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 0px rgba(0, 0, 0, 0.2);
    background   : #0c92d5;
  }
  .date-down ul::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #0c92d5;
  }
  video {
    object-fit:fill;
    width:100%;
    height:100%;
  }
  .line-data{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
  .shortcutkey{
    width: 120px;
    position: absolute;
    z-index: 100;
    right:50px;
    top:50px;
  }
  .shortcutkey ul{
    width: 100%;
    height:100%;
  }
  .shortcutkey ul li{
    width: 100%;
    height:30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    background: var(--tip_bg);
    cursor: pointer;
    color: var(--tip_color);
    box-shadow: 0px 0px 30px 0px rgb(255 255 255 / 28%)
  }
  .shortcutkey ul li:hover{
    color:#9ccc47;
  }
  .mapEchart{
    width: 100%;
    height:100%;
  }
</style>