Skip to content

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

摄像头可以显示，删除无用代码

parent 7f725926
Show whitespace changes
Inline Side-by-side
Showing with 35 additions and 302 deletions
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 363d7ded
......@@ -17,39 +17,9 @@
</el-tree>
</el-aside>
<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">
<video :ref="item.ref" width="433" height="289" muted autoplay class="twelveVideo"></video>
</div> -->
</div>
<div v-if="btnChildren" class="btn1">
<el-button
:disabled="up"
@click="upPage"
style="background-color: #7bbfea; color: white"
>上一页</el-button
><el-button
:disabled="down"
@click="downPage"
style="background-color: #7bbfea; color: white"
>下一页</el-button
>
</div>
<div v-if="isChildren2">
<iframe :src="url" class="iframeSingle"></iframe>
</div>
<div v-show="noPtz" class="noPtzVideo1">
<div class="noPtzCloseStyle" @click="noPtzCloseFn()"><span class="el-icon-close"></span> 关闭</div>
<video id="noPtzVideo" width="1300" height="720" muted autoplay></video>
</div>
<div v-show="isChildren3" class="dahuaViews"></div>
<div v-if="noPtz" class="noPtzVideo1">
<el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
<iframe :src="iframeSrc" class="iframeSingle"></iframe>
</div>
<div class="aiAnalysisViews">
......@@ -62,9 +32,9 @@
</el-radio-group>
</div>
<div class="aiAnalysisViews_1">
<span>AI报警总数：23</span><span style="margin-left:30px;">处理数：10</span>
<span>AI报警总数：{{alarmData.total}}</span><span style="margin-left:30px;">处理数：{{alarmData.handle}}</span>
</div>
<div class="aiAnalysisViews_1">处理率：10/23*100%</div>
<div class="aiAnalysisViews_1">处理率：{{parseFloat(alarmData.handle / alarmData.total * 100).toFixed(2)}}%</div>
<div id="echarts1" class="echarts1"></div>
<div class="aiAnalysisViews_1">报警车辆排行榜</div>
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
......@@ -73,7 +43,11 @@
<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-column label="查看" align="center">
<template slot-scope="scope">
<el-image style="width: 70px; height: 50px" :src="imgSrcStart + 'avatar/' + scope.row.photo" :preview-src-list="[imgSrcStart + 'avatar/' + scope.row.photo]"></el-image>
</template>
</el-table-column>
</el-table>
</div>
......@@ -83,37 +57,21 @@
</template>
<script>
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 {
imgSrcStart:process.env.VUE_APP_LOCAL_API2,
iframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&devIdno=202208221701&account=admin&password=admin&channel=4',
aiAnalysisTableData:[],
videoData: [],
defaultProps: {
children: "children",
label: "label",
},
itemList: [],
itemListNext: [],
itemListMiddleman: [],
isChildren1: true,
isChildren2: false,
isChildren3: false,
btnChildren: false,
isIP: "",
url:"http://192.168.9.2:85/cn/demo.html?ip=",
url1:"http://192.168.9.2:85/cn/demo",
dahuaData: [],
up: true,
down: false,
accessToken:"",
noPtz:false,
elmainShow1:false,
aiTabPosition:'今天',
echarts1Data:[{ value: 1048, name: '接打电话' }, { value: 735, name: '分神驾驶' }, { value: 580, name: '前向碰撞' },],
echarts2Data:{
......@@ -122,23 +80,18 @@ export default {
kache2:[20,20,20,20,20,20,],
kache3:[20,20,20,20,20,20,],
},
alarmData:{
total:30,
handle:10,
},
};
},
mounted() {
this.getCode();
//this.getDaHua();
//this.getAccessToken();
this.echarts1Fn();
this.echarts2Fn();
},
methods: {
getAccessToken() {
let param = {};
HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
this.accessToken = res.data.accessToken;
})
},
getCode() {
//分区数据
HttpReq.truckDispatching.carMonitoringFleetQuery({size: 999}).then((res) => {
......@@ -173,154 +126,12 @@ export default {
},
handleNodeClick(data) {
console.log(data);
let that = this;
if (data.children) {
let temporaryData1 = [];
let temporaryData2 = [];
if (data.children.length > 12) {
for (let i = 0; i < 12; i++) {
temporaryData1.push(data.children[i]);
}
for (let j = 12; j < data.children.length; j++) {
temporaryData2.push(data.children[j]);
}
this.itemList = temporaryData1;
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();
// });
// })
// })
// if(noPtzhls != null){
// noPtzhls.destroy();
// }
return
} 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();
// });
// })
// })
// if(noPtzhls != null){
// noPtzhls.destroy();
// }
}
this.isChildren1 = true;
this.isChildren2 = false;
this.isChildren3 = false;
this.up = true;
this.down = false;
//this.noPtz = false;
//改变视频大小
// this.$nextTick(()=>{
// this.winSize();
// })
} else {
this.btnChildren = false;
let noPtzVideo = document.getElementById('noPtzVideo');
noPtzhls = new Hls();
//noPtzhls.loadSource(data.url);
noPtzhls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
noPtzhls.attachMedia(noPtzVideo);
noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
noPtzVideo.play();
});
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = false;
this.btnChildren = false;
this.elmainShow1 = true;
this.noPtz = true;
}
},
getDaHua() {
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100}).then((res) => {
let dahua = [];
res.content.forEach(function (item) {
if (item.motorcadeId == 2) {
dahua.push(item);
}
});
this.dahuaData = dahua;
})
},
upPage() {
let that = this;
this.up = true;
this.down = false;
this.itemList = this.itemListMiddleman;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
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.winSize();
// })
},
downPage() {
let that = this;
this.itemListMiddleman = this.itemList;
this.itemList = [];
this.up = false;
this.down = true;
this.itemList = this.itemListNext;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
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.winSize();
// })
},
//监控el-main大小
winSize(){
let elMain = document.getElementById('elMain');
let elMainWight = parseInt(getComputedStyle(elMain).width) ;
if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 390;
twelveVideo[i].height = 250;
}
}
},
aiTabPositionFn(){
console.log(this.aiTabPosition);
},
......@@ -470,72 +281,17 @@ export default {
option && myChart.setOption(option);
},
noPtzCloseFn(){
this.elmainShow1 = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
},
},
//销毁
beforeDestroy() {
this.itemList.forEach(function(item,index){
item.hls.destroy();
})
if(noPtzhls != null){
noPtzhls.destroy();
}
}
};
</script>
<style>
.noPtzCloseStyle{
position: absolute;
top:1vh;
right: 1vw;
width: 5vw;
height: 4vh;
background-color: rgb(170,170,170);
color: white;
font-size: 22px;
border-radius: 5px;
text-align: center;
line-height: 4vh;
cursor: pointer;
}
.noPtzVideo1{
width: 100%;
height: 100%;
background-color: white;
padding-top: 10vh;
box-sizing: border-box;
position: relative;
}
.mianBodysSon{
width: 100%;
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.btn1 {
position: absolute;
top: 92%;
left: 57%;
}
.dahuaViews {
display: flex;
flex-wrap: wrap;
margin-left: 5px;
}
.dahuaViews>div{
margin-left: 1px;
border: 1px greenyellow solid;
}
.videoChildren {
scrollbar-width: none;
}
.el-header,
.el-footer {
background-color: #7bbfea;
......@@ -545,7 +301,6 @@ export default {
font-size: 25px !important;
line-height: 60px;
}
.el-aside::-webkit-scrollbar {
display: none;
}
......@@ -560,17 +315,6 @@ export default {
margin-bottom: 0px;
z-index: 3;
}
.video111 .el-mains {
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 {
height: 55px;
background-color: #e9eef3;
......@@ -583,36 +327,25 @@ export default {
.el-tree-node__content:hover {
background-color: white;
}
.video111 .iframeList {
display: flex;
flex-wrap: wrap;
align-content: center;
padding: 0;
overflow: hidden;
}
.video111 .iframeList>div{
border: 0.5px greenyellow solid;
}
.iframeItem {
height: 220px;
width: 340px;
background: #fff;
margin-bottom: 0px;
}
.iframeItem::-webkit-scrollbar {
display: none;
}
.iframeItem {
scrollbar-width: none;
.noPtzCloseStyle{
position: absolute;
top:0.5vh;
right: 0.5vh;
font-size: 20px;
cursor: pointer;
}
@-moz-document url-prefix() {
.iframeItem {
border: 1px solid palegreen;
}
.noPtzVideo1{
width: 68vw;
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
z-index: 3;
border-left: 1px solid gainsboro;
}
.iframeSingle {
width: 1378px;
height: 763px;
.video111 .iframeSingle {
width: 68vw;
height: 94.5vh;
}
.aiAnalysisViews{
width: 20vw;
......
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