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 | 126 +++++++++--------------------------------
1 files changed, 28 insertions(+), 98 deletions(-)
diff --git a/src/components/datascreen/CenterPanel.vue b/src/components/datascreen/CenterPanel.vue
index 9865b5a..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,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>
\ No newline at end of file
--
Gitblit v1.7.1