real3d-portalsite/src/views/ConstructionApplication3D/ZBFXAnalysisinfo/detailedInfo.vue

<template>
  <div
    class="ZTGlobal"
    style="
      width: 100%;
      height: 100%;
      padding: 1rem 1rem 0rem 1rem;
      color: white;
    "
  >
    <el-container style="height: 100%">
      <el-header style="height: 4rem">
        <el-descriptions v-if="tableData" border size="mini" :column="3">
          <el-descriptions-item label="地块编码">{{
            tableData.landNo
          }}</el-descriptions-item>

          <el-descriptions-item label="建筑面积"
            >{{ Number(tableData.mj).toFixed(2) }}m<sup
              >2</sup
            ></el-descriptions-item
          >
          <el-descriptions-item label="计容面积"
            >{{ Number(tableData.jrmj).toFixed(2) }}m<sup
              >2</sup
            ></el-descriptions-item
          >
          <el-descriptions-item label="楼栋数量">{{
            tableData.buildNum
          }}</el-descriptions-item>
          <el-descriptions-item label="计算书面积"
            >{{ Number(tableData.famj).toFixed(2) }}m<sup
              >2</sup
            ></el-descriptions-item
          >
          <el-descriptions-item label="计算书计容面积"
            >{{ Number(tableData.fajrmj).toFixed(2) }}m<sup
              >2</sup
            ></el-descriptions-item
          >

          <!-- <el-descriptions-item label="机动车位">
            {{ ParkData ? ParkData.jdcCount : 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="非机动车位">{{
            ParkData ? ParkData.fjdcCount : 0
          }}</el-descriptions-item> -->
        </el-descriptions>
        <el-empty image="/static/images/ghzc/empty.png" v-if="!tableData" description="未查询到数据"></el-empty>
      </el-header>
      <el-main>
        <el-row :gutter="10" style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <el-table
              v-if="tableData"
              :data="tableData.builds"
              style="width: 100%; border: 1px solid rgba(15, 122, 200, 0.4)"
              height="100%"
              size="mini"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-row
                    :gutter="10"
                    style="
                      height: 100%;
                      margin: 0.5rem;
                      background-color: rgba(4, 28, 50, 0.6);
                    "
                  >
                    <el-col :span="24" style="height: 100%">
                      <el-table
                        :data="props.row.floors"
                        style="width: 100%"
                        size="mini"
                      >
                        <el-table-column label="楼层" prop="layer">
                        </el-table-column>
                        <el-table-column label="计算书计容面积" prop="fajrmj">
                          <template slot-scope="scope">
                            {{ Number(scope.row.fajrmj).toFixed(2) }}m<sup
                              >2</sup
                            >
                          </template>
                        </el-table-column>
                        <el-table-column label="计算书面积" prop="famj">
                          <template slot-scope="scope">
                            {{ Number(scope.row.famj).toFixed(2) }}m<sup>2</sup>
                          </template>
                        </el-table-column>
                        <el-table-column label="核算计容面积" prop="jrmj">
                          <template slot-scope="scope">
                            {{ Number(scope.row.jrmj).toFixed(2) }}m<sup>2</sup>
                          </template>
                        </el-table-column>
                        <el-table-column label="核算建筑面积" prop="mj">
                          <template slot-scope="scope">
                            {{ Number(scope.row.mj).toFixed(2) }}m<sup>2</sup>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column label="楼号" prop="buildNo"> </el-table-column>
              <el-table-column label="计算书计容面积" prop="fajrmj">
                <template slot-scope="scope">
                  {{ Number(scope.row.fajrmj).toFixed(2) }}m<sup>2</sup>
                </template>
              </el-table-column>
              <el-table-column label="计算书面积" prop="famj">
                <template slot-scope="scope">
                  {{ Number(scope.row.famj).toFixed(2) }}m<sup>2</sup>
                </template>
              </el-table-column>
              <el-table-column label="楼层数" prop="floorCount">
              </el-table-column>
              <el-table-column label="核算计容面积" prop="jrmj">
                <template slot-scope="scope">
                  {{ Number(scope.row.jrmj).toFixed(2) }}m<sup>2</sup>
                </template>
              </el-table-column>
              <el-table-column label="核算建筑面积" prop="mj">
                <template slot-scope="scope">
                  {{ Number(scope.row.mj).toFixed(2) }}m<sup>2</sup>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      ParkData: [],
    };
  },
  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() {
      this.tableData = this.info.infoData;
      this.tableData.builds.forEach((item, i) => {
        // 1. 分离不同类型的楼层
        const rfFloor = item.floors.find((floor) => floor.layer === "RF");
        const fFloors = item.floors.filter((floor) =>
          floor.layer.startsWith("F")
        );
        const bFloors = item.floors.filter((floor) =>
          floor.layer.startsWith("B")
        );

        // 2. 对 F 楼层按数字降序排序（F13 → F12 → ... → F1）
        const sortedFFloors = fFloors.sort((a, b) => {
          const aNum = parseInt(a.layer.substring(1));
          const bNum = parseInt(b.layer.substring(1));
          return bNum - aNum; // 降序
        });

        // 3. 对 B 楼层按数字升序排序（B1 → B2）
        const sortedBFloors = bFloors.sort((a, b) => {
          const aNum = parseInt(a.layer.substring(1));
          const bNum = parseInt(b.layer.substring(1));
          return aNum - bNum; // 升序
        });

        // 4. 合并所有楼层（RF + F + B）
        const sortedFloors = [];
        if (rfFloor) sortedFloors.push(rfFloor); // 添加 RF
        sortedFloors.push(...sortedFFloors); // 添加 F13 → F1
        sortedFloors.push(...sortedBFloors); // 添加 B1 → B2
        item.floors = sortedFloors;
      });
      this.ParkData = this.info.ParkData;
    },
  },

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