收费总览页面

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>