This commit is contained in:
曹前明 2022-10-20 09:33:08 +08:00
commit 3d7e0d2b1d
2 changed files with 222 additions and 86 deletions

View File

@ -5,21 +5,23 @@
<el-button type="primary" icon="el-icon-refresh" @click="syncData" :loading="syncLoading">同步</el-button>
</div>
<div class="right-panel">
<!-- <el-input
v-model="query.channelCode"
placeholder="编号"
clearable
@click="handleQuery"
></el-input>
<el-select v-model="areaId" placeholder="选择区域">
<el-option
v-for="item in areaoptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button> -->
></el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" :params="apiParams" :pageStr="pageStr"
<scTable ref="table" :apiObj="apiObj" row-key="id" :params="apiParams" :pageStr="pageStr" :data="pageData"
:pageSizeStr="pageSizeStr" :orderStr="orderStr" :parseData="parseData" @selection-change="selectionChange"
stripe @resetQuery="resetQuery">
<el-table-column label="序号" type="index" width="50"></el-table-column>
@ -132,9 +134,12 @@ export default {
},
code: "video_realtime",
},
areaId:'',
channelCode: '',
channelId: '',
channelArea: '',
pageData:[],
areaoptions: [],
channelAreas: [],
channelLocation: {},
flvPlayer: null,
@ -150,8 +155,21 @@ export default {
scriptInfo.setAttribute("data-callType", "callScript");
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
document.head.appendChild(scriptInfo);
this.getAllVchannel();
},
mounted(){
this.getArea();
},
methods: {
getAllVchannel(){
debugger;
this.$API.am.video.list.req({pageSize:999}).then(res=>{
debugger;
console.log(res)
let allVchannel = JSON.stringify(res.pageData);
localStorage.setItem('allVchannel',allVchannel)
})
},
handleView(row) {
let that = this;
that.channelCode = row.channelCode;
@ -174,9 +192,15 @@ export default {
},
viewClose() {
this.limitedVisible = false;
},
//
getArea() {
this.$API.am.area.list.req({ page: 0 }).then((res) => {
this.areaoptions = res;
});
},
handlePosition(row) {
debugger;
// debugger;
console.log(row)
if(row.my_info.id&&row.my_info.id!==null){
this.channelId = row.my_info.id ? row.my_info.id : null;
@ -196,7 +220,24 @@ export default {
},
//
handleQuery() { this.$refs.table.refresh(); },
handleQuery() {
debugger;
let that = this;
let vchannel = localStorage.getItem('allVchannel');
console.log(vchannel)
let allVchannel = JSON.parse(vchannel);
debugger;
console.log(allVchannel)
console.log(that.areaId)
that.pageData = allVchannel.filter(item=>{
if(item.my_info.area == that.areaId){
debugger;
}
return item.my_info.area == that.areaId;
})
// console.log(localStorage.getItem('allVchannel'))
},
resetQuery() {
this.query = {};

View File

@ -40,14 +40,14 @@
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[5] }"></span>
<span class="box-text">人员</span>
</div>
<div class="caret-dropdown">
<!-- <div class="caret-dropdown">
<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
<ArrowUpBold />
</el-icon>
<el-icon @click="userSelect" v-else :size="14">
<ArrowDownBold />
</el-icon>
</div>
</div> -->
</div>
<div class="drop-content" v-if="showUserSelect">
<el-tree
@ -73,12 +73,13 @@
</div>
<!--搜索-->
<div class="screen-search">
<div class="search-content"><input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" class="input-focus"><span
class="close-btn el-icon-circle-close" style="display: none;"></span>
<div class="search"></div>
<div class="auto-suggestion" style="display: none;">
<div class="search-content">
<input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" v-model="searchKeyWord" class="input-focus">
<span class="close-btn el-icon-circle-close" style="display: none;"></span>
<div class="search" @click="searchOne(searchKeyWord)"></div>
<!-- <div class="auto-suggestion" style="display: none;">
<div class="suggestion-select-ul"></div>
</div>
</div> -->
</div>
</div>
</div>
@ -145,11 +146,17 @@
</div>
</div>
<div class="alarm-content">
<div class="content-left">
<div style="display:flex">
<div class="alarm-danger"></div>
<div id="eventScrenWrap" style="height:50px;width: calc(100% - 50px);overflow:hidden;padding-left: 20px;position: relative;">
<div id="eventScrenItem" style="line-height: 50px;font-size: 20px;color: cyan;position: absolute;">
<div v-for="(item1,index1) in warningData.list" :key="item1.id">
<text v-if="index1<3">{{item1.voice_msg}}</text>
</div>
</div>
</div>
</div>
<div class="content-right">
<!--alarm-item-safe-->
<div v-for="item in wStatistics.details" :key="item.cate" class="alarm-item alarm-item-danger">
<span class="item-icon"></span>
<span class="item-name">{{ item.cate__name }}</span>
@ -230,16 +237,6 @@
<el-table-column label="区域" prop="name"></el-table-column>
<el-table-column label="当前人数" prop="count_people"></el-table-column>
</el-table>
<!--<el-tree
ref="group"
id="bigScreenTree"
node-key="id"
:data="group"
:current-node-key="''"
:highlight-current="true"
:expand-on-click-node="false"
@node-click="groupClick"
></el-tree>-->
</div>
<div class="alarm-detail-info left_arrow" v-if="areaDetail" style="width:150%">
<div class="simple-title">
@ -671,10 +668,10 @@
</div>
</div>
</div>
<!--警告详情-->
<!--事件详情-->
<div class="screen-risk" v-if="screenWarning">
<div class="simple-title">
<div>警报信息</div>
<div>事件信息</div>
<div class="simple-btn" @click="closeScreenWarning">关闭</div>
</div>
<div class="risk-content">
@ -685,7 +682,7 @@
</div>
</div>
<div class="simple-title">
<div>警告详情</div>
<div>事件详情</div>
</div>
<div class="risk-content">
<div class="risk-basic">
@ -717,8 +714,11 @@
</div>
<div class="risk-item" v-if="screenWarningItem.global_img!=null">
<span class="risk-item-name">事件截图</span>
<img :src="screenWarningItem.global_img" style="width: 250px;">
<img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;">
<sc-upload v-model="screenWarningItem.global_img" title="全景照" style="width: 250px;"></sc-upload>
<sc-upload v-if="screenWarningItem.face_img!=null" v-model="screenWarningItem.face_img" title="人脸照" style="width: 250px;"></sc-upload>
<!-- <img :src="screenWarningItem.global_img" style="width: 250px;"> -->
<!-- <img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;"> -->
</div>
</div>
</div>
@ -763,6 +763,7 @@ export default {
timerUser: null,
timerTime: null,
eventTimer:null,
timerEventRoll:null,
eventAudioTimer:null,
trackMarker:null,
domMarkerLayer: null,
@ -797,6 +798,7 @@ export default {
warningDetail: false,
filterCtrlFocus: true,
warningListTotal: 0,
heightNum:0,
warningData: {
list: [],
total: 0,
@ -818,6 +820,7 @@ export default {
warningList: [],//
speakerList: [],//
userList: [],//
allUserList:[],
deptList: [],//
postList: [
{id:0,name:'全部',label:'全部'},
@ -893,6 +896,7 @@ export default {
audioIndex:0,
audioList:{},
employeeScroll:0,
searchKeyWord:'',
}
},
@ -1087,7 +1091,8 @@ export default {
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
let domHeight = pageHeight - height1 - height2 - 84;
debugger;
let domHeight = pageHeight - height1 - 310 - 84;
let areaTableHeight = domHeight - height3 - 50;
this.areaTableHeight = areaTableHeight;
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
@ -1104,43 +1109,71 @@ export default {
this.timerUser = null;
this.timerTime = null;
this.eventTimer = null;
this.timerEventRoll = null;
this.eventAudioTimer = null;
// window.map.destroy();
clearInterval(this.timerUser)//
clearInterval(this.timerTime)//
clearInterval(this.eventTimer)//
clearInterval(this.timerEventRoll)//
clearInterval(this.eventAudioTimer)//
},
methods: {
searchOne(keyword){
let that = this;
that.markList[5] = true;
that.userMaskerLayer.show = true;
clearInterval(that.timerUser);
that.timerUser = setInterval(function () {
that.refreshUserMarker();
}, 10000)
that.userList.filter(item=>{
if(item.my_info.employee_.name == keyword||item.mac ==keyword){
that.screenUserItem = item.my_info.employee_;
that.screenUserItem.mac = item.mac;
that.screenUser = true;
window.map.flyToMarker(that.userMarker[item.mac], {
duration: 1000,
range: 200
})
}
})
},
handleChange(item, check,item2,item3) {
// debugger;
// let that = this;
// console.log(item);
// console.log(check);
// console.log(item2);
// console.log(item3);
let that = this;
debugger;
console.log(check)
this.deptChecked = check.checkedKeys;
this.userParams.depts = check.checkedKeys;
let obj = {};
obj.depts = check.checkedKeys;
that.$API.third.blt.all.req(obj).then(res => {
debugger;
console.log('selectedUser:'+res)
})
this.refreshUserMarker();
// that.userMaskerLayer.removeAllIconTextMark();
// this.refreshUserMarker();
},
//
userFilter() {
let that = this;
let checkedKeys = that.deptChecked;
window.map.removeLayer(that.userMaskerLayer);
that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: true
});
window.map.addLayer(that.userMaskerLayer);
let userListNew = [];
that.userList.filter(item=>{
debugger;
console.log(item);
if(checkedKeys.indexOf(item.my_info.employee_.belong_dept_)>-1){
debugger;
userListNew.push(item)
}
})
debugger;
that.userList = userListNew;
console.log(that.userList)
that.showUserMarkers(userListNew);
this.showUserSelect = false;
this.screenUser = true;
// that.screenUserItem.name = this.userList[0].my_info.employee_.name;
// that.screenUserItem.type = this.userList[0].my_info.employee_.type;
// that.screenUserItem.id = this.userList[0].my_info.employee_.id;
// that.screenUserItem.photo = this.userList[0].my_info.employee_.photo ? this.userList[0].my_info.employee_.photo : '';
// that.screenUserItem.post_name = this.userList[0].my_info.employee_.post_name ? this.userList[0].my_info.employee_.post_name : '';
// that.screenUserItem.belong_dept_name = this.userList[0].my_info.employee_.belong_dept_name ? this.userList[0].my_info.employee_.belong_dept_name : '';
// this.screenUser = true;
},
audioFinished(){
if(this.audioIndex<this.audioList.length){
@ -1168,6 +1201,7 @@ export default {
}else if(index==4){
//
this.getAreaBlt();
this.getAreaList();
}
},
//
@ -1197,22 +1231,13 @@ export default {
that.$API.ecm.event.list.req({page_size:1}).then(res => {
if (res.err_msg) {
} else {
// debugger;
// console.log('00000000000000');
// console.log(res.results[0].id);
// console.log(that.audioList.id);
let judge = res.results[0].id==that.audioList.id
// console.log(judge);
// console.log('11111111111111');
let item = res.results[0];
if(that.audioSrc!==''){
if(item.id==that.audioList.id){
// that.music.pause(); //
}else{
// debugger;
that.audioList = item;
that.audioSrc=item.voice_f;
// that.music.play();//
if(item.location){
window.map.flyToPosition(new jsmap.JSPoint(item.location.longitude, item.location.latitude), { range: 200,duration: 1000 });
}
@ -1242,17 +1267,36 @@ export default {
},
//
getWarnings() {
let that = this;
this.$API.ecm.event.list.req(this.warningData.params).then(res => {
if (res.err_msg) {
} else {
this.warningData.list = res.results;
this.warningData.total = res.count;
that.warningData.list = res.results;
that.warningData.total = res.count;
that.eventInterval();
}
})
},
eventInterval(){
let that = this;
if (that.timerEventRoll) {
clearInterval(that.timerEventRoll);
that.timerEventRoll = null;
}
that.timerEventRoll = setInterval(function () {
that.heightNum+=1;
if(that.heightNum>250){
that.heightNum=0;
document.getElementById('eventScrenItem').style.top = 0;
}else{
let top = -that.heightNum;
document.getElementById('eventScrenItem').style.top = top+'px';
}
}, 100)
},
//
warningTypeSelected(id,name) {
// debugger;
let that = this;
this.warningTypeShow = false;
let params = new Object();
@ -1267,17 +1311,29 @@ export default {
that.warningData.total = res.count;
}
})
//
},
//
areaRowClick(data) {
let that = this;
that.areaDetail = true;
debugger;
console.log(data)
that.areaDetailId = data.id;
this.getAreaOperation();
let points = data.third_info.xx_rail.detail.polygon.points[0];
window.map.flyToPosition(new jsmap.JSPoint(points.x, points.y, points.z), { range: 200,duration: 1000 });
window.map.flyToPosition(new jsmap.JSPoint(points.x, points.y, points.z),
{ duration:1000,
offset:{
rotate: 45,
tilt: 60,
range: 300
}
});
// this.getAreaList();
this.getAreaOperation();
this.getAreaVchannel();
this.getAreaSpeaker();
this.getAreaBlt();
},
//
getAreaOperation(){
@ -1322,7 +1378,6 @@ export default {
let rpartsList=[];
let arr = [];
let children = genTree(res);
debugger;
console.log(children)
for (let i = 0; i < 5; i++) {
let obj = new Object();
@ -1443,6 +1498,7 @@ export default {
that.userList = res.filter(item => {
return item.my_info.employee
});
that.allUserList = that.userList;
that.showUserMarkers(that.userList);
}
})
@ -1686,6 +1742,7 @@ export default {
},
//
showUserMarkers(userList) {
debugger;
let that = this;
//
let userImage = '';
@ -1743,10 +1800,15 @@ export default {
that.userMaskerLayer.addMarker(that.userMarker[item.mac]);
})
}
clearInterval(that.timerUser);
that.timerUser = setInterval(function () {
that.refreshUserMarker();
}, 10000)
// if(that.markList[5]){
// clearInterval(that.timerUser);
// that.timerUser = setInterval(function () {
// that.refreshUserMarker();
// }, 10000)
// }else{
// clearInterval(that.timerUser);
// }
},
//
refreshUserMarker() {
@ -1764,7 +1826,7 @@ export default {
let addUser = that.func(userList, that.userList)[0];
let refreshList = that.func(userList, that.userList)[1];
let subUser = that.func(that.userList, userList)[0];
that.userList = refreshList.concat(addUser);//userList
that.allUserList = that.userList = refreshList.concat(addUser);//userList
subUser.forEach(subUserItem=>{
that.userMaskerLayer.removeMarker(that.userMarker[subUserItem.mac]);//线
})
@ -1957,8 +2019,14 @@ export default {
}
if (that.markList[5]) {
that.userMaskerLayer.show = true;
clearInterval(that.timerUser);
that.timerUser = setInterval(function () {
that.refreshUserMarker();
}, 10000)
} else {
that.userMaskerLayer.show = false;
clearInterval(that.timerUser);
that.timerUser = null;
}
},
@ -2197,6 +2265,29 @@ export default {
this.music.play();//
},
},
beforeRouteLeave(to, from, next){
next();
if (this.timerUser) {
clearInterval(this.timerUser);
this.timerUser = null;
}
if (this.timerTime) {
clearInterval(this.timerTime);
this.timerTime = null;
}
if (this.eventTimer) {
clearInterval(this.eventTimer);
this.eventTimer = null;
}
if (this.timerEventRoll) {
clearInterval(this.timerEventRoll);
this.timerEventRoll = null;
}
if (this.eventAudioTimer) {
clearInterval(this.eventAudioTimer);
this.eventAudioTimer = null;
}
},
unmounted() {
// window.map.destroy();
window.map = null;
@ -3040,27 +3131,31 @@ export default {
}
.alarm-content {
display: flex;
// display: flex;
justify-content: space-between;
height: calc(100% - 50px);
.alarm-danger {
width: 50px;
height: 50px;
background: url(/public/img/a_danger.png) no-repeat;
background-size: 100% 100%;
}
.content-left {
width: 160px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.alarm-danger {
width: 150px;
height: 150px;
width: 50px;
height: 50px;
background: url(/public/img/a_danger.png) no-repeat;
background-size: 100% 100%;
}
}
.content-right {
width: calc(100% - 130px);
width: 100%;
overflow: hidden;
height: fit-content;
@ -3726,8 +3821,8 @@ export default {
.el-dialog__headerbtn {
position: absolute;
top: 20px;
right: 20px;
top: 0;
right: 0;
padding: 0;
background: 0 0;
border: none;