fj-dc-ui/.svn/pristine/c8/c87d28189fa30fbdd3428fa12a28f37d951f67df.svn-base

<template>
  <el-container>
    <el-main id="dxdcListMain" style="padding:5px 10px;">
      <el-row>
        <el-col :span="leftCol" ref="elw">
          <el-card :body-style="{'padding':'0'}" :style="{'height':dxdcMainHeight + 'px'}">
            <div style="text-indent: 10px;width: 100%;display: flex;align-items: center;height:50px;">
              <span style="width: 80px">督查类别</span>
              <el-select v-model="type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <export-tree-list-fs
              :pid="pid"
              :type="type"
              :fsType="'noGroup'"
              :pidNodes="pidNodes"
              :level="level"
              :height="dxdcAsideHeight"
              :width="treeWidth"
              @provTreeSelectChange="provTreeSelectChange"
            />
          </el-card>
        </el-col>
        <el-col :span="rightCol" :style="{'height':dxdcMainHeight + 'px'}">
          <el-card :body-style="{'padding':'0'}" :style="{'height':dxdcMainHeight + 'px'}">
            <div
              style="text-indent: 10px;width: 100%;border-bottom: 1px solid #e6e6e6;display: flex;align-items: center;height:50px;">
              <span style="font-size: 14px;">督查状态</span>
              <el-select v-model="state" multiple placeholder="请选择" @change="changState">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div
              style="width: 100%;height: calc(100% - 80px);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"
                      :src="'/pageofficePath/dc/pageoffice/report/show?ids=' + year + ','+ adcode +','+state.join('_')+'&type=' + wordType"
                      frameborder="0"
                      width="100%" height="100%" scrolling="no"></iframe>
              <div class="limit_modal" v-if="!adcode" @click="showTips"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import request from "../../../../utils/gw_ajax_request.js";
import exportTreeListFs from "../../exportTreeList_fs";
import { dateFormat } from "@util/gw_date.js";

export default {
  components: {
    exportTreeListFs: exportTreeListFs
  },
  data() {
    return {
      state: ["2"],
      options: [
        { label: "未督查", value: "0" },
        { label: "督查中", value: "1" },
        { label: "已督查", value: "2" }
      ],
      typeList: [
        { label: "小型水库核查", value: "001" },
        { label: "大中型水库核查", value: "080" }
      ],
      ids: [],
      id: "",
      pid: "000",
      pidNodes: [],
      type: "001",
      typeTwo: "022",
      level: "4",
      year: "",
      wordType: "rslkbk",
      firstToShow: true,
      dxdcMainHeight: window.innerHeight - 85,
      dxdcAsideHeight: window.innerHeight - 130,
      windowHeight: window.innerHeight - 160,
      windowWidth: window.innerWidth - 250,
      reportSrc: "/demo/reportJsp/showReport.jsp?rpx=fj_xian_matter",
      radioTable: 1,
      loading: false,
      leftCol: 5,
      rightCol: 19,
      excelName: "市督查检查报告",
      monthValue: dateFormat(new Date(), "yyyy-MM"),
      findTime: [],
      sttm: "",
      ettm: "",
      treeWidth: 250,
      dcType: "",
      adcode: "",
      objId: "",
      bigReverId: "",
      bigReverAdCode: "",
      adName: "",
      bigReverAdName: ""
    };
  },
  mounted() {
    this.treeWidth = this.$refs.elw.$el.clientWidth;
  },
  computed: {
    userId: function() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  methods: {
    changState(val) {
      this.state = val;
    },
    openMessage() {
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        message: h("i", { style: "color: teal" }, "点击县才会生成报告")
      });
    },
    provTreeSelectChange(data) {
      this.id = data.ppid;
      this.adcode = data.id;
      this.year = data.year;
      this.adName = data.pnm;
    },
    provTreeSelectChangeBig(data) {
      this.bigReverId = data.ppid;
      this.bigReverAdCode = data.id;
      this.bigReverAdName = data.pnm;
    },
    showTips() {
      this.$message.warning("请先在左侧树选择到对应的行政区划");
    },
    // 获取Excel数据
    searchExecl() {
      let _this = this;
      if (
        (_this.adcode != "" && _this.adcode.length != 12) ||
        _this.adcode.substr(0, 1) == "0"
      ) {
        this.openMessage();
        return;
      }

      this.loading = true;
      // 使用form表单post提交，彻底解决参数值过长的问题
      this.$refs.formMain3.submit();
      this.$refs.frameMain3.onload = function() {
        _this.loading = false;
      };
    },
    // 导出Excel数据
    exportExecl() {
      window.frames["frameMain3"].report1_saveAsWord();
    }
  },
  watch: {
    adcode(val, newval) {
      if (val !== undefined && val !== null && val !== "") {
        this.firstToShow = false;
      } else {
        this.firstToShow = true;
      }
    },
    type(val) {
      if (val == "001") {
        this.level = "4";
        this.wordType = "rslkbk";
      } else if (val == "080") {
        this.level = "3";
        this.wordType = "rslkbk2";
      }
    }
  },
  activated() {
    // this.searchExecl();
  }
};
</script>

<style lang="scss" scoped>
.tree_wrapper {
  height: calc(100vh - 30px);
  overflow: auto;
}

.word_wrapper {
  height: 600px;
  margin: 5px;
  position: relative;

  .select_info {
    width: 360px;

    span {
      display: inline-block;
      width: 50%;
    }
  }

  .limit_modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
</style>