392 lines
12 KiB
Vue
392 lines
12 KiB
Vue
|
<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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
</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") {
|
|||
|
|
|
|||
|
|
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";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conditions-div {
|
|||
|
|
background-color: #FFF;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conditions-div>>>.el-form-item {
|
|||
|
|
margin: 10px
|
|||
|
|
}
|
|||
|
|
</style>
|