fj-dc-ui/.svn/pristine/89/89cd5ed8d82dfdcbc5e4d578b91819d9a64823cf.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" :title="selectDateName">{{selectDateName}}</div>
               <div class="myselect"><i :class="iconDate"></i></div>
               <ul class="myselect" v-if="isDateVisible">
                 <li class="myselect line-data" :title="item.label" @click.stop="dataChange(item.label,item.value)" v-for="item in options">{{item.label}}</li>
               </ul>
            </div>
            <div class="date-down " @click="showHideType">
              <div class="myselect">类型</div>
              <div class="myselect" :title="selectTypeName">{{selectTypeName}}</div>
              <div class="myselect"><i :class="iconType"></i></div>
              <ul class="myselect" v-if="isTypeVisible">
                <li class="myselect line-data" :title="item.inspName" @click.stop="dcTypeChange(item.inspName,item.inspType)" v-for="item in dcTypeList">{{item.inspName}}</li>
              </ul>
            </div>
            <div class="date-down " @click="showHideOrg" v-if="isSd">
              <div class="myselect">机构</div>
              <div class="myselect" :title="selectOrgName">{{selectOrgName}}</div>
              <div class="myselect"><i :class="iconOrg"></i></div>
              <ul class="myselect" v-if="isOrgVisible">
                <li class="myselect line-data" :title="item.label" @click.stop="dataOrg(item.label,item.value)" v-for="item in orgList">{{item.label}}</li>
              </ul>
            </div>
<!--            <el-select v-model="selectDate" placeholder="请选择" size="mini" @change="dataChange">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--            <el-select v-model="selectType" placeholder="请选择" size="mini" @change="dcTypeChange">-->
<!--              <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" @click="showPerson" style="cursor:pointer;">
                        <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" @click="showPblm" style="cursor:pointer;">
                       <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" @click="showGroup" style="cursor:pointer;">
                      <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.BISINSPALLGROUPSIZE' :duration='2000'></countTo>
                      </div>
                    </div>
                    <div class="summary-item-col" @click="showMend" style="cursor:pointer;">
                      <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" @click="showObj" style="cursor:pointer;">
                      <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" v-if="organCode!='660000000000'" @click="showPblmLog">
                      <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" id="chart1"></div>
            </div>
            <div class="mainContent-left-bottom">
               <div class="echarts-bottom">
                  <div class="echarts-bottom-title"><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"><span>问题区域分布情况</span></div>-->
<!--                 <div class="echarts-bottom-content" id="chart4"></div>-->
<!--               </div>-->
               <div class="echarts-bottom">
                 <div class="echarts-bottom-title"><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"><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)">{{item.title}}</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="nearFace">
                 <el-carousel-item v-if="nearFaceList!=null && nearFaceList.length>0" v-for="(item,index) in nearFaceList" >
<!--                   <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>
                     <img :src="`${hostUrl}/${item.filePath}`" :alt="item.objName" style="width: 100%;height:100%;">
<!--                   </a>-->
                 </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="`${item.filePath}`" target="_blank" style="position: relative;display: block;width: 100%;height:100%;">
                     <div class="titleCar" :title="item.objName">{{item.objName}}</div>
                     <video :src="`${hostUrl}/${item.filePath}`" controls="controls" style="width:100%;height:100%;"></video>
                   </a>
                 </el-carousel-item>
               </el-carousel>
             </div>
           </div>
         </div>
      </div>
      <messageDetail  v-if="isShowMessageDetail" :data="messageData" @closeDialog="closeDialog"></messageDetail>
      <pblmList  v-if="isShowPblmList" :param="pblmParam" @closeDialogPblm="closeDialogPblm"></pblmList>
      <objList  v-if="isShowObjList" :param="objParam" @closeDialogObj="closeDialogObj"></objList>
      <personList  v-if="isShowPersonList" :param="personParam" @closeDialogPerson="closeDialogPerson"></personList>
      <groupList  v-if="isShowGroupList" :param="groupParam" @closeDialogGroup="closeDialogGroup"></groupList>
      <mendList  v-if="isShowMendList" :param="mendParam" @closeDialogMend="closeDialogMend"></mendList>
      <pblmLogList  v-if="isShowPblmLogList" :param="pblmLogParam" @closeDialogPblmLog="closeDialogPblmLog"></pblmLogList>
  </div>
