app-govern/pages/device/DVR/detail.vue

<template>
	<Cn-page :loading="loading" noPadding>
		<view slot="body">
			<view class="detail">
				<view class="detail-header">
					<view class="header">
						<image
							src="http://localhost:8088/api/system-boot/image/toStream?bgImage=topology/1aca98ceb22a1fc33b81d9101275ef1.png"
							mode="widthFix"
							style="width: 100%"
						/>
					</view>
					<!-- <view class="des">
                    <text>设备基础信息</text>
                    <text class="ml10">设备状态</text>
                </view> -->
					<view class="nav">
						<view
							class="nav-menu"
							:class="{ 'nav-menu-active': navMenuActive == index }"
							v-for="(item, index) in navMenuList"
							:key="index"
							@click="navMenuClick(index)"
							>{{ item.text }}
						</view>
					</view>
				</view>
				<view class="content">
					<DianWang v-if="navMenuActive == 0"></DianWang>
					<NiBian v-else-if="navMenuActive == 1"></NiBian>
					<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
					<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
					<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
					<QiTa v-else-if="navMenuActive == 5"></QiTa>
					<view style="height: 20rpx"></view>
				</view>
				<!-- <uni-fab
					ref="fab"
					direction="vertical"
					horizontal="right"
					vertical="bottom"
					:content="content"
					@trigger="trigger"
				/> -->
				<hover-menu :btnList="content" @trigger='trigger'></hover-menu>
			</view>
		</view>
	</Cn-page>
</template>
<script>
import DianWang from './comp/dianWang.vue'
import NiBian from './comp/niBian.vue'
import ShuChu from './comp/shuChu.vue'
import GanJieDian from './comp/ganJieDian.vue'
import ZhuangTaiLiang from './comp/zhuangTaiLiang.vue'
import QiTa from './comp/qiTa.vue'
import { manualAccess } from '@/common/api/accessBoot'
import hoverMenu from '@/hover-menu/components/hover-menu/hover-menu.vue';
export default {
	components: {
		DianWang,
		NiBian,
		ShuChu,
		GanJieDian,
		ZhuangTaiLiang,
		QiTa,
		hoverMenu
	},
	data() {
		return {
			loading: false,
			navMenuActive: 0,
			navHeight: 0,
			pageOptions: {},

			navMenuList: [
				{
					text: '电网数据',
				},
				{
					text: '逆变数据',
				},
				{
					text: '输出数据',
				},
				{
					text: '干接点',
				},
				{
					text: '状态量',
				},
				{
					text: '其他',
				},
			],
			content: [
				{
					iconPath: '/static/report.png',
					text: '告警',
				},
				{
					iconPath: '/static/record.png',
					text: '记录',
				},
				{
					iconPath: '/static/about.png',
					text: '关于',
				},
				{
					iconPath: '/static/access.png',
					text: '接入',
				},
			],
		}
	},
	methods: {
		trigger(e) {
			console.log(e)
			if (e.text === '分享') {
				this.$refs.share.open()
			} else if (e.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '确定删除该设备吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					},
				})
			} else if (e.text === '下载') {
				this.$util.toast('下载成功')
			} else if (e.text === '记录') {
				uni.navigateTo({ url: '/pages/device/DVR/record' })
			} else if (e.text === '告警') {
				uni.navigateTo({ url: '/pages/device/DVR/report' })
			} else if (e.text === '关于') {
				uni.navigateTo({ url: '/pages/device/DVR/about' })
			} else if (e.text === '移交') {
				uni.navigateTo({ url: '/pages/device/transfer' })
			} else if (e.text === '反馈') {
				uni.navigateTo({ url: '/pages/device/feedback' })
			} else if (e.text === '用户') {
				uni.navigateTo({ url: '/pages/device/user' })
			} else if (e.text === '接入') {
				manualAccess({ nDid: this.pageOptions.ndid }).then((res) => {
					this.$util.toast(res.message)
				})
			}
			// this.$refs.fab.close()
		},
		navMenuClick(idx) {
			this.navMenuActive = idx
			uni.pageScrollTo({ scrollTop: 0, duration: 0 })
		},
		init() {
			let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
			console.log(userInfo.authorities)
			switch (userInfo.authorities) {
				case 1:
					this.content.splice(
						0,
						0,
						{
							iconPath: '/static/version.png',
							text: '版本',
						},
						{
							iconPath: '/static/template.png',
							text: '模版',
						},
					)
					break
				case 3:
					this.content.splice(1, 0, {
						iconPath: '/static/transfer.png',
						text: '移交',
					})
					break
				case 4:
					this.content.splice(
						0,
						0,
						{
							iconPath: '/static/subordinate.png',
							text: '用户',
						},
						{
							iconPath: '/static/delate.png',
							text: '删除',
						},
					)
					break
				case 5:
					this.content.push({
						iconPath: '/static/feedback.png',
						text: '反馈',
					})
					break
				default:
					break
			}
			setTimeout(() => {
				// 获取nav高度
				uni.createSelectorQuery()
					.select('.nav')
					.boundingClientRect((rect) => {
						this.navHeight = rect.height
					})
					.exec()
			}, 1000)
		},
	},
	onLoad(options) {
		this.pageOptions = options
		this.init()
	},
}
</script>
<style lang="scss">
.detail {
	// background: $uni-theme-white;
	.header {
	}

	.des {
		padding: 20rpx 20rpx 0;
		font-size: 28rpx;
		color: #999;
	}

	// .nav {
	//     position: sticky;
	//     top: 0;
	//     left: 0;
	//     padding-top: 20rpx;
	//     display: flex;
	//     flex-wrap: wrap;
	//     background: rgb(243, 244, 245);

	//     .nav-menu {
	//         padding: 10rpx 20rpx;
	//         margin-left: 20rpx;
	//         margin-bottom: 20rpx;
	//         font-size: 28rpx;
	//         border-radius: 8rpx;
	//         background: $uni-theme-white;

	//         &-active {
	//             background: $uni-theme-color;
	//             color: #fff;
	//         }
	//     }

	// }

	.content {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.detail-header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
		background: #f3f4f5;
	}
}
/deep/ .uni-fab__circle--rightBottom {
	right: 8px !important;
	bottom: 8px !important;
}
/deep/ .uni-fab--rightBottom {
	right: 8px !important;
	bottom: 8px !important;
}
/deep/ .uni-fab__circle {
	width: 50px;
	height: 54px;
}

/deep/ .uni-fab__content--flexDirectionEnd {
	width: 50px !important;
	// height: 50px !important;
}
</style>