baozhida-monitoring-host/pages/indexRouter.vue

<template>
	<!-- 底部tab导航 -->
	<view class="card_bar">
		<view class="top_card">
			<view class="barboxs" :style="{paddingTop:height + 'px'}">
				<x-navbar :nowchos='nowchos' @botomchos="botomchos" @reconnection="getDevices"></x-navbar>
			</view>
		</view>
		<scroll-view scroll-y="true" class="const_card" @scrolltolower="scrolltolower">
			<realTime v-show="nowchos == 0"></realTime>
			<historical :headHeight="headHeight" v-show="nowchos == 1"></historical>
			<alarm v-show="nowchos == 2"></alarm>
			<basicSetup v-show="nowchos == 3"></basicSetup>
			<!-- <text class="title">读取到的内容: {{cardnumber}}</text> -->
		</scroll-view>
		<view class="bottom_card">
			<view class="bottomboxs">
				<x-navbottom></x-navbottom>
			</view>
		</view>
	</view>
</template>

<script>
	const serialPort = uni.requireNativePlugin('Fvv-UniSerialPort')
	import realTime from './realTime/index.vue' // 实时数据
	import historical from './historical/index.vue' // 历史数据
	import alarm from './alarm/index.vue' // 报警查询
	import basicSetup from './basicSetup/index.vue' // 报警查询
	export default {
		components: { //在这里注册相应的组件
			realTime,
			historical,
			alarm,
			basicSetup
		},
		data() {
			return {
				nowchos: 0, //当前选择了那个底部菜单
				rebootingShow: false,
				height: 0,
				headHeight: 0,
				cardnumber: '',
			}
		},
		onLoad() {
		},
		onShow() {},
		mounted() {
			this.$nextTick(() => {
				const navbar = uni.createSelectorQuery().select('.top_card')
				navbar.boundingClientRect(data => {
					this.headHeight = data.height
				}).exec()
			})
			const arr = uni.getSystemInfoSync().statusBarHeight
			this.height = arr
			this.$nextTick(() => {
				this.getContentHeight()
			})
			this.getDevices()
		},
		methods: {
			//获取所有设备路径
			getDevices() {
				serialPort.getAllDevicePath(res => {
						console.log('//路径列表', res)
					}),
					setTimeout(() => {
						serialPort.setPath('/dev/ttyS9')
						serialPort.setBaudRate(9600)
						serialPort.open(res => {
							console.log(res, '111111')
							if (!res.status) {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: "none"
								});
								return
							}
							uni.showToast({
								title: "已打开",
								duration: 2000,
							});

							serialPort.onMessageHex(rec => {
								console.log(rec, '222222')
								this.cardnumber += rec + "\r\n"
							}, send => {
								console.log(send)
							})
						})
					}, 100)
			},
			// 触底事件
			scrolltolower() {
				// console.log(324)
			},
			// 获取内容区域高度
			getContentHeight() {
				const screenHeight = uni.getSystemInfoSync().windowHeight
				// 获取头部高度
				let headHeight = 0
				let bottomHeight = 0
				const navbar = uni.createSelectorQuery().select('.barboxs')
				navbar.boundingClientRect(data => {
					headHeight = data.height
				}).exec()
				// console.log(headHeight, 254)
				const bottomNavbar = uni.createSelectorQuery().select('.bottomboxs')
				bottomNavbar.boundingClientRect(data => {
					bottomHeight = data.height
				}).exec()
				let arrHeight = screenHeight - headHeight - bottomHeight
				this.heightfield = arrHeight
				this.$forceUpdate()
			},
			bottomHeightil() {
				this.$nextTick(() => {
					let num = 0
					const bottomNavbar = uni.createSelectorQuery().select('.bottomboxs')
					bottomNavbar.boundingClientRect(data => {
						num = data.height
					}).exec()
					return num
				})
			},
			// tab
			botomchos(e) {
				this.getContentHeight()
				uni.setStorageSync('nowchos', e);
				this.nowchos = e
			},
			// 确定重启
			confirm() {
				this.rebootingShow = false
			}
		}
	}
</script>

<style lang="scss">
	.card_bar {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
	}

	.scroll-Y {
		overflow-y: auto;
	}

	.const_card {
		overflow-y: hidden;
		flex: 1;
	}

	.top_card {
		padding-bottom: 3px;
	}

	.barboxs {
		background-color: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	}

	.bottomboxs {
		height: 24rpx;
	}

	.circle_card {
		font-size: 36rpx;
		margin-left: 20rpx;
	}
</style>