iot-front-ui/src/components/dashboard/more/floorOverview.vue

<script>
import apiDashboard from "@/api/dashboard/apiDashboard";
import Card from "@/components/common/card.vue";
export default {
  data() {
    return {
      builtArea: 0,
      layersInt: 0,
      constructionPeriod: 0,
      serviceLife: 0,
      companyNum: 0,
    }
  },
  components: {
    Card
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      return apiDashboard.getFloorOverview(this.queryData).then(res=>{
        this.builtArea = res.builtArea
        this.layersInt = res.layersInt
        this.constructionPeriod = res.constructionPeriod
        this.companyNum = res.companyNum
        this.serviceLife = res.serviceLife
      })
    }
  }
}
</script>

<template>
  <div class="dMore-floorOverview">
    <Card >
      <template #title>
        <span>楼宇概览</span>
      </template>
      <div style="padding: 15px">
        <a-row :gutter="[12,20]">
          <a-col :span="12">
            <a-statistic class="overflowItem" title="建筑面积(m²)" :value="builtArea" />
          </a-col>
          <a-col :span="12">
            <a-statistic class="overflowItem" title="建筑层数(层)" :value="layersInt" />
          </a-col>
          <a-col :span="12">
            <a-statistic class="overflowItem" title="已使用年限(年)" :value="serviceLife" />
          </a-col>
          <!--<a-col :span="12">-->
          <!--  <a-statistic class="overflowItem" title="建筑年限(年)" :value="constructionPeriod" />-->
          <!--</a-col>-->
          <a-col :span="12">
            <a-statistic class="overflowItem" title="入驻企业数(家)" :value="companyNum" />
          </a-col>
        </a-row>
      </div>

    </Card>
  </div>
</template>

<style lang="less" scoped>
.dMore-floorOverview {
  .overflowItem {
    display: inline-block;
    width: 70%;
    padding: 2% 0;
    text-align: left;
    margin-left: 25%;
  }
}
</style>