emsapp/pages/work/index.vue

<template>
	<view class="work-container">
		<site-switch-header :site-id="siteId" :site-type-options="siteTypeOptions" :site-address="baseInfo.siteAddress"
			:running-time="baseInfo.runningTime" @change="selectedSite" />
		<!-- 静态信息 -->
		<view class="base-info">
			<uni-group mode="card" class="install-data">
				<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item>
						<view class="grid-item-box">
							<view class="title">装机功率(MWh)</view>
							<view class="text">{{baseInfo.installPower | formatNumber}}</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box">
							<view class="title">装机容量(MWh)</view>
							<view class="text">{{baseInfo.installCapacity | formatNumber}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-group>
			<!-- 工作台 -->
			<uni-section title="工作台" type="line" class="sections-list">
				<view class="grid-body">
					<uni-grid :column="4" :showBorder="false" @change="toDetail">
						<uni-grid-item v-for="(item,index) in siteGirdList" :index="index" :key="index+'work'">
							<view class="grid-item-box work-box">
								<view class="icon iconfont" :class="item.icon" size="30"></view>
								<text class="text">{{item.text}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</uni-section>
			<!-- 一周充放曲线 uchart的组件最好放在同级-->
			<uni-section title="一周充放曲线" type="line" class="sections-list">
				<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
				<view style="width:100%;height: 250px;">
					<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
						:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
				</view>
			</uni-section>
			<!-- 当日功率曲线 uchart的组件最好放在同级-->
			<uni-section title="当日功率曲线" type="line" class="sections-list">
				<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
				<view style="width:100%;height: 250px;">
					<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
						:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import DateRangeSelect from './DateRangeSelect.vue'
	import SiteSwitchHeader from '@/components/SiteSwitchHeader/index.vue'
	import {
		getAllSites,
		getSingleSiteBaseInfo,
		getProjectDisplayData,
		getPointConfigCurve,
		getSiteAllDeviceCategory
	} from '@/api/ems/site.js'
	const createSiteTypeOptions = () => ([{
			text: '储能',
			value: 'cn',
			children: []
		},
		{
			text: '光能',
			value: 'gn',
			children: []
		},
		{
			text: '岸电',
			value: 'ad',
			children: []
		}
	])
	export default {
		components: {
			DateRangeSelect,
			SiteSwitchHeader
		},
		data() {
			return {
				// 图表数据
				weekChartTimeRange: [],
				activeChartTimeRange: [],
				weekChartData: {},
				activeChartData: {},
				curveDisplayData: [],
				curveDisplayLoadingPromise: null,
				pageScrollTop: 0,
				glqxOptions: {
					padding: [10, 5, 0, 10],
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 3,
						disableGrid: true
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
					// update: true,
					// duration: 2,
					// animation: false,
					// enableScroll: true,
					// padding: [10, 15, 10, 15]
				},
				options: {
					padding: [10, 5, 0, 10],
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 5,
						disableGrid: true
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
					// update: true,
					// duration: 2,
					// animation: false,
					// enableScroll: true,
					// padding: [10, 15, 10, 15]
				},
				// 图表数据结束
				deviceCategoryOptions: [], //当前站点包含的设备类别
				siteTypeOptions: createSiteTypeOptions(),
				siteId: '', //选择的站点ID
				baseInfo: {}, //站点基本信息
				gridList: [{
						page: 'bmszl',
						icon: 'icon-BMS',
						text: 'BMS总览',
						categoryName: 'STACK'
					},
					{
						page: 'bmsdcc',
						icon: 'icon-a-dianchicunengliangkuai',
						text: 'BMS电池簇',
						categoryName: 'CLUSTER'
					},
					{
						page: 'pcs',
						icon: 'icon-PCS',
						text: 'PCS',
						categoryName: 'PCS'
					},
					{
						page: 'db',
						icon: 'icon-dianbiao4',
						text: '电表',
						categoryName: 'AMMETER'
					},
					{
						page: 'yl',
						icon: 'icon-gongneng-diandongji',
						text: '冷却',
						categoryName: 'COOLING'
					},
					{
						page: 'dtdc',
						icon: 'icon-dantidianchi',
						text: '单体电池',
						categoryName: 'BATTERY'
					}
				]
			}
		},
		computed: {
			...mapGetters(['belongSite', 'currentSiteId']),
			siteGirdList() {
				return this.gridList.filter(i => this.deviceCategoryOptions.includes(i.categoryName))
			}
		},
		methods: {
			isAvailableSite(siteId) {
				const allSites = this.siteTypeOptions.reduce((result, typeItem) => {
					return result.concat(typeItem.children || [])
				}, [])
				const site = allSites.find(item => item.value === siteId)
				return !!(site && !site.disable)
			},
			// 更新一周冲放曲线时间范围 重置图表
			updateWeekChartDate(data) {
				this.weekChartTimeRange = data || []
				this.siteId && this.getWeekChartData()
			},
			// 更新当日功率曲线时间范围 重置图表
			updateActiveChartDate(data) {
				this.activeChartTimeRange = data || []
				this.siteId && this.getGVQXData()
			},
			toDetail(e) {
				if (!this.siteId) return uni.showToast({
					title: "请选择清单",
					icon: 'none'
				})
				const {
					index
				} = e.detail
				this.$tab.navigateTo(`/pages/work/${this.siteGirdList[index].page}/index?siteId=${this.siteId}`)
			},
			selectedSite(data) {
				const siteObj = (data.detail.value || [])[1]
				const value = siteObj?.value
				if (!value) return
				if (value === this.siteId) return
				this.siteId = value
				this.$store.commit('SET_CURRENTSITEID', value)
				this.updateSiteInfo()
			},
			updateSiteInfo() {
				if (!this.siteId) return
				this.curveDisplayData = []
				this.curveDisplayLoadingPromise = null
				this.getSiteBaseInfo()
				this.getWeekChartData()
				this.getGVQXData()
				this.getSiteDeviceCategory()
			},
			getFieldName(fieldCode) {
				const raw = String(fieldCode || '').trim()
				if (!raw) return ''
				const index = raw.lastIndexOf('__')
				return index >= 0 ? raw.slice(index + 2) : raw
			},
			normalizeDateTime(value, endOfDay) {
				const raw = String(value || '').trim()
				if (!raw) return ''
				if (raw.includes(' ')) return raw
				return `${raw} ${endOfDay ? '23:59:59' : '00:00:00'}`
			},
			parseToTimestamp(value) {
				if (!value) return null
				const timestamp = new Date(value).getTime()
				return Number.isNaN(timestamp) ? null : timestamp
			},
			ensureCurveDisplayData() {
				if (!this.siteId) return Promise.resolve([])
				if (this.curveDisplayData.length > 0) return Promise.resolve(this.curveDisplayData)
				if (this.curveDisplayLoadingPromise) return this.curveDisplayLoadingPromise
				this.curveDisplayLoadingPromise = getProjectDisplayData(this.siteId)
					.then(response => {
						this.curveDisplayData = response?.data || []
						return this.curveDisplayData
					})
					.catch(() => {
						this.curveDisplayData = []
						return []
					})
					.finally(() => {
						this.curveDisplayLoadingPromise = null
					})
				return this.curveDisplayLoadingPromise
			},
			fetchCurveSeries(pointId, name, startTime, endTime) {
				if (!pointId) return Promise.resolve(null)
				return getPointConfigCurve({
					siteId: this.siteId,
					pointId,
					pointType: 'data',
					rangeType: 'custom',
					startTime,
					endTime
				}).then(response => {
					const list = response?.data || []
					const points = list.map(item => {
						const timestamp = this.parseToTimestamp(item.dataTime)
						const value = Number(item.pointValue)
						if (!timestamp || Number.isNaN(value)) return null
						return {
							timestamp,
							label: item.dataTime,
							value
						}
					}).filter(Boolean)
					return {
						name,
						points
					}
				}).catch(() => null)
			},
			buildLineChartData(seriesList) {
				const validSeries = (seriesList || []).filter(item => item && (item.points || []).length > 0)
				if (validSeries.length === 0) {
					return {
						categories: [],
						series: []
					}
				}
				const labelByTimestamp = {}
				const timestampSet = new Set()
				validSeries.forEach(item => {
					item.points.forEach(point => {
						timestampSet.add(point.timestamp)
						if (!labelByTimestamp[point.timestamp]) {
							labelByTimestamp[point.timestamp] = point.label
						}
					})
				})
				const sortedTimestamps = Array.from(timestampSet).sort((a, b) => a - b)
				const categories = sortedTimestamps.map(item => labelByTimestamp[item])
				const series = validSeries.map(item => {
					const pointMap = {}
					item.points.forEach(point => {
						pointMap[point.timestamp] = point.value
					})
					return {
						name: item.name,
						data: sortedTimestamps.map(timestamp => pointMap[timestamp] ?? null)
					}
				})
				return {
					categories,
					series
				}
			},
			findActiveCurveRow(sectionRows, keywords = []) {
				const keywordSet = new Set((keywords || []).map(item => String(item || '').toLowerCase()))
				return (sectionRows || []).find(row => {
					const fieldCode = this.getFieldName(row?.fieldCode).toLowerCase()
					const fieldName = String(row?.fieldName || '').toLowerCase()
					if (keywordSet.has(fieldCode) || keywordSet.has(fieldName)) return true
					return Array.from(keywordSet).some(keyword => fieldCode.includes(keyword) || fieldName.includes(keyword))
				})
			},
			getSiteList() {
				getAllSites().then(response => {
					const data = response?.data || []
					const canAccessAll = !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all')
					const siteTypeOptions = createSiteTypeOptions().map(item => ({
						...item,
						children: []
					}))
					data.forEach(item => {
						if (!canAccessAll && !this.belongSite.includes(item.siteId)) return
						const siteType = (item.siteType || item.type || 'cn').toString().toLowerCase()
						const typeOption = siteTypeOptions.find(i => i.value === siteType) || siteTypeOptions.find(i => i.value === 'cn')
						if (!typeOption) return
						typeOption.children.push({
							text: item.siteName,
							value: item.siteId,
							id: item.id
						})
					})
					this.siteTypeOptions = siteTypeOptions.filter(item => (item.children || []).length > 0)
					const siteChildren = this.siteTypeOptions.reduce((result, typeItem) => {
						return result.concat(typeItem.children || [])
					}, [])
					// 设置默认展示的站点
					const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (siteChildren[0]?.value || '')
					if (defaultSiteId) {
						this.siteId = defaultSiteId
						this.$store.commit('SET_CURRENTSITEID', defaultSiteId)
						this.updateSiteInfo()
					}
				})
			},
			getSiteBaseInfo() {
				getSingleSiteBaseInfo({
					siteId: this.siteId
				}).then(response => {
					console.log('获取站点基本信息', response)
					this.baseInfo = response?.data || {}
				})
			},
			getSiteDeviceCategory() {
				getSiteAllDeviceCategory({
					siteId: this.siteId
				}).then(response => {
					this.deviceCategoryOptions = response?.data || []
				})
			},
			handleDate(date) {
				if (!date) return date
				const time = new Date(date)
				const month = time.getMonth() + 1,
					day = time.getDate()
				return `${month<10?'0'+month : month}/${day<10 ? '0'+day : day}`
			},
			getGVQXData() {
				this.$refs.activeChartDateRangeSelect.showBtnLoading(true)
				const startTime = this.normalizeDateTime(this.activeChartTimeRange[0], false)
				const endTime = this.normalizeDateTime(this.activeChartTimeRange[1], true)
				this.ensureCurveDisplayData().then(displayData => {
					const sectionRows = (displayData || []).filter(item =>
						item && item.sectionName === '当日功率曲线' && item.useFixedDisplay !== 1 && item.dataPoint
					)
					const targetRows = [{
							name: '电网功率',
							row: this.findActiveCurveRow(sectionRows, ['gridpower', '电网功率'])
						},
						{
							name: '负载功率',
							row: this.findActiveCurveRow(sectionRows, ['loadpower', '负载功率'])
						},
						{
							name: '储能功率',
							row: this.findActiveCurveRow(sectionRows, ['storagepower', '储能功率'])
						}
					].filter(item => item.row && item.row.dataPoint)
					const tasks = targetRows.map(item => this.fetchCurveSeries(String(item.row.dataPoint).trim(), item.name, startTime,
						endTime))
					return Promise.all(tasks).then(series => {
						this.activeChartData = JSON.parse(JSON.stringify(this.buildLineChartData((series || []).filter(Boolean))))
					})
				}).finally(() => this.$refs.activeChartDateRangeSelect.showBtnLoading(false))

			},
			getWeekChartData() {
				this.$refs.weekChartDateRangeSelect.showBtnLoading(true)
				const startTime = this.normalizeDateTime(this.weekChartTimeRange[0], false)
				const endTime = this.normalizeDateTime(this.weekChartTimeRange[1], true)
				this.ensureCurveDisplayData().then(displayData => {
					const sectionRows = (displayData || []).filter(item =>
						item && item.sectionName === '一周充放曲线' && item.useFixedDisplay !== 1 && item.dataPoint
					)
					const tasks = sectionRows.map(row => {
						const pointId = String(row.dataPoint || '').trim()
						if (!pointId) return Promise.resolve(null)
						const name = row.fieldName || this.getFieldName(row.fieldCode) || pointId
						return this.fetchCurveSeries(pointId, name, startTime, endTime)
					})
					return Promise.all(tasks).then(series => {
						this.weekChartData = JSON.parse(JSON.stringify(this.buildLineChartData((series || []).filter(Boolean))))
					})
				}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
			}
		},
		watch: {
			currentSiteId(newSiteId) {
				if (!newSiteId || newSiteId === this.siteId) return
				if (!this.isAvailableSite(newSiteId)) return
				this.siteId = newSiteId
				this.updateSiteInfo()
			}
		},
		// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
		onLoad() {
			this.$nextTick(() => {
				this.getSiteList()
				this.$refs.weekChartDateRangeSelect.init()
				this.$refs.activeChartDateRangeSelect.init(true)
			})
		},
		// 页面滚动 设置pageScrollTop chart显示需要
		onPageScroll(e) {
			this.pageScrollTop = e.scrollTop
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
		font-size: 26rpx;
		line-height: 30rpx;
	}

	view {
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		margin-top: 10rpx;
	}

	// 基本信息
	.base-info {
		margin-top: -80rpx;
		border-radius: 80rpx 80rpx 0 0;
		padding: 30rpx;
		background-color: #fff;

		// 装机功率
		.install-data {
			.grid-item-box {
				padding-top: 6rpx;
				padding-bottom: 6rpx;

				.text {
					margin-top: 20rpx;
					color: #000;
				}
			}

		}


		.sections-list {
			margin-bottom: 10rpx;

			::v-deep &>.uni-section-header {
				font-weight: 700;
				font-size: 26rpx;
				line-height: 30rpx;
			}
		}

		.sections-list:not(:first-child) {
			margin-top: 40rpx;
		}

		::v-deep {
			.uni-section__content-title {
				font-size: 26rpx !important;
			}

			.uni-select__input-box {
				width: 100%;

				.uni-select__input-text {
					font-size: 24rpx;
				}
			}

			.uni-select__selector-empty,
			.uni-select__selector-item {
				font-size: 24rpx;
				line-height: 36rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				text-align: left;
			}

			// .uni-date__x-input {
			// 	height: 50rpx;
			// 	line-height: 50rpx;
			// 	font-size: 26rpx;
			// }
		}

		.work-box {

			.icon {
				font-size: 52rpx;
				color: #547ef4;
			}

			.text {
				font-size: 26rpx;
				padding-top: 10rpx;
				color: #000;
			}
		}



		.base-lists {
			font-size: 24rpx;
			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>