Skip to content

platform / fanxing_new

Go to a project
Commit b7b9eada by 潘建波
Options

提交视频播放

1 parent df80f342
Expand all
Inline Side-by-side
Showing 8 changed files with 1016 additions and 833 deletions
src/api/baseUrl.js
...@@ -3,7 +3,7 @@ import axios from "axios"; ...@@ -3,7 +3,7 @@ import axios from "axios";
console.log(process.env.NODE_ENV); console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case "development": case "development":
baseUrl = "http://192.168.9.133:20080"; // 测试环境url baseUrl = "http://vion-panda.51vip.biz:52510"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086"; // baseUrl = "http://192.168.9.61:8086";
break; break;
case "pre": case "pre":
......
src/views/behaviorShow/alarmEvent.vue
...@@ -2,12 +2,30 @@ ...@@ -2,12 +2,30 @@
<div> <div>
<el-table :data="tableData"> <el-table :data="tableData">
<el-table-column type="index" align="center" label="#"></el-table-column> <el-table-column type="index" align="center" label="#"></el-table-column>
<el-table-column align="center" prop="eventType" label="事件地点" :formatter="eventFormatter"></el-table-column> <el-table-column
<el-table-column align="center" prop="locationName" label="抓拍类型"></el-table-column> align="center"
<el-table-column align="center" prop="startDt" label="发生时间"></el-table-column> prop="eventType"
label="事件地点"
:formatter="eventFormatter"
></el-table-column>
<el-table-column
align="center"
prop="locationName"
label="抓拍类型"
></el-table-column>
<el-table-column
align="center"
prop="startDt"
label="发生时间"
></el-table-column>
<el-table-column align="center" prop="operation" label="操作"> <el-table-column align="center" prop="operation" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip content="详情及审核" placement="bottom" effect="light" :visible-arrow="false"> <el-tooltip
content="详情及审核"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<img <img
src="../../assets/img/home/look.png" src="../../assets/img/home/look.png"
alt alt
...@@ -16,7 +34,12 @@ ...@@ -16,7 +34,12 @@
/> />
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow="false"> <el-tooltip
content="删除"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<img <img
src="../../assets/img/home/del.png" src="../../assets/img/home/del.png"
alt alt
...@@ -34,91 +57,104 @@ ...@@ -34,91 +57,104 @@
export default { export default {
data() { data() {
return { return {
tableData:[] tableData: []
} };
}, },
methods:{ methods: {
delFun(index, rows) { delFun(index, rows) {
rows.splice(index, 1); rows.splice(index, 1);
}, },
eventFormatter(row, column, cellValue, index){ eventFormatter(row, column, cellValue, index) {
let value='' let value = "";
this.eventTypeList.forEach(item=>{ this.eventTypeList.forEach(item => {
if(item.code==cellValue){ if (item.code == cellValue) {
value=item.name; value = item.name;
} }
}) });
return value; return value;
}, }
}, },
beforeMount(){ beforeMount() {
let that = this; try {
this.connect_id = new Date().getTime() let that = this;
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id) this.connect_id = new Date().getTime();
this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`) // this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket(
`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`
);
this.cws.onopen = () =>{ this.cws.onopen = () => {
console.log('ws事件推送服务连接成功') console.log("ws事件推送服务连接成功");
} };
//事件断开 //事件断开
this.cws.onclose = () =>{ this.cws.onclose = () => {
window.clearTimeout(that.keepAlive) window.clearTimeout(that.keepAlive);
console.log('ws事件推送服务断开') console.log("ws事件推送服务断开");
that.connect_id = new Date().getTime() that.connect_id = new Date().getTime();
that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`) that.cws = new WebSocket(
`ws://${this.$api.wsIP}/websocket/api/v1/integrated/connects/${this.connect_id}`
);
that.keepAlive = setInterval(() => { that.keepAlive = setInterval(() => {
let message = { let message = {
type: 'request', type: "request",
id: new Date().getTime(), id: new Date().getTime(),
mts: new Date().getTime(), mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive' command:
} "get /websocket/v1/recv_data/connects/" +
this.cws.send(JSON.stringify(message)) this.connect_id +
"/keep_alive"
};
this.cws.send(JSON.stringify(message));
}, 20000); }, 20000);
} };
//事件推送信息 //事件推送信息
this.cws.onmessage = (evt) =>{ this.cws.onmessage = evt => {
let data = JSON.parse(evt.data) let data = JSON.parse(evt.data);
try { try {
if(data.event_cate == 'behavior'){ if (data.event_cate == "behavior") {
let illame = this.getCode('安防事件',data.event_type); let illame = this.getCode("安防事件", data.event_type);
let camername = data.event_data.device?data.event_data.device.name:'' let camername = data.event_data.device
let addressname = data.event_data.location?data.event_data.location.name:'' ? data.event_data.device.name
let dt = this.showLocalTime(data.event_dt).split(' ')[1]; : "";
let pics = 'data:image/jpeg;base64,'+data.pics[0].pic_base64 let addressname = data.event_data.location
let obj = { ? data.event_data.location.name
illame:illame, : "";
illdt:dt, let dt = this.showLocalTime(data.event_dt).split(" ")[1];
addressname:addressname, let pics = "data:image/jpeg;base64," + data.pics[0].pic_base64;
camername:camername, let obj = {
pics:pics illame: illame,
} illdt: dt,
that.tableData.unshift(obj) addressname: addressname,
} camername: camername,
pics: pics
} catch (error) { };
that.tableData.unshift(obj);
} }
} catch (error) {}
if(data.command){ if (data.command) {
console.log('推送服务连接正常') console.log("推送服务连接正常");
} else if(data.type =='response'){ } else if (data.type == "response") {
console.log('请求任务推送成功') console.log("请求任务推送成功");
} }
};
}
this.keepAlive = setInterval(() => { this.keepAlive = setInterval(() => {
let message = { let message = {
type: 'request', type: "request",
id: new Date().getTime(), id: new Date().getTime(),
mts: new Date().getTime(), mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive' command:
} "get /websocket/v1/recv_data/connects/" +
this.cws.send(JSON.stringify(message)) this.connect_id +
}, 50000); "/keep_alive"
};
this.cws.send(JSON.stringify(message));
}, 50000);
} catch (err) {
console.log(err);
}
} }
}; };
</script> </script>
<style>
</style>>
\ No newline at end of file \ No newline at end of file
<style></style>>
src/views/behaviorShow/index.vue
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
:gutter="10" :gutter="10"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
> >
<el-col :span="13"> <el-col :span="15">
<div id="map" class="maps"> <div id="map" class="maps">
<showmap></showmap> <showmap></showmap>
<div class="eventlist-box"> <div class="eventlist-box">
<devInfo></devInfo> <devInfo></devInfo>
</div> </div>
<div class="video-box">
<videoPlay ref="ocx"></videoPlay>
</div>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="9">
<div class="video-box"> <el-row class="collect-box">
<videoPlay ref="ocx"></videoPlay>
</div>
<div class="collect-box">
<div class="header-title">今日抓拍量</div> <div class="header-title">今日抓拍量</div>
<div class="collect-content"> <div class="collect-content">
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
...@@ -36,28 +36,24 @@ ...@@ -36,28 +36,24 @@
<div>本月单项总量</div> <div>本月单项总量</div>
</el-col> </el-col>
</div> </div>
</div>
<div style="clear: both;"></div>
</el-col>
<el-col :span="24" class="clearpright">
<el-row :gutter="10" class="bottom-box">
<el-col :span="8">
<div class="bottom-item-box">
<behaviortrend></behaviortrend>
</div>
</el-col>
<el-col :span="5">
<div class="bottom-item-box">
<behaviordis></behaviordis>
</div>
</el-col>
<el-col :span="11" class="clearpright">
<div class="bottom-item-box">
<div class="title">实时事件</div>
<alarmEvent></alarmEvent>
</div>
</el-col>
</el-row> </el-row>
<el-row class="bottom-box" style="margin-top:1vh">
<div class="bottom-item-box">
<behaviortrend></behaviortrend>
</div>
</el-row>
<el-row style="margin-top:1vh">
<div class="bottom-item-box">
<behaviordis></behaviordis>
</div>
</el-row>
<el-row style="margin-top:1vh">
<div class="bottom-item-box">
<div class="title">实时事件</div>
<alarmEvent></alarmEvent>
</div>
</el-row>
<div style="clear: both;"></div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
...@@ -125,197 +121,245 @@ export default { ...@@ -125,197 +121,245 @@ export default {
</script> </script>
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
.video-box{ .video-box {
height: 46.5vh; height: 46.5vh;
margin-bottom: 1vh; margin-bottom: 1vh;
background: #444444; background: #444444;
} }
.collect-box{
height 11.8vh .collect-box {
background #fff height: 11.8vh;
.header-title{ background: #fff;
padding 10px 0px 0 20px
} .header-title {
.collect-content{ padding: 10px 0px 0 20px;
margin-top 1.6vh }
.content-item{
text-align center .collect-content {
border-right 1px solid #E5E5E5 margin-top: 1.6vh;
}
.content-item:last-child{ .content-item {
border-right 0 text-align: center;
} border-right: 1px solid #E5E5E5;
} }
.item-num{
font-size 16px .content-item:last-child {
color #444444 border-right: 0;
} }
} }
.left-box{
} .item-num {
.infoBox{ font-size: 16px;
margin-bottom: 1vh; color: #444444;
} }
.infoChild{ }
height: 8.5vh;
display: inline-block; .left-box {
} }
.info-item-box{
height 100% .infoBox {
background: #FFFFFF; margin-bottom: 1vh;
} }
.infoChild:nth-child(1) img{
width: 27px; .infoChild {
height: 27px; height: 8.5vh;
margin: 22px 20px 21px 40px; display: inline-block;
} }
.infoChild:nth-child(2) img{
width: 30px; .info-item-box {
height: 27px; height: 100%;
margin: 22px 22px 21px 37px; background: #FFFFFF;
} }
.infoChild:nth-child(3) img{
width: 28px; .infoChild:nth-child(1) img {
height: 28px; width: 27px;
margin: 22px 22px 20px 34px; height: 27px;
} margin: 22px 20px 21px 40px;
.infoChild:nth-child(4) img{ }
width: 27px;
height: 28px; .infoChild:nth-child(2) img {
margin: 22px 22px 20px 34px; width: 30px;
} height: 27px;
.textCon{ margin: 22px 22px 21px 37px;
display: inline-block; }
vertical-align: top;
font-size: 12px; .infoChild:nth-child(3) img {
color: #666666; width: 28px;
margin-top: 14px; height: 28px;
} margin: 22px 22px 20px 34px;
.textCon span{ }
font-size: 20px;
margin-right: 2px; .infoChild:nth-child(4) img {
} width: 27px;
.colorText{ height: 28px;
margin-top: 6px; margin: 22px 22px 20px 34px;
color: #444444; }
}
.ol-control button{ .textCon {
display:none!important; display: inline-block;
background:red!important vertical-align: top;
} font-size: 12px;
color: #666666;
.pop-info{ margin-top: 14px;
float: left; }
padding-left: 20px;
width :100px .textCon span {
} font-size: 20px;
margin-right: 2px;
.numBox{ }
width: 307px;
height: 125px; .colorText {
background: #FFFFFF; margin-top: 6px;
color: #444444; color: #444444;
position: relative; }
}
.numBox:nth-child(1){ .ol-control button {
margin-bottom: 6px; display: none !important;
} background: red !important;
.num{ }
font-size: 30px;
margin: 27px 0 0 13px; .pop-info {
display: inline-block; float: left;
font-weight:bold; padding-left: 20px;
} width: 100px;
.catch{ }
width: 57px;
position: absolute; .numBox {
top:59px; width: 307px;
right: 16px; height: 125px;
} background: #FFFFFF;
.backSea{ color: #444444;
width: 100%; position: relative;
position: absolute; }
bottom: 0;
left: 0; .numBox:nth-child(1) {
} margin-bottom: 6px;
}
.ltext{ .num {
width: 71px; font-size: 30px;
height: 100%; margin: 27px 0 0 13px;
border-right:1px solid #E5E5E5; display: inline-block;
} font-weight: bold;
.lnum{ }
width: 37px;
} .catch {
.maps{ width: 57px;
height: 59.5vh; position: absolute;
width:100%; top: 59px;
margin-bottom: 8px; right: 16px;
position: relative; }
}
.backSea {
.el-table__body tr{ width: 100%;
background: #FFFFFF!important; position: absolute;
} bottom: 0;
.bottom-box{ left: 0;
width: 100%; }
height: 26.5vh;
overflow: hidden; .ltext {
} width: 71px;
.bottom-item-box { height: 100%;
height: 27vh; border-right: 1px solid #E5E5E5;
background: #fff; }
overflow: hidden;
} .lnum {
.bottom-item-box .title{ width: 37px;
padding-left: 5px; }
line-height 3vh
} .maps {
.car-dis-info{ height: 59.5vh;
display flex width: 100%;
flex-direction row margin-bottom: 8px;
margin 1vh .3vw position: relative;
.left-icon { }
width 3vw
height 6vh .el-table__body tr {
line-height 6vh background: #FFFFFF !important;
text-align center }
span{
font-size 30px .bottom-box {
} width: 100%;
} height: 26.5vh;
} overflow: hidden;
.car-dis-info:nth-child(2){ }
.left-icon {
span{ .bottom-item-box {
color #FF9630 height: 27vh;
} background: #fff;
} overflow: hidden;
} }
.car-dis-info:nth-child(3){
.left-icon { .bottom-item-box .title {
span{ padding-left: 5px;
color #F56C6C line-height: 3vh;
} }
}
} .car-dis-info {
.car-dis-info:nth-child(4){ display: flex;
.left-icon { flex-direction: row;
span{ margin: 1vh 0.3vw;
color #36BEA6
} .left-icon {
} width: 3vw;
} height: 6vh;
.car-num{ line-height: 6vh;
font-size 22px text-align: center;
font-weight 600
padding-right 5px span {
} font-size: 30px;
.eventlist-box{ }
position absolute }
left 10px }
top 10px
z-index 1000 .car-dis-info:nth-child(2) {
.left-icon {
span {
color: #FF9630;
}
}
}
.car-dis-info:nth-child(3) {
.left-icon {
span {
color: #F56C6C;
}
}
}
.car-dis-info:nth-child(4) {
.left-icon {
span {
color: #36BEA6;
}
}
}
.car-num {
font-size: 22px;
font-weight: 600;
padding-right: 5px;
}
.eventlist-box {
position: absolute;
left: 10px;
top: 10px;
z-index: 1000;
}
.video-box {
position: absolute;
height: 46.5vh;
width: 30vw;
margin-bottom: 1vh;
background: #444444;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 1000;
} }
</style> </style>
src/views/sceneManage/setting/ytconfig.vue
...@@ -2,53 +2,61 @@ ...@@ -2,53 +2,61 @@
<div class="control-box" v-show="showyt"> <div class="control-box" v-show="showyt">
<div class="control-let-box"> <div class="control-let-box">
<div> <div>
<span @mousedown="Ytontroller('36')" @mouseup="stopYtontroller('36')" class="control-btn el-icon-top-left"></span> <span
<span @mousedown="Ytontroller('38')" @mouseup="stopYtontroller('38')" class="control-btn el-icon-top"></span> @mousedown="Ytontroller('36')"
<span @mousedown="Ytontroller('33')" @mouseup="stopYtontroller('33')" class="control-btn el-icon-top-right"></span> @mouseup="stopYtontroller('36')"
class="control-btn el-icon-top-left"
></span>
<span
@mousedown="Ytontroller('38')"
@mouseup="stopYtontroller('38')"
class="control-btn el-icon-top"
></span>
<span
@mousedown="Ytontroller('33')"
@mouseup="stopYtontroller('33')"
class="control-btn el-icon-top-right"
></span>
</div> </div>
<div> <div>
<span @mousedown="Ytontroller('37')" @mouseup="stopYtontroller('37')" class="control-btn el-icon-back"></span> <span
<span @mousedown="Ytontroller('12')" @mouseup="stopYtontroller('12')" class="control-btn el-icon-refresh"></span> @mousedown="Ytontroller('37')"
<span @mousedown="Ytontroller('39')" @mouseup="stopYtontroller('39')" class="control-btn el-icon-right"></span> @mouseup="stopYtontroller('37')"
class="control-btn el-icon-back"
></span>
<span
@mousedown="Ytontroller('12')"
@mouseup="stopYtontroller('12')"
class="control-btn el-icon-refresh"
></span>
<span
@mousedown="Ytontroller('39')"
@mouseup="stopYtontroller('39')"
class="control-btn el-icon-right"
></span>
</div> </div>
<div> <div>
<span class="control-btn el-icon-bottom-left"></span> <span class="control-btn el-icon-bottom-left"></span>
<span class="control-btn el-icon-bottom"></span> <span class="control-btn el-icon-bottom"></span>
<span class="control-btn el-icon-bottom-right"></span> <span class="control-btn el-icon-bottom-right"></span>
</div> </div>
</div> </div>
<div class="control-right-box"> <div class="control-right-box">
<div class="slider-box"> <div class="slider-box">
<span class="title">光圈</span> <span class="title">光圈</span>
<el-slider <el-slider class="slider-item" v-model="value" show-input></el-slider>
class="slider-item"
v-model="value"
show-input>
</el-slider>
</div> </div>
<div class="slider-box"> <div class="slider-box">
<span class="title">光倍</span> <span class="title">光倍</span>
<el-slider <el-slider class="slider-item" v-model="value" show-input></el-slider>
class="slider-item"
v-model="value"
show-input>
</el-slider>
</div> </div>
<div class="slider-box"> <div class="slider-box">
<span class="title">焦距</span> <span class="title">焦距</span>
<el-slider <el-slider class="slider-item" v-model="value" show-input></el-slider>
class="slider-item"
v-model="value"
show-input>
</el-slider>
</div> </div>
<div class="slider-box"> <div class="slider-box">
<span class="title">速度</span> <span class="title">速度</span>
<el-slider <el-slider class="slider-item" v-model="value" show-input></el-slider>
class="slider-item"
v-model="value"
show-input>
</el-slider>
</div> </div>
<div class="right-bottom-box"> <div class="right-bottom-box">
<div class="setyzw item-box"> <div class="setyzw item-box">
...@@ -66,30 +74,36 @@ ...@@ -66,30 +74,36 @@
</template> </template>
<script> <script>
import {StopControlCamera,controlDevice,getControlParam,setCameraSpeed,connectCamera} from '../../../assets/js/YtContronByVionVideo.js'; import {
import {CameraController} from '../../../assets/js/positionOperateByVido.js'; StopControlCamera,
controlDevice,
getControlParam,
setCameraSpeed,
connectCamera
} from "../../../assets/js/YtContronByVionVideo.js";
import { CameraController } from "../../../assets/js/positionOperateByVido.js";
const optionController = new CameraController(); const optionController = new CameraController();
export default { export default {
data() { data() {
return { return {
showyt:false, showyt: false,
value:'' value: ""
} };
}, },
methods:{ methods: {
openyt(){ openyt() {
this.showyt = true this.showyt = true;
}, },
closeyt(){ closeyt() {
this.showyt = false this.showyt = false;
}, },
/** /**
* 控制云台 * 控制云台
* @param {code} * @param {code}
*/ */
Ytontroller(code){ Ytontroller(code) {
var param = getControlParam(code); var param = getControlParam(code);
setCameraSpeed(this.ballspeed) setCameraSpeed(this.ballspeed);
// VionVideo.PtzSendCmd(param, pvalue, ""); // VionVideo.PtzSendCmd(param, pvalue, "");
controlDevice(param); controlDevice(param);
}, },
...@@ -97,88 +111,98 @@ export default { ...@@ -97,88 +111,98 @@ export default {
* 停止云台控制 * 停止云台控制
* @param {code} * @param {code}
*/ */
stopYtontroller(code){ stopYtontroller(code) {
StopControlCamera() StopControlCamera();
}, },
subset(){ subset() {
let mtasks = this.allMask.mtasks; let mtasks = this.allMask.mtasks;
this.allMask.mtasks.forEach(ele => { this.allMask.mtasks.forEach(ele => {
ele.scenes[this.curindex].algo_type = this.algo_type ele.scenes[this.curindex].algo_type = this.algo_type;
ele.scenes[this.curindex].position_name = this.position_name ele.scenes[this.curindex].position_name = this.position_name;
ele.scenes[this.curindex].position_num = this.position_num ele.scenes[this.curindex].position_num = this.position_num;
}); });
let reqObj = { let reqObj = {
subtask_id: this.curentSubTaskId, subtask_id: this.curentSubTaskId,
mtasks:this.allMask.mtasks, mtasks: this.allMask.mtasks
} };
this.$api.task.editRoi(this.curentTaskId,this.curentSubTaskId,reqObj).then(res => { this.$api.task
if (data.ecode == '200') { .editRoi(this.curentTaskId, this.curentSubTaskId, reqObj)
this.closeyt() .then(res => {
} if (data.ecode == "200") {
}) this.closeyt();
}
});
} }
} }
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.control-box{ .control-box {
position absolute position: absolute;
top 0 top: 0;
left 0 left: 0;
right 0 right: 0;
margin auto margin: auto;
color #333 color: #333;
z-index 100 z-index: 100;
height 24vh height: 24vh;
width 31vw width: 31vw;
margin-top .5vh margin-top: 0.5vh;
background #ffffff background: #ffffff;
box-shadow:1px 0px 4px 3px rgba(74,74,74,0.14); box-shadow: 1px 0px 4px 3px rgba(74, 74, 74, 0.14);
} }
.control-let-box{
float left .control-let-box {
width 12vw float: left;
.control-btn{ width: 12vw;
height 5vh
margin-top 2vh .control-btn {
width 3.5vw height: 5vh;
overflow hidden margin-top: 2vh;
font-size 30px width: 3.5vw;
text-align center overflow: hidden;
color #cccccc font-size: 30px;
font-weight 600 text-align: center;
} color: #cccccc;
} font-weight: 600;
.control-right-box{
float left
width 18.5vw
}
.slider-box{
overflow hidden
margin-top 1vh
.title{
float left
width 2vw
line-height 35px;
}
.slider-item{
float left
width 16vw
}
}
.item-box{
float left
margin-top 1vh
}
.item-box:nth-child(1){
margin-left 0
} }
.setyzw{ }
width 6vw
.control-right-box {
float: left;
width: 18.5vw;
}
.slider-box {
overflow: hidden;
.title {
float: left;
width: 2vw;
line-height: 35px;
} }
.subbtn{
margin 1vh .3vw 0 2vw .slider-item {
float: left;
width: 16vw;
} }
}
.item-box {
float: left;
margin-top: 1vh;
}
.item-box:nth-child(1) {
margin-left: 0;
}
.setyzw {
width: 6vw;
}
.subbtn {
margin: 1vh 0.3vw 0 2vw;
}
</style> </style>
\ No newline at end of file \ No newline at end of file
src/views/trafficShow/illegaltrend.vue
...@@ -2,35 +2,35 @@ ...@@ -2,35 +2,35 @@
<div> <div>
<div class="chart-header-box"> <div class="chart-header-box">
<el-col :span="5" class="header-title">违法事件趋势</el-col> <el-col :span="5" class="header-title">违法事件趋势</el-col>
<span class="header-label">违法</span> <span class="header-label">违法</span>
<div class="header-select"> <div class="header-select">
<el-select v-model="illtype" @change="getTrafficHour"> <el-select v-model="illtype" @change="getTrafficHour">
<el-option <el-option
v-for="item in illageList" v-for="item in illageList"
:key="item.value" :key="item.value"
:label="item.name" :label="item.name"
:value="item.code"> :value="item.code"
</el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<span class="header-label">事件</span> <span class="header-label">事件</span>
<div class="header-select"> <div class="header-select">
<el-select v-model="eventtype" @change="getTrafficHour"> <el-select v-model="eventtype" @change="getTrafficHour">
<el-option <el-option
v-for="item in eventList" v-for="item in eventList"
:key="item.value" :key="item.value"
:label="item.name" :label="item.name"
:value="item.code"> :value="item.code"
</el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<span class="header-label">重点车辆</span> <span class="header-label">重点车辆</span>
<div class="header-select"> <div class="header-select">
<el-select v-model="special_type" @change="getTrafficHour"> <el-select v-model="special_type" @change="getTrafficHour">
<el-option value="" label='全部'></el-option> <el-option value label="全部"></el-option>
<el-option value="1" label='车辆运输车'></el-option> <el-option value="1" label="车辆运输车"></el-option>
<el-option value="2" label='危险品运输车'></el-option> <el-option value="2" label="危险品运输车"></el-option>
<el-option value="3" label='救护车'></el-option> <el-option value="3" label="救护车"></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -42,19 +42,46 @@ ...@@ -42,19 +42,46 @@
export default { export default {
data() { data() {
return { return {
illtype:'', illtype: "",
eventtype:'', eventtype: "",
special_type:'', special_type: "",
options:[], options: [],
illageList: [], illageList: [],
eventList:[] eventList: []
}; };
}, },
methods: { methods: {
initchart(cdata) { initchart(cdata) {
let xData = [
let xData = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"] "00",
let maychart = this.$echarts.init(document.getElementById("illtrendchart")); "01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24"
];
let maychart = this.$echarts.init(
document.getElementById("illtrendchart")
);
let option = { let option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -74,7 +101,7 @@ export default { ...@@ -74,7 +101,7 @@ export default {
itemHeight: 10 itemHeight: 10
}, },
grid: { grid: {
top:"10%", top: "10%",
left: "3%", left: "3%",
right: "10%", right: "10%",
bottom: "10%", bottom: "10%",
...@@ -83,7 +110,7 @@ export default { ...@@ -83,7 +110,7 @@ export default {
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
data:xData, data: xData,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
...@@ -122,7 +149,7 @@ export default { ...@@ -122,7 +149,7 @@ export default {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#D9D9D9", color: "#D9D9D9",
width:1, width: 1,
type: "solid" type: "solid"
} }
}, },
...@@ -141,16 +168,16 @@ export default { ...@@ -141,16 +168,16 @@ export default {
name: "违法", name: "违法",
type: "line", type: "line",
data: (function() { data: (function() {
let d = [] let d = [];
cdata.illegal.map(ele => { cdata.illegal.map(ele => {
for(let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
if(ele.hour == xData[i]){ if (ele.hour == xData[i]) {
d.push(ele.total_num) d.push(ele.total_num);
} else { } else {
d.push(0) d.push(0);
} }
} }
}) });
return d; return d;
})(), })(),
itemStyle: { itemStyle: {
...@@ -171,16 +198,16 @@ export default { ...@@ -171,16 +198,16 @@ export default {
name: "事件", name: "事件",
type: "line", type: "line",
data: (function() { data: (function() {
let d = [] let d = [];
cdata.event_type.map(ele => { cdata.event_type.map(ele => {
for(let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
if(ele.hour == xData[i]){ if (ele.hour == xData[i]) {
d.push(ele.total_num) d.push(ele.total_num);
} else { } else {
d.push(0) d.push(0);
} }
} }
}) });
return d; return d;
})(), })(),
itemStyle: { itemStyle: {
...@@ -200,17 +227,17 @@ export default { ...@@ -200,17 +227,17 @@ export default {
{ {
name: "重点车辆", name: "重点车辆",
type: "line", type: "line",
data: (function() { data: (function() {
let d = [] let d = [];
cdata.key_vehicle.map(ele => { cdata.key_vehicle.map(ele => {
for(let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
if(ele.hour == xData[i]){ if (ele.hour == xData[i]) {
d.push(ele.total_num) d.push(ele.total_num);
} else { } else {
d.push(0) d.push(0);
} }
} }
}) });
return d; return d;
})(), })(),
itemStyle: { itemStyle: {
...@@ -226,65 +253,65 @@ export default { ...@@ -226,65 +253,65 @@ export default {
shadowOffsetY: 10 shadowOffsetY: 10
} }
} }
}, }
] ]
}; };
maychart.setOption(option) maychart.setOption(option);
}, },
getillageList(){ getillageList() {
this.illageList = JSON.parse(localStorage.getItem('违法类型')) ; this.illageList = JSON.parse(localStorage.getItem("违法类型"));
}, },
getTrafficHour(){ getTrafficHour() {
let data = { let data = {
"illegal_type":this.illtype, illegal_type: this.illtype,
"event_type":this.eventtype, event_type: this.eventtype,
"key_vehicle_type":this.special_type key_vehicle_type: this.special_type
} };
this.$api.show.getTrafficHour(data).then(res => { this.$api.show.getTrafficHour(data).then(res => {
this.initchart(res) this.initchart(res);
}) });
}, },
getEvents(){ getEvents() {
this.$api.show.getEventType().then(res => { this.$api.show.getEventType().then(res => {
this.eventList = res.list_data this.eventList = res.list_data;
}) });
}, }
},
created(){
}, },
created() {},
mounted() { mounted() {
this.getillageList() this.getillageList();
this.getTrafficHour() this.getTrafficHour();
this.getEvents() this.getEvents();
}
},
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.chart-header-box{ .chart-header-box {
height 3vh height: 3vh;
overflow hidden overflow: hidden;
font-size 14px font-size: 14px;
} }
.header-title { .header-title {
line-height 3vh line-height: 3vh;
} }
.illtrendchart{
height 22vh .illtrendchart {
width 30vw height: 22vh;
} width: 30vw;
.header-label{
font-size 12px
line-height 3vh
float left
} }
.header-select{
width 4.5vw .header-label {
margin .2vh .5vw 0 .2vw font-size: 12px;
float left line-height: 3vh;
float: left;
} }
.header-select {
width: 4.5vw;
margin: 0.2vh 0.5vw 0 0.2vw;
float: left;
}
</style> </style>
\ No newline at end of file \ No newline at end of file
src/views/trafficShow/index.vue
<template> <template>
<el-row <el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
:gutter="10"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-col :span="15"> <el-col :span="15">
<div id="map" class="maps"> <div id="map" class="maps">
<showmap ref="map" @playvideo="playvideo"></showmap> <showmap ref="map"></showmap>
<div class="eventlist-box"> <div class="eventlist-box">
<!-- <eventList></eventList> --> <!-- <eventList></eventList> -->
<devInfo></devInfo> <devInfo></devInfo>
</div> </div>
<div class="video-box"> <!-- <div class="video-box">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay> </div> -->
</div>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</el-col> </el-col>
...@@ -34,9 +30,7 @@ ...@@ -34,9 +30,7 @@
<div>违法总量</div> <div>违法总量</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
<div class="item-num"> <div class="item-num">{{ snapData.key_vehicle_total_snap_num }}</div>
{{ snapData.key_vehicle_total_snap_num }}
</div>
<div>特殊车辆总量</div> <div>特殊车辆总量</div>
</el-col> </el-col>
</div> </div>
...@@ -56,7 +50,9 @@ ...@@ -56,7 +50,9 @@
<span class="icon-fanxin-bianzu2"></span> <span class="icon-fanxin-bianzu2"></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class=""><span class="car-num">10</span>辆</div> <div class>
<span class="car-num">10</span>辆
</div>
<div>渣土车抓拍</div> <div>渣土车抓拍</div>
</div> </div>
</div> </div>
...@@ -65,7 +61,9 @@ ...@@ -65,7 +61,9 @@
<span class="icon-fanxin-bianzu2"></span> <span class="icon-fanxin-bianzu2"></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class=""><span class="car-num">10</span>辆</div> <div class>
<span class="car-num">10</span>辆
</div>
<div>危险品车</div> <div>危险品车</div>
</div> </div>
</div> </div>
...@@ -74,7 +72,9 @@ ...@@ -74,7 +72,9 @@
<span class="icon-fanxin-bianzu2"></span> <span class="icon-fanxin-bianzu2"></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class=""><span class="car-num">29</span>辆</div> <div class>
<span class="car-num">29</span>辆
</div>
<div>重型罐式车</div> <div>重型罐式车</div>
</div> </div>
</div> </div>
...@@ -82,11 +82,11 @@ ...@@ -82,11 +82,11 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top:1vh;background:#fff"> <el-row style="margin-top:1vh;background:#fff">
<div class=""> <div class>
<illegaltrend></illegaltrend> <illegaltrend></illegaltrend>
</div> </div>
</el-row> </el-row>
<el-row class="clearpright" style="margin-top:1vh"> <el-row class="clearpright" style="margin-top:1vh">
<div class="right-item-box"> <div class="right-item-box">
<div class="title">实时事件</div> <div class="title">实时事件</div>
<alarmEvent @event="alarmevent"></alarmEvent> <alarmEvent @event="alarmevent"></alarmEvent>
...@@ -99,7 +99,6 @@ ...@@ -99,7 +99,6 @@
<script> <script>
import showmap from "./map"; import showmap from "./map";
import videoPlay from "../public/videoPlay";
import illegaltrend from "./illegaltrend"; import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis"; import eventTypedis from "./eventTypedis";
import eventList from "./eventList"; import eventList from "./eventList";
...@@ -128,7 +127,6 @@ export default { ...@@ -128,7 +127,6 @@ export default {
}, },
components: { components: {
showmap, showmap,
videoPlay,
illegaltrend, illegaltrend,
eventTypedis, eventTypedis,
alarmEvent, alarmEvent,
...@@ -141,43 +139,6 @@ export default { ...@@ -141,43 +139,6 @@ export default {
//移动地图 //移动地图
this.$refs.map.movemap(data); this.$refs.map.movemap(data);
}, },
playvideo(data) {
let obj = {};
if (data.vchan_name == "视频1") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d";
} else if (data.vchan_name == "视频2") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac";
}
this.playurl = obj;
setTimeout(() => {
this.$refs.ocx.videoPlay();
}, 0);
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger
// if(res.task_list.length >0) {
// var taskarr = res.task_list;
// let obj = {};
// for(let i = 0; i < taskarr.length; i++){
// if(taskarr[i].rtsp_url !=''){
// obj.rtsp_url = res.task_list[i].rtsp_url
// break;
// }
// }
// this.playurl = obj
// this.$refs.ocx.videoPlay()
// } else {
// this.$message({
// message: '该相机下没有分析任务',
// type: 'error'
// });
// }
// })
},
getTrafficSnap() { getTrafficSnap() {
this.$api.show.getTrafficSnap().then(res => { this.$api.show.getTrafficSnap().then(res => {
this.snapData = res; this.snapData = res;
...@@ -197,203 +158,235 @@ export default { ...@@ -197,203 +158,235 @@ export default {
</script> </script>
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
.collect-box{ .collect-box {
height 11.8vh height: 11.8vh;
background #fff background: #fff;
.header-title{
padding 10px 0px 0 20px .header-title {
} padding: 10px 0px 0 20px;
.collect-content{ }
margin-top 1.6vh
.content-item{ .collect-content {
text-align center margin-top: 1.6vh;
border-right 1px solid #E5E5E5
} .content-item {
.content-item:last-child{ text-align: center;
border-right 0 border-right: 1px solid #E5E5E5;
} }
}
.item-num{ .content-item:last-child {
font-size 16px border-right: 0;
color #444444 }
} }
}
.left-box{ .item-num {
} font-size: 16px;
.infoChild{ color: #444444;
height: 8.5vh; }
display: inline-block; }
}
.info-item-box{ .left-box {
height 100%; }
background: #FFFFFF;
} .infoChild {
.infoChild:nth-child(1) img{ height: 8.5vh;
width: 27px; display: inline-block;
height: 27px; }
margin: 22px 20px 21px 40px;
} .info-item-box {
.infoChild:nth-child(2) img{ height: 100%;
width: 30px; background: #FFFFFF;
height: 27px; }
margin: 22px 22px 21px 37px;
} .infoChild:nth-child(1) img {
.infoChild:nth-child(3) img{ width: 27px;
width: 28px; height: 27px;
height: 28px; margin: 22px 20px 21px 40px;
margin: 22px 22px 20px 34px; }
}
.infoChild:nth-child(4) img{ .infoChild:nth-child(2) img {
width: 27px; width: 30px;
height: 28px; height: 27px;
margin: 22px 22px 20px 34px; margin: 22px 22px 21px 37px;
} }
.textCon{
display: inline-block; .infoChild:nth-child(3) img {
vertical-align: top; width: 28px;
font-size: 12px; height: 28px;
color: #666666; margin: 22px 22px 20px 34px;
margin-top: 14px; }
}
.textCon span{ .infoChild:nth-child(4) img {
font-size: 20px; width: 27px;
margin-right: 2px; height: 28px;
} margin: 22px 22px 20px 34px;
.colorText{ }
margin-top: 6px;
color: #444444; .textCon {
} display: inline-block;
.ol-control button{ vertical-align: top;
display:none!important; font-size: 12px;
background:red!important color: #666666;
} margin-top: 14px;
}
.pop-info{
float: left; .textCon span {
padding-left: 20px; font-size: 20px;
width :100px margin-right: 2px;
} }
.numBox{ .colorText {
width: 307px; margin-top: 6px;
height: 125px; color: #444444;
background: #FFFFFF; }
color: #444444;
position: relative; .ol-control button {
} display: none !important;
.numBox:nth-child(1){ background: red !important;
margin-bottom: 6px; }
}
.num{ .pop-info {
font-size: 30px; float: left;
margin: 27px 0 0 13px; padding-left: 20px;
display: inline-block; width: 100px;
font-weight:bold; }
}
.catch{ .numBox {
width: 57px; width: 307px;
position: absolute; height: 125px;
top:59px; background: #FFFFFF;
right: 16px; color: #444444;
} position: relative;
.backSea{ }
width: 100%;
position: absolute; .numBox:nth-child(1) {
bottom: 0; margin-bottom: 6px;
left: 0; }
}
.num {
font-size: 30px;
.ltext{ margin: 27px 0 0 13px;
width: 71px; display: inline-block;
height: 100%; font-weight: bold;
border-right:1px solid #E5E5E5; }
}
.lnum{ .catch {
width: 37px; width: 57px;
} position: absolute;
.maps{ top: 59px;
height: 89.3vh; right: 16px;
width:100%; }
margin-bottom: 8px;
position: relative; .backSea {
background red width: 100%;
} position: absolute;
bottom: 0;
.el-table__body tr{ left: 0;
background: #FFFFFF!important; }
}
.event-type-box{ .ltext {
width: 100%; width: 71px;
height: 26.5vh; height: 100%;
overflow: hidden; border-right: 1px solid #E5E5E5;
} }
.right-item-box {
height: 27vh; .lnum {
background: #fff; width: 37px;
overflow: hidden; }
}
.right-item-box .title{ .maps {
padding-left: 5px; height: 89.3vh;
line-height 3vh width: 100%;
} margin-bottom: 8px;
.car-dis-info{ position: relative;
display flex }
flex-direction row
margin 1vh .3vw .el-table__body tr {
.left-icon { background: #FFFFFF !important;
width 3vw }
height 6vh
line-height 6vh .event-type-box {
text-align center width: 100%;
span{ height: 26.5vh;
font-size 30px overflow: hidden;
} }
}
} .right-item-box {
.car-dis-info:nth-child(2){ height: 27vh;
.left-icon { background: #fff;
span{ overflow: hidden;
color #FF9630 }
}
} .right-item-box .title {
} padding-left: 5px;
.car-dis-info:nth-child(3){ line-height: 3vh;
.left-icon { }
span{
color #F56C6C .car-dis-info {
} display: flex;
} flex-direction: row;
} margin: 1vh 0.3vw;
.car-dis-info:nth-child(4){
.left-icon { .left-icon {
span{ width: 3vw;
color #36BEA6 height: 6vh;
} line-height: 6vh;
} text-align: center;
}
.car-num{ span {
font-size 22px font-size: 30px;
font-weight 600 }
padding-right 5px }
} }
.eventlist-box{
position absolute .car-dis-info:nth-child(2) {
left 10px .left-icon {
top 10px span {
z-index 1000 color: #FF9630;
} }
.video-box{ }
position absolute }
height: 46.5vh;
width 30vw .car-dis-info:nth-child(3) {
margin-bottom: 1vh; .left-icon {
background: #444444; span {
left 0 color: #F56C6C;
right 0 }
top 0 }
bottom 0 }
margin auto
z-index 1000 .car-dis-info:nth-child(4) {
.left-icon {
span {
color: #36BEA6;
}
}
}
.car-num {
font-size: 22px;
font-weight: 600;
padding-right: 5px;
}
.eventlist-box {
position: absolute;
left: 10px;
top: 10px;
z-index: 1000;
}
.video-box {
position: absolute;
height: 46.5vh;
width: 30vw;
margin-bottom: 1vh;
background: #444444;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 1000;
} }
</style> </style>
src/views/trafficShow/map.vue
...@@ -2,13 +2,30 @@ ...@@ -2,13 +2,30 @@
<div> <div>
<div id="map" class="maps"></div> <div id="map" class="maps"></div>
<div id="popup" class="ol-popup"> <div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer" @click="closepopup"></a> <a
href="#"
id="popup-closer"
class="ol-popup-closer"
@click="closepopup"
></a>
<div id="t-popup-content"></div> <div id="t-popup-content"></div>
</div> </div>
<div id="videopopup" class="ol-popup">
<a
href="#"
id="popup-closer"
class="ol-popup-closer"
@click="closevideopopup"
></a>
<div id="">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import videoPlay from "../public/videoPlay";
import { inherits } from "ol/util.js"; import { inherits } from "ol/util.js";
import Map from "ol/Map"; import Map from "ol/Map";
import View from "ol/View"; import View from "ol/View";
...@@ -47,16 +64,21 @@ import GeoJSON from "ol/format/GeoJSON.js"; ...@@ -47,16 +64,21 @@ import GeoJSON from "ol/format/GeoJSON.js";
import "ol/ol.css"; //地图默认样式 import "ol/ol.css"; //地图默认样式
var map = ""; var map = "";
var Views = ""; var Views = "";
var container = ''; var container = "";
var videocontainer = "";
var content = ""; var content = "";
var voideocontent = "";
var closer = ""; var closer = "";
var overlay = ""; var overlay = "";
export default { export default {
data() { data() {
return { return {
devList:[] devList: []
}; };
}, },
components: {
videoPlay
},
methods: { methods: {
InitMap() { InitMap() {
let _this = this; let _this = this;
...@@ -140,14 +162,17 @@ export default { ...@@ -140,14 +162,17 @@ export default {
// 添加一个使用离线瓦片地图的层 // 添加一个使用离线瓦片地图的层
this.devList.map(ele => { this.devList.map(ele => {
console.log(ele.longitude) console.log(ele.longitude);
var CameraVertorlayer = new VectorLayer({ var CameraVertorlayer = new VectorLayer({
source: _this.addCameraLayer([Number(ele.longitude), Number(ele.latitude)], ele) source: _this.addCameraLayer(
}); [Number(ele.longitude), Number(ele.latitude)],
map.addLayer(CameraVertorlayer); ele
}) )
});
let that = this; map.addLayer(CameraVertorlayer);
});
let that = this;
map.on("click", e => { map.on("click", e => {
var pixel = map.getEventPixel(e.originalEvent); var pixel = map.getEventPixel(e.originalEvent);
...@@ -159,52 +184,63 @@ export default { ...@@ -159,52 +184,63 @@ export default {
// Overlay.setPosition(coodinate); // Overlay.setPosition(coodinate);
// map.addOverlay(Overlay); // map.addOverlay(Overlay);
//播放视频操作 //播放视频操作
let data = feature.getProperties().cameraInfo let data = feature.getProperties().cameraInfo;
that.$emit('playvideo',data) that.playvideo(data);
console.log('视频播放地址'+ data) console.log("视频播放地址" + data);
}); });
}); });
}, },
movemap(data){ movemap(data) {
let pos = [120.324447, 36.074594] let pos = [120.324447, 36.074594];
Views.animate({ Views.animate({
center: pos, center: pos,
duration: 400, duration: 400,
zoom:14 zoom: 14
}); });
this.addLayer(data,pos) this.addLayer(data, pos);
},
}, closepopup() {
closepopup(){ overlay.setPosition(undefined);
closer.blur();
return false;
},
closevideopopup() {
let video_ocx = document.getElementById("VionVideo");
let stopRes = video_ocx.StopPlaySip(0);
let stopRtspRes = video_ocx.StopPlay(0);
overlay.setPosition(undefined); overlay.setPosition(undefined);
closer.blur(); closer.blur();
return false; return false;
}, },
addLayer(pdata,pos) { addLayer(pdata, pos) {
document.getElementById('popup').style.display = 'block'; document.getElementById("popup").style.display = "block";
console.log(pdata) console.log(pdata);
if( pdata.pics) { if (pdata.pics) {
content.innerHTML = '<div class="content-box"><div class="img-box"><img src='+ pdata.pics+'></div></div>' content.innerHTML =
'<div class="content-box"><div class="img-box"><img src=' +
pdata.pics +
"></div></div>";
} else { } else {
content.innerHTML = '<div class="content-box"><div class="img-box"><img src=""></div></div>' content.innerHTML =
'<div class="content-box"><div class="img-box"><img src=""></div></div>';
} }
overlay = new Overlay({ overlay = new Overlay({
element: container, element: container,
autoPan: true, autoPan: true,
position:pos, position: pos,
autoPanAnimation: { autoPanAnimation: {
duration: 500 duration: 500
} }
}); });
map.addOverlay(overlay); map.addOverlay(overlay);
}, },
addCameraLayer(coordinate, data) { addCameraLayer(coordinate, data) {
let vectorSource = new VectorSource({ id: 1 }); let vectorSource = new VectorSource({ id: 1 });
let icon = new Feature({ let icon = new Feature({
geometry: new Point(coordinate), geometry: new Point(coordinate),
unid: "1", unid: "1",
cameraInfo:data cameraInfo: data
}); });
let color = "#156BB1"; //设置气泡颜色 let color = "#156BB1"; //设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致 //添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
...@@ -224,11 +260,11 @@ export default { ...@@ -224,11 +260,11 @@ export default {
// imgSize: [38, 38], // imgSize: [38, 38],
// marginTop: 100 // marginTop: 100
anchor: [0.5, 36], anchor: [0.5, 36],
anchorXUnits: 'fraction', anchorXUnits: "fraction",
anchorYUnits: 'pixels', anchorYUnits: "pixels",
src: require('./bioazhu.png') src: require("./bioazhu.png")
}), }),
text: new Text({ text: new Text({
text: data.vchan_name, text: data.vchan_name,
textBaseline: "top", textBaseline: "top",
font: "normal 12px 微软雅黑", font: "normal 12px 微软雅黑",
...@@ -248,56 +284,79 @@ export default { ...@@ -248,56 +284,79 @@ export default {
return vectorSource; return vectorSource;
}, },
// addFeature() { playvideo(data) {
// function createStyle(src, img) { let pos = [data.longitude, data.latitude];
// return new Style({ document.getElementById("videopopup").style.display = "block";
// image: new Icon( overlay = new Overlay({
// /** @type {module:ol/style/Icon~Options} */ ({ element: videocontainer,
// anchor: [0.5, 0.96], autoPan: true,
// crossOrigin: "anonymous", position: pos,
// src: src, autoPanAnimation: {
// img: img, duration: 500
// imgSize: img ? [img.width, img.height] : undefined }
// }) });
// ) map.addOverlay(overlay);
// }); let obj = {};
// } if (data.vchan_name == "视频1") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d";
} else if (data.vchan_name == "视频2") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac";
}
this.playurl = obj;
setTimeout(() => {
this.$refs.ocx.videoPlay();
}, 0);
//获取视频流
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger
// if(res.task_list.length >0) {
// var taskarr = res.task_list;
// let obj = {};
// for(let i = 0; i < taskarr.length; i++){
// if(taskarr[i].rtsp_url !=''){
// obj.rtsp_url = res.task_list[i].rtsp_url
// break;
// }
// }
// this.playurl = obj
// this.$refs.ocx.videoPlay()
// } else {
// this.$message({
// message: '该相机下没有分析任务',
// type: 'error'
// });
// }
// var iconFeature = new Feature(new Point([113.338591, 34.50691])); // })
// iconFeature.set( },
// "style", getDevList() {
// createStyle("../../../assets/img/dianli.png", undefined)
// );
// var CameraVertorlayer = new VectorLayer({
// source: iconFeature,
// id: 1
// });
// map.addLayer(this.CameraVertorlayer);
// },
getDevList(){
this.$api.show.getDevList(this.dev_unid).then(res => { this.$api.show.getDevList(this.dev_unid).then(res => {
let devlist = []; let devlist = [];
res.list_data.map(ele => { res.list_data.map(ele => {
if(ele.vchan_type == 'camera'){ if (ele.vchan_type == "camera") {
devlist.push(ele) devlist.push(ele);
} }
}) });
this.devList = devlist this.devList = devlist;
setTimeout(() => { setTimeout(() => {
this.InitMap(); this.InitMap();
}, 200); }, 200);
}) });
} }
}, },
mounted(){ mounted() {
setTimeout(()=>{ setTimeout(() => {
this.getDevList() this.getDevList();
},1000) }, 1000);
container = document.getElementById('popup'); container = document.getElementById("popup");
content = document.getElementById('t-popup-content'); videocontainer = document.getElementById("videopopup");
closer = document.getElementById('popup-closer'); content = document.getElementById("t-popup-content");
voideocontent = document.getElementById("video-popup-content");
}, closer = document.getElementById("popup-closer");
}
}; };
</script> </script>
...@@ -388,4 +447,4 @@ export default { ...@@ -388,4 +447,4 @@ export default {
color: red color: red
} }
} }
</style>
\ No newline at end of file \ No newline at end of file
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!