pinganxiaoyuan/monitorMobile/pages/earlyWarning/index.vue

<template>
	<view class="warningBox">
		<!-- 头部背景 -->
		<view class="headerBox">
			<!-- <view class="">
				<image src="@/static/image/earlyWarning/back.png" mode="aspectFill"></image>
			</view> -->

			<view class="logo">
				<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="contentBox">
			<view class="warningInfo">
				<view class="searchBox">
					<view class="searchLine" @click="openSearch">
						<view class="searchLabels">
							<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/screen.png" mode="">
							</image>
							<image v-show="isShowSearch" src="@/static/image/earlyWarning/screenActive.png" mode="">
							</image>
							<text class="labels">筛选</text>
							<view class="values">{{searchValue}}</view>
						</view>

						<view class="arrow">
							<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
							</image>
							<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.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>
								</u-col>
								<u-col span="5">
									<view class="demo-layout" @click="toOpenSelect">
										<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">
									<view class="demo-layout" @click="toOpenmanjor">
										<view class="left-layout">
											<text>{{searchForm.$cameraId || '预警摄像头'}}</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" @click="clearform">
									重置
								</view>
								<view class="rightBtn" @click="onsubmit">
									确认
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="tableBox">
					<u-empty marginTop="100rpx" :show="warnList.length == 0&&status == 'nomore'" mode="list"
						text="暂无数据"></u-empty>
					<!-- <u-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> -->
					<!-- <scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true"
						@refresher-pull="onRefresh" @refresher-refresh="doRefresh" @refresher-restore="restore"
						@refresher-abort="abort"> -->
					<u-list :loading="isLoading" refresher-enabled :refresher-triggered="isTriggered"
						@refresher-pull="onRefresh" @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
						<u-list-item v-for="(item, index) in warnList" :key="index">
							<view class="liBox">
								<view class="headerCard">
									<view class="schoolName">
										演示学校
									</view>
									<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']">
										{{item.warnHand == 1 ? '已处理' : '未处理'}}
									</view>
								</view>
								<view class="topCard">
									<view class="pic">
										<image :src="item.snapshotUrl" mode="aspectFill"
											@click="previewImage(item.snapshotUrl,index)"></image>
									</view>
									<view class="rightCard">
										<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 style="margin-top: 20rpx;">
											<u-col span="6">
												<view class="midContent">
													专业：--
												</view>
											</u-col>
											<u-col span="6">
												<view class="midContent">
													班级：{{item.personSetName || '--'}}
												</view>
											</u-col>
										</u-row>

									</view>
								</view>
								<view class="midCard">
									<view class="secondCard">
										<image style="width: 30rpx;height: 30rpx;"
											src="@/static/image/earlyWarning/warnType.png" mode=""></image>
										<view class="txt">
											预警类型：{{item.alarmTypeDesc || '--'}}
										</view>
									</view>
									<view class="thirdCard">
										<image style="width: 30rpx;height: 30rpx;"
											src="@/static/image/earlyWarning/warnVideo.png" mode=""></image>
										<view class="txt">
											预警摄像头：{{item.cameraName || '--'}}
										</view>
									</view>

								</view>
								<view class="btoCard">
									<view class="btoContent">
										时间：{{item.tick}}
									</view>
									<view class="rightBox btoBox" @click="toDetail(item)">
										<view class="txt">
											查看
										</view>
									</view>
								</view>
							</view>
						</u-list-item>
						<u-loadmore :status="status" />
					</u-list>
					<!-- </scroll-view> -->
					<!-- </u-pull-refresh> -->
				</view>
				<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType"
					:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型"
					search-placeholder="预警类型" />
				<selectSearch ref="selectmanjorBox" :cellVisible="false" v-model="searchForm.cameraId"
					:options="[{value:'',label:'全部'},...allOptions.monitorList]" :title.sync="searchForm.$cameraId" placeholder="预警摄像头"
					search-placeholder="预警摄像头" />
				<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand"
					:options="handOption" :title.sync="searchForm.$warnHand" placeholder="处理状态" />
			</view>
		</view>
	</view>
