Skip to content

platform / fanxing_new

Go to a project
Commit 57f9f83c by 潘建波
Options

提交展示页

1 parent 63f4224b
Inline Side-by-side
Showing 3 changed files with 318 additions and 334 deletions
src/views/behaviorShow/index.vue
<template> <template>
<el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"> <el-row
<el-col :span="13" > :gutter="10"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
<div id="map" class="maps"> >
<showmap></showmap> <el-col :span="13">
<div class="eventlist-box"> <div id="map" class="maps">
<devInfo></devInfo> <showmap></showmap>
</div> <div class="eventlist-box">
</div> <devInfo></devInfo>
<div style="clear: both;"></div> </div>
</el-col> </div>
<el-col :span="11"> <div style="clear: both;"></div>
<div class="video-box"> </el-col>
<videoPlay ref="ocx"></videoPlay> <el-col :span="11">
</div> <div class="video-box">
<div class="collect-box"> <videoPlay ref="ocx"></videoPlay>
<div class="header-title">今日抓拍量</div> </div>
<div class="collect-content"> <div class="collect-box">
<el-col :span="6" class="content-item"> <div class="header-title">今日抓拍量</div>
<div class="item-num">{{snapData.day_total_snap_num}}</div> <div class="collect-content">
<div>事件检测总量</div> <el-col :span="6" class="content-item">
</el-col> <div class="item-num">{{ snapData.day_total_snap_num }}</div>
<el-col :span="6" class="content-item"> <div>事件检测总量</div>
<div class="item-num">{{snapData.day_single_snap_num}}</div> </el-col>
<div>单项总量</div> <el-col :span="6" class="content-item">
</el-col> <div class="item-num">{{ snapData.day_single_snap_num }}</div>
<el-col :span="6" class="content-item"> <div>单项总量</div>
<div class="item-num">{{snapData.month_total_snap_num}}</div> </el-col>
<div>本月事件检测总量</div> <el-col :span="6" class="content-item">
</el-col> <div class="item-num">{{ snapData.month_total_snap_num }}</div>
<el-col :span="6" class="content-item"> <div>本月事件检测总量</div>
<div class="item-num">{{snapData.month_single_snap_num}}</div> </el-col>
<div>本月单项总量</div> <el-col :span="6" class="content-item">
</el-col> <div class="item-num">{{ snapData.month_single_snap_num }}</div>
</div> <div>本月单项总量</div>
</div> </el-col>
<div style="clear: both;"></div> </div>
</el-col> </div>
<el-col :span="24" class="clearpright"> <div style="clear: both;"></div>
<el-row :gutter="10" class="bottom-box"> </el-col>
<el-col :span="8"> <el-col :span="24" class="clearpright">
<div class="bottom-item-box"> <el-row :gutter="10" class="bottom-box">
<behaviortrend></behaviortrend> <el-col :span="8">
</div> <div class="bottom-item-box">
</el-col> <behaviortrend></behaviortrend>
<el-col :span="5"> </div>
<div class="bottom-item-box"> </el-col>
<behaviordis></behaviordis> <el-col :span="5">
</div> <div class="bottom-item-box">
</el-col> <behaviordis></behaviordis>
<el-col :span="11" class="clearpright"> </div>
<div class="bottom-item-box"> </el-col>
<div class="title">实时事件</div> <el-col :span="11" class="clearpright">
<alarmEvent></alarmEvent> <div class="bottom-item-box">
</div> <div class="title">实时事件</div>
</el-col> <alarmEvent></alarmEvent>
</el-row> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-col>
</el-row>
</template> </template>
<script> <script>
import showmap from './map' import showmap from "./map";
import videoPlay from '../public/videoPlay' import videoPlay from "../public/videoPlay";
import behaviortrend from './behaviortrend' import behaviortrend from "./behaviortrend";
import behaviordis from './behaviordis' import behaviordis from "./behaviordis";
import eventList from './eventList' import eventList from "./eventList";
import alarmEvent from './alarmEvent' import alarmEvent from "./alarmEvent";
import devInfo from './devInfo' import devInfo from "./devInfo";
export default{ export default {
data(){ data() {
return{ return {
collects:{}, collects: {},
typeList:[], typeList: [],
tableData:[], tableData: [],
eventTypeList:[], eventTypeList: [],
illageList:[], illageList: [],
setShow:false, setShow: false,
archiveUnid:0, archiveUnid: 0,
snap_num:0, snap_num: 0,
audit_num:0, audit_num: 0,
snapData:{ snapData: {
day_total_snap_num:0, day_total_snap_num: 0,
day_single_snap_num:0, day_single_snap_num: 0,
month_total_snap_num:0, month_total_snap_num: 0,
month_single_snap_num:0 month_single_snap_num: 0
} }
} };
}, },
components:{ components: {
showmap, showmap,
videoPlay, videoPlay,
behaviortrend, behaviortrend,
behaviordis, behaviordis,
alarmEvent, alarmEvent,
eventList, eventList,
devInfo devInfo
}, },
mounted(){ mounted() {},
methods: {
editVideo(index, row) {
this.setShow = true;
this.archiveUnid = row.archive_unid;
},
delFun(index, row) {
this.$api.map.delEvent({}, row.archive_unid).then(res => {
console.log(res);
});
console.log(row);
},
}, getBehaviorSnap() {
methods:{ this.$api.show.getBehaviorSna().then(res => {
editVideo(index,row){ this.snapData = res;
this.setShow=true; });
this.archiveUnid=row.archive_unid; }
}, },
delFun(index,row){ created() {
this.$api.map.delEvent({},row.archive_unid).then((res)=>{ this.getBehaviorSnap();
console.log(res) }
}) };
console.log(row)
},
getBehaviorSnap(){
this.$api.show.getBehaviorSna().then(res => {
this.snapData = res;
})
}
},
created(){
this.getBehaviorSnap()
}
}
</script> </script>
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
...@@ -203,7 +203,7 @@ import devInfo from './devInfo' ...@@ -203,7 +203,7 @@ import devInfo from './devInfo'
display:none!important; display:none!important;
background:red!important background:red!important
} }
.pop-info{ .pop-info{
float: left; float: left;
padding-left: 20px; padding-left: 20px;
...@@ -254,7 +254,7 @@ import devInfo from './devInfo' ...@@ -254,7 +254,7 @@ import devInfo from './devInfo'
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
} }
.el-table__body tr{ .el-table__body tr{
background: #FFFFFF!important; background: #FFFFFF!important;
} }
...@@ -318,5 +318,4 @@ import devInfo from './devInfo' ...@@ -318,5 +318,4 @@ import devInfo from './devInfo'
top 10px top 10px
z-index 1000 z-index 1000
} }
</style> </style>
src/views/trafficShow/index.vue
<template> <template>
<el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"> <el-row
<el-col :span="13" > :gutter="10"
<div id="map" class="maps"> style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
<showmap ref="map" @playvideo="playvideo"></showmap> >
<div class="eventlist-box"> <el-col :span="15">
<!-- <eventList></eventList> --> <div id="map" class="maps">
<devInfo></devInfo> <showmap ref="map" @playvideo="playvideo"></showmap>
</div> <div class="eventlist-box">
</div> <!-- <eventList></eventList> -->
<devInfo></devInfo>
<div style="clear: both;"></div> <div class="video-box">
</el-col> <videoPlay ref="ocx" :playurl="playurl"></videoPlay>
<el-col :span="11"> </div>
<div class="video-box"> </div>
<videoPlay ref="ocx" :playurl="playurl"></videoPlay> </div>
</div> <div style="clear: both;"></div>
<div class="collect-box"> </el-col>
<div class="header-title">今日抓拍量</div> <el-col :span="9">
<div class="collect-content"> <el-row>
<el-col :span="6" class="content-item"> <div class="collect-box">
<div class="item-num">{{snapData.kakou_total_snap_num}}</div> <div class="header-title">今日抓拍量</div>
<div>卡口总量</div> <div class="collect-content">
</el-col> <el-col :span="6" class="content-item">
<el-col :span="6" class="content-item"> <div class="item-num">{{ snapData.kakou_total_snap_num }}</div>
<div class="item-num">{{snapData.event_total_snap_num}}</div> <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">{{ snapData.event_total_snap_num }}</div>
<div class="item-num">{{snapData.illega_total_snap_num}}</div> <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">{{ snapData.illega_total_snap_num }}</div>
<div class="item-num">{{snapData.key_vehicle_total_snap_num}}</div> <div>违法总量</div>
<div>特殊车辆总量</div> </el-col>
</el-col> <el-col :span="6" class="content-item">
</div> <div class="item-num">
</div> {{ snapData.key_vehicle_total_snap_num }}
<div style="clear: both;"></div> </div>
</el-col> <div>特殊车辆总量</div>
<el-col :span="24" class="clearpright"> </el-col>
<el-row :gutter="12" class="bottom-box"> </div>
<el-col :span="8"> </div>
<div class="bottom-item-box"> </el-row>
<illegaltrend></illegaltrend> <el-row :gutter="12" class="event-type-box" style="margin-top:1vh">
</div> <el-col :span="16">
</el-col> <div class="right-item-box">
<el-col :span="5"> <eventTypedis></eventTypedis>
<div class="bottom-item-box"> </div>
<eventTypedis></eventTypedis> </el-col>
</div> <el-col :span="8" style="padding-right:0">
</el-col> <div class="right-item-box">
<el-col :span="3"> <div class="title">重点车辆分布</div>
<div class="bottom-item-box"> <div class="car-dis-info">
<div class="title">重点车辆分布</div> <div class="left-icon">
<!-- <div class="car-dis-info" v-for="(item, index) in keyVehicleData" :key="index"> <span class="icon-fanxin-bianzu2"></span>
<div class="left-icon"> </div>
<span class="icon-fanxin-bianzu2"></span> <div class="right-content">
</div> <div class=""><span class="car-num">10</span>辆</div>
<div class="right-content"> <div>渣土车抓拍</div>
<div class=""> </div>
<span class="car-num">{{item.total_num}}</span>辆 </div>
</div> <div class="car-dis-info">
<div>{{item.vehicle_name}}</div> <div class="left-icon">
</div> <span class="icon-fanxin-bianzu2"></span>
</div> --> </div>
<div class="car-dis-info"> <div class="right-content">
<div class="left-icon"> <div class=""><span class="car-num">10</span>辆</div>
<span class="icon-fanxin-bianzu2"></span> <div>危险品车</div>
</div> </div>
<div class="right-content"> </div>
<div class=""> <div class="car-dis-info">
<span class="car-num">10</span>辆 <div class="left-icon">
</div> <span class="icon-fanxin-bianzu2"></span>
<div>渣土车抓拍</div> </div>
</div> <div class="right-content">
</div> <div class=""><span class="car-num">29</span>辆</div>
<div class="car-dis-info"> <div>重型罐式车</div>
<div class="left-icon"> </div>
<span class="icon-fanxin-bianzu2"></span> </div>
</div> </div>
<div class="right-content"> </el-col>
<div class=""> </el-row>
<span class="car-num">10</span>辆 <el-row style="margin-top:1vh;background:#fff">
</div> <div class="">
<div>危险品车</div> <illegaltrend></illegaltrend>
</div> </div>
</div> </el-row>
<div class="car-dis-info"> <el-row class="clearpright" style="margin-top:1vh">
<div class="left-icon"> <div class="right-item-box">
<span class="icon-fanxin-bianzu2"></span> <div class="title">实时事件</div>
</div> <alarmEvent @event="alarmevent"></alarmEvent>
<div class="right-content"> </div>
<div class=""> </el-row>
<span class="car-num">29</span>辆 <div style="clear: both;"></div>
</div> </el-col>
<div>重型罐式车</div> </el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="8" class="clearpright">
<div class="bottom-item-box">
<div class="title">实时事件</div>
<alarmEvent @event = "alarmevent"></alarmEvent>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</template> </template>
<script> <script>
import showmap from './map' import showmap from "./map";
import videoPlay from '../public/videoPlay' 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";
import alarmEvent from './alarmEvent' import alarmEvent from "./alarmEvent";
import devInfo from '../behaviorShow/devInfo' import devInfo from "../behaviorShow/devInfo";
export default{ export default {
data(){ data() {
return{ return {
typeList:[], typeList: [],
tableData:[], tableData: [],
eventTypeList:[], eventTypeList: [],
keyVehicleData:[], keyVehicleData: [],
illageList:[], illageList: [],
setShow:false, setShow: false,
archiveUnid:0, archiveUnid: 0,
snap_num:0, snap_num: 0,
playurl:'', playurl: "",
audit_num:0, audit_num: 0,
snapData:{ snapData: {
illega_total_snap_num:0, illega_total_snap_num: 0,
key_vehicle_total_snap_num:0, key_vehicle_total_snap_num: 0,
event_total_snap_num:0, event_total_snap_num: 0,
kakou_total_snap_num:0, kakou_total_snap_num: 0
} }
} };
}, },
components:{ components: {
showmap, showmap,
videoPlay, videoPlay,
illegaltrend, illegaltrend,
eventTypedis, eventTypedis,
alarmEvent, alarmEvent,
devInfo, devInfo,
eventList eventList
}, },
mounted(){ mounted() {},
methods: {
}, alarmevent(data) {
methods:{ //移动地图
alarmevent(data){ this.$refs.map.movemap(data);
//移动地图 },
this.$refs.map.movemap(data) playvideo(data) {
}, let obj = {};
playvideo(data){ if (data.vchan_name == "视频1") {
let obj = {}; obj.rtsp_url =
if(data.vchan_name == "视频1"){ "rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d";
obj.rtsp_url= "rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d" } else if (data.vchan_name == "视频2") {
} else if(data.vchan_name == "视频2"){ obj.rtsp_url =
obj.rtsp_url= "rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac" "rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac";
} }
this.playurl = obj this.playurl = obj;
setTimeout(() => { setTimeout(() => {
this.$refs.ocx.videoPlay() this.$refs.ocx.videoPlay();
}, 0); }, 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;
})
},
getKeyVehicle(){
this.$api.show.getKeyVehicle().then(res => {
this.keyVehicleData = res;
})
},
}, // this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
created(){ // debugger
this.getTrafficSnap() // if(res.task_list.length >0) {
this.getKeyVehicle() // 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;
});
},
getKeyVehicle() {
this.$api.show.getKeyVehicle().then(res => {
this.keyVehicleData = res;
});
}
},
created() {
this.getTrafficSnap();
this.getKeyVehicle();
}
};
</script> </script>
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
...@@ -287,7 +272,7 @@ import devInfo from '../behaviorShow/devInfo' ...@@ -287,7 +272,7 @@ import devInfo from '../behaviorShow/devInfo'
display:none!important; display:none!important;
background:red!important background:red!important
} }
.pop-info{ .pop-info{
float: left; float: left;
padding-left: 20px; padding-left: 20px;
...@@ -333,26 +318,27 @@ import devInfo from '../behaviorShow/devInfo' ...@@ -333,26 +318,27 @@ import devInfo from '../behaviorShow/devInfo'
width: 37px; width: 37px;
} }
.maps{ .maps{
height: 59.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;
} }
.bottom-box{ .event-type-box{
width: 100%; width: 100%;
height: 26.5vh; height: 26.5vh;
overflow: hidden; overflow: hidden;
} }
.bottom-item-box { .right-item-box {
height: 27vh; height: 27vh;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
} }
.bottom-item-box .title{ .right-item-box .title{
padding-left: 5px; padding-left: 5px;
line-height 3vh line-height 3vh
} }
...@@ -402,5 +388,4 @@ import devInfo from '../behaviorShow/devInfo' ...@@ -402,5 +388,4 @@ import devInfo from '../behaviorShow/devInfo'
top 10px top 10px
z-index 1000 z-index 1000
} }
</style> </style>
yarn.lock 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!