real3d-portalsite/src/views/siteselection/components/dkDetails.vue

<template>
  <div class="dkxq_Container" v-if="isDateilsShow">
    <div class="sm-panel-header">
      <span>{{ title }}</span>
      <span class="closeBtn" @click="close">&times;</span>
    </div>
    <pie
      v-if="title == '现状信息'"
      :class="`echart`"
      unit="亩"
      @echartClick="echartClick"
      :ref="`echartRef`"
    ></pie>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="loadingDiv"
      v-if="title == '规划信息'"
    >
      <el-collapse
        v-for="(value, index_item) in collapseList"
        :key="index_item"
        @change="handleChange"
      >
        <el-collapse-item
          :title="'地块' + (index_item + 1)"
          name="1"
        >
          <div
            class="list_vector_multi"
            v-for="(value_field, index_field) in value"
            :key="index_field"
            @click="go(value)"
            v-if="value_field.filed != 'geom'"
          >
            <!-- v-if="value_field.filed != 'geom'" -->
            <div class="filed_box">
              {{ value_field.filedZH }}
            </div>
            :
            <div class="filed_box">
              {{ value_field.data }}
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import { AddHgxfxV1 } from "@/api/ghss/hgxfx.js";
import { GetTableData } from "@/api/cockpitNew";
// 使用
export default {
  components: { pie },
  props: {},
  data() {
    return {
      title: "",
      itemObj: {},
      collapseList: [],
      loading: true,
      isDateilsShow:false
    };
  },
  methods: {
    show(item, title) {
      this.title = title;
      this.getData(item);
    },
    getData(item) {
      let formdata = {
        xmmc: "选址调用",
        xzfw: item.geom.replace("SRID=4326;", ""),
        fxmj: item.area,
        scxList: [
          {
            scxbsm: "TDXZ",
            parameter:
              '{"parameter":[{"key":"范围内","value":"intersection"}],"find":"intersection"}',
          },
        ],
      };
      AddHgxfxV1(formdata).then((res) => {
        if (res.success) {
          res.data.data.forEach((e) => {
            let c = e.dataList || [];
            c.map((ci) => {
              ci.name = ci.yslx_name;
              ci.value = ci.mj;
              ci.geom = ci.geom || "";
            });
            if (e.scxstyle == 0) this.setEchart(c, "vertical");
          });
        }
      });
    },
    setEchart(data, type) {
      console.log("res.data", this.$refs.echartRef);
      this.$nextTick(() => {
        this.$refs.echartRef.setOptions({
          data,
          type,
          max: 6,
          legend_right: "20%",
        });
      });
    },
    echartClick(name) {},

    getCollapseList() {
      this.loading = true
      this.collapseList = []
      function cutStringFromFirstSemiColon(str) {
        var index = str.indexOf(";"); // 获取第一个分号的索引
        if (index !== -1) {
          return str.substring(index + 1); // 从分号开始截取到字符串末尾
        }
        return str; // 如果没有找到分号，返回原字符串
      }

      var resultString = cutStringFromFirstSemiColon(this.itemObj.geom);
      // console.log(wkt,'wktwkt');
      let obj = {
        wkt: resultString,
        id: "dd699f839bc04969ae2dc2e1964d0ad2",
      };
      GetTableData(obj).then((res) => {
        let tempArr = res.data;
        if (tempArr.data) {
          this.collapseList = tempArr.data;
        }
        this.loading = false
      });
    },
    close(){
      this.isDateilsShow = false
    }
  },
  mounted() {},
  computed: {},
};
</script>

<style lang="scss">
.dkxq_Container {
  width: 19rem;
  height: 600px;
  background-color: pink;
  position: fixed;
  bottom: 16%;
  right: 10px;

  cursor: pointer;
  background: url(/static/images/ghzc/内容框.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0px 10px;
  box-sizing: content-box;
  text-align: left;
  line-height: 40px;
  .echart {
    width: 19rem;
    height: 450px;
  }
}

.list_vector_multi {
  background-image: url("/static/images/ghzc/内容框.png");

  width: 18rem;
  border-top: 1px solid #ccc;
  font-size: 14px;
  padding: 0.1rem 0rem 0.1rem 0rem;
  border-left: 1px solid #ccc;

  border-right: 1px solid #ccc;

  // border-bottom:1px solid #CCC ;
}

.list_vector_multi:last-child {
  border-bottom: 1px solid #ccc;
}
.filed_box {
  display: inline-block;
}
.loadingDiv{
  width: 100%;
  // height: 100%;
  height: calc(100% - 46px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>