收费总览页面

2026-08-07 16:36:05 +08:00
parent d8faa12083
commit 5b23e48e2c
12 changed files with 163 additions and 61 deletions
--- a/wuye-manager-uniapp/pageSubPack/statistics/components/DepositCard.vue
+++ b/wuye-manager-uniapp/pageSubPack/statistics/components/DepositCard.vue
@@ -6,6 +6,9 @@
    </view>
    <view class="deposit-chart">
      <qiun-data-charts type="column" :chartData="depositColumnData" :opts="depositColumnOpts" />
+      <view class="deposit-empty-mask" v-if="depositItems.length === 0">
+        <text class="empty-text">暂无数据</text>
+      </view>
    </view>
  </view>
 </template>
@@ -15,16 +18,17 @@ import { computed } from 'vue'

 const props = defineProps({
  depositBalance: { type: String, default: '0' },
-  depositRenovation: { type: Number, default: 0 },
-  depositRental: { type: Number, default: 0 }
+  depositItems: { type: Array, default: () => [] }
 })

-const depositColumnData = computed(() => ({
-  categories: ['装修押金', '租赁押金'],
-  series: [
-    { name: '余额', data: [props.depositRenovation, props.depositRental] }
-  ]
-}))
+const depositColumnData = computed(() => {
+  const categories = props.depositItems.map(item => item.typeName)
+  const data = props.depositItems.map(item => (item.balance / 10000))
+  return {
+    categories,
+    series: [{ name: '余额', data }]
+  }
+})

 const depositColumnOpts = computed(() => ({
  color: ['#4D5DFA'],
@@ -34,22 +38,24 @@ const depositColumnOpts = computed(() => ({
  xAxis: {
    disableGrid: true,
    axisLineColor: '#EAEAEA',
+    dashLength: 4,
    fontColor: '#666',
    fontSize: 12
  },
  yAxis: {
+    showTitle: true,
    data: [{
-      title: '万元',
+      title: '金额（万）',
      min: 0,
-      max: 80,
      axisLineColor: '#EAEAEA',
      fontColor: '#666',
      fontSize: 12,
      titleFontSize: 12,
      titleFontColor: '#666'
    }],
-    splitLine: { show: true, lineStyle: { color: '#F2F2F2' } },
-    calibration: { step: 0.5 }
+    gridType: 'dash',
+    dashLength: 4,
+    gridColor: '#F2F2F2',
  },
  extra: {
    column: {
@@ -88,6 +94,16 @@ const depositColumnOpts = computed(() => ({
  .deposit-chart {
    width: 100%;
    height: 420rpx;
+    position: relative;
+    .deposit-empty-mask {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff;
+      .empty-text { font-size: 26rpx; color: #999; }
+    }
  }
 }
 </style>
--- a/wuye-manager-uniapp/pageSubPack/statistics/statistics.vue
+++ b/wuye-manager-uniapp/pageSubPack/statistics/statistics.vue
@@ -58,8 +58,7 @@
    <!-- 押金余额统计 -->
    <DepositCard
      :deposit-balance="depositBalance"
-      :deposit-renovation="depositRenovation"
-      :deposit-rental="depositRental"
+      :deposit-items="depositItems"
    />

    <!-- 巡检总览 -->
@@ -77,7 +76,7 @@ import FeeOverviewCard from './components/FeeOverviewCard.vue'
 import ParkingFeeCard from './components/ParkingFeeCard.vue'
 import DepositCard from './components/DepositCard.vue'
 import InspectionOverview from './components/InspectionOverview.vue'
-import { getManagedArea, getRate, getFeeSummary, getParkingFee } from '@/api/statisticsApi.js'
+import { getManagedArea, getRate, getFeeSummary, getParkingFee, getDepositBalance, getInspection } from '@/api/statisticsApi.js'



@@ -109,16 +108,15 @@ const parkingYearReceived = ref(0)
 const parkingArcbarPercent = ref(0)

 // 押金余额统计
-const depositBalance = ref('33322')
-const depositRenovation = ref(18)
-const depositRental = ref(23)
+const depositBalance = ref('0')
+const depositItems = ref([])

 // 巡检总览
 const inspectionList = ref([
-  { label: '巡检任务', value: 124, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-task.png' },
-  { label: '已完成', value: 98, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-done.png' },
-  { label: '已过期', value: 12, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-expire.png' },
-  { label: '待处理', value: 14, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-pending.png' }
+  { label: '巡检任务', value: 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-task.png' },
+  { label: '已完成', value: 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-done.png' },
+  { label: '已过期', value: 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-expire.png' },
+  { label: '待处理', value: 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-pending.png' }
 ])

 const switchTab = (tab) => {
@@ -134,6 +132,8 @@ const onProjectChange = (e) => {
  fetchRate(opt.value)
  fetchFeeSummary()
  fetchParkingFee(opt.value)
+  fetchDepositBalance(opt.value)
+  fetchInspection(opt.value)
 }

 const onFeeTypeChange = (opt) => {
@@ -169,19 +169,20 @@ const fetchRate = (villageId) => {
    }
  }).catch(() => {})
 }
-
+// 车位收费总览
 const fetchParkingFee = (villageId) => {
  getParkingFee({ villageId: villageId || '' }).then(res => {
    if (res.code === 200 && res.data) {
      const d = res.data
-      parkingCount.value = d.parkingCount || 0
-      parkingYearReceivable.value = d.receivableAmount || 0
-      parkingYearReceived.value = d.receivedAmount || 0
-      parkingArcbarPercent.value = d.receivedPercent != null ? d.receivedPercent / 100 : 0
+      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
    }
  }).catch(() => {})
 }

+// 收费总览
 const fetchFeeSummary = () => {
  getFeeSummary({
    villageId: selectedProject.value || '',
@@ -190,19 +191,21 @@ const fetchFeeSummary = () => {
  }).then(res => {
    if (res.code === 200 && res.data) {
      const d = res.data
-      arcbarPercent.value = d.receivedPercent != null ? d.receivedPercent / 100 : 0
+      arcbarPercent.value = Number(d.receivedPercent) || 0
      metricList.value = [
-        { label: '应收总额', value: d.receivableAmount != null ? d.receivableAmount.toFixed(2) : '0.00', yoy: formatRate(d.receivableYoyRate), mom: formatRate(d.receivableMomRate) },
-        { label: '实收总额', value: d.receivedAmount != null ? d.receivedAmount.toFixed(2) : '0.00', yoy: formatRate(d.receivedYoyRate), mom: formatRate(d.receivedMomRate) },
-        { label: '欠收总额', value: d.unpaidAmount != null ? d.unpaidAmount.toFixed(2) : '0.00', yoy: formatRate(d.unpaidYoyRate), mom: formatRate(d.unpaidMomRate) }
+        { label: '应收总额', value: (Number(d.receivableAmount) || 0).toFixed(2), yoy: formatRate(d.receivableYoyRate), mom: formatRate(d.receivableMomRate) },
+        { label: '实收总额', value: (Number(d.receivedAmount) || 0).toFixed(2), yoy: formatRate(d.receivedYoyRate), mom: formatRate(d.receivedMomRate) },
+        { label: '欠收总额', value: (Number(d.unpaidAmount) || 0).toFixed(2), yoy: formatRate(d.unpaidYoyRate), mom: formatRate(d.unpaidMomRate) }
      ]
    }
  }).catch(() => {})
 }

 const formatRate = (val) => {
-  if (val == null) return '-'
-  return (val >= 0 ? '+' : '') + val.toFixed(2) + '%'
+  if (val == null || val === '') return '-'
+  const num = Number(val)
+  if (isNaN(num)) return '-'
+  return (num >= 0 ? '+' : '') + num.toFixed(2) + '%'
 }

 const fetchFeeTypes = () => {
@@ -214,6 +217,30 @@ const fetchFeeTypes = () => {
    }
  }).catch(() => {})
 }
+// 押金余额统计
+const fetchDepositBalance = (villageId) => {
+  getDepositBalance({ villageId: villageId}).then(res => {
+    if (res.code === 200 && res.data) {
+      const d = res.data
+      depositBalance.value = d.totalBalance
+      depositItems.value = d.items || []
+    }
+  }).catch(() => {})
+}
+// 巡检总览
+const fetchInspection = (villageId) => {
+  getInspection({ villageId: villageId || '' }).then(res => {
+    if (res.code === 200 && res.data) {
+      const d = res.data
+      inspectionList.value = [
+        { label: '巡检任务', value: d.taskCount || 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-task.png' },
+        { label: '已完成', value: d.completedCount || 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-done.png' },
+        { label: '已过期', value: d.expiredCount || 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-expire.png' },
+        { label: '待处理', value: d.pendingCount || 0, icon: 'https://wuye.ckdzkj.com/images/imgs/inspection-pending.png' }
+      ]
+    }
+  }).catch(() => {})
+}

 onShow(() => {
  Promise.all([fetchVillageList(), fetchFeeTypes()]).then(() => {
@@ -221,6 +248,8 @@ onShow(() => {
    fetchRate(selectedProject.value)
    fetchFeeSummary()
    fetchParkingFee(selectedProject.value)
+    fetchDepositBalance(selectedProject.value)
+    fetchInspection(selectedProject.value)
  })
 })
 </script>