fj-dc-ui/.svn/pristine/f6/f6e38c5f7377bdb4ff60a110a012a25e22128f1e.svn-base

<template>
  <div class="mainBox">
    <div class="leftContent">
       <div class="headerContent">
         <el-date-picker
           v-model="selectTime"
           type="daterange"
           @clear="clear"
           align="right"
           value-format="yyyy-MM-dd"
           unlink-panels
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :picker-options="pickerOptions">
         </el-date-picker>
<!--         <el-date-picker-->
<!--           v-model="selectTime"-->
<!--           type="datetimerange"-->
<!--           @clear="clear"-->
<!--           format="yyyy-MM-dd HH:mm:ss"-->
<!--           value-format="yyyy-MM-dd HH:mm:ss"-->
<!--           :picker-options="pickerOptions"-->
<!--           range-separator="至"-->
<!--           start-placeholder="开始日期"-->
<!--           end-placeholder="结束日期"-->
<!--           align="right">-->
<!--         </el-date-picker>-->
         <el-select v-model="selectOrgNm" multiple collapse-tags @clear="clear" placeholder="请选择部门">
           <el-option
             v-for="item in optionsOrgNm"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
       </div>
       <div class="contentTop">
          <div class="contentTitle">
             <span class="iconTitle"></span>工作情况
          </div>
          <div class="contentData">
            <el-table
              :data="tableData1"
              @cell-click="cellClick_1"
              border
              :stripe="true"
              :cell-style="{'font-size':'10px','cursor':'pointer'}"
              :header-cell-style="{'font-size':'12px',background:'#606266'}"
              style="width: 100%;cursor:pointer;">
              <el-table-column
                prop="inspName"
                show-overflow-tooltip
                align="center"
                label="分类">
              </el-table-column>
              <el-table-column
                prop="PERSIZE"
                align="center"
                label="人次">
              </el-table-column>
              <el-table-column
                prop="GROUPSIZE"
                align="center"
                label="组次">
              </el-table-column>
              <el-table-column
                prop="OBJSIZE"
                align="center"
                label="对象">
              </el-table-column>
              <el-table-column
                prop="PBLMSIZE"
                align="center"
                label="问题">
              </el-table-column>
              <el-table-column
                prop="MENDSIZE"
                align="center"
                label="整改">
              </el-table-column>
              <el-table-column
                prop="PDSIZE"
                align="center"
                label="销号">
              </el-table-column>
            </el-table>
          </div>
       </div>
       <div class="contentBottom">
         <div class="contentTitle">
           <span class="iconTitle"></span>问题分类统计
         </div>
         <div class="contentData" id="chart1"></div>
       </div>
    </div>
    <div class="centerContent">
       <div class="headerContent">
          <p>青海省水利监督</p>
       </div>
      <div class="contentTopCenter">
        <div class="contentData" id="chart2"></div>
      </div>
      <div class="contentBottomCenter">
        <div class="contentTitle">
          <span class="iconTitle"></span>工作统计
        </div>
        <div class="contentData">
          <el-table
            :data="tableData2"
            border
            :stripe="true"
            @cell-click="cellClick_1"
            :cell-style="{'font-size':'10px'}"
            :header-cell-style="{'font-size':'12px',background:'#606266'}"
            style="width: 100%">
            <el-table-column
              prop="inspName"
              show-overflow-tooltip
              align="center"
              label="地区">
            </el-table-column>
            <el-table-column
              prop="PERSIZE"
              align="center"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="GROUPSIZE"
              align="center"
              label="组次">
            </el-table-column>
            <el-table-column
              prop="OBJSIZE"
              align="center"
              label="对象">
            </el-table-column>
            <el-table-column
              prop="PBLMSIZE"
              align="center"
              label="问题">
            </el-table-column>
            <el-table-column
              prop="MENDSIZE"
              align="center"
              label="整改">
            </el-table-column>
            <el-table-column
              prop="PDSIZE"
              align="center"
              label="销号">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="rightContent">
       <div class="headerContent">
          <div class="headDateP">{{currentTime}}</div>
       </div>
       <div class="contentTop">
         <div class="contentTitle">
           <span class="iconTitle"></span>督查统计
         </div>
         <div class="contentData" id="chart3"></div>
       </div>
       <div class="contentBottom">
         <div class="contentTitle">
           <span class="iconTitle"></span>问题等级统计
         </div>
         <div class="contentData" id="chart4"></div>
       </div>
    </div>
    <pblmList  v-if="isShowPblmList" :param="pblmParam" @closeDialogPblm="closeDialogPblm"></pblmList>
    <pblmLogList  v-if="isShowPblmLogList" :param="pblmLogParam" @closeDialogPblmLog="closeDialogPblmLog"></pblmLogList>
    <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>
  </div>
