Skip to content

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

1

parent 363d7ded
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 433 deletions
src/components/ezuikit/EZUIKitJs.vue
View file @ 4e1a525b
<template> <template>
<div> <div class="video111">
<el-container> <el-container>
<el-header style="font-size: 20px; font-weight: bold"> <el-container style="display:flex;justify-content: space-between;">
卡车调度系统矿山监控视频 <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;">
</el-header>
<el-container>
<el-aside width="230px" style="height: 82vh">
<el-tree <el-tree
:data="videoData" :data="videoData"
:props="defaultProps" :props="defaultProps"
...@@ -20,88 +17,82 @@ ...@@ -20,88 +17,82 @@
</el-tree> </el-tree>
</el-aside> </el-aside>
<el-main id="elMain" style="height: 82vh"> <div v-if="noPtz" class="noPtzVideo1">
<el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
<div v-if="isChildren1" class="iframeList"> <iframe :src="iframeSrc" class="iframeSingle"></iframe>
<div v-for="(item,index) in itemList" :key="index" class="videoChildren"> </div>
<video :ref="item.ref" width="330" height="200" muted autoplay class="twelveVideo"></video>
</div>
</div>
<div v-if="btnChildren" class="btn1"> <div class="aiAnalysisViews">
<el-button <div class="aiAnalysisViews_Title">智能AI分析</div>
:disabled="up" <div style="margin:1vh 0px 0px 0vw;">
@click="upPage" <el-radio-group v-model="aiTabPosition" @change="aiTabPositionFn">
style="background-color: #7bbfea; color: white" <el-radio-button label="今天">今天</el-radio-button>
>上一页</el-button <el-radio-button label="近7天">近7天</el-radio-button>
><el-button <el-radio-button label="近30天">近30天</el-radio-button>
:disabled="down" </el-radio-group>
@click="downPage"
style="background-color: #7bbfea; color: white"
>下一页</el-button
>
</div> </div>
<div class="aiAnalysisViews_1">
<div v-if="isChildren2"> <span>AI报警总数：{{alarmData.total}}</span><span style="margin-left:30px;">处理数：{{alarmData.handle}}</span>
<iframe :src="url" class="iframeSingle"></iframe>
</div>
<div v-show="noPtz">
<video id="noPtzVideo" width="1378" muted autoplay></video>
</div> </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>
<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">
<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>
<div v-show="isChildren3" class="dahuaViews"></div>
</el-main>
</el-container> </el-container>
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
// import Hls from "hls.js"
// import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
var noPtzhls = null; import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
imgSrcStart:process.env.VUE_APP_LOCAL_API2,
iframeSrc:'',
defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
aiAnalysisTableData:[],
videoData: [], videoData: [],
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label", label: "label",
}, },
itemList: [],
itemListNext: [],
itemListMiddleman: [],
isChildren1: true,
isChildren2: false,
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: [],
up: true,
down: false,
accessToken:"",
noPtz:false, noPtz: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,],
},
alarmData:{
total:30,
handle:10,
},
}; };
}, },
mounted() { mounted() {
this.getCode(); this.getCode();
//this.getDaHua(); this.echarts1Fn();
//this.getAccessToken(); this.echarts2Fn();
}, },
methods: { methods: {
getAccessToken() {
let param = {};
HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
this.accessToken = res.data.accessToken;
})
},
getCode() { getCode() {
//分区数据 //分区数据
HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => { HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => {
...@@ -129,341 +120,179 @@ export default { ...@@ -129,341 +120,179 @@ export default {
}) })
}); });
this.videoData = data1; this.videoData = data1;
console.log(this.videoData);
}) })
} }
}) })
}, },
handleNodeClick(data) { handleNodeClick(data) {
console.log(data);
let that = this;
if (data.children) { if (data.children) {
if (data.children[0].brand == 1) { return
let temporaryData1 = []; } else {
let temporaryData2 = []; //this.iframeSrc = this.defaultIframeSrc + data.carnumber;
if (data.children.length > 12) { this.iframeSrc = this.defaultIframeSrc + '202208221701';
for (let i = 0; i < 12; i++) { this.noPtz = true;
temporaryData1.push(data.children[i]); }
} },
for (let j = 12; j < data.children.length; j++) { aiTabPositionFn(){
temporaryData2.push(data.children[j]); console.log(this.aiTabPosition);
} },
this.itemList = temporaryData1; //饼图1
this.itemListNext = temporaryData2; echarts1Fn(){
this.btnChildren = true; echarts.init(document.getElementById('echarts1')).dispose();
var myChart = echarts.init(document.getElementById('echarts1'));
this.$nextTick(()=>{ var option = {
this.itemList.forEach(function(item,index){ tooltip: {
item.hls = new Hls(); trigger: 'item'
item.hls.loadSource(item.url) },
item.hls.attachMedia(that.$refs[item.ref][0]); legend: {
item.hls.on(Hls.Events.MANIFEST_PARSED,function() { top: '1%',
that.$refs[item.ref][0].play(); 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: [
{
if(noPtzhls != null){ type: 'pie',
noPtzhls.destroy(); radius: ['40%', '70%'],
} avoidLabelOverlap: false,
itemStyle: {
} else { borderRadius:20,
this.btnChildren = false; borderColor: '#fff',
this.itemList = data.children; borderWidth: 2,
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();
});
})
})
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 if (data.children[0].brand == 2) {
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = true;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
let dahuaViews = document.querySelector(".dahuaViews");
dahuaViews.innerHTML = `<div><div id="dahuaVideo0"></div></div>
<div><div id="dahuaVideo1"></div></div>
<div><div id="dahuaVideo2"></div></div>
<div><div id="dahuaVideo3"></div></div>`;
var player = this.$cyberplayerJs(`dahuaVideo0`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[0].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
var player = this.$cyberplayerJs(`dahuaVideo1`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[1].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
var player = this.$cyberplayerJs(`dahuaVideo2`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[2].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
}, },
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey label: {
}); show: false,
var player = this.$cyberplayerJs(`dahuaVideo3`).setup({ position: 'center'
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[3].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
}, },
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey emphasis: {
}); label: {
} show: true,
} else { fontSize: '35',
this.btnChildren = false; fontWeight: 'bold',
if (data.brand == 1) { color:'black',
HttpReq.truckDispatching.mineMonitoringHowYuntaiQuery({ip:data.cameraIp}).then((res) => {
if(!res){
let noPtzVideo = document.getElementById('noPtzVideo');
noPtzhls = new Hls();
noPtzhls.loadSource(data.url);
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.noPtz = true;
}else{
this.url = "";
let originalUrl = "http://192.168.9.2:85/cn/demo.html?ip=";
// let originalUrl = "http://127.0.0.1:5500/webs/cn/demo.html?ip=";
this.isChildren1 = false;
this.isChildren2 = true;
this.isChildren3 = false;
this.isIP = data.cameraIp;
this.url = originalUrl + data.cameraIp;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
} }
}
})
} else if (data.brand == 2) {
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = true;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
let dahuaViews = document.querySelector(".dahuaViews");
dahuaViews.innerHTML = '<div id="dahuaVideoAlone"></div>';
var player = this.$cyberplayerJs(`dahuaVideoAlone`).setup({
width: 1390, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 760, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: data.url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
}, },
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey labelLine: {
}); show: false
} },
} data: this.echarts1Data,
},
getDaHua() {
HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100}).then((res) => {
let dahua = [];
res.content.forEach(function (item) {
if (item.brand == 2) {
dahua.push(item);
} }
}); ]
this.dahuaData = dahua; };
}) option && myChart.setOption(option);
}, },
upPage() { //柱状图2
let that = this; echarts2Fn(){
this.up = true; echarts.init(document.getElementById('echarts2')).dispose();
this.down = false; var myChart = echarts.init(document.getElementById('echarts2'));
this.itemList = this.itemListMiddleman; var option = {
this.$nextTick(()=>{ tooltip: {
this.itemList.forEach(function(item,index){ trigger: 'axis',
item.hls = new Hls(); axisPointer: {
item.hls.loadSource(item.url) type: 'shadow'
item.hls.attachMedia(that.$refs[item.ref][0]); }
item.hls.on(Hls.Events.MANIFEST_PARSED,function() { },
that.$refs[item.ref][0].play(); legend: {
}); textStyle:{
}) color: 'black',
}) fontSize:14,
//改变视频大小 },
this.$nextTick(()=>{ },
this.winSize(); 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);
}, },
downPage() { noPtzCloseFn(){
let that = this; this.noPtz = false;
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 = 450;
// twelveVideo[i].height = 320;
// }
// }
if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 390;
twelveVideo[i].height = 250;
}
}
}
}, },
// 销毁 //销毁
beforeDestroy() { beforeDestroy() {
this.itemList.forEach(function(item,index){ this.iframeSrc = '';
item.hls.destroy();
})
if(noPtzhls != null){
noPtzhls.destroy();
}
} }
}; };
</script> </script>
<style> <style>
.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-header,
.el-footer { .el-footer {
background-color: #7bbfea; background-color: #7bbfea;
...@@ -473,7 +302,6 @@ export default { ...@@ -473,7 +302,6 @@ export default {
font-size: 25px !important; font-size: 25px !important;
line-height: 60px; line-height: 60px;
} }
.el-aside::-webkit-scrollbar { .el-aside::-webkit-scrollbar {
display: none; display: none;
} }
...@@ -486,16 +314,9 @@ export default { ...@@ -486,16 +314,9 @@ export default {
text-align: center; text-align: center;
padding: 0; padding: 0;
margin-bottom: 0px; margin-bottom: 0px;
z-index: 3;
overflow-y: scroll;
} }
.el-main {
background-color: white;
color: #333;
text-align: center;
overflow:hidden;
width: 73vw;
}
.el-tree-node__content { .el-tree-node__content {
height: 55px; height: 55px;
background-color: #e9eef3; background-color: #e9eef3;
...@@ -508,35 +329,51 @@ export default { ...@@ -508,35 +329,51 @@ export default {
.el-tree-node__content:hover { .el-tree-node__content:hover {
background-color: white; background-color: white;
} }
.iframeList { .noPtzCloseStyle{
display: flex; position: absolute;
flex-wrap: wrap; top:0.5vh;
align-content: center; right: 0.5vh;
padding-left: 25px; font-size: 20px;
box-sizing: border-box; cursor: pointer;
} }
.iframeList>div{ .noPtzVideo1{
border: 1px greenyellow solid; width: 68vw;
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
z-index: 3;
border-left: 1px solid gainsboro;
} }
.iframeItem { .video111 .iframeSingle {
height: 220px; width: 68vw;
width: 340px; height: 94.5vh;
background: #fff;
margin-bottom: 0px;
} }
.iframeItem::-webkit-scrollbar { .aiAnalysisViews{
display: none; width: 20vw;
height: 94.5vh;
background-color: white;
padding: 1vh 0px 0px 1vh;
box-sizing: border-box;
border-left: 1px solid gainsboro;
} }
.iframeItem { .aiAnalysisViews_Title{
scrollbar-width: none; font-size: 24px;
font-weight: 600;
} }
@-moz-document url-prefix() { .aiAnalysisViews_1{
.iframeItem { margin-top: 1vh;
border: 1px solid palegreen; font-size: 18px;
} font-weight: 600;
}
.echarts1{
width: 99%;
height: 20vh;
overflow: hidden;
} }
.iframeSingle { .echarts2{
width: 1378px; width: 99%;
height: 763px; height: 27vh;
overflow: hidden;
} }
</style> </style>
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 4e1a525b
...@@ -64,7 +64,8 @@ export default { ...@@ -64,7 +64,8 @@ export default {
data() { data() {
return { return {
imgSrcStart:process.env.VUE_APP_LOCAL_API2, 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', iframeSrc:'',
defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
aiAnalysisTableData:[], aiAnalysisTableData:[],
videoData: [], videoData: [],
defaultProps: { defaultProps: {
...@@ -106,7 +107,6 @@ export default { ...@@ -106,7 +107,6 @@ export default {
let fenquName = []; let fenquName = [];
res.content.forEach((item,index) => { res.content.forEach((item,index) => {
item.ref = "video" + index; item.ref = "video" + index;
item.hls = null;
item.label = item.carnumber; item.label = item.carnumber;
fenquName.push(item); fenquName.push(item);
}); });
...@@ -119,16 +119,16 @@ export default { ...@@ -119,16 +119,16 @@ export default {
}) })
}); });
this.videoData = data1; this.videoData = data1;
console.log(this.videoData);
}) })
} }
}) })
}, },
handleNodeClick(data) { handleNodeClick(data) {
console.log(data);
if (data.children) { if (data.children) {
return return
} else { } else {
//this.iframeSrc = this.defaultIframeSrc + data.carnumber;
this.iframeSrc = this.defaultIframeSrc + '202208221701';
this.noPtz = true; this.noPtz = true;
} }
}, },
...@@ -286,7 +286,7 @@ export default { ...@@ -286,7 +286,7 @@ export default {
}, },
//销毁 //销毁
beforeDestroy() { beforeDestroy() {
this.iframeSrc = '';
} }
}; };
...@@ -314,6 +314,7 @@ export default { ...@@ -314,6 +314,7 @@ export default {
padding: 0; padding: 0;
margin-bottom: 0px; margin-bottom: 0px;
z-index: 3; z-index: 3;
overflow-y: scroll;
} }
.el-tree-node__content { .el-tree-node__content {
height: 55px; height: 55px;
......
src/views/monitoringManagement/carVideoSetUp/index.vue
View file @ 4e1a525b
...@@ -55,9 +55,8 @@ ...@@ -55,9 +55,8 @@
<el-table-column prop="id" label="NO." align="center" width="60"></el-table-column> <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
<el-table-column prop="carnumber" label="车牌号" align="left"></el-table-column> <el-table-column prop="carnumber" label="车牌号" align="left"></el-table-column>
<el-table-column prop="name" label="摄像头名称" align="center"></el-table-column> <el-table-column prop="name" label="摄像头名称" align="center"></el-table-column>
<el-table-column prop="ip" label="ip" align="center"></el-table-column> <!-- <el-table-column prop="ip" label="ip" align="center"></el-table-column>
<el-table-column prop="port" label="端口" align="center"></el-table-column> <el-table-column prop="port" label="端口" align="center"></el-table-column> -->
<!-- <el-table-column prop="card" label="商标" align="center"></el-table-column> -->
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button> <el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
...@@ -74,14 +73,11 @@ ...@@ -74,14 +73,11 @@
<el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="name"> <el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="name">
<el-input v-model="cameraDetailData.name"></el-input> <el-input v-model="cameraDetailData.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="IP" style="margin-bottom:15px;" prop="ip"> <!-- <el-form-item label="IP" style="margin-bottom:15px;" prop="ip">
<el-input v-model="cameraDetailData.ip"></el-input> <el-input v-model="cameraDetailData.ip"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="端口" style="margin-bottom:15px;"> <el-form-item label="端口" style="margin-bottom:15px;">
<el-input v-model="cameraDetailData.port"></el-input> <el-input v-model="cameraDetailData.port"></el-input>
</el-form-item>
<!-- <el-form-item label="商标" style="margin-bottom:15px;" prop="card">
<el-input v-model="cameraDetailData.card"></el-input>
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -132,9 +128,8 @@ export default { ...@@ -132,9 +128,8 @@ export default {
name: [ { required: true, message: '请输入分区名称', trigger: 'blur' },] name: [ { required: true, message: '请输入分区名称', trigger: 'blur' },]
}, },
rulesDetai:{ rulesDetai:{
cameraName: [ { required: true, message: '请输入名称', trigger: 'blur' },], carnumber: [ { required: true, message: '请输入车牌号', trigger: 'blur' },],
cameraIp: [ { required: true, message: '请输入IP', trigger: 'blur' },], name: [ { required: true, message: '请输入摄像头名称', trigger: 'blur' },],
brand: [ { required: true, message: '请输入IP', trigger: 'blur' },]
} }
} }
}, },
...@@ -159,7 +154,7 @@ export default { ...@@ -159,7 +154,7 @@ export default {
}) })
}, },
getCode1(id) { getCode1(id) {
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100,motorcadeId:id}).then((res) => { HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:9999,motorcadeId:id}).then((res) => {
console.log("mainCameraDetail",res); console.log("mainCameraDetail",res);
this.cameraDetail = res.content; this.cameraDetail = res.content;
}) })
......
src/views/monitoringManagement/mineVideoSetUp/index.vue
View file @ 4e1a525b
...@@ -55,7 +55,6 @@ ...@@ -55,7 +55,6 @@
<el-table-column prop="id" label="NO." align="center" width="60"></el-table-column> <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
<el-table-column prop="cameraName" label="区域名称" align="left"></el-table-column> <el-table-column prop="cameraName" label="区域名称" align="left"></el-table-column>
<el-table-column prop="cameraIp" label="区域IP" align="left"></el-table-column> <el-table-column prop="cameraIp" label="区域IP" align="left"></el-table-column>
<el-table-column prop="brand" :formatter="formatter" label="商标" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button> <el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
...@@ -72,12 +71,9 @@ ...@@ -72,12 +71,9 @@
<el-form-item label="IP" style="margin-bottom:15px;" prop="cameraIp"> <el-form-item label="IP" style="margin-bottom:15px;" prop="cameraIp">
<el-input v-model="cameraDetailData.cameraIp"></el-input> <el-input v-model="cameraDetailData.cameraIp"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="端口" style="margin-bottom:15px;"> <!-- <el-form-item label="端口" style="margin-bottom:15px;">
<el-input v-model="cameraDetailData.cameraPort"></el-input> <el-input v-model="cameraDetailData.cameraPort"></el-input>
</el-form-item> </el-form-item> -->
<el-form-item label="商标" style="margin-bottom:15px;" prop="brand">
<el-input v-model="cameraDetailData.brand" placeholder="1(海康威视) 2(大华)"></el-input>
</el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button> <el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button>
...@@ -129,7 +125,6 @@ export default { ...@@ -129,7 +125,6 @@ export default {
rulesDetai:{ rulesDetai:{
cameraName: [ { required: true, message: '请输入名称', trigger: 'blur' },], cameraName: [ { required: true, message: '请输入名称', trigger: 'blur' },],
cameraIp: [ { required: true, message: '请输入IP', trigger: 'blur' },], cameraIp: [ { required: true, message: '请输入IP', trigger: 'blur' },],
brand: [ { required: true, message: '请输入商标', trigger: 'blur' },]
} }
} }
}, },
......
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