Skip to content

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

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

parent c8c20766
Expand all Show whitespace changes
Inline Side-by-side
Showing with 739 additions and 321 deletions
public/lx/index.html
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">
<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">
<link rel="shortcut icon" href="TemplateData/favicon.ico" />
<link rel="stylesheet" href="TemplateData/style.css" />
</head>
<body>
<div id="unity-container" class="unity-desktop">
<body style="height: 80%; width: 80%">
<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>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
......@@ -16,6 +36,7 @@
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-mobile-warning">
WebGL builds are not supported on mobile devices.
</div>
......@@ -53,8 +74,8 @@
mobileWarning.style.display = "none";
}, 5000);
} else {
canvas.style.width = "960px";
canvas.style.height = "600px";
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
......@@ -63,12 +84,14 @@
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
})
.then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
})
.catch((message) => {
alert(message);
});
};
......
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>
<div class="hangdao">
<div class="h-pic">
<!-- <div class="h-pic">
<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>
......@@ -27,162 +27,206 @@
<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>
</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>
</template>
<script>
import { mqttlist } from "@/api/avoidanceSys/bigscreen";
export default {
data() {
return {
picNum:1,
COdata:[],
}
picNum: 1,
COdata: [],
videoDialog: false,
channel: "",
};
},
mounted() {
this.getCO()
this.getCO();
window.addEventListener("message", this.handleWindowMessage);
},
methods: {
getCO(){
mqttlist().then(res=>{
console.log(res.rows,'res')
this.COdata = res.rows
})
handleWindowMessage(event) {
if (event.data.type === "openPopup") {
this.channel = event.data.channel;
this.videoDialog = true;
}
},
zdClick(num){
getCO() {
mqttlist().then((res) => {
console.log(res.rows, "res");
this.COdata = res.rows;
});
},
zdClick(num) {
this.picNum = num;
}
}
}
},
},
};
</script>
<style scoped lang="scss">
.hangdao{
.h-pic{
width: 1694px;
height: 1590px;
.hangdao {
.h-pic {
width: 2900px;
height: 1754px;
position: relative;
.hd{
overflow: hidden;
/**关闭Y轴滚动条 */
&::-webkit-scrollbar {
display: none;
}
.hd {
width: 100%;
height: 100%;
position: relative;
.point{
.point {
width: 80px;
height: 108px;
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;
cursor: pointer;
&:hover{
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png");
&:hover {
background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover;
}
}
.point-act{
background: no-repeat center center url("~@/assets/images/surescreen/co-act.png");
.point-act {
background: no-repeat center center
url("~@/assets/images/surescreen/co-act.png");
background-size: cover;
}
}
}
.h960{
.h960 {
width: 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;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
right: 36px;
top:50px;
top: 50px;
}
&:nth-child(2){
&:nth-child(2) {
left: 720px;
bottom: 370px;
}
}
}
.h1020{
.h1020 {
width: 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;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
left: 934px;
bottom: 640px;
}
&:nth-child(2){
&:nth-child(2) {
left: 1020px;
bottom: 690px;
}
&:nth-child(3){
&:nth-child(3) {
left: 1120px;
bottom: 750px;
}
&:nth-child(4){
&:nth-child(4) {
right: 20px;
top: -50px;
}
}
}
.h1130{
.h1130 {
width: 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;
.point{
&:nth-child(1){
.point {
&:nth-child(1) {
left: 587px;
bottom: 697px;
}
}
}
.h-btn{
.h-btn {
display: flex;
justify-content: space-between;
p{
p {
width: 463px;
height: 106px;
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;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
span{
background: linear-gradient(0deg, #CEA568 0%, #D7D7D7 0%, #68B0CE 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#cea568 0%,
#d7d7d7 0%,
#68b0ce 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 40px;
display: block;
}
&:hover{
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png");
&:hover {
background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover;
span{
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
p.h-active{
background: no-repeat center center url("~@/assets/images/surescreen/btn-act.png");
p.h-active {
background: no-repeat center center
url("~@/assets/images/surescreen/btn-act.png");
background-size: cover;
span{
background: linear-gradient(0deg, #68B0CE 0%, #CEA568 0%, #21FCFF 0%, #FFFFFF 100%);
span {
background: linear-gradient(
0deg,
#68b0ce 0%,
#cea568 0%,
#21fcff 0%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
</style>
src/views/demonstrate/index.vue
View file @ 91ba20d9
......@@ -13,7 +13,7 @@
</el-tree>
</div> -->
<!-- 弹窗 -->
<el-dialog title="监控视频" :visible.sync="videoDialog" width="60%">
<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"
......@@ -100,28 +100,15 @@ export default {
};
},
mounted() {
this.$nextTick(() => {
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) {
// 打开弹窗
window.addEventListener("message", this.handleWindowMessage);
},
methods: {
handleWindowMessage(event) {
if (event.data.type === "openPopup") {
this.channel = event.data.channel;
this.videoDialog = true;
} else {
// 关闭弹窗
this.videoDialog = false;
}
},
methods: {
nodeClick(obj) {
if (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