fix

13404089107

2025-04-07 abfc074c35e8bd66ec0641173bfd703051ca701a

 src/components/datascreen/LeftPanel.vue

@@ -31,7 +31,7 @@
                  {{ item.growth > 0 ? '+' : '' }}{{ item.householdNumRate }}
                </span>
              </div>
              {{ item.householdNum }}户
              {{ item.householdNum }}人
            </div>
          </div>
          <div class="progress-bar">
@@ -90,14 +90,14 @@
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
@@ -108,15 +108,16 @@
            show: false
          },
          axisLabel: {
            color: '#495F88',
            fontSize: 12
            color: '#fff',
            fontSize: 12,
            // rotate: 30, // 标签倾斜角度
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：次',
          nameTextStyle: {
            color: '#495F88',
            color: '#fff',
            fontSize: 12,
          },
          splitLine: {
@@ -132,7 +133,7 @@
            show: false
          },
          axisLabel: {
            color: '#495F88',
            color: '#fff',
            fontSize: 12
          }
        },
@@ -141,7 +142,7 @@
            name: '安置面积异常',
            type: 'line',
            smooth: true,
            symbol: 'none',
            symbol: 'circle',
            itemStyle: {
              color: '#FEDB65'
            },
@@ -165,35 +166,35 @@
            lineStyle: {
              width: 4,
              color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#AE5112' // 0% 处的颜色
              }, {
                offset: 0.3,
                color: '#FEDB65' // 50% 处的颜色
              }, {
                offset: 0.7,
                color: '#FEDB65' // 50% 处的颜色
              }, {
                offset: 1,
                color: '#AE5112' // 100% 处的颜色
              }]
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#AE5112' // 0% 处的颜色
                }, {
                  offset: 0.3,
                  color: '#FEDB65' // 50% 处的颜色
                }, {
                  offset: 0.7,
                  color: '#FEDB65' // 50% 处的颜色
                }, {
                  offset: 1,
                  color: '#AE5112' // 100% 处的颜色
                }]
              }
            },
            data: [150, 180, 230, 280, 260, 100]
            data: []
          },
          {
            name: '补偿金额异常',
            type: 'line',
            smooth: true,
            symbol: 'none',
            symbol: 'circle',
            itemStyle: {
              color: '#00F2EF' 
              color: '#00F2EF'
            },
            areaStyle: {
              opacity: 0.8,
@@ -215,31 +216,30 @@
            lineStyle: {
              width: 4,
              color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#0E5FFF' // 0% 处的颜色
              }, {
                offset: 0.3,
                color: '#00F2EF' // 50% 处的颜色
              }, {
                offset: 0.7,
                color: '#00F2EF' // 50% 处的颜色
              }, {
                offset: 1,
                color: '#0E5FFF' // 100% 处的颜色
              }]
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#0E5FFF' // 0% 处的颜色
                }, {
                  offset: 0.3,
                  color: '#00F2EF' // 50% 处的颜色
                }, {
                  offset: 0.7,
                  color: '#00F2EF' // 50% 处的颜色
                }, {
                  offset: 1,
                  color: '#0E5FFF' // 100% 处的颜色
                }]
              }
            },
            data: [200, 250, 380, 450, 380, 300]
            data: []
          }
        ]
      }

    };
  },
  watch: {
@@ -249,6 +249,7 @@
          this.rankingList = newVal.streetResponses
          this.$nextTick(() => {
            this.animateProgressBars();
            this.updateChartData(this.data.importErrorResponses);
          });
        }
      },
@@ -262,11 +263,16 @@
      this.rankingList.map(item => {
        count += item.householdNum;
      });
      

      this.rankingList = this.rankingList.map((item, index) => {
        item.percentage = (item.householdNum / count) * 100;
        return item
      });
    },
    updateChartData(apiData) {
      this.lineOption.xAxis.data = apiData.map(item => item.month);
      this.lineOption.series[0].data = apiData.map(item => item.areaErrorCount);
      this.lineOption.series[1].data = apiData.map(item => item.moneyErrorCount);
    }
  }
};
@@ -339,6 +345,7 @@
  }

  .ranking-list {
  height: 400px;
    margin-top: 30px;
    overflow: auto;
    /* 隐藏滚动条 */