feat

pyt

2025-03-24 feb57f3e36df96eb6b8da834561eecf3ac9b05e6

feat

 src/assets/left-bottom-bg.png

 src/assets/left-middle-bg.png

 src/assets/left/four.png

 src/assets/left/one.png

 src/assets/left/progress-four.png

 src/assets/left/progress-one.png

 src/assets/left/progress-three.png

 src/assets/left/progress-two.png

 src/assets/left/three.png

 src/assets/left/top-number-box.png

 src/assets/left/top-number-header.png

 src/assets/left/two.png

 src/assets/right-top-bg.png

 src/components/datascreen/CenterPanel.vue

@@ -95,14 +95,15 @@

  .map-data {
    display: flex;
    justify-content: center;
    justify-content: space-between;
    padding-left: 94px;
    padding-right: 94px;
    height: 100%;
    align-items: center;

    .data-item {
      display: flex;
      width: 268px;

      flex-shrink: 0;
      img {
        width: 94px;
        height: 80px;

 src/components/datascreen/LeftPanel.vue

@@ -1,76 +1,241 @@
<template>
  <div class="left-panel">
    <!-- 参与统计 -->
    <!-- 已参与自主购房安置统计 -->
    <div class="statistics-box">
      <div class="box-title">各街道/乡参与排名</div>
    </div>
    
    <!-- 各街道参与排名 -->
    <div class="ranking-box">
      <div class="box-title">各街道/乡参与排名</div>
      <!-- <<div class="ranking-list">
        <div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
          <span class="rank">{{ index + 1 }}</span>
          <span class="name">{{ item.name }}</span>
          <div class="progress-bar">
            <div class="progress" :style="{ width: item.percentage + '%' }"></div>
          </div>
          <span class="value">{{ item.value }}</span>
      <div class="box-title">已参与自主购房安置统计</div>
      <div class="box-content">
        <div class="box-content-item">
          <div class="box-content-item-title">总参与户数(户)</div>
          <div class="box-content-item-value">87695</div>
        </div>
      </div> -->
        <div class="box-content-item" style="margin-left: 35px;">
          <div class="box-content-item-title">总参与人数(人)</div>
          <div class="box-content-item-value">876995</div>
        </div>
      </div>
    </div>

    <!-- 安置房完成比 -->
    <!-- 各镇/街参与户数排名 -->
    <div class="ranking-box">
      <div class="box-title">各镇/街参与户数排名</div>
      <div class="ranking-list">
        <div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
          <div class="ranking-item-content">
            <span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
            <span class="name">{{ item.name }}</span>
            <div class="value">
              <div class="value-text">
                环比
                <span class="value-text-value" :class="{ 'positive': item.growth > 0, 'negative': item.growth < 0 }">
                  {{ item.growth > 0 ? '+' : '' }}{{ item.growth }}%
                </span>
              </div>
              {{ item.value }}
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress" :style="{ width: item.percentage + '%' }" :class="'rank-' + (index + 1)">
              <div class="progress-icon" :class="'rank-' + (index + 1)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 户主信息导入异常统计 -->
    <div class="line-chart">
      <div class="box-title">安置房完成比</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="pieOption" autoresize />
      <div class="box-title">户主信息导入异常统计</div>
      <div class="chart-container">
        <v-chart class="chart" :option="lineOption" autoresize />
      </div>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: 'LeftPanel',
  components: {
    VChart
  },
  data() {
    return {
      totalHouseholds: 87695,
      totalPeople: 876995,
      rankingList: [
        { name: '崇州街道', percentage: 90, value: '999户' },
        { name: '羊马乡', percentage: 85, value: '999户' },
        { name: '万家镇', percentage: 80, value: '999户' },
        { name: '崇阳街道', percentage: 75, value: '999户' },
        { name: '白头镇', percentage: 70, value: '999户' },
        { name: '金鸡乡', percentage: 65, value: '999户' },
        { name: '西江镇', percentage: 60, value: '999户' },
        { name: '观胜镇', percentage: 55, value: '999户' }
        { name: '崇州街道', percentage: 0, value: '999户', growth: 43.2 },
        { name: '羊马乡', percentage: 0, value: '999户', growth: -12.5 },
        { name: '万家镇', percentage: 0, value: '999户', growth: 8.3 },
        { name: '崇阳街道', percentage: 0, value: '999户', growth: -5.2 },
        { name: '白头镇', percentage: 0, value: '999户', growth: 15.7 },
        { name: '金鸡乡', percentage: 0, value: '999户', growth: -3.8 },
        { name: '西江镇', percentage: 0, value: '999户', growth: 22.1 },
        { name: '观胜镇', percentage: 0, value: '999户', growth: -7.4 }
      ],
      pieOption: {
      finalPercentages: [
        50, 85, 80, 75, 70, 65, 60, 55
      ],
      lineOption: {
        tooltip: {
          trigger: 'item'
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          label: {
        legend: {
          data: ['安置面积异常', '补偿金额异常'],
          textStyle: {
            color: '#C0CFDC',
            fontSize: 12
          },
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          top: 0,
          right: 0
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1B374A'
            }
          },
          axisTick: {
            show: false
          },
          data: [
            { value: 34.5, name: '商业用房' },
            { value: 30, name: '住宅' },
            { value: 35.5, name: '其他' }
          ],
          itemStyle: {
            color: function(params) {
              const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
              return colorList[params.dataIndex];
            }
          axisLabel: {
            color: '#C0CFDC',
            fontSize: 12
          }
        }]
        },
        yAxis: {
          type: 'value',
          name: '单位：次',
          nameTextStyle: {
            color: '#C0CFDC',
            fontSize: 12,
            padding: [0, 0, 0, 30]
          },
          splitLine: {
            lineStyle: {
              color: '#1B374A',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#C0CFDC',
            fontSize: 12
          }
        },
        series: [
          {
            name: '安置面积异常',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.8,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 187, 0, 0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(255, 187, 0, 0)'
                }]
              }
            },
            lineStyle: {
              width: 2,
              color: '#FFBB00'
            },
            data: [150, 180, 230, 280, 260, 100]
          },
          {
            name: '补偿金额异常',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.8,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 255, 0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 255, 0)'
                }]
              }
            },
            lineStyle: {
              width: 2,
              color: '#00FFFF'
            },
            data: [200, 250, 380, 450, 380, 300]
          }
        ]
      }
    };
  },
  mounted() {
    // 使用 setTimeout 确保 DOM 已经渲染
    setTimeout(() => {
      this.animateProgressBars();
    }, 100);
  },
  methods: {
    animateProgressBars() {
      this.rankingList = this.rankingList.map((item, index) => ({
        ...item,
        percentage: this.finalPercentages[index]
      }));
    }
  }
};
</script>
@@ -82,24 +247,53 @@
  left: 20px;
  width: 440px;
  bottom: 20px;

  .statistics-box {
    height: 196px;
    background: url('@/assets/left-top-bg.png') no-repeat center center;
    background-size: 100% 100%;
    .box-content {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      height: 100%;
      .box-content-item-title {
        width: 178px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        font-size: 15px;
        background: url('@/assets/left/top-number-header.png') no-repeat center center;
        background-size: 100% 100%;
      }
      .box-content-item-value {
        width: 178px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        font-weight: bold;
        font-size: 31px;
        margin-top: 8px;
        color: #66FFFF;
        background: url('@/assets/left/top-number-box.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  .ranking-box {
    height: 466px;
    margin-top: 21px;
    background: url('@/assets/left-middle-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .line-chart {
    height: 244px;
    margin-top: 21px;
    background: url('@/assets/left-bottom-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }


  .box-title {
    font-size: 14px;
@@ -109,43 +303,144 @@
    line-height: 21px;
  }

  .ranking-list {
    margin-top: 30px;
  }

  .ranking-item {
    display: flex;
    align-items: center;
    padding: 7px 20px;

    .rank {
      width: 20px;
      color: #00ffff;
    }
    .ranking-item-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6.5px;

    .name {
      width: 80px;
    }
      .rank {
        font-weight: bold;
        font-size: 18px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        padding-left: 2px;
        
        &.rank-1 {
          color: #E9B701;
          background: url('@/assets/left/one.png') no-repeat center center;
          background-size: 100% 100%;
        }
        
        &.rank-2 {
          color: #0ED1A3;
          background: url('@/assets/left/two.png') no-repeat center center;
          background-size: 100% 100%;
        }
        
        &.rank-3 {
          color: #0EBFDA;
          background: url('@/assets/left/three.png') no-repeat center center;
          background-size: 100% 100%;
        }
        
        &:not(.rank-1):not(.rank-2):not(.rank-3) {
          color: #0089FF;
          background: linear-gradient( 270deg, rgba(0,137,255,0) 0%, rgba(0,137,255,0.4) 100%);
        }
      }

    .progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(0,255,255,0.1);
      border-radius: 3px;
      .name {
        flex: 1;
        color: #C0CFDC;
        margin: 0 4px;
        font-size: 15px;
      }

      .progress {
        height: 100%;
        background: linear-gradient(to right, #00ffff, #7cb9e8);
        border-radius: 3px;
      .value {
        color: #fff;
        font-size: 15px;
        display: flex;
        align-items: center;
        .value-text {
          color: #C0CFDC;
          font-size: 12px;
          width: 130px;
          .value-text-value {
            margin-left: 12px;
            &.positive {
              color: #FEDB65;
            }
            &.negative {
              color: #66FFFF;
            }
          }
        }
      }
    }

    .value {
      width: 60px;
      text-align: right;
      color: #00ffff;
    .progress-bar {
      height: 6px;
      background: rgba(0, 255, 255, 0.1);
      border-radius: 3px;
      overflow: visible;

      .progress {
        height: 100%;
        border-radius: 3px;
        width: 0;
        transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        
        .progress-icon {
          position: absolute;
          right: -8px;
          top: 50%;
          transform: translateY(-50%);
          width: 22px;
          height: 22px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
        
        &.rank-1 {
          background: linear-gradient(90deg, #2A1802 0%, #C86A01 49%, #E5D704 100%);
          .progress-icon {
            background-image: url('@/assets/left/progress-one.png');
          }
        }
        
        &.rank-2 {
          background: linear-gradient(270deg, #0ED1A3 0%, #03493E 100%);
          .progress-icon {
            background-image: url('@/assets/left/progress-two.png');
          }
        }
        
        &.rank-3 {
          background: linear-gradient(90deg, #104461 0%, #0EB2DA 100%);
          .progress-icon {
            background-image: url('@/assets/left/progress-three.png');
          }
        }
        
        &:not(.rank-1):not(.rank-2):not(.rank-3) {
          background: linear-gradient(90deg, #03142C 0%, #057BFF 49%, #05DBFF 100%);
          .progress-icon {
            background-image: url('@/assets/left/progress-four.png');
          }
        }
      }
    }
  }

  .chart-container {
    height: calc(100% - 35px);
    padding: 10px;
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
    height: 100%;
  }
}
</style> 
</style>

 src/components/datascreen/RightPanel.vue

@@ -4,7 +4,7 @@
    <div class="panel-item top-panel-item">
      <div class="box-title">本月进度值比</div>
      <div class="circle-progress">
        <v-chart class="chart" :option="circleOption" autoresize />
        <!-- <v-chart class="chart" :option="circleOption" autoresize /> -->
      </div>
    </div>

@@ -12,7 +12,7 @@
    <div class="panel-item middle-panel-item">
      <div class="box-title">各季度进度值统计</div>
      <div class="bar-chart">
        <v-chart class="chart" :option="barOption" autoresize />
        <!-- <v-chart class="chart" :option="barOption" autoresize /> -->
      </div>
    </div>

@@ -20,7 +20,7 @@
    <div class="panel-item bottom-panel-item">
      <div class="box-title">安置房类型分布</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="typeDistOption" autoresize />
        <!-- <v-chart class="chart" :option="typeDistOption" autoresize /> -->
      </div>
    </div>
  </div>