Skip to content

卡
卡车调度系统
Commit f5f94c66 authored by xxx's avatar xxx
Browse files
Options

1

parent 6a1ce0fb
Show whitespace changes
Inline Side-by-side
Showing with 223 additions and 41 deletions
src/components/ezuikit/carsEZUIKitJs.vue
View file @ f5f94c66
......@@ -20,9 +20,9 @@
<div id="elMain" class="el-mains" style="height: 94.5vh;" v-show="elmainShow1">
<div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren">
<!-- <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
<video :ref="item.ref" width="433" height="289" muted autoplay class="twelveVideo"></video>
</div>
</div> -->
</div>
<div v-if="btnChildren" class="btn1">
......@@ -64,7 +64,16 @@
<span>AI报警总数：23</span><span style="margin-left:30px;">处理数：10</span>
</div>
<div class="aiAnalysisViews_1">处理率：10/23*100%</div>
<div></div>
<div id="echarts1" class="echarts1"></div>
<div class="aiAnalysisViews_1">报警车辆排行榜</div>
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
<div class="aiAnalysisViews_1">报警车辆信息</div>
<el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
<el-table-column prop="carNo" label="车牌号" align="center"></el-table-column>
<el-table-column prop="type" label="报警类型" align="center"></el-table-column>
<el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
<el-table-column label="查看" align="center"></el-table-column>
</el-table>
</div>
</el-container>
......@@ -76,10 +85,13 @@
import Hls from "hls.js"
//import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
var noPtzhls = null;
export default {
data() {
return {
aiAnalysisTableData:[],
videoData: [],
defaultProps: {
children: "children",
......@@ -93,8 +105,6 @@ export default {
isChildren3: false,
btnChildren: false,
isIP: "",
// url: "http://127.0.0.1:5500/webs/cn/demo.html",
// url1: "http://127.0.0.1:5500/webs/cn/demo1.html",
url:"http://192.168.9.2:85/cn/demo.html?ip=",
url1:"http://192.168.9.2:85/cn/demo",
dahuaData: [],
......@@ -104,12 +114,22 @@ export default {
noPtz:false,
elmainShow1:false,
aiTabPosition:'今天',
echarts1Data:[{ value: 1048, name: '接打电话' }, { value: 735, name: '分神驾驶' }, { value: 580, name: '前向碰撞' },],
echarts2Data:{
name:['鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111',],
kache1:[20,20,20,20,20,20,],
kache2:[20,20,20,20,20,20,],
kache3:[20,20,20,20,20,20,],
},
};
},
mounted() {
this.getCode();
//this.getDaHua();
//this.getAccessToken();
this.echarts1Fn();
this.echarts2Fn();
},
methods: {
getAccessToken() {
......@@ -168,41 +188,41 @@ export default {
this.itemListNext = temporaryData2;
this.btnChildren = true;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
//item.hls.loadSource(item.url)
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
// this.$nextTick(()=>{
// this.itemList.forEach(function(item,index){
// item.hls = new Hls();
// //item.hls.loadSource(item.url)
// item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
// item.hls.attachMedia(that.$refs[item.ref][0]);
// item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
// that.$refs[item.ref][0].play();
// });
// })
// })
if(noPtzhls != null){
noPtzhls.destroy();
}
// if(noPtzhls != null){
// noPtzhls.destroy();
// }
} else {
this.btnChildren = false;
this.itemList = data.children;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
//item.hls.loadSource(item.url)
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
// this.$nextTick(()=>{
// this.itemList.forEach(function(item,index){
// item.hls = new Hls();
// //item.hls.loadSource(item.url)
// item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
// item.hls.attachMedia(that.$refs[item.ref][0]);
// item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
// that.$refs[item.ref][0].play();
// });
// })
// })
if(noPtzhls != null){
noPtzhls.destroy();
}
// if(noPtzhls != null){
// noPtzhls.destroy();
// }
}
......@@ -211,7 +231,7 @@ export default {
this.isChildren3 = false;
this.up = true;
this.down = false;
this.noPtz = false;
//this.noPtz = false;
//改变视频大小
// this.$nextTick(()=>{
......@@ -302,9 +322,154 @@ export default {
},
aiTabPositionFn(){
console.log(this.aiTabPosition);
},
//饼图1
echarts1Fn(){
echarts.init(document.getElementById('echarts1')).dispose();
var myChart = echarts.init(document.getElementById('echarts1'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '1%',
left: 'center'
},
color:['rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)',],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius:20,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '35',
fontWeight: 'bold',
color:'black',
}
},
labelLine: {
show: false
},
data: this.echarts1Data,
}
]
};
option && myChart.setOption(option);
},
//柱状图2
echarts2Fn(){
echarts.init(document.getElementById('echarts2')).dispose();
var myChart = echarts.init(document.getElementById('echarts2'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'black',
fontSize:14,
},
},
grid: {
top: '15%',
left: '1%',
right: '5%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'category',
data: this.echarts2Data.name,
axisLabel: {
show: true,
textStyle: {
color: 'black',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'black',
width: 1
}
},
},
xAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'black',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'black',
width: 0
}
},
// 销毁
},
series: [
{
name: '接打电话',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.echarts2Data.kache1,
barWidth: 20,
itemStyle: {
color: 'rgb(84,112,198)'
},
},
{
name: '分神驾驶',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.echarts2Data.kache2,
barWidth: 20,
itemStyle: {
color: 'rgb(145,204,117)'
},
},
{
name: '前向碰撞',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.echarts2Data.kache3,
barWidth: 20,
itemStyle: {
color: 'rgb(250,200,88)'
},
}
]
};
option && myChart.setOption(option);
},
},
//销毁
beforeDestroy() {
this.itemList.forEach(function(item,index){
item.hls.destroy();
......@@ -318,8 +483,12 @@ export default {
</script>
<style>
.noPtzVideo1{
padding-top: 5vh;
width: 100%;
height: 100%;
background-color: white;
padding-top: 10vh;
box-sizing: border-box;
position: relative;
}
.mianBodysSon{
width: 100%;
......@@ -371,12 +540,13 @@ export default {
}
.video111 .el-mains {
background-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0);
color: #333;
text-align: center;
overflow:hidden;
width: 68vw;
z-index: 3;
border-left: 1px solid gainsboro;
}
.el-tree-node__content {
......@@ -428,6 +598,7 @@ export default {
background-color: white;
padding: 1vh 0px 0px 1vh;
box-sizing: border-box;
border-left: 1px solid gainsboro;
}
.aiAnalysisViews_Title{
font-size: 24px;
......@@ -438,4 +609,14 @@ export default {
font-size: 18px;
font-weight: 600;
}
.echarts1{
width: 99%;
height: 20vh;
overflow: hidden;
}
.echarts2{
width: 99%;
height: 27vh;
overflow: hidden;
}
</style>
src/views/MLargeScreen/index.vue
View file @ f5f94c66
......@@ -18,8 +18,8 @@
<div class="currentTimeStyle">{{currentTime}}</div>
</div>
<div class="videoSelectView" v-show="videoSelect1">
<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : ''">矿山视频监控</div>
<div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : ''">车辆视频监控</div>
<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : ''">矿山视频监控</div>
</div>
<!-- 内容 -->
<div class="content_view">
......@@ -90,7 +90,7 @@ export default {
//单个车辆视频展示
monitorCover1Show:false,
//视频监控配置
videoSelectStyle:1,
videoSelectStyle:2,
}
},
mounted() {
......@@ -228,6 +228,7 @@ export default {
this.$refs.dataAnalysisMethod.loadData(false);
if(this.videoSelect1 == false){
this.videoSelect1 = true;
this.lookFn2();
}else{
this.videoSelect1 = false;
this.kaungEZUIKitJsShow = false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment