emsapp/pages/work/index.vue

<template>
	<view class="work-container">
		<view class="site-sections-list">
			<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
				:localdata="siteTypeOptions" :ellipsis="false" @change="selectedSite">
			</uni-data-picker>
			<view class="info">
				<view class="list"> <uni-icons type="location" color="#fff" size="20"></uni-icons>
					{{baseInfo.siteAddress || '-'}}
				</view>
				<view class="list">
					<uni-icons type="calendar" color="#fff" size="20"></uni-icons>
					{{baseInfo.runningTime || '-'}}
				</view>
			</view>
		</view>
		<!-- 静态信息 -->
		<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">装机功率(MW)</view>
							<view class="text">{{baseInfo.installPower | formatNumber}}</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box">
							<view class="title">装机容量(MW)</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 {
		getAllSites,
		getSingleSiteBaseInfo,
		getSevenChargeData,
		getPointData,
		getSiteAllDeviceCategory
	} from '@/api/ems/site.js'
	export default {
		components: {
			DateRangeSelect
		},
		data() {
			return {
				// 图表数据
				weekChartTimeRange: [],
				activeChartTimeRange: [],
				weekChartData: {},
				activeChartData: {},
				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: [{
						text: '储能',
						value: 'cn',
						children: []
					},
					{
						text: '光能',
						value: 'gn',
						disable: true,
						children: []
					},
					{
						text: '岸电',
						value: 'ad',
						disable: true,
						children: []
					}
				],
				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 site = (this.siteTypeOptions.find(i => i.value === 'cn')?.children || []).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.getSiteBaseInfo()
				this.getWeekChartData()
				this.getGVQXData()
				this.getSiteDeviceCategory()
			},
			getSiteList() {
				getAllSites().then(response => {
					const data = response?.data || []
					this.siteTypeOptions.find(i => i.value === 'cn').children = data.map(item => {
						return {
							text: item.siteName,
							value: item.siteId,
							id: item.id,
							disable: !this.belongSite || this.belongSite.length === 0 || this
								.belongSite.includes('all') ? false : !this.belongSite.includes(item
									.siteId)
						}
					})
					const siteChildren = this.siteTypeOptions.find(i => i.value === 'cn')?.children || []
					// 设置默认展示的站点
					const defaultSiteId = this.isAvailableSite(this.currentSiteId) ? this.currentSiteId : (siteChildren.find(item =>
						!item.disable)?.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)
				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))
			}
		},
		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;
	}

	// 站点选择
	.site-sections-list {
		background: linear-gradient(to right, #547ef4, #679ff5);
		padding: 30rpx 30rpx;
		padding-bottom: 100rpx;

		.info {
			color: #fff;
			font-size: 26rpx;
			line-height: 30rpx;
			vertical-align: middle;
			margin-top: 20rpx;

			>.list {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}

				>.uni-icons {
					margin-right: 10rpx;
				}

			}
		}

		.uni-data-tree {

			::v-deep {
				.input-value {
					border: none;
					padding-left: 0;

					.selected-area {
						width: 90%;
						flex: none;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						.selected-list {
							color: #fff;
						}
					}

					// 选择中的文字样式
					.text-color {
						color: #fff;
						font-size: 34rpx;
						line-height: 36rpx;
						font-weight: bolder;
					}

					// 右侧箭头
					.arrow-area {
						transform: rotate(-135deg);

						.input-arrow {
							border-color: #fff;
						}
					}

				}
			}

		}
	}

	// 基本信息
	.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>