fj-dc-ui/.svn/pristine/e3/e36aceb4591a5d889e658bad569c0619d67834db.svn-base

<template>
    <div class="daily_paper">
        <!--<h2 class="title">督查简报</h2>-->
        <div class="date_wrapper">
            <span>日期选择：</span>
            <!-- <el-date-picker
            v-model="newProblemDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
            </el-date-picker>&#x3000; -->
            <el-date-picker
            v-model="newProblemDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>&#x3000;
            <!-- <span>整改日期选择：</span>
            <el-date-picker
            v-model="rectifyDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
            </el-date-picker>&#x3000; -->
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="exportWord">导出</el-button>
        </div>
        <div class="daily_wrapper">
            <el-card class="daily_content">
                <section>
                    {{fullDate}}，水利督查共派出<span>{{sumInfo.groupCount}}</span>组，人员<span>{{sumInfo.memberCount}}</span>人，涉及<span>{{sumInfo.provCount>32?32:sumInfo.provCount}}</span>省。督查项目主要为农饮水安全、小型水库、水毁修复、南水北调、河湖四乱调查等。
                </section>
                <section>
                    {{startDate}}至{{enDate}}，新增问题<span>{{sumInfo.newProblemCount}}</span>项，累计发现问题<span>{{sumInfo.allProblemCount}}</span>项；{{startDate}}至{{enDate}}，累计完成整改问题<span>{{sumInfo.rectifyCount}}</span>项，累计整改率为<span>{{sumInfo.rectifyRate}}</span>%
                </section>
                <section>{{startDate}}至{{enDate}}，新发现各类问题<span>{{sumInfo.allProblemCounts}}</span>项，包含严重问题<span class="serious">{{sumInfo.seriousProblemCount}}</span>项。其中，农饮水安全<span>{{sumInfo.nongyinProblemCount}}</span>项，小型水库运行管理<span>{{sumInfo.shuikuProblemCount}}</span>项，水毁问题<span>{{sumInfo.shuihuiProblemCount}}</span>项。</section>
                <div style="height:300px;width:100%;margin-top:20px;">
                    <div id="chart1" ref="chart1" style="width:33%;height:100%;float:left;"></div>
                    <div id="chart2" ref="chart2" style="width:33%;height:100%;float:left;"></div>
                    <div id="chart3" ref="chart3" style="width:33%;height:100%;float:left;"></div>
                </div>
                <h3>典型问题</h3>
                <div>
                    <h3 class="second_title">一、农饮水安全</h3>
                    <section>
                        农饮水安全督查共派出<span>{{renyinInfo.groupCount}}</span>组，人员<span>{{renyinInfo.memberCount}}</span>人，涉及<span>{{renyinInfo.provCount}}</span>省，<span>{{renyinInfo.countyCount}}</span>县，<span>{{renyinInfo.villageCount}}</span>村，走访群众<span>{{renyinInfo.userCount}}</span>户。发现问题<span>{{renyinInfo.ProblemCount}}</span>项，其中严重<span class="serious">{{renyinInfo.seriousProblemCount}}</span>项，较重<span class="heavior">{{renyinInfo.heavierProblemCount}}</span>项，一般<span class="common">{{renyinInfo.commonProblemCount}}</span>项
                    </section>
                    <!-- <h4>（一）行政村</h4>
                    <p>1.问题描述（<span>##</span>省<span>##</span>县<span>##</span>村，……）</p>
                    <p>2.问题照片</p>
                    <h4>（二）用水户</h4>
                    <p>1.问题描述（<span>##</span>省<span>##</span>县<span>##</span>村，……）</p>
                    <p>2.问题照片</p>
                    <h4>（三）供水过程</h4>
                    <p>1.问题描述（<span>##</span>省<span>##</span>县<span>##</span>村，……）</p>
                    <p>2.问题照片</p> -->
                </div>
                <div>
                    <h3 class="second_title">二、小型水库</h3>
                    <section>
                        小型水库督查共派出<span>{{shuikuInfo.groupCount}}</span>组，人员<span>{{shuikuInfo.memberCount}}</span>人，涉及<span>{{shuikuInfo.provCount}}</span>省，<span>{{shuikuInfo.reservoirCount}}</span>座水库，其中小I型<span>{{shuikuInfo.smallOneCount}}</span>座，小II型<span>{{shuikuInfo.smallTwoCount}}</span>座。发现问题<span>{{shuikuInfo.ProblemCount}}</span>项，其中严重<span class="serious">{{shuikuInfo.seriousProblemCount}}</span>项，较重<span class="heavior">{{shuikuInfo.heavierProblemCount}}</span>项，一般<span class="common">{{shuikuInfo.commonProblemCount}}</span>项。
                    </section>
                </div>
                <div>
                    <h3 class="second_title">三、水毁修复</h3>
                    <section>
                        水毁修复督查共派出<span>{{shuihuiInfo.groupCount}}</span>组，人员<span>{{shuihuiInfo.memberCount}}</span>人，涉及<span>{{shuihuiInfo.provCount}}</span>省。发现问题<span>{{shuihuiInfo.ProblemCount}}</span>项，其中严重<span class="serious">{{shuihuiInfo.seriousProblemCount}}</span>项，较重<span class="heavior">{{shuihuiInfo.heavierProblemCount}}</span>项，一般<span class="common">{{shuihuiInfo.commonProblemCount}}</span>项。
                    </section>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import request from '../../utils/gw_ajax_request.js'
