<!-- * @Description: 停车场、岗亭、入口、出口通道数 * @Author: 王晓颖 * @Date: 2020-10-13 14:31:50 --> <template> <chart-layout title="停车场管理" @click="getData"> <div class="block-container"> <div class="block" v-for="(value,key,index) in data" :key="index"> <simple-block :data="value"> <img :src="images[key]"> </simple-block> </div> </div> <corner1 slot="corner"/> </chart-layout> </template> <script> import ChartLayout from '@/components/layout/chartLayout' import Corner1 from '@/components/corner/Corner1' import {fetchSmartParkData} from '@/api/cityManage' import SimpleBlock from '../introduce/components/simpleBlock' export default { name: 'parkIntroduce', components: {SimpleBlock, Corner1, ChartLayout}, data () { return { data: { parkingLot: {name: '停车场数', value: '24', unit: '个'}, watchhouse: {name: '岗亭数', value: '24', unit: '个'}, channel: {name: '通道数', value: '52', unit: '个'}, parkingSpace: {name: '总车位', value: '2317', unit: '个'} }, images: { parkingLot: require('@/assets/images/city/icon-park.png'), watchhouse: require('@/assets/images/city/icon-watchhouse.png'), channel: require('@/assets/images/city/icon-channel.png'), parkingSpace: require('@/assets/images/city/icon-position.png') } } }, created () { this.getData() }, methods: { getData () { this.getParkingLot() this.getParkingSpace() this.getWatchHouse() this.getChannel() }, getParkingLot () { fetchSmartParkData('parkingLot').then(response => { if (response.code === 200) { this.data.parkingLot.value = response.data.total } }) }, getParkingSpace () { fetchSmartParkData('parkingSpace').then(response => { if (response.code === 200) { this.data.parkingSpace.value = response.data.total } }) }, getWatchHouse () { fetchSmartParkData('watchhouse').then(response => { if (response.code === 200) { this.data.watchhouse.value = response.data.total } }) }, getChannel () { fetchSmartParkData('channel').then(response => { if (response.code === 200) { this.data.channel.value = response.data.total } }) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .block-container{ height: 100%; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0.04rem; .block{ width: 50%; height: 45%; } } </style>