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')" />
				<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" />
				<standard v-else ref="tuopu" />

			</view>
			<view class="box">
				<Section title="测试" />
				<ceshi-t />
			</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.sevenDay')}}
							</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.stationData')" />
				<wshStationData v-if="topologyType === 5" />
				<zzhbStationData v-else-if="topologyType === 6" />
				<commonStationData v-else />
			</view>
			<view class="box">
				<Section title="光伏KPI" />
				<view class="">
					<my-grid imgHeight="40rpx" imgWidth="40rpx" :list="lightArr" />
				</view>
			</view>
			<view class="box" v-if="topologyType !== 9">
				<Section :title="$t('homePage.home.environmentalData')" />
				<environmentalControlPosition v-if="rightCenter === 'dispositionRightCenter'" />
				<environmentalControl v-else />
			</view>
			<view class="box">
				<Section title="社会贡献" />
				<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 ceshiT from './components/topology/ceshiT.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: {
			ceshiT,
			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 {
				loading: false,
				curve_option: {},
				charge_option: {},
				activeTime: 'day',
				topologyType: 0,
				list: [],
				messageList: [],
				timer: null,
				tuopuTimer: null,
				rightCenter: null,
				society: [{
						label: '充放电数据',
						value: '85.00',
						image: require('@/static/aidex/images/ll01.png'),
					},
					{
						label: 'CO2减排(吨)',
						value: '85.00',
						image: require('@/static/aidex/images/ll02.png'),
					},
					{
						label: '等效植树(万棵)',
						value: '85.00',
						image: require('@/static/aidex/images/ll03.png'),
					},
				],
				lightArr: [{
						label: '装机总容量(kWh)',
						value: '85.00',
						image: require('@/static/aidex/images/ll05.png'),
					},
					{
						label: '当前功率(kW)',
						value: '85.00',
						image: require('@/static/aidex/images/ll06.png'),
					},
					{
						label: '日发电量(kWh)',
						value: '85.00',
						image: require('@/static/aidex/images/ll07.png'),
						showMark: true
					},
					{
						label: '总发电量(MWh)',
						value: '85.00',
						image: require('@/static/aidex/images/ll07.png'),
						showMark: true
					},
				]
			};
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
			userData() {
				return this.vuex_user
			},
			language() {
				return this.vuex_language
			}
		},
		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
						console.log(val.topologyType)
						this.topologyType = val.topologyType
						this.getComponents()
						this.$nextTick(() => {
							if (this.$refs.tuopu) {
								this.$refs.tuopu.getData(val.id)
							}

							if (this.$refs.deviceFire) {
								this.$refs.deviceFire.getData(this.stationId)
							}
						})
					}
				},
				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.getComponents()
			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 getComponents() {
				const {
					data
				} = await this.$u.api.homePageData.GetHomePageComponents(this.stationId)
				if (data && data.length > 0) {
					this.rightCenter = data[0]?.rightCenter
				}
			},
			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);

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