Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-...

hejianhao

2025-03-24 c67dbe946a1a26144529c6ee56bbe93b2ee580f1

 src/components/datascreen/CenterPanel.vue

@@ -7,7 +7,7 @@
          <img src="@/assets/center-top-left.png" alt="">
          <div>
            <div class="label">申请总户数(户)</div>
            <div class="value">8888</div>
            <div class="value">{{ data.houseHoldCount }}</div>
          </div>

        </div>
@@ -15,73 +15,46 @@
          <img src="@/assets/center-top-right.png" alt="">
          <div>
            <div class="label">本月应补偿总额(万元)</div>
            <div class="value">8888 <span>环比</span><span class="value-change value-change-down">-4%</span></div>
            <div class="value">{{ data.monthCompensationAmount }} <span>环比</span><span class="value-change value-change-down">{{ data.monthCompensationAmountRate }}</span></div>
          </div>
        </div>
        <div class="data-item">
          <img src="@/assets/center-top-right.png" alt="">
          <div>
            <div class="label">下月应补偿总额(万元)</div>
            <div class="value">8888 <span>环比</span><span class="value-change value-change-up">+4%</span></div>
            <div class="value">{{ data.nextMonthCompensationAmount }} <span>环比</span><span class="value-change value-change-up">{{ data.nextMonthCompensationAmountRate }}</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间地图 -->
    <div class="center-middle panel-item">
      <div class="map-title">辖区分布</div>
      <div class="map-chart">
        <v-chart class="chart" :option="mapOption" autoresize />
      </div>
    <div class="center-middle">
      <Map :data="data" />
    </div>

    <!-- 中间下部数据 -->
    <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>

<script>
import Map from './map.vue';
export default {
  name: 'CenterPanel',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    Map
  },
  data() {
    return {
      mapOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          data: [
            { value: 8888, name: '已完成' },
            { value: 1112, name: '未完成' }
          ],
          itemStyle: {
            color: function (params) {
              const colorList = ['#00ffff', 'rgba(0,255,255,0.2)'];
              return colorList[params.dataIndex];
            }
          }
        }]
      },
      progressList: [
        { label: '已受理', value: '2021103000001', percentage: 90 },
        { label: '已审核', value: '2021103000002', percentage: 70 },
@@ -101,9 +74,9 @@
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

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

@@ -114,68 +87,28 @@
  }

  .center-middle {
    flex: 1;

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

    .map-chart {
      height: calc(100% - 44px);
    }
    position: fixed;
    top: 281px;
  }

  .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 {
    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;
@@ -195,16 +128,17 @@
        -webkit-background-clip: text;
        background-clip: text;
        margin-left: 5px;

        span {
          font-size: 12px;
        }

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

        .value-change-down {
          color: #FEDB65;
          color: #00ffff;
        }
      }
    }
@@ -215,9 +149,5 @@
    color: #7cb9e8;
  }

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