real3d-portalsite/src/views/LandConsolidation/components/details.vue

<template>
  <div class="conViews">
    <div class="sm-panel sm-function-module-query" v-drag v-if="isShallow">
      <div class="sm-panel-header">
        <span> {{ type == "耕地" ? "新增耕地地块详情" : "项目详情" }} </span>
        <i class="el-icon-close" @click="closeInster"></i>
      </div>
      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
        <el-tab-pane label="基本信息" name="jbxx">
          <Info
            :data="jbxxData"
            :cellClass="cellClass"
            @Rowclicked="Rowclicked"
          ></Info>
        </el-tab-pane>
        <!-- <el-tab-pane label="进度跟踪" name="rdxx" v-if="type != '耕地'">
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <el-dialog
      title="图斑信息"
      width="40%"
      :visible.sync="dialogVisible"
      :before-close="close"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <CustomDetails :model="formData" :config="datainfo" class="CustomDetails">
        <template #xmmc>
          <span class="usable" @click="go"> {{ formData["项目名称"] }}</span>
        </template>
      </CustomDetails>
    </el-dialog>
  </div>
</template>
  <script>
import { GetDetail } from "@/api/Idleland.js";
import Info from "../../Idleland/components/info.vue";
import CustomDetails from "@/components/mapView/custom-detailsInfo.vue";
import { getXmList, getXm } from "@/api/stxf/tdzz.js";
import { detailInfos, tbInfos, xzgdInfos } from "./config";
export default {
  props: {
    interObj: {
      type: Object,
    },
  },
  components: { Info, CustomDetails },
  data() {
    return {
      activeTabs: "jbxx",
      isShallow: false,
      jbxxData: [],
      rdData: [],
      formData: {},
      datainfo: tbInfos,
      tempdataLayerId: null,
      dialogVisible: false,
      type: "",
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    //关闭详情
    closeInster() {
      this.isShallow = false;
      this.$emit('closeInster')
    },
    close() {
      this.dialogVisible = false;
    },
    handleView(val, type) {
      this.type = type;
      (this.activeTabs = "jbxx"), (this.jbxxData = []);
      if (type == "整治图斑") {
        this.dialogVisible = true;
        this.formData = val;
      } else if (type == "整治项目") {
        this.isShallow = true;
        getXm(val.id).then((res) => {
          if (res.code == 200) {
            // Object.keys(res.data).forEach((key) => {
            //   this.jbxxData.push({ name: key, value: res.data[key] });
            // });
            this.formData = res.data;
            detailInfos.forEach((key) => {
              let unit = res.data[key.unitpro] || key.unit || "";
              this.jbxxData.push({
                name: key.name,
                value: (res.data[key.value] || "——") + unit,
              });
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        this.isShallow = true;
        xzgdInfos.forEach((key) => {
          this.jbxxData.push({ name: key.name, value: val[key.value] });
        });
      }
    },
    go() {
      this.handleView({ id: this.formData.pid }, "整治项目");
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      if (row.name == "新增耕地") {
        return "usable";
      } else {
        return "";
      }
    },
    Rowclicked(row, column, event) {
      if (row.name == "新增耕地") {
        this.closeInster();
        this.close();
        this.$emit("goxzgd", this.formData);
      }
    },
  },
  mounted() {},
  watch: {},
};
</script>
  
  <style lang="scss" scoped>
.sm-panel {
  width: 400px;
  max-width: 400px;
  /deep/ .el-icon-close:before {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: larger;
    font-weight: bold;

    &:hover {
      color: aqua;
    }
  }
}

.sm-function-module-query {
  max-height: 800px !important;
  top: 28px !important;
}
.CustomDetails {
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>