smart_storage_app/pages/home-page/device-detail/index.vue

<template>
	<view class="device-warp">
		<u-navbar :is-back="true" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				{{stationName}}
			</view>
		</u-navbar>

		<view class="site-footer">
			<u-tabs style="width: 100%;" :list="list" :is-scroll="false" :offset="[10,0]" active-color="#009458"
				:current="type" @change="changeTab"></u-tabs>
			<view class="navigation">
				<text v-for="(item,index) in deviceNavArr" :key="index">
					<text class="null-text">{{item.name}}</text>
					<text class="img"></text>
				</text>
				<text class="text" style="color: #009458;">{{deviceName ? deviceName : ''}}</text>
			</view>

		</view>


		<view class="components-box" :style="{height:`calc(100% - ${safeHeight}rpx)`}">
			<JKPCS ref="PCS" v-if="type === 0 && Devicetype === 'pcs' && stationId === 484" />
			<PCS ref="PCS" v-if="type === 0 && Devicetype === 'pcs' && stationId !== 484" />
			<Cluster ref="Cluster" v-if="type === 0 && Devicetype === 'cluster'" />
			<Pack ref="Pack" v-if="type === 0 && Devicetype === 'pack'" />
			<Stack ref="Stack" v-if="type === 0 && Devicetype === 'stack'  && stationId !== 484 " />
			<JKStack ref="JKStack" v-if="type === 0 && Devicetype === 'stack' && stationId === 484" />

			<Air ref="Air" v-if="type === 0 && Devicetype === 'air'" />
			<Ammeter ref="Ammeter" v-if="type === 0 && Devicetype === 'ammeter'" />
			<Emu ref="Emu" v-if="type === 0 && Devicetype === 'emu'" />
			<DeviceYX ref="YX" v-if=" list.length === 3 && type === 1 " />
			<DeviceYC ref="YC" v-if=" list.length === 3 &&type === 2 " />
			<DeviceYX ref="YX" v-if=" list.length === 2 && type === 0" />
			<DeviceYC ref="YC" v-if=" list.length === 2 && type === 1" />
		</view>

	</view>
</template>

