fj-dc-ui/.svn/pristine/61/61c23763aaf11558cb7eb8509f38b98c2e85f2e3.svn-base

<template>
  <div class="boxResult">
     <div class="headResult">
        <div class="headResult-item1">
          <span>时间</span>
          <el-select v-model="selectDate" placeholder="请选择" @change="changeDate">
            <el-option
              v-for="item in optionsDate"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>类型</span>
          <el-select v-model="selectType" placeholder="请选择" @change="changeType">
            <el-option
              v-for="item in typeOption"
              :key="item.inspType"
              :label="item.inspName"
              :value="item.inspType">
            </el-option>
          </el-select>
        </div>
        <div class="headResult-item2">督查成果统计</div>
     </div>
     <div class="resultContent">
        <div class="content-op">
           <div class="op-item" style="width: 55%;display: flex">
             <div class="op-item-title">督查对象分类问题数</div>
             <div class="title-right">问题等级统计</div>
             <div class="op-item-content" id="chartR1"></div>
             <div class="op-item-content" id="chartR3"></div>
           </div>
           <div class="op-item" style="width: 45%;">
             <div class="op-item-content" id="chartR4" style="height:100%;"></div>
           </div>
        </div>
        <div class="content-op">
           <div class="op-item" style="width: 55%;">
             <div class="op-item-title">督查对象区域及问题区域分布</div>
             <div class="op-item-content" id="chartR2"></div>
           </div>
           <div class="op-item" style="width: 45%;">
             <div class="op-item-content" id="chartR5" style="height:100%;"></div>
           </div>
        </div>
     </div>
    <pblmList  v-if="isShowPblmList" :param="pblmParam" @closeDialogPblm="closeDialogPblm"></pblmList>
    <objList  v-if="isShowObjList" :param="objParam" @closeDialogObj="closeDialogObj"></objList>
  </div>
</template>

