Skip to content

S
security-avoidance-system
Commit 91ba20d9 authored by lei's avatar lei
Browse files
Options

add:首页数据显示、webgl点击显示监控摄像头视频弹窗

parent c8c20766
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 739 additions and 321 deletions
public/lx/index.html
View file @ 91ba20d9
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unity WebGL Player | longxin</title> <title>Unity WebGL Player | longxin</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="shortcut icon" href="TemplateData/favicon.ico" />
<link rel="stylesheet" href="TemplateData/style.css"> <link rel="stylesheet" href="TemplateData/style.css" />
</head> </head>
<body> <body style="height: 80%; width: 80%">
<div id="unity-container" class="unity-desktop"> <button id="button1">打开弹窗</button>
<script>
// 新增按钮点击事件
document.getElementById("button1").addEventListener("click", function () {
// 这里可以添加与父页面通信的逻辑
console.log("按钮被点击");
// 示例：向父页面发送消息
window.parent.postMessage(
{
type: "openPopup",
channel: "199",
},
"*"
);
});
</script>
<div
id="unity-container"
class="unity-desktop"
style="height: 80%; width: 80%; overflow: hidden"
>
<canvas id="unity-canvas"></canvas> <canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar"> <div id="unity-loading-bar">
<div id="unity-logo"></div> <div id="unity-logo"></div>
...@@ -16,6 +36,7 @@ ...@@ -16,6 +36,7 @@
<div id="unity-progress-bar-full"></div> <div id="unity-progress-bar-full"></div>
</div> </div>
</div> </div>
<div id="unity-mobile-warning"> <div id="unity-mobile-warning">
WebGL builds are not supported on mobile devices. WebGL builds are not supported on mobile devices.
</div> </div>
...@@ -53,8 +74,8 @@ ...@@ -53,8 +74,8 @@
mobileWarning.style.display = "none"; mobileWarning.style.display = "none";
}, 5000); }, 5000);
} else { } else {
canvas.style.width = "960px"; canvas.style.width = "100%";
canvas.style.height = "600px"; canvas.style.height = "100%";
} }
loadingBar.style.display = "block"; loadingBar.style.display = "block";
...@@ -63,14 +84,16 @@ ...@@ -63,14 +84,16 @@
script.onload = () => { script.onload = () => {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%"; progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => { })
loadingBar.style.display = "none"; .then((unityInstance) => {
fullscreenButton.onclick = () => { loadingBar.style.display = "none";
unityInstance.SetFullscreen(1); fullscreenButton.onclick = () => {
}; unityInstance.SetFullscreen(1);
}).catch((message) => { };
alert(message); })
}); .catch((message) => {
alert(message);
});
}; };
document.body.appendChild(script); document.body.appendChild(script);
</script> </script>
......
public/lx_screen/Build/lx.framework.js 0 → 100644
View file @ 91ba20d9
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lx_screen/Build/lx.loader.js 0 → 100644
View file @ 91ba20d9
This diff is collapsed.
public/lx_screen/TemplateData/style.css 0 → 100644
View file @ 91ba20d9
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-mobile-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
public/lx_screen/config.xml 0 → 100644
View file @ 91ba20d9
This diff is collapsed.
public/lx_screen/index.html 0 → 100644
View file @ 91ba20d9
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unity WebGL Player | longxin</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico" />
<link rel="stylesheet" href="TemplateData/style.css" />
</head>
<body style="height: 100%; width: 100%">
<div
id="unity-container"
class="unity-desktop"
style="height: 100%; width: 100%; overflow: hidden"
>
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-mobile-warning">
WebGL builds are not supported on mobile devices.
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">longxin</div>
</div>
</div>
<script>
var buildUrl = "Build";
var loaderUrl = buildUrl + "/lx.loader.js";
var config = {
dataUrl: buildUrl + "/lx.data",
frameworkUrl: buildUrl + "/lx.framework.js",
codeUrl: buildUrl + "/lx.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "longxin",
productVersion: "0.1",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var mobileWarning = document.querySelector("#unity-mobile-warning");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
mobileWarning.style.display = "block";
setTimeout(() => {
mobileWarning.style.display = "none";
}, 5000);
} else {
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
})
.then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
})
.catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
src/components/BigScreen/Mid.vue
View file @ 91ba20d9
<template> <template>
<div class="hangdao"> <div class="hangdao">
<div class="h-pic"> <!-- <div class="h-pic">
<div class="hd h960" v-show="picNum===1"> <div class="hd h960" v-show="picNum===1">
<div class="point" v-if="COdata&&COdata.length>0&&COdata[6].installationLocation" :title="`${COdata[6].installationLocation}:${COdata[6].measurePointValue}`"></div> <div class="point" v-if="COdata&&COdata.length>0&&COdata[6].installationLocation" :title="`${COdata[6].installationLocation}:${COdata[6].measurePointValue}`"></div>
...@@ -27,162 +27,206 @@ ...@@ -27,162 +27,206 @@
<p :class="picNum===2?'h-active':''" @click="zdClick(2)"><span>-1020m中段</span></p> <p :class="picNum===2?'h-active':''" @click="zdClick(2)"><span>-1020m中段</span></p>
<p :class="picNum===3?'h-active':''" @click="zdClick(3)"><span>-1130m中段</span></p> <p :class="picNum===3?'h-active':''" @click="zdClick(3)"><span>-1130m中段</span></p>
</div> </div>
-->
<iframe class="h-pic" src="/lx_screen/index.html" frameborder="0"></iframe>
<el-dialog title="监控视频" :visible.sync="videoDialog" width="660px">
<iframe
:src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`"
width="640"
height="360"
allowfullscreen
allow="autoplay; fullscreen"
></iframe>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { mqttlist } from "@/api/avoidanceSys/bigscreen"; import { mqttlist } from "@/api/avoidanceSys/bigscreen";
export default { export default {
data() { data() {
return { return {
picNum:1, picNum: 1,
COdata:[], COdata: [],
} videoDialog: false,
channel: "",
};
}, },
mounted() { mounted() {
this.getCO() this.getCO();
window.addEventListener("message", this.handleWindowMessage);
}, },
methods: { methods: {
getCO(){ handleWindowMessage(event) {
mqttlist().then(res=>{ if (event.data.type === "openPopup") {
console.log(res.rows,'res') this.channel = event.data.channel;
this.COdata = res.rows this.videoDialog = true;
}) }
}, },
zdClick(num){ getCO() {
mqttlist().then((res) => {
console.log(res.rows, "res");
this.COdata = res.rows;
});
},
zdClick(num) {
this.picNum = num; this.picNum = num;
} },
} },
};
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.hangdao{ .hangdao {
.h-pic{ .h-pic {
width: 1694px; width: 2900px;
height: 1590px; height: 1754px;
position: relative; position: relative;
.hd{ overflow: hidden;
/**关闭Y轴滚动条 */
&::-webkit-scrollbar {
display: none;
}
.hd {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.point{ .point {
width: 80px; width: 80px;
height: 108px; height: 108px;
position: absolute; position: absolute;
background: no-repeat center center url("~@/assets/images/surescreen/co-def.png"); background: no-repeat center center
url("~@/assets/images/surescreen/co-def.png");
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png"); background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover; background-size: cover;
} }
} }
.point-act{ .point-act {
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png"); background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover; background-size: cover;
} }
} }
} }
.h960{ .h960 {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/960.png"); background: no-repeat center center
url("~@/assets/images/surescreen/960.png");
background-size: cover; background-size: cover;
.point{ .point {
&:nth-child(1){ &:nth-child(1) {
right: 36px; right: 36px;
top:50px; top: 50px;
} }
&:nth-child(2){ &:nth-child(2) {
left: 720px; left: 720px;
bottom: 370px; bottom: 370px;
} }
} }
} }
.h1020{ .h1020 {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/1020.png"); background: no-repeat center center
url("~@/assets/images/surescreen/1020.png");
background-size: cover; background-size: cover;
.point{ .point {
&:nth-child(1){ &:nth-child(1) {
left: 934px; left: 934px;
bottom: 640px; bottom: 640px;
} }
&:nth-child(2){ &:nth-child(2) {
left: 1020px; left: 1020px;
bottom: 690px; bottom: 690px;
} }
&:nth-child(3){ &:nth-child(3) {
left: 1120px; left: 1120px;
bottom: 750px; bottom: 750px;
} }
&:nth-child(4){ &:nth-child(4) {
right: 20px; right: 20px;
top: -50px; top: -50px;
} }
} }
} }
.h1130{ .h1130 {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: no-repeat center center url("~@/assets/images/surescreen/1130.png"); background: no-repeat center center
url("~@/assets/images/surescreen/1130.png");
background-size: cover; background-size: cover;
.point{ .point {
&:nth-child(1){ &:nth-child(1) {
left: 587px; left: 587px;
bottom: 697px; bottom: 697px;
} }
} }
} }
.h-btn{ .h-btn {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
p{ p {
width: 463px; width: 463px;
height: 106px; height: 106px;
margin-top: 40px; margin-top: 40px;
background: no-repeat center center url("~@/assets/images/surescreen/btn-def.png"); background: no-repeat center center
url("~@/assets/images/surescreen/btn-def.png");
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
span{ span {
background: linear-gradient(0deg, #CEA568 0%, #D7D7D7 0%, #68B0CE 0%, #FFFFFF 100%); background: linear-gradient(
0deg,
#cea568 0%,
#d7d7d7 0%,
#68b0ce 0%,
#ffffff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 40px;
display: block; display: block;
} }
&:hover{ &:hover {
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png"); background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover; background-size: cover;
span{ span {
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%); background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
} }
} }
p.h-active{ p.h-active {
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png"); background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover; background-size: cover;
span{ span {
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%); background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/demonstrate/index.vue
View file @ 91ba20d9
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</el-tree> </el-tree>
</div> --> </div> -->
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog title="监控视频" :visible.sync="videoDialog" width="60%"> <el-dialog title="监控视频" :visible.sync="videoDialog" width="660px">
<iframe <iframe
:src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`" :src="`http://10.7.148.106:10800/play.html?channel=${channel}&iframe=yes&aspect=640x360`"
width="640" width="640"
...@@ -100,28 +100,15 @@ export default { ...@@ -100,28 +100,15 @@ export default {
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => { window.addEventListener("message", this.handleWindowMessage);
setTimeout(() => {
this.loading = false;
}, 300);
const that = this;
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 94.5 + "px;";
};
this.intervalId = setInterval(this.checkLocalStorage, 1000);
});
//从路由里面拿参数
this.channel = this.$route.query.channel;
if (this.channel) {
// 打开弹窗
this.videoDialog = true;
} else {
// 关闭弹窗
this.videoDialog = false;
}
}, },
methods: { methods: {
handleWindowMessage(event) {
if (event.data.type === "openPopup") {
this.channel = event.data.channel;
this.videoDialog = true;
}
},
nodeClick(obj) { nodeClick(obj) {
if (obj.val) { if (obj.val) {
this.sendTo3D(obj.val); this.sendTo3D(obj.val);
......
src/views/index.vue
View file @ 91ba20d9
This diff is collapsed.
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