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