From 04477a62f8966e9aabc31421bab138960eff323e Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期三, 26 三月 2025 15:57:29 +0800
Subject: [PATCH] 除地图外所有接口对接、样式调整
---
src/components/BottomCharts.vue | 458 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 309 insertions(+), 149 deletions(-)
diff --git a/src/components/BottomCharts.vue b/src/components/BottomCharts.vue
index d4e0544..6896cc2 100644
--- a/src/components/BottomCharts.vue
+++ b/src/components/BottomCharts.vue
@@ -1,12 +1,32 @@
<template>
<div class="bottom-charts">
- <div class="chart-group">
- <div class="chart-title">收入趋势</div>
- <div class="income-chart" ref="incomeChart"></div>
+ <div class="chart-container">
+ <div class="chart-group">
+ <div class="chart-title">租金收入趋势图</div>
+ <div class="income-chart" ref="incomeChart"></div>
+ </div>
+ <div class="chart-group">
+ <div class="chart-title">租户数量趋势图</div>
+ <div class="trend-chart" ref="rentTrendChart"></div>
+ </div>
</div>
- <div class="chart-group">
- <div class="chart-title">租金收入趋势图</div>
- <div class="trend-chart" ref="rentTrendChart"></div>
+ <div class="map-container">
+ <div class="map-marker-item" @click="handleMapMarkerClick('已出租')" :class="{ active: activeStatus === '已出租' }">
+ <div class="map-marker-item-icon"></div>
+ <div class="map-marker-item-text">已出租</div>
+ </div>
+ <div class="map-marker-item" @click="handleMapMarkerClick('待出租')" :class="{ active: activeStatus === '待出租' }">
+ <div class="map-marker-item-icon"></div>
+ <div class="map-marker-item-text">待出租</div>
+ </div>
+ <div class="map-marker-item" @click="handleMapMarkerClick('维修中')" :class="{ active: activeStatus === '维修中' }">
+ <div class="map-marker-item-icon"></div>
+ <div class="map-marker-item-text">维修中</div>
+ </div>
+ <div class="map-marker-item" @click="handleMapMarkerClick('欠费')" :class="{ active: activeStatus === '欠费' }">
+ <div class="map-marker-item-icon"></div>
+ <div class="map-marker-item-text">欠费</div>
+ </div>
</div>
</div>
</template>
@@ -16,12 +36,23 @@
export default {
name: 'BottomCharts',
+ props: {
+ rentIncomeTrend: {
+ type: Array,
+ default: () => []
+ },
+ tenantCountTrend: {
+ type: Array,
+ default: () => []
+ }
+ },
data() {
return {
charts: {
income: null,
rentTrend: null
- }
+ },
+ activeStatus: null
}
},
mounted() {
@@ -30,175 +61,202 @@
})
},
methods: {
+ handleMapMarkerClick(status) {
+ if (this.activeStatus === status) {
+ this.activeStatus = null
+ this.$store.commit('SET_MAP_MARKER_STATUS', 'all')
+ } else {
+ this.activeStatus = status
+ this.$store.commit('SET_MAP_MARKER_STATUS', status)
+ }
+ },
initCharts() {
- // 收入趋势图表
- this.charts.income = echarts.init(this.$refs.incomeChart)
- this.charts.income.setOption({
- grid: {
- top: '15%',
- left: '3%',
- right: '3%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['23-4月', '23-12月', '24-3月', '24-4月', '24-5月', '24-6月', '25-3月'],
- axisLine: {
- lineStyle: {
+ // 租金收入趋势图表
+ if (Object.keys(this.rentIncomeTrend).length > 0) {
+ this.charts.income = echarts.init(this.$refs.incomeChart)
+ this.charts.income.setOption({
+ grid: {
+ top: '15%',
+ left: '5%',
+ right: '5%',
+ bottom: '5%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ confine: true
+ },
+ xAxis: {
+ type: 'category',
+ data: this.rentIncomeTrend.quarters,
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ color: '#fff',
+ interval: 0,
+ rotate: 30
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
color: '#fff'
}
},
- axisLabel: {
- color: '#fff'
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- show: true,
+ series: [{
+ data: this.rentIncomeTrend.incomeData,
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 8,
lineStyle: {
+ color: '#ffd700',
+ width: 2
+ },
+ itemStyle: {
+ color: '#ffd700'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(255, 215, 0, 0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(255, 215, 0, 0.1)'
+ }]
+ }
+ }
+ }]
+ })
+ }
+ // 租户数量趋势图表
+ if (this.tenantCountTrend.length > 0) {
+ this.charts.rentTrend = echarts.init(this.$refs.rentTrendChart)
+ this.charts.rentTrend.setOption({
+ grid: {
+ top: '15%',
+ left: '5%',
+ right: '5%',
+ bottom: '5%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ confine: true
+ },
+ xAxis: {
+ type: 'category',
+ data: this.tenantCountTrend.map(item => item.date),
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ color: '#fff',
+ interval: 0,
+ rotate: 30
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
color: '#fff'
}
},
- axisLabel: {
- color: '#fff'
- }
- },
- series: [{
- data: [100, 400, 200, 300, 200, 400, 300],
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- lineStyle: {
- color: '#ffd700',
- width: 2
- },
- itemStyle: {
- color: '#ffd700'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(255, 215, 0, 0.3)'
- }, {
- offset: 1,
- color: 'rgba(255, 215, 0, 0.1)'
- }]
- }
- }
- }]
- })
-
- // 租金趋势图表
- this.charts.rentTrend = echarts.init(this.$refs.rentTrendChart)
- this.charts.rentTrend.setOption({
- grid: {
- top: '15%',
- left: '3%',
- right: '3%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['23-4月', '23-12月', '24-3月', '24-4月', '24-5月', '24-6月', '25-3月'],
- axisLine: {
+ series: [{
+ data: this.tenantCountTrend.map(item => item.count),
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 8,
lineStyle: {
- color: '#fff'
+ color: '#87F7C7',
+ width: 2
+ },
+ itemStyle: {
+ color: '#87F7C7'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(135,247,195,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(135,247,195,0.1)'
+ }]
+ }
}
- },
- axisLabel: {
- color: '#fff'
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff'
- }
- },
- axisLabel: {
- color: '#fff'
- }
- },
- series: [{
- data: [300, 200, 400, 300, 500, 400, 300],
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 8,
- lineStyle: {
- color: '#4facfe',
- width: 2
- },
- itemStyle: {
- color: '#4facfe'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(79,172,254,0.3)'
- }, {
- offset: 1,
- color: 'rgba(79,172,254,0.1)'
- }]
- }
- }
- }]
- })
-
+ }]
+ })
+ }
window.addEventListener('resize', () => {
Object.values(this.charts).forEach(chart => {
chart && chart.resize()
})
})
- }
+ },
}
}
</script>
-<style scoped>
+<style scoped lang="scss">
.bottom-charts {
height: 200px;
- width: 700px;
- position: fixed;
+ width: 100%;
+ position: absolute;
bottom: 0;
left: 0;
z-index: 1003;
display: flex;
- gap: 10px;
+ justify-content: space-between;
+ padding: 0 20px;
+ pointer-events: none;
+}
+
+.chart-container {
+ display: flex;
+ gap: 20px;
+ flex-shrink: 0;
+ width: 800px;
+ pointer-events: auto;
}
.chart-group {
- flex: 1;
+ width: 390px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 10px;
@@ -213,5 +271,107 @@
.income-chart,
.trend-chart {
height: calc(100% - 30px);
+ width: 100%;
}
-</style>
\ No newline at end of file
+
+.map-container {
+ color: #fff;
+ display: flex;
+ align-items: end;
+ gap: 20px;
+ margin-bottom: 35px;
+ margin-right: 35px;
+ pointer-events: auto;
+}
+
+.map-marker-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+
+ .map-marker-item-icon {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ position: relative;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ opacity: 0;
+ }
+ }
+
+ &.active {
+ .map-marker-item-icon {
+ &::before,
+ &::after {
+ animation: ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+ }
+
+ &::after {
+ animation-delay: 0.75s;
+ }
+ }
+ }
+
+ &:nth-child(1) {
+ .map-marker-item-icon {
+ background-color: #4fd9ff;
+ &::before,
+ &::after {
+ border: 2px solid #4fd9ff;
+ }
+ }
+ }
+
+ &:nth-child(2) {
+ .map-marker-item-icon {
+ background-color: #faad14;
+ &::before,
+ &::after {
+ border: 2px solid #faad14;
+ }
+ }
+ }
+
+ &:nth-child(3) {
+ .map-marker-item-icon {
+ background-color: #ff4d4f;
+ &::before,
+ &::after {
+ border: 2px solid #ff4d4f;
+ }
+ }
+ }
+
+ &:nth-child(4) {
+ .map-marker-item-icon {
+ background-color: #39c5bb;
+ &::before,
+ &::after {
+ border: 2px solid #39c5bb;
+ }
+ }
+ }
+}
+
+@keyframes ripple {
+ 0% {
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: translate(-50%, -50%) scale(2.5);
+ opacity: 0;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.7.1