From c67dbe946a1a26144529c6ee56bbe93b2ee580f1 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 24 三月 2025 15:26:23 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-screen

---
 src/components/datascreen/CenterPanel.vue |   37 +++++++++++++++++++------------------
 1 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/datascreen/CenterPanel.vue b/src/components/datascreen/CenterPanel.vue
index 737c884..ece6430 100644
--- a/src/components/datascreen/CenterPanel.vue
+++ b/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>
\ No newline at end of file

--
Gitblit v1.7.1