smart_storage_app/pages/tabbar/dashboard.vue

<template>
	<view class="u-page">
		<!-- <zero-loading v-if="loading"></zero-loading> -->
		<!-- 顶部电站 -->
		<view class="new-nav">
			<image type="image" src="../../static/aidex/images/nav-bg.png"
				style="width: 100%; height: 100%; z-index: 0" />
			<view class="station-box">
				<stationDropdow style="width: 100%" ref="dropdow" />
			</view>
		</view>
		<!-- 菜单 -->
		<u-notice-bar mode="horizontal" type="primary" :list="list" style="margin-bottom: 20rpx;"
			@click="toMsg"></u-notice-bar>
		<view class="menu-box">
			<view class="box" @click="changeMenu('device-list')">
				<view class="icon device" />
				<view class="title"> {{ this.$t("homePage.home.device") }} </view>
			</view>
			<view class="box" @click="changeMenu('earningSelect')">
				<view class="icon earning" />
				<view class="title"> {{ this.$t("homePage.home.earning") }} </view>
			</view>
			<view class="box" @click="changeMenu('alarm')">
				<view class="icon alarm" />
				<view class="title"> {{ this.$t("homePage.home.alarm") }} </view>
			</view>
			<view class="box" @click="changeMenu('policy-management')">
				<view class="icon policy" />
				<view class="title"> {{ this.$t("homePage.home.policy") }} </view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content-box">
			
			<view class="box">
				<Section :title="$t('homePage.home.stationTopo')" />
				<zero-loading v-if="loading"></zero-loading>
				<!-- 加载中占位（可选） -->
				<view v-else class="loading-tip">
					<!-- <zero-loading v-if="tuopoloading"></zero-loading> -->
					<cixi v-if="topologyType === 0" ref="tuopu" />
					<kejiyuan v-else-if="topologyType === 2" ref="tuopu" />
					<lingchao v-else-if="topologyType === 3" ref="tuopu" />
					<jingke v-else-if="topologyType === 4" ref="tuopu" />
					<weishanhu v-else-if="topologyType === 5" ref="tuopu" />
					<zhongzihuanbao v-else-if="topologyType === 6" ref="tuopu" />
					<sanmenxia v-else-if="topologyType === 7" ref="tuopu" />
					<second v-else-if="topologyType === 8" ref="tuopu" />
					<fire v-else-if="topologyType === 9" ref="tuopu" />
					<runda100 v-else-if="topologyType === 10" ref="tuopu" />
					<runda230 v-else-if="topologyType === 11" ref="tuopu" />
					<runda215 v-else-if="topologyType === 12" ref="tuopu" />
					<third v-else-if="topologyType === 13" ref="tuopu" />
					<mdPviese v-else-if="topologyType === 14" ref="tuopu" />
					<pv2AndStorageSts v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 4" ref="tuopu" />
					<pv8FourthTopCenter v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 5" ref="tuopu" />
					<pv8FourthTopCenter v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 6" ref="tuopu" />
					<!-- <third v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 4" ref="tuopu" /> -->
					<!-- <cixi v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 3" ref="tuopu" /> -->
					<!-- <ceshiL v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 2" ref="tuopu" /> -->
					<!-- <cixi v-else-if="topologyType === 1 && inverterFlag === 1 && pvTopologyType === 1" ref="tuopu" /> -->
					<standard v-else ref="tuopu" />
				</view>
			</view>
			<view v-if="topologyType === 9" class="box">
				<Section :title="$t('homePage.home.deviceMonitor')" />
				<devicemonitoring ref="deviceFire" />
			</view>

			<view class="box">
				<Section :title="$t('homePage.home.runCurve')" />
				<runChart ref="runChart" />
			</view>

			<view class="box">
				<Section :title="$t('homePage.home.chargeDisData')">
					<view slot="right" style="flex: 1">
						<view class="top-right-box">
							<view class="top-right-item" :class="{ active: activeTime === 'day' }"
								@click="changeTime('day')">{{this.$t('homePage.home.sevenDaycom')}}
							</view>
							<view class="top-right-item" :class="{ active: activeTime === 'month' }"
								@click="changeTime('month')">{{this.$t('homePage.home.monthDay')}}
							</view>
							<view class="top-right-item" :class="{ active: activeTime === 'year' }"
								@click="changeTime('year')">{{this.$t('homePage.home.yearDay')}}
							</view>
						</view>
					</view>
				</Section>
				<dischargeChart ref="dischargeChart" :activeTime="activeTime" />
			</view>

			<view class="box">
				<Section :title="$t('homePage.home.stationDatacom')" />
				<wshStationData v-if="topologyType === 5" />
				<zzhbStationData v-else-if="topologyType === 6" />
				<commonStationData v-else />
			</view>
			<view class="box" v-if="inverterFlag === 1">
				<Section :title="$t('homePage.home.pvKpi')" />
				<view class="">
					<my-grid :loading="loading" :col="language !== 'zh_CN'? 2:3" imgHeight="40rpx" imgWidth="40rpx" :list="lightArr"/>
				</view>
			</view>
			<view class="box" v-if="topologyType === 1">
				<Section :title="$t('homePage.home.environmentalData')" />
				<environmentalControlPosition v-if="rightCenter === 'dispositionRightCenter'" />
				<environmentalControl v-else />
			</view>
			<!-- <view class="box" v-if="inverterFlag === 1">
				<Section :title="$t('homePage.home.socialContribution')" />
				<view class="">
					<my-grid :col="3" imgHeight="72rpx" imgWidth="82rpx" :list="society" />
				</view>
			</view> -->
		</view>



	</view>
