emsapp/pages/work/index.vue

<template>
	<view class="work-container">
		<!-- 站点选择列表 -->
		<uni-section title="业态选择" type="line" :titleFontSize="titleFontSize" class="sections-list">
			<uni-row>
				<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="titleFontSize" 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">
							<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" :titleFontSize="titleFontSize" class="sections-list">
			<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
			<view style="width:100%;height: 250px;">
				<qiun-data-charts type="line" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
					:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
			</view>
		</uni-section>
		<!-- 当日功率曲线 uchart的组件最好放在同级-->
		<uni-section title="当日功率曲线" type="line" :titleFontSize="titleFontSize" class="sections-list">
			<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
			<view style="width:100%;height: 250px;">
				<qiun-data-charts type="line" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
					:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
			</view>
		</uni-section>
	</view>
</template>

<script>
	import DateRangeSelect from './DateRangeSelect.vue'
	import {
		getAllSites,
		getSingleSiteBaseInfo,
		getSevenChargeData,
		getPointData,
		getSiteAllDeviceCategory
	} from '@/api/ems/site.js'
	export default {
		components: {
			DateRangeSelect
		},
		data() {
			return {
				// 图表数据
				weekChartTimeRange: [],
				activeChartTimeRange: [],
				weekChartData: {},
				activeChartData: {},
				pageScrollTop: 0,
				glqxOptions: {
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 3,
						disableGrid: true
					},
					// update: true,
					// duration: 2,
					// animation: false,
					// enableScroll: true,
					// padding: [10, 15, 10, 15]
				},
				options: {
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 5,
						disableGrid: true
					},
					// update: true,
					// duration: 2,
					// animation: false,
					// enableScroll: true,
					// padding: [10, 15, 10, 15]
				},
				// 图表数据结束
				deviceCategoryOptions: [], //当前站点包含的设备类别
				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',
						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: 'dtdc',
						icon: 'icon-dantidianchi',
						text: '单体电池',
						categoryName: 'BATTERY'
					}
				]
			}
		},
		computed: {
			siteGirdList() {
				return this.gridList.filter(i => this.deviceCategoryOptions.includes(i.categoryName))
			}
		},
		methods: {
			// 更新一周冲放曲线时间范围 重置图表
			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.gridList[index].page}/index?siteId=${this.siteId}`)
			},
			selectedSite(id) {
				if (id === this.siteId) return
				this.siteId = id
				if (this.siteType === 1) {
					this.updateSiteInfo()
				}
			},
			updateSiteInfo() {
				if (!this.siteId) return
				this.getSiteBaseInfo()
				this.getWeekChartData()
				this.getGVQXData()
				this.getSiteDeviceCategory()
			},
			selectedSiteType(id) {
				if (id === this.siteType) return
				this.siteType = id
				this.siteId = ''
				this.baseInfo = {}
				this.weekChartData = {}
				this.activeChartData = {}
			},
			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.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)
				getPointData({
					siteId: this.siteId,
					startDate: this.activeChartTimeRange[0],
					endDate: this.activeChartTimeRange[1]
				}).then(response => {
					console.log('当日功率曲线', response)
					let data = response?.data || [],
						categories = [],
						source = [{
								name: '电网功率',
								attr: 'gridPower',
								data: []
							},
							{
								name: '负载功率',
								attr: 'loadPower',
								data: []
							},
							{
								name: '储能功率',
								attr: 'storagePower',
								data: []
							},
							{
								name: '光伏功率',
								attr: 'pvPower',
								data: []
							},
							{
								name: 'soc平均值',
								attr: 'avgSoc',
								data: []
							},
							{
								name: 'soh平均值',
								attr: 'avgSoh',
								data: []
							},
							{
								name: '电池平均温度平均值平均值',
								attr: 'avgTemp',
								data: []
							},

						]
					data.forEach((item) => {
						categories.push(item.statisDate || undefined)
						source.forEach(i => i.data.push(item[i.attr]))
					})
					this.activeChartData = JSON.parse(JSON.stringify({
						categories,
						series: source
					}))
				}).finally(() => this.$refs.activeChartDateRangeSelect.showBtnLoading(false))

			},
			getWeekChartData() {
				this.$refs.weekChartDateRangeSelect.showBtnLoading(true)
				getSevenChargeData({
					siteId: this.siteId,
					startDate: this.weekChartTimeRange[0],
					endDate: this.weekChartTimeRange[1]
				}).then(response => {
					console.log('一周功率曲线', response)
					let data = response?.data || [],
						categories = [],
						chargedCap = [],
						disChargedCap = []
					data.forEach(item => {
						categories.push(this.handleDate(item.ammeterDate) || undefined)
						chargedCap.push(item.chargedCap)
						disChargedCap.push(item.disChargedCap)
					})
					this.weekChartData = JSON.parse(JSON.stringify({
						categories,
						series: [{
								"name": '充电量',
								"data": chargedCap
							},
							{
								"name": '放电量',
								"data": disChargedCap
							}
						]
					}))
				}).finally(() => this.$refs.weekChartDateRangeSelect.showBtnLoading(false))
			}
		},
		// 页面切换不会重新调用，如果希望每次切换页面都重新调接口，使用onShow
		mounted() {
			this.$nextTick(() => {
				this.$refs.weekChartDateRangeSelect.init()
				this.$refs.activeChartDateRangeSelect.init(true)
				if (this.siteType === 1) {
					this.getSiteList()
				}
			})
		},
		// 页面滚动 设置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;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

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

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

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.icon {
		font-size: 52rpx;
		color: #3a98ff;
	}

	.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>