4.17websocket调试成功
This commit is contained in:
parent
03ca605c8c
commit
d9d7f0ed8e
@ -1,5 +1,6 @@
|
||||
window.GLOBAL_CONFIG = {
|
||||
apiURL: "http://127.0.0.1:8889/face",
|
||||
IMG_SERVER_URL: "http://192.168.1.133:9000",
|
||||
SOCKET_URL: "ws://127.0.0.1:1993/task/webSocket",
|
||||
SOCKET_URL: "ws://127.0.0.1:8889/face/webSocketServer",
|
||||
rtspApi_URL: window.location.protocol + '//' + window.location.hostname + ':' + window.location.port,
|
||||
}
|
||||
|
||||
@ -11,21 +11,23 @@
|
||||
</i>
|
||||
</div>
|
||||
<div style="width: 528px;height: 190px;margin-bottom: 10px;background: #FFF;border-radius:2px; cursor: pointer;"
|
||||
v-for="(item,index) in warningList" class="warning-class" @click="openTask(item)">
|
||||
v-for="(item,index) in videoFaceList" class="warning-class" @click="openTask(item)">
|
||||
<div
|
||||
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-right: 20px;">{{item.time}}</i>
|
||||
</div>
|
||||
<div 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>-->
|
||||
<img style="width: 120px;height: 120px;" :src="item.cphoto" fit="contain"/>
|
||||
<img style="width: 120px;height: 120px;" :src="videoFaceList[index].cphoto" fit="contain"/>
|
||||
</div>
|
||||
<div
|
||||
style="width: 120px;height: 120px;background: #F1F6F9;margin: 0 20px;text-align: center;position: relative;">
|
||||
<img style="width: 120px;height: 120px;" :src="item.rphoto" />
|
||||
<!-- src="item.rphoto"-->
|
||||
<img style="width: 120px;height: 120px;" src="../../../assets/img/warning/zb.png" />
|
||||
<div
|
||||
style="position: absolute;width: 100%;background-color: red;bottom: 0;opacity: 0.6;background: #000;color: #FFF;line-height: 1.8;">
|
||||
<i>测试库</i>
|
||||
@ -38,10 +40,11 @@
|
||||
style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgr style="width: 120px;height: 120px;backgritem.name}}</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;">{{item.xsd }}</i></span>
|
||||
<span><i>相似度：</i><i style="font-size: 30px;font-weight: 600;color: #FF343E; font-family:Bahnschrift;">
|
||||
{{"99%"+item.xsd}}</i></span>
|
||||
</div>
|
||||
<div style="position: absolute;top:0;right: 0;">
|
||||
<img 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=='2'" src="../../../assets/img/warning/jk.png" alt="监控">
|
||||
<img v-if="item.taskType=='1'" src="../../../assets/img/warning/zb.png" alt="抓捕">
|
||||
@ -87,12 +90,18 @@
|
||||
</div>
|
||||
<!-- 背景图 -->
|
||||
<!-- fits: ['fill', 'contain', 'cover', 'none', 'scale-down'], -->
|
||||
<div style="width: 100%;display: flex;justify-content: center;background-color: #333;height:600px;">
|
||||
<el-image style="width: 100%;" :src="faceBgUrltest" :preview-src-list="[faceBgUrltest]" fit="contain">
|
||||
<div slot="error" class="image-slot" style="text-align: center;margin-top:270px ;">
|
||||
<i style="color: #666;font-size: 60px;" class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<div>
|
||||
<!-- <el-image style="width: 100%;" :src="faceBgUrltest" :preview-src-list="[faceBgUrltest]" fit="contain">-->
|
||||
<!-- <div slot="error" class="image-slot" style="text-align: center;margin-top:270px ;">-->
|
||||
<!-- <i style="color: #666;font-size: 60px;" class="el-icon-picture-outline"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </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>
|
||||
</div>
|
||||
<!-- <button style="width: 200px;height: 200px;" @click="plays"></button>-->
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<!-- 抓拍图片详情 -->
|
||||
@ -163,13 +172,15 @@
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
import Task from './barrier-task'
|
||||
import barrierAllPic from './barrier-all-pic'
|
||||
import videoControl from'./video-control'
|
||||
export default {
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
components: {
|
||||
Task,
|
||||
barrierAllPic
|
||||
barrierAllPic,
|
||||
videoControl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -200,13 +211,15 @@
|
||||
totalSnapShot: 0,
|
||||
// 预警列表
|
||||
warningList: [],
|
||||
videoFaceList:[],
|
||||
// 预警音乐类型
|
||||
warningType: "",
|
||||
cameraList:[{ rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"}],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//this.timer = setInterval(this.get, 1000);
|
||||
this.get()
|
||||
// this.get()
|
||||
},
|
||||
beforeDestroy() {},
|
||||
created() {
|
||||
@ -218,15 +231,18 @@
|
||||
|
||||
methods: {
|
||||
get(){
|
||||
this.warningList = [];
|
||||
this.videoFaceList = [];
|
||||
// console.log("this waringlist"+this.warningList);
|
||||
this.$http.get("/faces/list").then(res => {
|
||||
this.warningList = res.data;
|
||||
this.$http.get("/faces/returnList").then(res => {
|
||||
this.videoFaceList = res.data;
|
||||
})
|
||||
},
|
||||
plays(){
|
||||
this.cameraList.push({rtspUrl: "rtsp://admin:123uestc@192.168.1.32:554/h264"});
|
||||
},
|
||||
// 初始化4条预警数据
|
||||
initGetWarningPicture() {
|
||||
this.$http.post("/warning/alarm", {
|
||||
this.$http.post("/faces/compareList", {
|
||||
"page": {
|
||||
"pageNo": 1,
|
||||
"pageSize": 4,
|
||||
@ -325,27 +341,15 @@
|
||||
console.log("WebSocket Connection closed");
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
console.log("数据传输")
|
||||
console.log(e)
|
||||
// ws数据字符串转json
|
||||
let wsObj = JSON.parse(e.data)
|
||||
console.log("this wsObj")
|
||||
console.log(wsObj)
|
||||
// ws数据推送成功
|
||||
if (wsObj.code === 200) {
|
||||
// wsObj.cmd === "BAYONET" 人脸抓拍图片
|
||||
if (wsObj.cmd === "BAYONET") {
|
||||
this.getPicture(wsObj.data)
|
||||
}
|
||||
// wsObj.cmd === "WARNING" 预警信息
|
||||
else {
|
||||
// 处理ws推送的预警信息
|
||||
this.getWarningPicture(wsObj.data)
|
||||
}
|
||||
} else if (wsObj.code === 401) {
|
||||
this.$router.replace({
|
||||
name: 'login'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(wsObj.message)
|
||||
this
|
||||
}
|
||||
// 处理ws推送的预警信息
|
||||
this.getWarningPicture(wsObj)
|
||||
},
|
||||
// 抓拍的图片处理
|
||||
getPicture(obj) {
|
||||
@ -383,18 +387,22 @@
|
||||
*/
|
||||
getWarningPicture(warningData) {
|
||||
// warningData为数组说明是初始化数据，为对象说明是ws推送的数据
|
||||
if (!Array.isArray(warningData)) {
|
||||
|
||||
if (this.warningList.length === 4) {
|
||||
this.warningList.pop()
|
||||
this.warningList.unshift(warningData)
|
||||
} else {
|
||||
this.warningList.unshift(warningData)
|
||||
console.log("this warningDAta")
|
||||
console.log(warningData)
|
||||
this.warningList = warningData
|
||||
// this.warningList.unshift(warningData)
|
||||
console.log("this warningList")
|
||||
console.log(this.warningList)
|
||||
}
|
||||
// 声音 和 tips预警
|
||||
let warningType = this.$refs.notice
|
||||
warningType.play()
|
||||
this.$message.warning("有新的预警信息")
|
||||
}
|
||||
// this.$message.warning("有新的预警信息")
|
||||
this.warningList.forEach((item, index, arr) => {
|
||||
// "1" 红色#FF343E "2" 橙色#FFA61A "0" 蓝色#2FC8FA
|
||||
// if (item.taskType == "1" || item.taskType == "2" || item.taskType == "3") {
|
||||
|
||||
@ -19,6 +19,15 @@ module.exports = {
|
||||
overlay: {
|
||||
errors: true,
|
||||
warnings: true
|
||||
},
|
||||
proxy:{
|
||||
'/api':{
|
||||
target:"http://192.168.1.181:8286/",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api':'/api'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user