From eb472bb09d7d4596a4e01c6c449de9db4e2e3955 Mon Sep 17 00:00:00 2001
From: coco1986509808 <1986509808@qq.com>
Date: Wed, 26 Apr 2023 17:38:27 +0800
Subject: [PATCH] 4.26

---
 src/views/modules/monitoring/barrier-task.vue |  19 +-
 src/views/modules/monitoring/barrier.vue      | 112 +--
 src/views/modules/monitoring/surveillance.vue |  50 +-
 src/views/modules/monitoring/warning.vue      | 759 +++++++++---------
 4 files changed, 480 insertions(+), 460 deletions(-)

diff --git a/src/views/modules/monitoring/barrier-task.vue b/src/views/modules/monitoring/barrier-task.vue
index d7a3af1..7581249 100644
--- a/src/views/modules/monitoring/barrier-task.vue
+++ b/src/views/modules/monitoring/barrier-task.vue
@@ -2,34 +2,35 @@
 	<div class="task">
 		<el-dialog :visible.sync="taskVisible" :close-on-click-modal="false" width="60%">
 			<span slot="title">
-				<i style="	font-weight: bold;color: #333333;font-size: 16px">{{val.taskName}}</i>
+				<i style="	font-weight: bold;color: #333333;font-size: 16px">{{"监控任务十楼工位"}}</i>
 			</span>
 			<div>
 				<!-- 右 -->
 				<div style="width: 260px;float: right;">
 					<div style="display: flex;">
 						<div style="width:120px;height:120px">
+              <img :src="val.cphoto" alt="目标图片" height="100%">
 							<canvas width=120 height=120 ref="imageView">
 							</canvas>
 						</div>
-						<div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 20px;text-align: center;">
-							<img :src="val.faceUrl" alt="目标图片" height="100%">
+						<div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 10px;text-align: center;">
+              <img :src="val.rphoto" alt="目标图片" height="100%">
 						</div>
 					</div>
 					<div style="height:330px;line-height: 40px;margin-top: 20px;">
 						<div><i>时间：{{val.time}}</i></div>
 						<div><i>姓名：{{val.name}}</i></div>
-						<div><i>性别：{{val.sex}}</i></div>
-						<div><i>年龄：{{val.age}}</i></div>
-						<div><i>身份证号码：{{val.idCard}}</i></div>
-						<div><i>卡口：{{val.cameraRegion}}</i></div>
+						<div><i>性别：{{"未知"}}</i></div>
+						<div><i>年龄：{{"未知"}}</i></div>
+						<div><i>身份证号码：{{"未知"}}</i></div>
+						<div><i>卡口：{{"4.21演示摄像头"}}</i></div>
 						<div><i>来源：{{val.libName}}</i></div>
-						<div><i>相似度：<span class="compare_result" style="font-family:Bahnschrift">{{(val.score*100).toFixed(2)}}%</span></i></div>
+						<div><i>相似度：<span class="compare_result" style="font-family:Bahnschrift">{{(val.xsd*1).toFixed(2)}}%</span></i></div>
 					</div>
 				</div>
 				<!-- 左 -->
 				<div style="margin-right: 280px;">
-					<el-image style="width: 100%;" :src="val.bgImg"></el-image>
+					<el-image style="width: 100%;" :src="val.jzphoto"></el-image>
 				</div>
 			</div>
 		</el-dialog>
diff --git a/src/views/modules/monitoring/barrier.vue b/src/views/modules/monitoring/barrier.vue
index 77535a9..cab20b2 100644
--- a/src/views/modules/monitoring/barrier.vue
+++ b/src/views/modules/monitoring/barrier.vue
@@ -15,7 +15,7 @@
 					<div
 						style="height:40px;display:flex;align-items: center; justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
 <!--						<i style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i>-->
-            <i style="font-weight: bold;color: #333333;margin-left: 20px">{{videoFaceList[index].time}}</i>
+            <i style="font-weight: bold;color: #333333;margin-left: 20px">{{"十楼工位"}}</i>
 						<i style="font-weight: bold;color: #333333;margin-right: 20px;">{{item.time}}</i>
 					</div>
 					<div style="display: flex;align-items: center;height: 150px;margin-left: 34px;">
@@ -27,7 +27,7 @@
 						<div
 							style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;position: relative;">
               <!-- src="item.rphoto"-->
-							<img style="width: 120px;height: 120px;" src="../../../assets/img/warning/zb.png" />
+							<img style="width: 120px;height: 120px;" :src="item.rphoto" />
 							<div
 								style="position: absolute;width: 100%;background-color: red;bottom: 0;opacity: 0.6;background: #000;color: #FFF;line-height: 1.8;">
 								<i>测试库</i>
@@ -41,7 +41,7 @@
 								<span><i>性别：未知</i></span>
 								<span><i>来源：测试库</i></span>
 								<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;	font-family:Bahnschrift;">
-                  {{"99%"+item.xsd}}</i></span>
+                  {{item.xsd+"%"}}</i></span>
 							</div>
 							<div style="position: absolute;top:0;right: 0;">
                 <img  src="../../../assets/img/warning/jk.png" alt="监控">