<script>
  import echarts from "echarts";
  import axios from 'axios'
  import request from "@util/gw_ajax_request.js";
  import {formatDate} from "@util/gw_date.js"
  import pblmList from "./pblmList";
  import objList from "./objList";
  import { hostUrl } from "@util/global_variable.js";
  import {
      getDcPblmCount,
      getDcType,
      getPblmPro,
      getObjCount
  } from "../../api/homeMainView.js";
  export default {
    components: {
        pblmList,
        objList
    },
    props: [],
    data() {
      //这里存放数据
      return {
          isShowPblmList:false,
          isShowObjList:false,
          pblmParam:{},
          objParam:{},
          optionsDate:[
              {
                  label:"近一个月",
                  value:"1"
              },
              {
                  label:"近三个月",
                  value:"2"
              },
              {
                  label:"近半年",
                  value:"3"
              },
              {
                  label:"近一年",
                  value:"4"
              },
              {
                  label:"有记录至今",
                  value:"5"
              }
          ],
          selectDate:"5",
          selectType:"",
          selectTypeName:"全部",
          typeOption:[],
          chartR1:null,
          chartR2:null,
          chartR3:null,
          chartR4:null,
          chartR5:null,
          color:[
              '#e5cf0d','#97b552','#2ec7c9','#b6a2de',
              '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#40e0d0',
              '#4b3eff', '#0cffd5', '#afeea7', '#05d089', '#ffd700',
              '#6c8e37', '#4ea397', '#3cb371', '#6db8a9', '#7bd9a5',
              '#15a7ff', '#9de0ff', '#9da7ff', '#4cbbfe', '#7dc3fe',
              '#1658bb', '#433e7c', '#11ddf4', '#009db2', '#024b51',
              '#0d61cf', '#127619', '#40aae7', '#26ccd8', '#3685fe',
              '#4065ef', '#5160f5', '#f76ec0', '#f96711', '#50c48f'
          ],
          chartDcTypeData:{
            dataList:[],
            count:0
          },
          chartObjData:{
            xData:[],
            dataList:[]
          },
          chartPblmData:{
            xData:[],
            dataList:[],
          },
          max:0,
          chartPblmTypeData:[
            {name:"一般问题",value:"0",level:0},
            {name:"较严重问题",value:"0",level:1},
            {name:"严重问题",value:"0",level:2},
            {name:"特别严重问题",value:"0",level:3}
          ],
          groupPersonList:[
              {group:"第一组",type:"小水库",value:10},
              {group:"第一组",type:"水闸",value:20},
              {group:"第二组",type:"小水库",value:1},
              {group:"第二组",type:"水闸",value:23},
              {group:"第三组",type:"人饮",value:28}
          ]
      }
    },
    //监听属性 类似于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: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.initDcType();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.initData();
      this.initData1();
      this.initData2();
      window.addEventListener('resize', () => this.resizeCharts());
    },
    //方法集合
    methods: {
        closeDialogPblm(){
            this.isShowPblmList = false;
            this.pblmParam = {};
        },
        closeDialogObj(){
            this.isShowObjList = false;
            this.objParam = {};
        },
        changeDate(val){
           this.selectDate = val;
           this.initData();
           this.initData1();
        },
        changeType(val){
            this.selectType = val;
            for(var i = 0;i<this.typeOption.length;i++){
               if(val==this.typeOption[i].inspType){
                  this.selectTypeName = this.typeOption[i].inspName;
               }
            }
            this.initData();
            this.initData1();
        },
        resizeCharts(){
            this.chartR1.resize();
            this.chartR2.resize();
            this.chartR3.resize();
            this.chartR4.resize();
            this.chartR5.resize();
        },
        initDcType(){
            var _self = this;
            _self.typeOption = [];
            getDcType(_self.currentOrgId).then((res) => {
                if(res!=null && res.data.length>0){
                    _self.typeOption = res.data;
                    _self.typeOption.push({inspName:"全部",inspType:""})
                }
            });
        },
        initData(){
            var _self = this;
            _self.chartDcTypeData.dataList = [];
            _self.chartDcTypeData.count = 0;
            getDcPblmCount(_self.selectDate,_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.initChart1();
            });
        },
        initData1(){
            var _self = this;
            _self.chartPblmTypeData[0].value= 0;
            _self.chartPblmTypeData[1].value= 0;
            _self.chartPblmTypeData[2].value= 0;
            _self.chartPblmTypeData[3].value= 0;
            _self.chartObjData.xData = [];
            _self.chartObjData.dataList = [];
            _self.chartPblmData.xData = [];
            _self.chartPblmData.dataList = [];
            _self.max=0;
            getPblmPro({timeType:_self.selectDate,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,itemStyle:{color:_self.color[i]}});
                            _self.chartPblmData.xData.push(res.data[i].adName);
                            _self.chartPblmData.dataList.push({value:res.data[i].pblmSize,adCode:res.data[i].adCode,itemStyle:{color:_self.color[i]}});
                            if(res.data[i].objSize>_self.max){
                                _self.max = res.data[i].objSize;
                            }
                            if(res.data[i].pblmSize>_self.max){
                                _self.max = res.data[i].pblmSize;
                            }
                        }else{
                            _self.chartPblmTypeData[0].value= res.data[i].infoPlbm;
                            _self.chartPblmTypeData[1].value= res.data[i].warmPlbm;
                            _self.chartPblmTypeData[2].value= res.data[i].errorPlbm;
                            _self.chartPblmTypeData[3].value= res.data[i].errorsPlbm;
                        }
                    }
                }
                _self.initChart2();
                _self.initChart3();
            });
        },
        initData2(){
            var groupName = [];
            var typeName = [];
            var seriesArr = [];
            var _self = this;
            getObjCount().then((res) => {
                if(res.data!=null && res.data.length>0){
                    for(var i = 0;i<res.data.length;i++){
                        if(!this.isHave(res.data[i].pc,groupName)){
                            groupName.push(res.data[i].pc);
                        }
                        if(!this.isHave(res.data[i].objNmae,typeName)){
                            typeName.push(res.data[i].objNmae);
                        }
                    }
                    for(var j = 0;j<typeName.length;j++){
                        var obj = {
                            name:typeName[j],
                            data:[],
                            type: 'line',
                            stack: 'total',
                            barWidth:10,
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            }
                        }
                        for(var k = 0;k<groupName.length;k++){
                            var isTrue = false;
                            for(var l = 0;l<res.data.length;l++){
                                if(typeName[j]==res.data[l].objNmae && groupName[k]==res.data[l].pc){
                                    obj.data.push(res.data[l].num==null?0:res.data[l].num);
                                    isTrue = true;
                                }
                            }
                            if(!isTrue){
                                obj.data.push(0);
                            }
                        }
                        seriesArr.push(obj);
                    }
                    this.initChart5(typeName,groupName,seriesArr);
                }else{
                    this.initChart5(typeName,groupName,seriesArr);
                }
            });
        },
        isHave(str,arr){
          for(var i = 0;i<arr.length;i++){
              if(str==arr[i]){
                 return true;
              }
          }
          return false;
        },
        initChart1(){
            this.chartR1 = echarts.init(document.getElementById('chartR1'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    text: this.chartDcTypeData.count,
                    textStyle: {
                        color: '#333',
                        fontSize: 25
                    },
                    subtext: '问题总数',
                    subtextStyle: {
                        color: '#333',
                        fontSize: 12
                    },
                    itemGap: 10,
                    left: '22.5%',
                    top: '45%'
                },
                color:this.color,
                tooltip: {
                    trigger: "item",
                    formatter: "{b}"
                },
                legend: {
                    type: 'scroll',
                    orient:'vertical',
                    icon: 'circle', //图例形状
                    top:'15%',
                    bottom:'15%',
                    left:'60%',
                    itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
                    itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
                    itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                    textStyle: {
                        fontSize: 14,
                        color: '#333',
                    },
                    pageButtonPosition:'start',
                    pageIconColor: '#333', //翻页下一页的三角按钮颜色
                    pageIconInactiveColor: '#333', //翻页（即翻页到头时）
                    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: ['50%', '60%'],
                    center: ["30%", "50%"],
                    labelLine: {
                        show: false
                    },
                    label:{
                        show: false
                    }

                }]
            };
            this.chartR1.clear();
            this.chartR1.setOption(option);
            var _self = this;
            this.chartR1.on('click', function (param) {
                _self.isShowPblmList = true;
                _self.pblmParam["adCode"] =_self.organCode;
                _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;
            });
        },
        initChart2(){
            this.chartR2 = echarts.init(document.getElementById('chartR2'));
            var option= {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['蒸发量', '降水量', '平均温度']
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [{
                    data: this.chartObjData.xData,
                }],
                yAxis: [{
                    name: '对象数/个',
                    type: 'value',
                    max:this.max
                },
                {
                    name: '问题数/个',
                    type: 'value',
                    max:this.max
                }],
                series: [
                    {
                        name: "对象数",
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.chartObjData.dataList,
                        barWidth:15
                    },
                    {
                        name: "问题数",
                        type: 'bar',
                        yAxisIndex: 1,
                        data: this.chartPblmData.dataList,
                        barWidth:15
                    }
                ]
            }
            this.chartR2.clear();
            this.chartR2.setOption(option);
            var _self = this;
            this.chartR2.on('click', function (param) {
                if(param.seriesName=="对象数"){
                    _self.isShowObjList = true;
                    _self.objParam["adCode"] = param.data.adCode;
                    _self.objParam["timeType"] = _self.selectDate;
                    _self.objParam["objType"] = _self.selectType;
                    _self.objParam["objTypeName"] = _self.selectTypeName;
                }else{
                    _self.isShowPblmList = true;
                    _self.pblmParam["adCode"] = param.data.adCode;
                    _self.pblmParam["timeType"] = _self.selectDate;
                    _self.pblmParam["objType"] = _self.selectType;
                    _self.pblmParam["objTypeName"] = _self.selectTypeName;
                }

            })
        },
        initChart3(){
            var _self = this;
            _self.chartR3 = echarts.init(document.getElementById('chartR3'));
            let sum = 0;
            let color = ['#009DFF','#00e473','#ffc300','#FF8700'];
            let pieSeries = [],
                lineYAxis = [];
            _self.chartPblmTypeData.forEach((v, i) => {
                sum = sum + v.value;
            })
            _self.chartPblmTypeData.forEach((v, i) => {
                pieSeries.push({
                    name: '问题级别',
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                    center: ["50%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: v.value,
                        name: v.name,
                        level:v.level
                    }, {
                        value: sum - v.value,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });
                pieSeries.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
                    center: ["50%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: 7.5,
                        itemStyle: {
                            color: "#E3F0FF"
                        }
                    }, {
                        value: 2.5,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });
                v.percent = (v.value / sum * 100).toFixed(1) + "%";
                lineYAxis.push({
                    value: i
                });
            })
            let option = {
                backgroundColor: '#fff',
                color: color,
                grid: {
                    top: '15%',
                    bottom: '54%',
                    left: "50%",
                    containLabel: false
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(params) {
                            let item = _self.chartPblmTypeData[params];
                            return item.name+":"+item.value
                        },
                        interval: 0,
                        inside: true,
                        show: true
                    },
                    data: lineYAxis
                }],
                xAxis: [{
                    show: false
                }],
                series: pieSeries
            };
            this.chartR3.clear();
            this.chartR3.setOption(option);
            var _self = this;
            this.chartR3.on('click', function (param) {
                if(param.data.level==undefined){
                    _self.$message.warning("当前数据没有值或点击区域不正确");
                }
                _self.isShowPblmList = true;
                _self.pblmParam["adCode"] = _self.organCode;
                _self.pblmParam["timeType"] = _self.selectDate;
                _self.pblmParam["objType"] = _self.selectType;
                _self.pblmParam["objTypeName"] = _self.selectTypeName;
                _self.pblmParam["inspPblmCate"] = param.data.level;
            });
        },
        // initChart4(){
        //     this.chartR4 = echarts.init(document.getElementById('chartR4'));
        //     var option= {
        //         tooltip: {
        //             trigger: 'axis',
        //         },
        //         grid: {
        //             top: '20%',
        //             left: '3%',
        //             right: '3%',
        //             bottom: '5%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             data: this.chartPblmData.xData,
        //             axisLabel: {
        //                 margin: 10,
        //                 color: '#333',
        //                 interval:0,
        //                 rotate:40,
        //                 textStyle: {
        //                     fontSize: 12
        //                 },
        //             },
        //             axisLine: {
        //                 lineStyle: {
        //                     color: '#333',
        //                 }
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //         }],
        //         yAxis: [{
        //             name:"问题数/个",
        //             type:'value',
        //             axisLabel: {
        //                 color: '#333',
        //                 textStyle: {
        //                     fontSize: 12
        //                 },
        //             },
        //             axisLine: {
        //                 show:true,
        //                 lineStyle:{
        //                     color:'#333' //更改坐标轴颜色
        //                 }
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //             splitLine: {
        //                 lineStyle: {
        //                     color: '#333',
        //                 }
        //             }
        //         }],
        //         series: [
        //             {
        //                 name: "问题数",
        //                 type: 'bar',
        //                 data: this.chartPblmData.dataList,
        //                 barWidth:25
        //             }
        //         ]
        //     }
        //     this.chartR4.clear();
        //     this.chartR4.setOption(option);
        // },
        initPie(data,name){
            this.chartR4 = echarts.init(document.getElementById('chartR4'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter:'{b}: {c} ({d}%)'
                },
                color:this.color,
                title: {
                    text: '督查对象占比趋势统计',
                    subtext:name,
                    left: 'left'
                },
                grid:{
                   top:"30%"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 50,
                    bottom: 20,
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['0%', '50%'],
                        labelLine: {
                            length: 30,
                        },
                        label: {
                            formatter: '{b}:{c}个({d}%)',
                        },
                        data: data
                    }
                ]
            };
            this.chartR4.clear();
            this.chartR4.setOption(option);
        },
        initChart5(arr1,arr2,arr3){
            this.chartR5 = echarts.init(document.getElementById('chartR5'));
            var _self = this;
            var option = {
                tooltip: {
                    trigger: 'axis',
                    formatter:function(params){
                        var htmlStr = "";
                        for(var i = 0;i<params.length;i++){
                           var param = params[i];
                           var xName = param.name;
                           var seriesName = param.seriesName;
                           var value = param.value;
                           var color = param.color;
                           if(i===0){
                               htmlStr+=xName+"<br/>";
                           }
                            htmlStr+="<div>";
                            htmlStr+='<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                            htmlStr+=seriesName+":"+value;
                            htmlStr+="</div>";
                            params[i].name=param.seriesName;
                        }
                        _self.initPie(params,xName);
                        return htmlStr;
                    },
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                color:this.color,
                legend: {
                    data:arr1,
                    type:'scroll',
                    top:'10%',
                },
                grid: {
                    top:'20%',
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data:arr2
                },
                yAxis: {
                    type: 'value',
                },
                series:arr3
            };
            this.chartR5.clear();
            this.chartR5.setOption(option);
            var arr = [];
            if(option.series.length>0){
                for(var i = 0;i<option.series.length;i++){
                    var obj = {
                        name:option.series[i].name,
                        value:option.series[i].data[0]
                    }
                    arr.push(obj);
                }
                 this.initPie(arr,arr2[0]);
            }else{
                 this.initPie(arr,arr2[0]);
            }
        },
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {

    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style scoped>
  .boxResult{
     width: 100%;
     height:100%;
     margin:0;
     padding: 0;
  }
  .headResult{
     width: 100%;
     height:50px;
     display: flex;
     box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
  }
  .headResult-item1{
     width: calc(50% - 150px);
     height:100%;
     display: flex;
     align-items: center;
     font-size: 14px;
  }
  .headResult-item1 span{
    margin: 0 10px 0 10px;
  }
  .headResult-item2{
    width: 300px;
    height:100%;
    font-size: 25px;
    text-align:center;
    line-height: 50px;
    color: #202020;
  }
  .resultContent{
    width: 100%;
    height:calc(100% - 55px);
  }
  .content-op{
    width: 100%;
    height:calc(50% - 5px);
    display: flex;
    margin-top: 5px;
  }
  .op-item{
    height:100%;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    margin-left: 2.5px;
    margin-right: 2.5px;
    position: relative;
  }
  .op-item-title{
    height:35px;
    position: absolute;
    z-index: 100;
    top:0;
    left: 0;
    line-height: 35px;
    text-indent: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: 黑体;
    padding: 0 10px 0 10px;
    border: 1px solid #4d494930;
    background: #f3f6f7;
  }
  .title-right{
    height:35px;
    position: absolute;
    z-index: 100;
    top:0;
    left: 50%;
    line-height: 35px;
    text-indent: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: 黑体;
    padding: 0 10px 0 10px;
    border: 1px solid #4d494930;
    background: #f3f6f7;
  }
  .op-item-content{
    width: 100%;
    height:100%;
  }
  #chartR1{
     width: 50% !important;
  }
  #chartR3{
     width: 50% !important;
  }
  #chartR5{
    width: 100%!important;
  }
</style>