real3d-portalsite/src/views/ConstructionApplication3D/HighLimitAnalysis/HighLimitAnalysis.vue

<template>
  <div
    class="ZTGlobal"
    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="titleHeader">
          <span>控规建筑高度：≤{{ info.JZXGD }}米。</span>
          <br />
          <span v-if="TableData.length > 0"
            >结论：有超高建筑，建筑高度不符合控规要求。</span
          >
          <span v-else>结论：无超高建筑，建筑高度符合控规要求。</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-table
          ref="table"
          :data="TableData"
          :highlight-current-row="true"
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column label="超高楼号" align="center">
            <template #default="{ row }">
              {{ row.data.find((c) => c.label == "BUILDNO").value }}
            </template>
          </el-table-column>
          <el-table-column label="楼高(米)" align="center">
            <template #default="{ row }">
              {{ row.data.find((c) => c.label == "HEIGHT").value }}
            </template>
          </el-table-column>
          <el-table-column label="超高(米)" align="center">
            <template #default="{ row }">
              {{ row.cg }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      TableData: [],
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
      default: "",
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let that = this;
      debugger;
      that.info.layerDataList.forEach((layerData) => {
        let LANDNO = layerData.data.find((c) => c.label == "LANDNO");
        if (LANDNO && LANDNO.value) {
          let isdkbm = that.info.DKBM.find((c) => c == LANDNO.value);
          if (isdkbm) {
            let HEIGHT = layerData.data.find((c) => c.label == "HEIGHT").value;
            layerData.cg = that.calculateHighLimit(HEIGHT, that.info.JZXGD);
            if (layerData.cg > 0) {
              that.TableData.push(layerData);
            }
          }
        }
      });
    },
    /**
     * // 计算超高距离
     * @param Height 建筑高度
     * @param JZXGD 限高上限
     */
    calculateHighLimit(Height, JZXGD) {
      let sd = Height - JZXGD;
      return sd.toFixed(2);
    },
    //选中
    handleCurrentChange(row) {
      var center = Cesium.Cartesian3.fromDegrees(
        row.geometry.position.x,
        row.geometry.position.y
      ); //camera视野中心点坐标
      var heading = Cesium.Math.toRadians(0.0);
      var pitch = Cesium.Math.toRadians(-55.0);
      var range = row.geometry.boundingBox.upper.z + 300;
      viewer.camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(heading, pitch, range)
      );
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    },
  },

  beforeDestroy() {},
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style lang="scss" scoped>
.el-card {
  border: 0px solid #02a7f0;
}
.el-form-item {
  margin-bottom: 0;
}
</style>