real3d-portalsite/src/views/farmlandProtection/components/interDetails.vue

<template>
  <div>
    <div class="DetilsCon">
      <div class="sm-panel sm-function-module-query" v-drag>
        <div class="sm-panel-header">
          <span>占压耕地图斑</span>
          <i class="el-icon-close" @click="closeInster"></i>
        </div>
        <div class="tableCon">
          <el-table
            :header-cell-style="{
              background: 'rgba(10, 25, 38, 0.6)',
              color: '#66b1ff',
              fontSize: '14px',
              fontFamily: 'Microsoft YaHei',
              fontWeight: '400',
            }"
            :data="tableData"
            style="width: 100%"
            height="731"
          >
            <el-table-column
              show-overflow-tooltip="true"
              prop="id"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip="true"
              prop="siweiarea"
              label="图斑面积(㎡)"
            >
            </el-table-column>
            <el-table-column width="100" label="操作">
              <template slot-scope="scope">
                <!-- <span>编辑</span> -->
                <el-button size="mini" type="text" @click="flyTo(scope.row)"
                  >定位</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleView(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column></el-table
          >
        </div>
      </div>
    </div>
    <div class="conViews" v-if="isShallow">
      <div class="sm-panel sm-function-module-query" v-drag>
        <div class="sm-panel-header">
          <span>图斑详情</span>
          <i class="el-icon-close" @click="isShallow = false"></i>
        </div>
        <el-tabs
          type="border-card"
          class="xz_box info"
          v-model="activeTabs"
          stretch
        >
          <el-tab-pane label="套合结果" name="thjg">
            <!-- <div class="inter_result"></div> -->
            <div class="Integration inter_result">
              <!-- <div
                class="Integration_list"
                v-for="(item, i) in yzjgData"
                :key="i"
              >
                <div>{{ item.mx_bsmmc }}:</div> -->
              <el-table :data="yzjgData">
                <el-table-column
                  prop="bsmmc"
                  label="套合数据"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="sumcount"
                  label="监测图斑数(个)"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="sumvalue"
                  label="重叠面积(㎡)"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
              <!-- <div
                  v-for="(item2, c) in item.mx_data"
                  :key="c"
                  class="list_Cont"
                >
                  <div class="list_item">
                    <div class="listText">
                      <span style="color: #fff">{{ item2.bsmmc }}图斑数</span>
                      <span
                        style="
                          color: #2d8cf0;
                          font-weight: bold;
                          cursor: pointer;
                        "
                        @click="resultDeatils(item2, item.mx_bsm)"
                        >{{ item2.sumcount }}个</span
                      >
                    </div>
                  </div>
                  <div class="list_item">
                    <div class="listText">
                      <span style="color: #fff">{{ item2.bsmmc }}面积(㎡)</span>
                      <span color="#80FFFF">{{ item2.sumvalue }}</span>
                    </div>
                  </div>
                </div> -->
              <!-- </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="基本信息" name="jbxx">
            <div class="inter_result" v-if="activeTabs == 'jbxx'">
              <el-table
                :header-cell-style="{
                  background: 'rgba(10, 25, 38, 0.6)',
                  color: '#66b1ff',
                  fontSize: '14px',
                  fontFamily: 'Microsoft YaHei',
                  fontWeight: '400',
                }"
                :data="jbxxData"
                height="455"
                style="width: 100%"
              >
                <el-table-column
                  show-overflow-tooltip="true"
                  prop="name"
                  label="属性名称"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip="true"
                  prop="value"
                  label="属性值"
                >
                </el-table-column>
              </el-table>
              <!-- <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3>{{ item }}</h3>
                </el-carousel-item>
              </el-carousel> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { name } from "file-loader";
