This commit is contained in:
jjLv 2024-08-30 09:55:35 +08:00
commit 00c62f6780
6 changed files with 476 additions and 33 deletions

View File

@ -43,6 +43,7 @@
"echarts": "5.4.0",
"element-ui": "2.15.14",
"file-saver": "^2.0.5",
"flv.js": "^1.6.2",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"html2canvas": "^1.4.1",

View File

@ -309,16 +309,16 @@
</el-select>
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="form.idCard" placeholder="请输入人员身份证号" maxlength="20"/>
<el-input v-model="form.idCard" placeholder="请输入人员身份证号" maxlength="18"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入人员手机号" maxlength="11"/>
</el-form-item>
<el-form-item label="安全帽编号" prop="aqmCode">
<el-input v-model="form.aqmCode" placeholder="请输入安全帽编号" maxlength="20"/>
<el-input v-model="form.aqmCode" placeholder="请输入安全帽编号" maxlength="10"/>
</el-form-item>
<el-form-item label="马甲编号" prop="mjCode">
<el-input v-model="form.mjCode" placeholder="请输入马甲编号" maxlength="20"/>
<el-input v-model="form.mjCode" placeholder="请输入马甲编号" maxlength="10"/>
</el-form-item>
<el-form-item label="人员岗位" prop="post">
<el-select v-model="form.post" placeholder="请选择人员岗位" clearable style="width: 100%;">

View File

