fj-dc-ui/.svn/pristine/c8/c828583b832aa6ca03653a238b4177602794977d.svn-base

<template>
  <el-row>
    <el-col :span="leftCol" ref="elw">
      <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <provTreeList
          :rootCode="rootCode" :rootType="rootType"
          @provTreeSelectChange="provTreeSelectChangeHandler"
          :style="{'max-height':dxdcAsideHeight+'px'}"
          :defaultExpandedKeys="defaultExpandedKeys">
        </provTreeList>
      </el-card>
    </el-col>
    <el-col :span="rightCol">
      <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <div class="block" style="height:40px;line-height: 40px;font-size: 14px;">
          <span style="color:red;">（*左侧树请选择区、县）</span>
          <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="结束日期">
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" @click="searchExecl">查询</el-button>
        </div>
        <form ref="formMain8" id="formMain8" target="frameMain8" :action="reportSrc" method="post">
          <input id="id" type="hidden" name="id">
          <input id="adCode" type="hidden" name="adCode">
          <input type="hidden" id="sttm" name="sttm" v-model="sttm">
          <input type="hidden" id="ettm" name="ettm" v-model="ettm">
        </form>
        <div v-loading="loading" style="width: 100%;height: calc(100% - 50px);display:flex;flex-direction:row;justify-content:center;align-items:center;">
          <i  v-if="firstToShow" style="font-size:32px;" class="el-icon-warning-outline"></i>
          <p v-if="firstToShow" style="font-weight: bolder;color: #868686;font-size: larger;">请通过左侧树点击指定地区，导出报告</p>
          <iframe v-show="!firstToShow" ref="frameMain8" id="frameMain8" name="frameMain8" src="" frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
    import {dateFormat,getFirstDayOfMonth} from '../../../../utils/gw_date.js';
    import provTreeList from '@widget/provTreeList_preflood.vue';
    export default {
        components: {
            provTreeList:provTreeList,
        },
        data() {
            return {
                defaultExpandedKeys:[this.currentRlcode],
                adCode:'',
                dxdcMainHeight: window.innerHeight-90,
                dxdcAsideHeight: window.innerHeight-100,
                windowHeight:window.innerHeight - 200,
                windowWidth:window.innerWidth - 350,
                reportSrc:'/pageofficePath/dc/pageoffice/preFlood/show',
                loading:false,
                leftCol:4,
                rightCol:20,
                excelName:'汛前检查报告',
                treeWidth: 250,
                firstToShow:true,
                rootCode:'000000',
                rootType:'2',
                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')
            }
        },
        mounted() {
            this.treeWidth = this.$refs.elw.$el.clientWidth;
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            // 注意是数组
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            currentRlcode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            }
        },
        methods: {
            provTreeSelectChangeHandler: function(params) {
                if(params.adGrad=="4" || params.adGrad=="3"){
                    this.adCode = params.code;
                    this.searchExecl();
                }else{
                    this.$message.warning("请选择市、区、县");
                }
            },
            // 获取Excel数据
            searchExecl(){
                let _this = this;
                if( _this.adCode == ''){
                    return;
                }
                // v-model 不同步，只能手动同步了
                document.getElementById("adCode").value = _this.adCode;
                this.firstToShow = false;
                this.loading = true;
                // 使用form表单post提交，彻底解决参数值过长的问题
                this.$refs.formMain8.submit();
                // 使用_this
                this.$refs.frameMain8.onload = function(){
                    _this.loading = false;
                };

            },


        },
        watch:{
            findTime(n,o){
                if(!n){
                    this.sttm = "";
                    this.ettm = "";
                }else{
                    this.sttm = n[0];
                    this.ettm = n[1];
                }
            },
        },
        activated() {
            this.searchExecl();
        }
    }
</script>

<style >



</style>