From e1b782bbac430d8e01d43d5f610a46e4a29f661e Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期二, 20 五月 2025 21:39:41 +0800
Subject: [PATCH] feat
---
H5/pages/statistics/index.vue | 2025 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 1,167 insertions(+), 858 deletions(-)
diff --git a/H5/pages/statistics/index.vue b/H5/pages/statistics/index.vue
index 7fe4597..2774d7d 100644
--- a/H5/pages/statistics/index.vue
+++ b/H5/pages/statistics/index.vue
@@ -1,179 +1,166 @@
- <template>
- <view class="content">
- <view v-if="userInfo.isAdmin == 1" class="flex a-center pl-31 pr-31 fs-31 color1 pt-38">
- <text class="mr-15">查看范围：</text>
- <view
- class="h-77 flex a-center j-between flex1 pl-31 pr-23 border1 br-15 bgColor1" :class="!address && 'color2'">
- <view @click.top="selectPopup=true" class="flex1">
- {{ address || '全部' }}
- </view>
- <u-icon class="shrink0" v-if="address" @click="clearAddress" name="close-circle"></u-icon>
- <image v-else src="/static/down@2x.png" mode="aspectFill" class="w-31 h-31 shrink0"></image>
- </view>
- </view>
- <view class="fs-35 font-bold pt-38 ml-27">
- 处理满意率
- </view>
- <view class="ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19 pb-35">
- <view class="mt-19 flex1">
- <view class="flex a-center">
- <view class="w-12 h-12 br-6 border3"></view>
- <view class="fs-23 ml-15 color3">
- 总体满意率
- </view>
- </view>
- <view class="fs-46 ml-27 mt-12 font-bold">
- 77%
- </view>
- </view>
- <view class="flex1 flex j-between ml-50">
- <view class="fs-23 mt-42 txt-center">
- <view class="color6">
- 本月
- </view>
- <view class="fs-27 font-bold color5 mt-2">
- 88%
- </view>
- </view>
- <view class="fs-23 mt-44">
- <view class="color6">
- 同比上月
- </view>
- <view class="txt-aligin-r color4 font-bold mt-4">
- +12%
- </view>
- </view>
- </view>
- </view>
- <view class="fs-35 font-bold mt-38 ml-27">
- 诉求单统计
- </view>
- <view class="flex j-between a-center pl-29 pr-29 mt-27">
- <view class="pl-19 pr-21 shadow1 border2 pt-19 pb-42 flex1 br-15">
- <view class="flex a-center">
- <view class="w-12 h-12 br-6 border3"></view>
- <view class="fs-23 ml-15 color3">
- 诉求单量总计
- </view>
- </view>
- <view class="fs-46 mt-12 font-bold ml-27">
- 448451
- </view>
- <view class="flex j-between mt-21">
- <view class="fs-23">
- <view class="">
- 本月
- </view>
- <view class="fs-27 font-bold color3 mt-2">
- 4448
- </view>
- </view>
- <view class="fs-23">
- <view class="">
- 同比上月
- </view>
- <view class="font-bold color8 txt-aligin-r mt-4">
- -12%
- </view>
- </view>
- </view>
- </view>
- <view class="pl-19 pr-21 shadow1 border2 pt-19 pb-42 flex1 ml-31 br-15">
- <view class="flex a-center">
- <view class="w-12 h-12 br-6 border3"></view>
- <view class="fs-23 ml-15 color3">
- 平均处理时间(天)
- </view>
- </view>
- <view class="fs-46 mt-12 font-bold ml-27">
- 3.2
- </view>
- <view class="flex j-between mt-21">
- <view class="fs-23">
- <view class="">
- 本月
- </view>
- <view class="fs-27 font-bold color3 mt-2">
- 2.2
- </view>
- </view>
- <view class="fs-23">
- <view class="">
- 同比上月
- </view>
- <view class="font-bold color4 txt-aligin-r mt-4">
- +12%
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="flex mt-27 gap25 pl-29 pr-29">
- <view class="flex1 h-154 bgColor2 border4 shadow2 br-19 txt-center">
- <view class="mt-37 fs-35 color4 font-bold">
- 4521
- </view>
- <view class="fs-23 mt-8 color3">
- 正在办理
- </view>
- </view>
- <view class="flex1 h-154 bgColor3 border4 shadow2 br-19 txt-center">
- <view class="mt-37 fs-35 color9 font-bold">
- 321
- </view>
- <view class="fs-23 mt-8 color3">
- 审核中
- </view>
- </view>
- <view class="flex1 h-154 bgColor4 border4 shadow2 br-19 txt-center">
- <view class="mt-37 fs-35 color10 font-bold">
- 6850
- </view>
- <view class="fs-23 mt-8 color3">
- 延期办理
- </view>
- </view>
- <view class="flex1 h-154 bgColor5 border4 shadow2 br-19 txt-center">
- <view class="mt-37 fs-35 color11 font-bold">
- 8451
- </view>
- <view class="fs-23 mt-8 color3">
- 已办结
- </view>
- </view>
- </view>
- <view class="pb-35 ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19">
- <view class="mt-19 flex1">
- <view class="flex a-center">
- <view class="w-12 h-12 br-6 border3"></view>
- <view class="fs-23 ml-15 color3">
- 超时办理
- </view>
- </view>
- <view class="fs-46 ml-27 mt-12 font-bold">
- 6850
- </view>
- </view>
- <view class="flex1 flex j-between ml-50">
- <view class="fs-23 mt-42 txt-center">
- <view class="color6">
- 本月
- </view>
- <view class="fs-27 font-bold color5 mt-2">
- 4448
- </view>
- </view>
- <view class="fs-23 mt-44">
- <view class="color6">
- 同比上月
- </view>
- <view class="txt-aligin-r color4 font-bold mt-4">
- +12%
- </view>
- </view>
- </view>
- </view>
- <view class="pb-35 ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19">
+<template>
+ <view class="content">
+ <view
+ v-if="userInfo.isAdmin == 1"
+ class="flex a-center pl-31 pr-31 fs-31 color1 pt-38"
+ >
+ <text class="mr-15">查看范围：</text>
+ <view
+ class="h-77 flex a-center j-between flex1 pl-31 pr-23 border1 br-15 bgColor1"
+ :class="!address && 'color2'"
+ >
+ <view @click.top="selectPopup = true" class="flex1">
+ {{ address || "全部" }}
+ </view>
+ <u-icon
+ class="shrink0"
+ v-if="address"
+ @click="clearAddress"
+ name="close-circle"
+ ></u-icon>
+ <image
+ v-else
+ src="/static/down@2x.png"
+ mode="aspectFill"
+ class="w-31 h-31 shrink0"
+ ></image>
+ </view>
+ </view>
+ <view class="fs-35 font-bold pt-38 ml-27"> 处理满意率 </view>
+ <view
+ class="ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19 pb-35"
+ >
+ <view class="mt-19 flex1">
+ <view class="flex a-center">
+ <view class="w-12 h-12 br-6 border3"></view>
+ <view class="fs-23 ml-15 color3"> 总体满意率 </view>
+ </view>
+ <view class="fs-46 ml-27 mt-12 font-bold">
+ {{ statisticsData.satisfaction.total }}%
+ </view>
+ </view>
+ <view class="flex1 flex j-between ml-50">
+ <view class="fs-23 mt-42 txt-center">
+ <view class="color6"> 本月 </view>
+ <view class="fs-27 font-bold color5 mt-2">
+ {{ statisticsData.satisfaction.month }}%
+ </view>
+ </view>
+ <view class="fs-23 mt-44">
+ <view class="color6"> 同比上月 </view>
+ <view class="txt-aligin-r color4 font-bold mt-4">
+ {{ statisticsData.satisfaction.compare > 0 ? "+" : ""
+ }}{{ statisticsData.satisfaction.compare }}%
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="fs-35 font-bold mt-38 ml-27"> 诉求单统计 </view>
+ <view class="flex j-between a-center pl-29 pr-29 mt-27">
+ <view class="pl-19 pr-21 shadow1 border2 pt-19 pb-42 flex1 br-15">
+ <view class="flex a-center">
+ <view class="w-12 h-12 br-6 border3"></view>
+ <view class="fs-23 ml-15 color3"> 诉求单量总计 </view>
+ </view>
+ <view class="fs-46 mt-12 font-bold ml-27">
+ {{ statisticsData.demands.total }}
+ </view>
+ <view class="flex j-between mt-21">
+ <view class="fs-23">
+ <view class=""> 本月 </view>
+ <view class="fs-27 font-bold color3 mt-2">
+ {{ statisticsData.demands.month }}
+ </view>
+ </view>
+ <view class="fs-23">
+ <view class=""> 同比上月 </view>
+ <view class="font-bold color8 txt-aligin-r mt-4">
+ {{ statisticsData.demands.compare > 0 ? "+" : ""
+ }}{{ statisticsData.demands.compare }}
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="pl-19 pr-21 shadow1 border2 pt-19 pb-42 flex1 ml-31 br-15">
+ <view class="flex a-center">
+ <view class="w-12 h-12 br-6 border3"></view>
+ <view class="fs-23 ml-15 color3"> 平均处理时间(天) </view>
+ </view>
+ <view class="fs-46 mt-12 font-bold ml-27">
+ {{ statisticsData.processTime.total }}
+ </view>
+ <view class="flex j-between mt-21">
+ <view class="fs-23">
+ <view class=""> 本月 </view>
+ <view class="fs-27 font-bold color3 mt-2">
+ {{ statisticsData.processTime.month }}
+ </view>
+ </view>
+ <view class="fs-23">
+ <view class=""> 同比上月 </view>
+ <view class="font-bold color4 txt-aligin-r mt-4">
+ {{ statisticsData.processTime.compare > 0 ? "+" : ""
+ }}{{ statisticsData.processTime.compare }}
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="flex mt-27 gap25 pl-29 pr-29">
+ <view class="flex1 h-154 bgColor2 border4 shadow2 br-19 txt-center">
+ <view class="mt-37 fs-35 color4 font-bold">
+ {{ statisticsData.status.processing }}
+ </view>
+ <view class="fs-23 mt-8 color3"> 正在办理 </view>
+ </view>
+ <view class="flex1 h-154 bgColor3 border4 shadow2 br-19 txt-center">
+ <view class="mt-37 fs-35 color9 font-bold">
+ {{ statisticsData.status.reviewing }}
+ </view>
+ <view class="fs-23 mt-8 color3"> 审核中 </view>
+ </view>
+ <view class="flex1 h-154 bgColor4 border4 shadow2 br-19 txt-center">
+ <view class="mt-37 fs-35 color10 font-bold">
+ {{ statisticsData.status.delayed }}
+ </view>
+ <view class="fs-23 mt-8 color3"> 延期办理 </view>
+ </view>
+ <view class="flex1 h-154 bgColor5 border4 shadow2 br-19 txt-center">
+ <view class="mt-37 fs-35 color11 font-bold">
+ {{ statisticsData.status.completed }}
+ </view>
+ <view class="fs-23 mt-8 color3"> 已办结 </view>
+ </view>
+ </view>
+ <view
+ class="pb-35 ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19"
+ >
+ <view class="mt-19 flex1">
+ <view class="flex a-center">
+ <view class="w-12 h-12 br-6 border3"></view>
+ <view class="fs-23 ml-15 color3"> 超时办理 </view>
+ </view>
+ <view class="fs-46 ml-27 mt-12 font-bold">
+ {{ statisticsData.overtime.total }}
+ </view>
+ </view>
+ <view class="flex1 flex j-between ml-50">
+ <view class="fs-23 mt-42 txt-center">
+ <view class="color6"> 本月 </view>
+ <view class="fs-27 font-bold color5 mt-2">
+ {{ statisticsData.overtime.month }}
+ </view>
+ </view>
+ <view class="fs-23 mt-44">
+ <view class="color6"> 同比上月 </view>
+ <view class="txt-aligin-r color4 font-bold mt-4">
+ {{ statisticsData.overtime.compare > 0 ? "+" : ""
+ }}{{ statisticsData.overtime.compare }}
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- <view class="pb-35 ml-29 mr-29 border2 br-15 mt-27 shadow1 flex j-between pl-19 pr-19">
<view class="mt-19 flex1">
<view class="flex a-center">
<view class="w-12 h-12 br-6 border3"></view>
@@ -203,685 +190,1007 @@
</view>
</view>
</view>
- </view>
- <view class="mt-27 shadow1 border2 ml-29 mr-29 pt-31 br-15" style="height: 511rpx;">
- <view class="flex mlr-o tabs mb-40">
- <view v-for="(item, index) in tabs" :key="index"
- :class="['tab-item', currentTab === index ? 'active' : '']" @click="handleTabClick(index)">
- {{item}}
- </view>
- </view>
- <view ref="chartRef" id="chart" style="width: 100%; height: 405rpx;"></view>
- </view>
- <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="flex a-center mb-38">
- <view class="w-130 color3">
- 教育
- </view>
- <u-line-progress :percentage="95" inactiveColor="#EEEEEE"
- :activeColor="'linear-gradient(270deg, #FF4934 0%, #FF8064 100%)'" height="38rpx">
- <text class="u-percentage-slot pr-19 fs-23">248</text>
- </u-line-progress>
- </view>
- <view class="flex a-center mb-38">
- <view class="w-130 color3">
- 就业
- </view>
- <u-line-progress :percentage="75" inactiveColor="#EEEEEE"
- :activeColor="'linear-gradient(270deg, #FEA834 0%, #FFD364 100%)'" height="38rpx">
- <text class="u-percentage-slot pr-19 fs-23">200</text>
- </u-line-progress>
- </view>
- <view class="flex a-center mb-38">
- <view class="w-130 color3">
- 医疗
- </view>
- <u-line-progress :percentage="55" inactiveColor="#EEEEEE"
- :activeColor="'linear-gradient(270deg, #02BAC0 0%, #05DEE1 100%)'" height="38rpx">
- <text class="u-percentage-slot pr-19 fs-23">174</text>
- </u-line-progress>
- </view>
- <view class="flex a-center mb-38">
- <view class="w-130 color3">
- 住房
- </view>
- <u-line-progress :percentage="35" inactiveColor="#EEEEEE"
- :activeColor="'linear-gradient(270deg, #4791FF 0%, #7DC4FF 100%)'" height="38rpx">
- <text class="u-percentage-slot pr-19 fs-23">132</text>
- </u-line-progress>
- </view>
- <view class="flex a-center mb-38">
- <view class="w-130 color3">
- 养老
- </view>
- <u-line-progress :percentage="15" inactiveColor="#EEEEEE"
- :activeColor="'linear-gradient(270deg, #4791FF 0%, #7DC4FF 100%)'" height="38rpx">
- <text class="u-percentage-slot pr-19 fs-23">89</text>
- </u-line-progress>
- </view>
- </view>
- </view>
- <view class="fs-35 font-bold mt-38 ml-27">
- 评价占比
- </view>
- <view class="ml-29 mr-29 mt-27 shadow1 border2 br-15" style="height: 417rpx;">
- <view class="flex pl-38 pr-38">
- <view ref="rateChartRef" id="rateChart" style="width: 288rpx; height: 417rpx;"></view>
- <view style="width: 46rpx;"></view>
- <view class="flex1 pt-54">
- <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>
- </view>
- <view class="progress-bar">
- <view class="progress-inner very-satisfied" style="width: 45%;"></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>
- </view>
- <view class="progress-bar">
- <view class="progress-inner satisfied" style="width: 20%;"></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>
- </view>
- <view class="progress-bar">
- <view class="progress-inner normal" style="width: 30%;"></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>
- </view>
- <view class="progress-bar">
- <view class="progress-inner unsatisfied" style="width: 5%;"></view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="h-40 safe-b"></view>
- <!-- 选择服务社区 -->
- <u-popup :show="selectPopup" round="16rpx" @close="selectPopup = false" :safe-area-inset-bottom="false"
- @open="openSelectPopup">
- <view class="relative pb-40">
- <image @tap.stop="selectPopup = false" src="@/static/closeImg.png" class="w-35 h-35 absolute"
- style="right: 31rpx;top: 46rpx;" />
- <view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold">请选择服务社区</view>
- <view class="flex a-center j-between txt-center py-10 fs-27 font-bold bgColor1">
- <view class="flex1">区县</view>
- <view class="flex1">街道</view>
- <view class="flex1">社区</view>
- </view>
- <view class="mb-20">
- <picker-view :value="value" @change="bindChange" class="picker-view" immediate-change>
- <picker-view-column>
- <view class="item" v-for="(item, index) in county" :key="index">
- {{ item.name }}
- </view>
- </picker-view-column>
- <picker-view-column>
- <view class="item" v-for="(item, index) in street" :key="index">
- {{ item.name }}
- </view>
- </picker-view-column>
- <picker-view-column>
- <view class="item" v-for="(item, index) in community" :key="index">
- {{ item.name }}
- </view>
- </picker-view-column>
- </picker-view>
- </view>
- <view class="submitBtn" @click="chooseCommunity">确认</view>
- </view>
- </u-popup>
- </view>
- </template>
-
- <script>
- import * as echarts from 'echarts';
- import {
- getRegionTree
- } from './service.js'
- export default {
- data() {
- return {
- userInfo: {},
- address: '',
- value: [0, 0, 0],
- confirmValue: [0, 0, 0],
- county: [], //区县
- street: [], //街道
- community: [], //社区
- value1: 0,
- selectPopup: false,
- range: [{
- value: 0,
- text: "排名前五"
- },
- {
- value: 1,
- text: "排名前十"
- },
- {
- value: 2,
- text: "所有排名"
- },
- ],
- chart: null,
- 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'
- }
- ])
- }
- }
- ]
- }
- },
- onLoad() {
- this.userInfo = uni.getStorageSync('userInfo')
- getRegionTree().then(res => {
- this.county = res.data
- })
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart()
- this.initRateChart()
- })
- },
- methods: {
- clearAddress() {
- this.address = '';
- this.value = [0, 0, 0];
- this.confirmValue = [0, 0, 0];
- this.street = [];
- this.community = [];
- },
- //选择服务社区
- chooseCommunity() {
- let districts = this.county[this.value[0]].name
- let street = this.street[this.value[1]].name
- let community = this.community[this.value[2]].name
-
- this.address = `${districts}-${street}-${community}`;
-
- this.confirmValue = this.value
- this.selectPopup = false
- },
- // 切换社区
- bindChange(e, index) {
- if (e.detail.value[0] != this.value[0]) {
- e.detail.value[1] = 0
- e.detail.value[2] = 0
- }
- if (e.detail.value[1] != this.value[1]) {
- e.detail.value[2] = 0
- }
- this.value = e.detail.value
- this.street = this.county[this.value[0]].children
- this.community = this.street[this.value[1]].children
- },
- openSelectPopup() {
- this.value = this.confirmValue
- this.street = this.county[this.value[0]].children
- this.community = this.street[this.value[1]].children
- },
- handleTabClick(index) {
- this.currentTab = index
- // 这里可以根据不同的 tab 加载不同时间段的数据
- // this.loadChartData(index)
- },
- initChart() {
- // 在 H5 端使用 document.getElementById
- // 在小程序端使用 this.$refs.chartRef
- const chartDom = document.getElementById('chart') || this.$refs.chartRef;
- this.chart = echarts.init(chartDom);
- this.updateChart();
- },
- updateChart() {
- const option = {
- color: ['#FF7B7B', '#FFB75B'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: ['诉求单量', '诉求办结数'],
- bottom: '0',
- itemGap: uni.upx2px(60),
- selectedMode: true
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '15%',
- top: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: this.chartData.dates,
- axisLine: {
- lineStyle: {
- color: '#E5E5E5'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#888888',
- fontSize: uni.upx2px(19),
- lineHeight: uni.upx2px(23),
- formatter: function(value) {
- return value.split('\\n').join('\n')
- }
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#fff'
- }
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- }
- },
- series: [{
- name: '诉求单量',
- type: 'bar',
- barWidth: uni.upx2px(38),
- itemStyle: {
- borderRadius: [20, 20, 20, 20],
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#FF807E'
- },
- {
- offset: 1,
- color: '#FF4948'
- }
- ])
- },
- data: this.chartData.demands
- },
- {
- name: '诉求办结数',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- itemStyle: {
- color: '#FFB75B',
- borderWidth: 2,
- borderColor: '#fff',
- shadowColor: '#FB9A0E',
- shadowBlur: 8,
- shadowOffsetY: 4
- },
- lineStyle: {
- width: 2,
- curveness: 0.3
- },
- data: this.chartData.completed
- }
- ]
- };
- this.chart && this.chart.setOption(option);
- },
- initRateChart() {
- const chartDom = document.getElementById('rateChart') || this.$refs.rateChartRef;
- this.rateChart = echarts.init(chartDom);
- this.updateRateChart();
- },
- updateRateChart() {
- const option = {
- tooltip: {
- trigger: 'item',
- confine: true,
- // formatter: '{b}: {c}%',
- backgroundColor: 'rgba(255, 255, 255, 0.9)',
- borderColor: '#FFE0E0',
- borderWidth: 1,
- textStyle: {
- color: '#666666',
- fontSize: 12
- },
- padding: [8, 12]
- },
- series: [{
- name: '评价占比',
- type: 'pie',
- radius: ['55%', '100%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- emphasis: {
- scale: false,
- scaleSize: 0
- },
- data: this.rateData
- }]
- };
- this.rateChart && this.rateChart.setOption(option);
- }
- }
- }
- </script>
-
- <style scoped lang="scss">
- /deep/.uni-select {
- width: 231rpx;
- height: 65rpx;
- margin: 0 auto;
- margin-bottom: 38rpx;
- font-size: 27rpx;
- color: #797F81;
- border-color: #E5E5E5;
- border-radius: 33rpx;
- padding: 0 31rpx 0 40rpx;
-
- .uni-select__input-text {
- color: #797F81;
- }
- }
-
- .content {
- background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100rpx, #fff 100%);
- }
-
- .gap25 {
- gap: 25rpx;
- }
-
- .tabs {
- width: 412rpx;
- background-color: #FFF1F1;
- border-radius: 30rpx;
- height: 65rpx;
- line-height: 65rpx;
- font-size: 27rpx;
- position: relative;
- overflow: hidden;
- }
-
- .tab-item {
- color: #797F81;
- flex: 1;
- text-align: center;
- font-weight: 400;
- height: 54rpx;
- line-height: 54rpx;
- border-radius: 27rpx;
- margin: 6rpx;
- position: relative;
- z-index: 1;
- transform: translateZ(0);
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
- &.active {
- background-color: #fff;
- color: #FF4948;
- font-weight: 600;
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
- transform: scale(1.02);
- }
- }
-
- .chart-wrapper {
- background: #fff;
- border-radius: 20rpx;
- padding: 20rpx;
- }
-
- .color1 {
- color: #666565;
- }
-
- .color2 {
- color: #C1C1C1;
- }
-
- .color3 {
- color: #666666;
- }
-
- .color4 {
- color: #FF4948;
- }
-
- .color5 {
- color: #696969;
- }
-
- .color6 {
- color: #A4A4A4;
- }
-
- .color7 {
- color: #A7A7A7;
- }
-
- .color8 {
- color: #0FB269;
- }
-
- .color9 {
- color: #FF5600;
- }
-
- .color10 {
- color: #161998;
- }
-
- .color11 {
- color: #08AD60;
- }
-
- .color12 {
- color: #9C9C9E;
- }
-
- .bgColor1 {
- background-color: #fff;
- }
-
- .bgColor2 {
- background-color: #FFF1F4;
- }
-
- .bgColor3 {
- background-color: #FFF8F4;
- }
-
- .bgColor4 {
- background-color: #F4F5FF;
- }
-
- .bgColor5 {
- background-color: #F1FFF8;
- }
-
- .border1 {
- border: 2rpx solid #D9D9D9;
- }
-
- .border2 {
- border: 2rpx solid #FFE0E0;
- }
-
- .border3 {
- border: 4rpx solid #FF4948;
- box-sizing: border-box;
- box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255, 73, 72, 0.5);
- }
-
- .border4 {
- border: 2rpx solid #FFFFFF;
- }
-
- .shadow1 {
- box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
- }
-
- .shadow2 {
- box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
- }
-
- .progress-bar {
- width: 100%;
- height: 8rpx;
- background: #EEEEEE;
- border-radius: 4rpx;
- overflow: hidden;
- }
-
- .progress-inner {
- height: 100%;
- border-radius: 4rpx;
- transition: width 0.3s ease-in-out;
-
- &.very-satisfied {
- background: linear-gradient(270deg, #FF8064 0%, #FF4934 100%);
- }
-
- &.satisfied {
- background: linear-gradient(270deg, #05DEE1 0%, #02BAC0 100%);
- }
-
- &.normal {
- background: linear-gradient(270deg, #7DC4FF 0%, #4791FF 100%);
- }
-
- &.unsatisfied {
- background: linear-gradient(270deg, #FFD364 0%, #FEA834 100%);
- }
- }
-
- .picker-view {
- height: 460rpx;
- font-size: 35rpx;
- }
-
- /deep/.picker-view {
- margin: 0 auto;
-
- .item {
- text-align: center;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 36rpx;
- color: #333333;
- line-height: 50rpx;
- }
- }
-
- .submitBtn {
- width: calc(100% - 62rpx);
- margin: 0 31rpx;
- line-height: 96rpx;
- text-align: center;
- background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
- border-radius: 48rpx;
- font-weight: 600;
- font-size: 35rpx;
- color: #fff;
- }
- </style>
\ No newline at end of file
+ </view> -->
+ <view
+ class="mt-27 shadow1 border2 ml-29 mr-29 pt-31 br-15"
+ style="height: 511rpx"
+ >
+ <view class="flex mlr-o tabs mb-40">
+ <view
+ v-for="(item, index) in tabs"
+ :key="index"
+ :class="['tab-item', currentTab === index ? 'active' : '']"
+ @click="handleTabClick(index)"
+ >
+ {{ item }}
+ </view>
+ </view>
+ <view
+ ref="chartRef"
+ id="chart"
+ style="width: 100%; height: 405rpx"
+ ></view>
+ </view>
+ <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="flex a-center mb-38" v-for="(item, idx) in typeRankList" :key="idx">
+ <view class="w-130 color3">{{ item.typeName }}</view>
+ <u-line-progress
+ :percentage="item.percent"
+ inactiveColor="#EEEEEE"
+ :activeColor="item.gradientColor"
+ height="38rpx"
+ >
+ <text class="u-percentage-slot pr-19 fs-23">{{ item.count }}</text>
+ </u-line-progress>
+ </view>
+ </view>
+ </view>
+ <view class="fs-35 font-bold mt-38 ml-27"> 评价占比 </view>
+ <view
+ class="ml-29 mr-29 mt-27 shadow1 border2 br-15"
+ style="height: 417rpx"
+ >
+ <view class="flex pl-38 pr-38">
+ <view
+ ref="rateChartRef"
+ id="rateChart"
+ style="width: 288rpx; height: 417rpx"
+ ></view>
+ <view style="width: 46rpx"></view>
+ <view class="flex1 pt-54">
+ <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>
+ </view>
+ <view class="progress-bar">
+ <view
+ class="progress-inner very-satisfied"
+ style="width: 45%"
+ ></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>
+ </view>
+ <view class="progress-bar">
+ <view class="progress-inner satisfied" style="width: 20%"></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>
+ </view>
+ <view class="progress-bar">
+ <view class="progress-inner normal" style="width: 30%"></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>
+ </view>
+ <view class="progress-bar">
+ <view class="progress-inner unsatisfied" style="width: 5%"></view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="h-40 safe-b"></view>
+ <!-- 选择服务社区 -->
+ <u-popup
+ :show="selectPopup"
+ round="16rpx"
+ @close="selectPopup = false"
+ :safe-area-inset-bottom="false"
+ @open="openSelectPopup"
+ >
+ <view class="relative pb-40">
+ <image
+ @tap.stop="selectPopup = false"
+ src="@/static/closeImg.png"
+ class="w-35 h-35 absolute"
+ style="right: 31rpx; top: 46rpx"
+ />
+ <view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold"
+ >请选择服务社区</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 class="mb-20">
+ <picker-view
+ :value="value"
+ @change="bindChange"
+ class="picker-view"
+ immediate-change
+ >
+ <picker-view-column v-if="hasTier(2)">
+ <view
+ class="item"
+ v-for="(item, index) in regionTree"
+ :key="index"
+ >
+ {{ item.name }}
+ </view>
+ </picker-view-column>
+ <picker-view-column v-if="hasTier(3)">
+ <view
+ class="item"
+ v-for="(item, index) in getStreets()"
+ :key="index"
+ >
+ {{ item.name }}
+ </view>
+ </picker-view-column>
+ <picker-view-column v-if="hasTier(4)">
+ <view
+ class="item"
+ v-for="(item, index) in getCommunities()"
+ :key="index"
+ >
+ {{ item.name }}
+ </view>
+ </picker-view-column>
+ </picker-view>
+ </view>
+ <view class="submitBtn" @click="chooseCommunity">确认</view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import {
+ getRegionTree,
+ getStaticsPartOne,
+ getStaticsPartTwo,
+ getStaticsPartThree,
+} from "./service.js";
+export default {
+ data() {
+ return {
+ userInfo: {},
+ address: "",
+ value: [0, 0, 0],
+ confirmValue: [0, 0, 0],
+ regionTree: [], // 区域树数据
+ value1: 0,
+ selectPopup: false,
+ range: [
+ {
+ value: 0,
+ text: "排名前五",
+ },
+ {
+ value: 1,
+ text: "排名前十",
+ },
+ {
+ value: 2,
+ text: "所有排名",
+ },
+ ],
+ chart: null,
+ 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",
+ },
+ ]),
+ },
+ },
+ ],
+ statisticsData: {
+ satisfaction: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ demands: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ processTime: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ status: {
+ processing: 0,
+ reviewing: 0,
+ delayed: 0,
+ completed: 0,
+ },
+ overtime: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ completionRate: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ },
+ currentAreaId: '',
+ currentTier: -1,
+ typeRankList: [],
+ };
+ },
+ onLoad() {
+ this.userInfo = uni.getStorageSync("userInfo");
+ this.initRegionData();
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart();
+ this.initRateChart();
+ });
+ },
+ methods: {
+ clearAddress() {
+ this.address = "";
+ this.value = [0, 0, 0];
+ this.confirmValue = [0, 0, 0];
+ this.currentAreaId = '';
+ this.currentTier = -1;
+ this.getStatisticsData("", -1);
+ this.getChartData(1);
+ this.getTypeRankData();
+ },
+ //初始化区域数据
+ initRegionData() {
+ getRegionTree().then((res) => {
+ if (res.code === 200) {
+ this.regionTree = [{name: '全部', id: 'all', tier: 2, children: []}, ...(res.data || [])];
+ this.value = [0, 0, 0];
+ this.confirmValue = [0, 0, 0];
+ this.address = "全部";
+ this.currentAreaId = '';
+ this.currentTier = -1;
+ this.getStatisticsData("", -1);
+ this.getChartData(1);
+ this.getTypeRankData();
+ }
+ });
+ },
+ // 获取当前选中的区域对象
+ getSelectedRegion() {
+ // 区县
+ const county = this.regionTree[this.value[0]];
+ if (!county || county.id === "all") return { id: "", tier: -1 };
+ // 有街道
+ const streets =
+ county.children && county.children.filter((c) => c && c.tier === 3);
+ if (streets && streets.length) {
+ const street = streets[this.value[1] - 1]; // -1 因为有"全部"选项
+ if (!street || this.value[1] === 0 || street.id === "all")
+ return { id: county.id, tier: county.tier };
+ const communities =
+ street.children && street.children.filter((c) => c && c.tier === 4);
+ if (communities && communities.length) {
+ const community = communities[this.value[2] - 1];
+ if (!community || this.value[2] === 0 || community.id === "all")
+ return { id: street.id, tier: street.tier };
+ return { id: community.id, tier: community.tier };
+ }
+ return { id: street.id, tier: street.tier };
+ }
+ // 区县下直接有社区
+ const communities =
+ county.children && county.children.filter((c) => c && c.tier === 4);
+ if (communities && communities.length) {
+ const community = communities[this.value[1] - 1];
+ if (!community || this.value[1] === 0 || community.id === "all")
+ return { id: county.id, tier: county.tier };
+ return { id: community.id, tier: community.tier };
+ }
+ // 只选了区县
+ return { id: county.id, tier: county.tier };
+ },
+ // 根据value设置地址显示
+ setAddressByValue() {
+ const names = [];
+ const county = this.regionTree[this.value[0]];
+ if (!county) {
+ this.address = "全部";
+ return;
+ }
+
+ // 如果选中区县的全部
+ if (county.id === "all") {
+ this.address = "全部";
+ return;
+ }
+
+ names.push(county.name);
+
+ // 检查是否有街道
+ const streets =
+ county.children && county.children.filter((c) => c && c.tier === 3);
+ if (streets && streets.length) {
+ const street = streets[this.value[1] - 1]; // -1 因为有"全部"选项
+ if (street && street.id !== "all") {
+ names.push(street.name);
+
+ // 检查街道下是否有社区
+ const communities =
+ street.children && street.children.filter((c) => c && c.tier === 4);
+ if (communities && communities.length) {
+ const community = communities[this.value[2] - 1];
+ if (community && community.id !== "all") {
+ names.push(community.name);
+ }
+ }
+ }
+ } else {
+ // 区县下直接有社区
+ const communities =
+ county.children && county.children.filter((c) => c && c.tier === 4);
+ if (communities && communities.length) {
+ const community = communities[this.value[1] - 1];
+ if (community && community.id !== "all") {
+ names.push(community.name);
+ }
+ }
+ }
+
+ this.address = names.join("-");
+ },
+ //选择服务社区
+ chooseCommunity() {
+ this.confirmValue = [...this.value];
+ this.setAddressByValue();
+ const { id, tier } = this.getSelectedRegion();
+ this.currentAreaId = id;
+ this.currentTier = tier;
+ this.selectPopup = false;
+ this.getStatisticsData(id, tier);
+ this.getChartData(this.currentTab + 1);
+ this.getTypeRankData();
+ },
+ // 切换社区
+ bindChange(e) {
+ const newValue = e.detail.value;
+ // 级联重置逻辑
+ if (newValue[0] !== this.value[0]) {
+ newValue[1] = 0;
+ newValue[2] = 0;
+ } else if (newValue[1] !== this.value[1]) {
+ newValue[2] = 0;
+ }
+ this.value = newValue;
+ },
+ openSelectPopup() {
+ this.value = this.confirmValue;
+ },
+ handleTabClick(index) {
+ this.currentTab = index;
+ 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();
+ },
+ updateChart() {
+ const option = {
+ color: ["#FF7B7B", "#FFB75B"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: ["诉求单量", "诉求办结数"],
+ bottom: "0",
+ itemGap: uni.upx2px(60),
+ selectedMode: true,
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "15%",
+ top: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: this.chartData.dates,
+ axisLine: {
+ lineStyle: {
+ color: "#E5E5E5",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#888888",
+ fontSize: uni.upx2px(19),
+ lineHeight: uni.upx2px(23),
+ formatter: function (value) {
+ return value.split("\\n").join("\n");
+ },
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ lineStyle: {
+ type: "dashed",
+ color: "#fff",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ name: "诉求单量",
+ type: "bar",
+ barWidth: uni.upx2px(38),
+ itemStyle: {
+ borderRadius: [20, 20, 20, 20],
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#FF807E",
+ },
+ {
+ offset: 1,
+ color: "#FF4948",
+ },
+ ]),
+ },
+ data: this.chartData.demands,
+ },
+ {
+ name: "诉求办结数",
+ type: "line",
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 8,
+ itemStyle: {
+ color: "#FFB75B",
+ borderWidth: 2,
+ borderColor: "#fff",
+ shadowColor: "#FB9A0E",
+ shadowBlur: 8,
+ shadowOffsetY: 4,
+ },
+ lineStyle: {
+ width: 2,
+ curveness: 0.3,
+ },
+ data: this.chartData.completed,
+ },
+ ],
+ };
+ this.chart && this.chart.setOption(option);
+ },
+ initRateChart() {
+ const chartDom =
+ document.getElementById("rateChart") || this.$refs.rateChartRef;
+ this.rateChart = echarts.init(chartDom);
+ this.updateRateChart();
+ },
+ updateRateChart() {
+ const option = {
+ tooltip: {
+ trigger: "item",
+ confine: true,
+ // formatter: '{b}: {c}%',
+ backgroundColor: "rgba(255, 255, 255, 0.9)",
+ borderColor: "#FFE0E0",
+ borderWidth: 1,
+ textStyle: {
+ color: "#666666",
+ fontSize: 12,
+ },
+ padding: [8, 12],
+ },
+ series: [
+ {
+ name: "评价占比",
+ type: "pie",
+ radius: ["55%", "100%"],
+ center: ["50%", "50%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ emphasis: {
+ scale: false,
+ scaleSize: 0,
+ },
+ data: this.rateData,
+ },
+ ],
+ };
+ this.rateChart && this.rateChart.setOption(option);
+ },
+ // 添加获取统计数据的方法
+ async getStatisticsData(areaId = "", tier = -1) {
+ try {
+ const res = await getStaticsPartOne({
+ areaId,
+ tier,
+ });
+ if (res.code === 200) {
+ this.statisticsData = {
+ satisfaction: {
+ total: res.data.satisfactionRate ?? 0,
+ month: res.data.thisMonthSatisfactionRate ?? 0,
+ compare: res.data.lastMonthCompareSatisfactionRate ?? 0,
+ },
+ demands: {
+ total: res.data.allTotal ?? 0,
+ month: res.data.thisMonthTotal ?? 0,
+ compare: res.data.lastMonthCompareTotal ?? 0,
+ },
+ processTime: {
+ total: res.data.averageTime ?? 0,
+ month: res.data.thisMonthAverageTime ?? 0,
+ compare: res.data.lastMonthCompareAverageTime ?? 0,
+ },
+ status: {
+ processing: res.data.nowTransactTotal ?? 0,
+ reviewing: res.data.auditTransactTotal ?? 0,
+ delayed: res.data.postponeTransactTotal ?? 0,
+ completed: res.data.completeTransactTotal ?? 0,
+ },
+ overtime: {
+ total: res.data.overtimeTransactTotal ?? 0,
+ month: res.data.thisMonthOvertimeTransactTotal ?? 0,
+ compare: res.data.lastMonthOvertimeTransactCompareTotal ?? 0,
+ },
+ completionRate: {
+ total: 0,
+ month: 0,
+ compare: 0,
+ },
+ };
+ // 更新图表数据
+ this.updateChart();
+ this.updateRateChart();
+ }
+ } catch (error) {
+ console.error("获取统计数据失败:", error);
+ }
+ },
+ hasTier(tier) {
+ // tier=2: 区县始终有
+ if (tier === 2) return true;
+ // tier=3: 当前区县children里有tier=3
+ if (tier === 3) {
+ const county = this.regionTree[this.value[0]];
+ return (
+ county &&
+ Array.isArray(county.children) &&
+ county.children.some((c) => c && c.tier === 3)
+ );
+ }
+ // tier=4: 当前区县children里有tier=4，或街道children里有tier=4
+ if (tier === 4) {
+ const county = this.regionTree[this.value[0]];
+ if (!county || !Array.isArray(county.children)) return false;
+ // 区县下直接有社区
+ if (county.children.some((c) => c && c.tier === 4)) return true;
+ // 区县下有街道，街道下有社区
+ const street = county.children[this.value[1]];
+ return (
+ street &&
+ Array.isArray(street.children) &&
+ street.children.some((c) => c && c.tier === 4)
+ );
+ }
+ return false;
+ },
+ getStreets() {
+ const county = this.regionTree[this.value[0]];
+ if (!county || !Array.isArray(county.children)) return [];
+ // 只返回tier=3的
+ const streets = county.children.filter((c) => c && c.tier === 3);
+ return streets.length
+ ? [{ name: "全部", id: "all", tier: 3, children: [] }, ...streets]
+ : [];
+ },
+ getCommunities() {
+ const county = this.regionTree[this.value[0]];
+ if (!county || !Array.isArray(county.children)) return [];
+ // 区县下直接有社区
+ const communities = county.children.filter((c) => c && c.tier === 4);
+ if (communities.length)
+ return [{ name: "全部", id: "all", tier: 4 }, ...communities];
+ // 区县下有街道，街道下有社区
+ const street = county.children[this.value[1]];
+ if (street && Array.isArray(street.children)) {
+ const comms = street.children.filter((c) => c && c.tier === 4);
+ if (comms.length)
+ return [{ name: "全部", id: "all", tier: 4 }, ...comms];
+ }
+ return [];
+ },
+ async getChartData(timeType = 1) {
+ try {
+ const res = await getStaticsPartTwo({
+ areaId: this.currentAreaId,
+ tier: this.currentTier,
+ timeType
+ });
+ if (res.code === 200 && res.data) {
+ // 转换数据格式
+ const dates = res.data.map(item => item.time.replace(/-/g, '\n').replace(/\n(\d{2})$/, '.$1'));
+ const demands = res.data.map(item => item.allTotal);
+ const completed = res.data.map(item => item.completeTotal);
+ this.chartData = {
+ dates,
+ demands,
+ completed
+ };
+ this.updateChart();
+ }
+ } catch (e) {
+ console.error('获取图表数据失败', e);
+ }
+ },
+ async getTypeRankData() {
+ let rank;
+ if (this.value1 === 0) rank = 5;
+ else if (this.value1 === 1) rank = 10;
+ // value1 === 2 时不传rank
+ const params = {
+ areaId: this.currentAreaId,
+ tier: this.currentTier
+ };
+ if (rank) params.rank = rank;
+ try {
+ const res = await getStaticsPartThree(params);
+ console.log(JSON.stringify(res.data));
+
+ if (res.code === 200 && Array.isArray(res.data)) {
+ // 计算最大值
+ const max = Math.max(...res.data.map(item => item.allTotal), 1);
+ // 处理数据，增加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%)'
+ }));
+ }
+ } catch (e) {
+ console.error('获取问题类型排名失败', e);
+ }
+ },
+ },
+ watch: {
+ value1() {
+ this.getTypeRankData();
+ }
+ },
+};
+</script>
+
+<style scoped lang="scss">
+/deep/.uni-select {
+ width: 231rpx;
+ height: 65rpx;
+ margin: 0 auto;
+ margin-bottom: 38rpx;
+ font-size: 27rpx;
+ color: #797f81;
+ border-color: #e5e5e5;
+ border-radius: 33rpx;
+ padding: 0 31rpx 0 40rpx;
+
+ .uni-select__input-text {
+ color: #797f81;
+ }
+}
+
+.content {
+ background: linear-gradient(
+ 180deg,
+ #ffdcdb 0%,
+ rgba(255, 255, 255, 0) 100rpx,
+ #fff 100%
+ );
+}
+
+.gap25 {
+ gap: 25rpx;
+}
+
+.tabs {
+ width: 412rpx;
+ background-color: #fff1f1;
+ border-radius: 30rpx;
+ height: 65rpx;
+ line-height: 65rpx;
+ font-size: 27rpx;
+ position: relative;
+ overflow: hidden;
+}
+
+.tab-item {
+ color: #797f81;
+ flex: 1;
+ text-align: center;
+ font-weight: 400;
+ height: 54rpx;
+ line-height: 54rpx;
+ border-radius: 27rpx;
+ margin: 6rpx;
+ position: relative;
+ z-index: 1;
+ transform: translateZ(0);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+ &.active {
+ background-color: #fff;
+ color: #ff4948;
+ font-weight: 600;
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+ transform: scale(1.02);
+ }
+}
+
+.chart-wrapper {
+ background: #fff;
+ border-radius: 20rpx;
+ padding: 20rpx;
+}
+
+.color1 {
+ color: #666565;
+}
+
+.color2 {
+ color: #c1c1c1;
+}
+
+.color3 {
+ color: #666666;
+}
+
+.color4 {
+ color: #ff4948;
+}
+
+.color5 {
+ color: #696969;
+}
+
+.color6 {
+ color: #a4a4a4;
+}
+
+.color7 {
+ color: #a7a7a7;
+}
+
+.color8 {
+ color: #0fb269;
+}
+
+.color9 {
+ color: #ff5600;
+}
+
+.color10 {
+ color: #161998;
+}
+
+.color11 {
+ color: #08ad60;
+}
+
+.color12 {
+ color: #9c9c9e;
+}
+
+.bgColor1 {
+ background-color: #fff;
+}
+
+.bgColor2 {
+ background-color: #fff1f4;
+}
+
+.bgColor3 {
+ background-color: #fff8f4;
+}
+
+.bgColor4 {
+ background-color: #f4f5ff;
+}
+
+.bgColor5 {
+ background-color: #f1fff8;
+}
+
+.border1 {
+ border: 2rpx solid #d9d9d9;
+}
+
+.border2 {
+ border: 2rpx solid #ffe0e0;
+}
+
+.border3 {
+ border: 4rpx solid #ff4948;
+ box-sizing: border-box;
+ box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255, 73, 72, 0.5);
+}
+
+.border4 {
+ border: 2rpx solid #ffffff;
+}
+
+.shadow1 {
+ box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
+}
+
+.shadow2 {
+ box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+}
+
+.progress-bar {
+ width: 100%;
+ height: 8rpx;
+ background: #eeeeee;
+ border-radius: 4rpx;
+ overflow: hidden;
+}
+
+.progress-inner {
+ height: 100%;
+ border-radius: 4rpx;
+ transition: width 0.3s ease-in-out;
+
+ &.very-satisfied {
+ background: linear-gradient(270deg, #ff8064 0%, #ff4934 100%);
+ }
+
+ &.satisfied {
+ background: linear-gradient(270deg, #05dee1 0%, #02bac0 100%);
+ }
+
+ &.normal {
+ background: linear-gradient(270deg, #7dc4ff 0%, #4791ff 100%);
+ }
+
+ &.unsatisfied {
+ background: linear-gradient(270deg, #ffd364 0%, #fea834 100%);
+ }
+}
+
+.picker-view {
+ height: 460rpx;
+ font-size: 35rpx;
+}
+
+/deep/.picker-view {
+ margin: 0 auto;
+
+ .item {
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #333333;
+ line-height: 50rpx;
+ }
+}
+
+.submitBtn {
+ width: calc(100% - 62rpx);
+ margin: 0 31rpx;
+ line-height: 96rpx;
+ text-align: center;
+ background: linear-gradient(270deg, #fc8d55 0%, #ff4948 100%);
+ border-radius: 48rpx;
+ font-weight: 600;
+ font-size: 35rpx;
+ color: #fff;
+}
+</style>
--
Gitblit v1.7.1