Skip to content

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

1

parent 6a1ce0fb
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 41 deletions
src/components/ezuikit/carsEZUIKitJs.vue
View file @ f5f94c66
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
</el-tree> </el-tree>
</el-aside> </el-aside>
<div id="elMain" class="el-mains" style="height: 94.5vh;" v-show="elmainShow1"> <div id="elMain" class="el-mains" style="height: 94.5vh;" v-show="elmainShow1">
<div v-if="isChildren1" class="iframeList"> <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> <video :ref="item.ref" width="433" height="289" muted autoplay class="twelveVideo"></video>
</div> </div> -->
</div> </div>
<div v-if="btnChildren" class="btn1"> <div v-if="btnChildren" class="btn1">
...@@ -64,7 +64,16 @@ ...@@ -64,7 +64,16 @@
<span>AI报警总数：23</span><span style="margin-left:30px;">处理数：10</span> <span>AI报警总数：23</span><span style="margin-left:30px;">处理数：10</span>
</div> </div>
<div class="aiAnalysisViews_1">处理率：10/23*100%</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> </div>
</el-container> </el-container>
...@@ -76,10 +85,13 @@ ...@@ -76,10 +85,13 @@
import Hls from "hls.js" import Hls from "hls.js"
//import EZUIKit from "ezuikit-js"; //import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
var noPtzhls = null; var noPtzhls = null;
export default { export default {
data() { data() {
return { return {
aiAnalysisTableData:[],
videoData: [], videoData: [],
defaultProps: { defaultProps: {
children: "children", children: "children",
...@@ -93,8 +105,6 @@ export default { ...@@ -93,8 +105,6 @@ export default {
isChildren3: false, isChildren3: false,
btnChildren: false, btnChildren: false,
isIP: "", 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=", url:"http://192.168.9.2:85/cn/demo.html?ip=",
url1:"http://192.168.9.2:85/cn/demo", url1:"http://192.168.9.2:85/cn/demo",
dahuaData: [], dahuaData: [],
...@@ -104,12 +114,22 @@ export default { ...@@ -104,12 +114,22 @@ export default {
noPtz:false, noPtz:false,
elmainShow1:false, elmainShow1:false,
aiTabPosition:'今天', 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() { mounted() {
this.getCode(); this.getCode();
//this.getDaHua(); //this.getDaHua();
//this.getAccessToken(); //this.getAccessToken();
this.echarts1Fn();
this.echarts2Fn();
}, },
methods: { methods: {
getAccessToken() { getAccessToken() {
...@@ -168,41 +188,41 @@ export default { ...@@ -168,41 +188,41 @@ export default {
this.itemListNext = temporaryData2; this.itemListNext = temporaryData2;
this.btnChildren = true; this.btnChildren = true;
this.$nextTick(()=>{ // this.$nextTick(()=>{
this.itemList.forEach(function(item,index){ // this.itemList.forEach(function(item,index){
item.hls = new Hls(); // item.hls = new Hls();
//item.hls.loadSource(item.url) // //item.hls.loadSource(item.url)
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8') // 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.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() { // item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play(); // that.$refs[item.ref][0].play();
}); // });
}) // })
}) // })
if(noPtzhls != null){ // if(noPtzhls != null){
noPtzhls.destroy(); // noPtzhls.destroy();
} // }
} else { } else {
this.btnChildren = false; this.btnChildren = false;
this.itemList = data.children; this.itemList = data.children;
this.$nextTick(()=>{ // this.$nextTick(()=>{
this.itemList.forEach(function(item,index){ // this.itemList.forEach(function(item,index){
item.hls = new Hls(); // item.hls = new Hls();
//item.hls.loadSource(item.url) // //item.hls.loadSource(item.url)
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8') // 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.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() { // item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play(); // that.$refs[item.ref][0].play();
}); // });
}) // })
}) // })
if(noPtzhls != null){ // if(noPtzhls != null){
noPtzhls.destroy(); // noPtzhls.destroy();
} // }
} }
...@@ -211,7 +231,7 @@ export default { ...@@ -211,7 +231,7 @@ export default {
this.isChildren3 = false; this.isChildren3 = false;
this.up = true; this.up = true;
this.down = false; this.down = false;
this.noPtz = false; //this.noPtz = false;
//改变视频大小 //改变视频大小
// this.$nextTick(()=>{ // this.$nextTick(()=>{
...@@ -302,9 +322,154 @@ export default { ...@@ -302,9 +322,154 @@ export default {
}, },
aiTabPositionFn(){ aiTabPositionFn(){
console.log(this.aiTabPosition); 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() { beforeDestroy() {
this.itemList.forEach(function(item,index){ this.itemList.forEach(function(item,index){
item.hls.destroy(); item.hls.destroy();
...@@ -318,8 +483,12 @@ export default { ...@@ -318,8 +483,12 @@ export default {
</script> </script>
<style> <style>
.noPtzVideo1{ .noPtzVideo1{
padding-top: 5vh; width: 100%;
height: 100%;
background-color: white;
padding-top: 10vh;
box-sizing: border-box; box-sizing: border-box;
position: relative;
} }
.mianBodysSon{ .mianBodysSon{
width: 100%; width: 100%;
...@@ -371,12 +540,13 @@ export default { ...@@ -371,12 +540,13 @@ export default {
} }
.video111 .el-mains { .video111 .el-mains {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 0);
color: #333; color: #333;
text-align: center; text-align: center;
overflow:hidden; overflow:hidden;
width: 68vw; width: 68vw;
z-index: 3; z-index: 3;
border-left: 1px solid gainsboro;
} }
.el-tree-node__content { .el-tree-node__content {
...@@ -428,6 +598,7 @@ export default { ...@@ -428,6 +598,7 @@ export default {
background-color: white; background-color: white;
padding: 1vh 0px 0px 1vh; padding: 1vh 0px 0px 1vh;
box-sizing: border-box; box-sizing: border-box;
border-left: 1px solid gainsboro;
} }
.aiAnalysisViews_Title{ .aiAnalysisViews_Title{
font-size: 24px; font-size: 24px;
...@@ -438,4 +609,14 @@ export default { ...@@ -438,4 +609,14 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.echarts1{
width: 99%;
height: 20vh;
overflow: hidden;
}
.echarts2{
width: 99%;
height: 27vh;
overflow: hidden;
}
</style> </style>
src/views/MLargeScreen/index.vue
View file @ f5f94c66
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
<div class="currentTimeStyle">{{currentTime}}</div> <div class="currentTimeStyle">{{currentTime}}</div>
</div> </div>
<div class="videoSelectView" v-show="videoSelect1"> <div class="videoSelectView" v-show="videoSelect1">
<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : ''">矿山视频监控</div>
<div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : ''">车辆视频监控</div> <div @click="lookFn2()" :class="videoSelectStyle == 2 ? 'videoSelectStyle1' : ''">车辆视频监控</div>
<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : ''">矿山视频监控</div>
</div> </div>
<!-- 内容 --> <!-- 内容 -->
<div class="content_view"> <div class="content_view">
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
//单个车辆视频展示 //单个车辆视频展示
monitorCover1Show:false, monitorCover1Show:false,
//视频监控配置 //视频监控配置
videoSelectStyle:1, videoSelectStyle:2,
} }
}, },
mounted() { mounted() {
...@@ -228,6 +228,7 @@ export default { ...@@ -228,6 +228,7 @@ export default {
this.$refs.dataAnalysisMethod.loadData(false); this.$refs.dataAnalysisMethod.loadData(false);
if(this.videoSelect1 == false){ if(this.videoSelect1 == false){
this.videoSelect1 = true; this.videoSelect1 = true;
this.lookFn2();
}else{ }else{
this.videoSelect1 = false; this.videoSelect1 = false;
this.kaungEZUIKitJsShow = 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