修改首页地图

pages/index.vue

@@ -2,17 +2,21 @@
 	<view class="home-container">
 		<view class="site-sections-list">
 			<view class="site-title">站点选择</view>
-			<checkbox-group class="site-radio" @change="onSiteChange">
+			<radio-group class="site-radio" @change="onSiteChange">
 				<label v-for="item in siteOptions" :key="item.value" class="radio-item"
-					:class="{ active: selectedSiteIds.includes(item.value), disabled: item.disable }">
-					<checkbox class="radio" :value="item.value" :disabled="item.disable"
-						:checked="selectedSiteIds.includes(item.value)" color="#547ef4" />
+					:class="{ active: item.value === siteId, disabled: item.disable }">
+					<radio class="radio" :value="item.value" :disabled="item.disable"
+						:checked="item.value === siteId" color="#547ef4" />
 					<text class="radio-text">{{ item.text }}</text>
 				</label>
-			</checkbox-group>
+			</radio-group>
 		</view>
 
 		<view class="base-info">
+			<view class="map-card">
+				<image v-if="mapUrl" class="site-map" :src="mapUrl" mode="aspectFill"></image>
+				<view v-else class="map-empty">暂无站点位置</view>
+			</view>
 			<view class="total-card">
 				<view class="total-header">
 					<view class="title">总累计运行数据</view>
@@ -36,7 +40,7 @@
 
 			<uni-section title="收入曲线" type="line" class="sections-list">
 				<view style="width:100%;height: 220px;">
-					<qiun-data-charts type="line" :chartData="revenueChartData" :optsWatch='false'
+					<qiun-data-charts type="column" :chartData="revenueChartData" :optsWatch='true'
 						:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="revenueOptions" :ontouch="true" />
 				</view>
 			</uni-section>
@@ -63,7 +67,8 @@
 			return {
 				pageScrollTop: 0,
 				siteOptions: [],
-				selectedSiteIds: [],
+				siteId: '',
+				mapUrl: '',
 				runningInfo: {},
 				revenueChartData: {},
 				revenueOptions: {
@@ -79,18 +84,7 @@
 						disabled: false,
 						splitNumber: 4
 					},
-					extra: {
-						line: {
-							type: "curve",
-							width: 2
-						},
-						area: {
-							type: "curve",
-							opacity: 0.2,
-							addLine: true,
-							gradient: true
-						}
-					}
+					extra: {}
 				},
 				sjglData: [{
 						title: "今日充电量（kWh）",
@@ -159,16 +153,19 @@
 				return list
 			},
 			onSiteChange(e) {
-				const values = e.detail.value || []
-				this.selectedSiteIds = values
+				const value = e.detail.value
+				if (value === this.siteId) return
+				this.siteId = value
 				this.updateSiteInfo()
 			},
 			updateSiteInfo() {
-				if (!this.selectedSiteIds || this.selectedSiteIds.length === 0) {
+				if (!this.siteId) {
 					this.runningInfo = {}
 					this.revenueChartData = {}
+					this.mapUrl = ''
 					return
 				}
+				this.updateMapCenter()
 				this.getRunningInfo()
 				this.getRevenueChartData()
 			},
@@ -179,66 +176,107 @@
 						return {
 							text: item.siteName,
 							value: item.siteId,
+							longitude: Number(item.longitude || 0),
+							latitude: Number(item.latitude || 0),
 							disable: !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all') ? false : !this
 								.belongSite.includes(item.siteId)
 						}
 					})
-					const defaultSite = this.siteOptions.find(item => !item.disable)?.value || ''
-					this.selectedSiteIds = defaultSite ? [defaultSite] : []
-					this.selectedSiteIds.length > 0 && this.updateSiteInfo()
+					this.siteId = this.siteOptions.find(item => !item.disable)?.value || ''
+					this.siteId && this.updateSiteInfo()
 				})
 			},