@@ -122,7 +122,7 @@
 				<!-- 抓拍图片 -->
 				<div class="pic-div">
 					<div style="display: flex;align-items: center;">
-						<template v-for="(item,i) in warningList">
+						<template v-for="(item,i) in videoFaceList">
 							<img width=120 height=120 style="margin-left: 12px;" :src="item.cphoto">
 						</template>
 					</div>
@@ -203,18 +203,17 @@
 					label: 'label'
 				},
 				// 图片信息
-        faceBgUrltest: "http://192.168.1.133:9000/middleware/103/1028345463.jpg",
 				faceBgUrl: "",
 				faces: [],
 				currentFaces: [],
 				toDaySnapShot: 0,
 				totalSnapShot: 0,
 				// 预警列表
-				warningList: [],
+				compareList:[],
         videoFaceList:[],
 				// 预警音乐类型
 				warningType: "",
-        cameraList:[{ rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"}],
+        cameraList:[{ rtspUrl: "rtsp://192.168.1.138:8557/h264"}],
 			}
 		},
 		mounted() {
@@ -238,7 +237,7 @@
 				})
 			},
       plays(){
-        this.cameraList.push({rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"});
+        this.cameraList.push({rtspUrl: "rtsp://192.168.1.138:8557/h264"});
       },
 			// 初始化4条预警数据
 			initGetWarningPicture() {
@@ -249,9 +248,9 @@
 					},
 				}).then(res => {
 					if (res.data.code === 0) {
-						this.warningList = res.data.data.records
+						this.compareList = res.data.data.records
 						// 处理预警数据
-						this.getWarningPicture(this.warningList)
+						this.getWarningPicture(this.compareList)
 					} else {
 						this.$message.error(res.data.message)
 					}
@@ -261,22 +260,22 @@
 			 * 初始化获取摄像头id
 			 */
 			initGetCameraId() {
-				this.$http.get("/warning/bayonet").then((res) => {
-					if (res.data.code === 0) {
-						this.cameraId = res.data.data.cameraId
-						this.barrierName = res.data.data.cameraName
-						// 卡口树状结构多级id
-						this.treeArr = res.data.data.camera_region_firstlevel.split(",")
-						// 初始化根据摄像头id获取任务名称
-						this.getTaskNameByCameraId(this.cameraId)
-						// 初始化获取 今日抓拍/累计抓拍
-						this.initTotal(this.cameraId)
-						// 启动webSocket----------启动webSocket----------启动webSocket----------启动webSocket
-						this.initWebSocket()
-					} else {
-						this.$message.error(res.data.message)
-					}
-				})
+				// this.$http.get("/warning/bayonet").then((res) => {
+				// 	if (res.data.code === 0) {
+				// 		this.cameraId = res.data.data.cameraId
+				// 		this.barrierName = res.data.data.cameraName
+				// 		// 卡口树状结构多级id
+				// 		this.treeArr = res.data.data.camera_region_firstlevel.split(",")
+				// 		// 初始化根据摄像头id获取任务名称
+				// 		this.getTaskNameByCameraId(this.cameraId)
+				// 		// 初始化获取 今日抓拍/累计抓拍
+				// 		this.initTotal(this.cameraId)
+				// 		// 启动webSocket----------启动webSocket----------启动webSocket----------启动webSocket
+				// 		this.initWebSocket()
+				// 	} else {
+				// 		this.$message.error(res.data.message)
+				// 	}
+				// })
 				this.initWebSocket()
 			},
 			/**
@@ -301,7 +300,7 @@
 						res.data.data.result.totalSnapShot = res.data.data.totalSnapShot
 						this.getPicture(res.data.data.result)
 					} else {
-						this.$message.error(res.data.message)
+						//this.$message.error(res.data.message)
 					}
 				})
 			},
@@ -322,17 +321,17 @@
 			},
 			websocketonopen(e) {
 				console.log("WebSocket Connection successful");
-				let obj = {
-					"code": 200,
-					"message": "成功",
-					"cmd": "BAYONET",
-					"data": {
-						"carmeraId": this.cameraId
-					}
-				}
-				let objString = JSON.stringify(obj)
-				// 此处有效参数只有 this.cameraId，但是后台执意这样传递参数（来自潘辉）
-				this.websock.send(objString)
+				// let obj = {
+				// 	"code": 200,
+				// 	"message": "成功",
+				// 	"cmd": "BAYONET",
+				// 	"data": {
+				// 		"carmeraId": this.cameraId
+				// 	}
+				// }
+				// let objString = JSON.stringify(obj)
+				// // 此处有效参数只有 this.cameraId，但是后台执意这样传递参数（来自潘辉）
+				// this.websock.send(objString)
 			},
 			websocketonerror(e) {
 				console.log("WebSocket Connection error");
@@ -341,12 +340,12 @@
 				console.log("WebSocket Connection closed");
 			},
 			websocketonmessage(e) {
-        console.log("数据传输")
-        console.log(e)
+         console.log("数据传输")
+        // console.log(e)
 				// ws数据字符串转json
 				let wsObj = JSON.parse(e.data)
-        console.log("this wsObj")
-        console.log(wsObj)
+        // console.log("this wsObj")
+        // console.log(wsObj)
 				// ws数据推送成功
         // 处理ws推送的预警信息
         this.getWarningPicture(wsObj)
@@ -386,16 +385,32 @@
 			 * @param {Object} wsObj
 			 */
 			getWarningPicture(warningData) {
-				// warningData为数组说明是初始化数据，为对象说明是ws推送的数据
-            this.warningList = warningData
-            console.log("this warningList")
-            console.log(this.warningList)
+        this.toDaySnapShot = this.toDaySnapShot + warningData.length
+        this.totalSnapShot = this.totalSnapShot + warningData.length
+				// warningData大于2说明是人脸比对信息videofacelist，其余则是comparelist
+          for (let i = 0; i < warningData.length; i++) {
+            this.videoFaceList.unshift(warningData[i])
+          }
+          console.log("this is videofacelist")
+          console.log(this.videoFaceList)
 
+        // else {
+        //   // console.log("this videofacelist")
+        //   // console.log(this.videoFaceList)
+        //   for (let i = 0; i < warningData.length; i++) {
+        //     this.videoFaceList.unshift(warningData[i])
+        //   }
+        //   // console.log("this videofacelist")
+        //   // console.log(this.videoFaceList)
+        // }
+
+          //this.warningList = warningData
+        //console.log(this.compareList)
 					// 声音 和 tips预警
 					let warningType = this.$refs.notice
 					warningType.play()
 					// this.$message.warning("有新的预警信息")
-				this.warningList.forEach((item, index, arr) => {
+				this.compareList.forEach((item, index, arr) => {
 					// "1" 红色#FF343E "2" 橙色#FFA61A  "0" 蓝色#2FC8FA
 					// if (item.taskType == "1" || item.taskType == "2" || item.taskType == "3") {
 					// 	if (item.taskType == "1") {
@@ -484,7 +499,8 @@
 				this.$router.push({
 					name: "monitoring-warning",
 					params: {
-						taskId: ''
+						taskId: '',
+            videoFaceList:this.videoFaceList,
 					},
 				})
 			},
diff --git a/src/views/modules/monitoring/surveillance.vue b/src/views/modules/monitoring/surveillance.vue
index f518cc7..cff1ac5 100644
--- a/src/views/modules/monitoring/surveillance.vue
+++ b/src/views/modules/monitoring/surveillance.vue
@@ -42,7 +42,7 @@
 				</el-form-item>
 				<el-form-item label="布控对象" prop="object" style="margin:0px">
 					<el-radio v-model="addForm.object" label="1">人像库</el-radio>
-					<el-radio v-model="addForm.object" label="2">上传目标照片</el-radio>
+<!--					<el-radio v-model="addForm.object" label="2">上传目标照片</el-radio>-->
 				</el-form-item>
 				<el-form-item prop="library" v-if="addForm.object == '1'">
 					<el-select v-model="addForm.library" filterable multiple collapse-tags placeholder="请选择人像库">
@@ -50,26 +50,26 @@
 						</el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item prop="targetImg" v-if="addForm.object == '2'">
-					<span class="surveillance_add_gs">上传头像图片只能是 JPG 、PNG、JPEG格式!</span>
-					<div class="surveillance_box">
-						<div class="surveillance_img">
-							<img v-if='addForm.targetImg' :src="addForm.targetImg" class="pre-img">
-							<div v-else class="avatar-uploader-icon">人物图像</div>
-						</div>
-						<div class="crop-demo-btn">
-							上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
-						</div>
-						<el-dialog title="裁剪图片" :visible.sync="dialogVisible9" width="30%" :close-on-click-modal='false' append-to-body>
-							<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;">
-							</vue-cropper>
-							<span slot="footer" class="dialog-footer">
-								<el-button @click="cancelCrop">取 消</el-button>
-								<el-button type="primary" @click="clickOK()">确 定</el-button>
-							</span>
-						</el-dialog>
-					</div>
-				</el-form-item>
+<!--				<el-form-item prop="targetImg" v-if="addForm.object == '2'">-->
+<!--					<span class="surveillance_add_gs">上传头像图片只能是 JPG 、PNG、JPEG格式!</span>-->
+<!--					<div class="surveillance_box">-->
+<!--						<div class="surveillance_img">-->
+<!--							<img v-if='addForm.targetImg' :src="addForm.targetImg" class="pre-img">-->
+<!--							<div v-else class="avatar-uploader-icon">人物图像</div>-->
+<!--						</div>-->
+<!--						<div class="crop-demo-btn">-->
+<!--							上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />-->
+<!--						</div>-->
+<!--						<el-dialog title="裁剪图片" :visible.sync="dialogVisible9" width="30%" :close-on-click-modal='false' append-to-body>-->
+<!--							<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;">-->
+<!--							</vue-cropper>-->
+<!--							<span slot="footer" class="dialog-footer">-->
+<!--								<el-button @click="cancelCrop">取 消</el-button>-->
+<!--								<el-button type="primary" @click="clickOK()">确 定</el-button>-->
+<!--							</span>-->
+<!--						</el-dialog>-->
+<!--					</div>-->
+<!--				</el-form-item>-->
 				<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType">
 					<el-radio v-model="addForm.disposalType" :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
 					<!-- <el-radio v-model="addForm.disposalType" label="1">抓捕类</el-radio>
@@ -156,7 +156,7 @@
 				</el-form-item>
 				<el-form-item label="布控对象" prop="controlObject" style="margin:0px">
 					<el-radio disabled v-model="addForm2.controlObject" label="1">人脸库</el-radio>
-					<el-radio disabled v-model="addForm2.controlObject" label="2">上传目标照片</el-radio>
+<!--					<el-radio disabled v-model="addForm2.controlObject" label="2">上传目标照片</el-radio>-->
 				</el-form-item>
 				<el-form-item prop="libIds" v-if="addForm2.controlObject == '1'">
 					<el-select disabled v-model="addForm2.libIds" multiple placeholder="请选择人脸库">
@@ -164,9 +164,9 @@
 						</el-option>
 					</el-select>
 				</el-form-item>
-				<el-form-item prop="targetImg" v-if="addForm2.controlObject == '2'">
-					<img :src="addForm2.imgurl" class="avatar">
-				</el-form-item>
+<!--				<el-form-item prop="targetImg" v-if="addForm2.controlObject == '2'">-->
+<!--					<img :src="addForm2.imgurl" class="avatar">-->
+<!--				</el-form-item>-->
 				<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType">
 					<el-radio v-model="addForm2.disposalType" :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
 					<!-- <el-radio v-model="addForm2.disposalType" label="1">抓捕类</el-radio>
diff --git a/src/views/modules/monitoring/warning.vue b/src/views/modules/monitoring/warning.vue
index 9b58b9d..24fb52a 100644
--- a/src/views/modules/monitoring/warning.vue
+++ b/src/views/modules/monitoring/warning.vue
@@ -1,391 +1,394 @@
 <template>
-	<div class="warning">
-		<div class="conditions-div">
-			<el-form ref="formRef" :model="formData" :inline="true">
-				<el-form-item label="抓拍时间" prop="dateValue">
-					<el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间"
-					 end-placeholder="结束时间" clearable>
-					</el-date-picker>
-				</el-form-item>
-				<el-form-item label="任务" prop="taskIds">
-					<el-select v-model="formData.taskIds" placeholder="请选择任务列表" clearable @change="taskChange">
-						<el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
-						</el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="摄像头" prop="cameraIds">
-					<el-select v-model="formData.cameraIds" placeholder="请选择摄像头列表" clearable>
-						<el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
-						</el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item style="float:right">
-					<el-button type="primary" @click="clickSearch()">搜索</el-button>
-					<el-button @click="resetClick('formRef')">重置</el-button>
-					<!-- <el-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> -->
-				</el-form-item>
-			</el-form>
-		</div>
+  <div class="warning">
+    <div class="conditions-div">
+      <el-form ref="formRef" :model="formData" :inline="true">
+        <el-form-item label="抓拍时间" prop="dateValue">
+          <el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间"
+                          end-placeholder="结束时间" clearable>
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="任务" prop="taskIds">
+          <el-select v-model="formData.taskIds" placeholder="请选择任务列表" clearable @change="taskChange">
+            <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="摄像头" prop="cameraIds">
+          <el-select v-model="formData.cameraIds" placeholder="请选择摄像头列表" clearable>
+            <el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="float:right">
+          <el-button type="primary" @click="clickSearch()">搜索</el-button>
+          <el-button @click="resetClick('formRef')">重置</el-button>
+          <!-- <el-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
 
 
-		<el-row :gutter="20" style="margin-top: 20px;">
-			<el-col :span="8" v-for="(item,index) in warningList" :key=index.libId>
-				<div style="background-color: #FFF;margin-bottom: 20px;border-radius: 2px;cursor: pointer;" @click="openTask(item)">
-					<div style="height:40px;line-height:40px;display:flex;justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
-						<i>
-							<i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i>
-						</i>
-						<i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i>
-					</div>
-					<div style="position: relative;">
-						<div style="display: flex;align-items: center;height: 150px;margin-left: 30px;">
-							<div style="width: 120px;height: 120px;background: #F1F6F9;">
-								<canvas width=120 height=120 :ref="'warningImage'+index">
-								</canvas>
-							</div>
-							<!-- 可考虑用背景图 -->
-							<div style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;">
-								<img :src="$replaceImgUrl(item.faceUrl)" alt="目标图片" height="100%">
-							</div>
-							<div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;">
-								<span><i>姓名：{{item.name}}</i></span>
-								<span><i>性别：{{item.sex}}</i></span>
-								<span><i>来源：{{item.libName}}</i></span>
-								<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;font-family:Bahnschrift;">{{(item.score*100).toFixed(2)}}%</i></span>
-							</div>
-						</div>
-						<div style="position: absolute;top:20px;right: 30px;">
-							<img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
-							<img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
-							<img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
-						</div>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-		<!-- 弹窗 任务详情 -->
-		<task v-if="taskVisible" ref="task" @refreshTaskList></task>
-		<!-- 地图详情 -->
-		<warning-map ref="mapRef" @mapRefClick="mapRefClick"> </warning-map>
-		<el-pagination @current-change="handleCurrentChange" :current-page.sync="pageObj.page.pageNo" :page-size="pageObj.page.pageSize"
-		 layout="total,prev, pager, next, jumper" :total="total">
-		</el-pagination>
-	</div>
+    <el-row :gutter="20" style="margin-top: 20px;">
+      <el-col :span="8" v-for="(item,index) in warningList" :key=index.libId>
+        <div style="background-color: #FFF;margin-bottom: 20px;border-radius: 2px;cursor: pointer;" @click="openTask(item)">
+          <div style="height:40px;line-height:40px;display:flex;justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
+            <i>
+              <i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{"十楼工位"}}</i>
+            </i>
+            <i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i>
+          </div>
+          <div style="position: relative;">
+            <div style="display: flex;align-items: center;height: 150px;margin-left: 30px;">
+              <div style="width: 120px;height: 120px;background: #F1F6F9;">
+<!--                <img :src="item.cphoto" alt="目标图片" height="100%">-->
+                <canvas width=120 height=120 :ref="'warningImage'+index">
+                </canvas>
+              </div>
+              <!-- 可考虑用背景图 -->
+              <div style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;">
+                <img :src="item.rphoto" alt="目标图片" height="100%">
+              </div>
+              <div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;">
+                <span><i>姓名：{{item.name}}</i></span>
+                <span><i>性别：{{item.sex}}</i></span>
+                <span><i>来源：{{item.libName}}</i></span>
+                <span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E;font-family:Bahnschrift;">{{(item.xsd*1).toFixed(2)}}%</i></span>
+              </div>
+            </div>
+            <div style="position: absolute;top:20px;right: 30px;">
+              <img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
+              <img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
+              <img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 弹窗 任务详情 -->
+    <task v-if="taskVisible" ref="task" @refreshTaskList></task>
+    <!-- 地图详情 -->
+    <warning-map ref="mapRef" @mapRefClick="mapRefClick"> </warning-map>
+    <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageObj.page.pageNo" :page-size="pageObj.page.pageSize"
+                   layout="total,prev, pager, next, jumper" :total="total">
+    </el-pagination>
+  </div>
 </template>
 
 <script>
-	import Task from './barrier-task'
-	import warningMap from './warning-map'
-	export default {
-		name: "watch",
-		data() {
-			return {
-				// 任务列表
-				taskList: [],
-				// 摄像头列表
-				cameraOptions: [],
-				formData: {
-					// dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[]
-					dateValue: [],
-					taskIds: "",
-					cameraIds: "",
-				},
-				// 分页变量
-				pageObj: {
-					"cameraIds": [],
-					"page": {
-						"pageNo": 1,
-						"pageSize": 9,
-						"startTimestamp": null,
-						"stopTimestamp": null,
-					},
-					taskIds: [],
-				},
-				total: 0,
-				// 任务Id
-				taskId: "",
-				// 预警列表
-				warningList: [],
-				// 详情
-				taskVisible: false,
-				val: {}
-			}
-		},
-		components: {
-			Task,
-			warningMap
-		},
-		// activated
-		created() {
-			// 第一次加载(非路由跳转)
-			if (this.$route.params.taskId === undefined) {
-				// 任务列表
-				this.commonGetTaskList()
-				// 预警列表
-				this.getWarningList()
-			}
-			// 第一次加载(路由跳转，来自卡口)
-			else if (this.$route.params.taskId === "") {
-				// 任务列表
-				this.commonGetTaskList()
-				// 预警列表
-				this.getWarningList()
-			}
-			// 第一次加载(路由跳转，来自布控)
-			else {
-				this.formData.taskIds = this.$route.params.taskId
-				this.pageObj.taskIds = this.formData.taskIds.split()
-				this.getWarningList()
-				this.$http.post("/control/tasklist", {
-					"pageNo": 1,
-					"pageSize": 9999,
-				}).then(res => {
-					let taskList = res.data.data.records
-					this.taskList = []
-					taskList.forEach(item => {
-						this.taskList.push({
-							label: item.taskName,
-							value: item.taskNo
-						})
-					})
-					this.commonGetCameraList(this.formData.taskIds)
-				})
-			}
-		},
-		watch: {
-			$route(to, from) {
-				if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name ==
-					"monitoring-warning") {
+import Task from './barrier-task'
+import warningMap from './warning-map'
+export default {
+  name: "watch",
+  data() {
+    return {
+      // 任务列表
+      taskList: [],
+      // 摄像头列表
+      cameraOptions: [],
+      formData: {
+        // dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[]
+        dateValue: [],
+        taskIds: "",
+        cameraIds: "",
+      },
+      // 分页变量
+      pageObj: {
+        "cameraIds": [],
+        "page": {
+          "pageNo": 1,
+          "pageSize": 9,
+          "startTimestamp": null,
+          "stopTimestamp": null,
+        },
+        taskIds: [],
+      },
+      total: 0,
+      // 任务Id
+      taskId: "",
+      // 预警列表
+      warningList: this.$route.params.videoFaceList,
+      // 详情
+      taskVisible: false,
+      val: {}
+    }
+  },
+  components: {
+    Task,
+    warningMap
+  },
+  // activated
+  created() {
+    console.log("warninglist参数传递：")
+    console.log(this.$route.params)
+    // 第一次加载(非路由跳转)
+    if (this.$route.params.taskId === undefined) {
+      // 任务列表
+      this.commonGetTaskList()
+      // 预警列表
+      this.getWarningList()
+    }
+    // 第一次加载(路由跳转，来自卡口)
+    else if (this.$route.params.taskId === "") {
+      // 任务列表
+      this.commonGetTaskList()
+      // 预警列表
+      this.getWarningList()
+    }
+    // 第一次加载(路由跳转，来自布控)
+    else {
+      this.formData.taskIds = this.$route.params.taskId
+      this.pageObj.taskIds = this.formData.taskIds.split()
+      this.getWarningList()
+      this.$http.post("/control/tasklist", {
+        "pageNo": 1,
+        "pageSize": 9999,
+      }).then(res => {
+        let taskList = res.data.data.records
+        this.taskList = []
+        taskList.forEach(item => {
+          this.taskList.push({
+            label: item.taskName,
+            value: item.taskNo
+          })
+        })
+        this.commonGetCameraList(this.formData.taskIds)
+      })
+    }
+  },
+  watch: {
+    $route(to, from) {
+      if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name ==
+          "monitoring-warning") {
 
-					this.formData = {
-						dateValue: [],
-						taskIds: "",
-						cameraIds: "",
-					}
-					this.pageObj = {
-						"cameraIds": [],
-						"page": {
-							"pageNo": 1,
-							"pageSize": 9,
-							"startTimestamp": null,
-							"stopTimestamp": null,
-						},
-						taskIds: [],
-					}
-					this.cameraOptions = []
-					// 非路由跳转
-					if (this.$route.params.taskId === undefined) {
-						return
-					}
-					// 路由跳转
-					else {
-						this.formData.taskIds = this.$route.params.taskId
-						this.$http.post("/control/tasklist", {
-							"pageNo": 1,
-							"pageSize": 9999,
-						}).then(res => {
-							if (res.data.code == 0) {
-								let taskList = res.data.data.records
-								this.taskList = []
-								taskList.forEach(item => {
-									this.taskList.push({
-										label: item.taskName,
-										value: item.taskNo
-									})
-								})
-								this.commonGetCameraList(this.formData.taskIds)
-								let dateArr = this.formData.dateValue
-								if (dateArr != null && dateArr.length != 0) {
-									let startDate = dateArr[0].getTime()
-									let endDate = dateArr[1].getTime()
-									this.pageObj.page.pageNo = 1
-									this.pageObj.page.startTimestamp = startDate
-									this.pageObj.page.stopTimestamp = endDate
-								}
-								if (this.formData.taskIds != "") {
-									this.pageObj.page.pageNo = 1
-									this.pageObj.taskIds = this.formData.taskIds.split()
-									if (this.formData.cameraIds != "") {
-										this.pageObj.page.pageNo = 1
-										this.pageObj.cameraIds = this.formData.cameraIds.split()
-									} else {
-										this.pageObj.cameraIds = []
-									}
-								} else {
-									this.pageObj.taskIds = []
-								}
-								this.getWarningList()
-							}
-						})
-					}
-				}
-			}
-		},
-		methods: {
-			// 打开单个预警信息
-			openTask(val) {
-				this.taskVisible = true
-				this.$nextTick(() => {
-					this.$refs.task.init(JSON.stringify(val))
-				})
-			},
-			// 搜索
-			clickSearch() {
-				let dateArr = this.formData.dateValue
-				if (dateArr == null || dateArr.length == 0) {
-					this.pageObj.page.startTimestamp = null
-					this.pageObj.page.stopTimestamp = null
-					this.pageObj.page.pageNo = 1
-				} else if (dateArr.length != 0) {
-					let startDate = dateArr[0].getTime()
-					let endDate = dateArr[1].getTime()
-					this.pageObj.page.pageNo = 1
-					this.pageObj.page.startTimestamp = startDate
-					this.pageObj.page.stopTimestamp = endDate
-				}
-				if (this.formData.taskIds != "") {
-					this.pageObj.page.pageNo = 1
-					this.pageObj.taskIds = this.formData.taskIds.split()
-					// if (this.formData.cameraIds != "") {
-					// 	this.pageObj.page.pageNo = 1
-					// 	this.pageObj.cameraIds = this.formData.cameraIds.split()
-					// } else {
-					// 	this.pageObj.cameraIds = []
-					// }
-				} else {
-					this.pageObj.taskIds = []
-				}
-				if (this.formData.cameraIds != "") {
-					this.pageObj.page.pageNo = 1
-					this.pageObj.cameraIds = this.formData.cameraIds.split()
-				} else {
-					this.pageObj.cameraIds = []
-				}
-				this.getWarningList()
-			},
-			// 页码
-			handleCurrentChange(val) {
-				this.pageObj.page.pageNo = val
-				let dateArr = this.formData.dateValue
-				if (dateArr == null || dateArr.length == 0) {
-					this.pageObj.page.startTimestamp = null
-					this.pageObj.page.stopTimestamp = null
-				} else if (dateArr.length != 0) {
-					let startDate = dateArr[0].getTime()
-					let endDate = dateArr[1].getTime()
-					this.pageObj.page.startTimestamp = startDate
-					this.pageObj.page.stopTimestamp = endDate
-				}
-				if (this.formData.taskIds != "") {
-					this.pageObj.taskIds = this.formData.taskIds.split()
-					// if (this.formData.cameraIds != "") {
-					// 	this.pageObj.cameraIds = this.formData.cameraIds.split()
-					// } else {
-					// 	this.pageObj.cameraIds = []
-					// }
-				} else {
-					this.pageObj.taskIds = []
-				}
-				if (this.formData.cameraIds != "") {
-					this.pageObj.cameraIds = this.formData.cameraIds.split()
-				} else {
-					this.pageObj.cameraIds = []
-				}
-				this.getWarningList()
-			},
-			// 表单重置
-			resetClick(rueleName) {
-				this.$refs[rueleName].resetFields()
-			},
-			// 切换任务
-			taskChange() {
-				this.cameraOptions = []
-				this.formData.cameraIds = ""
-				if (this.formData.taskIds != "") {
-					this.commonGetCameraList(this.formData.taskIds)
-				}
-			},
-			// 获取预警列表
-			getWarningList(obj = this.pageObj) {
-				this.$http.post("/warning/alarm", obj).then(res => {
-					if (res.data.code === 0) {
-						let warningList = res.data.data.records
-						this.warningList = warningList
-						this.total = Number(res.data.data.total);
-						this.warningList.forEach((item, index, arr) => {
-							this.$nextTick(() => {
-								let canvas = this.$refs[`warningImage${index}`][0]
-								let cxt = canvas.getContext("2d");
-								cxt.clearRect(0, 0, 120, 120);
-								let img = new Image();
-								img.src = item.bgImg;
-								img.onload = function() {
-									cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0,
-										120,
-										120);
-								}
-							})
-						})
-					}
-				})
-			},
-			// 获取任务列表
-			commonGetTaskList() {
-				this.$http.post("/control/tasklist", {
-					"pageNo": 1,
-					"pageSize": 9999,
-				}).then(res => {
-					if (res.data.code == 0) {
-						this.taskList = []
-						let taskList = res.data.data.records
-						taskList.forEach(item => {
-							this.taskList.push({
-								label: item.taskName,
-								value: item.taskNo
-							})
-						})
-					}
-				})
-			},
-			// 获取摄像头列表
-			commonGetCameraList(taskId) {
-				this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => {
-					console.log(res)
-					if (res.data.code == 0) {
-						let cameraList = res.data.data
-						cameraList.forEach(item => {
-							this.cameraOptions.push({
-								label: item.cameraName,
-								value: item.idFaceCamera
-							})
-						})
-					}
-				})
-			},
-			// 预警地图模式
-			openMapClick() {
-				this.$nextTick(() => {
-					this.$refs.mapRef.init()
-				})
-			},
-			// 地图模式回调
-			mapRefClick() {}
-		},
-	}
+        this.formData = {
+          dateValue: [],
+          taskIds: "",
+          cameraIds: "",
+        }
+        this.pageObj = {
+          "cameraIds": [],
+          "page": {
+            "pageNo": 1,
+            "pageSize": 9,
+            "startTimestamp": null,
+            "stopTimestamp": null,
+          },
+          taskIds: [],
+        }
+        this.cameraOptions = []
+        // 非路由跳转
+        if (this.$route.params.taskId === undefined) {
+          return
+        }
+        // 路由跳转
+        else {
+          this.formData.taskIds = this.$route.params.taskId
+          this.$http.post("/control/tasklist", {
+            "pageNo": 1,
+            "pageSize": 9999,
+          }).then(res => {
+            if (res.data.code == 0) {
+              let taskList = res.data.data.records
+              this.taskList = []
+              taskList.forEach(item => {
+                this.taskList.push({
+                  label: item.taskName,
+                  value: item.taskNo
+                })
+              })
+              this.commonGetCameraList(this.formData.taskIds)
+              let dateArr = this.formData.dateValue
+              if (dateArr != null && dateArr.length != 0) {
+                let startDate = dateArr[0].getTime()
+                let endDate = dateArr[1].getTime()
+                this.pageObj.page.pageNo = 1
+                this.pageObj.page.startTimestamp = startDate
+                this.pageObj.page.stopTimestamp = endDate
+              }
+              if (this.formData.taskIds != "") {
+                this.pageObj.page.pageNo = 1
+                this.pageObj.taskIds = this.formData.taskIds.split()
+                if (this.formData.cameraIds != "") {
+                  this.pageObj.page.pageNo = 1
+                  this.pageObj.cameraIds = this.formData.cameraIds.split()
+                } else {
+                  this.pageObj.cameraIds = []
+                }
+              } else {
+                this.pageObj.taskIds = []
+              }
+              this.getWarningList()
+            }
+          })
+        }
+      }
+    }
+  },
+  methods: {
+    // 打开单个预警信息
+    openTask(val) {
+      this.taskVisible = true
+      this.$nextTick(() => {
+        this.$refs.task.init(JSON.stringify(val))
+      })
+    },
+    // 搜索
+    clickSearch() {
+      let dateArr = this.formData.dateValue
+      if (dateArr == null || dateArr.length == 0) {
+        this.pageObj.page.startTimestamp = null
+        this.pageObj.page.stopTimestamp = null
+        this.pageObj.page.pageNo = 1
+      } else if (dateArr.length != 0) {
+        let startDate = dateArr[0].getTime()
+        let endDate = dateArr[1].getTime()
+        this.pageObj.page.pageNo = 1
+        this.pageObj.page.startTimestamp = startDate
+        this.pageObj.page.stopTimestamp = endDate
+      }
+      if (this.formData.taskIds != "") {
+        this.pageObj.page.pageNo = 1
+        this.pageObj.taskIds = this.formData.taskIds.split()
+        // if (this.formData.cameraIds != "") {
+        // 	this.pageObj.page.pageNo = 1
+        // 	this.pageObj.cameraIds = this.formData.cameraIds.split()
+        // } else {
+        // 	this.pageObj.cameraIds = []
+        // }
+      } else {
+        this.pageObj.taskIds = []
+      }
+      if (this.formData.cameraIds != "") {
+        this.pageObj.page.pageNo = 1
+        this.pageObj.cameraIds = this.formData.cameraIds.split()
+      } else {
+        this.pageObj.cameraIds = []
+      }
+      this.getWarningList()
+    },
+    // 页码
+    handleCurrentChange(val) {
+      this.pageObj.page.pageNo = val
+      let dateArr = this.formData.dateValue
+      if (dateArr == null || dateArr.length == 0) {
+        this.pageObj.page.startTimestamp = null
+        this.pageObj.page.stopTimestamp = null
+      } else if (dateArr.length != 0) {
+        let startDate = dateArr[0].getTime()
+        let endDate = dateArr[1].getTime()
+        this.pageObj.page.startTimestamp = startDate
+        this.pageObj.page.stopTimestamp = endDate
+      }
+      if (this.formData.taskIds != "") {
+        this.pageObj.taskIds = this.formData.taskIds.split()
+        // if (this.formData.cameraIds != "") {
+        // 	this.pageObj.cameraIds = this.formData.cameraIds.split()
+        // } else {
+        // 	this.pageObj.cameraIds = []
+        // }
+      } else {
+        this.pageObj.taskIds = []
+      }
+      if (this.formData.cameraIds != "") {
+        this.pageObj.cameraIds = this.formData.cameraIds.split()
+      } else {
+        this.pageObj.cameraIds = []
+      }
+      this.getWarningList()
+    },
+    // 表单重置
+    resetClick(rueleName) {
+      this.$refs[rueleName].resetFields()
+    },
+    // 切换任务
+    taskChange() {
+      this.cameraOptions = []
+      this.formData.cameraIds = ""
+      if (this.formData.taskIds != "") {
+        this.commonGetCameraList(this.formData.taskIds)
+      }
+    },
+    // 获取预警列表
+    getWarningList(obj = this.pageObj) {
+      this.$http.post("/warning/alarm", obj).then(res => {
+        if (res.data.code === 0) {
+          let warningList = res.data.data.records
+          this.warningList = warningList
+          this.total = Number(res.data.data.total);
+          this.warningList.forEach((item, index, arr) => {
+            this.$nextTick(() => {
+              let canvas = this.$refs[`warningImage${index}`][0]
+              let cxt = canvas.getContext("2d");
+              cxt.clearRect(0, 0, 120, 120);
+              let img = new Image();
+              img.src = item.bgImg;
+              img.onload = function() {
+                cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0,
+                    120,
+                    120);
+              }
+            })
+          })
+        }
+      })
+    },
+    // 获取任务列表
+    commonGetTaskList() {
+      this.$http.post("/control/tasklist", {
+        "pageNo": 1,
+        "pageSize": 9999,
+      }).then(res => {
+        if (res.data.code == 0) {
+          this.taskList = []
+          let taskList = res.data.data.records
+          taskList.forEach(item => {
+            this.taskList.push({
+              label: item.taskName,
+              value: item.taskNo
+            })
+          })
+        }
+      })
+    },
+    // 获取摄像头列表
+    commonGetCameraList(taskId) {
+      this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => {
+        console.log(res)
+        if (res.data.code == 0) {
+          let cameraList = res.data.data
+          cameraList.forEach(item => {
+            this.cameraOptions.push({
+              label: item.cameraName,
+              value: item.idFaceCamera
+            })
+          })
+        }
+      })
+    },
+    // 预警地图模式
+    openMapClick() {
+      this.$nextTick(() => {
+        this.$refs.mapRef.init()
+      })
+    },
+    // 地图模式回调
+    mapRefClick() {}
+  },
+}
 </script>
 
 <style scoped>
-	i {
-		font-style: normal;
-		font-family: "Noto Sans SC";
-	}
+i {
+  font-style: normal;
+  font-family: "Noto Sans SC";
+}
 
-	.conditions-div {
-		background-color: #FFF;
-		border-radius: 2px;
-	}
+.conditions-div {
+  background-color: #FFF;
+  border-radius: 2px;
+}
 
-	.conditions-div>>>.el-form-item {
-		margin: 10px
-	}
+.conditions-div>>>.el-form-item {
+  margin: 10px
+}
 </style>