Skip to content

platform / fanxing_new

Go to a project
Commit b7b9eada by 潘建波
Options

提交视频播放

1 parent df80f342
Inline Side-by-side
Showing 8 changed files with 908 additions and 708 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(){ try {
let that = this; let that = this;
this.connect_id = new Date().getTime() 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.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 = 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
? 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 = { let obj = {
illame:illame, illame: illame,
illdt:dt, illdt: dt,
addressname:addressname, addressname: addressname,
camername:camername, camername: camername,
pics:pics pics: pics
} };
that.tableData.unshift(obj) that.tableData.unshift(obj);
}
} catch (error) {
}
if(data.command){
console.log('推送服务连接正常')
} else if(data.type =='response'){
console.log('请求任务推送成功')
} }
} catch (error) {}
if (data.command) {
console.log("推送服务连接正常");
} else if (data.type == "response") {
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 +
"/keep_alive"
};
this.cws.send(JSON.stringify(message));
}, 50000); }, 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>
<div style="clear: both;"></div>
</el-col>
<el-col :span="11">
<div class="video-box"> <div class="video-box">
<videoPlay ref="ocx"></videoPlay> <videoPlay ref="ocx"></videoPlay>
</div> </div>
<div class="collect-box"> </div>
<div style="clear: both;"></div>
</el-col>
<el-col :span="9">
<el-row 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> </el-row>
<div style="clear: both;"></div> <el-row class="bottom-box" style="margin-top:1vh">
</el-col>
<el-col :span="24" class="clearpright">
<el-row :gutter="10" class="bottom-box">
<el-col :span="8">
<div class="bottom-item-box"> <div class="bottom-item-box">
<behaviortrend></behaviortrend> <behaviortrend></behaviortrend>
</div> </div>
</el-col> </el-row>
<el-col :span="5"> <el-row style="margin-top:1vh">
<div class="bottom-item-box"> <div class="bottom-item-box">
<behaviordis></behaviordis> <behaviordis></behaviordis>
</div> </div>
</el-col> </el-row>
<el-col :span="11" class="clearpright"> <el-row style="margin-top:1vh">
<div class="bottom-item-box"> <div class="bottom-item-box">
<div class="title">实时事件</div> <div class="title">实时事件</div>
<alarmEvent></alarmEvent> <alarmEvent></alarmEvent>
</div> </div>
</el-col>
</el-row> </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;
background: #fff;
.header-title {
padding: 10px 0px 0 20px;
} }
.collect-box{
height 11.8vh .collect-content {
background #fff margin-top: 1.6vh;
.header-title{
padding 10px 0px 0 20px .content-item {
} text-align: center;
.collect-content{ border-right: 1px solid #E5E5E5;
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 .content-item:last-child {
color #444444 border-right: 0;
} }
} }
.left-box{
.item-num {
font-size: 16px;
color: #444444;
} }
.infoBox{ }
.left-box {
}
.infoBox {
margin-bottom: 1vh; margin-bottom: 1vh;
} }
.infoChild{
.infoChild {
height: 8.5vh; height: 8.5vh;
display: inline-block; display: inline-block;
} }
.info-item-box{
height 100% .info-item-box {
height: 100%;
background: #FFFFFF; background: #FFFFFF;
} }
.infoChild:nth-child(1) img{
.infoChild:nth-child(1) img {
width: 27px; width: 27px;
height: 27px; height: 27px;
margin: 22px 20px 21px 40px; margin: 22px 20px 21px 40px;
} }
.infoChild:nth-child(2) img{
.infoChild:nth-child(2) img {
width: 30px; width: 30px;
height: 27px; height: 27px;
margin: 22px 22px 21px 37px; margin: 22px 22px 21px 37px;
} }
.infoChild:nth-child(3) img{
.infoChild:nth-child(3) img {
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 22px 22px 20px 34px; margin: 22px 22px 20px 34px;
} }
.infoChild:nth-child(4) img{
.infoChild:nth-child(4) img {
width: 27px; width: 27px;
height: 28px; height: 28px;
margin: 22px 22px 20px 34px; margin: 22px 22px 20px 34px;
} }
.textCon{
.textCon {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-size: 12px; font-size: 12px;
color: #666666; color: #666666;
margin-top: 14px; margin-top: 14px;
} }
.textCon span{
.textCon span {
font-size: 20px; font-size: 20px;
margin-right: 2px; margin-right: 2px;
} }
.colorText{
.colorText {
margin-top: 6px; margin-top: 6px;
color: #444444; color: #444444;
} }
.ol-control button{
display:none!important; .ol-control button {
background:red!important display: none !important;
} background: red !important;
}
.pop-info{ .pop-info {
float: left; float: left;
padding-left: 20px; padding-left: 20px;
width :100px width: 100px;
} }
.numBox{ .numBox {
width: 307px; width: 307px;
height: 125px; height: 125px;
background: #FFFFFF; background: #FFFFFF;
color: #444444; color: #444444;
position: relative; position: relative;
} }
.numBox:nth-child(1){
.numBox:nth-child(1) {
margin-bottom: 6px; margin-bottom: 6px;
} }
.num{
.num {
font-size: 30px; font-size: 30px;
margin: 27px 0 0 13px; margin: 27px 0 0 13px;
display: inline-block; display: inline-block;
font-weight:bold; font-weight: bold;
} }
.catch{
.catch {
width: 57px; width: 57px;
position: absolute; position: absolute;
top:59px; top: 59px;
right: 16px; right: 16px;
} }
.backSea{
.backSea {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.ltext{ .ltext {
width: 71px; width: 71px;
height: 100%; height: 100%;
border-right:1px solid #E5E5E5; border-right: 1px solid #E5E5E5;
} }
.lnum{
.lnum {
width: 37px; width: 37px;
} }
.maps{
.maps {
height: 59.5vh; height: 59.5vh;
width:100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
} }
.el-table__body tr{ .el-table__body tr {
background: #FFFFFF!important; background: #FFFFFF !important;
} }
.bottom-box{
.bottom-box {
width: 100%; width: 100%;
height: 26.5vh; height: 26.5vh;
overflow: hidden; overflow: hidden;
} }
.bottom-item-box {
.bottom-item-box {
height: 27vh; height: 27vh;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
} }
.bottom-item-box .title{
.bottom-item-box .title {
padding-left: 5px; padding-left: 5px;
line-height 3vh line-height: 3vh;
} }
.car-dis-info{
display flex .car-dis-info {
flex-direction row display: flex;
margin 1vh .3vw flex-direction: row;
margin: 1vh 0.3vw;
.left-icon { .left-icon {
width 3vw width: 3vw;
height 6vh height: 6vh;
line-height 6vh line-height: 6vh;
text-align center text-align: center;
span{
font-size 30px span {
} font-size: 30px;
} }
} }
.car-dis-info:nth-child(2){ }
.car-dis-info:nth-child(2) {
.left-icon { .left-icon {
span{ span {
color #FF9630 color: #FF9630;
}
} }
} }
.car-dis-info:nth-child(3){ }
.car-dis-info:nth-child(3) {
.left-icon { .left-icon {
span{ span {
color #F56C6C color: #F56C6C;
} }
} }
} }
.car-dis-info:nth-child(4){
.car-dis-info:nth-child(4) {
.left-icon { .left-icon {
span{ span {
color #36BEA6 color: #36BEA6;
}
} }
} }
.car-num{ }
font-size 22px
font-weight 600 .car-num {
padding-right 5px font-size: 22px;
} font-weight: 600;
.eventlist-box{ padding-right: 5px;
position absolute }
left 10px
top 10px .eventlist-box {
z-index 1000 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,14 +2,38 @@ ...@@ -2,14 +2,38 @@
<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>
...@@ -20,35 +44,19 @@ ...@@ -20,35 +44,19 @@
<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
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
}
.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;
} }
.item-box{ }
float left
margin-top 1vh .control-right-box {
} float: left;
.item-box:nth-child(1){ width: 18.5vw;
margin-left 0 }
}
.setyzw{ .slider-box {
width 6vw 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/taskManage/editSet.vue
...@@ -4,15 +4,23 @@ ...@@ -4,15 +4,23 @@
title="任务配置修改" title="任务配置修改"
:visible.sync="setvisible" :visible.sync="setvisible"
width="450px" width="450px"
:before-close="handleClose"> :before-close="handleClose"
>
<div> <div>
<el-form label-position="left" label-width="80px" :model="formData"> <el-form label-position="left" label-width="80px" :model="formData">
<el-form-item label="任务名称"> <el-form-item label="任务名称">
<el-input v-model="formData.task_name" placeholder="请输入任务名称"></el-input> <el-input
v-model="formData.task_name"
placeholder="请输入任务名称"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="算法类型"> <el-form-item label="算法类型">
<el-select v-model="formData.task_algo_type" placeholder="请选择" :popper-append-to-body=false> <el-select
<el-option value="" label="--"></el-option> v-model="formData.task_algo_type"
placeholder="请选择"
:popper-append-to-body="false"
>
<el-option value label="--"></el-option>
<el-option value="0" label="交通"></el-option> <el-option value="0" 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>
...@@ -20,17 +28,13 @@ ...@@ -20,17 +28,13 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="场景占用"> <el-form-item label="场景占用">
<el-select v-model="formData.type" placeholder="请选择" :popper-append-to-body=false> <el-select
<el-option v-model="formData.type"
key="1" placeholder="请选择"
label="全部" :popper-append-to-body="false"
value=""> >
</el-option> <el-option key="1" label="全部" value></el-option>
<el-option <el-option key="2" label="222" value="2"></el-option>
key="2"
label="222"
value="2">
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="时间计划"> <el-form-item label="时间计划">
...@@ -38,23 +42,37 @@ ...@@ -38,23 +42,37 @@
</el-form-item> </el-form-item>
<el-form-item label="时间"> <el-form-item label="时间">
<el-date-picker <el-date-picker
style="width:100%"
v-model="formData.timer" v-model="formData.timer"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期"> end-placeholder="结束日期"
</el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="存储配置"> <el-form-item label="存储配置">
<el-select v-model="formData.store_conf.unid" placeholder="请选择" :popper-append-to-body=false> <el-select
<el-option :value="store.unid" :label="store.name" v-for="store in store_confs" :key="store.unid"></el-option> v-model="formData.store_conf.unid"
placeholder="请选择"
:popper-append-to-body="false"
>
<el-option
:value="store.unid"
:label="store.name"
v-for="store in store_confs"
:key="store.unid"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="优先级"> <el-form-item label="优先级">
<el-select v-model="formData.priority" placeholder="请选择" :popper-append-to-body=false> <el-select
v-model="formData.priority"
placeholder="请选择"
:popper-append-to-body="false"
>
<el-option value="high" label="高"></el-option> <el-option value="high" label="高"></el-option>
<el-option value="normal" selected="" label="中"></el-option> <el-option value="normal" selected label="中"></el-option>
<el-option value="low" label="低"></el-option> <el-option value="low" label="低"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -69,87 +87,85 @@ ...@@ -69,87 +87,85 @@
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
setvisible:false, setvisible: false,
formData:{ formData: {
task_name:'', task_name: "",
task_algo_type:'', task_algo_type: "",
timer:'', timer: "",
store_conf:{ store_conf: {
unid:'' unid: ""
}, },
priority:'', priority: ""
},
vchanAry:[],
sessionData:{},
store_confs:[]
}
}, },
props:{ vchanAry: [],
pedittype:{ sessionData: {},
type:String, store_confs: []
default:'add' };
},
}, },
watch:{ props: {
pedittype: {
type: String,
default: "add"
}
}, },
mounted(){ watch: {},
console.log('mounted',this.formData) mounted() {
console.log("mounted", this.formData);
}, },
methods:{ methods: {
initData(type, pdata){ initData(type, pdata) {
debugger debugger;
this.setvisible = true; this.setvisible = true;
if (type == 'add') { if (type == "add") {
this.formData = { this.formData = {
task_name:'', task_name: "",
task_algo_type:'', task_algo_type: "",
timer:'', timer: "",
store_conf:{ store_conf: {
unid:'' unid: ""
}, },
priority:'', priority: ""
}; };
} }
if (type == 'edit') { if (type == "edit") {
pdata.timer = [pdata.start_dt,pdata.end_dt] pdata.timer = [pdata.start_dt, pdata.end_dt];
this.formData = pdata; this.formData = pdata;
this.$api.task.getSubTask(pdata.task_id).then(res => { this.$api.task.getSubTask(pdata.task_id).then(res => {
let ary = [] let ary = [];
let data = res.list_data let data = res.list_data;
for(let i in data) { for (let i in data) {
if (data[i].vchan) { if (data[i].vchan) {
data[i].vchan.subtask_id = data[i].subtask_id data[i].vchan.subtask_id = data[i].subtask_id;
data[i].vchan.refid = data[i].vchan.vchan_refid data[i].vchan.refid = data[i].vchan.vchan_refid;
}else { } else {
data.vchan = { data.vchan = {
subtask_id: data[i].subtask_id, subtask_id: data[i].subtask_id,
refid:'', refid: "",
vchan_name:data[i].subtask_name vchan_name: data[i].subtask_name
} };
} }
ary.push(data[i].vchan) ary.push(data[i].vchan);
} }
// this.$refs.edit.editData = confile; // this.$refs.edit.editData = confile;
// this.$refs.edit.vchanAry = ary; // this.$refs.edit.vchanAry = ary;
this.vchanAry = ary; this.vchanAry = ary;
}) });
} }
}, },
handleClose(){ handleClose() {
this.setvisible = false; this.setvisible = false;
}, },
closeVisible(){ closeVisible() {
for(var key in this.sessionData){ for (var key in this.sessionData) {
this.formData[key]=this.sessionData[key] this.formData[key] = this.sessionData[key];
} }
this.setvisible = false; this.setvisible = false;
}, },
save(){ save() {
this.sessionData=JSON.parse(JSON.stringify(this.formData)); this.sessionData = JSON.parse(JSON.stringify(this.formData));
this.setvisible = false; this.setvisible = false;
// //
let postData = { let postData = {
...@@ -162,7 +178,7 @@ ...@@ -162,7 +178,7 @@
end_dt: this.setUtcTime(this.formData.timer[1]), end_dt: this.setUtcTime(this.formData.timer[1]),
priority: this.formData.priority, priority: this.formData.priority,
store_conf_unid: this.formData.store_conf.unid, store_conf_unid: this.formData.store_conf.unid,
task_type: "normal", task_type: "normal"
// algo_comb_unid: this.formData.store_conf, // algo_comb_unid: this.formData.store_conf,
}; };
...@@ -170,41 +186,42 @@ ...@@ -170,41 +186,42 @@
for (let i in postData) { for (let i in postData) {
formData.append(i, postData[i]); formData.append(i, postData[i]);
} }
if(this.pedittype == "add") { if (this.pedittype == "add") {
this.addTask(formData) this.addTask(formData);
} }
if(this.pedittype == "edit") { if (this.pedittype == "edit") {
this.editTask(formData) this.editTask(formData);
} }
}, },
addTask(data) { addTask(data) {
this.$api.task.addTask(data,{ this.$api.task
.addTask(data, {
"content-type": "multipart/form-data" "content-type": "multipart/form-data"
}).then(res => {
console.log(res)
this.$emit('refresh')
}) })
.then(res => {
console.log(res);
this.$emit("refresh");
});
}, },
editTask(data) { editTask(data) {
this.$api.task.editTask(data,this.formData.task_id).then(res => { this.$api.task.editTask(data, this.formData.task_id).then(res => {
this.$emit('refresh') this.$emit("refresh");
}) });
}, },
getStore() { getStore() {
let params = { let params = {
offset: 0, offset: 0,
limit: '' limit: ""
} };
this.$api.device.getStore(params).then(res =>{ this.$api.device.getStore(params).then(res => {
this.store_confs = res.list_data; this.store_confs = res.list_data;
}) });
} }
}, },
created(){ created() {
this.getStore() this.getStore();
}
} }
};
</script> </script>
<style> <style></style>
</style>
src/views/trafficShow/illegaltrend.vue
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
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>
...@@ -20,17 +20,17 @@ ...@@ -20,17 +20,17 @@
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: {
...@@ -201,16 +228,16 @@ export default { ...@@ -201,16 +228,16 @@ 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,7 +82,7 @@ ...@@ -82,7 +82,7 @@
</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>
...@@ -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{
text-align center
border-right 1px solid #E5E5E5
}
.content-item:last-child{
border-right 0
} }
.collect-content {
margin-top: 1.6vh;
.content-item {
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 {
font-size: 16px;
color: #444444;
} }
.infoChild{ }
.left-box {
}
.infoChild {
height: 8.5vh; height: 8.5vh;
display: inline-block; display: inline-block;
} }
.info-item-box{
height 100%; .info-item-box {
height: 100%;
background: #FFFFFF; background: #FFFFFF;
} }
.infoChild:nth-child(1) img{
.infoChild:nth-child(1) img {
width: 27px; width: 27px;
height: 27px; height: 27px;
margin: 22px 20px 21px 40px; margin: 22px 20px 21px 40px;
} }
.infoChild:nth-child(2) img{
.infoChild:nth-child(2) img {
width: 30px; width: 30px;
height: 27px; height: 27px;
margin: 22px 22px 21px 37px; margin: 22px 22px 21px 37px;
} }
.infoChild:nth-child(3) img{
.infoChild:nth-child(3) img {
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 22px 22px 20px 34px; margin: 22px 22px 20px 34px;
} }
.infoChild:nth-child(4) img{
.infoChild:nth-child(4) img {
width: 27px; width: 27px;
height: 28px; height: 28px;
margin: 22px 22px 20px 34px; margin: 22px 22px 20px 34px;
} }
.textCon{
.textCon {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-size: 12px; font-size: 12px;
color: #666666; color: #666666;
margin-top: 14px; margin-top: 14px;
} }
.textCon span{
.textCon span {
font-size: 20px; font-size: 20px;
margin-right: 2px; margin-right: 2px;
} }
.colorText{
.colorText {
margin-top: 6px; margin-top: 6px;
color: #444444; color: #444444;
} }
.ol-control button{
display:none!important; .ol-control button {
background:red!important display: none !important;
} background: red !important;
}
.pop-info{ .pop-info {
float: left; float: left;
padding-left: 20px; padding-left: 20px;
width :100px width: 100px;
} }
.numBox{ .numBox {
width: 307px; width: 307px;
height: 125px; height: 125px;
background: #FFFFFF; background: #FFFFFF;
color: #444444; color: #444444;
position: relative; position: relative;
} }
.numBox:nth-child(1){
.numBox:nth-child(1) {
margin-bottom: 6px; margin-bottom: 6px;
} }
.num{
.num {
font-size: 30px; font-size: 30px;
margin: 27px 0 0 13px; margin: 27px 0 0 13px;
display: inline-block; display: inline-block;
font-weight:bold; font-weight: bold;
} }
.catch{
.catch {
width: 57px; width: 57px;
position: absolute; position: absolute;
top:59px; top: 59px;
right: 16px; right: 16px;
} }
.backSea{
.backSea {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.ltext{ .ltext {
width: 71px; width: 71px;
height: 100%; height: 100%;
border-right:1px solid #E5E5E5; border-right: 1px solid #E5E5E5;
} }
.lnum{
.lnum {
width: 37px; width: 37px;
} }
.maps{
.maps {
height: 89.3vh; height: 89.3vh;
width:100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
background red }
}
.el-table__body tr{ .el-table__body tr {
background: #FFFFFF!important; background: #FFFFFF !important;
} }
.event-type-box{
.event-type-box {
width: 100%; width: 100%;
height: 26.5vh; height: 26.5vh;
overflow: hidden; overflow: hidden;
} }
.right-item-box {
.right-item-box {
height: 27vh; height: 27vh;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
} }
.right-item-box .title{
.right-item-box .title {
padding-left: 5px; padding-left: 5px;
line-height 3vh line-height: 3vh;
} }
.car-dis-info{
display flex .car-dis-info {
flex-direction row display: flex;
margin 1vh .3vw flex-direction: row;
margin: 1vh 0.3vw;
.left-icon { .left-icon {
width 3vw width: 3vw;
height 6vh height: 6vh;
line-height 6vh line-height: 6vh;
text-align center text-align: center;
span{
font-size 30px span {
} font-size: 30px;
} }
} }
.car-dis-info:nth-child(2){ }
.car-dis-info:nth-child(2) {
.left-icon { .left-icon {
span{ span {
color #FF9630 color: #FF9630;
}
} }
} }
.car-dis-info:nth-child(3){ }
.car-dis-info:nth-child(3) {
.left-icon { .left-icon {
span{ span {
color #F56C6C color: #F56C6C;
}
} }
} }
.car-dis-info:nth-child(4){ }
.car-dis-info:nth-child(4) {
.left-icon { .left-icon {
span{ span {
color #36BEA6 color: #36BEA6;
}
}
} }
.car-num{
font-size 22px
font-weight 600
padding-right 5px
} }
.eventlist-box{ }
position absolute
left 10px .car-num {
top 10px font-size: 22px;
z-index 1000 font-weight: 600;
} padding-right: 5px;
.video-box{ }
position absolute
.eventlist-box {
position: absolute;
left: 10px;
top: 10px;
z-index: 1000;
}
.video-box {
position: absolute;
height: 46.5vh; height: 46.5vh;
width 30vw width: 30vw;
margin-bottom: 1vh; margin-bottom: 1vh;
background: #444444; background: #444444;
left 0 left: 0;
right 0 right: 0;
top 0 top: 0;
bottom 0 bottom: 0;
margin auto margin: auto;
z-index 1000 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,12 +162,15 @@ export default { ...@@ -140,12 +162,15 @@ 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)],
ele
)
}); });
map.addLayer(CameraVertorlayer); map.addLayer(CameraVertorlayer);
}) });
let that = this; let that = this;
...@@ -159,40 +184,51 @@ export default { ...@@ -159,40 +184,51 @@ 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() {
overlay.setPosition(undefined);
closer.blur();
return false;
}, },
closepopup(){ 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
} }
...@@ -204,7 +240,7 @@ export default { ...@@ -204,7 +240,7 @@ export default {
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,9 +260,9 @@ export default { ...@@ -224,9 +260,9 @@ 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,
...@@ -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>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!