cb
/
front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4.26

main
coco1986509808 2023-04-26 17:38:27 +08:00
parent fc0a1cf860
commit eb472bb09d
4 changed files with 480 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/modules/monitoring/barrier-task.vue
View File

@ -2,34 +2,35 @@
<div class="task"> <div class="task">
<el-dialog :visible.sync="taskVisible" :close-on-click-modal="false" width="60%"> <el-dialog :visible.sync="taskVisible" :close-on-click-modal="false" width="60%">
<span slot="title"> <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> </span>
<div> <div>
<!-- 右 --> <!-- 右 -->
<div style="width: 260px;float: right;"> <div style="width: 260px;float: right;">
<div style="display: flex;"> <div style="display: flex;">
<div style="width:120px;height:120px"> <div style="width:120px;height:120px">
<img :src="val.cphoto" alt="目标图片" height="100%">
<canvas width=120 height=120 ref="imageView"> <canvas width=120 height=120 ref="imageView">
</canvas> </canvas>
</div> </div>
<div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 20px;text-align: center;"> <div style="width: 120px;height: 120px;background: #F1F6F9;margin-left: 10px;text-align: center;">
<img :src="val.faceUrl" alt="目标图片" height="100%"> <img :src="val.rphoto" alt="目标图片" height="100%">
</div> </div>
</div> </div>
<div style="height:330px;line-height: 40px;margin-top: 20px;"> <div style="height:330px;line-height: 40px;margin-top: 20px;">
<div><i>时间：{{val.time}}</i></div> <div><i>时间：{{val.time}}</i></div>
<div><i>姓名：{{val.name}}</i></div> <div><i>姓名：{{val.name}}</i></div>
<div><i>性别：{{val.sex}}</i></div> <div><i>性别：{{"未知"}}</i></div>
<div><i>年龄：{{val.age}}</i></div> <div><i>年龄：{{"未知"}}</i></div>
<div><i>身份证号码：{{val.idCard}}</i></div> <div><i>身份证号码：{{"未知"}}</i></div>
<div><i>卡口：{{val.cameraRegion}}</i></div> <div><i>卡口：{{"4.21演示摄像头"}}</i></div>
<div><i>来源：{{val.libName}}</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> </div>
<!-- 左 --> <!-- 左 -->
<div style="margin-right: 280px;"> <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>
</div> </div>
</el-dialog> </el-dialog>

112
src/views/modules/monitoring/barrier.vue
View File

