usky-web-mobile/src/pages/setting/building/building.vue

<template>
  <view>
    <view class="basic-info">
      <view class="info-tit margin-left-xs">
        <text class="cuIcon-titles margin-right-xs"></text>
        基本信息
      </view>
      <view class="info-content padding-lr">
        <table style="border: 1px solid #ccc" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td>建筑物名称</td>
            <td>{{ contentgetDetailData.build_name }}</td>
          </tr>
          <tr>
            <td>建筑物类别</td>
            <td>{{ contentgetDetailData.build_type }}</td>
          </tr>
          <tr>
            <td>建造日期</td>
            <td>{{ contentgetDetailData.build_time }}</td>
          </tr>
          <tr>
            <td>使用性质</td>
            <td>{{ contentgetDetailData.nature_use }}</td>
          </tr>
          <tr>
            <td>火灾危险级</td>
            <td>{{ contentgetDetailData.fire_risk_level }}</td>
          </tr>
          <tr>
            <td>耐火等级</td>
            <td>{{ contentgetDetailData.fire_resistance_rating }}</td>
          </tr>
          <tr>
            <td>结构类型</td>
            <td>{{ contentgetDetailData.structure_type }}</td>
          </tr>
          <tr>
            <td>建筑高度</td>
            <td>{{ contentgetDetailData.build_height }}</td>
          </tr>
          <tr>
            <td>建筑面积</td>
            <td>{{ contentgetDetailData.build_area }}</td>
          </tr>
          <tr>
            <td>占地面积</td>
            <td>{{ contentgetDetailData.land_occupation_area }}</td>
          </tr>

          <tr>
            <td>标准层面积</td>
            <td>{{ contentgetDetailData.standard_area }}</td>
          </tr>
          <tr>
            <td>地上层数</td>
            <td>{{ contentgetDetailData.aboveground_layer }}</td>
          </tr>
          <tr>
            <td>地上层面积</td>
            <td>{{ contentgetDetailData.aboveground_area }}</td>
          </tr>

          <tr>
            <td>地下层数</td>
            <td>{{ contentgetDetailData.underground_floor }}</td>
          </tr>
          <tr>
            <td>地下层面积</td>
            <td>{{ contentgetDetailData.underground_area }}</td>
          </tr>
          <tr>
            <td>消防控制室位置</td>
            <td>{{ contentgetDetailData.control_room }}</td>
          </tr>
          <tr>
            <td>避难层数量</td>
            <td>{{ contentgetDetailData.refuge_layer }}</td>
          </tr>
          <tr>
            <td>消防电梯数量</td>
            <td>{{ contentgetDetailData.fire_elevator }}</td>
          </tr>
        </table>
      </view>
    </view>

    <view class="processStatus">
      <view class="info-tit margin-left-xs">
        <text class="cuIcon-titles margin-right-xs"></text>
        消防设施平面布置图
      </view>
      <view class="padding-lr imgPic">
        <image v-if="!contentgetDetailData.build_plan && contentdataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
        <image v-else mode="widthFix" :src="contentgetDetailData.layout_plan" />
      </view>
    </view>

    <view class="processStatus">
      <view class="info-tit margin-left-xs">
        <text class="cuIcon-titles margin-right-xs"></text>
        建筑平面图
      </view>
      <view class="padding-lr padding-bottom-lg imgPic">
        <image v-if="!contentgetDetailData.build_plan && contentdataRes == 1" mode="widthFix" src="@/static/images/defaultImg.jpg" />
        <image v-else :src="contentgetDetailData.build_plan" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs } from "vue";

import { getBuildingManagement } from "@/api/setting/building.js";

const getDetailData = ref({});
const dataRes = ref(0);

// 建筑基础数据请求
function getDetails(params = {}) {
  getBuildingManagement(params).then((res) => {
    getDetailData.value = res.data[0];
    console.log(getDetailData.value);
    dataRes.value = 1;
  });
}
onload((option) => {
  getDetails({ company_code: uni.getStorageSync("selectedCode") });
});
</script>

<style lang="scss" scoped>
:deep(.image-bg > div) {
  background-size: cover !important;
}
</style>