fj-dc-ui/.svn/pristine/db/dbb7d73251f09a79da389e74e3803115d082ccd9.svn-base

<template>
  <el-row style="width: 100%;height:100%;">
    <el-col :span="leftCol" style="height:100%;">
      <el-card :body-style="{'padding':'0'}" style="height:100%;">
        <export-tree-list-sk-fs
          :pid="pid"
          :type="type"
          :pidNodes="pidNodes"
          :level="level"
          :style="{'max-height':dxdcAsideHeight+'px'}"
          @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'}">-->
      <!--        &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 './exportTreeList_fs'
import { dateFormat } from '../../utils/gw_date.js'

export default {
  components: {
    exportTreeListSkFs: exportTreeListSkFs,
  },
  data () {
    return {
      firstToShow: true,
      id: '',
      pid: '000',
      pidNodes: [],
      type: '018',
      level: '1',
      dxdcMainHeight: window.innerHeight - 180,
      dxdcAsideHeight: window.innerHeight - 90,
      windowHeight: window.innerHeight - 160,
      windowWidth: window.innerWidth - 250,
      reportSrc: '/pageofficePath/dc/pageoffice/report/show',
      // type: 'renyin',
      radioTable: 1,
      loading: false,
      leftCol: 4,
      rightCol: 20,
      excelName: '农饮督查工作报告',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
    }
  },
  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 () {
      let _this = this
      if (_this.id === '') {
        this.firstToShow = true
        return
      }
      let iframe = document.getElementById("frameMain_sk7")
      iframe.src = _this.reportSrc + "?ids=" + _this.id + "&type=hhsl"
      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>