Vent-App/pages/home/firstmodel.vue

<template>
	<view class="container">
			<!-- 建议放在外层 -->
		<u-navbar title="设备监测" @leftClick="devicemenuShow" :safeAreaInsetTop="false">
			<view class="u-nav-slot" slot="left">
				<u-icon name="list" size="20">
						
				</u-icon>
			</view>
			</u-navbar>
		
			<view v-show="menushow" class="menupage">
			     <DeviceMenu @menuClick="menuClick"></DeviceMenu>
			</view>
		
			<view v-show="!menushow" class="main">
				<view class="u-page">
						<u-list
						>
							<u-list-item
							   class="itemback"
								v-for="(item, index) in curlist"
								:key="index"
							>
							<u-row gutter="5" customStyle="margin-bottom: 10px">
							    <u-col span="24">
									<u--text :text="item.strinstallpos"></u--text>
							    </u-col>
							</u-row>
							<u-row gutter="5" customStyle="margin-bottom: 10px">
							    <u-col span="2">
							        <u-tag text="断开" v-if="item.netStatus==0" type="error"></u-tag>
							        <u-tag text="连接" v-else type="success"></u-tag>
							    </u-col>
							    <u-col span="2">
							        <u-tag text="正常" v-if="item.warnFlag==0" type="success"></u-tag>
							        <u-tag :text="item.warnLevel_str" v-else type="error"></u-tag>
							    </u-col>
							    <u-col span="4">
							    </u-col>
							    <u-col span="4">
							        <u--text class="timetext" :text="item.readTime"></u--text>
							    </u-col>
							</u-row>
							<view  v-if="colums[TabCur+'_monitor']!=null">
							    <view class="datacard" v-for="(showitem,index) in colums[TabCur+'_monitor']" v-show="showitem.appShow == 1 ">
									<view  v-show="showitem.monitorcode != 'strinstallpos' && showitem.monitorcode != 'netStatus' && showitem.monitorcode != 'warnFlag' && showitem.monitorcode != 'readTime'">
							        <view class="demo-layout bg-purple-light">{{showitem.des}}</view>
							        <view v-if="showitem.datatype==1" class="demo-layout bg-purple-light">{{item[showitem.monitorcode]}}</view>
							        <view v-if="showitem.datatype==2" class="demo-layout bg-purple-light">{{item.readData[showitem.monitorcode]}}</view>
									</view>
							    </view>
							</view>
							</u-list-item>
						</u-list>
					</view>
				<!-- <view class="card" v-for="(item,index) in 4" :key="index">
					<H1>Tab{{index}}</H1>
				</view> -->
			</view>
	</view>
</template>

<script>
	import DeviceMenu from './devicemenu/devicemenu.vue'
	import api from "@/api/api";
	export default {
		data() {
			return {
				menushow:false,
				TabCur: "gate",
				curlist: [],
				deviceList:{},
				scrollLeft: 0,
				currentTab:0,
				colums:{},
				tab0data:[
					{name:"测风装置",id:0},
					{name:"对射测风",id:1},
					{name:"单点测风",id:2},
					{name:"九点测风",id:3},
				]
			};
		},
		components: {
		    DeviceMenu,
		},
		props:['showColum'],
		watch:{
			showColum(data){
				this.colums = data;
			}
		},
		created() {
			this.loadData(this.TabCur);
			this.colums = this.showColum;
		},
		methods: {
			loadData(type){
				  new Promise((resolve, reject) => {
				   api.getDeviceMonitor({devicetype: type, pagetype: "normal", filterParams: {}}).then(response => {
				      if(response.data.code ==200){ 
							  this.deviceList[type] = response.data.result.msgTxt[0].datalist
							  this.curlist = this.deviceList[type]
				      }else{
				        resolve(response)
				      }
				    }).catch(error => {
						console.log("catch===>response",response)
				      reject(error)
				    })
				  })
			},
			tabSelect(e) {
				this.currentTab = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			devicemenuShow(e){
				this.menushow = true;
			},
			menuClick(id){
				this.TabCur = id;
				// 显示该分类的数据
				this.curlist = this.deviceList[this.TabCur];
				if(this.curlist == null){
					this.curlist = [];
				}
				// 选择设备分类，重新获取数据
				this.loadData(this.TabCur);
				this.menushow = false;
			}
		}
	}
</script>

<style>
	.top-nav{
		height: 100rpx;
		line-height: 100rpx;
		background-color: #2aa9f3;
		color: #daaaa;
	}
	.top-nav2{
		background-color:#ffffff
	}
	.main{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
	}
	.card{
		background-color: #ffffff;
		margin: auto;
		margin-top: 20rpx;
		width: 90%;
		height: 280rpx;
		border:1rpx solid #000000;
		border-radius: 20rpx;
	}
	.menupage{
		position: absolute;
		z-index: 2;
		top:40rpx;
		height: calc(100% - 40rpx);
		width: 100%;
	}
	.timetext{
		text-align: right;
		float: right;
	}
	.itemback{
		padding: 20rpx;
		background-color: #ffffff;
		margin-bottom: 5rpx;
	}
	.datacard{
		width: 23%;
		margin: 1%;
		float: left;
		height: 70rpx;
	}
</style>