fj-dc-ui/.svn/pristine/1d/1d852bad66d969534a4e0b15a817125db38d17ba.svn-base

<template>
  <el-row style="width: 100%;height:100%;">
    <el-col :span="leftCol" style="height:100%;">
      <el-card :body-style="{'padding':'0','height':'100%'}" style="height:100%;">
        <export-tree-list-sk-fs
          :pid="pid"
          :type="type"
          :pidNodes="pidNodes"
          :level="level"
          @provTreeSelectChange="provTreeSelectChange"
        ></export-tree-list-sk-fs>
      </el-card>
    </el-col>
    <el-col :span="rightCol" style="height:100%;">
            <el-card :body-style="{'padding-top':'10px'}">
              <span style="font-size: 14px;color:#434343;">平均单座水库发现问题个数：</span>
              <el-input v-model="numBzMin"  style="width: 150px">
                <template slot="prepend">
                    最小值
                </template>
              </el-input>
              -
              <el-input v-model="numBzMax" style="width: 150px">
                <template slot="prepend">
                  最大值
                </template>
              </el-input>
      <!--        &lt;!&ndash; <el-radio-group v-model="radioTable">-->
      <!--            <el-radio :label="1">小型水库督查工作报告</el-radio>-->
      <!--        </el-radio-group> &ndash;&gt;-->
      <!--        <div class="block">-->
      <!--          <span class="demonstration">选择月份</span>-->
      <!--          <el-date-picker-->
      <!--            v-model="monthValue"-->
      <!--            type="month"-->
      <!--            value-format="yyyy-MM"-->
      <!--            placeholder="选择月">-->
      <!--          </el-date-picker>-->
      <!--          <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'}" style="height:100%;">
        <div  style="width: 100%;height: 100%;display:flex;flex-direction:row;justify-content:center;align-items:center;" v-loading="loading">
          <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="myIframe" id="frameMain_sk7" src="" frameborder="0" width="100%" height="100%"
                  style="overflow: auto"></iframe>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>

  import exportTreeListSkFs from './exportReport'
  import {dateFormat} from '../../utils/gw_date.js'

  export default {
    components: {
      exportTreeListSkFs: exportTreeListSkFs,
    },
    data() {
      return {
        firstToShow:true,
        id: '',
        pid: '000',
        pidNodes: [],
        type: '001',
        level: '1',
        dxdcMainHeight: window.innerHeight - 180,
        dxdcAsideHeight: window.innerHeight - 90,
        windowHeight: window.innerHeight - 160,
        windowWidth: window.innerWidth - 250,
        reportSrc: '/pageofficePath/dc/pageoffice/rsvr/report/show',
        radioTable: 1,
        loading: false,
        leftCol: 4,
        rightCol: 20,
        excelName: '小型水库督查工作报告',
        monthValue: dateFormat(new Date(), 'yyyy-MM'),
        numBzMin:2,
        numBzMax:5
      }
    },
    mounted() {
      // this.init()
    },
    computed: {
      userId: function () {
        return localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096";
      }
    },
    methods: {
      // init() {
      //   let _this = this;
      //   this.searchExecl();
      // },
      provTreeSelectChange(data) {
        this.id = data.id;
        this.searchExecl();
      },
      // 获取Excel数据
      searchExecl() {
        if(!this.numBzMin || !this.numBzMax){
           this.$message.warning("请输入水库问题标准数范围值");
           return;
        }
        let _this = this;
        if (_this.id === '') {
          this.firstToShow = true;
          return;
        }
        let iframe = document.getElementById("frameMain_sk7");
        iframe.src = _this.reportSrc + "?ids=" + _this.id+"&numBzMax="+_this.numBzMax+"&numBzMin="+_this.numBzMin;
        iframe.onload = function () {
            _this.firstToShow = false;
        };
      },
      openMessage() {
        const h = this.$createElement;
        this.$notify({
          title: '提示',
          message: h('i', {style: 'color: teal'}, '点击流域才会生成工作报告')
        });
      },
      // 导出Excel数据
      exportExecl() {
        v = window.frames["frameMain_sk7"];
        v.contentWindow.report1_saveAsWord();
      },

    },
    watch: {
      monthValue(n, o) {
        if (n == null) {
          this.monthValue = "";
        }
      }
    }

  }
</script>

<style scoped>


</style>