From 737d39e3d14a77174d2897301b94a0bd4b822484 Mon Sep 17 00:00:00 2001 From: woody Date: Wed, 3 Sep 2025 18:15:00 +0800 Subject: [PATCH] =?UTF-8?q?feat(performaceDistribution):=20=E6=9C=88?= =?UTF-8?q?=E4=BB=BD=E9=80=89=E6=8B=A9=E9=80=BB=E8=BE=91=E5=AE=8C=E5=96=84?= =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=A9=BA=E6=80=81=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../distribution/performanceDistribution.vue | 186 +++++++++++------- 1 file changed, 115 insertions(+), 71 deletions(-) diff --git a/components/distribution/performanceDistribution.vue b/components/distribution/performanceDistribution.vue index 3cd2a94..43b2acc 100644 --- a/components/distribution/performanceDistribution.vue +++ b/components/distribution/performanceDistribution.vue @@ -77,11 +77,7 @@ - + @@ -132,14 +128,22 @@ > 加载中... + + - - + + + + + + 暂无业绩数据 + {{ whatYear }}年{{ whatMounth }}月暂时没有业绩分布数据 - 📊 - 暂无业绩数据 + + + 点击刷新 @@ -168,6 +172,8 @@ export default { yjTypeList: [], yearShow: false, whatYear: '', + currentYear: new Date().getFullYear(), // 当前真实年份 + currentMonth: new Date().getMonth() + 1, // 当前真实月份 selYearList: [ { value: 0, @@ -178,56 +184,7 @@ export default { label: new Date().getFullYear(), }, ], - mounthList: [ - { - value: '01', - label: 1 + '月', - }, - { - value: '02', - label: 2 + '月', - }, - { - value: '03', - label: 3 + '月', - }, - { - value: '04', - label: 4 + '月', - }, - { - value: '05', - label: 5 + '月', - }, - { - value: '06', - label: 6 + '月', - }, - { - value: '07', - label: 7 + '月', - }, - { - value: '08', - label: 8 + '月', - }, - { - value: '09', - label: 9 + '月', - }, - { - value: '10', - label: 10 + '月', - }, - { - value: '11', - label: 11 + '月', - }, - { - value: '12', - label: 12 + '月', - }, - ], + mounthList: [], // 改为动态生成 // 列表数据相关 specialData: null, // 特殊数据(第一页第一条) @@ -245,19 +202,47 @@ export default { }, methods: { changeYear(e) { - this.whatYear = this.selYearList[e.detail.value].label + const selectedYear = this.selYearList[e.detail.value].label + this.whatYear = selectedYear + + // 生成新的月份列表 + this.generateMonthList(selectedYear) + + // 如果从上一年切换到当年,且当前选中月份大于真实当前月,则调整为当前月 + if (selectedYear === this.currentYear) { + const currentMonthNum = parseInt(this.whatMounth) + if (currentMonthNum > this.currentMonth) { + this.whatMounth = this.currentMonth.toString().padStart(2, '0') + } + } + this.refresh() }, bindPickerChange(e) { - this.whatMounth = e.detail.value + // 使用月份列表中的value值 + this.whatMounth = this.mounthList[e.detail.value].value this.refresh() }, // 获取当前年/月 initDate() { - const month = new Date().getMonth() + 1 - this.whatMounth = month.toString().padStart(2, '0') - this.whatYear = new Date().getFullYear() + this.whatMounth = this.currentMonth.toString().padStart(2, '0') + this.whatYear = this.currentYear + // 初始化月份列表 + this.generateMonthList(this.currentYear) + }, + + // 动态生成月份列表 + generateMonthList(year) { + const maxMonth = year === this.currentYear ? this.currentMonth : 12 + this.mounthList = [] + + for (let i = 1; i <= maxMonth; i++) { + this.mounthList.push({ + value: i.toString().padStart(2, '0'), + label: i + '月', + }) + } }, // 获取月度业绩数据 @@ -347,7 +332,7 @@ export default { // 全宽日期选择器样式 .date-selector-container { - padding: 20rpx; + padding: 10rpx 20rpx 10rpx; } .date-selector-full { @@ -441,7 +426,7 @@ export default { /* 业绩分布列表样式 */ .performance-list-container { - padding: 20rpx; + padding: 10rpx 20rpx 0; padding-bottom: 60rpx; background-color: #f5f7fa; min-height: 100vh; @@ -674,20 +659,79 @@ export default { font-size: 20rpx; } +/* 空状态容器样式 */ +.empty-state-container { + background: #ffffff; + border-radius: 16rpx; + margin: 0; + box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); +} + .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 80rpx 40rpx; + padding: 100rpx 40rpx 80rpx; gap: 20rpx; } .empty-icon { - font-size: 80rpx; - opacity: 0.5; + margin-bottom: 16rpx; + opacity: 0.6; + animation: float 3s ease-in-out infinite; } +.empty-title { + color: #333333; + font-size: 28rpx; + font-weight: 600; + margin-bottom: 8rpx; +} + +.empty-desc { + color: #666666; + font-size: 24rpx; + text-align: center; + line-height: 1.5; + margin-bottom: 16rpx; +} + +.empty-action { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + padding: 12rpx 24rpx; + background: rgba(0, 91, 172, 0.1); + border-radius: 20rpx; + border: 1rpx solid rgba(0, 91, 172, 0.2); + transition: all 0.3s ease; +} + +.empty-action:active { + background: rgba(0, 91, 172, 0.15); + transform: scale(0.98); +} + +.refresh-text { + color: #005bac; + font-size: 22rpx; + font-weight: 500; +} + +/* 浮动动画 */ +@keyframes float { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-8rpx); + } +} + +/* 旧的空状态样式保留(以防其他地方使用) */ .empty-text { color: #999999; font-size: 24rpx;