</template>

<script>
	import selectRadio from "@/components/selectRadio.vue"
	import selectSearch from "@/components/selectSearch.vue"
	import {
		page, //获取列表
		warnType, //获取预警类型
	} from '@/api/warn/index.js'
	export default {
		components: {
			selectRadio,
			selectSearch
		},
		data() {
			return {
				searchValue: '全部',
				isShowSearch: false,
				isTriggered: true,
				searchForm: {
					alarmType: '',
					$alarmType: '全部',
					warnHand: '',
					$warnHand: '',
					cameraId: '',
					$cameraId: '',
					tick: [],
					StartTick: '',
					EndTick: '',
					pageNum: 1,
					pageSize: 10
				},
				warnOption: [{
					label: '全部',
					value: ''
				}],
				creamaData: [],
				handOption: [{
						label: '已处理',
						value: 1
					},
					{
						label: '未处理',
						value: 0
					},
				],
				warnList: [],
				isLoading: false,
				finished: false,
				refreshing: false,
				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
			}
		},
		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]
				}

			},
		},
		onLoad() {
			console.log(this.searchForm.$alarmType)
			// 获取预警类型
			this.getWarnTypeList()
			// 隐藏导航栏
			this.loadmore()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.status = 'loadmore'
			this.searchForm.pageNum = 1;
			this.warnList = []
			this.loadmore()
		},
		methods: {
			selectChange(e) {
				console.log(e, 2323)
			},
			// 预览图片
			previewImage(url, index) {
				// 使用uni.previewImage API 进行图片预览
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: [url] // 需要预览的图片链接列表
				});
			},
			clearform() {
				this.searchForm = {
					alarmType: '',
					$alarmType: '全部',
					warnHand: '',
					$warnHand: '',
					cameraId: '',
					$cameraId: '',
					tick: [],
					StartTick: '',
					EndTick: '',
					pageNum: 1,
					pageSize: 10
				}
				// this.isShowSearch = false;
			},
			onsubmit() {
				let arr = []
				for (let key in this.searchForm) {
					if (['$alarmType','$cameraId', '$warnHand', 'StartTick', 'EndTick'].includes(key)) {
						if (Object.hasOwnProperty.call(this.searchForm, key) && this.searchForm[key]) {
							arr.push(this.searchForm[key])
						}
					}
				}
				this.searchValue = arr.join('，');
				this.isShowSearch = false;
				this.status = 'loadmore'
				this.searchForm.pageNum = 1;
				this.warnList = []
				this.loadmore()
			},
			// 获取预警类型
			getWarnTypeList() {
				warnType({}).then(res => {
					let {
						code,
						data
					} = res;

					if (code == 200) {
						let arr = data.map(item => {
							return {
								label: item.name,
								value: item.code
							};
						})
						this.warnOption = [...this.warnOption, ...arr]
						// this.warnOption.unshift({
						// 	label: '全部',
						// 	value: ''
						// })
					}
				});


			},
			// 获取摄像头
			// creamaData
			// 跳转详情页面
			toDetail(row) {
				uni.navigateTo({
					url: '/pages/earlyWarning/detail?id=' + row.id
				});
			},
			// 预警类型弹框筛选
			toOpen() {
				this.$refs.selectSearchBox.show = true;
			},
			// 预警摄像头弹框筛选
			toOpenmanjor() {
				this.$refs.selectmanjorBox.show = true;
			},
			// 处理情况筛选
			toOpenSelect() {
				this.$refs.selectRadioBox.show = true;
			},
			// 打开筛选框
			openSearch() {
				this.isShowSearch = !this.isShowSearch;
			},
			isSelect() {

			},
			scrolltolower() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.searchForm.pageNum += 1;
				this.loadmore()
			},
			loadmore() {
				if (this.status != 'loadmore') return
				this.status = 'loading'
				this.isLoading = true;
				delete this.searchForm.tick
				page(this.searchForm).then(res => {
					if (res?.code === 200) {
						this.warnList = [...this.warnList, ...res?.data?.list];
						this.isLoading = false;
						// 获取到的总条数>=接口总条数
						if (this.warnList.length >= res.data.total) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}

				})
			}
		}
	}
