SmartCommunity/commandCenter/src/views/communityAssets/assembly/overallCommunity.vue

<template>
  <div class="modelBlock">
    <div class="model-title">
      <div class="model-title-text">社区总体情况统计</div>
    </div>
    <div class="model-contents">
      <div
        class="blockmuen"
        :style="item.style"
        v-for="(item, index) in blockArr"
        :key="index"
      >
        <!-- @click="$router.push({ path: item.path })" -->
        <div class="number">{{ houseData[item.fontObj] }}</div>
        <div class="text">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import allcommunit from './allcommunit';
export default {
  mixins: [allcommunit],
  data () {
    return {
      houseData: {},
      blockArr: [
        {
          style: 'background: linear-gradient(135deg, #488fff 0%, #65dcff 100%)',
          name: '社区',
          fontObj: 'communityTotal',
          path: '/communityManagement/index'
        },
        {
          style: 'background: linear-gradient(315deg, #5EEDCC 0%, #24C3F1 100%);',
          name: '楼栋',
          fontObj: 'buildingTotal',
          path: '/buildingManagement/index'
        },
        {
          style: 'background: linear-gradient(135deg, #F0646C 0%, #F4994E 100%);',
          name: '房屋',
          fontObj: 'houseTotal',
          path: '/assetManagement/housingManagement/index'
        },
        {
          style: 'background: linear-gradient(135deg, #7178FF 0%, #D2A4FF 100%);',
          name: '商铺',
          fontObj: 'shopsTotal',
          path: '/assetManagement/shopManagement/index'
        },
        {
          style: 'background: linear-gradient(135deg, #884DD2 0%, #DF63CC 100%);',
          name: '住户',
          fontObj: 'residentTotal',
          path: '/ownerManagement/index'
        }
      ],
      mixins_query: {
        communityId: ''
      }
    };
  },
  methods: {
    // 获取房屋信息
    getData () {
      this.$http.get('/sc-community/Workbench/totalHouseInfo', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0) {
          this.houseData = data;
        } else {
          this.$message.error(msg);
        }
      });
    }
  },
  created () {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
.modelBlock {
    .model-contents {
        height: 50%;
        margin: 5% 0;
        display: grid;
        row-gap: rem(20);
        column-gap: rem(20);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        .blockmuen {
            border-radius: rem(10);
            box-sizing: border-box;
            padding-left: rem(20);
            padding-top: rem(20);
            // cursor: pointer;
            .number {
                font-size: rem(30);
            }
        }
    }
    .number {
        color: #ffffff;
    }
    .text {
        color: #ffffff;
    }
}
</style>