api/ems/site.js

@@ -75,15 +75,28 @@ export function getClusterDataInfoList(data) {
 	})
 }
 // 单体电池图表
-export function getSingleBatteryData({
+export function getSingleBatteryData(data) {
-	siteId,
-	deviceId,
-	clusterDeviceId,
-	startDate,
-	endDate
-}) {
 	return request({
-		url: `/ems/siteMonitor/getSingleBatteryData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
+		url: `/ems/siteMonitor/getSingleBatteryData`, //?siteId=${siteId}&deviceId=${deviceId}&startDate=${startDate}&endDate=${endDate}&clusterDeviceId=${clusterDeviceId}`,
-		method: 'get'
+		method: 'get',
+		data
+	})
+}
+
+//获取单个站点的基本信息
+export function getSingleSiteBaseInfo(data) {
+	return request({
+		url: `/ems/siteMap/getSingleSiteBaseInfo`, //?siteId=${siteId}`,
+		method: 'get',
+		data
+	})
+}
+
+// 一周冲放曲线
+export function getSevenChargeData(data) {
+	return request({
+		url: `/ems/siteMap/getSevenChargeData`, //?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
+		method: 'get',
+		data
 	})
 }

pages/work/WeekChart.vue

@@ -0,0 +1,11 @@
+<template>
+	<view class="">
+		一周功率曲线
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/work/dtdc/index.vue

@@ -75,6 +75,9 @@
 						<uni-data-select :clear="false" v-model="search.clusterId"
 							:localdata="clusterOptions"></uni-data-select>
 					</uni-forms-item>
+					<uni-forms-item label="编号">
+						<uni-easyinput type="text" v-model="search.batteryId" placeholder="请输入编号" />
+					</uni-forms-item>
 				</uni-forms>
 				<view class="button-group" style="text-align: center;">
 					<button type="default" size="mini" @click="onReset">重置</button>
@@ -116,7 +119,8 @@
 				clusterOptions: [],
 				search: {
 					stackId: '',
-					clusterId: ''
+					clusterId: '',
+					batteryId: ''
 				},
 				list: [],
 				siteId: '',
@@ -166,7 +170,8 @@
 			onReset() {
 				this.search = {
 					stackId: '',
-					clusterId: ''
+					clusterId: '',
+					batteryId: ''
 				}
 				this.clusterOptions = []
 				this.pageNum = 1
@@ -215,7 +220,8 @@
 				}
 				const {
 					stackId: stackDeviceId,
-					clusterId: clusterDeviceId
+					clusterId: clusterDeviceId,
+					batteryId
 				} = this.search
 				const {
 					siteId,
@@ -225,11 +231,12 @@
 				getClusterDataInfoList({
 					stackDeviceId,
 					clusterDeviceId,
+					batteryId,
 					siteId,
 					pageNum,
 					pageSize
 				}).then(response => {
-					this.list = this.list.concat(response?.rows || []);
+					this.list = this.list.concat(response?.rows?.[0]?.batteryList || []);
 					this.total = response?.total || 0
 				}).finally(() => {
 					uni.hideLoading()

pages/work/index.vue

@@ -1,35 +1,120 @@
 <template>
 	<view class="work-container">
 		<!-- 站点选择列表 -->
-		<uni-section title="站点选择" type="line" titleFontSize='16px' class="uni-pa-5">
+		<uni-section title="业态选择" type="line" :titleFontSize="titleFontSize" class="sections-list">
-			<uni-data-select :clear="false" v-model="siteId" :localdata="siteList"
+			<uni-row>
-				@change="selectedSite"></uni-data-select>
+				<uni-col :span="10" :offset='1'>
+					<uni-section title="业态列表" titleFontSize="14px">
+						<uni-data-select :clear="false" :value="siteType" :localdata="siteTypeOptions"
+							@change="selectedSiteType"></uni-data-select>
+					</uni-section>
+				</uni-col>
+				<uni-col :span="10" :offset='2'>
+					<uni-section title="可选清单" titleFontSize="14px">
+						<uni-data-select ref="siteListSelect" :clear="false" :value="siteId"
+							:localdata="siteType ===1 ? siteList : []" @change="selectedSite"></uni-data-select>
+					</uni-section>
+				</uni-col>
+			</uni-row>
+		</uni-section>
+		<!-- 静态信息 -->
+		<uni-section title="静态信息" type="line" :titleFontSize="titleFontSize" class="sections-list">
+			<view class="base-lists" v-for="(item,index) in singleZdInfo" :key="index+'zdBaseInfo'">
+				<text class="left">{{item.title}}：</text>
+				<text class="right">{{baseInfo[item.attr]}}</text>
+			</view>
 		</uni-section>
 		<!-- 菜单 -->
-		<!-- <uni-section title="工作台" type="line" titleFontSize='16px'></uni-section> -->
+		<uni-section title="工作台" type="line" :titleFontSize="titleFontSize" class="sections-list">
-		<view class="grid-body">
+			<view class="grid-body">
-			<uni-grid :column="4" :showBorder="false" @change="toDetail">
+				<uni-grid :column="4" :showBorder="false" @change="toDetail">
-				<uni-grid-item v-for="(item,index) in gridList" :index="index" :key="index+'work'">
+					<uni-grid-item v-for="(item,index) in gridList" :index="index" :key="index+'work'">
-					<view class="grid-item-box">
+						<view class="grid-item-box">
-						<view class="icon iconfont" :class="item.icon" size="30"></view>
+							<view class="icon iconfont" :class="item.icon" size="30"></view>
-						<text class="text">{{item.text}}</text>
+							<text class="text">{{item.text}}</text>
-					</view>
+						</view>
-				</uni-grid-item>
+					</uni-grid-item>
-
+				</uni-grid>
-			</uni-grid>
+			</view>
-		</view>
+		</uni-section>
+		<!-- 一周功率曲线 uchart的组件最好放在同级-->
+		<uni-section title="一周功率曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
+			<!-- <week-chart /> -->
+			<view style="width:100%;height: 250px;">
+				<qiun-data-charts type="line" :chartData="chartsData" :optsWatch='false' :inScrollView="true"
+					:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
+			</view>
+		</uni-section>
 	</view>
 </template>
 
 <script>
+	import WeekChart from './WeekChart.vue'
 	import {
-		getAllSites
+		getAllSites,
+		getSingleSiteBaseInfo,
+		getSevenChargeData,
 	} from '@/api/ems/site.js'
 	export default {
+		components: {
+			WeekChart
+		},
 		data() {
 			return {
+				// 图表数据
+				chartsData: {},
+				pageScrollTop: 0,
+				options: {
+					enableScroll: true,
+					xAxis: {
+						scrollShow: true,
+						itemCount: 7,
+						disableGrid: true
+					},
+					update: true,
+					// duration: 2,
+					// animation: false,
+					// enableScroll: true,
+					// padding: [10, 15, 10, 15]
+				},
+
+				// 图表数据结束
+
+				titleFontSize: '16px',
+				siteType: 1,
+				siteTypeOptions: [{
+						text: '储能',
+						value: 1,
+					},
+					{
+						text: '光能',
+						value: 2,
+					},
+					{
+						text: '岸电',
+						value: 3,
+					}
+				],
 				siteList: [],
 				siteId: '', //选择的站点ID
+				baseInfo: {}, //站点基本信息
+				singleZdInfo: [{
+						title: "电站位置",
+						attr: "siteAddress",
+					},
+					{
+						title: "投运时间",
+						attr: "runningTime",
+					},
+					{
+						title: "装机功率(MW)",
+						attr: "installPower",
+					},
+					{
+						title: "装机容量(MW)",
+						attr: "installCapacity",
+					},
+				],
 				gridList: [{
 						page: 'bmszl',
 						icon: 'icon-BMS',
@@ -60,31 +145,97 @@
 		},
 		methods: {
 			toDetail(e) {
+				if (!this.siteId) return uni.showToast({
+					title: "请选择清单",
+					icon: 'none'
+				})
 				const {
 					index
 				} = e.detail
 				this.$tab.navigateTo(`/pages/work/${this.gridList[index].page}/index?siteId=${this.siteId}`)
 			},
 			selectedSite(id) {
+				if (id === this.siteId) return
 				this.siteId = id
+				if (this.siteType === 1) {
+					this.getSiteBaseInfo()
+					this.getWeekChartData()
+				}
+			},
+			selectedSiteType(id) {
+				if (id === this.siteType) return
+				this.siteType = id
+				this.siteId = ''
+				this.baseInfo = {}
+				this.chartsData = {}
+			},
+			getSiteBaseInfo() {
+				getSingleSiteBaseInfo({
+					siteId: this.siteId
+				}).then(response => {
+					console.log('获取站点基本信息', response)
+					this.baseInfo = response?.data || {}
+				})
+			},
+			getSiteList() {
+				getAllSites().then(response => {
+					const data = response?.data || []
+					this.siteList = data.map(item => {
+						return {
+							text: item.siteName,
+							value: item.siteId,
+							id: item.id
+						}
+					})
+					// 设置默认展示的站点
+					if (data.length > 0) {
+						this.siteId = data[0].siteId
+						this.getSiteBaseInfo()
+						this.getWeekChartData()
+					}
+				})
+			},
+			getWeekChartData() {
+				getSevenChargeData({
+					siteId: this.siteId,
+					startDate: '', //timeRange[0],
+					endDate: '', //timeRange[1]
+				}).then(response => {
+					console.log('一周功率曲线', response)
+					let data = response?.data || [],
+						categories = [],
+						chargedCap = [],
+						disChargedCap = []
+					data.forEach(item => {
+						categories.push(item.ammeterDate || undefined)
+						chargedCap.push(item.chargedCap || undefined)
+						disChargedCap.push(item.disChargedCap || undefined)
+					})
+					this.chartsData = JSON.parse(JSON.stringify({
+						categories,
+						series: [{
+								"name": '充电量',
+								"data": chargedCap
+							},
+							{
+								"name": '放电量',
+								"data": disChargedCap
+							}
+						]
+					}))
+				})
 			}
 		},
 		// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
 		mounted() {
-			getAllSites().then(response => {
+			if (this.siteType === 1) {
-				console.log('返回数据', response)
+				this.getSiteList()
-				const data = response?.data || []
+			}
-				this.siteList = data.map(item => {
+
-					return {
+		},
-						text: item.siteName,
+		onPageScroll(e) {
-						value: item.siteId,
+			this.pageScrollTop = e.scrollTop
-						id: item.id
+		},
-					}
-				})
-				// 设置默认展示的站点
-				data.length > 0 && (this.siteId = data[0].siteId)
-			})
-		}
 	}
 </script>
 
@@ -112,6 +263,10 @@
 		margin-top: 10rpx;
 	}
 
+	.sections-list:not(:first-child) {
+		margin-top: 40rpx;
+	}
+
 	.grid-item-box {
 		flex: 1;
 		/* #ifndef APP-NVUE */
@@ -120,19 +275,29 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: 15px 0;
+		padding: 30rpx 0;
-	}
-
-	.uni-margin-wrap {
-		width: 690rpx;
-		width: 100%;
-		;
 	}
 
 	.icon {
-		font-size: 26px;
+		font-size: 52rpx;
 	}
 
+	.base-lists {
+		font-size: 28rpx;
+		line-height: 40rpx;
+		padding: 10rpx 20rpx;
+		padding-left: 40rpx;
+
+		.left {
+			width: 220rpx;
+			display: inline-block;
+			color: #666;
+		}
+
+		.right {
+			color: #333;
+		}
+	}
 
 	@media screen and (min-width: 500px) {}
 </style>