pinganxiaoyuan/monitorMobile/pages/earlyWarning/index.vue

<template>
	<view class="warningBox">
		<!-- 头部背景 -->
		<view class="headerBox">
			<image :src="modelObj.backgroundImg"></image>
			<view class="selectModel" @click="showSelectModel = true">
				<view class="modelName">
					{{modelObj.name}}
				</view>
				<image src="@/static/image/earlyWarning/down.png"></image>
			</view>
			<u-popup :show="showSelectModel" @close="close" @open="open" mode="top">
				<view class="selectPopupBox">
					<view class="modelLi" :class="item.id == isActive ? 'active' : ''" @click="modelChange(item)"
						v-for="(item,i) in modelList">
						{{item.name}}
					</view>
				</view>
			</u-popup>
		</view>
		<view class="contentBox" v-if="isActive == '1'">
			<view class="searchBox">
				<view class="searchLine">
					<view class="leftSearchBox">
						<view class="searchLabel">
							筛选条件:
						</view>
						<view class="searchValue">
							111111111111111111111111111111111111111111111111111111111111111111111111
						</view>
					</view>
					<view class="searchShow" @click="openSearch">
						<image v-show="isShowSearch==false" style="width:20px;height:20px;"
							src="@/static/image/earlyWarning/screen.png" mode="">
						</image>
						<image v-show="isShowSearch" style="width:20px;height:20px;"
							src="@/static/image/earlyWarning/screenActive.png" mode="">
						</image>
					</view>
				</view>
				<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
					<view class="content" @click.stop="isSelect">
						<u-row justify="space-between" gutter="10">
							<u-col span="7">
								<view class="demo-layout" @click="toOpen">
									<view class="left-layout">
										<text>{{searchForm.alarmType}}</text>
									</view>
									<view class="right-layout">
										<image style="width: 30rpx;height:30rpx;"
											src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
									</view>
								</view>

								<!-- <jp-select-plus ref="selectPlus" :isShow="false" color="#2388FF" placeholder="请选择"
									isSearch v-model="va3" :list="listc"></jp-select-plus> -->
							</u-col>
							<u-col span="5">
								<view class="demo-layout">
									<view class="left-layout">
										<text>{{searchForm.warnHand}}</text>
									</view>
									<view class="right-layout">
										<image style="width: 30rpx;height:30rpx;"
											src="@/static/image/earlyWarning/arrowRight.png" mode=""></image>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row style="margin-top:10px;" justify="space-between" gutter="10">
							<u-col span="12">
								<uni-datetime-picker v-model="searchForm.tick" type="datetimerange">
									<view class="demo-layout">
										<view class="startBox">
											{{searchForm.StartTick}}
										</view>
										<text>至</text>
										<view class="endBox">
											{{searchForm.EndTick}}
										</view>
										<view class="timeIcon">
											<image style="width: 30rpx;height:30rpx;"
												src="@/static/image/earlyWarning/calendar.png" mode=""></image>
										</view>
									</view>
								</uni-datetime-picker>

							</u-col>
						</u-row>
						<view class="btnBox">
							<view class="leftBtn">
								重置
							</view>
							<view class="rightBtn">
								确认
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="tableBox">
				<u-empty marginTop="100rpx" :show="false" mode="warnList" text="暂无数据"></u-empty>
				<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
					<u-list-item v-for="(item, index) in warnList" :key="index">
						<view class="liBox">
							<view class="topCard">
								<view class="pic">
									<image src="@/static/image/earlyWarning/warnBack.png" mode=""></image>
								</view>
								<view class="rightCard">
									<view class="firstCard">
										<view class="schoolName">
											学校名称学校名称学校名称学校名称
										</view>
										<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']">
											{{item.warnHand == 1 ? '已处理' : '未处理'}}
										</view>
									</view>
									<view class="secondCard">
										<image style="width: 30rpx;height: 30rpx;"
											src="@/static/image/earlyWarning/warnType.png" mode=""></image>
										<view class="txt">
											警告类型：周界入侵
										</view>
									</view>
									<view class="thirdCard">
										<image style="width: 30rpx;height: 30rpx;"
											src="@/static/image/earlyWarning/warnVideo.png" mode=""></image>
										<view class="txt">
											警告摄像头：厨房（良景）
										</view>
									</view>
								</view>
							</view>
							<view class="midCard">
								<u-row>
									<u-col span="6">
										<view class="midContent">
											姓名：杨云
										</view>
									</u-col>
									<u-col span="6">
										<view class="midContent">
											系部：安环部
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="6">
										<view class="midContent">
											专业：环艺
										</view>
									</u-col>
									<u-col span="6">
										<view class="midContent">
											班级：第二班
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12">
										<view class="midContent">
											时间：2024-08-15 11:59:12
										</view>
									</u-col>
								</u-row>
							</view>
							<view class="btoCard">
								<view class="leftBox btoBox">
									<image src="@/static/image/earlyWarning/detail.png" mode=""></image>
									<view class="txt">
										查看
									</view>
								</view>
								<view class="midBox btoBox">
									<image v-if="item.warnHand == 1" src="@/static/image/earlyWarning/handle.png"
										mode=""></image>
									<image v-if="item.warnHand == 0"
										src="@/static/image/earlyWarning/handleDisabled.png" mode=""></image>
									<view :class="[item.warnHand == 1?'txt':'disabled']">
										处理
									</view>
								</view>
								<view class="rightBox btoBox">
									<image src="@/static/image/earlyWarning/delete.png" mode=""></image>
									<view class="txt">
										删除
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
					<u-loadmore :status="status" />
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchForm: {
					alarmType: '警告类型',
					warnHand: '处理状态',
					tick: [],
					StartTick: '开始时间',
					EndTick: '结束时间',
				},
				showSelectModel: false,
				modelObj: {
					name: '预警信息',
					backgroundImg: require(`@/static/image/earlyWarning/warnBack.png`)
				},
				isActive: '1',
				modelList: [{
						id: '1',
						name: '预警信息',
						imgUrl: require(`@/static/image/earlyWarning/warnBack.png`)
					},
					{
						id: '2',
						name: '巡检中心',
						imgUrl: require(`@/static/image/earlyWarning/majorBack.png`)
					}
				],
				isShowSearch: false,
				warnList: [{
					warnHand: 0
				}, {}, {}, {}, {}, {}, {}, {}, {}, ],
				isLoading: false,
				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
				listc: [{
						code: 1,
						name: 'dasda'
					}, {
						code: 2,
						name: 'dasda'
					},
					{
						code: 3,
						name: 'dasda'
					},
					{
						code: 4,
						name: 'dasda'
					},
					{
						code: 5,
						name: 'dasda'
					},
					{
						code: 6,
						name: 'dasda'
					},
					{
						code: 7,
						name: 'dasda'
					},
					{
						code: 8,
						name: 'dasda'
					},
					{
						code: 9,
						name: 'dasda'
					},
					{
						code: 10,
						name: 'dasda'
					},
					{
						code: 11,
						name: 'dasda'
					},
					{
						code: 12,
						name: 'dasda'
					},
					{
						code: 13,
						name: '你好'
					}
				]
			}
		},
		watch: {
			"searchForm.tick"() {
				console.log('日期时间:', this.searchForm.tick);
				
				if(this.searchForm.tick && this.searchForm.tick.length>0) {
					this.searchForm.StartTick = this.searchForm.tick[0]
					this.searchForm.EndTick = this.searchForm.tick[1]
				}
				
			},
		},
		filters: {
			// statusChange(val) {
			// 	switch (val) {
			// 		case 'todo':
			// 			return '我的待办'
			// 			break;
			// 		case 'send':
			// 			return '由我发起'
			// 			break;
			// 		case 'done':
			// 			return '我的已办'
			// 			break;
			// 		default:

			// 	}
			// },
		},
		onLoad() {
			// 隐藏导航栏
			this.loadmore()
		},
		methods: {
			toOpen() {
				this.$refs.selectPlus.open()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showSelectModel = false;
				// console.log('close');
			},
			// 切换模块
			modelChange(item) {
				console.log(item)
				this.modelObj.name = item.name;
				this.modelObj.backgroundImg = item.imgUrl;
				this.isActive = item.id;
				this.showSelectModel = false;
				// switch (item.id) {
				// 	case '1':

				// 		break;
				// 	case '2':
				// 		break;
				// 	default:
				// 		break;
				// }
			},
			// 打开筛选框
			openSearch() {
				this.isShowSearch = !this.isShowSearch;

			},
			isSelect() {

			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				if (this.status != 'loadmore') return
				this.status = 'loading'
				setTimeout(() => {
					for (let i = 0; i < 1; i++) {
						this.warnList.push({}, {})
					}
					// 获取到的总条数>=接口总条数
					if (this.warnList.length >= 14) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warningBox {
		height: 100%;

		.headerBox {
			height: 380rpx;
			// background: url("@/static/image/earlyWarning/warnBack.png") no-repeat center center / cover;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.selectModel {
				position: absolute;
				left: 60rpx;
				top: 108rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.modelName {
					font-size: 34rpx;
					color: #fff;
					font-family: PingFang SC;
					margin-right: 20rpx;
				}

				image {
					width: 24rpx;
					height: 12rpx;
				}
			}

			.selectPopupBox {
				padding: 0 10px;
				box-sizing: border-box;

				.modelLi {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					border-bottom: 1px solid #efecec;
				}

				.active {
					color: rgb(35, 136, 255);
				}
			}
		}

		.contentBox {
			height: calc(100% - 375rpx);

			.searchBox {
				// height: calc(100% - 360rpx);
				position: relative;

				.searchLine {
					height: 88rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 15px;
					box-sizing: border-box;
					background: #fff;

					.leftSearchBox {
						display: flex;
						align-items: center;
						width: calc(100% - 40px);

						.searchLabel {
							flex-shrink: 1;
							color: #333333;
							width: 80px;
						}

						.searchValue {
							width: calc(100% - 60px);
							margin-left: 10px;
							color: #2388FF;
							overflow: hidden;
							word-wrap: break-word;
							white-space: pre-wrap;
							// font-size: 14px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}
				}

				.searchDialog {
					position: absolute;
					z-index: 990;
					top: 89rpx;
					width: 100%;
					height: calc(100vh - 375rpx - 100rpx);
					font-size: 26rpx;
					background: rgba(0, 0, 0, 0.2);

					.content {
						background: #FFFFFF;
						padding: 15px;
						box-sizing: border-box;

						.demo-layout {
							height: 80rpx;
							border-radius: 8rpx;
							background: #F5F5F5;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 10px;
							box-sizing: border-box;

							.left-layout {
								color: #777777;
							}

							.right-layout {}

							.startBox {
								color: #777777;
							}

							text {
								color: #777777;
							}

							.endBox {
								color: #777777;
							}

							.timeIcon {}
						}
					}

					.btnBox {
						display: flex;
						align-items: center;
						margin-top: 15px;

						.leftBtn {
							width: 50%;
							height: 74rpx;
							line-height: 74rpx;
							border: 1px solid #BABABA;
							border-radius: 12rpx;
							color: #333333;
							text-align: center;

						}

						.rightBtn {
							width: 50%;
							height: 74rpx;
							line-height: 74rpx;
							border: 1px solid #2388FF;
							border-radius: 12rpx;
							color: #fff;
							text-align: center;
							background: #2388FF;
							margin-left: 15rpx;
						}
					}
				}
			}

			.tableBox {
				height: 100%;
				padding: 10px;
				box-sizing: border-box;
				// height: 600px;
				padding-bottom: 50px;


				.liBox {
					background: #fff;
					padding: 20px 15px;
					box-sizing: border-box;
					border-radius: 20px;
					margin-bottom: 10px;

					.topCard {
						display: flex;

						.pic {

							image {
								width: 160rpx;
								height: 160rpx;
								border-radius: 4px;
							}
						}

						.rightCard {
							margin-left: 20rpx;

							.firstCard {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 20rpx;

								.schoolName {
									font-size: 32rpx;
									color: #333333;
									overflow: hidden;
									word-wrap: break-word;
									white-space: pre-wrap;
									// font-size: 14px;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
								}

								.statusBox {
									width: 140rpx;
									flex-shrink: 1;
									text-align: center;
									height: 50rpx;
									line-height: 50rpx;
									font-size: 28rpx;
									border-radius: 8rpx;
									color: #fff;
								}

								.handle {
									background: rgba(15, 175, 118, 0.1);
									color: #0FAF76;
								}

								.nohandle {
									background: rgba(239, 45, 45, 0.1);
									color: rgba(239, 45, 45, 1);
								}
							}

							.secondCard,
							.thirdCard {
								display: flex;
								align-items: center;
								margin-top: 18rpx;

								.txt {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #333333;
								}
							}
						}
					}

					.midCard {
						font-size: 28rpx;

						.midContent {
							margin-top: 18rpx;
						}
					}

					.btoCard {
						border-top: 1px solid rgba(0, 0, 0, 0.1);
						margin-top: 30rpx;
						padding: 18px 0 0 0;
						display: flex;
						justify-content: center;
						align-items: center;

						.btoBox {
							width: 33.3%;
							display: flex;
							justify-content: center;
							align-items: center;
							position: relative;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 15rpx;
							}
						}

						.btoBox:not(:last-child)::before {
							content: '';
							display: block;
							width: 1px;
							height: 100%;
							background: rgba(0, 0, 0, 0.1);
							position: absolute;
							right: 0px;
						}

						.midBox {
							.txt {
								color: #333333;
							}

							.disabled {
								color: #777777;
							}
						}
					}
				}

			}
		}
	}
</style>