import echarts from 'echarts'
import {formatDateTimeD,formatDateWeek} from '../../utils/gw_date.js'
import {hostUrl} from '@util/global_variable.js'
export default {
    props: [],
    data(){
        return{
            sumInfo: {
                groupCount: '',
                memberCount: '',
                provCount: '',
                newProblemCount: '',
                allProblemCount: '',
                rectifyCount: '',
                rectifyRate: '',
                allProblemCounts: '',
                seriousProblemCount: '',
                nongyinProblemCount: '',
                shuikuProblemCount: '',
                shuihuiProblemCount: ''
            },
            renyinInfo:{
                groupCount: '',
                memberCount: '',
                provCount: '',
                countyCount: '',
                villageCount: '',
                userCount: '',
                ProblemCount: '',
                seriousProblemCount: '',
                heavierProblemCount: '',
                commonProblemCount: ''
            },
            shuikuInfo:{
                groupCount: '',
                memberCount: '',
                provCount: '',
                reservoirCount: '',
                smallOneCount: '',
                smallTwoCount: '',
                ProblemCount: '',
                seriousProblemCount: '',
                heavierProblemCount: '',
                commonProblemCount: ''
            },
            shuihuiInfo:{
                groupCount: '',
                memberCount: '',
                provCount: '',
                ProblemCount: '',
                seriousProblemCount: '',
                heavierProblemCount: '',
                commonProblemCount: ''
            },
            newProblemDate: [],
            // rectifyDate: '',
            newProblemDate1: [],
            // rectifyDate1: ''
        }
    },
    computed:{
        fullDate(){
            let dateArr = formatDateTimeD().split('-')
            return dateArr[0] + '年' + dateArr[1] + '月' + dateArr[2] + '日'
        },
        startDate(){
            let dateArr
            if(this.newProblemDate1.length){
                dateArr = this.newProblemDate1[0].split('-')
                return dateArr[1] + '月' + dateArr[2] + '日'
            } 
        },
        enDate(){
            let dateArr
            if(this.newProblemDate1.length){
                dateArr = this.newProblemDate1[1].split('-')
                return dateArr[1] + '月' + dateArr[2] + '日'
            } 
        },
        // dateRectify(){
        //     let dateArr = this.rectifyDate1.split('-')
        //     return dateArr[1] + '月' + dateArr[2] + '日'
        // },

    },
    created(){
        this.newProblemDate[0] = formatDateWeek(7)
        this.newProblemDate[1] = formatDateTimeD()
    },
    mounted(){
        // this.rectifyDate = formatDateTimeD()
        this.newProblemDate1 = this.newProblemDate
        // this.rectifyDate1 = this.rectifyDate
        this.getGroupPersPro()
        this.getPblmCount()
        this.getAddPblmCount()
        this.getVillInfo()
        this.getRsvrInfo()
        this.getRectInfo()
        this.getPblmCountByType()
    },
    methods:{
        getGroupPersPro(){
            request.get('dc/brief/report/getGroupPersPro').then(res=>{
                if(res.success){
                    this.sumInfo.groupCount = res.data.groupNum
                    this.sumInfo.memberCount = res.data.persNum
                    this.sumInfo.provCount = res.data.proNum
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getPblmCount(){
            request.post(`dc/brief/report/getPblmCount?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}&gsttm=${this.newProblemDate[0]}&gentm=${this.newProblemDate[1]}`).then(res=>{
                if(res.success){
                    this.sumInfo.newProblemCount = res.data.addNum
                    this.sumInfo.allProblemCount = res.data.countNum
                    this.sumInfo.rectifyCount = res.data.gNum
                    this.sumInfo.rectifyRate = res.data.gRate
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getAddPblmCount(){
            request.post(`dc/brief/report/getAddPblmCount?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}`).then(res=>{
                if(res.success){
                    this.sumInfo.seriousProblemCount = res.data.ySum
                    this.sumInfo.shuihuiProblemCount = res.data.rectNum
                    this.sumInfo.nongyinProblemCount = res.data.villNum
                    this.sumInfo.shuikuProblemCount = res.data.rsvrNum
                    this.sumInfo.allProblemCounts = res.data.addSum
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getVillInfo(){
            request.get('dc/brief/report/getVillInfo').then(res=>{
                if(res.success){
                    this.renyinInfo.groupCount = res.data.groupNum
                    this.renyinInfo.memberCount = res.data.persNum
                    this.renyinInfo.provCount = res.data.proNum
                    this.renyinInfo.countyCount = res.data.countyNum
                    this.renyinInfo.villageCount = res.data.villNum
                    this.renyinInfo.userCount = res.data.wUserNum
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getRsvrInfo(){
            request.get('dc/brief/report/getRsvrInfo').then(res=>{
                if(res.success){
                    this.shuikuInfo.groupCount = res.data.groupNum
                    this.shuikuInfo.memberCount = res.data.persNum
                    this.shuikuInfo.provCount = res.data.proNum
                    this.shuikuInfo.reservoirCount = res.data.rsvrNum
                    this.shuikuInfo.smallOneCount = res.data.rsvrNum1
                    this.shuikuInfo.smallTwoCount = res.data.rsvrNum2
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getRectInfo(){
            request.get('dc/brief/report/getRectInfo').then(res=>{
                if(res.success){
                    this.shuihuiInfo.groupCount = res.data.groupNum
                    this.shuihuiInfo.memberCount = res.data.persNum
                    this.shuihuiInfo.provCount = res.data.proNum
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        getPblmCountByType(){
            // 1:小水库 2:人饮 3:水毁
           
            
            try{            
            request.post(`dc/brief/report/getPblmCountByType?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}&objType=1`).then(res=>{
                if(res.success){
                    this.shuikuInfo.ProblemCount = res.data.num1 + res.data.num2 + res.data.num3
                    this.shuikuInfo.seriousProblemCount = res.data.num3
                    this.shuikuInfo.heavierProblemCount = res.data.num2
                    this.shuikuInfo.commonProblemCount = res.data.num1
                    this.initXiaoShuiKuProblemChart();
                }else{
                    this.$message.error(res.message)
                    this.shuikuInfo.ProblemCount = 0;
                    this.shuikuInfo.seriousProblemCount = 0;
                    this.shuikuInfo.heavierProblemCount = 0;
                    this.shuikuInfo.commonProblemCount = 0;
                    this.initXiaoShuiKuProblemChart();
                }
               
            })
            
            }catch(e){
                this.$message.error(res.message)
                    this.shuikuInfo.ProblemCount = 0;
                    this.shuikuInfo.seriousProblemCount = 0;
                    this.shuikuInfo.heavierProblemCount = 0;
                    this.shuikuInfo.commonProblemCount = 0;
                    this.initXiaoShuiKuProblemChart();
            }
            try{
            request.post(`dc/brief/report/getPblmCountByType?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}&objType=2`).then(res=>{
                if(res.success){
                    this.renyinInfo.ProblemCount = res.data.num1 + res.data.num2 + res.data.num3
                    this.renyinInfo.seriousProblemCount = res.data.num3
                    this.renyinInfo.heavierProblemCount = res.data.num2
                    this.renyinInfo.commonProblemCount = res.data.num1
                     this.initNongYinProblemChart();
                }else{
                    this.$message.error(res.message);
                    this.renyinInfo.seriousProblemCount =0;
                    this.renyinInfo.heavierProblemCount = 0;
                    this.renyinInfo.commonProblemCount = 0;
                     this.initNongYinProblemChart();
                }
            })
            
            }catch(e){
                this.$message.error(res.message);
                    this.renyinInfo.seriousProblemCount =0;
                    this.renyinInfo.heavierProblemCount = 0;
                    this.renyinInfo.commonProblemCount = 0;
                     this.initNongYinProblemChart();
            }
            try{            
            request.post(`dc/brief/report/getPblmCountByType?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}&objType=3`).then(res=>{
                if(res.success){
                    this.shuihuiInfo.ProblemCount = res.data.num1 + res.data.num2 + res.data.num3
                    this.shuihuiInfo.seriousProblemCount = res.data.num3
                    this.shuihuiInfo.heavierProblemCount = res.data.num2
                    this.shuihuiInfo.commonProblemCount = res.data.num1
                    this.initShuiHuiProblemChart();
                }else{
                    this.$message.error(res.message);
                    this.shuihuiInfo.ProblemCount = 0;
                    this.shuihuiInfo.seriousProblemCount = 0;
                    this.shuihuiInfo.heavierProblemCount = 0;
                    this.shuihuiInfo.commonProblemCount = 0;
                    this.initShuiHuiProblemChart();
                }
            })
            
            }catch(e){
                this.$message.error(res.message);
                    this.shuihuiInfo.ProblemCount = 0;
                    this.shuihuiInfo.seriousProblemCount = 0;
                    this.shuihuiInfo.heavierProblemCount = 0;
                    this.shuihuiInfo.commonProblemCount = 0;
                    this.initShuiHuiProblemChart();
            }
        },
        initNongYinProblemChart:function(){
            let chart = echarts.init(this.$refs.chart1);
            let arr_name = ['一般问题','较重问题','严重问题'];
            let arr_color = ['#14dfe1', '#ffb760', '#ff5883'];
            let option = {
                    title:{
                        text:'农饮水安全问题分布',
                        left:'center',
                    },
                    grid: {
                        bottom: '20%'
                    },
                    xAxis: {
                        "show" : true,
                        data:arr_name,
                       

                    },
                    yAxis: [{
                        name: '',
                        // type: 'value',
                        splitArea: {
                        show: false
                        },
                        "show" : false,
                    }],
                    
                    series:[
                        {
                            type:'bar',
                            data: [
                                {
                                    // value:this.shuikuInfo.commonProblemCount,
                                    value:this.renyinInfo.commonProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[0],
                                    },
                                
                                },
                                {
                                    // value:this.renyinInfo.heavierProblemCount,
                                    value:this.renyinInfo.heavierProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[1],
                                    },
                                
                                },
                                {
                                    // value:this.shuikuInfo.seriousProblemCount,
                                    value:this.renyinInfo.seriousProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[2],
                                    },
                                
                                },
                            ],
                        }
                    ],
                    };
                    chart.setOption(option);
        },
        initXiaoShuiKuProblemChart:function(){
            let chart = echarts.init(this.$refs.chart2);
            let arr_name = ['一般问题','较重问题','严重问题'];
            let arr_color = ['#14dfe1', '#ffb760', '#ff5883'];
            let option = {
                    title:{
                        text:'小水库问题分布',
                        left:'center',
                    },
                    grid: {
                        bottom: '20%'
                    },
                    xAxis: {
                        "show" : true,
                        data:arr_name,
                       

                    },
                    yAxis: [{
                        name: '',
                        // type: 'value',
                        splitArea: {
                        show: false
                        },
                        "show" : false,
                    }],
                    
                    series:[
                        {
                            type:'bar',
                            data: [
                                {
                                    // value:this.shuikuInfo.commonProblemCount,
                                    value:this.shuikuInfo.commonProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[0],
                                    },
                                
                                },
                                {
                                    // value:this.renyinInfo.heavierProblemCount,
                                    value:this.shuikuInfo.heavierProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[1],
                                    },
                                
                                },
                                {
                                    // value:this.shuikuInfo.seriousProblemCount,
                                    value:this.shuikuInfo.seriousProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[2],
                                    },
                                
                                },
                            ],
                        }
                    ],
                    };
                    chart.setOption(option);
        },
        initShuiHuiProblemChart:function(){
            let chart = echarts.init(this.$refs.chart3);
            let arr_name = ['一般问题','较重问题','严重问题'];
            let arr_color = ['#14dfe1', '#ffb760', '#ff5883'];
            let option = {
                    title:{
                        text:'水毁修复问题分布',
                        left:'center',
                    },
                    grid: {
                        bottom: '20%'
                    },
                    xAxis: {
                        "show" : true,
                        data:arr_name,
                       

                    },
                    yAxis: [{
                        name: '',
                        // type: 'value',
                        splitArea: {
                        show: false
                        },
                        "show" : false,
                    }],
                    
                    series:[
                        {
                            type:'bar',
                            data: [
                                {
                                    // value:this.shuikuInfo.commonProblemCount,
                                    value:this.shuihuiInfo.commonProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[0],
                                    },
                                
                                },
                                {
                                    // value:this.renyinInfo.heavierProblemCount,
                                    value:this.shuihuiInfo.heavierProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[1],
                                    },
                                
                                },
                                {
                                    // value:this.shuikuInfo.seriousProblemCount,
                                    value:this.shuihuiInfo.seriousProblemCount,
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            // color: '#fff',
                                            fontSize:15
                                        }
                                    },
                                    itemStyle:{
                                        color:arr_color[2],
                                    },
                                
                                },
                            ],
                        }
                    ],
                    };
                    chart.setOption(option);
        },
        search(){
            this.newProblemDate1 = this.newProblemDate
            this.rectifyDate1 = this.rectifyDate
            this.getPblmCount()
            this.getAddPblmCount()
            this.getPblmCountByType()
            this.getPblmCount()
        },
        exportWord:function(){
            // 导出
            // var xhr = new XMLHttpRequest();
            // xhr.open('get', `/pdcApi/dc/brief/report/exportWord?sttm=${this.newProblemDate[0]}&entm=${this.newProblemDate[1]}&objType=3`, true);
            // xhr.responseType = 'blob';
            // xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
            // xhr.setRequestHeader('persId',  localStorage.getItem('userid') ? localStorage.getItem('userid') : '');
            // xhr.onload = function () {
            //     if (this.status == 200) {
            //         var blob = this.response;
            //         var a = document.createElement('a');
            //         var url = window.URL.createObjectURL(blob);
            //         a.href = url;
            //         //设置文件名称
            //         a.download = '督查简报.doc';
            //         a.click();
            //     }
            // }
            // xhr.send();

            // 生成WORD
            request.get(`/bis/insp/stat/getDocByTm/${this.newProblemDate[0]}/${this.newProblemDate[1]}`).then(res=>{
                if(res.success){
                    let path = res.data.key;
                    this.openPageoffice(path)
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        openPageoffice:function(path){
            // 打开WORD
            let host = hostUrl;
            let nginx = '/pageofficePath/';
            let href = 'pageoffice://|'+host+nginx+'/pageoffice/dcSimpleReport/word?path='+path+'|width=1100px;height=800px;ismodal=false;||91A4EE66EC1921F376873E85D6C74FFA|A890649B44577C32CE1930797E1299F9';
            let a = document.createElement('a'); // 创建a标签
            a.setAttribute('href', href);// href链接
            a.click();// 自执行点击事件
            console.log(href)
        },
    },
    watch:{
        newProblemDate(){
            // this.search();
        } 
    },
    
}
</script>
<style scoped>
    .daily_paper{
        margin-top: 20px;
        line-height: 30px;
    }
    .daily_paper>.daily_wrapper{
        height: calc(100vh - 210px);
        overflow: auto;
    }
    .daily_paper .date_wrapper{
        width: 1200px;
        margin: 20px auto;
    }
    .daily_paper .title{
        text-align: center;
    }
    .daily_paper .daily_content{
        width: 1200px;
        margin: 0 auto 20px;
    }
    .daily_paper section,h3,h4,p{
        margin-top: 10px;
        text-indent: 2em;
    }
    .daily_paper .second_title{
        font-size: 18px;
    }
    .daily_paper .daily_content span{
        display: inline-block;
        padding: 0 2px;
        text-indent: 0;
        font-weight: bold;
        color: #009cee;
    }
    .daily_paper .daily_content .serious{
        color: #ff5883;
    }
    .daily_paper .daily_content .heavior{
        color: #ffb760;
    }
    .daily_paper .daily_content .common{
        color: #14dfe1;
    }
</style>