From 9ddf3836a024734d0976774f5b973cb0303f2e32 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期二, 20 五月 2025 23:32:36 +0800
Subject: [PATCH] fix
---
H5/pages/statistics/index.vue | 186 ++++++++++++++++++++++-----------------------
1 files changed, 91 insertions(+), 95 deletions(-)
diff --git a/H5/pages/statistics/index.vue b/H5/pages/statistics/index.vue
index 2774d7d..38c299f 100644
--- a/H5/pages/statistics/index.vue
+++ b/H5/pages/statistics/index.vue
@@ -214,7 +214,7 @@
<view class="fs-35 font-bold mt-38 ml-27"> 问题类型排名 </view>
<view class="ml-29 mr-29 mt-27 shadow1 pt-31 border2 pl-38 pr-38 br-15">
<uni-data-select v-model="value1" :localdata="range"></uni-data-select>
- <view class="fs-23">
+ <view class="fs-23 type-rank-list-scroll">
<view class="flex a-center mb-38" v-for="(item, idx) in typeRankList" :key="idx">
<view class="w-130 color3">{{ item.typeName }}</view>
<u-line-progress
@@ -244,40 +244,49 @@
<view class="mb-27">
<view class="flex a-center j-between mb-13">
<text class="fs-23">非常满意</text>
- <text class="fs-23 color12">45%</text>
+ <text class="fs-23 color12">{{ greatSatisfactionRate }}%</text>
</view>
<view class="progress-bar">
<view
class="progress-inner very-satisfied"
- style="width: 45%"
+ :style="{width: greatSatisfactionRate + '%'}"
></view>
</view>
</view>
<view class="mb-27">
<view class="flex a-center j-between mb-13">
<text class="fs-23">满意</text>
- <text class="fs-23 color12">20%</text>
+ <text class="fs-23 color12">{{ satisfactionRate }}%</text>
</view>
<view class="progress-bar">
- <view class="progress-inner satisfied" style="width: 20%"></view>
+ <view
+ class="progress-inner satisfied"
+ :style="{width: satisfactionRate + '%'}"
+ ></view>
</view>
</view>
<view class="mb-27">
<view class="flex a-center j-between mb-13">
<text class="fs-23">一般</text>
- <text class="fs-23 color12">30%</text>
+ <text class="fs-23 color12">{{ generalSatisfactionRate }}%</text>
</view>
<view class="progress-bar">
- <view class="progress-inner normal" style="width: 30%"></view>
+ <view
+ class="progress-inner normal"
+ :style="{width: generalSatisfactionRate + '%'}"
+ ></view>
</view>
</view>
<view class="mb-27">
<view class="flex a-center j-between mb-13">
<text class="fs-23">不满意</text>
- <text class="fs-23 color12">5%</text>
+ <text class="fs-23 color12">{{ dissatisfactionRate }}%</text>
</view>
<view class="progress-bar">
- <view class="progress-inner unsatisfied" style="width: 5%"></view>
+ <view
+ class="progress-inner unsatisfied"
+ :style="{width: dissatisfactionRate + '%'}"
+ ></view>
</view>
</view>
</view>
@@ -302,13 +311,13 @@
<view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold"
>请选择服务社区</view
>
- <view
+ <!-- <view
class="flex a-center j-between txt-center py-10 fs-27 font-bold bgColor1"
>
<view v-if="hasTier(2)" class="flex1">区县</view>
<view v-if="hasTier(3)" class="flex1">街道</view>
<view v-if="hasTier(4)" class="flex1">社区</view>
- </view>
+ </view> -->
<view class="mb-20">
<picker-view
:value="value"
@@ -358,6 +367,7 @@
getStaticsPartOne,
getStaticsPartTwo,
getStaticsPartThree,
+ getStaticsPartFour
} from "./service.js";
export default {
data() {
@@ -387,85 +397,8 @@
rateChart: null,
tabs: ["近7天", "近15天", "近30天"],
currentTab: 0,
- chartData: {
- dates: [
- "2025\n04.17",
- "2025\n04.18",
- "2025\n04.19",
- "2025\n04.20",
- "2025\n04.21",
- "2025\n04.22",
- "2025\n04.23",
- ],
- demands: [80, 170, 240, 70, 130, 90, 160],
- completed: [40, 130, 200, 30, 90, 50, 110],
- },
- rateData: [
- {
- value: 45,
- name: "非常满意",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
- {
- offset: 0,
- color: "#FF8064",
- },
- {
- offset: 1,
- color: "#FF4934",
- },
- ]),
- },
- },
- {
- value: 20,
- name: "满意",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
- {
- offset: 0,
- color: "#05DEE1",
- },
- {
- offset: 1,
- color: "#02BAC0",
- },
- ]),
- },
- },
- {
- value: 30,
- name: "一般",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
- {
- offset: 0,
- color: "#7DC4FF",
- },
- {
- offset: 1,
- color: "#4791FF",
- },
- ]),
- },
- },
- {
- value: 5,
- name: "不满意",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
- {
- offset: 0,
- color: "#FFD364",
- },
- {
- offset: 1,
- color: "#FEA834",
- },
- ]),
- },
- },
- ],
+ chartData: null,
+ rateData: [],
statisticsData: {
satisfaction: {
total: 0,
@@ -502,6 +435,10 @@
currentAreaId: '',
currentTier: -1,
typeRankList: [],
+ greatSatisfactionRate: 0,
+ satisfactionRate: 0,
+ generalSatisfactionRate: 0,
+ dissatisfactionRate: 0,
};
},
onLoad() {
@@ -524,11 +461,14 @@
this.getStatisticsData("", -1);
this.getChartData(1);
this.getTypeRankData();
+ this.getRateData();
},
//初始化区域数据
initRegionData() {
getRegionTree().then((res) => {
if (res.code === 200) {
+ console.log(JSON.stringify(res.data));
+
this.regionTree = [{name: '全部', id: 'all', tier: 2, children: []}, ...(res.data || [])];
this.value = [0, 0, 0];
this.confirmValue = [0, 0, 0];
@@ -538,6 +478,7 @@
this.getStatisticsData("", -1);
this.getChartData(1);
this.getTypeRankData();
+ this.getRateData();
}
});
},
@@ -635,6 +576,7 @@
this.getStatisticsData(id, tier);
this.getChartData(this.currentTab + 1);
this.getTypeRankData();
+ this.getRateData();
},
// 切换社区
bindChange(e) {
@@ -656,13 +598,12 @@
this.getChartData(index + 1);
},
initChart() {
- // 在 H5 端使用 document.getElementById
- // 在小程序端使用 this.$refs.chartRef
const chartDom = document.getElementById("chart") || this.$refs.chartRef;
this.chart = echarts.init(chartDom);
- this.updateChart();
+ if (this.chartData) this.updateChart();
},
updateChart() {
+ if (!this.chartData) return;
const option = {
color: ["#FF7B7B", "#FFB75B"],
tooltip: {
@@ -700,7 +641,7 @@
fontSize: uni.upx2px(19),
lineHeight: uni.upx2px(23),
formatter: function (value) {
- return value.split("\\n").join("\n");
+ return value.split("\n").join("\n");
},
},
},
@@ -949,16 +890,66 @@
if (res.code === 200 && Array.isArray(res.data)) {
// 计算最大值
const max = Math.max(...res.data.map(item => item.allTotal), 1);
+ const gradients = [
+ 'linear-gradient(270deg, #FF4934 0%, #FF8064 100%)',
+ 'linear-gradient(270deg, #FEA834 0%, #FFD364 100%)',
+ 'linear-gradient(270deg, #02BAC0 0%, #05DEE1 100%)',
+ ];
+ const defaultGradient = 'linear-gradient(270deg, #4791FF 0%, #7DC4FF 100%)';
// 处理数据，增加percent字段
this.typeRankList = res.data.map((item, idx) => ({
typeName: item.name,
count: item.allTotal,
percent: Math.round(item.allTotal / max * 100),
- gradientColor: 'linear-gradient(270deg, #FF4934 0%, #FF8064 100%)'
+ gradientColor: gradients[idx] || defaultGradient
}));
}
} catch (e) {
console.error('获取问题类型排名失败', e);
+ }
+ },
+ async getRateData() {
+ try {
+ const res = await getStaticsPartFour({
+ areaId: this.currentAreaId,
+ tier: this.currentTier
+ });
+ console.log(JSON.stringify(res.data));
+ if (res.code === 200 && res.data) {
+ // 饼图数据
+ const values = [
+ res.data.greatSatisfactionRate ?? 0,
+ res.data.satisfactionRate ?? 0,
+ res.data.generalSatisfactionRate ?? 0,
+ res.data.dissatisfactionRate ?? 0
+ ];
+ const names = ['非常满意', '满意', '一般', '不满意'];
+ const gradients = [
+ ['#FF8064', '#FF4934'],
+ ['#05DEE1', '#02BAC0'],
+ ['#7DC4FF', '#4791FF'],
+ ['#FFD364', '#FEA834']
+ ];
+ if (values.every(v => v === 0)) values[0] = 1; // 避免全为0
+ this.rateData = values.map((v, idx) => ({
+ value: v,
+ name: names[idx],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { offset: 0, color: gradients[idx][0] },
+ { offset: 1, color: gradients[idx][1] }
+ ])
+ }
+ }));
+ // 进度条数据
+ this.greatSatisfactionRate = values[0];
+ this.satisfactionRate = values[1];
+ this.generalSatisfactionRate = values[2];
+ this.dissatisfactionRate = values[3];
+ this.updateRateChart();
+ }
+ } catch (e) {
+ console.error('获取评价占比失败', e);
}
},
},
@@ -1193,4 +1184,9 @@
font-size: 35rpx;
color: #fff;
}
+
+.type-rank-list-scroll {
+ max-height: 500rpx;
+ overflow-y: auto;
+}
</style>
--
Gitblit v1.7.1