</template>

<script>
  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 messageDetail from "./messageDetail";
  import pblmList from "./pblmList";
  import objList from "./objList";
  import personList from "./personList";
  import groupList from "./groupList";
  import mendList from "./mendList";
  import pblmLogList from "./pblmLogList";
  import {formatDate} from "@util/gw_date.js"
  import { hostUrl } from "@util/global_variable.js";
  import {
      getMessage,
      getDcPblmCount,
      getDcANCount,
      getDcType,
      getPblmPro,
      getStatiscsData,
      getDcTbItem,
      getBannerList,
      getNearFaceList,
      getQuestionImgList,
      getQuestionVideoList
  } from "../../api/homeMainView.js";
  export default {
    components: {
        countTo,
        messageDetail,
        pblmList,
        objList,
        personList,
        groupList,
        mendList,
        pblmLogList
    },
    props: [],
    data() {
      //这里存放数据
      return {
          currentHeight:window.innerHeight,
          title:"福建水利监管可视化",
          turnvalue:"0",
          fullvalue:"0",
          turnName:"全屏",
          isDate:true,
          selectDate:"6",
          selectDateName:"今年以来",
          selectOrg:"6",
          selectOrgName:"今年以来",
          isDateVisible:false,
          selectType:"",
          selectTypeName:"全部",
          selectOrgName:"全部",
          isTypeVisible:false,
          isOrgVisible:false,
          iconDown:"el-icon-arrow-down myselect",
          iconUp:"el-icon-arrow-up myselect",
          iconType:"el-icon-arrow-down myselect",
          iconDate:"el-icon-arrow-down myselect",
          iconOrg:"el-icon-arrow-down myselect",
          chart1:null,
          chart2:null,
          chart3:null,
          chart4:null,
          chart5:null,
          currentTimestap:"",
          currentWeek:"",
          currentTime:"",
          //督察类别
          dcTypeList:[],
          //日期选择项
          options:[
              {
                  label:"近一个月",
                  value:"1"
              },
              {
                  label:"近三个月",
                  value:"2"
              },
              {
                  label:"近半年",
                  value:"3"
              },
              {
                  label:"近一年",
                  value:"4"
              },
              {
                  label:"今年以来",
                  value:"6"
              },
              {
                  label:"有记录至今",
                  value:"5"
              }
          ],
          orgList:[
              {
                  label:"省调水工程运行维护中心",
                  value:"1"
              },
              {
                  label:"山东水利职业学院",
                  value:"2"
              },
              {
                  label:"省水利科学研究院",
                  value:"4"
              },
              {
                  label:"省防汛抗旱物资储备中心",
                  value:"6"
              },
              {
                  label:"省海河淮河小清河流域水利管理服务中心",
                  value:"3"
              },
              {
                  label:"省水利综合事业服务中心",
                  value:"2"
              },
              {
                  label:"省水利工程建设质量与安全中心",
                  value:"5"
              }
          ],
          //统计看板数据
          statiscsData:{
              BISINSPALLGROUPSIZE:0,
              BISINSPALLSIZE: 0,
              BISINSPALLSIZEMONTH: 0,
              HASOBJSIZE: 0,
              MENDSIZE: 0,
              MENDSIZEMONTH: 0,
              OBJSIZE: 0,
              OBJTYPESIZE: 0,
              OBJTYPESIZEMONTH: 0,
              PBLMLOGSIZE: 0,
              PBLMLOGSIZEMONTH: 0,
              PBLMSIZE: 0,
              PBLMSIZEMONTH: 0,
              PERSIZE: 0
          },
          //对象总数或问题总数
          sumCount: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,
          isShowMessageDetail:false,
          messageData:null,
          isShowPblmList:false,
          isShowObjList:false,
          isShowPersonList:false,
          isShowGroupList:false,
          isShowMendList:false,
          isShowPblmLogList:false,
          pblmParam:{},
          objParam:{},
          personParam:{},
          groupParam:{},
          mendParam:{},
          pblmLogParam:{},
          currentCode:""
      }
    },
    //监听属性 类似于data概念
    computed: {
        formatDateTime() {
            return formatDate
        },
        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') : ''
        },
        isSd(){
           if(localStorage.getItem('currentRlcode').substring(0,2)=='37'){
               return true;
           }else{
               return false;
           }
        }
    },
    //监控data中的数据变化
    watch: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
       this.currentCode = this.organCode;
       this.initDcType();
        let currentOrgId = localStorage.getItem("currentOrgId")
        if(currentOrgId == '041'){
            this.title = '水利监督'
        }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.isTypeVisible = false;
                _self.isOrgVisible = false;
                _self.iconDate = _self.iconDown;
                _self.iconType = _self.iconDown;
                _self.iconOrg = _self.iconDown;
            }
        })
        setInterval(function(){ _self.myTimer() }, 1000);
        this.initStatiscsData(this.organCode);
        this.initData();
        this.initData1();
        this.initMessage();
        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: {
        showPerson(){
            this.isShowPersonList = true;
            this.personParam["timeType"] = this.selectDate;
            this.personParam["objType"] = this.selectType;
            this.personParam["objTypeName"] = this.selectTypeName;
            this.personParam["adCode"] = this.currentCode;
            this.personParam["adCode"] = this.currentCode;
        },
        showGroup(){
            this.isShowGroupList = true;
            this.groupParam["timeType"] = this.selectDate;
            this.groupParam["objType"] = this.selectType;
            this.groupParam["objTypeName"] = this.selectTypeName;
            this.groupParam["adCode"] = this.currentCode;
        },
        showMend(){
            this.isShowMendList = true;
            this.mendParam["timeType"] = this.selectDate;
            this.mendParam["objType"] = this.selectType;
            this.mendParam["objTypeName"] = this.selectTypeName;
            this.mendParam["adCode"] = this.currentCode;
        },
        showPblmLog(){
            this.isShowPblmLogList = true;
            this.pblmLogParam["timeType"] = this.selectDate;
            this.pblmLogParam["objType"] = this.selectType;
            this.pblmLogParam["objTypeName"] = this.selectTypeName;
            this.pblmLogParam["adCode"] = this.currentCode;
        },
        showObj(){
            this.isShowObjList = true;
            this.objParam["adCode"] = this.currentCode;
            this.objParam["timeType"] = this.selectDate;
            this.objParam["objType"] = this.selectType;
            this.objParam["objTypeName"] = this.selectTypeName;
        },
        showPblm(){

            this.isShowPblmList = true;
            this.pblmParam["adCode"] =  this.currentCode;
            this.pblmParam["timeType"] = this.selectDate;
            this.pblmParam["objType"] = this.selectType;
            this.pblmParam["objTypeName"] = this.selectTypeName;
        },
        closeDialog(){
           this.isShowMessageDetail = false;
           this.messageData = null;
        },
        closeDialogPblm(){
            this.isShowPblmList = false;
            this.pblmParam = {};
        },
        closeDialogObj(){
            this.isShowObjList = false;
            this.objParam = {};
        },
        closeDialogPerson(){
            this.isShowPersonList = false;
            this.personParam = {};
        },
        closeDialogGroup(){
            this.isShowGroupList = false;
            this.groupParam = {};
        },
        closeDialogMend(){
            this.isShowMendList = false;
            this.mendParam = {};
        },
        closeDialogPblmLog(){
            this.isShowPblmLogList = false;
            this.pblmLogParam = {};
        },
        showMessage(data){
           this.isShowMessageDetail = true;
           this.messageData = data;
        },
        urlReplace(d){
           return this.hostUrl;
        },
        showHideDate(){
           this.isDateVisible = !this.isDateVisible;
           this.iconDate = (this.iconDate==this.iconDown?this.iconUp:this.iconDown);
        },
        showHideType(){
           this.isTypeVisible = !this.isTypeVisible;
           this.iconType = (this.iconType==this.iconDown?this.iconUp:this.iconDown);
        },
        showHideOrg(){
            this.isOrgVisible = !this.isOrgVisible;
            this.iconOrg = (this.iconOrg==this.iconDown?this.iconUp:this.iconDown);
        },
        IntervalData(){
            this.initStatiscsData(this.organCode);
            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:"1"}).then((res) => {
                _self.messageList = res.data.list;
            });
        },
        initNearFace(adCode){
            var _self = this;
            getNearFaceList(adCode,this.selectType).then((res) => {
                _self.nearFaceList = res.data;
                _self.$nextTick(function(){
                    var  ViewerDom = document.getElementById('nearFace');
                    var  viewer = new Viewer(ViewerDom, {})
                });
            });
        },
        initQuestionImg(adCode){
            var _self = this;
            getQuestionImgList(adCode,this.selectType).then((res) => {
                _self.questionImgList = res.data;
            });
        },
        initQuestionVideo(adCode){
            var _self = this;
            getQuestionVideoList(adCode,this.selectType).then((res) => {
                _self.questionVideoList = res.data;
            });
        },
        dataChange(name,value){
            this.isDate = true;
            this.selectDate = value;
            this.selectDateName = name;
            this.iconDate = this.iconDown;
            this.isDateVisible = false;
            this.initStatiscsData(this.organCode);
            this.initData();
            this.initData1();
        },
        dataOrg(name,value){
            this.isDate = false;
            this.selectOrg = value;
            this.selectOrgName = name;
            this.iconOrg = this.iconDown;
            this.isOrgVisible = false;
            this.initStatiscsData(this.organCode);
            this.initData();
            this.initData1();
        },
        dcTypeChange(name,value){

            this.selectType = value;
            this.selectTypeName = name;
            this.iconType = this.iconDown;
            this.isTypeVisible = false;
            this.initStatiscsData(this.organCode);
            this.initData();
            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 = [];
            _self.sumCount = 0;
            getPblmPro({timeType:_self.isDate?_self.selectDate:_self.selectOrg,objType:_self.selectType}).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({value:res.data[i].objSize,adCode:res.data[i].adCode,type:0});
                            _self.chartPblmData.xData.push(res.data[i].adName);
                            _self.chartPblmData.dataList.push({value:res.data[i].pblmSize,adCode:res.data[i].adCode,type:1});
                            _self.chartMendPblmData.xData.push(res.data[i].adName);
                            _self.chartMendPblmData.dataList.push({value:res.data[i].mendSize,adCode:res.data[i].adCode,type:1});
                            _self.sumCount =  _self.sumCount>(res.data[i].objSize>res.data[i].pblmSize?res.data[i].objSize:res.data[i].pblmSize)?_self.sumCount:(res.data[i].objSize>res.data[i].pblmSize?res.data[i].objSize:res.data[i].pblmSize);
                            _self.sumCount =  _self.sumCount>res.data[i].mendSize?_self.sumCount: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 = [];
            _self.chartPblmData.xData = [];
            _self.chartPblmData.dataList = [];
            _self.chartMendPblmData.xData = [];
            _self.chartMendPblmData.dataList = [];
            _self.sumCount = 0;
            getPblmPro({timeType:_self.selectDate,objType:_self.selectType,adCode:adCode}).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({value:res.data[i].objSize,adCode:res.data[i].adCode,type:0});
                            _self.chartPblmData.xData.push(res.data[i].adName);
                            _self.chartPblmData.dataList.push({value:res.data[i].pblmSize,adCode:res.data[i].adCode,type:1});
                            _self.chartMendPblmData.xData.push(res.data[i].adName);
                            _self.chartMendPblmData.dataList.push({value:res.data[i].mendSize,adCode:res.data[i].adCode,type:1});
                            _self.sumCount =  _self.sumCount>(res.data[i].objSize>res.data[i].pblmSize?res.data[i].objSize:res.data[i].pblmSize)?_self.sumCount:(res.data[i].objSize>res.data[i].pblmSize?res.data[i].objSize:res.data[i].pblmSize);
                            _self.sumCount =  _self.sumCount>res.data[i].mendSize?_self.sumCount:res.data[i].mendSize;
                        }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(adCode);
            });
        },
        initData1(){
            var _self = this;
            _self.chartDcTypeData.dataList = [];
            _self.chartDcTypeData.count = 0;
            getDcPblmCount(_self.isDate?_self.selectDate:_self.selectOrg,_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,
                            objType:res.data[i].PTYPE,
                            objTypeName:res.data[i].NAME
                        }
                        _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;
            getDcPblmCount(_self.selectDate,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,
                            objType:res.data[i].PTYPE,
                            objTypeName:res.data[i].NAME
                        }
                        _self.chartDcTypeData.dataList.push(obj);
                        _self.chartDcTypeData.count+=res.data[i].VALUE;
                    }
                }
                _self.initChart2(adCode);
            });
        },
        initStatiscsData(adCode){
            var _self = this;
            _self.statiscsData = {
                BISINSPALLGROUPSIZE:0,
                BISINSPALLSIZE: 0,
                BISINSPALLSIZEMONTH: 0,
                HASOBJSIZE: 0,
                MENDSIZE: 0,
                MENDSIZEMONTH: 0,
                OBJSIZE: 0,
                OBJTYPESIZE: 0,
                OBJTYPESIZEMONTH: 0,
                PBLMLOGSIZE: 0,
                PBLMLOGSIZEMONTH: 0,
                PBLMSIZE: 0,
                PBLMSIZEMONTH: 0,
                PERSIZE: 0
            }
            getStatiscsData(_self.isDate?_self.selectDate:_self.selectOrg,_self.selectType,adCode).then((res) => {
                if(res.data!=null){
                    _self.statiscsData.BISINSPALLGROUPSIZE = parseInt(res.data.BISINSPALLGROUPSIZE==null?0:res.data.BISINSPALLGROUPSIZE);
                    _self.statiscsData.BISINSPALLSIZE = parseInt(res.data.BISINSPALLSIZE==null?0:res.data.BISINSPALLSIZE);
                    _self.statiscsData.BISINSPALLSIZEMONTH = parseInt(res.data.BISINSPALLSIZEMONTH==null?0:res.data.BISINSPALLSIZEMONTH);
                    _self.statiscsData.HASOBJSIZE = parseInt(res.data.HASOBJSIZE==null?0:res.data.HASOBJSIZE);
                    _self.statiscsData.MENDSIZE = parseInt(res.data.MENDSIZE==null?0:res.data.MENDSIZE);
                    _self.statiscsData.MENDSIZEMONTH = parseInt(res.data.MENDSIZEMONTH==null?0:res.data.MENDSIZEMONTH);
                    _self.statiscsData.OBJSIZE = parseInt(res.data.OBJSIZE==null?0:res.data.OBJSIZE);
                    _self.statiscsData.OBJTYPESIZE = parseInt(res.data.OBJTYPESIZE==null?0:res.data.OBJTYPESIZE);
                    _self.statiscsData.OBJTYPESIZEMONTH = parseInt(res.data.OBJTYPESIZEMONTH==null?0:res.data.OBJTYPESIZEMONTH);
                    _self.statiscsData.PBLMLOGSIZE = parseInt(res.data.PBLMLOGSIZE==null?0:res.data.PBLMLOGSIZE);
                    _self.statiscsData.PBLMLOGSIZEMONTH = parseInt(res.data.PBLMLOGSIZEMONTH==null?0:res.data.PBLMLOGSIZEMONTH);
                    _self.statiscsData.PBLMSIZE = parseInt(res.data.PBLMSIZE==null?0:res.data.PBLMSIZE);
                    _self.statiscsData.PBLMSIZEMONTH = parseInt(res.data.PBLMSIZEMONTH==null?0:res.data.PBLMSIZEMONTH);
                    _self.statiscsData.PERSIZE = parseInt(res.data.PERSIZE==null?0:res.data.PERSIZE);
                }
            });
        },
        initDcType(){
            var _self = this;
            _self.dcTypeList = [];
            getDcType(_self.currentOrgId).then((res) => {
                if(res.data!=null && res.data.length>0){
                    _self.dcTypeList = res.data;
                    _self.dcTypeList.push({inspName:"全部",inspType:""})
                }
            });
        },
        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:'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.initStatiscsData(_self.addvcdList[i].value);
                            _self.currentCode = _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(adCode){
            this.chart2 = echarts.init(document.getElementById('chart2'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    text: this.chartDcTypeData.count,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 25
                    },
                    subtext: '问题总数',
                    subtextStyle: {
                        color: '#ffffff',
                        fontSize: 12
                    },
                    itemGap: 10,
                    left: '9%',
                    top: '35%'
                },
                // 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: {
                    type: 'scroll',
                    orient:'vertical',
                    icon: 'circle', //图例形状
                    top:'15%',
                    bottom:'15%',
                    right:'0%',
                    itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
                    itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
                    itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                    textStyle: {
                        fontSize: 12,
                        color: '#66FBF9',
                    },
                    pageButtonPosition:'start',
                    pageIconColor: '#31586C', //翻页下一页的三角按钮颜色
                    pageIconInactiveColor: '#31586C', //翻页（即翻页到头时）
                    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: ['52%', '62%'],
                    center: ["20%", "50%"],
                    labelLine: {
                        show: false
                    },
                    label:{
                        show: false
                    }

                }]
            };
            this.chart2.clear();
            this.chart2.setOption(option);
            var _self = this;
            this.chart2.on('click', function (param) {

                _self.isShowPblmList = true;
                _self.pblmParam["adCode"] = (adCode==undefined?_self.organCode:adCode) ;
                _self.pblmParam["timeType"] = _self.selectDate;
                _self.pblmParam["objType"] = (param.data.objType.length==1?('00'+param.data.objType):(param.data.objType.length==2?'0'+param.data.objType:param.data.objType));
                _self.pblmParam["objTypeName"] = param.data.objTypeName;
            });
        },
        initChart3(){
            this.chart3 = echarts.init(document.getElementById('chart3'));
            var option= {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '3%',
                    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',
                    min:0,
                    max:this.sumCount,
                    axisLabel: {
                        color: '#437d9b',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        show:true,
                        lineStyle:{
                            color:'#437d9b' //更改坐标轴颜色
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#31586C',
                        }
                    }
                },
                {
                    name:"问题/个",
                    type:'value',
                    min:0,
                    max:this.sumCount,
                    axisLabel: {
                        color: '#437d9b',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        show:true,
                        lineStyle:{
                            color:'#437d9b' //更改坐标轴颜色
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#31586C',
                        }
                    }
                }],
                series: [
                    {
                        name: "对象数",
                        type: 'bar',
                        yAxisIndex: 0,
                        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',
                        yAxisIndex: 1,
                        data: this.chartPblmData.dataList,
                        barWidth: '8px',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#72fefb' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#98cdfe' // 100% 处的颜色
                                }], false)
                            }
                        },
                    },
                    {
                        name: "整改数",
                        type: 'bar',
                        yAxisIndex: 1,
                        data: this.chartMendPblmData.dataList,
                        barWidth: '8px',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#5bb7e7' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#40aae7' // 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);
            var _self = this;
            this.chart3.on('click', function (param) {
                if(param.data.type==0){
                    _self.isShowObjList = true;
                    _self.objParam["adCode"] = param.data.adCode;
                    _self.objParam["timeType"] = _self.selectDate;
                    _self.objParam["objType"] = _self.selectType;
                    _self.objParam["objTypeName"] = _self.selectTypeName;
                }
                if(param.data.type==1){
                    _self.isShowPblmList = true;
                    _self.pblmParam["adCode"] =  param.data.adCode;
                    _self.pblmParam["timeType"] = _self.selectDate;
                    _self.pblmParam["objType"] = _self.selectType;
                    _self.pblmParam["objTypeName"] = _self.selectTypeName;
                }
            });
        },
        initChart4(adCode){
            this.chart4 = echarts.init(document.getElementById('chart4'));
            var option= {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '20%',
                    left: '7%',
                    right: '2%',
                    bottom: '10%',
                    containLabel: true
                },
                dataZoom: [{
                    borderColor:'#3e7b92',
                    backgroundColor:'rgba(107,219,255,0)', //组件的背景
                    type: 'slider', //图表下方的伸缩条
                    show: true, //是否显示
                    height:8,
                    realtime: true, //拖动时，是否实时更新系列的视图
                    start: 0, //伸缩条开始位置（1-100），可以随时更改
                    end: 99, //伸缩条结束位置（1-100），可以随时更改
                    bottom:"5",
                    textStyle:{
                        color:'#31586C'
                    }
                }],
                xAxis: [{
                    data:this.chartPblmData.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.chartPblmData.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)
                            }
                        }
                    }
                ]
            }
            this.chart4.clear();
            this.chart4.setOption(option);
            var _self = this;
            this.chart4.on('click', function (param) {

                _self.isShowPblmList = true;
                _self.pblmParam["adCode"] =  param.data.adCode;
                _self.pblmParam["timeType"] = _self.selectDate;
                _self.pblmParam["objType"] = _self.selectType;
                _self.pblmParam["objTypeName"] = _self.selectTypeName;
            });
        },
        initChart5(adCode){
            this.chart5 = echarts.init(document.getElementById('chart5'));
            var _self = this;
            // 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 : ['50%', '65%'],
                        data:[

                            {value:this.chartPblmTypeData.info, name:'一般',level:0},
                            {value:this.chartPblmTypeData.warn, name:'较重',level:1},
                            {value:this.chartPblmTypeData.fatal, name:'严重',level:2},
                            {value:this.chartPblmTypeData.error, name:'特重',level:3}
                        ]
                    }
                ]
            };
            this.chart5.setOption(option);
            var _self = this;
            this.chart5.on('click', function (param) {
                _self.isShowPblmList = true;
                _self.pblmParam["adCode"] = (adCode==undefined?_self.organCode:adCode) ;
                _self.pblmParam["timeType"] = _self.selectDate;
                _self.pblmParam["objType"] = _self.selectType;
                _self.pblmParam["objTypeName"] = _self.selectTypeName;
                _self.pblmParam["inspPblmCate"] = param.data.level;

            });
        }
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
        clearInterval(this.timerData);
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style scoped>
  .mainBox{
     width: 100%;
     height:100%;
     background: url("../../assets/bjdc.png") no-repeat;
     background-size: 100% 100%;
  }
  .mainHeader{
     width: 100%;
     height:65px;
     background: url("../../assets/headerdc.png") no-repeat;
     background-size: 100% 100%;
     min-width:1366px ;
     min-height:65px ;
     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: 32px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5D9AF5;
    line-height: 44px;
    background: linear-gradient(180deg, #EFF3F5 0%, #8AC5CF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 65px;
    text-align: center;
  }
  .header-right{
    width:25%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hourMs{
     width: 100px;
     height:100%;
     line-height: 65px;
     font-size: 20px;
     font-family: Arial;
     font-weight: 400;
     color: #FFFFFF;
  }
  .timeContent{
     height:100%;
     margin-left: 10px;
     display: flex;
  }
  .timeOrWeek{
     height:100%;
     line-height:65px;
  }
  .times{
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5D9AF5;
    line-height: 65px;
  }
  .weeks{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #C1F051;
    line-height: 65px;
    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% - 64px);
     display: flex;
  }
  .mainContent-left{
     width: calc(100% - 315px);
     height:100%;
  }
  .mainContent-right{
     width: 315px;
     height:100%;
  }
  .mainContent-left-top{
     width: 100%;
     height:60%;
     display: flex;
  }
  .mainContent-left-bottom{
    width: 100%;
    height:40%;
    display: flex;
  }
  .mainContent-left-top-left{
     width: 400px;
     height:100%;
  }
  .mainContent-left-top-right{
    width: calc(100% - 400px);
    height:100%;
  }
  .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
  }
  .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
  }
  .summary-pointer{
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #66FBF9;
    line-height: 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .summary-group{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #C1F053;
    line-height: 0px;
  }
  .summary-content{
    font-size: 30px;
    font-family: Bahnschrift;
    font-weight: bold;
    color: #C2F151;
    /*line-height: 70px;*/
    text-align: center;
  }
  .echarts-bottom:first-child{
     width: calc(30% - 15px);
     height:100%;
     margin-left: 15px;
  }
  .echarts-bottom:nth-child(2){
    width: calc(45% - 15px);
    height:100%;
    margin-left: 15px;
  }
  .echarts-bottom:nth-child(3){
    width: calc(25% - 15px);
    height:100%;
    margin-left: 15px;
  }
  .echarts-bottom:nth-child(4){
    width: calc(20% - 20px);
    height:100%;
    margin-left: 15px;
  }
  .echarts-bottom-title{
     width: 100%;
     height:20px;
     border-bottom: 5px solid #003d5e;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #FFFFFF;
     background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%);
     -webkit-background-clip: text;
     /*-webkit-text-fill-color: transparent;*/
     display: flex;
     align-items: center;
     background: url("../../assets/echart-title.png") no-repeat ;
     background-size: 70px 20px;
  }
  .echarts-bottom-title span{
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-indent: 20px;
  }
  .echarts-bottom-title img{
     width: 12px;
     height:20px;
  }
  .echarts-bottom-content{
    width: 100%;
    height:calc(100% - 25px);
  }
  .echarts-bottom-content img{
     border:5px solid #01456a;
  }
  .mainContent-right-top{
     width: 100%;
     height:20%;
  }
  .mainContent-right-style1{
     width: 100%;
     height:40%;
  }
  .mainContent-right-style2{
    width: 100%;
    height:40%;
  }
  .cms-news{
     width: 100%;
     list-style: none;
     margin: 0;
     padding: 0;
  }
  .cms-news li{
    width: 100%;
    height:30px;
    line-height: 30px;
    margin-top: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #AAE0FC;
    text-indent: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
  }
  .cms-news li:nth-child(odd){
    background: #294658;
  }
  .cms-news li:nth-child(even){
    background: #003c5e;
  }
  .turnBtn{
     color:#64bfc1;
     width: 35px;
     height:35px;
     line-height: 35px;
     border-radius: 20px;
     background: #294658;
     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: #001C2E;
     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 #002d49;
     border-bottom-left-radius: 15px;
     border-top-left-radius: 15px;
     font-size:12px;
     color:#01c3dc;
     text-align: center;
     line-height: 30px;
  }
  .date-down div:nth-child(2){
    width: 120px;
    height:30px;
    color:#01c3dc;
    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 #002d49;
    font-size:16px;
    text-align: center;
    line-height: 30px;
    color: #01c3dc;
  }
  .date-down ul{
     width: 90%;
     overflow: auto;
     max-height: 300px;
     list-style: none;
     position: absolute;
     z-index:100;
     top:32px;
     left:5%;
     background: #001C2E;
     border:1px solid #07537b;
     scrollbar-color: #006397 #001C2E;
  }
  .date-down ul li{
    width: 100%;
    height:30px;
    line-height: 30px;
    border-bottom:1px solid #073a5e;
    color: #01c3dc;
    font-size: 12px;
    text-align: center;
    cursor:pointer;
  }
  .date-down ul li:hover{
    background: #07537b!important;
    color: #64b2ba !important;
  }
  .date-down ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  .date-down ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #006397;
  }
  .date-down ul::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #003c5e;
  }
  video {
    object-fit:fill;
    width:100%;
    height:100%;
  }
  .line-data{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
</style>