<!-- * @Description: 收入情况:昨日,今日,本月,全年 * @Author: 王晓颖 * @Date: 2020-10-13 14:31:57 --> <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: 'parkIncomeCount', components: {SimpleBlock, Corner1, ChartLayout}, data () { return { data: { yesterday: {name: '昨日收入', value: '24', unit: '元'}, today: {name: '今日收入', value: '24', unit: '元'}, month: {name: '本月收入', value: '52', unit: '元'}, year: {name: '全年收入', value: '2317', unit: '元'} }, images: { yesterday: require('@/assets/images/city/icon-income-yesterday.png'), today: require('@/assets/images/city/icon-income-today.png'), month: require('@/assets/images/city/icon-income-month.png'), year: require('@/assets/images/city/icon-income-year.png') } } }, created () { this.getData() }, methods: { getData () { this.getIncomeYesterday() this.getIncomeToday() this.getIncomeMonth() this.getIncomeYear() }, getIncomeYesterday () { fetchSmartParkData('incomeYesterday').then(response => { if (response.code === 200) { this.data.yesterday.value = response.data.total } }) }, getIncomeToday () { fetchSmartParkData('incomeToday').then(response => { if (response.code === 200) { this.data.today.value = response.data.total } }) }, getIncomeMonth () { fetchSmartParkData('incomeMonth').then(response => { if (response.code === 200) { this.data.month.value = response.data.total } }) }, getIncomeYear () { fetchSmartParkData('incomeYear').then(response => { if (response.code === 200) { this.data.year.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>