fj-dc-ui/.svn/pristine/38/38908039e7b7a50442aa10b4cf29ae8a7ffe33f8.svn-base

<template>
    <el-row>
        <!--<el-col :span="leftCol">-->
        <!--<el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'10px'}">-->
        <!--<floodSituationLy-->
        <!--:pid="pid"-->
        <!--:type="type"-->
        <!--:pidNodes="pidNodes"-->
        <!--:style="{'max-height':dxdcAsideHeight+'px'}"-->
        <!--@provTreeSelectChange="provTreeSelectChange"-->
        <!--@changeYear="changeYear"-->
        <!--&gt;</floodSituationLy>-->
        <!--</el-card>-->
        <!--</el-col>-->
        <el-col>
            <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="date"
                                placeholder="请选择"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </p>
                    <p class="pall">
                        <span class="demonstration">类型</span>
                        <el-select v-model="typeValue" clearable placeholder="请选择" multiple collapse-tags>
                            <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </p>
                    <el-button type="primary" icon="el-icon-search" @click="searchExecl">查询</el-button>
                </div>
                <div class="pageoffice_pic" style="width: 100%;height: 100%;">
                    <iframe :src="'/pageofficePath/dc/pageoffice/flood/show?orgId='+orgId+'&currTm='+dateTime+'&type='+newType"
                            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 floodSituationLy from '../floodSituation_ly';
    import {dateFormat, formatDateTimeD} from '@util/gw_date.js';
    import globalVariable from "@api/globalVariable.js";

    export default {
        components: {
            floodSituationLy: floodSituationLy,
        },
        computed: {
            orgId() {
                return localStorage.getItem("orgId") ? localStorage.getItem("orgId") : "";
            }
        },
        data() {
            return {
                // orgId: '', // 长江委
                pid: '000',
                pidNodes: [],
                type: '001',
                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 = formatDateTimeD()
            this.monthValue = formatDateTimeD()
            this.newType = ["1", "3", "6", "26", "27", "29", "30"]
            this.typeValue = ["1", "3", "6", "26", "27", "29", "30"]

        },
        mounted() {

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

            // 条件查询
            searchExecl() {
                if (this.monthValue == '' && this.typeValue == '') {
                    this.orgId = '';
                    this.dateTime = formatDateTimeD();
                    this.newType = ["1", "3", "6", "26", "27", "29", "30"]
                } else {
                    if (this.monthValue !== '' && this.typeValue == '') {
                        this.dateTime = this.monthValue
                        this.newType = ["1", "3", "6", "26", "27", "29", "30"]
                    } else if (this.monthValue == '' && this.typeValue !== '') {
                        this.dateTime = formatDateTimeD();
                        this.newType = this.typeValue;
                    } else {
                        this.dateTime = this.monthValue;
                        this.newType = this.typeValue;
                    }
                }
                // this.monthValue = ''
                // this.typeValue = ''
                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>