Skip to content

K
kanban-nanjing-11
Commit 383206f0 authored by xcc's avatar xcc
Browse files
Options

页面整合一起

parent 0c4b642f
Show whitespace changes
Inline Side-by-side
Showing with 279 additions and 407 deletions
css/page1.css
View file @ 383206f0
...@@ -862,4 +862,12 @@ ...@@ -862,4 +862,12 @@
font-size: 300px; /* 设置文字大小 */ font-size: 300px; /* 设置文字大小 */
} }
.text-126{
text-align: center;
font-size: 60px;
margin-top: 32px;
width: 50%;
}
.error{
color: #e91d1d;
}
css/page2.css
View file @ 383206f0
...@@ -854,3 +854,25 @@ ...@@ -854,3 +854,25 @@
height: 160px; height: 160px;
} }
.marquee-container {
width: 50%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
float: left;
}
.marquee {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
css/page3.css
View file @ 383206f0
...@@ -845,3 +845,49 @@ ...@@ -845,3 +845,49 @@
z-index: 998; z-index: 998;
font-size: 96px; font-size: 96px;
} }
.dialog-entirety-box{
position: absolute;
top: 700px;
left: calc(50% - 800px);
z-index: 999999;
width: 1600px;
height: 690px;
background-color: #1478d8;
border-radius: 50px;
font-size: 48px;
}
.dialog-entirety-box h1{
margin-top: 250px;
text-align: center;
color: #ee6666;
}
.dialog-entirety-box img{
position: absolute;
top: 50px;
right: 50px;
z-index: 77;
width: 160px;
height: 160px;
}
.main_b {
position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91;
height: 100px;
/*height: 448px;*/
margin-bottom: 22px;}
.text-126{
text-align: center;
font-size: 60px;
margin-top: 32px;
width: 50%;
}
.error{
color: #e91d1d;
}
index1.html
View file @ 383206f0
...@@ -23,12 +23,15 @@ ...@@ -23,12 +23,15 @@
<!-- <iframe id="myiframe2" style="width: 800px;height: 800px;border: 2px solid red;" src="./index33.html" frameborder="0"></iframe>--> <!-- <iframe id="myiframe2" style="width: 800px;height: 800px;border: 2px solid red;" src="./index33.html" frameborder="0"></iframe>-->
<iframe id="myiframe2" style="width: 6000px;height: 2200px;border: 2px solid red;" src="./page2.html" frameborder="0"></iframe> <iframe id="myiframe2" style="width: 6000px;height: 2200px;border: 2px solid red;" src="./page2.html" frameborder="0"></iframe>
<iframe id="myiframe3" style="width: 6000px;height: 2200px;border: 2px solid red;" src="./page3.html" frameborder="0"></iframe>
</div> </div>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
var iframe1 = document.getElementById('myiframe1').contentWindow; var iframe1 = document.getElementById('myiframe1').contentWindow;
var iframe2 = document.getElementById('myiframe2').contentWindow; var iframe2 = document.getElementById('myiframe2').contentWindow;
var iframe3 = document.getElementById('myiframe3').contentWindow;
const codeDianshi = '1194168167242801152' const codeDianshi = '1194168167242801152'
let bwsState = 0; // bwsWebSocket 状态 let bwsState = 0; // bwsWebSocket 状态
let wsState = 0; // wsWebSocket 状态 let wsState = 0; // wsWebSocket 状态
...@@ -48,6 +51,7 @@ $(document).ready(function() { ...@@ -48,6 +51,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
} }
// 接听服务器发回的信息并处理展示 // 接听服务器发回的信息并处理展示
ws.onmessage = function (option = {}) { ws.onmessage = function (option = {}) {
...@@ -60,6 +64,7 @@ $(document).ready(function() { ...@@ -60,6 +64,7 @@ $(document).ready(function() {
console.log(_data); console.log(_data);
iframe1.postMessage(JSON.stringify(_data), '*'); iframe1.postMessage(JSON.stringify(_data), '*');
iframe2.postMessage(JSON.stringify(_data), '*'); iframe2.postMessage(JSON.stringify(_data), '*');
iframe3.postMessage(JSON.stringify(_data), '*');
} }
// 监听连接关闭事件 // 监听连接关闭事件
ws.onclose = function () { ws.onclose = function () {
...@@ -72,6 +77,7 @@ $(document).ready(function() { ...@@ -72,6 +77,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
} }
// 监听并处理error事件 // 监听并处理error事件
ws.onerror = function (error) { ws.onerror = function (error) {
...@@ -82,6 +88,7 @@ $(document).ready(function() { ...@@ -82,6 +88,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
console.log('错误error' + error); console.log('错误error' + error);
console.log('错误：ws连接状态：' + ws.readyState); console.log('错误：ws连接状态：' + ws.readyState);
} }
...@@ -100,6 +107,7 @@ $(document).ready(function() { ...@@ -100,6 +107,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
} }
// 接听服务器发回的信息并处理展示 // 接听服务器发回的信息并处理展示
broadcastWs.onmessage = function (option = {}) { broadcastWs.onmessage = function (option = {}) {
...@@ -113,6 +121,7 @@ $(document).ready(function() { ...@@ -113,6 +121,7 @@ $(document).ready(function() {
console.log(_data); console.log(_data);
iframe1.postMessage(JSON.stringify(_data), '*'); iframe1.postMessage(JSON.stringify(_data), '*');
iframe2.postMessage(JSON.stringify(_data), '*'); iframe2.postMessage(JSON.stringify(_data), '*');
iframe3.postMessage(JSON.stringify(_data), '*');
} }
// 监听连接关闭事件 // 监听连接关闭事件
broadcastWs.onclose = function () { broadcastWs.onclose = function () {
...@@ -125,6 +134,7 @@ $(document).ready(function() { ...@@ -125,6 +134,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
} }
// 监听并处理error事件 // 监听并处理error事件
broadcastWs.onerror = function (error) { broadcastWs.onerror = function (error) {
...@@ -135,6 +145,7 @@ $(document).ready(function() { ...@@ -135,6 +145,7 @@ $(document).ready(function() {
} }
iframe1.postMessage(JSON.stringify(_json1), '*'); iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*'); iframe2.postMessage(JSON.stringify(_json1), '*');
iframe3.postMessage(JSON.stringify(_json1), '*');
console.log('错误error' + error); console.log('错误error' + error);
console.log('错误：bws连接状态：' + broadcastWs.readyState); console.log('错误：bws连接状态：' + broadcastWs.readyState);
} }
......
page1.html
View file @ 383206f0
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div class="logo"> <div class="logo">
<b> <b>
<!-- <img src="img/logo.png"> --> <!-- <img src="img/logo.png"> -->
目视化信息系统 MEB系统
</b> </b>
</div> </div>
</div> </div>
...@@ -176,7 +176,6 @@ ...@@ -176,7 +176,6 @@
window.addEventListener('message', function(event={}) { window.addEventListener('message', function(event={}) {
const _data=JSON.parse( (event.data||"{}") ) const _data=JSON.parse( (event.data||"{}") )
console.log(_data); console.log(_data);
closeMessage();
if(_data.type==='conStatusChange'){ if(_data.type==='conStatusChange'){
updateStatus(_data.newStatus); updateStatus(_data.newStatus);
} }
...@@ -249,66 +248,14 @@ ...@@ -249,66 +248,14 @@
$("#output-sum").html(_data.message.result.ALL); $("#output-sum").html(_data.message.result.ALL);
$("#output-text").html("台"); $("#output-text").html("台");
} }
// RightTableInit([
// {
// text1: 'ZP11', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP12', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP13', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP14', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP15', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP16', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP17', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP18', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP19', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP20', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP21', // 车型
// text2: '207', // 数量
// },
// {
// text1: 'ZP22', // 车型
// text2: '207', // 数量
// },
// ])
RightTableInit(_data.message.result); RightTableInit(_data.message.result);
}else { }else {
isNull('is-null-text-6'); isNull('is-null-text-6');
} }
} }
if(_data.type=='broadcast'){ if(_data.type=='broadcast'){
if(_data.message){ if(_data.message){
$("#msgShowWindow").text(_data.message); $("#msgShowWindow").text(_data.message);
showMessage();
} }
} }
......
page2.html
View file @ 383206f0
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div class="logo"> <div class="logo">
<b> <b>
<!-- <img src="img/logo.png"> --> <!-- <img src="img/logo.png"> -->
目视化信息系统 MEB系统
</b> </b>
</div> </div>
</div> </div>
...@@ -300,8 +300,11 @@ ...@@ -300,8 +300,11 @@
</div> </div>
<div class="box-right-container box-echarts-body-index2"> <div class="box-right-container box-echarts-body-index2">
<div class="main_b ul-index1 bottom-inex23-box"> <div class="main_b ul-index1 bottom-inex23-box">
<div class="main_b"> <div class="main_b marquee-container">
<span class="text-126 error" id="msgShowWindow">连接错误，连接错误，连接错误</span> <span class="marquee text-126 error" id="msgShowWindow" >连接错误，连接错误，连接错误</span>
</div>
<div class="main_b marquee-container">
<span class="marquee text-126 error" id="broadcastShowWindow" style="float: left">通知：---=--=-=</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -361,6 +364,12 @@ $(document).ready(function () { ...@@ -361,6 +364,12 @@ $(document).ready(function () {
} }
} }
if(_data.type=='broadcast'){
if(_data.message){
$("#broadcastShowWindow").text(_data.message);
}
}
}, false); }, false);
// 初始时关闭提示 // 初始时关闭提示
......
page3.html
View file @ 383206f0
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="renderer" content="webkit" /> <meta name="renderer" content="webkit"/>
<title>看板</title> <title>看板</title>
<link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css" /> <link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/liMarquee.css"> <link rel="stylesheet" type="text/css" href="css/liMarquee.css">
<link rel="stylesheet" type="text/css" href="css/page3.css" /> <link rel="stylesheet" type="text/css" href="css/page3.css"/>
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/wow.js"></script> <script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/jquery.liMarquee.js"></script> <script type="text/javascript" src="js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="js/page2.js"></script> <!-- <script type="text/javascript" src="js/page2.js"></script>-->
<script>new WOW().init();</script> <script>new WOW().init();</script>
</head> </head>
<body> <body>
...@@ -26,14 +26,9 @@ ...@@ -26,14 +26,9 @@
<div class="header wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s"> <div class="header wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s">
<div class="topbox"> <div class="topbox">
<div class="topbox_m"> <div class="topbox_m">
<!-- <div class="top-position-box">
<span>物流经理: </span>
<span>李某某</span>
</div> -->
<div class="toptime"></div> <div class="toptime"></div>
<div class="logo"> <div class="logo">
<b> <b>
<!-- <img src="img/logo.png"> -->
MEB系统 MEB系统
</b> </b>
</div> </div>
...@@ -41,264 +36,12 @@ ...@@ -41,264 +36,12 @@
</div> </div>
</div> </div>
<!-- <a href="factory.html" class="topback wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s"></a> -->
<div class="mainer"> <div class="mainer">
<div class="mainbox"> <div class="mainbox">
<!-- <div class="container-main">
<div class="main-box-left">
<div class="box-right-container box-echarts-body-index1">
<div class="main_t ul-index1">
<div class="ibox_t">
<span class="box-tittle-text">当前车型</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index2">
<div class="ibox_t">
<span class="box-tittle-text">后续车型1</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index3">
<div class="ibox_t">
<span class="box-tittle-text">后续车型2</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index4">
<div class="ibox_t">
<span class="box-tittle-text">后续车型3</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index5">
<div class="ibox_t">
<span class="box-tittle-text">后续车型4</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
</div>
<div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1">
<div class="ibox_t">
<span class="box-tittle-text">后续车型5</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index2">
<div class="ibox_t">
<span class="box-tittle-text">后续车型6</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index3">
<div class="ibox_t">
<span class="box-tittle-text">后续车型7</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index4">
<div class="ibox_t">
<span class="box-tittle-text">后续车型8</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
<div class="main_t ul-index5">
<div class="ibox_t">
<span class="box-tittle-text">后续车型9</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
</div>
</div>
</div>
<div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1">
<div class="ibox_t">
<span class="box-tittle-text">开动率</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box" style="top: 30px;">
<li>
<label style="background: #72ccff;"></label>
<span>班次一</span>
</li>
<li>
<label style="background: #fac858;"></label>
<span>班次二</span>
</li>
</ul>
<div id="echart_b3" class="echarts-div"></div>
</div>
</div>
<div class="main_t ul-index2">
<div class="ibox_t">
<span class="box-tittle-text">设备运行</span>
</div>
<div class="ibox_m">
<ul class="ul-list-123 ul-list-125">
<li>
<div>正常运行:</div>
<div>
<span>500</span>
<span>分钟</span>
</div>
</li>
<li>
<div>停线时间:</div>
<div>
<span>40</span>
<span>分钟</span>
</div>
</li>
<li>
<div>休息时间:</div>
<div>
<span>30</span>
<span>分钟</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-box-right">
<div class="main_t">
<div class="ibox_t">
<span class="box-tittle-text">设备状态</span>
</div>
<div class="ibox_m">
<p class="text-124">自动</p>
</div>
</div>
<div class="main_t zongchanliang-box">
<div class="ibox_t">
<span class="box-tittle-text">总产量</span>
</div>
<div class="ibox_m">
<p class="text-125">
<span>207</span>
<span style="font-size: 86px;">台</span>
</p>
<ul class="ul-list-123">
<li>
<div>班次1:</div>
<div>
<span>400</span>
<span>台</span>
</div>
</li>
<li>
<div>班次2:</div>
<div>
<span>400</span>
<span>台</span>
</div>
</li>
<li>
<div>班次3:</div>
<div>
<span>400</span>
<span>台</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1 bottom-inex23-box">
<div class="ibox_t">
<span class="box-tittle-text">小时产量</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box" style="top: 30px;">
<li>
<label style="background: #72ccff;"></label>
<span>计划产量</span>
</li>
<li>
<label style="background: #91cc75;"></label>
<span>实际产量</span>
</li>
</ul>
<div id="echart_b5" class="echarts-div"></div>
</div>
</div>
</div> -->
<div class="left-img-box"> <div class="left-img-box">
<img src="./img/556677.png" alt=""> <img src="" alt="" id="image">
</div> </div>
<div class="right-img-box"> <div class="right-img-box">
...@@ -307,32 +50,41 @@ ...@@ -307,32 +50,41 @@
<img src="./img/logistics/tit.png" alt=""> <img src="./img/logistics/tit.png" alt="">
<div> <div>
<span>车辆号:</span> <span>车辆号:</span>
<span>R1T005</span> <span id="tps-text"></span>
</div> </div>
</li> </li>
<li> <li>
<img src="./img/logistics/tit.png" alt=""> <img src="./img/logistics/tit.png" alt="">
<div> <div>
<span>车型:</span> <span>车型:</span>
<span>RTT</span> <span id="partNo-text"></span>
</div> </div>
</li> </li>
<li> <li>
<img src="./img/logistics/tit.png" alt=""> <img src="./img/logistics/tit.png" alt="">
<div> <div>
<span>下一辆</span> <span id="span-botton-next">下一张</span>
<!-- <span>RTT</span> -->
</div> </div>
</li> </li>
<li> <li>
<img src="./img/logistics/tit.png" alt=""> <img src="./img/logistics/tit.png" alt="">
<div> <div>
<span>上一辆</span> <span id="span-botton-up">上一张</span>
<!-- <span></span> -->
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="box-right-container box-echarts-body-index2" id="dialog-entirety-message-id">
<div class="main_b ul-index1 bottom-inex23-box">
<div class="main_b">
<span class="text-126 error" id="msgShowWindow">连接错误，连接错误，连接错误</span>
</div>
</div>
</div>
<div class="dialog-entirety-box" id="dialog-entirety-box-id">
<h1>网络连接已断开！</h1>
<img src="./img/close.svg" alt="">
</div>
</div> </div>
</div> </div>
...@@ -342,17 +94,94 @@ ...@@ -342,17 +94,94 @@
<script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script>
<script> <script>
$(document).ready(function() {
// 开动率
EchartsB3()
// 小时产量 $(document).ready(function () {
EchartsB5() window.addEventListener('message', function(event={}) {
const _data=JSON.parse( (event.data||"{}") )
console.log(_data);
if(_data.type==='conStatusChange'){
updateStatus(_data.newStatus);
}
if(_data.type=='broadImg'){
if(_data.message.tps){
$("#tps-text").text(_data.message.tps);
}
if(_data.message.partNo){
$("#partNo-text").text(_data.message.partNo);
}
if(_data.message.imgUrl){
$("#image").attr("src", _data.message.imgUrl);
}
}
}, false);
// 初始时关闭提示
closeAlert();
});
//---------------------------------
// 添加点击事件处理逻辑
var upButton = document.getElementById("span-botton-up");
upButton.addEventListener("click", function() {
nextOrUpButton("1194167820541632512",'2');
});
var nextButton = document.getElementById("span-botton-next");
// 添加点击事件处理逻辑
nextButton.addEventListener("click", function() {
nextOrUpButton("1194167820541632512",'1');
});
function nextOrUpButton(tmBasSiteId,type){
var tps = document.getElementById("tps-text").innerHTML;
if(tps) {
fetch('http://127.0.0.1:8180/stage-api/order/ulocScreen/selectSiteBySiteId?tmBasSiteId=' + tmBasSiteId + '&sn=' + tps + '&type=' + type,
{method: 'GET', headers: {'Authorization': 'Bearer_b3e1b7b2-51c8-451b-944b-dccf3491ad32'}})
.then(response => response.json())
.then(data => {
$("#image").attr("src", data.data);
})
.catch(error => console.error('Error:', error));
}
}
//------------------------------------
function showAlert() {
var div = document.getElementById('dialog-entirety-box-id');
div.style.display = 'block';
}
function closeAlert() {
var div = document.getElementById('dialog-entirety-box-id');
div.style.display = 'none';
}
function showMessage() {
var div = document.getElementById('dialog-entirety-message-id');
div.style.display = 'block';
}
function closeMessage() {
var div = document.getElementById('dialog-entirety-message-id');
div.style.display = 'none';
}
// 当状态改变时，显示或关闭提示
function updateStatus(newStatus) {
if (newStatus) {
showAlert();
} else {
closeAlert();
}
}
});
</script> </script>
</body> </body>
</html> </html>
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