wangh
/
dlts_device_cockpit
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改视频显示

Browse Source
master
夜笙歌 2 years ago
parent 64b570c6a1
commit a9a816d177
10 changed files with 152 additions and 78 deletions
Show Stats Download Patch File Download Diff File

6
haiwei-admin/src/main/java/com/haiwei/web/controller/broad/BroadController.java
Unescape Escape View File

@ -31,6 +31,12 @@ public class BroadController {
return prefix + "/monitoring"; return prefix + "/monitoring";
} }
@GetMapping("/monitoring1")
public String monitoring1()
{
return prefix + "/monitoring1";
}
@GetMapping("/video") @GetMapping("/video")
public String video() public String video()
{ {

27
haiwei-admin/src/main/resources/static/board/board.css
Unescape Escape View File

@ -62,7 +62,7 @@ body {
right: 7.5vw; right: 7.5vw;
top: 19%; top: 19%;
width: 16vw; width: 16vw;
height: 22.9vw; height: 32.9vw;
} }
.winDiv p { .winDiv p {
@ -73,7 +73,7 @@ body {
position: absolute; position: absolute;
font-size: 1vw; font-size: 1vw;
left: 20%; left: 20%;
top: 4%; top: 6%;
color: #ddd; color: #ddd;
} }
@ -92,7 +92,7 @@ body {
top: calc(15% + 1.5vw); top: calc(15% + 1.5vw);
color: #4888bf; color: #4888bf;
width: 80%; width: 80%;
height: 40%; height: 25%;
border-radius: 3px; border-radius: 3px;
border: 2px solid #3f65a1; border: 2px solid #3f65a1;
padding: 5%; padding: 5%;
@ -102,7 +102,7 @@ body {
position: absolute; position: absolute;
font-size: 1vw; font-size: 1vw;
left: 10%; left: 10%;
top: 62%; top: 45%;
color: #fff; color: #fff;
} }
@ -110,7 +110,7 @@ body {
position: absolute; position: absolute;
font-size: 0.8vw; font-size: 0.8vw;
left: 10%; left: 10%;
top: calc(62% + 1.5vw); top: calc(45% + 1.5vw);
color: #4888bf; color: #4888bf;
width: 80%; width: 80%;
height: 28%; height: 28%;
@ -124,10 +124,9 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 68%;
right: 12%;
width: 10vw; width: 10vw;
height: 4vw; height: 4vw;
transform: translateX(-50%);
} }
.status .icon { .status .icon {
@ -165,9 +164,10 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 10%; left: 0;
width: 9vw; width: 9vw;
height: 5.35vw; height: 5.35vw;
transform: translateX(-50%);
} }
.centerInfo .win .title { .centerInfo .win .title {
@ -256,6 +256,17 @@ body {
width: 92%; width: 92%;
height: 90%; height: 90%;
} }
.centerModal1 {
opacity: 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 16%;
width: 18vw;
height: 10.125vw;
z-index: 101;
}
.plugin{ .plugin{
width: 100%; width: 100%;
height: 100%; height: 100%;

26
haiwei-admin/src/main/resources/static/board/board.js
Unescape Escape View File

@ -3,7 +3,6 @@ $(() => {
$.get(ctx + 'broad/home/deviceInfo', {}, (e) => { $.get(ctx + 'broad/home/deviceInfo', {}, (e) => {
let data = e.data[0] let data = e.data[0]
console.log(data)
$('.bg1').html(`<p>${data.deviceFunction}</p>`) $('.bg1').html(`<p>${data.deviceFunction}</p>`)
$('.bg2').html(`<p>${data.deviceParam}</p>`) $('.bg2').html(`<p>${data.deviceParam}</p>`)
@ -48,33 +47,20 @@ $(() => {
}) })
$.get(ctx + 'broad/home/queryDeviceState', {}, (e) => { $.get(ctx + 'broad/home/queryDeviceState', {}, (data) => {
let data = e.data console.log(data)
let p = [
{
top: '67%',
left: '68%'
},
{
top: '67%',
left: '80%'
},
]
data.forEach((val, i) => {
let html = ` let html = `
<div class="status" style="top:${p[i].top};left:${p[i].left}"> <div class="status" style="top:80%;left:50%">
<div class="icon" style="background-image: url('../../board/img/${val.data === '1' ? 'green' : 'red'}.png');"></div> <div class="icon" style="background-image: url('../../board/img/${data.msg === '启用' ? 'green' : 'red'}.png');"></div>
<span>${val.name}</span> <span>${data.msg}</span>
</div> </div>
` `
$("#statusD").append(html) $("#statusD").html(html)
})
}) })
}) })
let chart1 = (el, data) => { let chart1 = (el, data) => {
console.log(data)
let xData = Object.keys(data[0]).filter(e => e !== 'time') let xData = Object.keys(data[0]).filter(e => e !== 'time')
let series = xData.map(e => { let series = xData.map(e => {
return { return {

10
haiwei-admin/src/main/resources/static/board/doc.js
Unescape Escape View File

@ -20,6 +20,7 @@ new Vue({
$.post(ctx + 'manage/base_file/fileList', {name: data.value}, (e) => { $.post(ctx + 'manage/base_file/fileList', {name: data.value}, (e) => {
this.tableData = e.data.map((e, i) => { this.tableData = e.data.map((e, i) => {
return { return {
...e,
no: i, no: i,
name: e.fileName, name: e.fileName,
date: e.createTime, date: e.createTime,
@ -32,7 +33,14 @@ new Vue({
this.treeName = data.value this.treeName = data.value
}, },
handleEdit(index, row) { handleEdit(index, row) {
console.log(index, row); const fileName = row.fileName;
const url = row.filePath;
var a = document.createElement("a");
a.download = fileName;
a.href = url;
$("body").append(a)
a.click();
$(a).remove();
}, },
handleDelete(index, row) { handleDelete(index, row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {

53
haiwei-admin/src/main/resources/static/board/video.js
Unescape Escape View File

@ -0,0 +1,53 @@
$(()=>{
$.get(ctx + 'broad/home/queryCustomer', {}, (e) => {
let treeData = e.data.map(e => {
return {
value: e.customerName,
id: e.objid
}
})
treeData.forEach(e=>{
let html = `
<div class="item" onclick="leftClick(this,${e.id},'${e.value}')">
<div class="span">${e.value}</div>
</div>
`
$("#left").append(html)
})
})
})
const leftClick = (e,id,name)=>{
$(e).attr('class', 'itemClick');
$(e).siblings().attr('class', 'item');
$.post(ctx + 'manage/base_file/fileList', {name: name}, (e) => {
console.log(e)
let tableData = e.data.map((e, i) => {
return {
...e,
no: i,
name: e.fileName,
date: e.createTime,
people: e.customName,
objid:e.objid
}
})
let html = ``
tableData.forEach(e=>{
html += `
<div class="item" onclick="leftClick1(this,'${e.filePath}')">
<div class="video">
<video src="${e.filePath}"
style="width:100%!important; height:100%!important;"></video>
</div>
</div>
`
})
$("#left1").html(html)
})
}
const leftClick1 = (e,path)=> {
$(e).attr('class', 'itemClick');
$(e).siblings().attr('class', 'item');
$("#rightVideo").html(`<video controls preload="auto" src="${path}"
style="width:100%!important; height:100%!important;"></video>`)
}

28
haiwei-admin/src/main/resources/templates/board/board1.html
Unescape Escape View File

@ -39,9 +39,10 @@
}) })
if (e === 3) { if (e === 3) {
document.getElementById("monitoringIframe").contentWindow.edit() document.getElementById("monitoringIframe").contentWindow.edit()
setTimeout(()=>{ setTimeout(() => {
$("#monitoring").empty() $("#monitoring").empty()
},100) $("#centerModal1").append(`<iframe src="monitoring1" frameborder="0" id="monitoringIframe" style="width: 100%;height: 100%"></iframe>`)
}, 100)
} }
} }
const toggleInfo = () => { const toggleInfo = () => {
@ -53,10 +54,11 @@
} }
const bottomBtnInfo = (e, el) => { const bottomBtnInfo = (e, el) => {
if (e === 3) { if (e === 3) {
$('#centerModal1').empty()
$("#monitoring").append(`<iframe src="monitoring" frameborder="0" id="monitoringIframe" style="width: 100%;height: 100%"></iframe>`) $("#monitoring").append(`<iframe src="monitoring" frameborder="0" id="monitoringIframe" style="width: 100%;height: 100%"></iframe>`)
setTimeout(()=>{ setTimeout(() => {
document.getElementById("monitoringIframe").contentWindow.login() document.getElementById("monitoringIframe").contentWindow.login()
},1000) }, 1000)
} }
$("#modal" + e).toggle() $("#modal" + e).toggle()
switch (e) { switch (e) {
@ -122,9 +124,9 @@
} }
</script> </script>
<div> <div>
<div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div> <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 8vw;">首页</div>
<div class="topBtn topBtnClick" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div> <div class="topBtn topBtnClick" onclick="routerSkip('board/board1')" style="left: 18.5vw;">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div> <!-- <div class="topBtn" style="left: 25vw;">60型一体机</div>-->
<div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div> <div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
<div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div> <div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
<div class="topBtn" id="toggleInfoBtn" onclick="toggleInfo()" style="left: 83vw;top:13%">设备介绍</div> <div class="topBtn" id="toggleInfoBtn" onclick="toggleInfo()" style="left: 83vw;top:13%">设备介绍</div>
@ -162,20 +164,14 @@
<div class="title">基本信息</div> <div class="title">基本信息</div>
<div class="title1">设备描述:</div> <div class="title1">设备描述:</div>
<div class="bg1"> <div class="bg1">
<!-- <p>规格型号: PG -300</p>-->
<!-- <p>功能描述:利用膨化闪蒸原理，使胶料通过单螺杆的挤压输由高温高压到常温常压状态，利用胶料膨化闪蒸去除胶料内部的水分。</p>-->
</div> </div>
<div class="title2">技术参数:</div> <div class="title2">技术参数:</div>
<div class="bg2"> <div class="bg2">
<!-- <p>功率:800kw</p>-->
<!-- <p>电压:10000V</p>-->
<!-- <p>转速: 1480rpm</p>-->
<!-- <p>转速: 0~276rpr</p>-->
</div> </div>
<div id="statusD">
</div> </div>
</div> </div>
<div id="statusD">
</div> </div>
<div class="eqModal" id="eqModal"> <div class="eqModal" id="eqModal">
@ -237,10 +233,12 @@
<div class="shade" onclick="hideModal(3,this)"></div> <div class="shade" onclick="hideModal(3,this)"></div>
<div class="centerModal"> <div class="centerModal">
<div class="monitoring" id="monitoring"> <div class="monitoring" id="monitoring">
</div> </div>
</div> </div>
</div> </div>
<div class="centerModal1" id="centerModal1">
<iframe frameborder="0" id="monitoringIframe" src="monitoring1" style="width: 100%;height: 100%"></iframe>
</div>
</div> </div>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<script src="../../board/board.js"></script> <script src="../../board/board.js"></script>

6
haiwei-admin/src/main/resources/templates/board/board2.html
Unescape Escape View File

@ -18,9 +18,9 @@
} }
</script> </script>
<div> <div>
<div class="topBtn topBtnClick" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div> <div class="topBtn topBtnClick" onclick="routerSkip('board/board2')" style="left: 8vw;">首页</div>
<div class="topBtn" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div> <div class="topBtn" onclick="routerSkip('board/board1')" style="left: 18.5vw;">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div> <!-- <div class="topBtn" style="left: 25vw;">60型一体机</div>-->
<div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div> <div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
<div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div> <div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>

10
haiwei-admin/src/main/resources/templates/board/doc.html
Unescape Escape View File

@ -18,9 +18,9 @@
} }
</script> </script>
<div> <div>
<div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div> <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 8vw;">首页</div>
<div class="topBtn" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div> <div class="topBtn" onclick="routerSkip('board/board1')" style="left: 18.5vw;">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div> <!-- <div class="topBtn" style="left: 25vw;">60型一体机</div>-->
<div class="topBtn " onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div> <div class="topBtn " onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
<div class="topBtn topBtnClick" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div> <div class="topBtn topBtnClick" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
@ -90,6 +90,10 @@
<!-- @click="handleEdit(scope.$index, scope.row)"--> <!-- @click="handleEdit(scope.$index, scope.row)"-->
<!-- size="mini">编辑--> <!-- size="mini">编辑-->
<!-- </el-button>--> <!-- </el-button>-->
<el-button
@click="handleEdit(scope.$index, scope.row)"
size="mini">下载
</el-button>
<el-button <el-button
@click="handleDelete(scope.$index, scope.row)" @click="handleDelete(scope.$index, scope.row)"
size="mini" size="mini"

31
haiwei-admin/src/main/resources/templates/board/monitoring1.html
Unescape Escape View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('设备智能驾驶舱')"/>
</head>
<body class="white-bg">
<link href="../../board/monitoring.css" rel="stylesheet">
<style>
body{
margin-top: 125%;
margin-left: 30%;
/*transform: translate(-50%,-50%);*/
}
</style>
<script>
var edit = () => {
clickStopRealPlay()
}
var login = () => {
clickLogin()
}
</script>
<div>
<div class="plugin" id="divPlugin" style="width: 100vw;height: 100vh"></div>
</div>
<th:block th:include="include :: footer"/>
<script id="videonode" src="../../js/webVideoCtrl.js"></script>
<script src="../../board/monitoring.js"></script>
</body>
</html>

31
haiwei-admin/src/main/resources/templates/board/video.html
Unescape Escape View File

@ -19,43 +19,20 @@
} }
</script> </script>
<div> <div>
<div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div> <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 8vw;">首页</div>
<div class="topBtn " onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div> <div class="topBtn " onclick="routerSkip('board/board1')" style="left: 18.5vw;">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div> <!-- <div class="topBtn" style="left: 25vw;">60型一体机</div>-->
<div class="topBtn topBtnClick" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div> <div class="topBtn topBtnClick" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
<div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div> <div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
<div class="centerImg"> <div class="centerImg">
<div id="centerInfoDiv"> <div id="centerInfoDiv">
<div class="left" id="left"> <div class="left" id="left">
<div class="item">
<div class="span">一体机1</div>
</div>
<div class="itemClick">
<div class="span">一体机1</div>
</div>
<div class="item">
<div class="span">一体机1</div>
</div>
</div> </div>
<div class="leftVertical"></div> <div class="leftVertical"></div>
<div class="left1" id="left1"> <div class="left1" id="left1">
<div class="item">
<div class="video">
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
style="width:100%!important; height:100%!important;"></video>
</div>
</div>
<div class="itemClick">
<div class="video">
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
style="width:100%!important; height:100%!important;"></video>
</div>
</div>
</div> </div>
<div class="rightVideo"> <div class="rightVideo" id="rightVideo">
<video controls preload="auto" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
style="width:100%!important; height:100%!important;"></video>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save