zhouyanli/property-manager-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhouyanli
2026-08-06 18:03:06 +08:00
parent d9ede93745
commit e106ce523d
28 changed files with 12943 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
wuye-manager-uniapp/pageSubPack/statistics/components/DepositCard.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<view class="deposit-card">
<view class="deposit-card-header">
<text class="deposit-title">押金余额统计</text>
<text class="deposit-balance">余额合计{{ depositBalance }}元</text>
</view>
<view class="deposit-chart">
<qiun-data-charts type="column" :chartData="depositColumnData" :opts="depositColumnOpts" />
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
depositBalance: { type: String, default: '0' },
depositRenovation: { type: Number, default: 0 },
depositRental: { type: Number, default: 0 }
})
const depositColumnData = computed(() => ({
categories: ['装修押金', '租赁押金'],
series: [
{ name: '余额', data: [props.depositRenovation, props.depositRental] }
]
}))
const depositColumnOpts = computed(() => ({
color: ['#4D5DFA'],
padding: [20, 10, 0, 10],
enableScroll: false,
legend: { show: false },
xAxis: {
disableGrid: true,
axisLineColor: '#EAEAEA',
fontColor: '#666',
fontSize: 12
},
yAxis: {
data: [{
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 }
},
extra: {
column: {
type: 'group',
width: 30,
activeBgColor: '#4D5DFA',
activeBgOpacity: 0.08,
dataLabel: {
show: true,
position: 'top',
fontSize: 12,
color: '#333',
formatter: (val) => val.toFixed(2)
}
}
}
}))
</script>
<style scoped lang="scss">
.deposit-card {
margin-top: 20rpx;
background: #fff;
border-radius: 8rpx;
padding: 30rpx 24rpx;
.deposit-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.deposit-title { font-size: 32rpx; font-weight: 600; color: #222; }
.deposit-balance { font-size: 28rpx; color: #333; }
}
.deposit-chart {
width: 100%;
height: 420rpx;
}
}
</style>

169
wuye-manager-uniapp/pageSubPack/statistics/components/FeeOverviewCard.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view class="fee-card">
<view class="fee-card-header">
<text class="fee-title">收费总览</text>
<picker mode="selector" :range="feeTypeOptions" range-key="label" @change="onFeeTypeChange">
<view class="fee-type-picker">
<text>{{ selectedFeeTypeLabel || '全部收费类型' }}</text>
<text class="filter-arrow">&#9660;</text>
</view>
</picker>
</view>
<view class="fee-tabs">
<view class="fee-tab-item" :class="{ active: activeTab === 'day' }" @click="switchTab('day')">本日</view>
<view class="fee-tab-item" :class="{ active: activeTab === 'month' }" @click="switchTab('month')">本月</view>
<view class="fee-tab-item" :class="{ active: activeTab === 'year' }" @click="switchTab('year')">本年</view>
</view>
<view class="fee-content">
<view class="fee-ring">
<qiun-data-charts type="arcbar" :chartData="arcbarData" :opts="arcbarOpts" />
</view>
<view class="fee-metrics">
<view class="metric-row" v-for="item in metricList" :key="item.label">
<view class="metric-info">
<text class="metric-label">{{ item.label }}(元)</text>
<text class="metric-num">{{ item.value }}</text>
</view>
<view class="metric-compare">
<text class="compare-line">同比 <text class="compare-num" :class="compareClass(item.yoy)">{{ item.yoy }}</text></text>
<text class="compare-line">环比 <text class="compare-num" :class="compareClass(item.mom)">{{ item.mom }}</text></text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
feeTypeOptions: { type: Array, default: () => [] },
selectedFeeTypeLabel: { type: String, default: '全部收费类型' },
activeTab: { type: String, default: 'day' },
arcbarPercent: { type: Number, default: 0 },
metricList: { type: Array, default: () => [] }
})
const emit = defineEmits(['tab-change', 'fee-type-change'])
const arcbarData = computed(() => ({
series: [{ name: '实收占比', data: props.arcbarPercent }]
}))
const arcbarOpts = computed(() => ({
color: ["#4D5DFA"],
title: { name: Math.round(props.arcbarPercent * 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'
}
}
}))
const compareClass = (val) => {
if (val && val.startsWith('-')) return 'down'
if (val && val.startsWith('+')) return 'up'
return ''
}
const switchTab = (tab) => { emit('tab-change', tab) }
const onFeeTypeChange = (e) => {
const opt = props.feeTypeOptions[e.detail.value]
emit('fee-type-change', opt)
}
</script>
<style scoped lang="scss">
.fee-card {
margin-top: 20rpx;
background: #fff;
border-radius: 8rpx;
padding: 30rpx 24rpx;
.fee-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
.fee-title { font-size: 32rpx; font-weight: 600; color: #222; }
.fee-type-picker { display: flex; align-items: center; font-size: 24rpx; color: #666; border: 2rpx solid #DCDFE6; border-radius: 6rpx; padding: 8rpx 16rpx; }
.filter-arrow { font-size: 18rpx; color: #999; margin-left: 6rpx; }
}
.fee-tabs {
display: flex;
.fee-tab-item {
text-align: center;
padding: 14rpx 32rpx;
font-size: 26rpx;
color: #666;
position: relative;
&.active {
color: #4D5DFA;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: -2rpx;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background: #4D5DFA;
border-radius: 2rpx;
}
}
}
}
.fee-content {
display: flex;
align-items: center;
margin-top: 30rpx;
.fee-ring {
width: 240rpx;
height: 180rpx;
flex-shrink: 0;
}
.fee-metrics {
flex: 1;
display: flex;
flex-direction: column;
gap: 20rpx;
margin-left: 20rpx;
.metric-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.metric-info {
display: flex;
flex-direction: column;
.metric-label { font-size: 28rpx; color: #666; }
.metric-num { font-size: 32rpx; color: #333; font-weight: 600; margin-top: 2rpx; }
}
.metric-compare {
display: flex;
flex-direction: column;
align-items: flex-end;
.compare-line { font-size: 24rpx; color: #666; line-height: 1.7; }
.compare-num { font-weight: 600; &.up { color: #67C23A; } &.down { color: #F56C6C; } }
}
}
}
}
</style>

69
wuye-manager-uniapp/pageSubPack/statistics/components/InspectionOverview.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<view class="inspection-section">
<view class="inspection-title">巡检总览</view>
<view class="inspection-grid">
<view class="inspection-item" v-for="item in inspectionList" :key="item.label">
<view class="inspection-item-left">
<text class="inspection-item-label">{{ item.label }}</text>
<text class="inspection-item-num">{{ item.value }}个</text>
</view>
<view class="inspection-item-right">
<image class="inspection-icon" :src="item.icon" mode="aspectFit" />
</view>
</view>
</view>
</view>
</template>
<script setup>
defineProps({
inspectionList: { type: Array, default: () => [] }
})
</script>
<style scoped lang="scss">
.inspection-section {
margin: 20rpx 0;
.inspection-title {
font-size: 32rpx;
font-weight: 600;
color: #222;
margin-bottom: 20rpx;
}
.inspection-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.inspection-item {
width: calc(50% - 10rpx);
background: #fff;
border-radius: 8rpx;
padding: 30rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.inspection-item-left {
display: flex;
flex-direction: column;
.inspection-item-label { font-size: 28rpx; color: #666; margin-bottom: 6rpx; }
.inspection-item-num { font-size: 32rpx; color: #333; font-weight: 600; }
}
.inspection-item-right {
width: 64rpx;
height: 64rpx;
flex-shrink: 0;
.inspection-icon {
width: 100%;
height: 100%;
}
}
}
}
}
</style>

113
wuye-manager-uniapp/pageSubPack/statistics/components/ParkingFeeCard.vue Normal file
View File

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