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%"
          >
            <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
                  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="350"
                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, getOneDetail } from "../../../api/ghss/gdbh.js";

export default {
  props: {
    interObj: {
      type: Object,
    },
  },
  data() {
    return {
      activeTabs: "thjg",
      tableData: [],
      viewsData: null,
      isShallow: false,
      jbxxData: null,
      yzjgData: [],
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    //关闭套合结果详情
    closeInster() {
      this.$emit("updateParent", "showInter", false);
      this.isShallow = false
    },
    flyTo(val) {},
    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;
          this.jbxxData = Object.keys(res.data.tbxx).map((key) => ({
            name: key,
            value: res.data.tbxx[key],
          }));
        } else {
          this.$message.error(res.message);
        }
      });
      this.isShallow = true;
    },
    init() {
      getYZ(this.interObj).then((res) => {
        if (res.statuscode == 200) {
          this.tableData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  mounted() {},
  watch: {
    // interObj(newValue) {
    //   this.init();
    // },
    interObj: {
      handler(newVal) {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

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

.tableCon {
  height: 40rem;

  /deep/ .el-table tr {
    background: rgba(10, 25, 38, 0.5) !important;
  }

  /deep/ .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    background: rgba(10, 25, 38, 0.5) !important;

    border-bottom: 0px solid #ebeef5;
  }

  .el-table {
    color: #fff;
    background: rgba(10, 25, 38, 0.5) !important;
  }

  /deep/ .el-table__fixed-right::before,
  .el-table__fixed::before {
    background: rgba(10, 25, 38, 0.9) !important;
  }

  /deep/ .el-table__fixed-right-patch {
    background: rgba(10, 25, 38, 0.9) !important;
  }

  /deep/ .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background: rgba(10, 25, 38, 0) !important;
  }
}

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

  &:hover {
    color: aqua;
  }
}

/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;
}

.Integration {
  max-height: 580px;
  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;
          }
        }
      }
    }
  }
}
</style>
</style>