real3d-portalsite/src/views/farmlandProtection/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="fzjcyp">
            <FZJCYP v-loading="loading" @updateParent="changeData" ref="fzjcyp"></FZJCYP>
          </el-tab-pane>
          <el-tab-pane label="历史记录" name="lsju">
            <Lsjl :rzBsm="rzBsm" :activeTabs="activeTabs" @updateParent="changeData" type="gdbh" ref="lsju"></Lsjl>
          </el-tab-pane>
          <el-tab-pane label="分析结果" :disabled="activeTabs != 'scjg'" name="fxjg">
            <div v-drag style="height: 100%;">
              <FXJG :activeTabs="activeTabs" :loading="loading" :fxjgObj="nowObj" ref="fxjg"
                v-if="activeTabs == 'fxjg'"></FXJG>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- <RzDtails :rzBsm="rzBsm" @updateParent="changeData" :interObj="interObj"></RzDtails> -->
    
    </div>
  </template>
  
  <script>
  import FZJCYP from "./components/fzjcyp.vue";
  import FXJG from "./components/fxjg.vue";
  import Lsjl from "../complianceAnalysis/components/lsjl.vue";
  import RzDtails from "./components/interDetails.vue";
  export default {
    name: "farmlandProtection",
    components: {
      FZJCYP,
      Lsjl,
      FXJG,
      RzDtails
    },
    data() {
      return {
        activeTabs: "fzjcyp",
        rzBsm: "",
        rwBsm: "",
        nowObj: {},
        rzMc: "",
        loading: false,
        interObj:{},//套合信息存储
      };
    },
    created() { },
    methods: {
      changeData(name, updata) {
        this[name] = updata;
        console.log(this[name])
      },
      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 == "lsju") {
          this.$refs.lsju.reset();
          this.$refs.lsju.changeForm();
        }
        if (newValue == "fxjg") {
        this.$nextTick(() => {
          this.$refs.fxjg.initData();
        });
      }
      },
    },
  };
  </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>