去除未识别

SafeCampus.WEB/src/views/attendance/roolcall/detail.vue

@@ -13,15 +13,12 @@
             <el-col :span="6">
               <el-text class="mx-1" type="warning" size="large">趴桌子：{{ LieOnTable.length }}人</el-text></el-col
             >
-            <el-col :span="6">
-              <el-text class="mx-1" type="info" size="large">未识别：{{ UnrecognizedD.length }}</el-text></el-col
-            >
           </el-row>
         </el-col>
       </el-row>
     </div>
     <el-row :gutter="20">
-      <el-col :span="18"
+      <el-col :span="24"
         ><el-row class="rowbg">
           <el-col :xl="4" :lg="4" :md="6" :sm="8" :xs="12" v-for="(item, index) in listData" :key="index"
             ><div class="grid-content">
@@ -49,24 +46,6 @@
           >
         </el-row></el-col
       >
-      <el-col :span="6">
-        <div class="unrecognized">
-          <div class="title">未识别人员</div>
-          <ul>
-            <li class="imgBox" v-for="(item, index) in UnrecognizedD" :key="index">
-              <el-image
-                style="width: 80px; height: 80px"
-                v-if="item.snapshotUrl"
-                :src="item.snapshotUrl"
-                :preview-src-list="[item.snapshotUrl]"
-                :initial-index="4"
-                fit="cover"
-              />
-              <el-button color="#626aef" size="small" @click="assignFn(item)">指派</el-button>
-            </li>
-          </ul>
-        </div>
-      </el-col>
     </el-row>
     <el-dialog v-model="visible" title="指派" width="830px" :before-close="handleClose">
       <el-row class="rowbg">

monitorMobile/.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules/
+dist/
+unpackage/
+.hbuilderx/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+.env.development
+
+package-lock.json
+yarn.lock

monitorMobile/pages.json

@@ -72,7 +72,7 @@
 		{
 			"path": "pages/earlyWarning/index",
 			"style": {
-				"navigationBarTitleText": "预警巡警"
+				"navigationStyle": "custom"
 			}
 		},
 		// 我的

monitorMobile/pages/earlyWarning/index.vue

@@ -1,6 +1,110 @@
 <template>
-	<view>
-		预警巡警
+	<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">
+									<view class="left-layout">
+										<text>11111111111</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">
+									<view class="left-layout">
+										<text>11111111111</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">
+									<view class="startBox">
+										2024-08-19 24:20:54
+									</view>
+									<text>至</text>
+									<view class="endBox">
+										2024-08-19 24:20:54
+									</view>
+									<view class="timeIcon">
+										<image style="width: 30rpx;height:30rpx;"
+											src="@/static/image/earlyWarning/calendar.png" mode=""></image>
+									</view>
+								</view>
+							</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="list" text="暂无数据"></u-empty>
+				<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
+					<u-list-item v-for="(item, index) in list" :key="index">
+						<view class="liBox">
+
+						</view>
+					</u-list-item>
+					<u-loadmore :status="status" />
+				</u-list>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,15 +112,278 @@
 	export default {
 		data() {
 			return {
-				
+				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,
+				list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ],
+				isLoading: false,
+				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
 			}
 		},
+		onLoad() {
+			// 隐藏导航栏
+			this.loadmore()
+		},
 		methods: {
-			
+
+			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.list.push({}, {})
+					}
+					// 获取到的总条数>=接口总条数
+					if (this.list.length >= 14) {
+						this.status = 'nomore'
+					} else {
+						this.status = 'loadmore'
+					}
+				}, 2000)
+			}
 		}
 	}
 </script>
 
-<style>
+<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;
 
-</style>
+					.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 {
+					// height: calc(100% - 360rpx);
+					position: absolute;
+					z-index: 999;
+					top: 89rpx;
+					width: 100%;
+					height: calc(100vh - 600rpx);
+					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: 10px;
+					box-sizing: border-box;
+					border-radius: 20px;
+					margin-bottom: 10px;
+				}
+
+			}
+		}
+	}
+</style>