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

<!--合规性分析-->
<template >
  <div class="ghzc siteselection">
    <div class="innerContainer leftPane" v-drag @click.native.stop>
      <h2 class="Pangetitle darg-div">
        <span class="pange_text">智能规划选址</span>
      </h2>
      <el-tabs
        type="border-card"
        class="xz_box"
        v-model="activeTabs"
        stretch
        @tab-click="tabClick"
      >
        <el-tab-pane label="辅助选址" name="fzxz">
          <FZXZ
            v-loading="loading"
            @updateParent="changeData"
            ref="fzxz"
          ></FZXZ>
        </el-tab-pane>
        <el-tab-pane label="历史记录" name="lsju">
          <Lsjl
            :rzBsm="rzBsm"
            :activeTabs="activeTabs"
            @updateParent="changeData"
            type="ghxz"
            ref="lsju"
          ></Lsjl>
        </el-tab-pane>
        <!-- :disabled="activeTabs != 'scjg'" -->
        <el-tab-pane
          label="选址结果"
          :disabled="activeTabs != 'xzjg'"
          name="xzjg"
        >
          <div v-drag style="height: 100%">
            <XZJG
              :activeTabs="activeTabs"
              :loading="loading"
              :rwBsm="rwBsm"
              :rzMc="nowObj.xmmc"
              ref="xzjg"
            ></XZJG>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <RzDtails
      :rzBsm="rzBsm"
      :rzMc="nowObj.xmmc"
      @updateParent="changeData"
    ></RzDtails>
  </div>
</template>

<script>
import FZXZ from "./components/fzxz.vue";
import XZJG from "./components/xzjg.vue";
import Lsjl from "../complianceAnalysis/components/lsjl.vue";
import RzDtails from "../complianceAnalysis/components/rzDtails.vue";
export default {
  name: "siteselection",
  components: {
    FZXZ,
    Lsjl,
    XZJG,
    RzDtails,
  },
  data() {
    return {
      activeTabs: "fzxz",
      rzBsm: "",
      rwBsm: "",
      nowObj: {},
      rzMc: "",
      loading: false,
    };
  },
  created() {},
  computed: {
    query() {
      return this.$route.query.rwbsm;
    },
  },
  mounted() {},
  methods: {
    changeData(name, updata) {
      this[name] = updata;
    },
    tabClick(evt) {
      this.activeTabs = evt.name;
    },
  },
  watch: {
    activeTabs(newValue) {
      if (newValue != "fzxz") this.$refs.fzxz.reset();
      if (newValue != "lsju") this.$refs.lsju.reset();
      if (newValue != "xzjg") this.$refs.xzjg.reset();

      if (newValue == "lsju") {
        this.$refs.lsju.reset();
        this.$refs.lsju.changeForm();
      }
      if (newValue == "xzjg") {
        this.$nextTick(() => {
          this.$refs.xzjg.GetXzjg();
        });
      }
    },
    query(newVal, oldVal) {
      if (newVal) {
        this.rwBsm = newVal;
        this.$refs.xzjg.reset();
        this.activeTabs = "xzjg";
        this.$refs.xzjg.GetXzjg();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.siteselection {
  .xz_box {
    .title {
      padding: 8px;
      margin-bottom: 10px;

      span {
        color: #605e5e;
        padding-left: 8px;
        border-left: 3px solid #3a8ee6;
      }

      button {
        padding: 0;
        float: right;
        margin-right: 5px;
        min-height: unset;
      }
    }

    .el-form-item {
      margin-bottom: 0;
    }

    .xz_table {
      height: 180px;

      /deep/.el-table__header-wrapper {
        height: 40px;
      }

      /deep/.el-table__body-wrapper {
        height: calc(100% - 40px);
        overflow-y: auto;
      }
    }

    .xz_type {
      margin-bottom: 10px;
      justify-content: space-evenly;

      div {
        i {
          font-size: 36px;
        }
      }
    }

    .xz-btn {
      width: 100%;
      // background: #efefef;
      position: absolute;
      height: 55px;
      z-index: 999;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
    }

    .jg-box {
      td {
        padding-left: 15px;
      }

      .el-collapse-item__header {
        span {
          position: absolute;
          right: 40px;
        }
      }

      .el-collapse-item__content {
        padding-bottom: 0;
      }
    }
  }

  .tckz {
    position: absolute;
    left: auto;
    right: 10px;
    bottom: 100px;
    text-align: center;
    // background-color: rgba(255, 255, 255, 0.85);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 5px;

    > div {
      padding: 5px;
      text-align: left;
    }
  }
}
</style>
<style lang="scss">
@import "../complianceAnalysis//ghzc.scss";
</style>