|
|
@@ -0,0 +1,300 @@
|
|
|
+<!--全域土地综合整治专题-->
|
|
|
+<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>
|
|
|
+ <i class="document el-icon-document" @click="drawer = !drawer"></i>
|
|
|
+ <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
|
|
|
+ v-loading="loading"
|
|
|
+ @updateParent="changeData"
|
|
|
+ ref="sdgk"
|
|
|
+ v-show="activeIndex == 0"
|
|
|
+ ></Sdgk>
|
|
|
+ <List
|
|
|
+ v-loading="loading"
|
|
|
+ @updateParent="changeData"
|
|
|
+ @cockpit="cockpit"
|
|
|
+ @contrast="iscontrast = true"
|
|
|
+ ref="list"
|
|
|
+ v-show="activeIndex == 1"
|
|
|
+ ></List>
|
|
|
+ <Xzgd
|
|
|
+ v-loading="loading"
|
|
|
+ @updateParent="changeData"
|
|
|
+ @cockpit="cockpit"
|
|
|
+ ref="xzgd"
|
|
|
+ v-show="activeIndex == 2"
|
|
|
+ ></Xzgd> -->
|
|
|
+ <Fzyp
|
|
|
+ @updateParent="changeData"
|
|
|
+ ref="preCheck"
|
|
|
+ v-show="activeIndex == 3"
|
|
|
+ ></Fzyp>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="innerContainer bottomPane" v-drag v-show="activeIndex == 0">
|
|
|
+ <div class="xz_box">
|
|
|
+ <!-- <Qhdb
|
|
|
+ v-loading="loading"
|
|
|
+ @updateParent="changeData"
|
|
|
+ @contrast="iscontrast = true"
|
|
|
+ ref="qhdb"
|
|
|
+ ></Qhdb> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Details ref="detailModal"></Details>
|
|
|
+ <Contrast ref="contrastModal" v-if="iscontrast"></Contrast>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 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 Fzyp from "./index.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,
|
|
|
+ Fzyp,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ drawer: false,
|
|
|
+ xzqh: "",
|
|
|
+ checkList: [
|
|
|
+ { title: "耕地" },
|
|
|
+ { title: "永久基本农田" },
|
|
|
+ { title: "监测图斑" },
|
|
|
+ { title: "辅助研判" },
|
|
|
+ ],
|
|
|
+ activeIndex: 0,
|
|
|
+ legends: legends,
|
|
|
+ iscontrast: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ computed_vectorData() {
|
|
|
+ return store.state.vectorData;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (sessionStorage.getItem("cockpitDate"))
|
|
|
+ store.setCockpitDate(sessionStorage.getItem("cockpitDate").split(","));
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.xzqh = store.state.cockpit_region.id;
|
|
|
+ this.regionChange();
|
|
|
+ this.bus.$on("handleView", this.handleView);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeData(name, updata) {
|
|
|
+ this[name] = updata;
|
|
|
+ },
|
|
|
+ handleView(row, type) {
|
|
|
+ this.$refs.detailModal.handleView(row, type);
|
|
|
+ },
|
|
|
+ regionChange() {
|
|
|
+ this.onClick(this.activeIndex);
|
|
|
+ },
|
|
|
+ cockpit() {
|
|
|
+ //驾驶舱矢量数据点选查询
|
|
|
+ pick_cockpit_vector.init_handler();
|
|
|
+ },
|
|
|
+ onClick(val) {
|
|
|
+ this.activeIndex = val;
|
|
|
+ if (val != 0) this.$refs.sdgk.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.getData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // activeIndex(val) {},
|
|
|
+ computed_vectorData(newVal) {
|
|
|
+ console.log(newVal, "newVal");
|
|
|
+ newVal.forEach((res) => {
|
|
|
+ if (res.name == "id") {
|
|
|
+ this.handleView({ id: 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: 43%;
|
|
|
+ height: 330px;
|
|
|
+ top: calc(100% - 360px);
|
|
|
+ left: 600px;
|
|
|
+ }
|
|
|
+ .legendPane {
|
|
|
+ width: 130px;
|
|
|
+ height: 120px;
|
|
|
+ // top: calc(100% - 500px);
|
|
|
+ top: calc(100% - 150px);
|
|
|
+ left: 460px;
|
|
|
+ .lcolor {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .legend0 {
|
|
|
+ background: #caf982;
|
|
|
+ }
|
|
|
+ .legend1 {
|
|
|
+ background: #80ffff;
|
|
|
+ }
|
|
|
+ .legend2 {
|
|
|
+ background: #facd91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.newContainer {
|
|
|
+ height: 758px !important;
|
|
|
+ top: 70px !important;
|
|
|
+}
|
|
|
+.el-select-dropdown {
|
|
|
+ background-color: rgba(4, 28, 50, 1) !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: 38%;
|
|
|
+ top: 10px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+@import "../complianceAnalysis/ghzc.scss";
|
|
|
+</style>
|