<script>
	import JKPCS from './components/jingke-pcs.vue'
	import JKStack from './components/jingke-stack.vue'
	import PCS from './components/pcs.vue'
	import Cluster from './components/cluster.vue'
	import Stack from './components/stack.vue'
	import Pack from './components/pack.vue'
	import DeviceYC from './components/yc.vue'
	import DeviceYX from './components/yx.vue'
	import Air from './components/air.vue'
	import Ammeter from './components/ammeter.vue'
	import Emu from './components/emu.vue'

	export default {
		created() {
			const self = this
			uni.getStorage({
				key: 'deviceNavArr', //本地缓存中的指定的 key
				success(res) { //接口调用的回调函数，res = {data: key对应的内容}
					self.deviceNavArr = res.data
				}
			})
			uni.getStorage({
				key: 'deviceName', //本地缓存中的指定的 key
				success(res) { //接口调用的回调函数，res = {data: key对应的内容}
					self.deviceName = res.data
				}
			})
		},
		watch: {
			currentStation: {
				handler(val) {
					this.stationId = val.id
					this.stationName = val.name
				},
				deep: true,
				immediate: true,
			},
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			}
		},
		onLoad(options) {

			this.Devicetype = options.type
			if (this.Devicetype === 'storage' || this.Devicetype === 'anything') {
				this.list = [{
						name: this.$t('homePage.device.yx')
					}, {
						name: this.$t('homePage.device.yc'),
					}],
					this.type = 0
			}
			this.srcId = options.srcId
		},
		mounted() {
			this.$nextTick(() => {
				if (this.$refs.JKPCS) {
					this.$refs.JKPCS.getData(this.srcId)
				}
				if (this.$refs.JKStack) {
					this.$refs.JKStack.getData(this.srcId)
				}
				if (this.$refs.PCS) {
					this.$refs.PCS.getData(this.srcId)
				}
				if (this.$refs.Stack) {
					this.$refs.Stack.getData(this.srcId)
				}
				if (this.$refs.YC) {
					this.$refs.YC.getData(this.srcId)
				}
				if (this.$refs.YX) {
					this.$refs.YX.getData(this.srcId)
				}
				if (this.$refs.Cluster) {
					this.$refs.Cluster.getData(this.srcId)
				}
				if (this.$refs.Pack) {
					this.$refs.Pack.getData(this.srcId)
				}
				if (this.$refs.Air) {
					this.$refs.Air.getData(this.srcId)
				}
				if (this.$refs.Ammeter) {
					this.$refs.Ammeter.getData(this.srcId)
				}
				if (this.$refs.Emu) {
					this.$refs.Emu.getData(this.srcId)
				}
			})
		},
		components: {
			JKPCS,
			PCS,
			DeviceYC,
			DeviceYX,
			Cluster,
			Stack,
			Pack,
			Air,
			Ammeter,
			Emu,
			JKStack
		},
		data() {
			return {
				type: 0,
				srcId: null,
				Devicetype: null,
				deviceNavArr: [],
				deviceName: null,
				list: [{
					name: this.$t('homePage.device.data')
				}, {
					name: this.$t('homePage.device.yx')
				}, {
					name: this.$t('homePage.device.yc'),
				}],
				background: {
					backgroundColor: "#0EA17E",
				},
				stationId: null,
				stationName: null,
				safeHeight: 225
			};
		},
		onShow() {
			uni.getSystemInfo({
				success: res => {
					this.safeHeight = this.safeHeight + (res.screenHeight - res.safeArea.bottom) + 60;

				},
				fail(err) {
					console.log(err);
				}
			})
		},
		onReachBottom() {


		},

		methods: {
			device(val) {
				this.Devicetype = val
			},
			changeTab(type) {
				this.type = type

				this.$nextTick(() => {
					if (this.$refs.JKPCS) {
						this.$refs.JKPCS.getData(this.srcId)
					}
					if (this.$refs.JKStack) {
						this.$refs.JKStack.getData(this.srcId)
					}
					if (this.$refs.PCS) {
						this.$refs.PCS.getData(this.srcId)
					}
					if (this.$refs.Stack) {
						this.$refs.Stack.getData(this.srcId)
					}

					if (this.$refs.YC) {
						this.$refs.YC.getData(this.srcId)
					}
					if (this.$refs.YX) {
						this.$refs.YX.getData(this.srcId)
					}
					if (this.$refs.Cluster) {
						this.$refs.Cluster.getData(this.srcId)
					}
					if (this.$refs.Pack) {
						this.$refs.Pack.getData(this.srcId)
					}
					if (this.$refs.Air) {
						this.$refs.Air.getData(this.srcId)
					}
					if (this.$refs.Ammeter) {
						this.$refs.Ammeter.getData(this.srcId)
					}
					if (this.$refs.Emu) {
						this.$refs.Emu.getData(this.srcId)
					}

				})

			}
		},
	};
</script>
<style lang="scss" >
	 page{
		height: 100%!important;
	}
</style>

<style lang="scss" scoped>
	.device-warp {
		height: 100%;
		background-color: #f5f5f5;
		padding-top: 0;

	}

	::v-deep .u-tabs {
		width: 100%;
		height: 100%;
	}

	.components-box {
		padding: 20rpx;
		// height: calc(100% - 225rpx);
		// overflow: auto;
		margin-top: 20rpx;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.site-footer {
		width: 100%;
		height: 120rpx;
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		// flex-direction: row;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		z-index: 98;

		.navigation {
			width: 100%;
			padding-top: 20rpx;
			padding-left: 20rpx;
			background-color: #f5f5f5;

			.img {
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				background-image: url(/static/aidex/images/arrow-right.png);
				background-size: 100% 120%;
			}

			.null-text {
				height: 24rpx;
				border-radius: 8rpx;
				padding: 5rpx 10rpx 5rpx 10rpx;
				color: #666666;
				font-size: 20rpx;
				background-color: rgba(217, 217, 217, 0.2);
				padding-left: 5rpx;
			}

			.text {
				height: 22rpx;
				border: 1rpx solid #009458;
				border-radius: 8rpx;
				padding: 5rpx 10rpx 5rpx 10rpx;
				color: #666666;
				font-size: 20rpx;
				background:#e2fff3;
				padding-left: 5rpx;
			}
		}

		.footer-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #979797;

			.footer-icon {
				font-size: 48rpx;
			}

			.footer-title {
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			&.active {
				color: #24d1a9;
			}
		}
	}
</style>