提交背景图

pyt

2025-03-21 d8f73f01aa2649817cf48048162728ea675c724a

提交背景图

 src/assets/center-bottom-bg.png

 src/assets/left-bottom-bg.png

 src/assets/left-middle-bg.png

 src/assets/left-top-bg.png

 src/assets/right-bottom-bg.png

 src/assets/right-middle-bg.png

 src/assets/right-top-bg.png

 src/components/datascreen/CenterPanel.vue

@@ -30,7 +30,6 @@

    <!-- 中间地图 -->
    <div class="center-middle panel-item">
      <div class="map-title">辖区分布</div>
      <div class="map-chart">
        <v-chart class="chart" :option="mapOption" autoresize />
      </div>
@@ -38,18 +37,7 @@

    <!-- 中间下部数据 -->
    <div class="center-bottom panel-item">
      <div class="box-title">处理进度</div>
      <div class="progress-list">
        <div class="progress-item" v-for="(item, index) in progressList" :key="index">
          <div class="progress-info">
            <span class="label">{{ item.label }}</span>
            <span class="value">{{ item.value }}</span>
          </div>
          <div class="progress-bar">
            <div class="progress" :style="{ width: item.percentage + '%' }"></div>
          </div>
        </div>
      </div>
     
    </div>
  </div>
</template>
@@ -103,7 +91,6 @@
  flex-direction: column;

  .panel-item {
    background: rgba(0, 0, 255, 0.1);
    border-radius: 10px;
  }

@@ -116,11 +103,6 @@
  .center-middle {
    flex: 1;

    .map-title {
      font-size: 24px;
      color: #7cb9e8;
    }

    .map-chart {
      height: calc(100% - 44px);
    }
@@ -128,42 +110,9 @@

  .center-bottom {
    height: 245px;
    background: url('@/assets/center-bottom-bg.png') no-repeat center center;
    background-size: 100% 100%;

    .progress-list {
      height: calc(100% - 35px);
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .progress-item {
        .progress-info {
          display: flex;
          justify-content: space-between;

          .label {
            color: #7cb9e8;
          }

          .value {
            color: #00ffff;
          }
        }

        .progress-bar {
          width: 100%;
          height: 6px;
          background: rgba(0, 255, 255, 0.1);
          border-radius: 3px;

          .progress {
            height: 100%;
            background: linear-gradient(to right, #00ffff, #7cb9e8);
            border-radius: 3px;
            transition: width 0.3s ease;
          }
        }
      }
    }
  }

  .map-data {
@@ -200,11 +149,11 @@
        }

        .value-change-up {
          color: #00ffff;
          color: #FEDB65;
        }

        .value-change-down {
          color: #FEDB65;
          color: #00ffff;
        }
      }
    }

 src/components/datascreen/LeftPanel.vue

@@ -1,23 +1,13 @@
<template>
  <div class="left-panel">
    <!-- 参与统计 -->
    <div class="statistics-box panel-item">
      <div class="box-title">已参与自主购房安置统计</div>
      <div class="statistics-content">
        <div class="stat-item">
          <div class="number">{{ totalHouseholds }}</div>
          <div class="label">总参与户数(户)</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ totalPeople }}</div>
          <div class="label">总参与人数(人)</div>
        </div>
      </div>
    <div class="statistics-box">
      <!-- <div class="box-title">各街道/乡参与排名</div> -->
    </div>
    
    <!-- 各街道参与排名 -->
    <div class="ranking-box panel-item">
      <div class="box-title">各街道/乡参与排名</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>
@@ -27,11 +17,11 @@
          </div>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
      </div> -->
    </div>

    <!-- 安置房完成比 -->
    <div class="line-chart panel-item">
    <div class="line-chart">
      <div class="box-title">安置房完成比</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="pieOption" autoresize />
@@ -94,46 +84,28 @@
  bottom: 20px;
  .statistics-box {
    height: 196px;
    background: url('@/assets/left-top-bg.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%;
  }

  .panel-item {
    background: rgba(0,0,255,0.1);
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 10px;
  }

  .box-title {
    font-size: 20px;
    color: #7cb9e8;
  }

  .statistics-content {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .number {
        font-size: 36px;
        color: #00ffff;
      }

      .label {
        font-size: 14px;
        color: #7cb9e8;
      }
    }
  }

  .ranking-item {
    display: flex;

 src/components/datascreen/RightPanel.vue

@@ -133,23 +133,27 @@
  bottom: 20px;

  .panel-item {
    background: rgba(0,0,255,0.1);
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 10px;
  }

  .top-panel-item {
    height: 268px;
    background: url('@/assets/right-top-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .middle-panel-item {
    margin-top: 21px;
    height: 303px;
    background: url('@/assets/right-middle-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .bottom-panel-item {
    margin-top: 21px;
    height: 335px;
    background: url('@/assets/right-bottom-bg.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .box-title {