05.11
parent
eb472bb09d
commit
d49c187ce0
|
|
@ -1,6 +1,6 @@
|
|||
window.GLOBAL_CONFIG = {
|
||||
apiURL: "http://127.0.0.1:8889/face",
|
||||
apiURL: "http://192.168.1.196:8889/face",
|
||||
IMG_SERVER_URL: "http://192.168.1.133:9000",
|
||||
SOCKET_URL: "ws://127.0.0.1:8889/face/webSocketServer",
|
||||
SOCKET_URL: "ws://192.168.1.196:8889/face/webSocketServer",
|
||||
rtspApi_URL: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import isPlainObject from 'lodash/isPlainObject'
|
|||
const http = axios.create({
|
||||
baseURL: window.SITE_CONFIG['apiURL'],
|
||||
timeout: 1000 * 180,
|
||||
withCredentials: true
|
||||
withCredentials: false
|
||||
})
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
</i>
|
||||
</div>
|
||||
<div style="width: 528px;height: 190px;margin-bottom: 10px;background: #FFF;border-radius:2px; cursor: pointer;"
|
||||
v-for="(item,index) in videoFaceList" class="warning-class" @click="openTask(item)">
|
||||
<div
|
||||
v-for="(item,index) in videoFaceList" v-if = "item.xsd > textStyle" class="warning-class" @click="openTask(item)">
|
||||
<div v-if = "item.xsd > textStyle"
|
||||
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">{{"十楼工位"}}</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;">
|
||||
<div v-if = "item.xsd > textStyle" style="display: flex;align-items: center;height: 150px;margin-left: 34px;">
|
||||
<div style="width: 120px;height: 120px;background: #F1F6F9;">
|
||||
<!--<canvas width=120 height=120 :ref="'warningImage'+index">
|
||||
</canvas>-->
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<!-- </el-image>-->
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div style="border: 1px solid #000000;height: 100%;width: 100%;float: left" v-for="item in cameraList" >
|
||||
<video-control :msg=item.rtspUrl></video-control>
|
||||
<video-control :msg=nowRtspurl :key="nowRtspurl" ></video-control>
|
||||
</div>
|
||||
<!-- <button style="width: 200px;height: 200px;" @click="plays"></button>-->
|
||||
</el-card>
|
||||
|
|
@ -128,11 +128,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 声音提醒 -->
|
||||
<audio ref="notice">
|
||||
<source src="../../../assets/mp3/warning1.mp3" type="audio/mpeg">
|
||||
<!-- 文字转语音，需要外网支持 -->
|
||||
<!-- <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=你有新的短消息了" type="audio/mpeg"> -->
|
||||
</audio>
|
||||
<!-- <audio ref="notice">-->
|
||||
<!-- <source src="../../../assets/mp3/warning1.mp3" type="audio/mpeg">-->
|
||||
<!-- <!– 文字转语音，需要外网支持 –>-->
|
||||
<!-- <!– <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=你有新的短消息了" type="audio/mpeg"> –>-->
|
||||
<!-- </audio>-->
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="allPicState">
|
||||
|
|
@ -214,6 +214,10 @@
|
|||
// 预警音乐类型
|
||||
warningType: "",
|
||||
cameraList:[{ rtspUrl: "rtsp://192.168.1.138:8557/h264"}],
|
||||
nowRtspurl:"",
|
||||
//设置摄像头切换休眠标识
|
||||
flag : false,
|
||||
textStyle : 70,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -236,9 +240,31 @@
|
|||
this.videoFaceList = res.data;
|
||||
})
|
||||
},
|
||||
plays(){
|
||||
this.cameraList.push({rtspUrl: "rtsp://192.168.1.138:8557/h264"});
|
||||
getCurrentTime() {
|
||||
//获取当前时间并打印
|
||||
var _this = this;
|
||||
let yy = new Date().getFullYear();
|
||||
let mm = new Date().getMonth()+1;
|
||||
let dd = new Date().getDate();
|
||||
let hh = new Date().getHours();
|
||||
let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
|
||||
let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
|
||||
let sss = new Date().getMilliseconds() <10 ? '0'+new Date().getMilliseconds() : new Date().getMilliseconds() ;
|
||||
_this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss+':'+sss;
|
||||
console.log("当前时间为：");
|
||||
console.log(_this.gettime);
|
||||
},
|
||||
sleep(ms) { //sleep延迟方法2
|
||||
var unixtime_ms = new Date().getTime();
|
||||
while(new Date().getTime() < unixtime_ms + ms) {
|
||||
console.log("当前睡眠" +this.nowRtspurl+ "暂停中")
|
||||
this.getCurrentTime()
|
||||
}
|
||||
},
|
||||
// plays(){
|
||||
// // this.cameraList.pop();
|
||||
// this.cameraList.push({rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554"});
|
||||
// },
|
||||
// 初始化4条预警数据
|
||||
initGetWarningPicture() {
|
||||
this.$http.post("/faces/compareList", {
|
||||
|
|
@ -286,6 +312,7 @@
|
|||
this.$http.get(`warning/taskInfo/${cameraId}`).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.taskName = res.data.data.taskName
|
||||
this.textStyle = res.data.data.controlThreshold
|
||||
} else {
|
||||
this.$message.warning(res.data.message)
|
||||
}
|
||||
|
|
@ -340,15 +367,24 @@
|
|||
console.log("WebSocket Connection closed");
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
console.log("数据传输")
|
||||
// console.log("前端数据传输时间");
|
||||
// this.getCurrentTime();
|
||||
// console.log(e)
|
||||
// ws数据字符串转json
|
||||
// if(this.flag == true){
|
||||
// console.log("onmessage延迟停止中：")
|
||||
// this.sleep(2000)
|
||||
// this.flag = false
|
||||
//
|
||||
// }
|
||||
// else {
|
||||
let wsObj = JSON.parse(e.data)
|
||||
// console.log("this wsObj")
|
||||
// console.log(wsObj)
|
||||
// ws数据推送成功
|
||||
// 处理ws推送的预警信息
|
||||
this.getWarningPicture(wsObj)
|
||||
// }
|
||||
},
|
||||
// 抓拍的图片处理
|
||||
getPicture(obj) {
|
||||
|
|
@ -391,18 +427,10 @@
|
|||
for (let i = 0; i < warningData.length; i++) {
|
||||
this.videoFaceList.unshift(warningData[i])
|
||||
}
|
||||
console.log("this is videofacelist")
|
||||
console.log(this.videoFaceList)
|
||||
// this.videoFaceList = warningData;
|
||||
// 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)
|
||||
|
|
@ -410,35 +438,35 @@
|
|||
let warningType = this.$refs.notice
|
||||
warningType.play()
|
||||
// this.$message.warning("有新的预警信息")
|
||||
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") {
|
||||
// item.taskType = "#FF343E"
|
||||
// } else if (item.taskType == "2") {
|
||||
// item.taskType = "#FFA61A"
|
||||
// } else if (item.taskType == "3") {
|
||||
// item.taskType = "#2FC8FA"
|
||||
// } else {
|
||||
// item.taskType = "#CCC"
|
||||
// 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") {
|
||||
// // item.taskType = "#FF343E"
|
||||
// // } else if (item.taskType == "2") {
|
||||
// // item.taskType = "#FFA61A"
|
||||
// // } else if (item.taskType == "3") {
|
||||
// // item.taskType = "#2FC8FA"
|
||||
// // } else {
|
||||
// // item.taskType = "#CCC"
|
||||
// // }
|
||||
// // }
|
||||
// this.$nextTick(() => {
|
||||
// if (this.$refs[`warningImage${index}`].length != 0) {
|
||||
// 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);
|
||||
// }
|
||||
// }
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs[`warningImage${index}`].length != 0) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
// })
|
||||
// })
|
||||
},
|
||||
// 卡口树隐藏显示
|
||||
barrierSelectStateClick() {
|
||||
|
|
@ -454,12 +482,34 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getRtspByCameraId(cameraId) {
|
||||
this.$http.get(`/camera/findById/${cameraId}`).then(res => {
|
||||
|
||||
if (res.data.code === 0) {
|
||||
|
||||
// this.cameraList. = res.data.data.rtspUrl
|
||||
this.nowRtspurl = res.data.data.rtspUrl
|
||||
this.flag = true
|
||||
this.$http.get("http://192.168.1.196:5001/returnRtspUrl",{
|
||||
params:{
|
||||
url:this.nowRtspurl
|
||||
}
|
||||
})
|
||||
this.videoFaceList = []
|
||||
// this.$forceUpdate()
|
||||
} else {
|
||||
// this.$message.warning(res.data.message)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 级联事件切换摄像头
|
||||
handleNodeClick(data, a, b) {
|
||||
console.log(data)
|
||||
// console.log(data)
|
||||
if (data.type == "camera" && data.status === "Y") {
|
||||
// 切换摄像头清空上一个摄像头的今日抓拍
|
||||
this.videoFaceList = []
|
||||
this.currentFaces = []
|
||||
// 摄像头名字用于展示
|
||||
this.barrierName = data.label
|
||||
|
|
@ -469,10 +519,12 @@
|
|||
// 获取任务名称
|
||||
this.getTaskNameByCameraId(this.cameraId)
|
||||
// 切换摄像头时默认查询一条数据展示
|
||||
this.initTotal(this.cameraId)
|
||||
//this.initTotal(this.cameraId)
|
||||
//切换摄像头的地址，同时向算法端传递参数
|
||||
this.getRtspByCameraId(this.cameraId)
|
||||
// ws 关闭再打开是为了调用send()方法传递摄像头id
|
||||
this.websocketclose()
|
||||
this.websocketonopen()
|
||||
// this.websocketclose()
|
||||
// this.websocketonopen()
|
||||
}
|
||||
},
|
||||
// 打开预警任务
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="surveillance_top">
|
||||
<el-form ref="form" :model="form" :inline="true">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="布控任务名称" style="width:130px" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建人" prop="founder">
|
||||
<el-input v-model="form.founder" placeholder="创建人" style="width:120px" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="处置类型" prop="disposalType">
|
||||
<el-radio-group v-model="form.disposalType" size="small">
|
||||
<el-radio-button :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio-button>
|
||||
<!-- <el-radio-button label="1">抓捕类</el-radio-button>
|
||||
<el-radio-button label="2">监控类</el-radio-button>
|
||||
<el-radio-button label="3">提示类</el-radio-button> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="布控状态" prop="controlState">
|
||||
<el-radio-group v-model="form.controlState" size="small">
|
||||
<el-radio-button label="0">运行中</el-radio-button>
|
||||
<el-radio-button label="1">已暂停</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item style="float:right">
|
||||
<el-button type="primary" @click="clickSearch()">搜索</el-button>
|
||||
<el-button @click="clickReset('form')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div class="surveillance_top">-->
|
||||
<!-- <el-form ref="form" :model="form" :inline="true">-->
|
||||
<!-- <el-form-item label="名称" prop="name">-->
|
||||
<!-- <el-input v-model="form.name" placeholder="布控任务名称" style="width:130px" clearable></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="创建人" prop="founder">-->
|
||||
<!-- <el-input v-model="form.founder" placeholder="创建人" style="width:120px" clearable></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="处置类型" prop="disposalType">-->
|
||||
<!-- <el-radio-group v-model="form.disposalType" size="small">-->
|
||||
<!--<!– <el-radio-button :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio-button>–>-->
|
||||
<!-- <el-radio-button label="1">抓捕类</el-radio-button>-->
|
||||
<!-- <el-radio-button label="2">监控类</el-radio-button>-->
|
||||
<!-- <el-radio-button label="3">提示类</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="布控状态" prop="controlState">-->
|
||||
<!-- <el-radio-group v-model="form.controlState" size="small">-->
|
||||
<!-- <el-radio-button label="0">运行中</el-radio-button>-->
|
||||
<!-- <el-radio-button label="1">已暂停</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item style="float:right">-->
|
||||
<!-- <el-button type="primary" @click="clickSearch()">搜索</el-button>-->
|
||||
<!-- <el-button @click="clickReset('form')">重置</el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="surveillance_add">
|
||||
<el-button type="primary" @click="clickNews()">新建布控任务</el-button>
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column prop="disposalType" label="处置类型" show-overflow-tooltip width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.disposalType == '1' ? '抓捕类' : scope.row.disposalType == '2' ? '监控类' :'提示类'}}</span>
|
||||
<span>{{scope.row.disposalType}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isValid" label="布控状态" show-overflow-tooltip width="150">
|
||||
|
|
@ -140,11 +140,11 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预警结果" show-overflow-tooltip width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="clickCheck(scope.row.taskNo)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="预警结果" show-overflow-tooltip width="150">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-button type="text" @click="clickCheck(scope.row.taskNo)">查看</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
|
||||
<el-dialog title="编辑布控任务" :visible.sync="addDialogVisible2" width="30%" class="surveillance_addimg"
|
||||
|
|
@ -172,9 +172,9 @@
|
|||
<!-- <el-radio v-model="addForm2.disposalType" label="1">抓捕类</el-radio>
|
||||
<el-radio v-model="addForm2.disposalType" label="2">监控类型</el-radio>
|
||||
<el-radio v-model="addForm2.disposalType" label="3">提示类</el-radio> -->
|
||||
<p v-if="addForm2.disposalType == '1'" style="margin:0px">严重告警结果,针对需要立即处理的对象</p>
|
||||
<p v-else-if="addForm2.disposalType == '2'" style="margin:0px">普通告警结果，针对需要关注的对象</p>
|
||||
<p v-else style="margin:0px">结果通知，可用于演示或测试使用</p>
|
||||
<!-- <p v-if="addForm2.disposalType == '1'" style="margin:0px">严重告警结果,针对需要立即处理的对象</p>-->
|
||||
<!-- <p v-else-if="addForm2.disposalType == '2'" style="margin:0px">普通告警结果，针对需要关注的对象</p>-->
|
||||
<!-- <p v-else style="margin:0px">结果通知，可用于演示或测试使用</p>-->
|
||||
</el-form-item><!-- prop="monitorArea" -->
|
||||
<el-form-item label="布控区域">
|
||||
<el-input disabled v-model="addForm2.controlRegion"></el-input>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
<el-input disabled v-model="addForm2.listfacecamera"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="布控阈值(%)" prop="controlThreshold">
|
||||
<el-slider v-model="addForm2.controlThreshold" show-input :step="10" disabled>
|
||||
<el-slider v-model="addForm2.controlThreshold" show-input :step="10" >
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息" prop="remarks">
|
||||
|
|
@ -237,12 +237,12 @@
|
|||
object: '1',
|
||||
library: '',
|
||||
targetImg: '',
|
||||
disposalType: '3',
|
||||
disposalType: '',
|
||||
monitorType: '1',
|
||||
time: '',
|
||||
monitorArea: '',
|
||||
cameraList: '',
|
||||
monitorThreshold: 20,
|
||||
monitorThreshold: 0,
|
||||
police: '1',
|
||||
polices: '',
|
||||
note: '',
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<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%">-->
|
||||
<img :src="item.cphoto" alt="目标图片" height="100%">
|
||||
<canvas width=120 height=120 :ref="'warningImage'+index">
|
||||
</canvas>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue