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

<!--闲置土地-->
<template>
  <div class="ghzc Idleland">
    <i
      class="cesiumbtn"
      :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'"
      :title="isbig ? '缩小' : '放大'"
      @click="bigViewerChange"
    ></i>
    <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>
        <span class="clearBtn" @click="cockpit">
          <i class="el-icon-thumb"></i>
          图斑详情查询
        </span>
      </h2>
      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
        <el-tab-pane label="统计总览" name="tjzl">
          <Tjzl
            v-loading="loading"
            @updateParent="changeData"
            ref="tjzl"
          ></Tjzl>
        </el-tab-pane>
        <el-tab-pane label="闲置管理" name="xzgl">
          <Xzgl
            v-loading="loading"
            @updateParent="changeData"
            ref="xzgl"
          ></Xzgl>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Details ref="detailModal"></Details>
  </div>
</template>

<script>
import Tjzl from "./components/tjzl.vue";
import Xzgl from "./components/xzgl.vue";
import Details from "./components/details.vue";
// import TabelView from "./components/tabelView.vue";
import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
export default {
  name: "Idleland",
  components: {
    Tjzl,
    Xzgl,
    Details,
    // TabelView,
  },
  data() {
    return {
      loading: false,
      activeTabs: "tjzl",
      xzqh: "",
    };
  },
  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: {
    bigViewerChange() {
      this.$router.push({ path: "/overview" });
      store.setViewerFlagb(true);
    },
    changeData(name, updata) {
      this[name] = updata;
    },
    handleView(row, type) {
      this.$refs.detailModal.handleView(row, type);
    },
    regionChange() {
      this.$refs.tjzl.regionChange(this.xzqh);
      this.$refs.xzgl.regionChange(this.xzqh);
    },
    cockpit() {
      console.log("----");
      //驾驶舱矢量数据点选查询
      pick_cockpit_vector.init_handler();
    },
  },
  watch: {
    activeTabs(newValue) {
      if (newValue != "xzgl") this.$refs.xzgl.reset();
      if (newValue == "tjzl") this.$refs.tjzl.getData();
      // if (newValue == "xzgl") this.$refs.xzgl.changeForm();
    },
    computed_vectorData(newVal) {
      console.log(newVal, "newVal");
      newVal.forEach((res) => {
        if (res.name == "id") {
          this.handleView({ id: res.value }, this.$refs.xzgl.getType());
          // const TableRows = this.$refs.singleTable.bodyWrapper.querySelectorAll(
          //   ".el-table__body tbody .el-table__row"
          // );
          // let scrollTop = 0;
          // for (let i = 0; i < TableRows.length; i++) {
          //   if (i === res.value) {
          //     break;
          //   }
          //   scrollTop += TableRows[i].offsetHeight;
          // }
          // this.$refs.singleTable.bodyWrapper.scrollTop = scrollTop;
          // this.scrollTop_index = res.value;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Idleland {
  .xz_box {
    padding-bottom: 0;
  }
  .clearBtn {
    cursor: pointer;
    z-index: 200;
  }
}
</style>
<style lang="scss">
.Idleland {
  .region {
    width: 100px !important;
    margin: 0 20px;
  }
  .el-cascader--mini {
    top: 0px;
    background: transparent;
  }
}
@import "../complianceAnalysis/ghzc.scss";
</style>