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,39 +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-chart">
        <v-chart class="chart" :option="mapOption" autoresize />
      </div>
    <div class="center-middle">
      <Map :data="data" />
    </div>
    <!-- 中间下部数据 -->
    <div class="center-bottom panel-item">
    </div>
  </div>
</template>
<script>
import Map from './map.vue';
export default {
  name: 'CenterPanel',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    Map
  },
  data() {
    return {
      mapOption: {},
      progressList: [
        { label: '已受理', value: '2021103000001', percentage: 90 },
        { label: '已审核', value: '2021103000002', percentage: 70 },
@@ -67,6 +74,7 @@
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .panel-item {
    border-radius: 10px;
@@ -79,11 +87,8 @@
  }
  .center-middle {
    flex: 1;
    .map-chart {
      height: calc(100% - 44px);
    }
    position: fixed;
    top: 281px;
  }
  .center-bottom {
@@ -144,9 +149,5 @@
    color: #7cb9e8;
  }
  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}
</style>