Skip to content

K
kanban-nanjing-11
Commit 68dd4d12 authored by xcc's avatar xcc
Browse files
Options

页面整合一起

parent 41c68210
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 490 additions and 374 deletions
css/page1.css
View file @ 68dd4d12
......@@ -3,7 +3,7 @@
.topbox_m .logo { background: url(../img/logistics/logobg.png) center center no-repeat;}
.main_t {
.main_t {
position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91;
......@@ -86,7 +86,7 @@
.ibox_m{
box-sizing: border-box;
height: 100%;
}
.ibox_m .echarts-body{
......@@ -285,7 +285,7 @@
/* 列表文字大小 */
.table-ui-box ul li{
font-size: 32px;
font-size: 32px;
}
/* 列宽 比例 */
......@@ -451,14 +451,14 @@
.box-echarts-body-index2 .main_t.ul-index2 .box-left .echarts-div{
width: 100%;
height: 100%;
}
}
.box-echarts-body-index2 .main_t.ul-index2 .box-right{
flex: 1;
}
.custem-table-index1,
.custem-table-index2,
.custem-table-index5
.custem-table-index5
{
......@@ -530,7 +530,7 @@
.box-echarts-body-index2 .main_t.ul-index3 .box-left .echarts-div{
width: 100%;
height: 100%;
}
}
.box-echarts-body-index2 .main_t.ul-index3 .box-right{
flex: 1;
}
......@@ -587,7 +587,7 @@
.box-echarts-body-index1 .main_t.ul-index3 .box-left .echarts-div{
width: 100%;
height: 100%;
}
}
.box-echarts-body-index1 .main_t.ul-index3 .box-right{
flex: 1;
}
......@@ -848,8 +848,18 @@
height: 160px;
}
.ul-text-44 li{
display: inline-block;
}
\ No newline at end of file
}
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 30vh; /* 设置容器高度为视口的高度 */
}
.centered-text {
font-size: 300px; /* 设置文字大小 */
}
css/page2.css
View file @ 68dd4d12
......@@ -823,3 +823,34 @@
width: 100%;
height: 360px;
}
.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;
}
index1.html
View file @ 68dd4d12
......@@ -16,49 +16,160 @@
<body>
<div>
<iframe id="myiframe1" style="width: 800px;height: 800px;border: 2px solid red;" src="./index22.html" frameborder="0"></iframe>
<iframe id="myiframe2" style="width: 800px;height: 800px;border: 2px solid red;" src="./index33.html" frameborder="0"></iframe>
<!-- <iframe id="myiframe1" style="width: 800px;height: 800px;border: 2px solid red;" src="./index22.html" frameborder="0"></iframe>-->
<iframe id="myiframe1" style="width: 6000px;height: 2200px;border: 2px solid red;" src="./page1.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>
</div>
<script>
$(document).ready(function() {
var iframe1 = document.getElementById('myiframe1').contentWindow;
var iframe2 = document.getElementById('myiframe2').contentWindow;
const codeDianshi = '1194168167242801152'
let bwsState = 0; // bwsWebSocket 状态
let wsState = 0; // wsWebSocket 状态
// 父页面
function initUlocWebsocketFunc() {
// 生产工位websocket
// 初始化
const ws = new WebSocket('ws://127.0.0.1:10001/order/ulocScreen/' + codeDianshi);
//监听是否连接成功
ws.onopen = function () {
wsState = ws.readyState
console.log('ws连接状态：' + ws.readyState);
var _json1={
type:'conStatusChange',
newStatus:false
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
}
// 接听服务器发回的信息并处理展示
ws.onmessage = function (option = {}) {
console.log('ws收到消息');
console.log('ws连接状态：' + ws.readyState);
wsState = ws.readyState
// 向第一个子页面 发消息
var iframe1 = document.getElementById('myiframe1').contentWindow;
var _json1={
a:1,
b:2,
c:3,
const {data = "{}"} = option
const _data = JSON.parse(data)
console.log(_data);
iframe1.postMessage(JSON.stringify(_data), '*');
iframe2.postMessage(JSON.stringify(_data), '*');
}
// 监听连接关闭事件
ws.onclose = function () {
wsState = ws.readyState
// 监听整个过程中websocket的状态
console.log('ws连接关闭状态：' + ws.readyState);
var _json1={
type:'conStatusChange',
newStatus:true
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
}
// 监听并处理error事件
ws.onerror = function (error) {
wsState = ws.readyState
var _json1={
type:'conStatusChange',
newStatus:true
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
console.log('错误error' + error);
console.log('错误：ws连接状态：' + ws.readyState);
}
}
setTimeout(()=>{
iframe1.postMessage(JSON.stringify(_json1), '*');
},1000)
function initBroadcastWebsocketFunc() {
// 公告消息websocket
// 初始化
const broadcastWs = new WebSocket('ws://127.0.0.1:10001/base/ulocBroadcastWebsocket/' + codeDianshi);
//监听是否连接成功
broadcastWs.onopen = function () {
bwsState = broadcastWs.readyState;
console.log('bws连接状态：' + broadcastWs.readyState);
var _json1={
type:'conStatusChange',
newStatus:false
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
}
// 接听服务器发回的信息并处理展示
broadcastWs.onmessage = function (option = {}) {
console.log('bws收到信息');
console.log('bws连接状态：' + broadcastWs.readyState);
bwsState = broadcastWs.readyState
const {data = "{}"} = option
const _data = JSON.parse(data)
console.log(_data);
iframe1.postMessage(JSON.stringify(_data), '*');
iframe2.postMessage(JSON.stringify(_data), '*');
}
// 监听连接关闭事件
broadcastWs.onclose = function () {
bwsState = broadcastWs.readyState
// 监听整个过程中websocket的状态
console.log('bws连接关闭状态：' + broadcastWs.readyState);
var _json1={
type:'conStatusChange',
newStatus:true
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
}
// 监听并处理error事件
broadcastWs.onerror = function (error) {
bwsState = broadcastWs.readyState
var _json1={
type:'conStatusChange',
newStatus:true
}
iframe1.postMessage(JSON.stringify(_json1), '*');
iframe2.postMessage(JSON.stringify(_json1), '*');
console.log('错误error' + error);
console.log('错误：bws连接状态：' + broadcastWs.readyState);
}
}
// websokes 连接
function WebSocketInitHandle() {
//清除interval定时器
if (window.IntervalItemCenter13) {
clearInterval(window.IntervalItemCenter13);
}
setTimeout(() => {
initUlocWebsocketFunc() // 初始化
initBroadcastWebsocketFunc() // 初始化
// $("#selectCodeContainer").css("z-index",-999)
window.IntervalItemCenter13 = setInterval(() => {
console.log('111==='+wsState+'222==='+bwsState);
if (wsState != 1 || bwsState != 1 ) {
initUlocWebsocketFunc() // 初始化
initBroadcastWebsocketFunc() // 初始化
}
}, (1000 * 10))
}, 500)
// 向第二个子页面 发消息
var iframe2 = document.getElementById('myiframe2').contentWindow;
var _json2={
a:6666,
b:2777,
c:888,
}
setTimeout(()=>{
iframe2.postMessage(JSON.stringify(_json2), '*');
},3000)
// 初始化
setTimeout(() => {
WebSocketInitHandle()
}, 500);
});
</script>
</body>
</html>
\ No newline at end of file
</html>
js/page1.js
View file @ 68dd4d12
// 下右 table
function RightTableInit(list=[]){
//清除interval定时器
if(window.IntervalItemRight1){
clearInterval(window.IntervalItemRight1)
}
let _len=0
const groups = groupData(list,6);
$('#tableIndex').html("");
if(groups[0]) {
$('#tableIndex').append(
groups[0].map((o,i)=>`
<li>
<span>${o.text1}</span>
<span>
<span>${o.text2}</span>
<span>台</span>
</span>
</li>
`)
);
}
_len=_len+1
let groupsLenth=groups.length
window.IntervalItemRight1=setInterval(()=>{
if(_len>=groupsLenth){
_len=0
}
if( groups[_len] ){
const _obj=groups[_len]
if(_obj) {
$('#tableIndex').html("");
$('#tableIndex').append(
_obj.map((o,i)=>`
<li>
<span>${o.text1}</span>
<span>
<span>${o.text2}</span>
<span>台</span>
</span>
</li>
`)
);
}
_len=_len+1
}
},5000)
}
// 分组函数
function groupData(data, itemsPerGroup) {
const groups = [];
for (let i = 0; i < data.length; i += itemsPerGroup) {
groups.push(data.slice(i, i + itemsPerGroup));
}
return groups;
}
function isNull(id) {
$('#'+id).html("");
$('#'+id).append(`<div class="container"><div class="centered-text">无</div></div>`);
}
page1.html
View file @ 68dd4d12
This diff is collapsed.
page2.html
View file @ 68dd4d12
......@@ -305,6 +305,10 @@
</div>
</div>
</div>
<div class="dialog-entirety-box" id="dialog-entirety-box-id">
<h1>网络连接已断开！</h1>
<img src="./img/close.svg" alt="">
</div>
</div>
</div>
......@@ -320,138 +324,78 @@
$(document).ready(function () {
// 小时产量
EchartsB5()
// 初始化
let wsState = 0; // WebSocket 状态
function initFunc() {
console.log('开始链接');
const codeDianshi = '1194168167242801152'
// 生产
const ws = new WebSocket('ws://127.0.0.1:10001/order/ulocScreen/' + codeDianshi);
//监听是否连接成功
ws.onopen = function () {
wsState = ws.readyState
console.log(ws.readyState);
console.log('ws连接状态：' + ws.readyState);
updateStatus(false);
}
// 接听服务器发回的信息并处理展示
ws.onmessage = function (option = {}) {
console.log('websock已打开')
console.log(ws.readyState);
wsState = ws.readyState
const {data = "{}"} = option
const _data = JSON.parse(data)
console.log(_data);
if(_data.type==='carTypeList'){
var snMapList=_data.data;
if(snMapList.length>0){
for (let i = 0; i < snMapList.length; i++) {
if(i>=10){
break;
}
$("#carType"+i).text(snMapList[i].carType);
// 子页面 监听父页面消息
window.addEventListener('message', function(event={}) {
const _data=JSON.parse( (event.data||"{}") )
console.log(_data);
if(_data.type==='carTypeList'){
var snMapList=_data.data;
if(snMapList.length>0){
for (let i = 0; i < snMapList.length; i++) {
if(i>=10){
break;
}
$("#carType"+i).text(snMapList[i].carType);
}
}
if(_data.type==='statusWarningMag'){
$("#equipmentStatus").text(_data.status);
if(_data.status==='异常'){
$("#equipmentStatus").removeClass("text-124");
$("#equipmentStatus").removeClass("text-124-error");
$("#equipmentStatus").addClass("text-124-error");
//TODO 异常报警信息
let warningMsg = _data.warningMsg;
$("#msgShowWindow").text(warningMsg);
$("#msgShowWindow").addClass("error");
}else{
$("#equipmentStatus").removeClass("text-124");
$("#equipmentStatus").removeClass("text-124-error");
$("#equipmentStatus").addClass("text-124");
}
}
}
// 监听连接关闭事件
ws.onclose = function () {
wsState = ws.readyState
// 监听整个过程中websocket的状态
console.log('ws连接关闭状态：' + ws.readyState);
updateStatus(true);
if(_data.type==='statusWarningMag'){
$("#equipmentStatus").text(_data.status);
if(_data.status==='异常'){
$("#equipmentStatus").removeClass("text-124");
$("#equipmentStatus").removeClass("text-124-error");
$("#equipmentStatus").addClass("text-124-error");
//TODO 异常报警信息
let warningMsg = _data.warningMsg;
$("#msgShowWindow").text(warningMsg);
$("#msgShowWindow").addClass("error");
}else{
$("#equipmentStatus").removeClass("text-124");
$("#equipmentStatus").removeClass("text-124-error");
$("#msgShowWindow").removeClass("error");
$("#equipmentStatus").addClass("text-124");
}
}
// 监听并处理error事件
ws.onerror = function (error) {
wsState = ws.readyState
updateStatus(true);
console.log('错误error' + error);
if(_data.type==='conStatusChange'){
updateStatus(_data.newStatus);
}
}
// websokes 连接
function WebSocketInitHandle() {
//清除interval定时器
if (window.IntervalItemCenter13) {
clearInterval(window.IntervalItemCenter13);
}
setTimeout(() => {
initFunc() // 初始化
// $("#selectCodeContainer").css("z-index",-999)
window.IntervalItemCenter13 = setInterval(() => {
if (wsState != 1) {
initFunc() // 初始化
}
}, (1000 * 10))
}, 500)
}
// 初始化
setTimeout(() => {
WebSocketInitHandle()
}, 500);
}, false);
// 初始时关闭提示
closeAlert();
});
//清除interval定时器
if (window.IntervalItemCenter1366) {
clearInterval(window.IntervalItemCenter1366);
}
function showAlert() {
var div = document.getElementById('dialog-entirety-box-id');
div.style.display = 'block';
}
// 定时刷新
window.IntervalItemCenter1366 = setInterval(() => {
location.reload()
}, (1000 * 60 * 60 * 3))
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();
showAlert();
} else {
// closeAlert();
closeAlert();
}
}
</script>
</body>
</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