开发收费总览页面，对接中

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

@@ -0,0 +1,113 @@
+<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" />
+      </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 }]
+}))
+
+const parkingArcbarOpts = computed(() => ({
+  color: ["#4D5DFA"],
+  title: { name: Math.round(props.parkingArcbarPercent * 100) + '%', fontSize: 16, 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>