收费总览

wuye-manager-uniapp/pageSubPack/statistics/components/FeeOverviewCard.vue

@@ -16,8 +16,11 @@
     </view>
 
     <view class="fee-content">
-      <view class="fee-ring">
+      <view class="fee-ring" v-if="!chartLoading">
-        <qiun-data-charts type="arcbar" :chartData="arcbarData" :opts="arcbarOpts" />
+        <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; } }
       }

wuye-manager-uniapp/pageSubPack/statistics/components/ParkingFeeCard.vue

@@ -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: {

wuye-manager-uniapp/pageSubPack/statistics/statistics.vue

@@ -43,6 +43,7 @@
       :active-tab="activeTab"
       :arcbar-percent="arcbarPercent"
       :metric-list="metricList"
+      :chart-loading="feeLoading"
       @tab-change="switchTab"
       @fee-type-change="onFeeTypeChange"
     />
@@ -93,6 +94,7 @@ const projectOptions = ref([])
 const selectedProject = ref('')
 const selectedProjectLabel = ref('全部项目')
 
+const feeLoading = ref(false)
 const arcbarPercent = ref(0)
 
 const metricList = ref([
@@ -121,6 +123,7 @@ const inspectionList = ref([
 
 const switchTab = (tab) => {
   activeTab.value = tab
+  feeLoading.value = true
   fetchFeeSummary()
 }
 
@@ -128,6 +131,7 @@ const onProjectChange = (e) => {
   const opt = projectOptions.value[e.detail.value]
   selectedProject.value = opt.value
   selectedProjectLabel.value = opt.label
+  feeLoading.value = true
   fetchManagedArea(opt.value)
   fetchRate(opt.value)
   fetchFeeSummary()
@@ -139,6 +143,7 @@ const onProjectChange = (e) => {
 const onFeeTypeChange = (opt) => {
   selectedFeeType.value = opt.value
   selectedFeeTypeLabel.value = opt.label
+  feeLoading.value = true
   fetchFeeSummary()
 }
 
@@ -177,7 +182,7 @@ const fetchParkingFee = (villageId) => {
       parkingCount.value = Number(d.parkingCount) || 0
       parkingYearReceivable.value = Number(d.receivableAmount) || 0
       parkingYearReceived.value = Number(d.receivedAmount) || 0
-      parkingArcbarPercent.value = d.receivedPercent != null ? Number(d.receivedPercent) / 100 : 0
+      parkingArcbarPercent.value = d.receivedPercent
     }
   }).catch(() => {})
 }
@@ -198,7 +203,9 @@ const fetchFeeSummary = () => {
         { label: '欠收总额', value: (Number(d.unpaidAmount) || 0).toFixed(2), yoy: formatRate(d.unpaidYoyRate), mom: formatRate(d.unpaidMomRate) }
       ]
     }
-  }).catch(() => {})
+  }).catch(() => {}).finally(() => {
+    feeLoading.value = false
+  })
 }
 
 const formatRate = (val) => {