fix

pyt

2 天以前 9ddf3836a024734d0976774f5b973cb0303f2e32

 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>