fj-dc-ui/.svn/pristine/2a/2a77088b38c78820b30cc2100f7425e69bb1dc09.svn-base

<template>
    <el-row>
        <el-col :span="leftCol">
            <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'10px'}">
                <reportDfxgxdLy
                        :pid="pid"
                        :type="type"
                        :pidNodes="pidNodes"
                        :style="{'max-height':dxdcAsideHeight+'px'}"
                        @provTreeSelectChange="provTreeSelectChange"
                        @changeYear="changeYear"
                ></reportDfxgxdLy>
            </el-card>
        </el-col>
        <el-col :span="rightCol">
            <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'10px'}">
                <div class="date_search_block">
                    <p class="pall">
                      <span class="demonstration">选择月份</span>
                      <el-date-picker
                            v-model="monthValue"
                            type="month"
                            placeholder="请选择"
                            format="yyyy-MM"
                            value-format="yyyy-MM">
                      </el-date-picker>
                    </p>
                    <el-button type="primary" icon="el-icon-search" style="float: right;margin:0 5px" @click="searchExecl">查询</el-button>
                </div>
                <div class="pageoffice_pic" style="width: 100%;height: 100%;">
                    <iframe :src="'/pageofficePath/dc/pageoffice/sapReport/show?orgId='+orgId+'&currTm='+dateTime"
                        frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
                    <div class="tip_modal" v-if="!orgId" @click="showTipModal">

                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

</template>

<script>

    import request from '@util/gw_ajax_request.js';
    import reportDfxgxdLy from '../reportDfxgxd_ly';
    import {dateFormat, formatDateTimeM} from '@util/gw_date.js';
    import globalVariable from "@api/globalVariable.js";

    export default {
        components: {
            reportDfxgxdLy:reportDfxgxdLy,
        },
        data() {
            return {
                orgId: '', // 长江委
                pid:'000',
                pidNodes:[],
                type:'029',
                dxdcMainHeight: window.innerHeight-110,
                dxdcAsideHeight: window.innerHeight-90,
                loading:true,
                leftCol:4,
                rightCol:20,
                excelName:'堤防险工险段督查工作报告',
                monthValue:'',
                dateTime: '',
                newType: [],
                inputValue: '',
                typeValue:[],
                typeOptions: [
                  {
                    value: '1',
                    label: '小水库'
                  }, {
                    value: '3',
                    label: '水毁'
                  }, {
                    value: '6',
                    label: '水闸'
                  }, {
                    value: '26',
                    label: '水库防洪'
                  }, {
                    value: '27',
                    label: '山洪'
                  }, {
                    value: '29',
                    label: '防堤'
                  }, {
                    value: '30',
                    label: '超标洪水'
                  }
                ],
            }
        },
        created () {
          this.dateTime = formatDateTimeM()
          this.monthValue = formatDateTimeM()
        },
        mounted() {

        },
        updated () {
          console.log(this.orgId, this.newType, this.dateTime)
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        methods: {
            provTreeSelectChange(data){
              console.log(data.id.substr(3))
                this.orgId = data.id.substr(3);
                // this.orgId = data.id;
            },
            // 没有选择左侧机构时展示遮罩层并给出提示
            showTipModal(){
                if(!this.orgId){
                    this.$message.warning('请先选择左侧机构')
                    return
                }
            },
            changeYear(val) {
                // this.newYear = val;
                this.orgId = "";
            },

            // 条件查询
            searchExecl () {

              if (this.monthValue == '') {
                this.orgId = '';
                this.dateTime = formatDateTimeM()
              } else {
                this.dateTime = this.monthValue;
              }
              console.log(this.orgId, this.newType, this.dateTime)
            }

        },
        watch:{
            monthValue(n,o){
                if(n == null){
                    this.monthValue =  "";
                }
            }
        },
        activated() {
        }
    }
</script>

<style lang="scss" scoped>

    .date_search_block{
        margin-bottom: 20px;
    }
    .pageoffice_pic{
        position: relative;
        .tip_modal{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
    }
    .pall{
      display: inline-block;
    }

</style>