real3d-portalsite/src/views/LandConsolidation/index.vue

<!--全域土地综合整治专题-->
<template>
  <div class="ghzc LandConsolidation">
    <div v-show="!iscontrast">
      <div class="headerCheck">
        <ul>
          <li
            :class="{ liActive: i == activeIndex }"
            v-for="(item, i) in checkList"
            :key="i"
            @click="onClick(i)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="innerContainer leftPane" v-drag>
        <h2 class="Pangetitle darg-div el-col">
          <span class="pange_text">全域土地综合整治专题 </span>

          <el-dropdown @command="download">
            <span class="document el-icon-document"> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="file in filelist"
                :key="file"
                :command="file"
                >{{ file.slice(19) }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="region">
            <!-- clearable -->
            <el-cascader
              v-model="xzqh"
              :show-all-levels="false"
              :options="store.state.region_tree"
              @change="regionChange"
              placeholder="行政区"
              size="mini"
              :props="{
                checkStrictly: true,
                expandTrigger: 'hover',
                emitPath: false,
              }"
            ></el-cascader>
          </div>
        </h2>
        <div class="xz_box">
          <Sdgk
            @updateParent="changeData"
            ref="sdgk"
            v-show="activeIndex == 0"
            @gozzxm="onClick(1)"
          ></Sdgk>
          <List
            @updateParent="changeData"
            @cockpit="cockpit"
            @contrast="goContrast"
            ref="list"
            v-show="activeIndex == 1"
          ></List>
          <Xzgd
            @updateParent="changeData"
            @cockpit="cockpit"
            ref="xzgd"
            v-show="activeIndex == 2"
          ></Xzgd>
          <preCheck
            @updateParent="changeData"
            ref="preCheck"
            v-show="activeIndex == 3"
          ></preCheck>
        </div>
      </div>
      <div class="innerContainer bottomPane" v-drag v-show="activeIndex == 0">
        <div class="xz_box">
          <Qhdb
            @updateParent="changeData"
            @contrast="goContrast"
            ref="qhdb"
          ></Qhdb>
        </div>
      </div>
      <div
        class="innerContainer legendPane"
        :class="showlist ? '' : 'hielegend'"
        v-drag
      >
        <div class="xz_box">
          图例
          <div
            class="eicon"
            :class="showlist ? 'eyes' : 'close_eyes'"
            @click="showlist = !showlist"
          ></div>
          <div v-if="showlist">
            <div v-for="(litem, li) in legends" :key="litem.label">
              <span :class="`legend${li}`" class="lcolor"></span>
              <span class="legLabel">{{ litem.label }}</span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="innerContainer rightPane newContainer"
        v-show="activeIndex == 0"
      >
        <Organize ref="organize"></Organize>
      </div>
    </div>
    <Details ref="detailModal" @goxzgd="goxzgd"></Details>
    <Contrast
      ref="contrastModal"
      v-show="iscontrast"
      @close="contrastClose"
    ></Contrast>
    <RzDtails
      :rzBsm="rzBsm"
      :rzMc="nowObj.xmmc"
      @updateParent="changeData"
      @rzClose="rzClose"
    ></RzDtails>
  </div>
</template>

