fj-dc-ui/.svn/pristine/4e/4e3d8fc0fa82adf20c7030d1475276ba059967c9.svn-base

<template>
    <el-row>
        <el-col :span="4">
            <div class="left_tree_title" style="margin: 10px;">年度：
                <el-select v-model="year" placeholder="请选择" style="width: 60%;">
                    <el-option v-for="item in yearList" :key="item.id" :label="item.year" :value="item.year">
                    </el-option>
                </el-select>
            </div>
            <provTreeList rootCode="000000" rootType="1" :style="{'max-height':dxdcAsideHeight+'px'}"
                @provTreeSelectChange="provTreeSelectChangeHandler"></provTreeList>
        </el-col>
        <el-col :span="20">
            <el-card :body-style="{'padding-top':'10px'}">
                <div class="block">
                    <span class="demonstration" style="margin-right: 5px">选择时间段</span>
                    <el-date-picker v-model="findTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" style="width: 280px;">
                    </el-date-picker>
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">督查类别</span>
                    <el-select v-model="objtypeArr" filterable placeholder="请选择" multiple clearable @change="objtypeChange" style="width: 260px;">
                        <el-option v-for="item in supervisionObjlist" :key="item.id" :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">数据来源</span>
                    <el-select v-model="dataSource" placeholder="请选择" clearable @change="dutydepChange" style="width: 260px;">
                        <el-option :label="obj.label" :value="obj.value" v-for="obj in sourceList" :key="obj">
                        </el-option>
                    </el-select>
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">问题类型</span>
                    <el-select v-model="pblmNature" placeholder="请选择" clearable @change="dutydepChange" style="width: 260px;">
                      <el-option :label="obj.label" :value="obj.value" v-for="obj in natureList" :key="obj">
                      </el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-download" style="float: right;margin:0 5px"
                        @click="exportExecl">导出</el-button>
                    <el-button type="primary" icon="el-icon-search" style="float: right;margin:0 5px"
                        @click="searchExecl">查询</el-button>
                </div>
            </el-card>
            <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
                <form id="formMain2" ref="formMain2" target="frameMain2" :action="reportSrc" method="post">
                    <input type="hidden" name="width" v-model="windowWidth">
                    <input type="hidden" name="height" v-model="windowHeight">
                    <input type="hidden" name="adCode" v-model="adCode">
                    <input type="hidden" name="sttm" v-model="sttm">
                    <input type="hidden" name="ettm" v-model="ettm">
                    <input type="hidden" name="year" v-model="year">
                    <input type="hidden" name="objtype" v-model="objtype">
                    <input type="hidden" name="dataSource" v-model="dataSource">
                    <input type="hidden" name="pblmNature" v-model="pblmNature">

                </form>
                <div style="width: 100%;height: 100%;" v-loading="loading">
                    <iframe ref="frameMain2" name="frameMain2" id="frameMain2" src frameborder="0" width="100%"
                        height="100%" style="overflow: auto"></iframe>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import request from '@util/gw_ajax_request.js'
    import { dateFormat, getFirstDayOfMonth } from '../../utils/gw_date.js';
    import provTreeList from '@widget/provTreeListWithCheckBox.vue'
    import { getYearList } from '@api/jcOneMapApi'
    import { getPersPlanType } from '@api/duChaPlan.js'

    export default {
        props: ['ids', 'newYear'],
        data() {
            return {
                pid: "000",
                pidNodes: [],
                type: "001",
                dxdcMainHeight: window.innerHeight - 200,
                dxdcAsideHeight: window.innerHeight - 180,
                windowHeight: window.innerHeight - 200,
                windowWidth: window.innerWidth - 350,
                reportSrc:
                    // "/JsReport/reportFiles/reportjsp/showReport.jsp?raq=sk02_xxsk.raq",
                    "/demo/reportJsp/showReport.jsp?rpx=dc_pblm_total_qh",
                radioTable: 1,
                loading: true,
                leftCol: 4,
                rightCol: 20,
                excelName: "",
                findTime: [getFirstDayOfMonth(new Date(), 'yyyy-MM-dd'), dateFormat(new Date(), 'yyyy-MM-dd')],
                sttm: getFirstDayOfMonth(new Date(), 'yyyy-MM-dd'),
                ettm: dateFormat(new Date(), 'yyyy-MM-dd'),
                treeWidth: 250,
                objtype: '',
                adCode: '',
                yearList: [],
                year: '',
                supervisionObjlist: [],    //督查对象列表
                orgList: [],
                dutydep: [],
                objtypeArr: [],
                dutydepArr: [],
                dataSource:"",
                pblmNature:"",
                sourceList:[
                    {'label':'水利部',value:'水利部'},
                    {'label':'水利厅',value:'水利厅'}
                ],
                natureList:[
                    {'label':'安全生产',value:'1'},
                    {'label':'其他',value:'0'}
                ]
            };
        },
        components: {
            provTreeList
        },
        computed: {
            persId() {
                return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
            },
        },
        mounted() {
            this.getSupervisionObjlist()
            this.getYearlists();
            this.getOrgList()
            setTimeout(()=>{
                this.searchExecl()
            }, 500)
        },
        methods: {
            getYearlists() {
                getYearList().then(res => {
                    this.yearList = res.data;
                    let lastItemIndex = this.yearList.length - 1
                    this.year = this.yearList[lastItemIndex].year
                })
            },
            // 获取Excel数据
            searchExecl() {
                this.loading = true;
                // 使用form表单post提交，彻底解决参数值过长的问题
                this.$refs.formMain2.submit();
                // 使用_this
                let _this = this;
                this.$refs.frameMain2.onload = function () {
                    _this.loading = false;
                };
            },
            // 导出Excel数据
            exportExecl() {
                v = window.frames["frameMain2"];
                // 调用子页面的js方法
                // v.contentWindow.report1_saveAsExcel();
                console.log(v)
                console.log(v.contentWindow)
                v.report1_saveAsExcel();
            },
            provTreeSelectChangeHandler(params) {
                this.adCode = params;
                console.log(params)
            },
            // 获取督查类别
            getSupervisionObjlist() {
                this.supervisionObjlist = [];
                getPersPlanType(this.persId).then(res => {
                    if (res.success && res.data.length) {
                        for(var i = 0;i<res.data.length;i++){
                            this.supervisionObjlist.push(
                                {
                                    name:res.data[i].name,
                                    id:parseInt(res.data[i].id)
                                }
                            )
                        }
                    } else {
                        this.$message.warning('暂未分配督查类别')
                    }
                }).catch(err => {
                    this.$message.warning('系统异常')
                })
            },
            // 获取责任处室列表
            getOrgList() {
                request.get('/att/insp/type/duty/arrayByOrgId').then(res => {
                    if (res.success) {
                        this.orgList = res.data
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            },
            objtypeChange(val){
                if(val.length){
                    this.objtype = val.join(',')
                }else{
                    this.objtype = ''
                }
            },
            dutydepChange(val){
                if(val.length){
                    this.dutydep = val.join(',')
                }else{
                    this.dutydep = ''
                }
            }
        },
        watch: {
            findTime(n, o) {
                if (!n) {
                    this.sttm = "";
                    this.ettm = "";
                } else {
                    this.sttm = n[0];
                    this.ettm = n[1];
                }
            }
        },
        activated() {
            this.searchExecl();
        }
    };
</script>

<style scoped>
</style>