@ -280,7 +280,7 @@
</el-row>
<el-row :gutter="24" style="display: flex;justify-content: center;">
<el-col :span="23">
<el-table :data="teamUserList" style="max-height: 300px;overflow-y: auto;">
<el-table :data="teamUserList" style="max-height: 350px;overflow-y: auto;">
<el-table-column label="序号" type="index" />
<el-table-column label="姓名" align="center" prop="name" />
<el-table-column label="身份证" align="center" prop="idCard" />
@ -306,7 +306,7 @@
<!-- 左侧人员 -->
<div class="people-list-box">
<div class="dialog-header">
<el-input style="width: 90%;" @input="searchUser(searchName)"
<el-input style="width: 100%;" @input="searchUser(searchName)"
placeholder="请输入人员姓名"
prefix-icon="el-icon-search"
v-model="searchName">
@ -323,7 +323,10 @@
</div>
<!-- 右侧选中 -->
<div class="chosen-list-box">
<div class="dialog-header">已选择</div>
<div class="dialog-header">
<div style="margin-left: 20px;">已选择</div>
<div style="margin-right: 20px;color: #46a6ff;cursor: pointer;" @click="cleanChosen">清空</div>
</div>
<div class="chosen-list">
<div class="chosen-list-item" v-for="item in chosenUser" :key="item.id">
<div style="margin-left: 20px;">{{ item.name }}</div>
@ -622,13 +625,38 @@
cancelPeople() {
this.openPeople = false;
},
//
cleanChosen(){
this.chosenUser=[];
//
this.$nextTick(()=>{
//
this.$refs.peopleTable.clearSelection()
// this.peopleList.forEach(row => {
// for(let i=0;i<this.chosenUser.length;i++){
// if(row.id==this.chosenUser[i].id){
// this.$refs.peopleTable.toggleRowSelection(row,true);
// }
// }
// })
})
},
//-
submitPeople(){
// this.openPeople = false;
// console.log(this.teamUserList)
// console.log(this.chosenUser)
this.teamUserList = this.chosenUser;
this.teamUserList.unshift(this.leaderData)
// console.log(this.form.teamLeaderId)
if(this.form.teamLeaderId&&this.form.teamLeaderId!=""){
let arr = [this.leaderData]
this.teamUserList = arr.concat(this.chosenUser);
}else{
this.teamUserList=this.chosenUser;
}
this.openPeople = false;
// this.teamUserList.unshift(this.leaderData)
},
/** 新增按钮操作 */
handleAdd() {
@ -714,6 +742,9 @@
</script>
<style lang="scss" scoped>
.el-table::before {
display: none !important;
}
.people-dialog{
width: 100%;height: 500px;display: flex; justify-content: space-between;
}
@ -730,7 +761,7 @@
width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;
}
.dialog-header{
width: 100%;height: 60px;background-color: #F2F2F2;display: flex;align-items: center;justify-content: center;
width: 100%;height: 60px;background-color: #F2F2F2;display: flex;align-items: center;justify-content: space-between;
}
.teamLeaderBox{
width: 40px;

View File

@ -0,0 +1,298 @@
<template>
<div class="video-box">
<video id="videoPlayer" ref="videoPlayer" class="video-player" autoplay controls="controls" @click="checkVideo(1)"/>
<!-- <video id="videoPlayer" class="video-player" autoplay="autoplay" loop="loop"
muted controls="controls"></video> -->
</div>
</template>
<script>
// import { videoConfig } from './js/video'
import flvjs from 'flv.js'
import CryptoJS from 'crypto-js';
import $ from 'jquery';
let _cf = {
ver:'debug',
q2http_url: 'http://112.31.70.193:1854/icvs/',
websocket_url:'ws://112.31.70.193:9580/wss',
// -
connParams : {
// - IP
address : "112.31.70.193",
port : "9988",
// -
user : "bns3",
// -
password :"Bns@admin**",
// - ID
epid : "system",
// -
bfix :1
}
}
var loginToken='';
var puId='';
export default {
name: "monitor",
props: {
},
data() {
return {
//
videoPlayer: null,
classStyle: 'ball-content',
};
},
mounted() {
this.connect()
},
methods: {
checkVideo(index){
console.log(index)
},
//
videoEncrypt(word){
var key = CryptoJS.enc.Utf8.parse("297796CCB81D2553");
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
},
//
requestPost(router, params, callback) {
$.ajax({
type: 'post',
url: _cf.q2http_url + router,
data: params,
traditional: true,
dataType: 'json',
async: false,
complete: function (rv) {
if (typeof callback == 'function') callback(rv)
}
})
},
//
connect() {
console.log('connect')
var allDataParams="address="+_cf.connParams.address+"&port="+_cf.connParams.port+
"&user="+ _cf.connParams.user+"&password="+_cf.connParams.password+"&epid="+_cf.connParams.epid+"&fixaddr="+_cf.connParams.bfix;
let params = {
"params":this.videoEncrypt(allDataParams)
}
// console.log(params)
this.requestPost('login2', params, function (rv) {
let result = {
errcode: -1,
token: ''
}
let respJSON = JSON.parse(rv.responseText);
if (respJSON.hasOwnProperty('errcode')) {
result.errcode = respJSON.errcode;
}
if (respJSON.hasOwnProperty('token')) {
result.token = respJSON.token;
result.errcode = 0;
loginToken = result.token;//Token
}
});
},
//
initVideo(devId) {
puId = devId;
console.log(puId)
console.log(loginToken)
this.$nextTick(() => {
const videoElement = this.$refs.videoPlayer
const url = `${_cf.q2http_url}/stream.flv?puid=${puId}&idx=0&stream=0&token=${loginToken}`
try {
this.videoPlayer = flvjs.createPlayer({
type: 'flv',
url: url,
isLive: true,
hasAudio: false
})
this.videoPlayer.attachMediaElement(videoElement)
this.videoPlayer.load()
setTimeout(() => {
this.videoPlayer.play()
}, 200)
} catch (err) {
console.log(err)
}
})
},
//
zoomcontrol(option) {
console.log(puId)
let params = {
puid: puId,
idx: "0"
}
switch (option) {
case "stop":
//
this.requestPost('PTZ/C_PTZ_StopPictureZoom?token=' + loginToken, params, rv => {
})
break;
case "zoomin":
//
this.requestPost('PTZ/C_PTZ_ZoomInPicture?token=' + loginToken, params, rv => {
})
break;
default:
//
this.requestPost('PTZ/C_PTZ_ZoomOutPicture?token=' + loginToken, params, rv => {
})
break;
}
},
//
focuscontrol(option) {
console.log(puId)
let params = {
puid: puId,
idx: "0"
}
switch (option) {
case "near":
this.requestPost('PTZ/C_PTZ_MakeFocusNear?token=' + loginToken, params, rv => {
console.log(rv)
})
break;
case "faraway":
this.requestPost('PTZ/C_PTZ_MakeFocusFar?token=' + loginToken, params, rv => {
console.log(rv)
})
break;
default:
this.requestPost('PTZ/C_PTZ_StopFocusMove?token=' + loginToken, params, rv => {
console.log(rv)
})
break;
}
},
aperture(option) {
let camera = {
puid: puId,
idx: "0"
};
let xml = "";
switch (option) {
case "augment":
xml = `<?xml version="1.0" encoding="UTF-8"?>
<M Type="ComReq">
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
</C>
</M>`;
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
console.log(rv);
});
break;
case "minish":
xml = `<?xml version="1.0" encoding="UTF-8"?>
<M Type="ComReq">
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
</C>
</M>`;
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
console.log(rv)
});
break;
default:
xml = `<?xml version="1.0" encoding="UTF-8"?>
<M Type="ComReq">
<C Type="G" Prio="1" EPID="system" Lang="zh_CN">
<Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
</C>
</M>`;
this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
console.log(rv);
});
break;
}
},
//
async turncontrol(option) {
let params = {
puid: puId,
idx: "0",
motion: option
};
this.requestPost('PTZ/C_PTZ_Turn?token=' + loginToken, params, (rv) => { });
},
//
control(key) {
console.log(key)
switch (key) {
case 0:
this.turncontrol('stop');
break;
case 1:
this.turncontrol('up');
break;
case 2:
this.turncontrol('down');
break;
case 3:
this.turncontrol('left');
break;
case 4:
this.turncontrol('right');
break;
case 5:
this.zoomcontrol('zoomin');
break;
case 6:
this.zoomcontrol('zoominout');
break;
case 7:
this.focuscontrol('near');
break;
case 8:
this.focuscontrol('faraway');
break;
case 9:
this.zoomcontrol('stop');
break;
case 10:
this.focuscontrol('stop');
break;
default:
break;
}
},
//
closeVideo() {
if (this.videoPlayer) {
// this.videoPlayer.pause()
this.videoPlayer.unload()
this.videoPlayer.detachMediaElement()
this.videoPlayer.destroy()
}
},
}
}
</script>
<style lang="scss">
.video-box{
width: 100%;
height: 100%;
}
.video-player {
width: 100%;
height: 100%;
pointer-events: none;
object-fit: fill;
}
</style>

