fj-dc-ui/.svn/pristine/59/59a90632ef2dd307e6c28cfbd82aeb5df1ad62f1.svn-base

<template>
  <el-container>
    <el-main id="dxdcListMain" style="padding:5px 20px 0px;">
      <h3 style="position: relative">
        <div class="searchC">
          <span>督查状态</span>
          <el-select v-model="stateList" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
           &nbsp;&nbsp;
           <span>年度</span>
           <el-date-picker
             v-model="year"
             type="year"
             format="yyyy"
             value-format="yyyy"
             placeholder="选择年">
            </el-date-picker>
        </div>
        <span>2021年度水库安全运行专项检查进度表</span>
      </h3>
      <div :style="{'width': '100%','margin-top':'10px','height': iframeHeight + 'px'}" v-loading="loading">
        <iframe ref="frameMain" id="frameMain" name="frameMain" :src="tableSrc" frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
      </div>
    </el-main>
  </el-container>
</template>

<script>
    import request from "@util/gw_ajax_request.js";
    import {reportHosturl} from '@util/global_variable.js'
    export default {
        components: {

        },
        props: [],
        data() {
            return {
                stateList:['2'],
                loading:false,
                iframeHeight: window.innerHeight - 160,
                year:new Date().getFullYear().toString(),
                options:[
                    {label:'未督查',value:"0"},
                    {label:'督查中',value:"1"},
                    {label:'已督查',value:"2"}
                ],
            };
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            tableSrc(){
                return `${reportHosturl}/demo/reportJsp/showReport.jsp?rpx=2021skaqyxjcjdb&persId=${this.persId}&yearnum=${this.year}&state=${this.stateList.join(",")}&sheng=${this.organCode.substring(0,2)}&scroll=yes`
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
        },
        mounted() {
            var _this = this
            this.loading = true;
            const iframe = document.querySelector('#frameMain')
            // 处理兼容行问题
            if (iframe.attachEvent) {
                iframe.attachEvent('onload', function () {
                    _this.loading = false;
                })
            } else {
                iframe.onload = function () {
                    _this.loading = false;
                }
            }

        },
        watch:{
            stateList(val){
              this.stateList = val;
            },
            year(val){
              this.year = val;
            }
        },
        methods: {

        }
    };
</script>

<style scoped>
  h3{
    margin: 5px 0;
    text-align: center;
  }
  .searchC{
     position: absolute;
     z-index: 100;
     top:-3px;
     left:20px;
  }
  .searchC span{
     font-size: 14px;
     color: #606266;
  }
</style>