+			updateMapCenter() {
+				const site = this.siteOptions.find(item => item.value === this.siteId)
+				if (!site || !site.latitude || !site.longitude) {
+					this.mapUrl = ''
+					return
+				}
+				const lat = Number(site.latitude)
+				const lon = Number(site.longitude)
+				const zoom = 12
+				const width = 640
+				const height = 360
+				const tk = '01e99ab4472430e1c7dbfe4b5db99787'
+				const layers = 'vec_c,cva_c'
+				this.mapUrl = `https://api.tianditu.gov.cn/staticimage?center=${lon},${lat}&width=${width}&height=${height}&zoom=${zoom}&layers=${layers}&markers=${lon},${lat}&tk=${tk}`
+			},
 			getRunningInfo() {
-				const sumFields = ['totalRevenue', ...this.sjglData.map(item => item.attr)]
-				const requests = this.selectedSiteIds.map(siteId => getDzjkHomeView({
-					siteId
-				}).then(response => response?.data || {}))
-				Promise.all(requests).then(list => {
-					const result = {}
-					sumFields.forEach(key => {
-						result[key] = list.reduce((sum, item) => {
-							const value = Number(item?.[key] || 0)
-							return sum + (Number.isFinite(value) ? value : 0)
-						}, 0)
-					})
-					this.runningInfo = result
+				getDzjkHomeView({
+					siteId: this.siteId
+				}).then(response => {
+					this.runningInfo = response?.data || {}
 				})
 			},
 			getRevenueChartData() {
 				const [startTime, endTime] = this.getLastDaysRange(7)
 				const dateList = this.buildDateList(startTime, endTime)
-				const requests = this.selectedSiteIds.map(siteId => getAmmeterRevenueData({
-					siteId,
+				const requests = [getAmmeterRevenueData({
+					siteId: this.siteId,
 					startTime,
 					endTime,
 					pageSize: 200,
 					pageNum: 1
-				}).then(response => ({
-					siteId,
-					rows: response?.rows || []
-				})))
+				}).then(response => response?.rows || [])]
 				Promise.all(requests).then(list => {
+					const rows = list[0] || []
 					const categories = dateList.map(day => day.slice(5))
-					const series = list.map(item => {
-						const sumMap = {}
-						dateList.forEach(day => {
-							sumMap[day] = 0
-						})
-						item.rows.forEach(row => {
-							const day = row.dataTime || row.statisDate || row.date
-							if (!day) return
-							if (!Object.prototype.hasOwnProperty.call(sumMap, day)) {
-								sumMap[day] = 0
-							}
-							const value = Number(row.actualRevenue || row.revenue || 0)
-							sumMap[day] += Number.isFinite(value) ? value : 0
-						})
-						const name = this.siteOptions.find(opt => opt.value === item.siteId)?.text || item.siteId
-						return {
-							name,
-							data: dateList.map(day => Number((sumMap[day] || 0).toFixed(2)))
-						}
+					const sumMap = {}
+					dateList.forEach(day => {
+						sumMap[day] = 0
 					})
+					rows.forEach(row => {
+						const day = row.dataTime || row.statisDate || row.date
+						if (!day) return
+						if (!Object.prototype.hasOwnProperty.call(sumMap, day)) {
+							sumMap[day] = 0
+						}
+						const value = Number(row.actualRevenue || row.revenue || 0)
+						sumMap[day] += Number.isFinite(value) ? value : 0
+					})
+					const series = [{
+						name: '收入',
+						data: dateList.map(day => Number((sumMap[day] || 0).toFixed(2)))
+					}]
+					const values = series[0].data
+					let minVal = Math.min(...values)
+					let maxVal = Math.max(...values)
+					if (!Number.isFinite(minVal)) minVal = 0
+					if (!Number.isFinite(maxVal)) maxVal = 0
+					if (minVal === maxVal) {
+						minVal -= 1
+						maxVal += 1
+					}
+					const lower = Math.min(minVal, 0)
+					const upper = Math.max(maxVal, 0)
+					const padding = Math.max((upper - lower) * 0.1, 1)
+					this.revenueOptions = {
+						...this.revenueOptions,
+						yAxis: {
+							...(this.revenueOptions.yAxis || {}),
+							data: [{
+								min: lower - padding,
+								max: upper + padding,
+								format: (val) => Number(val).toFixed(2)
+							}]
+						},
+						extra: {
+							...(this.revenueOptions.extra || {}),
+							markLine: {
+								type: 'solid',
+								data: [{
+									value: 0,
+									lineColor: '#ff4d4f',
+									showLabel: true,
+									labelText: '0',
+									labelFontColor: '#ff4d4f',
+									labelBgColor: '#fff1f0',
+									labelBgOpacity: 0.9,
+									labelAlign: 'left'
+								}]
+							}
+						}
+					}
 					this.revenueChartData = JSON.parse(JSON.stringify({
 						categories,
 						series
@@ -278,12 +316,15 @@
 
 	.home-container {
 		background-color: #fff;
+		padding-top: 0;
 	}
 
 	.site-sections-list {
 		background: linear-gradient(to right, #547ef4, #679ff5);
-		padding: 30rpx 30rpx 100rpx;
+		padding: 30rpx 30rpx;
+		padding-bottom: 100rpx;
 		color: #fff;
+		
 
 		.site-title {
 			font-size: 28rpx;
@@ -336,6 +377,28 @@
 		padding: 30rpx;
 		background-color: #fff;
 
+		.map-card {
+			border-radius: 16rpx;
+			overflow: hidden;
+			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
+			margin-top: 30rpx;
+			background: #f3f5f8;
+
+			.site-map {
+				width: 100%;
+				height: 220px;
+			}
+
+			.map-empty {
+				height: 220px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #8a8f98;
+				font-size: 24rpx;
+			}
+		}
+
 		.total-card {
 			margin-top: 30rpx;
 			border-radius: 16rpx;

pages/ticket/list.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="container">
 		<view class="status-bar"></view>
+		<view class="page-title">工单</view>
 		<view class="btn-list">
 			<uni-row>
 				<uni-col :span="12">
@@ -129,7 +130,7 @@
 
 	.btn-list {
 		position: fixed;
-		top: var(--status-bar-height);
+		top: calc(var(--status-bar-height) + 56rpx);
 		left: 0;
 		width: 100%;
 		z-index: 2;
@@ -153,10 +154,24 @@
 	}
 
 	.content {
-		padding: 80px 30rpx 120rpx 30rpx;
+		padding: 120px 30rpx 120rpx 30rpx;
 		z-index: 1;
 	}
 
+	.page-title {
+		position: fixed;
+		top: var(--status-bar-height);
+		left: 0;
+		width: 100%;
+		z-index: 3;
+		padding: 16rpx 30rpx 10rpx;
+		font-size: 32rpx;
+		font-weight: 700;
+		color: #19242d;
+		background: #ffffff;
+		text-align: center;
+	}
+
 	// 工单列表
 	.item-list {
 		color: #4b4951;
@@ -226,4 +241,4 @@
 	.content .item-list:last-child {
 		margin-bottom: 0;
 	}
-</style>
+</style>