import { getYZ, getgeoms, getOneDetail } from "../../../api/ghss/gdbh.js";
import { loadGeoJSON } from "@/utils/MapHelper/help.js";
let layerSources = {};
export default {
  props: {
    interObj: {
      type: Object,
    },
  },
  data() {
    return {
      activeTabs: "thjg",
      tableData: [],
      viewsData: null,
      isShallow: false,
      jbxxData: null,
      yzjgData: [],
      tempdataLayerId: null,
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    //关闭套合结果详情
    closeInster() {
      this.$emit("updateParent", "showInter", false);
      this.isShallow = false;
      viewer.entities.removeAll();
      viewer.dataSources.removeAll();
    },
    flyTo(item) {
      let id = "h_" + item.id;
      this.tempdataLayerId = id;
      loadGeoJSON(item.geom, "#ff0000", { isfly: true }, (data) => {
        layerSources[id] = data;
      });
    },
    handleView(val) {
      this.isShallow = true;
      getOneDetail({
        bsm: this.interObj.bsm,
        id: val.id,
      }).then((res) => {
        if (res.statuscode == 200) {
          this.viewsData = res.data;
          this.yzjgData = []; // res.data.yzjg;
          res.data.yzjg.forEach((jsi) => {
            jsi.mx_data.forEach((mx) => {
              this.yzjgData.push({
                ...mx,
                mx_bsm: jsi.mx_bsm,
                mx_bsmmc: jsi.mx_bsmmc,
              });
            });
          });
          let geomJson = JSON.parse(res.data.tbxx.geomJson);
          this.jbxxData = Object.keys(geomJson).map((key) => ({
            name: key,
            value: geomJson[key],
          }));
        } else {
          this.$message.error(res.message);
        }
      });
      this.isShallow = true;
    },
    init() {
      if (!this.interObj.mxbsm) {
        this.getAll();
      } else {
        this.getYZ();
      }
    },
    getYZ() {
      getYZ(this.interObj).then((res) => {
        if (res.statuscode == 200) {
          this.tableData = res.data.datalist;
          this.active_tableData(this.tableData);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getAll() {
      getgeoms(this.interObj).then((res) => {
        if (res.statuscode == 200) {
          this.tableData = res.data;
          this.active_tableData(res.data);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    active_tableData(newVal) {
      newVal.forEach((res, index) => {
        res.type = "图斑上图";
        if (res.geom)
          loadGeoJSON(res.geom, "#55A1E3", { isfly: false }, (data) => {
            layerSources[res.id] = data;
            data.entities.values.forEach((entity) => {
              entity.properties = res;
            });
          });
      });
    },
  },
  mounted() {},
  watch: {
    // interObj(newValue) {
    //   this.init();
    // },
    interObj: {
      handler(newVal) {
        this.init();
      },
      deep: true,
      immediate: true,
    },
    tempdataLayerId(newVal, oldVal) {
      if (oldVal && layerSources[oldVal]) {
        viewer.dataSources.remove(layerSources[oldVal]);
        layerSources[oldVal] = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.DetilsCon {
  position: relative;
  right: 57%;
}

.tableCon {
  height: 48rem;
}

/deep/ .el-icon-close:before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: larger;
  font-weight: bold;

  &:hover {
    color: aqua;
  }
}
/deep/ .el-carousel--horizontal {
  margin-top: 15px;
}
/deep/ .el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 200px;
  text-align: center;
  margin: 0;
}

/deep/ .el-carousel__container {
  height: 200px;
}

/deep/ .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

/deep/ .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.inter_result {
  // height: 580px;
  height: 695px;
}

.Integration {
  // max-height: 580px;
  height: 695px;
  overflow: hidden;
  overflow-y: auto;

  .Integration_list {
    background-color: #0f7bc875;
    // display: flex;
    // justify-content: space-between;
    margin-top: 8px;
    // flex-wrap: wrap;
    padding: 10px;

    .listCol {
      width: 49%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-bottom: 5px;

      .listText {
        width: 100%;
        display: flex;
        flex-direction: column;

        span {
          height: 20px;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .list_Cont {
      width: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-bottom: 5px;
      .list_item {
        width: 50%;
        .listText {
          width: 100%;
          display: flex;
          flex-direction: column;

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