@ -15,7 +15,7 @@
<div <div
style="height:40px;display:flex;align-items: center; justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;"> 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">{{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> <i style="font-weight: bold;color: #333333;margin-right: 20px;">{{item.time}}</i>
</div> </div>
<div style="display: flex;align-items: center;height: 150px;margin-left: 34px;"> <div style="display: flex;align-items: center;height: 150px;margin-left: 34px;">
@ -27,7 +27,7 @@
<div <div
style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;position: relative;"> style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;position: relative;">
<!-- src="item.rphoto"--> <!-- 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 <div
style="position: absolute;width: 100%;background-color: red;bottom: 0;opacity: 0.6;background: #000;color: #FFF;line-height: 1.8;"> style="position: absolute;width: 100%;background-color: red;bottom: 0;opacity: 0.6;background: #000;color: #FFF;line-height: 1.8;">
<i>测试库</i> <i>测试库</i>
@ -41,7 +41,7 @@
<span><i>性别：未知</i></span> <span><i>性别：未知</i></span>
<span><i>来源：测试库</i></span> <span><i>来源：测试库</i></span>
<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E; font-family:Bahnschrift;"> <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>
<div style="position: absolute;top:0;right: 0;"> <div style="position: absolute;top:0;right: 0;">
<img src="../../../assets/img/warning/jk.png" alt="监控"> <img src="../../../assets/img/warning/jk.png" alt="监控">
@ -122,7 +122,7 @@
<!-- 抓拍图片 --> <!-- 抓拍图片 -->
<div class="pic-div"> <div class="pic-div">
<div style="display: flex;align-items: center;"> <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"> <img width=120 height=120 style="margin-left: 12px;" :src="item.cphoto">
</template> </template>
</div> </div>
@ -203,18 +203,17 @@
label: 'label' label: 'label'
}, },
// 图片信息 // 图片信息
faceBgUrltest: "http://192.168.1.133:9000/middleware/103/1028345463.jpg",
faceBgUrl: "", faceBgUrl: "",
faces: [], faces: [],
currentFaces: [], currentFaces: [],
toDaySnapShot: 0, toDaySnapShot: 0,
totalSnapShot: 0, totalSnapShot: 0,
// 预警列表 // 预警列表
warningList: [], compareList:[],
videoFaceList:[], videoFaceList:[],
// 预警音乐类型 // 预警音乐类型
warningType: "", warningType: "",
cameraList:[{ rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"}], cameraList:[{ rtspUrl: "rtsp://192.168.1.138:8557/h264"}],
} }
}, },
mounted() { mounted() {
@ -238,7 +237,7 @@
}) })
}, },
plays(){ 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条预警数据 // 初始化4条预警数据
initGetWarningPicture() { initGetWarningPicture() {
@ -249,9 +248,9 @@
}, },
}).then(res => { }).then(res => {
if (res.data.code === 0) { 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 { } else {
this.$message.error(res.data.message) this.$message.error(res.data.message)
} }
@ -261,22 +260,22 @@
* 初始化获取摄像头id * 初始化获取摄像头id
*/ */
initGetCameraId() { initGetCameraId() {
this.$http.get("/warning/bayonet").then((res) => { // this.$http.get("/warning/bayonet").then((res) => {
if (res.data.code === 0) { // if (res.data.code === 0) {
this.cameraId = res.data.data.cameraId // this.cameraId = res.data.data.cameraId
this.barrierName = res.data.data.cameraName // this.barrierName = res.data.data.cameraName
// 卡口树状结构多级id // // 卡口树状结构多级id
this.treeArr = res.data.data.camera_region_firstlevel.split(",") // this.treeArr = res.data.data.camera_region_firstlevel.split(",")
// 初始化根据摄像头id获取任务名称 // // 初始化根据摄像头id获取任务名称
this.getTaskNameByCameraId(this.cameraId) // this.getTaskNameByCameraId(this.cameraId)
// 初始化获取 今日抓拍/累计抓拍 // // 初始化获取 今日抓拍/累计抓拍
this.initTotal(this.cameraId) // this.initTotal(this.cameraId)
// 启动webSocket----------启动webSocket----------启动webSocket----------启动webSocket // // 启动webSocket----------启动webSocket----------启动webSocket----------启动webSocket
this.initWebSocket() // this.initWebSocket()
} else { // } else {
this.$message.error(res.data.message) // this.$message.error(res.data.message)
} // }
}) // })
this.initWebSocket() this.initWebSocket()
}, },
/** /**
@ -301,7 +300,7 @@
res.data.data.result.totalSnapShot = res.data.data.totalSnapShot res.data.data.result.totalSnapShot = res.data.data.totalSnapShot
this.getPicture(res.data.data.result) this.getPicture(res.data.data.result)
} else { } else {
this.$message.error(res.data.message) //this.$message.error(res.data.message)
} }
}) })
}, },
@ -322,17 +321,17 @@
}, },
websocketonopen(e) { websocketonopen(e) {
console.log("WebSocket Connection successful"); console.log("WebSocket Connection successful");
let obj = { // let obj = {
"code": 200, // "code": 200,
"message": "成功", // "message": "成功",
"cmd": "BAYONET", // "cmd": "BAYONET",
"data": { // "data": {
"carmeraId": this.cameraId // "carmeraId": this.cameraId
} // }
} // }
let objString = JSON.stringify(obj) // let objString = JSON.stringify(obj)
// 此处有效参数只有 this.cameraId，但是后台执意这样传递参数（来自潘辉） // // 此处有效参数只有 this.cameraId，但是后台执意这样传递参数（来自潘辉）
this.websock.send(objString) // this.websock.send(objString)
}, },
websocketonerror(e) { websocketonerror(e) {
console.log("WebSocket Connection error"); console.log("WebSocket Connection error");
@ -341,12 +340,12 @@
console.log("WebSocket Connection closed"); console.log("WebSocket Connection closed");
}, },
websocketonmessage(e) { websocketonmessage(e) {
console.log("数据传输") console.log("数据传输")
console.log(e) // console.log(e)
// ws数据字符串转json // ws数据字符串转json
let wsObj = JSON.parse(e.data) let wsObj = JSON.parse(e.data)
console.log("this wsObj") // console.log("this wsObj")
console.log(wsObj) // console.log(wsObj)
// ws数据推送成功 // ws数据推送成功
// 处理ws推送的预警信息 // 处理ws推送的预警信息
this.getWarningPicture(wsObj) this.getWarningPicture(wsObj)
@ -386,16 +385,32 @@
* @param {Object} wsObj * @param {Object} wsObj
*/ */
getWarningPicture(warningData) { getWarningPicture(warningData) {
// warningData为数组说明是初始化数据，为对象说明是ws推送的数据 this.toDaySnapShot = this.toDaySnapShot + warningData.length
this.warningList = warningData this.totalSnapShot = this.totalSnapShot + warningData.length
console.log("this warningList") // warningData大于2说明是人脸比对信息videofacelist，其余则是comparelist
console.log(this.warningList) 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预警 // 声音 和 tips预警
let warningType = this.$refs.notice let warningType = this.$refs.notice
warningType.play() warningType.play()
// this.$message.warning("有新的预警信息") // this.$message.warning("有新的预警信息")
this.warningList.forEach((item, index, arr) => { this.compareList.forEach((item, index, arr) => {
// "1" 红色#FF343E "2" 橙色#FFA61A "0" 蓝色#2FC8FA // "1" 红色#FF343E "2" 橙色#FFA61A "0" 蓝色#2FC8FA
// if (item.taskType == "1" || item.taskType == "2" || item.taskType == "3") { // if (item.taskType == "1" || item.taskType == "2" || item.taskType == "3") {
// if (item.taskType == "1") { // if (item.taskType == "1") {
@ -484,7 +499,8 @@
this.$router.push({ this.$router.push({
name: "monitoring-warning", name: "monitoring-warning",
params: { params: {
taskId: '' taskId: '',
videoFaceList:this.videoFaceList,
}, },
}) })
}, },

50
src/views/modules/monitoring/surveillance.vue
View File

@ -42,7 +42,7 @@
</el-form-item> </el-form-item>
<el-form-item label="布控对象" prop="object" style="margin:0px"> <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="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>
<el-form-item prop="library" v-if="addForm.object == '1'"> <el-form-item prop="library" v-if="addForm.object == '1'">
<el-select v-model="addForm.library" filterable multiple collapse-tags placeholder="请选择人像库"> <el-select v-model="addForm.library" filterable multiple collapse-tags placeholder="请选择人像库">
@ -50,26 +50,26 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="targetImg" v-if="addForm.object == '2'"> <!-- <el-form-item prop="targetImg" v-if="addForm.object == '2'">-->
<span class="surveillance_add_gs">上传头像图片只能是 JPG 、PNG、JPEG格式!</span> <!-- <span class="surveillance_add_gs">上传头像图片只能是 JPG 、PNG、JPEG格式!</span>-->
<div class="surveillance_box"> <!-- <div class="surveillance_box">-->
<div class="surveillance_img"> <!-- <div class="surveillance_img">-->
<img v-if='addForm.targetImg' :src="addForm.targetImg" class="pre-img"> <!-- <img v-if='addForm.targetImg' :src="addForm.targetImg" class="pre-img">-->
<div v-else class="avatar-uploader-icon">人物图像</div> <!-- <div v-else class="avatar-uploader-icon">人物图像</div>-->
</div> <!-- </div>-->
<div class="crop-demo-btn"> <!-- <div class="crop-demo-btn">-->
上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" /> <!-- 上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />-->
</div> <!-- </div>-->
<el-dialog title="裁剪图片" :visible.sync="dialogVisible9" width="30%" :close-on-click-modal='false' append-to-body> <!-- <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 ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;">-->
</vue-cropper> <!-- </vue-cropper>-->
<span slot="footer" class="dialog-footer"> <!-- <span slot="footer" class="dialog-footer">-->
<el-button @click="cancelCrop">取 消</el-button> <!-- <el-button @click="cancelCrop">取 消</el-button>-->
<el-button type="primary" @click="clickOK()">确 定</el-button> <!-- <el-button type="primary" @click="clickOK()">确 定</el-button>-->
</span> <!-- </span>-->
</el-dialog> <!-- </el-dialog>-->
</div> <!-- </div>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType"> <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="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
<!-- <el-radio v-model="addForm.disposalType" label="1">抓捕类</el-radio> <!-- <el-radio v-model="addForm.disposalType" label="1">抓捕类</el-radio>
@ -156,7 +156,7 @@
</el-form-item> </el-form-item>
<el-form-item label="布控对象" prop="controlObject" style="margin:0px"> <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="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>
<el-form-item prop="libIds" v-if="addForm2.controlObject == '1'"> <el-form-item prop="libIds" v-if="addForm2.controlObject == '1'">
<el-select disabled v-model="addForm2.libIds" multiple placeholder="请选择人脸库"> <el-select disabled v-model="addForm2.libIds" multiple placeholder="请选择人脸库">
@ -164,9 +164,9 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="targetImg" v-if="addForm2.controlObject == '2'"> <!-- <el-form-item prop="targetImg" v-if="addForm2.controlObject == '2'">-->
<img :src="addForm2.imgurl" class="avatar"> <!-- <img :src="addForm2.imgurl" class="avatar">-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item style="margin-bottom:0px" label="处置类型" prop="disposalType"> <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="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio>
<!-- <el-radio v-model="addForm2.disposalType" label="1">抓捕类</el-radio> <!-- <el-radio v-model="addForm2.disposalType" label="1">抓捕类</el-radio>

759
src/views/modules/monitoring/warning.vue
View File

@ -1,391 +1,394 @@
<template> <template>
<div class="warning"> <div class="warning">
<div class="conditions-div"> <div class="conditions-div">
<el-form ref="formRef" :model="formData" :inline="true"> <el-form ref="formRef" :model="formData" :inline="true">
<el-form-item label="抓拍时间" prop="dateValue"> <el-form-item label="抓拍时间" prop="dateValue">
<el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间" <el-date-picker v-model="formData.dateValue" type="datetimerange" range-separator="一" start-placeholder="开始时间"
end-placeholder="结束时间" clearable> end-placeholder="结束时间" clearable>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="任务" prop="taskIds"> <el-form-item label="任务" prop="taskIds">
<el-select v-model="formData.taskIds" placeholder="请选择任务列表" clearable @change="taskChange"> <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 v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="摄像头" prop="cameraIds"> <el-form-item label="摄像头" prop="cameraIds">
<el-select v-model="formData.cameraIds" placeholder="请选择摄像头列表" clearable> <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 v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item style="float:right"> <el-form-item style="float:right">
<el-button type="primary" @click="clickSearch()">搜索</el-button> <el-button type="primary" @click="clickSearch()">搜索</el-button>
<el-button @click="resetClick('formRef')">重置</el-button> <el-button @click="resetClick('formRef')">重置</el-button>
<!-- <el-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> --> <!-- <el-button type="primary" icon="el-icon-map-location" @click="openMapClick">地图模式</el-button> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<el-row :gutter="20" style="margin-top: 20px;"> <el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="8" v-for="(item,index) in warningList" :key=index.libId> <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="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;"> <div style="height:40px;line-height:40px;display:flex;justify-content: space-between;border-bottom: 1px solid #F1F8FF;box-sizing: border-box;">
<i> <i>
<i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{item.cameraRegion}}</i> <i class="font-fourteen" style="font-weight: bold;color: #333333;margin-left: 20px">{{"十楼工位"}}</i>
</i> </i>
<i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i> <i style="font-weight: bold;color: #333333;margin-right: 20px;margin-left: 20px">{{item.time}}</i>
</div> </div>
<div style="position: relative;"> <div style="position: relative;">
<div style="display: flex;align-items: center;height: 150px;margin-left: 30px;"> <div style="display: flex;align-items: center;height: 150px;margin-left: 30px;">
<div style="width: 120px;height: 120px;background: #F1F6F9;"> <div style="width: 120px;height: 120px;background: #F1F6F9;">
<canvas width=120 height=120 :ref="'warningImage'+index"> <!-- <img :src="item.cphoto" alt="目标图片" height="100%">-->
</canvas> <canvas width=120 height=120 :ref="'warningImage'+index">
</div> </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 style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;">
</div> <img :src="item.rphoto" alt="目标图片" height="100%">
<div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;"> </div>
<span><i>姓名：{{item.name}}</i></span> <div style="height: 120px;display: flex;flex-direction: column;justify-content: space-around;">
<span><i>性别：{{item.sex}}</i></span> <span><i>姓名：{{item.name}}</i></span>
<span><i>来源：{{item.libName}}</i></span> <span><i>性别：{{item.sex}}</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> <span><i>来源：{{item.libName}}</i></span>
</div> <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;"> </div>
<img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示"> <div style="position: absolute;top:20px;right: 30px;">
<img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控"> <img v-if="item.taskType=='3'" src="../../../assets/img/warning/ts.png" alt="提示">
<img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕"> <img v-if="item.taskType=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
</div> <img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
</div> </div>
</div> </div>
</el-col> </div>
</el-row> </el-col>
<!-- 弹窗 任务详情 --> </el-row>
<task v-if="taskVisible" ref="task" @refreshTaskList></task> <!-- 弹窗 任务详情 -->
<!-- 地图详情 --> <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" <warning-map ref="mapRef" @mapRefClick="mapRefClick"> </warning-map>
layout="total,prev, pager, next, jumper" :total="total"> <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageObj.page.pageNo" :page-size="pageObj.page.pageSize"
</el-pagination> layout="total,prev, pager, next, jumper" :total="total">
</div> </el-pagination>
</div>
</template> </template>
<script> <script>
import Task from './barrier-task' import Task from './barrier-task'
import warningMap from './warning-map' import warningMap from './warning-map'
export default { export default {
name: "watch", name: "watch",
data() { data() {
return { return {
// 任务列表 // 任务列表
taskList: [], taskList: [],
// 摄像头列表 // 摄像头列表
cameraOptions: [], cameraOptions: [],
formData: { formData: {
// dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[] // dateValue如果设置为null,点击重置后dateValue的值为[null];dateValue如果设置为[],点击重置后dateValue的值为[]
dateValue: [], dateValue: [],
taskIds: "", taskIds: "",
cameraIds: "", cameraIds: "",
}, },
// 分页变量 // 分页变量
pageObj: { pageObj: {
"cameraIds": [], "cameraIds": [],
"page": { "page": {
"pageNo": 1, "pageNo": 1,
"pageSize": 9, "pageSize": 9,
"startTimestamp": null, "startTimestamp": null,
"stopTimestamp": null, "stopTimestamp": null,
}, },
taskIds: [], taskIds: [],
}, },
total: 0, total: 0,
// 任务Id // 任务Id
taskId: "", taskId: "",
// 预警列表 // 预警列表
warningList: [], warningList: this.$route.params.videoFaceList,
// 详情 // 详情
taskVisible: false, taskVisible: false,
val: {} val: {}
} }
}, },
components: { components: {
Task, Task,
warningMap warningMap
}, },
// activated // activated
created() { created() {
// 第一次加载(非路由跳转) console.log("warninglist参数传递：")
if (this.$route.params.taskId === undefined) { console.log(this.$route.params)
// 任务列表 // 第一次加载(非路由跳转)
this.commonGetTaskList() if (this.$route.params.taskId === undefined) {
// 预警列表 // 任务列表
this.getWarningList() this.commonGetTaskList()
} // 预警列表
// 第一次加载(路由跳转，来自卡口) this.getWarningList()
else if (this.$route.params.taskId === "") { }
// 任务列表 // 第一次加载(路由跳转，来自卡口)
this.commonGetTaskList() else if (this.$route.params.taskId === "") {
// 预警列表 // 任务列表
this.getWarningList() this.commonGetTaskList()
} // 预警列表
// 第一次加载(路由跳转，来自布控) this.getWarningList()
else { }
this.formData.taskIds = this.$route.params.taskId // 第一次加载(路由跳转，来自布控)
this.pageObj.taskIds = this.formData.taskIds.split() else {
this.getWarningList() this.formData.taskIds = this.$route.params.taskId
this.$http.post("/control/tasklist", { this.pageObj.taskIds = this.formData.taskIds.split()
"pageNo": 1, this.getWarningList()
"pageSize": 9999, this.$http.post("/control/tasklist", {
}).then(res => { "pageNo": 1,
let taskList = res.data.data.records "pageSize": 9999,
this.taskList = [] }).then(res => {
taskList.forEach(item => { let taskList = res.data.data.records
this.taskList.push({ this.taskList = []
label: item.taskName, taskList.forEach(item => {
value: item.taskNo this.taskList.push({
}) label: item.taskName,
}) value: item.taskNo
this.commonGetCameraList(this.formData.taskIds) })
}) })
} this.commonGetCameraList(this.formData.taskIds)
}, })
watch: { }
$route(to, from) { },
if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name == watch: {
"monitoring-warning") { $route(to, from) {
if ((from.name === "monitoring-barrier" || from.name === "monitoring-surveillance") && to.name ==
"monitoring-warning") {
this.formData = { this.formData = {
dateValue: [], dateValue: [],
taskIds: "", taskIds: "",
cameraIds: "", cameraIds: "",
} }
this.pageObj = { this.pageObj = {
"cameraIds": [], "cameraIds": [],
"page": { "page": {
"pageNo": 1, "pageNo": 1,
"pageSize": 9, "pageSize": 9,
"startTimestamp": null, "startTimestamp": null,
"stopTimestamp": null, "stopTimestamp": null,
}, },
taskIds: [], taskIds: [],
} }
this.cameraOptions = [] this.cameraOptions = []
// 非路由跳转 // 非路由跳转
if (this.$route.params.taskId === undefined) { if (this.$route.params.taskId === undefined) {
return return
} }
// 路由跳转 // 路由跳转
else { else {
this.formData.taskIds = this.$route.params.taskId this.formData.taskIds = this.$route.params.taskId
this.$http.post("/control/tasklist", { this.$http.post("/control/tasklist", {
"pageNo": 1, "pageNo": 1,
"pageSize": 9999, "pageSize": 9999,
}).then(res => { }).then(res => {
if (res.data.code == 0) { if (res.data.code == 0) {
let taskList = res.data.data.records let taskList = res.data.data.records
this.taskList = [] this.taskList = []
taskList.forEach(item => { taskList.forEach(item => {
this.taskList.push({ this.taskList.push({
label: item.taskName, label: item.taskName,
value: item.taskNo value: item.taskNo
}) })
}) })
this.commonGetCameraList(this.formData.taskIds) this.commonGetCameraList(this.formData.taskIds)
let dateArr = this.formData.dateValue let dateArr = this.formData.dateValue
if (dateArr != null && dateArr.length != 0) { if (dateArr != null && dateArr.length != 0) {
let startDate = dateArr[0].getTime() let startDate = dateArr[0].getTime()
let endDate = dateArr[1].getTime() let endDate = dateArr[1].getTime()
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.page.startTimestamp = startDate this.pageObj.page.startTimestamp = startDate
this.pageObj.page.stopTimestamp = endDate this.pageObj.page.stopTimestamp = endDate
} }
if (this.formData.taskIds != "") { if (this.formData.taskIds != "") {
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.taskIds = this.formData.taskIds.split() this.pageObj.taskIds = this.formData.taskIds.split()
if (this.formData.cameraIds != "") { if (this.formData.cameraIds != "") {
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.cameraIds = this.formData.cameraIds.split() this.pageObj.cameraIds = this.formData.cameraIds.split()
} else { } else {
this.pageObj.cameraIds = [] this.pageObj.cameraIds = []
} }
} else { } else {
this.pageObj.taskIds = [] this.pageObj.taskIds = []
} }
this.getWarningList() this.getWarningList()
} }
}) })
} }
} }
} }
}, },
methods: { methods: {
// 打开单个预警信息 // 打开单个预警信息
openTask(val) { openTask(val) {
this.taskVisible = true this.taskVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.task.init(JSON.stringify(val)) this.$refs.task.init(JSON.stringify(val))
}) })
}, },
// 搜索 // 搜索
clickSearch() { clickSearch() {
let dateArr = this.formData.dateValue let dateArr = this.formData.dateValue
if (dateArr == null || dateArr.length == 0) { if (dateArr == null || dateArr.length == 0) {
this.pageObj.page.startTimestamp = null this.pageObj.page.startTimestamp = null
this.pageObj.page.stopTimestamp = null this.pageObj.page.stopTimestamp = null
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
} else if (dateArr.length != 0) { } else if (dateArr.length != 0) {
let startDate = dateArr[0].getTime() let startDate = dateArr[0].getTime()
let endDate = dateArr[1].getTime() let endDate = dateArr[1].getTime()
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.page.startTimestamp = startDate this.pageObj.page.startTimestamp = startDate
this.pageObj.page.stopTimestamp = endDate this.pageObj.page.stopTimestamp = endDate
} }
if (this.formData.taskIds != "") { if (this.formData.taskIds != "") {
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.taskIds = this.formData.taskIds.split() this.pageObj.taskIds = this.formData.taskIds.split()
// if (this.formData.cameraIds != "") { // if (this.formData.cameraIds != "") {
// this.pageObj.page.pageNo = 1 // this.pageObj.page.pageNo = 1
// this.pageObj.cameraIds = this.formData.cameraIds.split() // this.pageObj.cameraIds = this.formData.cameraIds.split()
// } else { // } else {
// this.pageObj.cameraIds = [] // this.pageObj.cameraIds = []
// } // }
} else { } else {
this.pageObj.taskIds = [] this.pageObj.taskIds = []
} }
if (this.formData.cameraIds != "") { if (this.formData.cameraIds != "") {
this.pageObj.page.pageNo = 1 this.pageObj.page.pageNo = 1
this.pageObj.cameraIds = this.formData.cameraIds.split() this.pageObj.cameraIds = this.formData.cameraIds.split()
} else { } else {
this.pageObj.cameraIds = [] this.pageObj.cameraIds = []
} }
this.getWarningList() this.getWarningList()
}, },
// 页码 // 页码
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageObj.page.pageNo = val this.pageObj.page.pageNo = val
let dateArr = this.formData.dateValue let dateArr = this.formData.dateValue
if (dateArr == null || dateArr.length == 0) { if (dateArr == null || dateArr.length == 0) {
this.pageObj.page.startTimestamp = null this.pageObj.page.startTimestamp = null
this.pageObj.page.stopTimestamp = null this.pageObj.page.stopTimestamp = null
} else if (dateArr.length != 0) { } else if (dateArr.length != 0) {
let startDate = dateArr[0].getTime() let startDate = dateArr[0].getTime()
let endDate = dateArr[1].getTime() let endDate = dateArr[1].getTime()
this.pageObj.page.startTimestamp = startDate this.pageObj.page.startTimestamp = startDate
this.pageObj.page.stopTimestamp = endDate this.pageObj.page.stopTimestamp = endDate
} }
if (this.formData.taskIds != "") { if (this.formData.taskIds != "") {
this.pageObj.taskIds = this.formData.taskIds.split() this.pageObj.taskIds = this.formData.taskIds.split()
// if (this.formData.cameraIds != "") { // if (this.formData.cameraIds != "") {
// this.pageObj.cameraIds = this.formData.cameraIds.split() // this.pageObj.cameraIds = this.formData.cameraIds.split()
// } else { // } else {
// this.pageObj.cameraIds = [] // this.pageObj.cameraIds = []
// } // }
} else { } else {
this.pageObj.taskIds = [] this.pageObj.taskIds = []
} }
if (this.formData.cameraIds != "") { if (this.formData.cameraIds != "") {
this.pageObj.cameraIds = this.formData.cameraIds.split() this.pageObj.cameraIds = this.formData.cameraIds.split()
} else { } else {
this.pageObj.cameraIds = [] this.pageObj.cameraIds = []
} }
this.getWarningList() this.getWarningList()
}, },
// 表单重置 // 表单重置
resetClick(rueleName) { resetClick(rueleName) {
this.$refs[rueleName].resetFields() this.$refs[rueleName].resetFields()
}, },
// 切换任务 // 切换任务
taskChange() { taskChange() {
this.cameraOptions = [] this.cameraOptions = []
this.formData.cameraIds = "" this.formData.cameraIds = ""
if (this.formData.taskIds != "") { if (this.formData.taskIds != "") {
this.commonGetCameraList(this.formData.taskIds) this.commonGetCameraList(this.formData.taskIds)
} }
}, },
// 获取预警列表 // 获取预警列表
getWarningList(obj = this.pageObj) { getWarningList(obj = this.pageObj) {
this.$http.post("/warning/alarm", obj).then(res => { this.$http.post("/warning/alarm", obj).then(res => {
if (res.data.code === 0) { if (res.data.code === 0) {
let warningList = res.data.data.records let warningList = res.data.data.records
this.warningList = warningList this.warningList = warningList
this.total = Number(res.data.data.total); this.total = Number(res.data.data.total);
this.warningList.forEach((item, index, arr) => { this.warningList.forEach((item, index, arr) => {
this.$nextTick(() => { this.$nextTick(() => {
let canvas = this.$refs[`warningImage${index}`][0] let canvas = this.$refs[`warningImage${index}`][0]
let cxt = canvas.getContext("2d"); let cxt = canvas.getContext("2d");
cxt.clearRect(0, 0, 120, 120); cxt.clearRect(0, 0, 120, 120);
let img = new Image(); let img = new Image();
img.src = item.bgImg; img.src = item.bgImg;
img.onload = function() { img.onload = function() {
cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0, cxt.drawImage(img, item.positionVO.x, item.positionVO.y, item.positionVO.w, item.positionVO.h, 0, 0,
120, 120,
120); 120);
} }
}) })
}) })
} }
}) })
}, },
// 获取任务列表 // 获取任务列表
commonGetTaskList() { commonGetTaskList() {
this.$http.post("/control/tasklist", { this.$http.post("/control/tasklist", {
"pageNo": 1, "pageNo": 1,
"pageSize": 9999, "pageSize": 9999,
}).then(res => { }).then(res => {
if (res.data.code == 0) { if (res.data.code == 0) {
this.taskList = [] this.taskList = []
let taskList = res.data.data.records let taskList = res.data.data.records
taskList.forEach(item => { taskList.forEach(item => {
this.taskList.push({ this.taskList.push({
label: item.taskName, label: item.taskName,
value: item.taskNo value: item.taskNo
}) })
}) })
} }
}) })
}, },
// 获取摄像头列表 // 获取摄像头列表
commonGetCameraList(taskId) { commonGetCameraList(taskId) {
this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => { this.$http.get(`/control/gettaskcamera/${taskId}`).then(res => {
console.log(res) console.log(res)
if (res.data.code == 0) { if (res.data.code == 0) {
let cameraList = res.data.data let cameraList = res.data.data
cameraList.forEach(item => { cameraList.forEach(item => {
this.cameraOptions.push({ this.cameraOptions.push({
label: item.cameraName, label: item.cameraName,
value: item.idFaceCamera value: item.idFaceCamera
}) })
}) })
} }
}) })
}, },
// 预警地图模式 // 预警地图模式
openMapClick() { openMapClick() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.mapRef.init() this.$refs.mapRef.init()
}) })
}, },
// 地图模式回调 // 地图模式回调
mapRefClick() {} mapRefClick() {}
}, },
} }
</script> </script>
<style scoped> <style scoped>
i { i {
font-style: normal; font-style: normal;
font-family: "Noto Sans SC"; font-family: "Noto Sans SC";
} }
.conditions-div { .conditions-div {
background-color: #FFF; background-color: #FFF;
border-radius: 2px; border-radius: 2px;
} }
.conditions-div>>>.el-form-item { .conditions-div>>>.el-form-item {
margin: 10px margin: 10px
} }
</style> </style>