</script>

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

		.headerBox {
			/*#ifdef H5*/
			height: 272rpx;
			background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover;

			/*#endif*/
			/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
			height: 340rpx;
			background: url("@/static/image/earlyWarning/back.png") no-repeat center center / cover;
			/*#endif*/
			position: relative;

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

			}

			.logo {


				image {
					height: 46rpx;
				}



				image {
					height: 46rpx;
				}

				position: absolute;
				left: 36rpx;
				/*#ifdef H5*/
				top: 50rpx;
				/*#endif*/
				/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
				top: 110rpx;
				/*#endif*/
			}
		}

		.contentBox {
			/*#ifdef H5*/
			height: calc(100% - 303rpx);
			/*#endif*/
			/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
			height: calc(100% - 375rpx);

			/*#endif*/
			.warningInfo {
				width: 100%;
				height: 100%;
				background: #F6F8FA;

				.u-modal__title {
					color: #000000;
				}
			}

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

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

					.searchLabels {
						display: flex;
						align-items: center;
						width: calc(100% - 34rpx);

						image {
							width: 40rpx;
							height: 40rpx;
							flex-shrink: 1;
						}

						.labels {
							width: 70rpx;
							display: block;
							color: #333333;
							margin-left: 10rpx;
							flex-shrink: 1;
						}

						.values {
							width: calc(100% - 40rpx - 50rpx);
							color: #2388FF;
							font-weight: 700;
							margin-left: 18rpx;
							overflow: hidden;
							word-wrap: break-word;
							white-space: pre-wrap;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}


					.arrow {
						// text-align: right;
						// flex-shrink: 1;

						image {
							width: 34rpx;
							height: 34rpx;
						}
					}

					.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;
							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 - 60rpx);
					font-size: 26rpx;
					background: rgba(0, 0, 0, 0.2);

					.content {
						background: #FFFFFF;
						padding: 15px;
						box-sizing: border-box;
						border-top: 1px solid rgba(0, 0, 0, 0.1);

						.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 #ccc;
							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: 30rpx;
				box-sizing: border-box;
				// height: 600px;
				padding-bottom: 30px;


				.liBox {
					background: #fff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					font-family: 'PingFang SC';

					.headerCard {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 24rpx 0;

						.schoolName {
							font-size: 32rpx;
							font-weight: 700;
							font-family: 'PingFang SC';
							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: 100rpx;
							flex-shrink: 1;
							text-align: center;
							font-size: 24rpx;
							border-radius: 8rpx;
							color: #fff;
							padding: 8rpx 12rpx;
							font-family: 'PingFang SC';
						}

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

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

					.topCard {
						display: flex;
						border-top: 1px solid rgba(0, 0, 0, 0.1);
						align-items: center;
						padding: 20rpx 0;

						.pic {
							width: 120rpx;
							height: 120rpx;

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

						.rightCard {
							margin-left: 20rpx;
							font-size: 26rpx;
							font-family: 'PingFang SC';
							width: calc(100% - 140rpx);
						}
					}

					.midCard {
						font-size: 26rpx;

						.secondCard,
						.thirdCard {
							display: flex;
							align-items: center;


							.txt {
								font-size: 26rpx;
								font-family: 'PingFang SC';
								margin-left: 10rpx;
								color: #333333;
							}
						}

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

					.btoCard {
						border-top: 1px solid rgba(0, 0, 0, 0.1);
						margin-top: 20rpx;
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						font-family: 'PingFang SC';

						.rightBox {
							.txt {
								width: 120rpx;
								height: 60rpx;
								line-height: 60rpx;
								font-family: 'PingFang SC';
								text-align: center;
								background: #2388FF;
								color: #fff;
								border-radius: 80rpx;
							}
						}
					}
				}

			}
		}
	}
</style>