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

<template>
  <div class="conViews" v-if="isShallow">
    <div class="sm-panel sm-function-module-query" v-drag>
      <div class="sm-panel-header">
        <span>
          {{ type == 0 ? "疑似闲置" : type == 1 ? "闲置未处置" : "闲置已处置" }}
          详情
        </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"></Info>
        </el-tab-pane>
        <el-tab-pane label="认定信息" name="rdxx" v-if="type != 0">
          <Info :data="rdData" :fileList="rdfileList"></Info>
        </el-tab-pane>
        <el-tab-pane label="处置信息" name="czxx" v-if="type == 2">
          <Info :data="czData" :fileList="czfileList"></Info>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  <script>
import {
  GetDetail,
  GetConfirmDetail,
  GetDisposalDetail,
} from "@/api/Idleland.js";
import Info from "./info.vue";
export default {
  props: {
    interObj: {
      type: Object,
    },
  },
  components: {
    Info,
  },
  data() {
    return {
      activeTabs: "jbxx",
      isShallow: false,
      jbxxData: [],
      rdData: [],
      czData: [],
      tempdataLayerId: null,
      type: 0,
      rdfileList: [],
      czfileList: [],
      cellstyle: {
        background: "rgba(10, 25, 38, 0.6)",
        color: "#66b1ff",
        fontSize: "14px",
        fontFamily: "Microsoft YaHei",
        fontWeight: "400",
      },
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    //关闭详情
    closeInster() {
      this.isShallow = false;
    },

    handleView(val, type) {
      this.isShallow = true;
      this.type = type;
      this.jbxxData = [];
      GetDetail(val.id).then((res) => {
        if (res.statuscode == 200) {
          // this.jbxxData = res.data;
          Object.keys(res.data).forEach((key) => {
            this.jbxxData.push({
              name: key,
              value: res.data[key],
            });
          });
        } else {
          this.$message.error(res.message);
        }
      });
      if (type != 0) {
        this.rdfileList = [];
        GetConfirmDetail(val.id).then((res) => {
          if (res.statuscode == 200) {
            this.rdData = [
              {
                name: "认定结论",
                value: `${res.data.isIdle ? "" : "不"}是闲置土地`,
              },
              { name: "闲置时间", value: res.data.idleTime + "天" },
              { name: "闲置原因", value: res.data.idleReason },
              { name: "认定时间", value: res.data.confirmTime },
              { name: "认定情况", value: res.data.confirmBasis },
            ];
            this.rdfileList = res.data.files;
          } else {
            this.$message.error(res.message);
          }
        });
      }
      if (type == 2) {
        this.czfileList = [];
        GetDisposalDetail(val.id).then((res) => {
          if (res.statuscode == 200) {
            this.czData = [
              { name: "处置时间", value: res.data.disposalTime },
              { name: "处置方式", value: res.data.disposalMethod },
              { name: "处置情况", value: res.data.disposalInfo },
            ];
            this.czfileList = res.data.files;
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
  },
  mounted() {},
  watch: {},
};
</script>
  
  <style lang="scss" scoped>
/deep/ .el-icon-close:before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: larger;
  font-weight: bold;

  &:hover {
    color: aqua;
  }
}
.sm-panel {
  width: 400px;
  max-width: 400px;
}

.sm-function-module-query {
  max-height: 800px !important;
  top: 28px !important;
}
</style>