395 lines
13 KiB
Vue
395 lines
13 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">{{"十楼工位"}}</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: 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() {}
|
||
},
|
||
}
|
||
</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>
|