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

<!--全域土地综合整治专题-->
<template>
  <div class="ghzc LandConsolidation">
    <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>
        <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"
          @contrast="contrast"
          ref="list"
          v-show="activeIndex == 1"
        ></List>
        <preCheck
          v-loading="loading"
          @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
          v-loading="loading"
          @updateParent="changeData"
          @contrast="contrast"
          ref="qhdb"
        ></Qhdb>
      </div>
    </div>
    <div class="innerContainer legendPane" v-drag>
      <div class="xz_box">
        图例
        <div v-for="(litem, li) in legends" :key="litem.label">
          <span :class="`legend${li}`" class="lcolor"></span>
          <span class="legLabel">{{ litem }}</span>
        </div>
      </div>
    </div>
    <Details ref="detailModal"></Details>


    <div class="innerContainer rightPane newContainer" v-show="activeIndex == 0">
      <Organize></Organize>
    </div>
  </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 Details from "./components/details.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
  },
  data() {
    return {
      loading: false,
      xzqh: "",
      checkList: [
        {
          title: "试点总揽",
        },
        {
          title: "整治项目",
        },
        {
          title: "新增耕地",
        },
        {
          title: "整治预检",
        },
      ],
      activeIndex: 1,
      legends: ["试点区域", "整治区域", "整治项目"],
    };
  },
  computed: {
    computed_vectorData() {
      return store.state.vectorData;
    },
  },
  created() {
    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.$refs.sdgk.regionChange(this.xzqh);
      this.$refs.qhdb.regionChange(this.xzqh);
    },
    cockpit() {
      //驾驶舱矢量数据点选查询
      pick_cockpit_vector.init_handler();
    },
    onClick(val) {
      this.activeIndex = val;
    },
  },
  watch: {
    activeIndex(newValue) {
      // if (newValue != "qhdb") this.$refs.qhdb.reset();
      // if (newValue == "sdgk") this.$refs.sdgk.getData();
      // if (newValue == "qhdb") this.$refs.qhdb.changeForm();
      // if (newValue == 0) this.$refs.list.searchFun();
    },
    computed_vectorData(newVal) {
      console.log(newVal, "newVal");
      newVal.forEach((res) => {
        if (res.name == "id") {
          this.handleView({ id: res.value }, this.$refs.qhdb.getType());
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.LandConsolidation {
  .xz_box {
    padding-bottom: 0;
  }
  .clearBtn {
    cursor: pointer;
    z-index: 200;
  }
  .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;
    }
  }

  .bottomPane {
    width: 45%;
    height: 330px;
    top: calc(100% - 500px);
    left: 480px;
  }
  .legendPane {
    width: 150px;
    height: 120px;
    // top: calc(100% - 500px);
    top: calc(100% - 150px);
    left: 480px;
    .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;
}
</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;
  }
}

@import "../complianceAnalysis/ghzc.scss";
</style>