Vent-App/pages/home/firstmodel.vue

<template>
	<view class="container">
			<!-- 建议放在外层 -->
		<u-navbar title="设备监测" @leftClick="devicemenuShow" :bgImage="backPic" :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"
					>
						<div @tap="openNewPage(item)">
							<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" class="error-tag"></u-tag>
							    <u-tag text="连接" v-else type="success" class="success-tag"></u-tag>
							</u-col>
							<u-col span="2">
							    <u-tag v-if="item.warnFlag==0" class="success-tag">正常</u-tag>
							    <u-tag :text="item.warnLevel_str" v-else type="error" class="error-tag" ></u-tag>
							</u-col>
							<u-col span="3">
							</u-col>
							<u-col span="5">
							    <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>
						</div>
					</u-list-item>
				</u-list>
			</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:{},
				backPic:"url(../../../../static/topnavbar.png)",
			};
		},
		components: {
		    DeviceMenu,
		},
		props:['showColum'],
		watch:{
			showColum(data){
				this.colums = data;
				console.log(this.colums)
			}
		},
		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]
							  console.log(this.curlist,'aaaaaaaaaaaaaaaaaaaa')
				      }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;
			},
			openNewPage(params) {
				  uni.navigateTo({
				   url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}`
				  })
			}
		}
	}
</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{
		  cursor: pointer; /* 设置鼠标指针为手指状 */
		padding: 20rpx;
		background-color: #ffffff;
		margin-bottom: 5rpx;
	}
	.datacard{
		width: 23%;
		margin: 1%;
		float: left;
		height: 70rpx;
		text-align: center;
		background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
	}
	.error-tag {
	    background-image: url('../../static/model/9432.png');
	    background-color: #ff0000;
	}
	
	.success-tag {
	    background-image: url('../../static/model/9431.png');
	    background-color: #00ff00;
	}
</style>