114 lines
3.0 KiB
Vue
114 lines
3.0 KiB
Vue
<template>
|
||
<view class="parking-card">
|
||
<view class="parking-card-header">
|
||
<text class="parking-title">车位收费总览</text>
|
||
</view>
|
||
<view class="parking-count-row">
|
||
<text class="parking-count-label">车位数量（个）</text>
|
||
<text class="parking-count-num">{{ parkingCount }}</text>
|
||
</view>
|
||
<view class="parking-divider"></view>
|
||
<view class="parking-fee-content">
|
||
<view class="parking-fee-left">
|
||
<view class="parking-fee-item">
|
||
<text class="parking-fee-label">本年应收（元）</text>
|
||
<text class="parking-fee-value">{{ parkingYearReceivable }}</text>
|
||
</view>
|
||
<view class="parking-fee-item">
|
||
<text class="parking-fee-label">本年已收（元）</text>
|
||
<text class="parking-fee-value">{{ parkingYearReceived }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="parking-fee-right">
|
||
<qiun-data-charts type="arcbar" :chartData="parkingArcbarData" :opts="parkingArcbarOpts" :animation="false" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
parkingCount: { type: Number, default: 0 },
|
||
parkingYearReceivable: { type: Number, default: 0 },
|
||
parkingYearReceived: { type: Number, default: 0 },
|
||
parkingArcbarPercent: { type: Number, default: 0 }
|
||
})
|
||
|
||
const parkingArcbarData = computed(() => ({
|
||
series: [{ name: '实收占比', data: props.parkingArcbarPercent / 100 }]
|
||
}))
|
||
|
||
const parkingArcbarOpts = computed(() => ({
|
||
color: ["#4D5DFA"],
|
||
title: { name: props.parkingArcbarPercent + '%', fontSize: 12, color: '#4D5DFA' },
|
||
subtitle: { name: '' },
|
||
extra: {
|
||
arcbar: {
|
||
type: 'circle',
|
||
width: 16,
|
||
backgroundColor: '#EAEAEA',
|
||
startAngle: 1.5,
|
||
endAngle: 0.25,
|
||
gap: 2,
|
||
lineCap: 'butt'
|
||
}
|
||
}
|
||
}))
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.parking-card {
|
||
margin-top: 20rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 30rpx 24rpx;
|
||
|
||
.parking-card-header {
|
||
margin-bottom: 20rpx;
|
||
.parking-title { font-size: 32rpx; font-weight: 600; color: #222; }
|
||
}
|
||
|
||
.parking-count-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
.parking-count-label { font-size: 28rpx; color: #666; margin-bottom: 6rpx; }
|
||
.parking-count-num { font-size: 32rpx; color: #333; font-weight: 600; }
|
||
}
|
||
|
||
.parking-divider {
|
||
height: 1rpx;
|
||
background: #EAEAEA;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.parking-fee-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.parking-fee-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
.parking-fee-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
.parking-fee-label { font-size: 28rpx; color: #666; margin-bottom: 4rpx; }
|
||
.parking-fee-value { font-size: 32rpx; color: #333; font-weight: 600; }
|
||
}
|
||
}
|
||
|
||
.parking-fee-right {
|
||
width: 240rpx;
|
||
height: 180rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|