Vent-App/pages/home/detail/autodoor/autodoor.vue

<template>
	<view class="container">
			<!-- 建议放在外层 -->
		<u-navbar :title="name"  @leftClick="backPage" :bgImage="backPic" >
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="20" >
				</u-icon>
			</view>
		</u-navbar>
		<view class="main">
			<view class="u-page" >
			  <div class="button-grid flcard">
			    <u-button type="primary" shape="circle" text="打开前门"></u-button>
			    <u-button type="primary" shape="circle" text="关闭前门"></u-button>
			    <u-button type="primary" shape="circle" text="打开后门"></u-button>
			    <u-button type="primary" shape="circle" text="关闭后门"></u-button>
			    <u-button type="primary" shape="circle" text="打开前后门"></u-button>
			    <u-button type="primary" shape="circle" text="关闭前后门"></u-button>
				 <div class="additional-div">
				   <span>控制模式：</span>
				   <u-checkbox-group
				       v-model="checked"
				       iconPlacement="left" 
				       placement="row"
					   >
				   	<u-checkbox type="primary" shape="circle" label="就地" style="margin-right: 20rpx;"></u-checkbox>
				   	<u-checkbox type="primary" shape="circle" label="远程"></u-checkbox>
				   </u-checkbox-group>
				  </div>
				    
			  </div>
			  <div class="flcard">
				  测试 两扇风门
			  </div>
			  <div class="flcard">
				  
			  </div>
		   </view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				tableData:[],
				itemId: '' ,// 初始化 itemId
				name: '' ,// 初始化 name
				TabCur: "gate",
				checked: [],
				backPic:"url(../../../../static/topnavbar.png)",
			};
		},
		onLoad(query) {
			 // query 中包含传递过来的id
			const id = query.id;
			const name = query.name;
			//保存id到 data 中 可以在整个页面中使用
			 this.itemId = id;
			 this.name = name;
		},
		components: {
		},
		watch:{
		},
		created() {
			this.getDeviceInfo(this.itemId);
		},
		methods: {
			getDeviceInfo(ID){
				  let IDString = String(ID); // 将 ID 转换为字符串
				  new Promise((resolve, reject) => {
				   api.getDeviceMonitor({devicetype: this.TabCur, ids:IDString}).then(response => {
				      if(response.data.code ==200){ 
						   this.tableData = response.data.result.msgTxt[0].datalist
				      }else{
				        resolve(response)
				      }
				    }).catch(error => {
						console.log("catch===>response",response)
				      reject(error)
				    })
				  })
			},
			backPage(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		
	}
</script>

<style>
	.top-nav{
		background-image: url(../../../../static/topnavbar.png) ;
		background-size: cover; /* 背景图片大小适应 */
		height: 100%;
	}
	.top-nav2{
		background-color:#ffffff
	}
	.main{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
	}
	.button-grid {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: 10px; /* 可以根据需要调整行列之间的间距 */
	}
	.flcard{
		padding: 20rpx;
		background-color: #ffffff;
		margin-bottom: 5rpx;
	}
	.additional-div {
	  grid-column: span 2; /* 让附加内容跨越三列 */
	  display: flex;
	  align-items: center;
	}
	.checkbox-group {
	  margin-left: 10px; /* 可以根据需要调整间距 */
	}
	.card{
		background-color: #ffffff;
		margin: auto;
		margin-top: 20rpx;
		width: 90%;
		height: 280rpx;
		border:1rpx solid #000000;
		border-radius: 20rpx;
	}
</style>