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">
						<div @tap="openNewPage(item)">
							<u-row gutter="5" customStyle="margin-bottom: 10px">
								<u-col span="24">

									<img style="position: absolute;width: 35rpx;height:35rpx;" class="icon"
										:src="getIcon(TabCur)" alt="Icon" />
									<span class="title">{{item.strinstallpos}}</span>
								</u-col>
							</u-row>
							<u-row gutter="5" customStyle="margin-bottom: 10px">
								<u-col span="3" style="margin-right: 5rpx">
									<div v-if="item.netStatus == 0" class="error-tag1">
										<img src="'../../../../static/model/connectFalse.svg " alt=""
											class="icon-style" />
										<span style="float: right">断开</span>
									</div>
									<div v-else class="success-tag">
										<img src="'../../../../static/model/connectTrue.svg " alt=""
											class="icon-style" />
										<span style="float: right">连接</span>
									</div>
								</u-col>
								<u-col span="4">
									<div v-if="item.warnFlag == 0" class="success-tag">
										<img src="'../../../../static/model/alarmTrue.svg " alt="" class="icon-style" />
										<span style="float: right">{{ item.warnLevel_str }}</span>
									</div>
									<div v-else class="error-tag">
										<img src="'../../../../static/model/alarmFalse.svg " alt=""
											class="icon-style" />
										<span style="float: right">{{ item.warnDes }}</span>
									</div>
								</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']"
									:key="index" v-show="showitem.appShow == 1 && 
                        showitem.monitorcode != 'strinstallpos' &&
                        showitem.monitorcode != 'netStatus' &&
                        showitem.monitorcode != 'warnFlag' &&
                        showitem.monitorcode != 'readTime' &&
                        showitem.monitorcode != ''">
											<view :class="TabCur" style="padding-top:10rpx;padding-bottom: 10rpx;">
												<view v-if="showitem.datatype == 1 && showitem.monitorcode == 'doorUse'"
													class="demo-layout bg-purple-light"
													style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
													{{ item[showitem.monitorcode] == '2'?'行人':item[showitem.monitorcode] == '1'?'行车':'-' }}
												</view>
												<view v-else-if="showitem.datatype == 1"
													class="demo-layout bg-purple-light"
													style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
													{{ item[showitem.monitorcode] == null || item[showitem.monitorcode] == ''?'-':item[showitem.monitorcode]}}
												</view>
												<view v-else-if="
                          showitem.datatype == 2 " class="demo-layout bg-purple-light"
													style="color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
													{{ item.readData[showitem.monitorcode]==null || item.readData[showitem.monitorcode] == ''?'-':item.readData[showitem.monitorcode] }}
												</view>

													<view class="demo-layout bg-purple-light"
														style="margin-top: 6rpx; color: #677799;margin-bottom: 5rpx;">
														{{ showitem.des }}
													</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: {},
			};
		},
		components: {
			DeviceMenu,
		},
		props: ["showColum"],
		watch: {
			showColum(data) {
				this.colums = data;
				console.log(this.colums);
			},
		},
		created() {
			this.colums = this.showColum;
		},
		mounted() {
			this.startTimer();
		},
		methods: {
			startTimer() {
				// 每隔一段时间执行某个操作
				this.timer = setInterval(() => {
					// 执行定时任务
					this.loadData(this.TabCur);
					console.log("定时任务执行中...");
				}, 5000);
			},
			stopTimer() {
				// 停止定时器
				clearInterval(this.timer);
			},
			getIcon(itemValue) {
				// 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
				return '/static/sidebar/' + itemValue + ".svg";
			},
			getValueIcon(itemValue) {
				// 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
				return '/static/sidebar/' + itemValue + ".svg";
			},
			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];
								this.curlist.forEach((item) => {
									if (item.readData.frontGateOpen == 1) {
										item.readData.frontGateOpen = "打开";
									} else {
										item.readData.frontGateOpen = "关闭";
									}
									if (item.readData.midGateOpen == 1) {
										item.readData.midGateOpen = "打开";
									} else {
										item.readData.midGateOpen = "关闭";
									}
									if (item.readData.rearGateOpen == 1) {
										item.readData.rearGateOpen = "打开";
									} else {
										item.readData.rearGateOpen = "关闭";
									}
									if (item.readData.midGateOpen == 1) {
										item.readData.midGateOpen = "打开";
									} else {
										item.readData.midGateOpen = "关闭";
									}
								});
							} 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) {
				this.$destroy();
				uni.navigateTo({
					url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
				});
			},
		},
		destroyed() {
			// 停止定时器
			this.stopTimer();
		},
	};
</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: 10%;
		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 .content {
		width: 30rpx;
		height: 30rpx;
		left: 0rpx;
		top: 0rpx;
		position: absolute;
	}

	.datacard {
		border-radius: 10rpx;
		border: rgba(55, 135, 254, 0.28);
		width: 30%;
		margin: 1%;
		float: left;
		height: 105rpx;
		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));
	}

	.datacard .gate {
		background: linear-gradient(to right,
				rgba(75, 135, 254, 0.08),
				rgba(24, 184, 255, 0.08),
				rgba(80, 161, 237, 0.08));
	}

	.datacard .window {
		background: linear-gradient(to right,
				rgba(55, 125, 254, 0.08),
				rgba(4, 164, 255, 0.08),
				rgba(60, 131, 237, 0.08));
	}

	.datacard .windrect {
		background: linear-gradient(to right,
				rgba(85, 125, 254, 0.08),
				rgba(34, 164, 255, 0.08),
				rgba(90, 131, 237, 0.08));
	}

	.error-tag {
		border-radius: 10%;
		display: inline-block;
		color: #e90000;
		line-height: 50rpx;
		font-size: 14px;
		text-align: center;
		float: left;
		width: 180rpx;
		height: 50rpx;
		padding-right: 30rpx;
		background-color: rgba(233, 0, 0, 0.2);
	}

	.error-tag1 {
		border-radius: 10%;
		display: inline-block;
		color: #696969;
		line-height: 50rpx;
		font-size: 14px;
		text-align: center;
		margin-top: 10rpx;
		float: left;
		width: 120rpx;
		height: 50rpx;
		background-color: rgba(105, 105, 105, 0.2);
	}

	.success-tag {
		border-radius: 10%;
		color: #42c000;
		line-height: 50rpx;
		font-size: 14px;
		width: 120rpx;
		height: 50rpx;
		padding-right: 30rpx;
		background-color: rgba(226, 250, 214);
	}

	.icon-style {
		margin: 15rpx;
		width: 14px;
		height: 14px;
	}

	.title {
		margin-left: 40rpx;
		float: left;
		font-size: 28rpx;
		font-weight: 400;
	}
</style>