View File

@ -13,27 +13,27 @@
<div id="platform-center">
<div id="center-btn-top-box" class="layout">
<div class="fx-btn-box layout">
<button id="left_nocheck" class="common_size"></button>
<button id="left_nocheck" class="common_size" @click="leftMonitor"></button>
</div>
<div class="fx-btn-box layout">
<button id="top_nocheck" class="common_size"></button>
<button id="bottom_nocheck" class="common_size"></button>
<button id="top_nocheck" class="common_size" @click="upMonitor"></button>
<button id="bottom_nocheck" class="common_size" @click="downMonitor"></button>
</div>
<div class="fx-btn-box layout">
<button id="right_nocheck" class="common_size"></button>
<button id="right_nocheck" class="common_size" @click="rightMonitor"></button>
</div>
</div>
<div id="center-btn-bottom-box" class="layout">
<button id="sx_nocheck" class="common_size"></button>
<button id="sx_nocheck" class="common_size" @click="smallMonitor"></button>
<span class="btn-desc2">缩放</span>
<button id="fd_nocheck" class="common_size"></button>
<button id="fd_nocheck" class="common_size" @click="bigMonitor"></button>
</div>
</div>
<div id="platform-right">
<div class="left-right-btn-box layout">
<button id="jj_nocheck" class="common_size"></button>
<button id="jj_nocheck" class="common_size" @click="nearMonitor"></button>
<span class="btn-desc">聚焦</span>
<button id="yj_nocheck" class="common_size"></button>
<button id="yj_nocheck" class="common_size" @click="farawayMonitor"></button>
</div>
</div>
</div>
@ -59,14 +59,20 @@
</div>
<!-- 球机视频 -->
<div class="video-box layout">
<video v-if="boxNum == 1 || boxNum == 4" id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
muted controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer2" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer3" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
<video v-if="boxNum == 4" id="videoPlayer4" :class="classStyle" autoplay="autoplay" loop="loop" muted
controls="controls"></video>
<div v-if="boxNum == 1 || boxNum == 4" :class="classStyle" @click="checkPlayWindow(1)">
<Monitor ref="monitor1" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 1 }"></Monitor>
</div>
<div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(2)">
<Monitor ref="monitor2" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 2 }"></Monitor>
</div>
<div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(3)">
<Monitor ref="monitor3" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 3 }"></Monitor>
</div>
<div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(4)">
<Monitor ref="monitor4" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 4 }"></Monitor>
</div>
<!-- <video id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
muted controls="controls"></video>-->
</div>
<!-- 违章识别 -->
<div class="vio-box">
@ -118,6 +124,7 @@
<script>
import { getBallDeviceLists, getPhotosById, getBallWarnLists, getWarnLists } from "@/api/construction/manage/realTimeManage.js";
import Monitor from '../components/monitor.vue';
export default {
name: 'realTimeManage',
/* 球机树前端筛选 */
@ -126,6 +133,9 @@ export default {
this.$refs.tree.filter(val);
},
},
components: {
Monitor
},
data() {
return {
//
@ -150,7 +160,8 @@ export default {
isHasData: true,
busy: true,
//
boxNum: 1,
boxNum: 1,//14
boxIndex:1,//
classStyle: 'ball-content'
};
},
@ -276,11 +287,105 @@ export default {
return false
},
//
handleNodeClick(data, node, item) {
handleNodeClick(data, node, item) {//
console.log(node)
if (node.level === 2) {
//
if(this.boxNum==1){
this.$refs[`monitor`+1].closeVideo()
this.$refs[`monitor`+1].initVideo(node.data.devCode);
}else{
console.log(this.boxIndex)
if(this.boxIndex==4){
console.log(4)
this.$refs[`monitor`+4].closeVideo()
this.$refs[`monitor`+4].initVideo(node.data.devCode);
}
if(this.boxIndex>1&&this.boxIndex<4){
console.log(23)
this.$refs[`monitor`+this.boxIndex].closeVideo()
this.$refs[`monitor`+this.boxIndex].initVideo(node.data.devCode);
this.boxIndex=this.boxIndex+1;
}
if(this.boxIndex==1){
this.$refs[`monitor`+1].closeVideo()
this.$refs[`monitor`+1].initVideo(node.data.devCode);
this.boxIndex=this.boxIndex+1;
}
}
}
},
//
upMonitor(){
console.log('up')
this.$refs[`monitor`+this.boxIndex].control(1);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(0);
},2000)
},
//
downMonitor(){
console.log('down')
this.$refs[`monitor`+this.boxIndex].control(2);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(0);
},2000)
},
//
leftMonitor(){
console.log('left')
console.log(this.boxIndex)
this.$refs[`monitor`+this.boxIndex].control(3);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(0);
},2000)
},
//
rightMonitor(){
console.log('right')
console.log(this.boxIndex)
this.$refs[`monitor`+this.boxIndex].control(4);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(0);
},2000)
},
//
bigMonitor(){
console.log('big')
this.$refs[`monitor`+this.boxIndex].control(5);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(9);
},2000)
},
//
smallMonitor(){
console.log('small')
this.$refs[`monitor`+this.boxIndex].control(6);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(9);
},2000)
},
//
nearMonitor(){
console.log('near')
this.$refs[`monitor`+this.boxIndex].control(7);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(10);
},2000)
},
//
farawayMonitor(){
console.log('small')
this.$refs[`monitor`+this.boxIndex].control(8);
setTimeout(()=>{
this.$refs[`monitor`+this.boxIndex].control(10);
},2000)
},
//
loadVioInfos(newIndex, oldIndex) {
this.loadPhotosById(newIndex);
@ -288,12 +393,18 @@ export default {
//
changePlayVideo(type) {
this.boxNum = type;
this.boxIndex=1;
if (type == 1) {
this.classStyle = 'ball-content'
} else {
this.classStyle = 'ball-content-4'
}
},
checkPlayWindow(index){
this.boxIndex=index;
console.log(this.boxIndex)
},
//treeicon
renderContent(h, { node, data }) {
// 使
@ -533,17 +644,15 @@ export default {
.ball-content {
width: 100%;
height: 100%;
pointer-events: none;
object-fit: fill;
}
.ball-content-4 {
width: 49.5%;
height: 49%;
pointer-events: none;
object-fit: fill;
}
.border1{
border:5px solid #1890ff;
}
.vio-box {
width: 100%;
height: 200px;

View File

@ -35,6 +35,10 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
<<<<<<< HEAD
// target: `http://127.0.0.1:18080/ljzhgd/`,
=======
>>>>>>> 54d250bd762b286805ca4150c632ab2973b49202
target: `http://192.168.0.14:21900/ljzhgd/`,
changeOrigin: true,
pathRewrite: {