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>
<el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
<el-col :span="13" >
<div id="map" class="maps">
<showmap></showmap>
<div class="eventlist-box">
<devInfo></devInfo>
</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">
<div class="header-title">今日抓拍量</div>
<div class="collect-content">
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.day_total_snap_num}}</div>
<div>事件检测总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.day_single_snap_num}}</div>
<div>单项总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.month_total_snap_num}}</div>
<div>本月事件检测总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.month_single_snap_num}}</div>
<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-col>
</el-row>
<el-row
:gutter="10"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-col :span="13">
<div id="map" class="maps">
<showmap></showmap>
<div class="eventlist-box">
<devInfo></devInfo>
</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">
<div class="header-title">今日抓拍量</div>
<div class="collect-content">
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.day_total_snap_num }}</div>
<div>事件检测总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.day_single_snap_num }}</div>
<div>单项总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.month_total_snap_num }}</div>
<div>本月事件检测总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.month_single_snap_num }}</div>
<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-col>
</el-row>
</template>
<script>
import showmap from './map'
import videoPlay from '../public/videoPlay'
import behaviortrend from './behaviortrend'
import behaviordis from './behaviordis'
import eventList from './eventList'
import alarmEvent from './alarmEvent'
import devInfo from './devInfo'
export default{
data(){
return{
collects:{},
typeList:[],
tableData:[],
eventTypeList:[],
illageList:[],
setShow:false,
archiveUnid:0,
snap_num:0,
audit_num:0,
snapData:{
day_total_snap_num:0,
day_single_snap_num:0,
month_total_snap_num:0,
month_single_snap_num:0
}
}
},
components:{
showmap,
videoPlay,
behaviortrend,
behaviordis,
alarmEvent,
eventList,
devInfo
},
mounted(){
import showmap from "./map";
import videoPlay from "../public/videoPlay";
import behaviortrend from "./behaviortrend";
import behaviordis from "./behaviordis";
import eventList from "./eventList";
import alarmEvent from "./alarmEvent";
import devInfo from "./devInfo";
export default {
data() {
return {
collects: {},
typeList: [],
tableData: [],
eventTypeList: [],
illageList: [],
setShow: false,
archiveUnid: 0,
snap_num: 0,
audit_num: 0,
snapData: {
day_total_snap_num: 0,
day_single_snap_num: 0,
month_total_snap_num: 0,
month_single_snap_num: 0
}
};
},
components: {
showmap,
videoPlay,
behaviortrend,
behaviordis,
alarmEvent,
eventList,
devInfo
},
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);
},
},
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(){
this.$api.show.getBehaviorSna().then(res => {
this.snapData = res;
})
}
},
created(){
this.getBehaviorSnap()
}
}
getBehaviorSnap() {
this.$api.show.getBehaviorSna().then(res => {
this.snapData = res;
});
}
},
created() {
this.getBehaviorSnap();
}
};
</script>
<style scoped="scoped" lang="stylus">
......@@ -203,7 +203,7 @@ import devInfo from './devInfo'
display:none!important;
background:red!important
}
.pop-info{
float: left;
padding-left: 20px;
......@@ -254,7 +254,7 @@ import devInfo from './devInfo'
margin-bottom: 8px;
position: relative;
}
.el-table__body tr{
background: #FFFFFF!important;
}
......@@ -318,5 +318,4 @@ import devInfo from './devInfo'
top 10px
z-index 1000
}
</style>
src/views/trafficShow/index.vue
<template>
<el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
<el-col :span="13" >
<div id="map" class="maps">
<showmap ref="map" @playvideo="playvideo"></showmap>
<div class="eventlist-box">
<!-- <eventList></eventList> -->
<devInfo></devInfo>
</div>
</div>
<div style="clear: both;"></div>
</el-col>
<el-col :span="11">
<div class="video-box">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay>
</div>
<div class="collect-box">
<div class="header-title">今日抓拍量</div>
<div class="collect-content">
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.kakou_total_snap_num}}</div>
<div>卡口总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.event_total_snap_num}}</div>
<div>事件总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.illega_total_snap_num}}</div>
<div>违法总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{snapData.key_vehicle_total_snap_num}}</div>
<div>特殊车辆总量</div>
</el-col>
</div>
</div>
<div style="clear: both;"></div>
</el-col>
<el-col :span="24" class="clearpright">
<el-row :gutter="12" class="bottom-box">
<el-col :span="8">
<div class="bottom-item-box">
<illegaltrend></illegaltrend>
</div>
</el-col>
<el-col :span="5">
<div class="bottom-item-box">
<eventTypedis></eventTypedis>
</div>
</el-col>
<el-col :span="3">
<div class="bottom-item-box">
<div class="title">重点车辆分布</div>
<!-- <div class="car-dis-info" v-for="(item, index) in keyVehicleData" :key="index">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class="">
<span class="car-num">{{item.total_num}}</span>辆
</div>
<div>{{item.vehicle_name}}</div>
</div>
</div> -->
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class="">
<span class="car-num">10</span>辆
</div>
<div>渣土车抓拍</div>
</div>
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class="">
<span class="car-num">10</span>辆
</div>
<div>危险品车</div>
</div>
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class="">
<span class="car-num">29</span>辆
</div>
<div>重型罐式车</div>
</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>
<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>
<div class="eventlist-box">
<!-- <eventList></eventList> -->
<devInfo></devInfo>
<div class="video-box">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay>
</div>
</div>
</div>
<div style="clear: both;"></div>
</el-col>
<el-col :span="9">
<el-row>
<div class="collect-box">
<div class="header-title">今日抓拍量</div>
<div class="collect-content">
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.kakou_total_snap_num }}</div>
<div>卡口总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.event_total_snap_num }}</div>
<div>事件总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.illega_total_snap_num }}</div>
<div>违法总量</div>
</el-col>
<el-col :span="6" class="content-item">
<div class="item-num">
{{ snapData.key_vehicle_total_snap_num }}
</div>
<div>特殊车辆总量</div>
</el-col>
</div>
</div>
</el-row>
<el-row :gutter="12" class="event-type-box" style="margin-top:1vh">
<el-col :span="16">
<div class="right-item-box">
<eventTypedis></eventTypedis>
</div>
</el-col>
<el-col :span="8" style="padding-right:0">
<div class="right-item-box">
<div class="title">重点车辆分布</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class=""><span class="car-num">10</span>辆</div>
<div>渣土车抓拍</div>
</div>
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class=""><span class="car-num">10</span>辆</div>
<div>危险品车</div>
</div>
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxin-bianzu2"></span>
</div>
<div class="right-content">
<div class=""><span class="car-num">29</span>辆</div>
<div>重型罐式车</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row style="margin-top:1vh;background:#fff">
<div class="">
<illegaltrend></illegaltrend>
</div>
</el-row>
<el-row class="clearpright" style="margin-top:1vh">
<div class="right-item-box">
<div class="title">实时事件</div>
<alarmEvent @event="alarmevent"></alarmEvent>
</div>
</el-row>
<div style="clear: both;"></div>
</el-col>
</el-row>
</template>
<script>
import showmap from './map'
import videoPlay from '../public/videoPlay'
import illegaltrend from './illegaltrend'
import eventTypedis from './eventTypedis'
import eventList from './eventList'
import alarmEvent from './alarmEvent'
import devInfo from '../behaviorShow/devInfo'
export default{
data(){
return{
typeList:[],
tableData:[],
eventTypeList:[],
keyVehicleData:[],
illageList:[],
setShow:false,
archiveUnid:0,
snap_num:0,
playurl:'',
audit_num:0,
snapData:{
illega_total_snap_num:0,
key_vehicle_total_snap_num:0,
event_total_snap_num:0,
kakou_total_snap_num:0,
}
}
},
components:{
showmap,
videoPlay,
illegaltrend,
eventTypedis,
alarmEvent,
devInfo,
eventList
},
mounted(){
},
methods:{
alarmevent(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
import showmap from "./map";
import videoPlay from "../public/videoPlay";
import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis";
import eventList from "./eventList";
import alarmEvent from "./alarmEvent";
import devInfo from "../behaviorShow/devInfo";
export default {
data() {
return {
typeList: [],
tableData: [],
eventTypeList: [],
keyVehicleData: [],
illageList: [],
setShow: false,
archiveUnid: 0,
snap_num: 0,
playurl: "",
audit_num: 0,
snapData: {
illega_total_snap_num: 0,
key_vehicle_total_snap_num: 0,
event_total_snap_num: 0,
kakou_total_snap_num: 0
}
};
},
components: {
showmap,
videoPlay,
illegaltrend,
eventTypedis,
alarmEvent,
devInfo,
eventList
},
mounted() {},
methods: {
alarmevent(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(){
this.$api.show.getTrafficSnap().then(res => {
this.snapData = res;
})
},
getKeyVehicle(){
this.$api.show.getKeyVehicle().then(res => {
this.keyVehicleData = res;
})
},
setTimeout(() => {
this.$refs.ocx.videoPlay();
}, 0);
},
created(){
this.getTrafficSnap()
this.getKeyVehicle()
}
}
// 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;
});
}
},
created() {
this.getTrafficSnap();
this.getKeyVehicle();
}
};
</script>
<style scoped="scoped" lang="stylus">
......@@ -287,7 +272,7 @@ import devInfo from '../behaviorShow/devInfo'
display:none!important;
background:red!important
}
.pop-info{
float: left;
padding-left: 20px;
......@@ -333,26 +318,27 @@ import devInfo from '../behaviorShow/devInfo'
width: 37px;
}
.maps{
height: 59.3vh;
height: 89.3vh;
width:100%;
margin-bottom: 8px;
position: relative;
background red
}
.el-table__body tr{
background: #FFFFFF!important;
}
.bottom-box{
.event-type-box{
width: 100%;
height: 26.5vh;
overflow: hidden;
}
.bottom-item-box {
.right-item-box {
height: 27vh;
background: #fff;
overflow: hidden;
}
.bottom-item-box .title{
.right-item-box .title{
padding-left: 5px;
line-height 3vh
}
......@@ -402,5 +388,4 @@ import devInfo from '../behaviorShow/devInfo'
top 10px
z-index 1000
}
</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!