</template>

<script>
	import myGrid from './components/grid/index.vue'
	import stationDropdow from '@/components/station-dropdow/index'
	import Section from "@/components/section/index";
	import charts from "@/components/charts/index";
	import cixi from './components/topology/cixi'
	import pv2AndStorageSts from './components/topology/pv2AndStorageSts.vue'
	// import pv8FourthTopCenter from './components/topology/ceshiL.vue'
	import ceshiL from './components/topology/ceshiL.vue'
	import pv8FourthTopCenter from './components/topology/pv8FourthTopCenter.vue'
	
	import pv2first from './components/topology/pv2first.vue'
	
	import weishanhu from './components/topology/weishanhu.vue'
	import sanmenxia from './components/topology/sanmenxia.vue'
	import lingchao from './components/topology/lingchao.vue'
	import zhongzihuanbao from './components/topology/zhongzihuanbao.vue'
	import kejiyuan from './components/topology/kejiyuan.vue'
	import standard from './components/topology/standard.vue'
	import jingke from './components/topology/jingke.vue'
	import second from './components/topology/second.vue'
	import third from './components/topology/third.vue'
	import fire from './components/topology/fire.vue'
	import runda100 from './components/topology/runda100.vue'
	import runda215 from './components/topology/runda215.vue'
	import runda230 from './components/topology/runda230.vue'
	import runChart from './components/runChart/index'
	import dischargeChart from './components/dischargeChart/index'
	import environmentalControl from './components/environmentalControl/index'
	import environmentalControlPosition from './components/environmentalControl/position.vue'
	import commonStationData from './components/stationData/common'
	import zzhbStationData from './components/stationData/zzhb'
	import wshStationData from './components/stationData/wsh'
	import devicemonitoring from './components/topology/devicemonitoring.vue'
	import mdPviese from './components/topology/mdPvdieseTopCenter.vue'

	export default {
		components: {
			pv2AndStorageSts,
			ceshiL,
			pv8FourthTopCenter,
			pv2first,
			myGrid,
			stationDropdow,
			Section,
			environmentalControlPosition,
			charts,
			runda100,
			runda215,
			runda230,
			second,
			cixi,
			fire,
			third,
			weishanhu,
			sanmenxia,
			mdPviese,
			lingchao,
			zhongzihuanbao,
			kejiyuan,
			standard,
			jingke,
			runChart,
			dischargeChart,
			environmentalControl,
			commonStationData,
			zzhbStationData,
			wshStationData,
			devicemonitoring
		},
		data() {
			return {
				// #ifdef APP
				src: '/static/html/demo.html',
				// #endif
				// #ifdef H5
				src: '/static/html/demo.html',
				// #endif
				loading: false,
				curve_option: {},
				charge_option: {},
				activeTime: 'day',
				topologyType: 0,
				list: [],
				messageList: [],
				timer: null,
				tuopuTimer: null,
				rightCenter: null,
				componentsLoaded: false,
				tuopoloading:false,
				topCenterPvArr:[
					{name:'pv1AndStorage_261',value:1},
					{name:'pv1AndStorage_sts_261',value:2},
					{name:'pv2AndStorage_261',value:3},
					{name:'pv2AndStorage_sts_261',value:4},
					{name:'pv8FourthTopCenter',value:5},
					{name:'pv8FourthDieselTopCenter',value:6}
				],
				pvTopologyType:0,
				society: [{
						label: this.$t('homePage.home.saveStandardCoal'),
						value: '15.00',
						image: require('@/static/aidex/images/ll01.png'),
					},
					{
						label: this.$t('homePage.home.equivalentCo2Reduction'),
						value: '20.50',
						image: require('@/static/aidex/images/ll02.png'),
					},
					{
						label: this.$t('homePage.home.equivalentTreePlantings'),
						value: '1.50',
						image: require('@/static/aidex/images/ll03.png'),
					},
				],
				panelData: {
					pvCurrentPower: 0,    // 对应 lightArr[0].value
					dailyReleaseElec: 0,  // 对应 lightArr[1].value
					totalReleaseElec: 0,  // 对应 lightArr[2].value
					todayIncone: 0,       // 对应 lightArr[3].value
					totalIncome: 0,       // 对应 lightArr[4].value
					pvPower: 0            // 对应 lightArr[5].value
				}
			};
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
			userData() {
				return this.vuex_user
			},
			language() {
				return this.vuex_language
			},
			inverterFlag(){
				return this.vuex_inverterFlag;
			},
			lightArr() {
			      return [
			        {
			          label: this.$t('homePage.home.currentPower') + '(kW)',
			          value: this.panelData.pvCurrentPower,
			          image: require('@/static/aidex/images/ll06.png')
			        },
			        {
			          label: this.$t('homePage.home.dailyPowerGeneration') + '(kWh)',
			          value: this.panelData.dailyReleaseElec,
			          image: require('@/static/aidex/images/ll07.png')
			        },
			        {
			          label: this.$t('homePage.home.cumulativePowerGeneration') + '(kWh)',
			          value: this.panelData.totalReleaseElec,
			          image: require('@/static/aidex/images/ll07.png')
			        },
			        {
			          label: this.$t('homePage.home.todayEarning'),
			          value: this.panelData.todayIncone,
			          image: require('@/static/aidex/images/yxts.png')
			        },
			        {
			          label: this.$t('homePage.home.totalRevenue'),
			          value: this.panelData.totalIncome,
			          image: require('@/static/aidex/images/yxts.png')
			        },
			        {
			          label: this.$t('homePage.home.ratedPower'),
			          value: this.panelData.pvPower,
			          image: require('@/static/aidex/images/ll06.png')
			        }
			      ];
			    }
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
			}
			if (this.tuopuTimer) {
				clearInterval(this.tuopuTimer)
			}
		},
		watch: {
			currentStation: {
			    handler(val) {
			      if (val && val.id) {
			        this.stationId = val.id
			        this.userId = this.userData.userId
			        this.topologyType = val.topologyType
			        // 重置加载状态，避免复用旧状态
			        this.componentsLoaded = false
					this.tuopoloading = true
			        this.getComponents().then(() => {
			          this.GetPcsTotalData();
			          this.$nextTick(() => {
			            if (this.$refs.tuopu) {
			              this.$refs.tuopu.getData(val.id)
			            }
			            if (this.$refs.deviceFire) {
			              this.$refs.deviceFire.getData(this.stationId)
			            }
						if (this.$refs.dischargeChart) {
						  this.$refs.dischargeChart.getData()
						}
			          });
			        });
			      }
			    },
			    deep: true,
			    immediate: true,
			}
		},
		created() {

			uni.setTabBarItem({
				index: 0,
				text: this.$t('homePage.home.station'),
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('homePage.home.electricityPrice'),
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$t('homePage.home.mine'),
			})
			uni.showLoading({
				title: this.$t('homePage.home.loading')
			})
		},
		onShow() {
			// 重置加载状态
			this.componentsLoaded = false
			this.tuopoloading = true
			this.getComponents().then(() => {
				this.getMessage()
				if (this.$refs.runChart && this.stationId) {
				  this.$refs.runChart.getData()
				}
				if (this.$refs.dischargeChart && this.stationId) {
				  this.$refs.dischargeChart.getData()
				}
				this.$nextTick(() => {
				  if (this.$refs.tuopu) {
					this.$refs.tuopu.changeEnglish()
					this.$refs.tuopu.getData(this.stationId)
				  }
				  if (this.$refs.deviceFire) {
					this.$refs.deviceFire.getData(this.stationId)
				  }
				})
			});
			this.timer = setInterval(() => {
				this.getMessage()
			}, 5000)
			this.$nextTick(() => {
				this.tuopuTimer = setInterval(() => {
					if (this.$refs.tuopu) {
						this.$refs.tuopu.getData(this.stationId)
					}
					if (this.$refs.deviceFire) {
						this.$refs.deviceFire.getData(this.stationId)
					}
				}, 1000 * 10 * 60)
			})

		},
		methods: {
			async GetPcsTotalData() {
			  let self = this;
			  return new Promise((resolve, reject) => {
			    self.$u.api.homePageData
			      .GetPcsTotalData({
			        stationId: this.stationId,
			      })
			      .then((res) => {
			        this.panelData = Object.assign(this.panelData, res.data);
			        resolve(res);
			      })
			      .catch((err) => {
			        reject("error");
			      });
			  });
			},
			async getComponents() {
			  try {
			    const { data } = await this.$u.api.homePageData.GetHomePageComponents(this.stationId);
			    if (data && data.length > 0) {
			      this.rightCenter = data[0]?.rightCenter;
			      const matchedItem = this.topCenterPvArr.find(item => item.name === data[0]?.topCenter);
			      this.pvTopologyType = matchedItem ? matchedItem.value : this.pvTopologyType;
			    }
			    // 接口完成，标记加载状态为true
			    this.componentsLoaded = true
				this.tuopoloading = false
			  } catch (e) {
			    console.error('获取组件配置失败：', e);
			    // 即使接口失败，也标记完成，避免组件一直不渲染
			    this.componentsLoaded = true
				this.tuopoloading = false
			  }
			},
			openTimer() {

			},
			closeTimer() {

			},
			toMsg() {
				uni.navigateTo({
					url: `/pages/sys/user/message`,
				});
			},
			tagVal(val) {
				if (+val === 1) {
					return `[${this.$t('homePage.home.environmentalData')}]:`
				} else if (+val === 2) {
					return `[${this.$t('homePage.home.fault')}]:`
				} else if (+val === 3) {
					return `[${this.$t('homePage.home.alarm')}]:`
				}
			},
			getMessage() {
				this.$u.api.GetMessage({
					receivingUser: this.userId,
					stationId: this.stationId,
					createstatus: 3,
					readStatus: 0
				}).then((res) => {
					this.messageList = res.data
					this.list = []
					this.messageList.forEach((item, index) => {
						this.list.push(this.tagVal(item.messageType) + item.messageContent)
					})
				})
			},
			changeTime(val) {
				if (this.activeTime !== val) {
					this.activeTime = val;
				}
			},
			changeMenu(url) {
				uni.navigateTo({
					url: `/pages/home-page/${url}/index`,
				});
			}

		},
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.u-page {

		height: 100% !important;
		background-color: #f5f5f5;
		overflow: hidden;

		.new-nav {
			width: 100%;
			height: 440rpx;
			background-size: 100% 100%;
			margin-bottom: -15rpx;
			display: flex;
			align-items: center;
			position: relative;

			image {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			.station-box {
				width: 580rpx;
				margin-top: -160rpx;
				// border: 1px solid #fff;
				margin-left: 85rpx;
				border-radius: 44rpx;
				z-index: 1;

				::v-deep .u-input__input {
					color: #000 !important;
				}

				::v-deep .uicon-arrow-down-fill {
					color: #000 !important;
				}

				// backdrop-filter: blur(4rpx);
			}
		}

		.menu-box {
			width: 100%;
			height: 140rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.box {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;
				box-shadow: 2rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #fff;

				.icon {
					width: 64rpx;
					height: 64rpx;
				}

				.device {
					background-image: url(/static/aidex/images/menu-device.png);
					background-size: 100% 100%;
				}

				.earning {
					background-image: url(/static/aidex/images/menu-earnings.png);
					background-size: 100% 100%;
				}

				.alarm {
					background-image: url(/static/aidex/images/menu-alarm.png);
					background-size: 100% 100%;
				}

				.policy {
					background-image: url(/static/aidex/images/menu-policy.png);
					background-size: 100% 100%;
				}

				.title {
					margin-top: 16rpx;
					font-size: 24rpx;
				}
			}
		}

		.content-box {
			height: calc(100% - 640rpx);
			overflow-y: auto;


			.box {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				width: 710rpx;
				border: 16rpx;
				margin: 20rpx;
				margin-top: 30rpx;
				box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
				
				.loading-tip {
					width: 650rpx;
					// height: 710rpx;
					position: relative;
				}
				.top-right-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					justify-content: flex-end;

					.top-right-item {
						padding: 5rpx 10rpx;
						border: 1rpx solid #009458;
						font-size: 24rpx;
						color: #009458;
						cursor: pointer;
						margin-right: 10rpx;
						border-radius: 8rpx;

						&.active {
							background: #07976E;
							color: #ffffff;
						}
					}
				}


			}
		}


	}
</style>