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

05.11

Browse Source
This commit is contained in:
coco1986509808 2023-05-11 22:24:24 +08:00
parent eb472bb09d
commit d49c187ce0
5 changed files with 161 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/config.js
View File

@ -1,6 +1,6 @@
window.GLOBAL_CONFIG = { 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", 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, rtspApi_URL: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port,
} }

2
src/utils/request.js
View File

@ -8,7 +8,7 @@ import isPlainObject from 'lodash/isPlainObject'
const http = axios.create({ const http = axios.create({
baseURL: window.SITE_CONFIG['apiURL'], baseURL: window.SITE_CONFIG['apiURL'],
timeout: 1000 * 180, timeout: 1000 * 180,
withCredentials: true withCredentials: false
}) })
/** /**

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

@ -11,14 +11,14 @@
</i> </i>
</div> </div>
<div style="width: 528px;height: 190px;margin-bottom: 10px;background: #FFF;border-radius:2px; cursor: pointer;" <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)"> v-for="(item,index) in videoFaceList" v-if = "item.xsd > textStyle" class="warning-class" @click="openTask(item)">
<div <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;"> 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">{{"十楼工位"}}</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 v-if = "item.xsd > textStyle" style="display: flex;align-items: center;height: 150px;margin-left: 34px;">
<div style="width: 120px;height: 120px;background: #F1F6F9;"> <div style="width: 120px;height: 120px;background: #F1F6F9;">
<!--<canvas width=120 height=120 :ref="'warningImage'+index"> <!--<canvas width=120 height=120 :ref="'warningImage'+index">
</canvas>--> </canvas>-->
@ -98,7 +98,7 @@
<!-- </el-image>--> <!-- </el-image>-->
<el-card shadow="never" class="aui-card--fill"> <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" > <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> </div>
<!-- <button style="width: 200px;height: 200px;" @click="plays"></button>--> <!-- <button style="width: 200px;height: 200px;" @click="plays"></button>-->
</el-card> </el-card>
@ -128,11 +128,11 @@
</div> </div>
</div> </div>
<!-- 声音提醒 --> <!-- 声音提醒 -->
<audio ref="notice"> <!-- <audio ref="notice">-->
<source src="../../../assets/mp3/warning1.mp3" type="audio/mpeg"> <!-- <source src="../../../assets/mp3/warning1.mp3" type="audio/mpeg">-->
<!-- 文字转语音，需要外网支持 --> <!-- &lt;!&ndash; 文字转语音，需要外网支持 &ndash;&gt;-->
<!-- <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=你有新的短消息了" type="audio/mpeg"> --> <!-- &lt;!&ndash; <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=你有新的短消息了" type="audio/mpeg"> &ndash;&gt;-->
</audio> <!-- </audio>-->
</div> </div>
</div> </div>
<div v-show="allPicState"> <div v-show="allPicState">
@ -214,6 +214,10 @@
// 预警音乐类型 // 预警音乐类型
warningType: "", warningType: "",
cameraList:[{ rtspUrl: "rtsp://192.168.1.138:8557/h264"}], cameraList:[{ rtspUrl: "rtsp://192.168.1.138:8557/h264"}],
nowRtspurl:"",
//设置摄像头切换休眠标识
flag : false,
textStyle : 70,
} }
}, },
mounted() { mounted() {
@ -236,9 +240,31 @@
this.videoFaceList = res.data; this.videoFaceList = res.data;
}) })
}, },
plays(){ getCurrentTime() {
this.cameraList.push({rtspUrl: "rtsp://192.168.1.138:8557/h264"}); //获取当前时间并打印
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条预警数据 // 初始化4条预警数据
initGetWarningPicture() { initGetWarningPicture() {
this.$http.post("/faces/compareList", { this.$http.post("/faces/compareList", {
@ -286,6 +312,7 @@
this.$http.get(`warning/taskInfo/${cameraId}`).then(res => { this.$http.get(`warning/taskInfo/${cameraId}`).then(res => {
if (res.data.code === 0) { if (res.data.code === 0) {
this.taskName = res.data.data.taskName this.taskName = res.data.data.taskName
this.textStyle = res.data.data.controlThreshold
} else { } else {
this.$message.warning(res.data.message) this.$message.warning(res.data.message)
} }
@ -340,15 +367,24 @@
console.log("WebSocket Connection closed"); console.log("WebSocket Connection closed");
}, },
websocketonmessage(e) { websocketonmessage(e) {
console.log("数据传输") // console.log("前端数据传输时间");
// this.getCurrentTime();
// console.log(e) // console.log(e)
// ws数据字符串转json // ws数据字符串转json
// if(this.flag == true){
// console.log("onmessage延迟停止中：")
// this.sleep(2000)
// this.flag = false
//
// }
// else {
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)
// }
}, },
// 抓拍的图片处理 // 抓拍的图片处理
getPicture(obj) { getPicture(obj) {
@ -391,18 +427,10 @@
for (let i = 0; i < warningData.length; i++) { for (let i = 0; i < warningData.length; i++) {
this.videoFaceList.unshift(warningData[i]) this.videoFaceList.unshift(warningData[i])
} }
console.log("this is videofacelist") // this.videoFaceList = warningData;
console.log(this.videoFaceList) // 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 //this.warningList = warningData
//console.log(this.compareList) //console.log(this.compareList)
@ -410,35 +438,35 @@
let warningType = this.$refs.notice let warningType = this.$refs.notice
warningType.play() warningType.play()
// this.$message.warning("有新的预警信息") // this.$message.warning("有新的预警信息")
this.compareList.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") {
// item.taskType = "#FF343E" // // item.taskType = "#FF343E"
// } else if (item.taskType == "2") { // // } else if (item.taskType == "2") {
// item.taskType = "#FFA61A" // // item.taskType = "#FFA61A"
// } else if (item.taskType == "3") { // // } else if (item.taskType == "3") {
// item.taskType = "#2FC8FA" // // item.taskType = "#2FC8FA"
// } else { // // } else {
// item.taskType = "#CCC" // // 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() { 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) { handleNodeClick(data, a, b) {
console.log(data) // console.log(data)
if (data.type == "camera" && data.status === "Y") { if (data.type == "camera" && data.status === "Y") {
// 切换摄像头清空上一个摄像头的今日抓拍 // 切换摄像头清空上一个摄像头的今日抓拍
this.videoFaceList = []
this.currentFaces = [] this.currentFaces = []
// 摄像头名字用于展示 // 摄像头名字用于展示
this.barrierName = data.label this.barrierName = data.label
@ -469,10 +519,12 @@
// 获取任务名称 // 获取任务名称
this.getTaskNameByCameraId(this.cameraId) this.getTaskNameByCameraId(this.cameraId)
// 切换摄像头时默认查询一条数据展示 // 切换摄像头时默认查询一条数据展示
this.initTotal(this.cameraId) //this.initTotal(this.cameraId)
//切换摄像头的地址，同时向算法端传递参数
this.getRtspByCameraId(this.cameraId)
// ws 关闭再打开是为了调用send()方法传递摄像头id // ws 关闭再打开是为了调用send()方法传递摄像头id
this.websocketclose() // this.websocketclose()
this.websocketonopen() // this.websocketonopen()
} }
}, },
// 打开预警任务 // 打开预警任务

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

@ -1,33 +1,33 @@
<template> <template>
<div> <div>
<div class="surveillance_top"> <!-- <div class="surveillance_top">-->
<el-form ref="form" :model="form" :inline="true"> <!-- <el-form ref="form" :model="form" :inline="true">-->
<el-form-item label="名称" prop="name"> <!-- <el-form-item label="名称" prop="name">-->
<el-input v-model="form.name" placeholder="布控任务名称" style="width:130px" clearable></el-input> <!-- <el-input v-model="form.name" placeholder="布控任务名称" style="width:130px" clearable></el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="创建人" prop="founder"> <!-- <el-form-item label="创建人" prop="founder">-->
<el-input v-model="form.founder" placeholder="创建人" style="width:120px" clearable></el-input> <!-- <el-input v-model="form.founder" placeholder="创建人" style="width:120px" clearable></el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="处置类型" prop="disposalType"> <!-- <el-form-item label="处置类型" prop="disposalType">-->
<el-radio-group v-model="form.disposalType" size="small"> <!-- <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> <!--&lt;!&ndash; <el-radio-button :label="item.label" v-for="item in warningTypeList" :key="item.value">{{item.label}}</el-radio-button>&ndash;&gt;-->
<!-- <el-radio-button label="1">抓捕类</el-radio-button> <!-- <el-radio-button label="1">抓捕类</el-radio-button>-->
<el-radio-button label="2">监控类</el-radio-button> <!-- <el-radio-button label="2">监控类</el-radio-button>-->
<el-radio-button label="3">提示类</el-radio-button> --> <!-- <el-radio-button label="3">提示类</el-radio-button>-->
</el-radio-group> <!-- </el-radio-group>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="布控状态" prop="controlState"> <!-- <el-form-item label="布控状态" prop="controlState">-->
<el-radio-group v-model="form.controlState" size="small"> <!-- <el-radio-group v-model="form.controlState" size="small">-->
<el-radio-button label="0">运行中</el-radio-button> <!-- <el-radio-button label="0">运行中</el-radio-button>-->
<el-radio-button label="1">已暂停</el-radio-button> <!-- <el-radio-button label="1">已暂停</el-radio-button>-->
</el-radio-group> <!-- </el-radio-group>-->
</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="clickReset('form')">重置</el-button> <!-- <el-button @click="clickReset('form')">重置</el-button>-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
</div> <!-- </div>-->
<div class="surveillance_add"> <div class="surveillance_add">
<el-button type="primary" @click="clickNews()">新建布控任务</el-button> <el-button type="primary" @click="clickNews()">新建布控任务</el-button>
@ -117,7 +117,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="disposalType" label="处置类型" show-overflow-tooltip width="150"> <el-table-column prop="disposalType" label="处置类型" show-overflow-tooltip width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.disposalType == '1' ? '抓捕类' : scope.row.disposalType == '2' ? '监控类' :'提示类'}}</span> <span>{{scope.row.disposalType}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="isValid" label="布控状态" show-overflow-tooltip width="150"> <el-table-column prop="isValid" label="布控状态" show-overflow-tooltip width="150">
@ -140,11 +140,11 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预警结果" show-overflow-tooltip width="150"> <!-- <el-table-column label="预警结果" show-overflow-tooltip width="150">-->
<template slot-scope="scope"> <!-- <template slot-scope="scope">-->
<el-button type="text" @click="clickCheck(scope.row.taskNo)">查看</el-button> <!-- <el-button type="text" @click="clickCheck(scope.row.taskNo)">查看</el-button>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> </el-table>
<el-dialog title="编辑布控任务" :visible.sync="addDialogVisible2" width="30%" class="surveillance_addimg" <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="1">抓捕类</el-radio>
<el-radio v-model="addForm2.disposalType" label="2">监控类型</el-radio> <el-radio v-model="addForm2.disposalType" label="2">监控类型</el-radio>
<el-radio v-model="addForm2.disposalType" label="3">提示类</el-radio> --> <el-radio v-model="addForm2.disposalType" label="3">提示类</el-radio> -->
<p v-if="addForm2.disposalType == '1'" 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-if="addForm2.disposalType == '2'" style="margin:0px">普通告警结果，针对需要关注的对象</p>-->
<p v-else style="margin:0px">结果通知，可用于演示或测试使用</p> <!-- <p v-else style="margin:0px">结果通知，可用于演示或测试使用</p>-->
</el-form-item><!-- prop="monitorArea" --> </el-form-item><!-- prop="monitorArea" -->
<el-form-item label="布控区域"> <el-form-item label="布控区域">
<el-input disabled v-model="addForm2.controlRegion"></el-input> <el-input disabled v-model="addForm2.controlRegion"></el-input>
@ -183,7 +183,7 @@
<el-input disabled v-model="addForm2.listfacecamera"></el-input> <el-input disabled v-model="addForm2.listfacecamera"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="布控阈值(%)" prop="controlThreshold"> <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-slider>
</el-form-item> </el-form-item>
<el-form-item label="备注信息" prop="remarks"> <el-form-item label="备注信息" prop="remarks">
@ -237,12 +237,12 @@
object: '1', object: '1',
library: '', library: '',
targetImg: '', targetImg: '',
disposalType: '3', disposalType: '',
monitorType: '1', monitorType: '1',
time: '', time: '',
monitorArea: '', monitorArea: '',
cameraList: '', cameraList: '',
monitorThreshold: 20, monitorThreshold: 0,
police: '1', police: '1',
polices: '', polices: '',
note: '', note: '',

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

@ -40,7 +40,7 @@
<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;">
<!-- <img :src="item.cphoto" alt="目标图片" height="100%">--> <img :src="item.cphoto" alt="目标图片" height="100%">
<canvas width=120 height=120 :ref="'warningImage'+index"> <canvas width=120 height=120 :ref="'warningImage'+index">
</canvas> </canvas>
</div> </div>