</template>

<script>
    import echarts from "echarts";
    import '@util/echarts-gl.min.js';
    import axios from 'axios'
    import request from "@util/gw_ajax_request.js";
    import {formatDate} from "@util/gw_date.js"
    import { hostUrl } from "@util/global_variable.js";
    import pblmList from "./pblmList";
    import objList from "./objList";
    import personList from "./personList";
    import groupList from "./groupList";
    import mendList from "./mendList";
    import pblmLogList from "./pblmLogList";
  export default {
    components: {
        pblmList,
        objList,
        personList,
        groupList,
        mendList,
        pblmLogList
    },
    props: [],
    data() {
      //这里存放数据
      return {
          selectTime:[new Date().getFullYear()+"-01-01",new Date().getFullYear()+"-"+((new Date().getMonth()+1)<10?"0"+(new Date().getMonth()+1):(new Date().getMonth()+1))+"-"+(new Date().getDate()<10?"0"+new Date().getDate():new Date().getDate())],
          selectOrgNm:[],
          optionsOrgNm:[
              {
                  label:'水资源处',
                  value:'水资源处'
              },
              {
                  label:'河湖处',
                  value:'河湖处'
              },
              {
                  label:'农水处',
                  value:'农水处'
              },
              {
                  label:'运管处',
                  value:'运管处'
              },
              {
                  label:'节水办',
                  value:'节水办'
              },
              {
                  label:'防御处',
                  value:'防御处'
              },
              {
                  label:'水保中心',
                  value:'水保中心'
              },
              {
                  label:'监督处',
                  value:'监督处'
              }
          ],
          currentTime:"",
          pickerOptions: {
              shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                  }
              }, {
                  text: '最近一个月',
                  onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                  }
              }, {
                  text: '最近三个月',
                  onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', [start, end]);
                  }
              }]
          },
          tableData1: [],
          tableData2: [],
          chartData1:[],
          chartDataCate:{
              ERRORPBLMSIZE: 0,
              ERRORSPBLMSIZE: 0,
              INFOPBLMSIZE: 0,
              WARMPBLMSIZE: 0
          },
          chartMapData:{
              geoCoordMap:{},
              geoCoordMapList:[],
          },
          chartAdType:{
              xData:{},
              yData:[],
          },
          chart1:null,
          chart2:null,
          chart3:null,
          chart4:null,
          isShowPblmList:false,
          isShowPblmLogList:false,
          isShowObjList:false,
          isShowPersonList:false,
          isShowGroupList:false,
          isShowMendList:false,
          pblmParam:{},
          pblmLogParam:{},
          objParam:{},
          personParam:{},
          groupParam:{},
          mendParam:{}
      }
    },
    //监听属性 类似于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') : ''
        },
    },
    //监控data中的数据变化
    watch: {
        selectTime(val){
            if(!val){
                this.selectTime = [];
            }
            this.initTable_1();
            this.initTable_2();
            this.initData_1();
            this.initData_3();
            this.initData_4();
        },
        selectOrgNm(val){
            if(!val){
                this.selectOrgNm = [];
            }
            this.initTable_1();
            this.initTable_2();
            this.initData_1();
            this.initData_3();
            this.initData_4();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        var _self = this;
        setInterval(function(){ _self.myTimer() }, 1000);
        this.initTable_1();
        this.initTable_2();
        this.initData_1();
        this.initData_3();
        this.initData_4();
    },
    //方法集合
    methods: {
        clear(){
            this.selectTime = [];
            this.selectOrgNm = [];
            this.initTable_1();
            this.initTable_2();
            this.initData_1();
            this.initData_3();
            this.initData_4();
        },
        closeDialogPblm(){
            this.isShowPblmList = false;
            this.pblmParam = {};
        },
        closeDialogPblmLog(){
            this.isShowPblmLogList = false;
            this.pblmLogParam = {};
        },
        closeDialogObj(){
            this.isShowObjList = false;
            this.objParam = {};
        },
        closeDialogPerson(){
            this.isShowPersonList = false;
            this.personParam = {};
        },
        closeDialogGroup(){
            this.isShowGroupList = false;
            this.groupParam = {};
        },
        closeDialogMend(){
            this.isShowMendList = false;
            this.mendParam = {};
        },
        cellClick_1(row, column, cell, event){
          if(column.property=="PERSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.personParam["adCode"] = row.CODE;
              }else{
                  this.personParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.personParam["objTypeName"] = row.inspName;
              }
              this.personParam["selectTime"] = this.selectTime;
              this.personParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowPersonList = true;
          }
          if(column.property=="GROUPSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.groupParam["adCode"] = row.CODE;
              }else{
                  this.groupParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.groupParam["objTypeName"] = row.inspName;
              }

              this.groupParam["selectTime"] = this.selectTime;
              this.groupParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowGroupList = true;
          }
          if(column.property=="OBJSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.objParam["adCode"] = row.CODE;
              }else{
                  this.objParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.objParam["objTypeName"] = row.inspName;
              }
              this.objParam["selectTime"] = this.selectTime;
              this.objParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowObjList = true;
          }
          if(column.property=="PBLMSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.pblmParam["adCode"] = row.CODE;
              }else{
                  this.pblmParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.pblmParam["objTypeName"] = row.inspName;
              }

              this.pblmParam["selectTime"] = this.selectTime;
              this.pblmParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowPblmList = true;
          }
          if(column.property=="MENDSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.mendParam["adCode"] = row.CODE;
              }else{
                  this.mendParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.mendParam["objTypeName"] = row.inspName;
              }

              this.mendParam["selectTime"] = this.selectTime;
              this.mendParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowMendList = true;
          }
          if(column.property=="PDSIZE"){
              if(row.CODE && row.CODE.length==12){
                  this.pblmLogParam["adCode"] = row.CODE;
              }else{
                  this.pblmLogParam["objType"] = row.CODE==undefined?"":row.CODE;
                  this.pblmLogParam["objTypeName"] = row.inspName;
              }

              this.pblmLogParam["selectTime"] = this.selectTime;
              this.pblmLogParam["depm"] = this.selectOrgNm.length>0?this.selectOrgNm:[];
              this.isShowPblmLogList = true;
          }
        },
        initTable_1(){
          var _self = this;

          var params = {
            sttm:this.selectTime.length==2?this.selectTime[0]:"",
            entm:this.selectTime.length==2?this.selectTime[1]:"",
            depm:this.selectOrgNm.length>0?this.selectOrgNm:[],
            adCode:this.organCode
          }
          this.tableData1 = [];
          request.post('/index/total/qhdc',params).then((res)=>{
              if (res.success) {
                  _self.tableData1 = res.data;
              }
          });
        },
        initTable_2(){
            var _self = this;
            var params = {
                sttm:this.selectTime.length==2?this.selectTime[0]:"",
                entm:this.selectTime.length==2?this.selectTime[1]:"",
                depm:this.selectOrgNm.length>0?this.selectOrgNm:[],
                adCode:this.organCode
            }
            this.tableData2 = [];
            this.chartMapData={
                geoCoordMap:{},
                geoCoordMapList:[]
            }
            request.post('/index/total/qhdc/totalByAdCode',params).then((res)=>{
                if (res.success) {
                    if(res.data){
                        _self.tableData2 = res.data;
                        for(var i = 0;i<res.data.length;i++){
                            if(res.data[i].inspName!='青海省'){
                                _self.chartMapData.geoCoordMap[res.data[i].inspName] = [res.data[i].LONG,res.data[i].LAT];
                                _self.chartMapData.geoCoordMapList.push({
                                    name:res.data[i].inspName,
                                    value:res.data[i].PBLMSIZE
                                });
                            }
                        }
                        _self.initChart2();
                    }
                }
            });
        },
        initData_1(){
            var _self = this;
            var params = {
                sttm:this.selectTime.length==2?this.selectTime[0]:"",
                entm:this.selectTime.length==2?this.selectTime[1]:"",
                depm:this.selectOrgNm.length>0?this.selectOrgNm:[],
                adCode:this.organCode
            }
            this.chartData1 = [];
            request.post('/index/total/qhdc/totalByPtype',params).then((res)=>{
                if (res.success) {
                    if(res.data){
                       for(var i = 0;i<res.data.length;i++){
                          _self.chartData1.push({
                              name:res.data[i].inspName,
                              value:res.data[i].PBLMSIZE
                          })
                       }
                       _self.initChart1();
                    }
                }
            });
        },
        initData_3(){
            var _self = this;
            var params = {
                sttm:this.selectTime.length==2?this.selectTime[0]:"",
                entm:this.selectTime.length==2?this.selectTime[1]:"",
                depm:this.selectOrgNm.length>0?this.selectOrgNm:[],
                adCode:this.organCode
            }
            this.chartAdType = {
              xData:[],
              yData:[]
            };
            request.post('/index/total/qhdc/pblmByAdCode',params).then((res)=>{
                if (res.success) {
                    if(res.data){
                        for(var i = 0;i<res.data.length;i++){
                           _self.chartAdType.xData.push(res.data[i].inspName);
                            for(var j = 0;j<res.data[i].PBLMSIZE.length;j++){
                                if(i==0){
                                    _self.chartAdType.yData[j] = {
                                        name: res.data[i].PBLMSIZE[j].inspName,
                                        type: 'bar',
                                        stack: 'total',
                                        barWidth:15,
                                        label: {
                                            show: true
                                        },
                                        emphasis: {
                                            focus: 'series'
                                        },
                                        data: []
                                    }
                                    _self.chartAdType.yData[j].data.push(res.data[i].PBLMSIZE[j].PBLMSIZE);
                                }else{
                                    _self.chartAdType.yData[j].data.push(res.data[i].PBLMSIZE[j].PBLMSIZE);
                                }
                            }
                        }
                        _self.initChart3();
                    }
                }
            });
        },
        initData_4(){
            var _self = this;
            var params = {
                sttm:this.selectTime.length==2?this.selectTime[0]:"",
                entm:this.selectTime.length==2?this.selectTime[1]:"",
                depm:this.selectOrgNm.length>0?this.selectOrgNm:[],
                adCode:this.organCode
            }
            this.chartDataCate = {
                ERRORPBLMSIZE: 0,
                ERRORSPBLMSIZE: 0,
                INFOPBLMSIZE: 0,
                WARMPBLMSIZE: 0
            };
            request.post('/index/total/qhdc/pblmByCate',params).then((res)=>{
                if (res.success) {
                    if(res.data){
                        _self.chartDataCate = res.data;
                        _self.initChart4();
                    }
                }
            });
        },
        initAddVcdFeatures(){
            let geoJsonName = this.organCode.substr(0, 6) + "DATA.json";
            return axios.get('/src/assets/addvGeoData/' + geoJsonName);
        },
        initChart1(){
            this.chart1 = echarts.init(document.getElementById('chart1'));
            var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend:{
                    orient: 'horizontal',
                    x:'center',      //可设定图例在左、右、居中
                    y:'bottom',     //可设定图例在上、下、居中
                    icon: "circle",
                    type: 'scroll',
                    pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
                    pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
                    pageIconSize: 11, //翻页按钮大小
                    pageFormatter: '',//隐藏翻页的数字
                    pageButtonItemGap: -6,//翻页按钮的两个之间的间距
                    itemWidth: 10, // 图例标记的图形宽度。
                    itemHeight: 60, //  图例标记的图形高度。
                    padding: 15, // 图例内边距
                    textStyle: {
                        color: "#626675", // 文字的颜色。
                        fontSize: 12, // 文字的字体大小。
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['0%', '55%'],
                    color:colorList,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}:{c}({d}%)',
                        textStyle:{
                            fontSize:12,
                            color:'#626675'
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 10,
                            length2: 10,
                            lineStyle: {
                                width: 0.5
                            }
                        }
                    },
                    data: this.chartData1,
                }]
            };
            this.chart1.clear();
            this.chart1.setOption(option);
        },
        async initChart2() {
            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.chart2 = echarts.init(document.getElementById('chart2'));
            var jsonFeatures = await this.initAddVcdFeatures();
            echarts.registerMap(this.organNm, jsonFeatures.data);
            var option = {
                geo: {
                    map: this.organNm,
                    show: true,
                    roam: false,
                    zoom:1.2,
                    label: {
                        normal: {
                            show: true,
                            color:'#fff'
                        },
                        emphasis: {
                            show: true,
                            color:'#fff'
                        },
                    },
                    itemStyle: {
                        normal: {
                            label: { show: true },
                            color: '#F4F4F4',
                            borderWidth: 2, //区域边框宽度
                            borderColor: '#6fc4f0', //区域边框颜色
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.9,
                                colorStops: [{
                                    offset: 0, color: '#3384da'
                                }, {
                                    offset: 1, color: '#5aaef1'
                                }],
                                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: '#3476d0',
                            },
                        },
                        data: convertData(),
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                ],
            };
            this.chart2.clear();
            this.chart2.setOption(option);
        },
        initChart3(){
            this.chart3 = echarts.init(document.getElementById('chart3'));
            var colorList = ['#37bacb', '#ffbf47', '#5971fb', '#3aa1ff']
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                color:colorList,
                legend:{
                    orient: 'horizontal',
                    x:'center',      //可设定图例在左、右、居中
                    y:'bottom',     //可设定图例在上、下、居中
                    icon: "circle",
                    type: 'scroll',
                    pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
                    pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
                    pageIconSize: 11, //翻页按钮大小
                    pageFormatter: '',//隐藏翻页的数字
                    pageButtonItemGap: -6,//翻页按钮的两个之间的间距
                    itemWidth: 10, // 图例标记的图形宽度。
                    itemHeight: 60, //  图例标记的图形高度。
                    padding: 15, // 图例内边距
                    textStyle: {
                        color: "#626675", // 文字的颜色。
                        fontSize: 12, // 文字的字体大小。
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize:12,
                            color:"#626675"
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#cccccc'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.chartAdType.xData,
                    axisLabel : {
                        formatter: '{value}',
                        textStyle: {
                            fontSize:12,
                            color:'#626675'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#cccccc',
                        }
                    }
                },
                series: this.chartAdType.yData,
            };
            this.chart3.clear();
            this.chart3.setOption(option);
        },
        initChart4(){
            this.chart4 = echarts.init(document.getElementById('chart4'));
            var colorList = ['#36cbcb', '#4ecb73', '#fbd437', '#3aa1ff']
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend:{
                    orient: 'horizontal',
                    x:'center',      //可设定图例在左、右、居中
                    y:'bottom',     //可设定图例在上、下、居中
                    icon: "circle",
                    type: 'scroll',
                    pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
                    pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
                    pageIconSize: 11, //翻页按钮大小
                    pageFormatter: '',//隐藏翻页的数字
                    pageButtonItemGap: -6,//翻页按钮的两个之间的间距
                    itemWidth: 10, // 图例标记的图形宽度。
                    itemHeight: 50, //  图例标记的图形高度。
                    padding: 15, // 图例内边距
                    textStyle: {
                        color: "#626675", // 文字的颜色。
                        fontSize: 12, // 文字的字体大小。
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['0%', '60%'],
                    color:colorList,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}:{c}({d}%)',
                        textStyle:{
                            fontSize:12,
                            color:'#626675'
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 30,
                            lineStyle: {
                                width: 0.5
                            }
                        }
                    },
                    data: [{
                        'name': '一般',
                        'value': this.chartDataCate.INFOPBLMSIZE
                    }, {
                        'name': '较重',
                        'value': this.chartDataCate.WARMPBLMSIZE
                    }, {
                        'name': '严重',
                        'value': this.chartDataCate.ERRORPBLMSIZE
                    }, {
                        'name': '特别严重',
                        'value': this.chartDataCate.ERRORSPBLMSIZE
                    }
                    ],
                }]
            };
            this.chart4.clear();
            this.chart4.setOption(option);
        },
        myTimer(){
            var d = new Date();
            var 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());
            var currentDate = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
            var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var currentWeek = weeks[d.getDay()];
            this.currentTime = currentDate+"  "+currentTimestap+"  "+currentWeek;
        },
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {

    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style scoped>
  .mainBox .contentData /deep/ .el-table{
     height:100%;
  }
  .mainBox .contentData /deep/ .el-table .el-table__header-wrapper{
     height:36px;
  }
  /*.mainBox .contentData /deep/ .el-table .el-table__header-wrapper table{*/
  /*   width: 100% !important;*/
  /*   table-layout:auto !important;*/
  /*}*/
  .mainBox .contentData /deep/ .el-table .el-table__body-wrapper{
     height:calc(100% - 36px);
     overflow: auto;
  }
  .mainBox .contentData /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: 0px;
  }
  .headerContent /deep/ .el-range-editor--mini .el-range-separator{
     line-height: 26px;
  }
  /*.mainBox .contentData /deep/ .el-table .el-table__body-wrapper table{*/
  /*  width: 100% !important;*/
  /*  table-layout:auto !important;*/
  /*}*/
  /*.mainBox .contentData /deep/ .el-table .cell.el-tooltip{*/
  /*  padding-left: 0px !important;*/
  /*  min-width: 0px !important;*/
  /*  width: 100% !important;*/
  /*  text-overflow: ellipsis;*/
  /*  -o-text-overflow: ellipsis;*/
  /*  white-space:nowrap;*/
  /*}*/
  .mainBox{
     width: 100%;
     height:100%;
     margin: 0;
     padding: 0;
     display: flex;
     background: #f2f2f2;
  }
  .leftContent{
     width: calc(25% - 15px);
     height:calc(100% - 10px);
     margin-left: 10px;
     margin-right: 5px;
  }
  .centerContent{
    width: calc(50% - 20px);
    height:calc(100% - 10px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .rightContent{
    width: calc(25% - 15px);
    height:calc(100% - 10px);
    margin-left: 5px;
    margin-right: 10px;
  }
  .headerContent{
     width: 100%;
     height:68px;
     display: flex;
     justify-content: center;
  }
  .headerContent /deep/ .el-range-editor--mini.el-input__inner{
     height:35px !important;
     width: calc(50% - 2.5px) !important;
     margin-right: 2.5px !important;
     margin-top: 23px;
  }
  .headerContent /deep/ .el-select{
    height:35px !important;
    width: calc(50% - 2.5px) !important;
    margin-left: 2.5px !important;
    margin-top: 23px;
  }
  .headerContent /deep/ .el-input--mini .el-input__inner{
    height:35px !important;
  }
  .headerContent p{
     padding: 0;
     margin-top: 1px;
     height:57px;
     background: #09a4f1;
     font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 36px;
     color: rgb(255, 255, 255);
     width: calc(100% - 200px);
     text-align: center;
     line-height: 57px;
     border-radius: 0px 0px 100px 100px;
  }
  .headDateP{
     width: 100%;
     height:48px;
     margin-top: 10px;
     background: #ffffff;
     line-height: 48px;
     font-family: 微软雅黑, sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 25px;
     text-align: center;
     color:#09a4f1;
  }
  .contentTop{
     width: calc(100% - 2px);
     height:calc(55% - 41px);
     border-width: 1px;
     border-style: solid;
     border-color: #3ebdf4;
  }
  .contentTopCenter{
    width: calc(100% - 2px);
    height:calc(65% - 41px);
    border-width: 1px;
    border-style: solid;
    border-color: #3ebdf4;
    background: white;
  }
  .contentBottom{
    width: calc(100% - 2px);
    height:calc(45% - 41px);
    margin-top: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #3ebdf4;
  }
  .contentBottomCenter{
    width: calc(100% - 2px);
    height:calc(35% - 41px);
    margin-top: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #3ebdf4;
    background: white;
  }
  .contentTitle{
     width:100%;
     height:35px;
     font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 17px;
     color: rgb(255, 255, 255);
     text-align: left;
     line-height: 35px;
     background: #14adf5;
     display: flex;
     align-items: center;
  }
  .iconTitle{
    width: 5px;
    height: 20px;
    background: white;
    margin-left: 10px;
    margin-right: 10px;
  }
  .contentData{
     width: 100%;
     height:calc(100% - 35px);
     background: white;
  }
</style>