<script>
import { QueryOne } from "@/api/cockpitNew";
import Organize from "./components/organize.vue";
import Sdgk from "./components/sdgk.vue";
import Qhdb from "./components/qhdb.vue";
import List from "./components/list.vue";
import preCheck from "./components/preCheck.vue";
import Xzgd from "./components/xzgd.vue";
import Details from "./components/details.vue";
import Contrast from "./components/contrast.vue";
import { legends } from "./components/config.js";
import RzDtails from "../complianceAnalysis/components/rzDtails.vue";
import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
export default {
  name: "LandConsolidation",
  components: {
    Sdgk,
    Qhdb,
    List,
    preCheck,
    Details,
    Details,
    Organize,
    Xzgd,
    Contrast,
    RzDtails,
  },
  data() {
    return {
      showlist: true,
      // htmlContent: htmlContent,
      filelist: [],
      loading: false,
      drawer: false,
      xzqh: "",
      checkList: [
        {
          title: "试点总揽",
        },
        {
          title: "整治项目",
        },
        {
          title: "新增耕地",
        },
        {
          title: "整治预检",
        },
      ],
      activeIndex: 0,
      legends: legends,
      iscontrast: false,
      rzBsm: "",
      nowObj: {}, //当前点击对象
    };
  },
  computed: {
    computed_vectorData() {
      return store.state.vectorData;
    },
  },
  created() {
    if (sessionStorage.getItem("cockpitDate"))
      store.setCockpitDate(sessionStorage.getItem("cockpitDate").split(","));
  },
  mounted() {
    this.xzqh = "460202"; //store.state.cockpit_region.id;
    this.regionChange();
    this.bus.$on("handleView", this.handleView);
  },
  methods: {
    changeData(name, updata) {
      this[name] = updata;
    },
    async getssfa() {
      let res = await QueryOne({
        jscType: "qytuzz_sdzl_sdmb_ssfa",
        id: this.xzqh,
      });
      console.log(res.data);
      this.filelist = res.data.zzwafile.split(",");
    },
    handleClick() {},
    download(file) {
      console.log(file, "aa");
      // window.open(this.$props.scjgObj.fxbg); //this.$props.scjgObj.task.fxbg
      window.open(
        ` ${window.axiosURI}/analyse/fzss/ShowReport?filePath=${file}`,
        "_blank"
      );
    },
    goContrast(dbdata) {
      this.$refs.sdgk.sourcesshow(false, dbdata.type);
      this.iscontrast = true;
      this.$refs.contrastModal.show(dbdata);
    },
    contrastClose() {
      this.iscontrast = false;
      this.$refs.sdgk.sourcesshow(true);
    },

    rzClose() {
      this.$refs.preCheck.rzClose();
    },
    handleView(row, type) {
      this.$refs.detailModal.handleView(row, type);
    },
    regionChange() {
      this.onClick(this.activeIndex);
      this.$refs.detailModal.closeInster();
      this.getssfa();
    },
    cockpit() {
      //驾驶舱矢量数据点选查询
      pick_cockpit_vector.init_handler();
    },
    onClick(val, xmdata) {
      this.activeIndex = val;
      if (val != 0) this.$refs.sdgk.reset();
      if (val != 1) this.$refs.list.reset();
      if (val != 2) this.$refs.xzgd.reset();
      if (val == 0) {
        this.$refs.sdgk.regionChange(this.xzqh);
        this.$refs.qhdb.regionChange(this.xzqh);
        this.$refs.organize.regionChange(this.xzqh);
      }
      if (val == 1) this.$refs.list.regionChange(this.xzqh);
      if (val == 2) this.$refs.xzgd.regionChange(this.xzqh, xmdata);
      this.$refs.detailModal.closeInster();
    },
    goxzgd(xmdata) {
      this.onClick(2, xmdata);
    },
  },
  watch: {
    // activeIndex(val) {},
    computed_vectorData(newVal) {
      console.log(newVal, "newVal");
      newVal.forEach((res) => {
        if (res.name == "res") {
          if ((res.value.entity = "整治图斑"))
            this.handleView(res.value, "整治图斑"); //this.$refs.list.getType()
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.LandConsolidation {
  .xz_box {
    padding-bottom: 0;
  }
  .document {
    // position: absolute;
    // right: 110px;
    // top: 19px;
    color: cornflowerblue;
    font-size: 24px;
    margin-left: 10px;
    margin-top: 5px;
    cursor: pointer;
    z-index: 100;
  }
  .clearBtn {
    cursor: pointer;
    z-index: 200;
  }

  .bottomPane {
    // width: 45vw;
    width: 52vw;
    height: 330px;
    top: calc(100% - 360px);
    // left: 600px;
    // left: 31.2vw;
    left: 24vw;
  }
  .legendPane {
    // position: relative;
    // width: 130px;
    // height: 120px;
    width: 6.7vw;
    height: 12.6vh;
    top: calc(100% - 500px);
    // top: calc(100% - 150px);
    // left: 460px;
    // left: 23.5vw;
    left: 24vw;
    .eicon {
      width: 20px;
      height: 20px;
      margin-top: 10px;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      right: 20px;
    }
    // .eyes {
    //   background-image: url("/static/images/ghzc/eyes.png");
    // }
    // .close_eyes {
    //   background-image: url("/static/images/ghzc/close_eyes.png");
    // }

    .lcolor {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 10px;
    }

    .legend0 {
      background: #caf982;
    }
    .legend1 {
      background: #80ffff;
    }
    .legend2 {
      background: #facd91;
    }
  }
  .hielegend {
    height: 40px;
  }
}
.newContainer {
  top: 40px !important;
}
</style>
<style lang="scss">
.LandConsolidation {
  .region {
    width: 100px !important;
    margin: 0 20px;
  }
  .tdTitle {
    color: #64daff;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
  }
  .el-cascader--mini {
    top: 0px;
    background: transparent;
  }
  .headerCheck {
    width: 520px;
    height: 50px;
    // background: rgba(255, 192, 203, 0.379);
    position: absolute;
    left: 35vw;
    top: 3vh;
    z-index: 99;
    pointer-events: none;
    ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      li {
        width: 114px;
        height: 36px;
        background: inherit;
        // background-color: rgba(128, 255, 255, 0.39);
        box-sizing: border-box;
        border-width: 2px;
        border-style: solid;
        border-color: #64daff;
        border-radius: 9px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        color: #64daff;
        text-align: center;
        line-height: 36px;
        pointer-events: all;
        cursor: pointer;
      }
      li:active,
      li:focus {
        background-color: rgba(128, 255, 255, 0.39) !important;
      }
    }
    .liActive {
      background-color: rgba(128, 255, 255, 0.39) !important;
    }
    .liItem {
      background-color: transparent !important;
    }
  }
}
.el-dropdown-menu,
.el-select-dropdown {
  background-color: rgba(4, 28, 50, 1) !important;
  border: 1px solid rgba(15, 122, 200, 0.4) !important;
}
.el-dropdown-menu__item {
  color: #fff !important;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: rgba(255, 255, 255, 0.35) !important;
}
@import "../complianceAnalysis/ghzc.scss";
</style>