pinganxiaoyuan/monitorMobile/pages/monitor/index.vue

<template>
	<view class="inspectionCenter">
		<view class="searchBox">
			<view class="searchLine">
				<view class="leftSearchBox">
					<view class="searchLabel">
						筛选条件:
					</view>
					<view class="searchValue">

					</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" @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">
							<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="aspectFill"></image>
								<view class="resolvingPower">
									2560*1440
								</view>
							</view>
							<view class="rightCard">
								<view class="firstCard">
									<view class="schoolName">
										摄像头ID：SXT001
									</view>
								</view>
								<view class="secondCard">

									<view class="txt">
										摄像头名称：厨房（良景）
									</view>
								</view>
								<view class="thirdCard">

									<view class="txt">
										设备IP：192.168.10.130
									</view>
								</view>
							</view>
						</view>

						<view class="btoCard">
							<view class="leftBox btoBox">
								<image src="@/static/image/earlyWarning/school.png" mode=""></image>
								<view class="txt">
									所属学校：演示学校
								</view>
							</view>
							<view class="rightBox btoBox" @click="deleteClick">
								<view class="txt">
									播放
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :status="status" />
			</u-list>
		</view>
		<u-modal :show="showDelete" :title="deleteTitle" :showCancelButton="true" @confirm="confirmDelete"
			@cancel="cancelDelete">
			<view class="slot-content">
				<text style="text-align: center;">是否确定删除该预警吗?</text>
			</view>
		</u-modal>
		<selectSearch ref="selectSearchBox" :cellVisible="false" :value.sync="searchForm.alarmType"
			:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" />
		<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand"
			:options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" title="楼栋" />
	</view>
</template>

<script>
	import selectRadio from "@/components/selectRadio.vue"
	import selectSearch from "@/components/selectSearch.vue"
	export default {
		components: {
			selectRadio,
			selectSearch,

		},
		data() {
			return {
				showDelete: false,
				deleteTitle: '提示',
				deleteContent: '是否确定删除该预警吗?',
				isShowSearch: false,
				searchForm: {
					alarmType: '警告类型',
					warnHand: '处理状态',
					tick: [],
					StartTick: '开始时间',
					EndTick: '结束时间',
				},
				warnList: [{
					warnHand: 1
				}, {
					warnHand: 0
				}, {
					warnHand: 1
				}, {
					warnHand: 1
				}, {
					warnHand: 1
				}, {}, {}, {}, {}, ],
				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: {
			cancelDelete() {
				this.showDelete = false;
			},
			deleteClick() {
				this.showDelete = true;
			},
			confirmDelete() {
				this.showDelete = false;
			},
			// 跳转处理页面
			toHandle(row) {
				if (row.warnHand == 1) {
					uni.navigateTo({
						url: '/pages/earlyWarning/handlingSuggestions'
					});
				}

			},
			// 跳转详情页面
			toDetail(row) {
				uni.navigateTo({
					url: '/pages/earlyWarning/detail'
				});
			},
			// 预警类型弹框筛选
			toOpen() {
				this.$refs.selectSearchBox.show = true;
			},
			// 处理情况筛选
			toOpenSelect() {
				this.$refs.selectRadioBox.show = true;
			},
			// 打开筛选框
			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>
	// .contentBox {
	// 	height: calc(100% - 375rpx);
	.inspectionCenter {
		width: 100%;
		height: 100%;

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

	.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: 30px;


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

			.topCard {
				display: flex;

				.pic {
					position: relative;

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

					.resolvingPower {
						position: absolute;
						top: 15rpx;
						right: 15rpx;
						background: #000000;
						color: #fff;
						padding: 8rpx;
						box-sizing: border-box;
						font-size: 20rpx;
						border-radius: 4rpx;
					}
				}

				.rightCard {
					margin-left: 20rpx;
					margin-top: 15rpx;

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

						.schoolName {
							font-size: 32rpx;
							font-weight: 700;
							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: 26rpx;
							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: space-between;
				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;
					}
				}

				.rightBox {
					width: 180rpx;
					height: 74rpx;
					background: #2388FF;
					color: #fff;
					border-radius: 80rpx;
				}
			}
		}

	}

	// }
</style>