Skip to content

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

页面整合一起

parent 41c68210
Hide whitespace changes
Inline Side-by-side
Showing with 490 additions and 374 deletions
css/page1.css
View file @ 68dd4d12
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.topbox_m .logo { background: url(../img/logistics/logobg.png) center center no-repeat;} .topbox_m .logo { background: url(../img/logistics/logobg.png) center center no-repeat;}
.main_t { .main_t {
position: relative; position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */ /* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91; border: 1px solid #026d91;
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
.ibox_m{ .ibox_m{
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
.ibox_m .echarts-body{ .ibox_m .echarts-body{
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
/* 列表文字大小 */ /* 列表文字大小 */
.table-ui-box ul li{ .table-ui-box ul li{
font-size: 32px; font-size: 32px;
} }
/* 列宽 比例 */ /* 列宽 比例 */
...@@ -451,14 +451,14 @@ ...@@ -451,14 +451,14 @@
.box-echarts-body-index2 .main_t.ul-index2 .box-left .echarts-div{ .box-echarts-body-index2 .main_t.ul-index2 .box-left .echarts-div{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.box-echarts-body-index2 .main_t.ul-index2 .box-right{ .box-echarts-body-index2 .main_t.ul-index2 .box-right{
flex: 1; flex: 1;
} }
.custem-table-index1, .custem-table-index1,
.custem-table-index2, .custem-table-index2,
.custem-table-index5 .custem-table-index5
{ {
...@@ -530,7 +530,7 @@ ...@@ -530,7 +530,7 @@
.box-echarts-body-index2 .main_t.ul-index3 .box-left .echarts-div{ .box-echarts-body-index2 .main_t.ul-index3 .box-left .echarts-div{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.box-echarts-body-index2 .main_t.ul-index3 .box-right{ .box-echarts-body-index2 .main_t.ul-index3 .box-right{
flex: 1; flex: 1;
} }
...@@ -587,7 +587,7 @@ ...@@ -587,7 +587,7 @@
.box-echarts-body-index1 .main_t.ul-index3 .box-left .echarts-div{ .box-echarts-body-index1 .main_t.ul-index3 .box-left .echarts-div{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.box-echarts-body-index1 .main_t.ul-index3 .box-right{ .box-echarts-body-index1 .main_t.ul-index3 .box-right{
flex: 1; flex: 1;
} }
...@@ -848,8 +848,18 @@ ...@@ -848,8 +848,18 @@
height: 160px; height: 160px;
} }
.ul-text-44 li{ .ul-text-44 li{
display: inline-block; 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 @@ ...@@ -823,3 +823,34 @@
width: 100%; width: 100%;
height: 360px; 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 @@ ...@@ -16,49 +16,160 @@
<body> <body>
<div> <div>
<iframe id="myiframe1" style="width: 800px;height: 800px;border: 2px solid red;" src="./index22.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: 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> </div>
<script> <script>
$(document).ready(function() { $(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
// 向第一个子页面 发消息 const {data = "{}"} = option
var iframe1 = document.getElementById('myiframe1').contentWindow; const _data = JSON.parse(data)
var _json1={ console.log(_data);
a:1, iframe1.postMessage(JSON.stringify(_data), '*');
b:2, iframe2.postMessage(JSON.stringify(_data), '*');
c:3, }
// 监听连接关闭事件
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(()=>{ function initBroadcastWebsocketFunc() {
iframe1.postMessage(JSON.stringify(_json1), '*'); // 公告消息websocket
},1000) // 初始化
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> </script>
</body> </body>
</html> </html>
\ No newline at end of file
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
...@@ -54,10 +54,10 @@ ...@@ -54,10 +54,10 @@
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">当前车型</span> <span class="box-tittle-text">当前车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m" id="is-null-text-1">
<p class="text-11" id="firstCarInfo-no">AS22</p> <p class="text-11" id="firstCarInfo-no"></p>
<P class="text-22" id="firstCarInfo-tps">TPS:0010772</P> <P class="text-22" id="firstCarInfo-tps"></P>
<P class="text-33" id="firstCarInfo-name">左驾无天窗(GCC中东/伊朗/智利/南美)</P> <P class="text-33" id="firstCarInfo-name"></P>
</div> </div>
</div> </div>
...@@ -67,10 +67,10 @@ ...@@ -67,10 +67,10 @@
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">下一车型</span> <span class="box-tittle-text">下一车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m" id="is-null-text-2">
<p class="text-11" id="nextCarInfo-no">AS22H</p> <p class="text-11" id="nextCarInfo-no"></p>
<P class="text-22" id="nextCarInfo-tps">TPS:0010773</P> <P class="text-22" id="nextCarInfo-tps"></P>
<P class="text-33" id="nextCarInfo-name">国六左驾无天窗手动尾门行李架无鲨</P> <P class="text-33" id="nextCarInfo-name"></P>
</div> </div>
</div> </div>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">工艺图片</span> <span class="box-tittle-text">工艺图片</span>
</div> </div>
<div class="ibox_m right-box-img"> <div class="ibox_m right-box-img" id="is-null-text-3">
<!-- <ul class="ul-list-11"> <!-- <ul class="ul-list-11">
<li class="color1">自动</li> <li class="color1">自动</li>
<li>输送</li> <li>输送</li>
...@@ -99,10 +99,10 @@ ...@@ -99,10 +99,10 @@
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">计时</span> <span class="box-tittle-text">计时</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m" id="is-null-text-4">
<div class="text-33"> <div class="text-33">
<span id="stopwatch">58</span> <span id="stopwatch"></span>
<b id="stopwatch_s">s</b> <b id="stopwatch_s"></b>
</div> </div>
</div> </div>
...@@ -113,78 +113,32 @@ ...@@ -113,78 +113,32 @@
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">批次剩余</span> <span class="box-tittle-text">批次剩余</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m" id="is-null-text-5">
<div class="text-33"> <div class="text-33">
<span id="carInfo-batchNumber">8</span> <span id="carInfo-batchNumber"></span>
<b>台</b> <b id="carInfo-batchNumber-text"></b>
</div> </div>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main_t ul-index3" >
<div class="ibox_t"> <div class="ibox_t">
<span class="box-tittle-text">当班产量</span> <span class="box-tittle-text">当班产量</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m" id="is-null-text-6">
<ul class="ul-text-33"> <ul class="ul-text-33">
<li> <li>
<span>计划产量</span> <span id="output-title"></span>
<span>400</span> <span id="output-sum"></span>
<span>台</span> <span id="output-text"></span>
</li>
<li>
<span>当前总产量</span>
<span>207</span>
<span>台</span>
</li> </li>
</ul> </ul>
<ul class="ul-text-44"> <ul class="ul-text-44" id="tableIndex">
<li>                            
<span>ZP11</span>                         </ul>
<span class="span2">
<span>207</span>
<span>台</span>
</span>
</li>
<li>
<span>AS21M</span>
<span>
<span>207</span>
<span>台</span>
</span>
</li>
<li>
<span>ZP11M3</span>
<span class="span2">
<span>207</span>
<span>台</span>
</span>
</li>
<li>
<span>AS22</span>
<span>
<span>207</span>
<span>台</span>
</span>
</li>
<li>
<span>AS21</span>
<span class="span2">
<span>207</span>
<span>台</span>
</span>
</li>
<li>
<span>AS24</span>
<span>
<span>207</span>
<span>台</span>
</span>
</li>
</ul>
</div> </div>
</div> </div>
...@@ -219,160 +173,148 @@ ...@@ -219,160 +173,148 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
// 初始化 window.addEventListener('message', function(event={}) {
let wsState = 0; // WebSocket 状态 const _data=JSON.parse( (event.data||"{}") )
console.log(_data);
function initFunc() { closeMessage();
console.log('开始链接'); if(_data.type=='info'){
const codeDianshi = '1194167820541632512' if(_data.message.firstCarInfo){
// 生产 $("#firstCarInfo-no").text(_data.message.firstCarInfo.carNo);
const ws = new WebSocket('ws://127.0.0.1:10001/order/ulocScreen/' + codeDianshi); $("#firstCarInfo-tps").text('TPS:'+_data.message.firstCarInfo.carTps);
$("#firstCarInfo-name").text(_data.message.firstCarInfo.carName);
}else {
//监听是否连接成功 isNull('is-null-text-1');
ws.onopen = function () { }
wsState = ws.readyState
if(_data.message.nextCarInfo){
console.log(ws.readyState); $("#nextCarInfo-no").text(_data.message.nextCarInfo.carNo);
console.log('ws连接状态：' + ws.readyState); $("#nextCarInfo-tps").text('TPS:'+_data.message.nextCarInfo.carTps);
updateStatus(false); $("#nextCarInfo-name").text(_data.message.nextCarInfo.carName);
} }else {
isNull('is-null-text-2');
}
// 接听服务器发回的信息并处理展示
ws.onmessage = function (option = {}) { if(_data.message.imgUrl){
console.log('websock已打开') $("#image").attr("src", _data.message.imgUrl);
console.log(ws.readyState); }else {
wsState = ws.readyState isNull('is-null-text-3');
}
const {data = "{}"} = option if(_data.message.batchNumber){
const _data = JSON.parse(data) $("#carInfo-batchNumber").html(_data.message.batchNumber);
console.log(_data); $("#carInfo-batchNumber-text").html("台");
}else {
closeMessage(); isNull('is-null-text-4');
}
if(_data.type=='info'){
if(_data.message.firstCarInfo){ if (_data.message.jph){
$("#firstCarInfo-no").text(_data.message.firstCarInfo.carNo); clearInterval(timer);
$("#firstCarInfo-tps").text('TPS:'+_data.message.firstCarInfo.carTps);
$("#firstCarInfo-name").text(_data.message.firstCarInfo.carName); // 定义计时器开始的时间
} var startTime = new Date().getTime();
if(_data.message.nextCarInfo){ function updateStopwatch() {
$("#nextCarInfo-no").text(_data.message.nextCarInfo.carNo); // 获取当前时间
$("#nextCarInfo-tps").text('TPS:'+_data.message.nextCarInfo.carTps); var currentTime = new Date().getTime();
$("#nextCarInfo-name").text(_data.message.nextCarInfo.carName);
} // 计算经过的时间（以毫秒为单位）
var elapsedTime = currentTime - startTime;
if(_data.message.imgUrl){
$("#image").attr("src", _data.message.imgUrl); // 将时间转换成秒
} var seconds = Math.floor(elapsedTime / 1000);
if(_data.message.batchNumber){ // 将结果输出到页面上
$("#carInfo-batchNumber").text(_data.message.batchNumber); $("#stopwatch").html(seconds);
} $("#stopwatch_s").html('S');
// 如果经过的时间超过 30 秒，将字体颜色改为红色
if (_data.message.jph){ if (seconds >= _data.message.jph) {
clearInterval(timer); $("#stopwatch").css("color", "red");
$("#stopwatch_s").css("color", "red");
// 定义计时器开始的时间 }
var startTime = new Date().getTime(); }
function updateStopwatch() { // 每秒钟更新一次计时器
// 获取当前时间 var timer = setInterval(updateStopwatch, 1000);
var currentTime = new Date().getTime(); }else {
isNull('is-null-text-5');
// 计算经过的时间（以毫秒为单位） }
var elapsedTime = currentTime - startTime;
if (_data.message.result){
// 将时间转换成秒
var seconds = Math.floor(elapsedTime / 1000); if(_data.message.result.ALL){
$("#output-title").html("当前总产量");
// 将结果输出到页面上 $("#output-sum").html(_data.message.result.ALL);
$("#stopwatch").html(seconds); $("#output-text").html("台");
}
// 如果经过的时间超过 30 秒，将字体颜色改为红色 // RightTableInit([
if (seconds >= _data.message.jph) { // {
$("#stopwatch").css("color", "red"); // text1: 'ZP11', // 车型
$("#stopwatch_s").css("color", "red"); // text2: '207', // 数量
} // },
} // {
// text1: 'ZP12', // 车型
// 每秒钟更新一次计时器 // text2: '207', // 数量
var timer = setInterval(updateStopwatch, 1000); // },
} // {
} // text1: 'ZP13', // 车型
// text2: '207', // 数量
if(_data.type=='broadcast'){ // },
if(_data.message){ // {
$("#msgShowWindow").text(_data.message); // text1: 'ZP14', // 车型
showMessage(); // text2: '207', // 数量
} // },
} // {
// text1: 'ZP15', // 车型
} // text2: '207', // 数量
// },
// 监听连接关闭事件 // {
ws.onclose = function () { // text1: 'ZP16', // 车型
wsState = ws.readyState // text2: '207', // 数量
// },
// 监听整个过程中websocket的状态 // {
console.log('ws连接关闭状态：' + ws.readyState); // text1: 'ZP17', // 车型
updateStatus(true); // text2: '207', // 数量
} // },
// {
// 监听并处理error事件 // text1: 'ZP18', // 车型
ws.onerror = function (error) { // text2: '207', // 数量
wsState = ws.readyState // },
updateStatus(true); // {
console.log('错误error' + error); // text1: 'ZP19', // 车型
} // text2: '207', // 数量
} // },
// {
// text1: 'ZP20', // 车型
// websokes 连接 // text2: '207', // 数量
function WebSocketInitHandle() { // },
// {
//清除interval定时器 // text1: 'ZP21', // 车型
if (window.IntervalItemCenter13) { // text2: '207', // 数量
clearInterval(window.IntervalItemCenter13); // },
} // {
// text1: 'ZP22', // 车型
// text2: '207', // 数量
setTimeout(() => { // },
// ])
initFunc() // 初始化 RightTableInit(_data.message.result);
// $("#selectCodeContainer").css("z-index",-999) }else {
isNull('is-null-text-6');
window.IntervalItemCenter13 = setInterval(() => { }
if (wsState != 1) { }
initFunc() // 初始化
} if(_data.type=='broadcast'){
}, (1000 * 10)) if(_data.message){
$("#msgShowWindow").text(_data.message);
}, 500) showMessage();
}
} }
if(_data.type==='conStatusChange'){
// 初始化 updateStatus(_data.newStatus);
setTimeout(() => { }
WebSocketInitHandle() }, false);
}, 500);
// 初始时关闭提示
closeAlert();
//清除interval定时器
if (window.IntervalItemCenter1366) {
clearInterval(window.IntervalItemCenter1366);
}
// 定时刷新
window.IntervalItemCenter1366 = setInterval(() => {
location.reload()
}, (1000 * 60 * 60 * 3))
}); });
var status = false; // 初始状态为 false var status = false; // 初始状态为 false
...@@ -405,9 +347,6 @@ ...@@ -405,9 +347,6 @@
closeAlert(); closeAlert();
} }
} }
// 初始时关闭提示
closeAlert();
</script> </script>
</body> </body>
<style> <style>
......
page2.html
View file @ 68dd4d12
...@@ -305,6 +305,10 @@ ...@@ -305,6 +305,10 @@
</div> </div>
</div> </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>
...@@ -320,138 +324,78 @@ ...@@ -320,138 +324,78 @@
$(document).ready(function () { $(document).ready(function () {
// 小时产量 // 小时产量
EchartsB5() 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 = {}) { window.addEventListener('message', function(event={}) {
console.log('websock已打开') const _data=JSON.parse( (event.data||"{}") )
console.log(ws.readyState); console.log(_data);
wsState = ws.readyState if(_data.type==='carTypeList'){
var snMapList=_data.data;
if(snMapList.length>0){
const {data = "{}"} = option for (let i = 0; i < snMapList.length; i++) {
const _data = JSON.parse(data) if(i>=10){
console.log(_data); break;
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);
} }
$("#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");
}
}
} }
if(_data.type==='statusWarningMag'){
// 监听连接关闭事件 $("#equipmentStatus").text(_data.status);
ws.onclose = function () { if(_data.status==='异常'){
wsState = ws.readyState $("#equipmentStatus").removeClass("text-124");
$("#equipmentStatus").removeClass("text-124-error");
// 监听整个过程中websocket的状态 $("#equipmentStatus").addClass("text-124-error");
console.log('ws连接关闭状态：' + ws.readyState); //TODO 异常报警信息
updateStatus(true); 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");
}
} }
if(_data.type==='conStatusChange'){
// 监听并处理error事件 updateStatus(_data.newStatus);
ws.onerror = function (error) {
wsState = ws.readyState
updateStatus(true);
console.log('错误error' + error);
} }
} }, false);
// 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);
// 初始时关闭提示
closeAlert();
});
//清除interval定时器 function showAlert() {
if (window.IntervalItemCenter1366) { var div = document.getElementById('dialog-entirety-box-id');
clearInterval(window.IntervalItemCenter1366); div.style.display = 'block';
} }
// 定时刷新 function closeAlert() {
window.IntervalItemCenter1366 = setInterval(() => { var div = document.getElementById('dialog-entirety-box-id');
location.reload() div.style.display = 'none';
}, (1000 * 60 * 60 * 3)) }
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) { function updateStatus(newStatus) {
if (newStatus) { if (newStatus) {
// showAlert(); showAlert();
} else { } else {
// closeAlert(); 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