收费总览
This commit is contained in:
@@ -16,8 +16,11 @@
|
||||
</view>
|
||||
|
||||
<view class="fee-content">
|
||||
<view class="fee-ring">
|
||||
<qiun-data-charts type="arcbar" :chartData="arcbarData" :opts="arcbarOpts" />
|
||||
<view class="fee-ring" v-if="!chartLoading">
|
||||
<qiun-data-charts type="arcbar" :chartData="arcbarData" :opts="arcbarOpts" :animation="false" />
|
||||
</view>
|
||||
<view class="fee-ring fee-ring-loading" v-else>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<view class="fee-metrics">
|
||||
@@ -44,18 +47,19 @@ const props = defineProps({
|
||||
selectedFeeTypeLabel: { type: String, default: '全部收费类型' },
|
||||
activeTab: { type: String, default: 'day' },
|
||||
arcbarPercent: { type: Number, default: 0 },
|
||||
metricList: { type: Array, default: () => [] }
|
||||
metricList: { type: Array, default: () => [] },
|
||||
chartLoading: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['tab-change', 'fee-type-change'])
|
||||
|
||||
const arcbarData = computed(() => ({
|
||||
series: [{ name: '实收占比', data: props.arcbarPercent }]
|
||||
series: [{ name: '实收占比', data: props.arcbarPercent / 100 }]
|
||||
}))
|
||||
|
||||
const arcbarOpts = computed(() => ({
|
||||
color: ["#4D5DFA"],
|
||||
title: { name: Math.round(props.arcbarPercent * 100) + '%', fontSize: 16, color: '#4D5DFA' },
|
||||
title: { name: props.arcbarPercent + '%', fontSize: 12, color: '#4D5DFA' },
|
||||
subtitle: { name: '' },
|
||||
extra: {
|
||||
arcbar: {
|
||||
@@ -137,6 +141,12 @@ const onFeeTypeChange = (e) => {
|
||||
height: 180rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.fee-ring-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.loading-text { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
|
||||
.fee-metrics {
|
||||
flex: 1;
|
||||
@@ -159,7 +169,7 @@ const onFeeTypeChange = (e) => {
|
||||
.metric-compare {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
.compare-line { font-size: 24rpx; color: #666; line-height: 1.7; }
|
||||
.compare-num { font-weight: 600; &.up { color: #67C23A; } &.down { color: #F56C6C; } }
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="parking-fee-right">
|
||||
<qiun-data-charts type="arcbar" :chartData="parkingArcbarData" :opts="parkingArcbarOpts" />
|
||||
<qiun-data-charts type="arcbar" :chartData="parkingArcbarData" :opts="parkingArcbarOpts" :animation="false" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -37,12 +37,12 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const parkingArcbarData = computed(() => ({
|
||||
series: [{ name: '实收占比', data: props.parkingArcbarPercent }]
|
||||
series: [{ name: '实收占比', data: props.parkingArcbarPercent / 100 }]
|
||||
}))
|
||||
|
||||
const parkingArcbarOpts = computed(() => ({
|
||||
color: ["#4D5DFA"],
|
||||
title: { name: Math.round(props.parkingArcbarPercent * 100) + '%', fontSize: 16, color: '#4D5DFA' },
|
||||
title: { name: props.parkingArcbarPercent + '%', fontSize: 12, color: '#4D5DFA' },
|
||||
subtitle: { name: '' },
|
||||
extra: {
|
||||
arcbar: {
|
||||
|
||||
Reference in New Issue
Block a user