Skip to content

K
kanban-nanjing-11
Commit f3d75ec4 authored by Allencl's avatar Allencl
Browse files
Options

Merge branch 'main' of http://124.222.198.109:34511/caolun/kanban-nanjing-11

parents 2e664f82 4e08f60c
Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 214 deletions
css/page2.css
View file @ f3d75ec4
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
.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;
/* height: 608px; */ height: 580px;
height: 448px; /*height: 448px;*/
margin-bottom: 22px;} margin-bottom: 22px;}
.main_b {
position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91;
height: 100px;
/*height: 448px;*/
margin-bottom: 22px;}
.main_f { background: url(../img/logistics/box1.png) no-repeat; height: 864px; } .main_f { background: url(../img/logistics/box1.png) no-repeat; height: 864px; }
...@@ -20,11 +28,11 @@ ...@@ -20,11 +28,11 @@
.ibox3 { float: right; width: 1192px;} .ibox3 { float: right; width: 1192px;}
.ibox4 { } .ibox4 { }
.ibox_t { position: absolute; .ibox_t { position: absolute;
/* left: 12px; top: 22px; */ /* left: 12px; top: 22px; */
left: -4px; left: -4px;
top: 6px; top: 6px;
background: url(../img/logistics/tit.png) left top no-repeat; background: url(../img/logistics/tit.png) left top no-repeat;
/* width: 676px; */ /* width: 676px; */
width: 100%; width: 100%;
height: 100px; padding: 24px 0 0 46px; box-sizing: border-box; } height: 100px; padding: 24px 0 0 46px; box-sizing: border-box; }
...@@ -94,7 +102,7 @@ ...@@ -94,7 +102,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{
...@@ -293,7 +301,7 @@ ...@@ -293,7 +301,7 @@
/* 列表文字大小 */ /* 列表文字大小 */
.table-ui-box ul li{ .table-ui-box ul li{
font-size: 32px; font-size: 32px;
} }
/* 列宽 比例 */ /* 列宽 比例 */
...@@ -482,14 +490,14 @@ ...@@ -482,14 +490,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
{ {
...@@ -561,7 +569,7 @@ ...@@ -561,7 +569,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;
} }
...@@ -618,7 +626,7 @@ ...@@ -618,7 +626,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;
} }
...@@ -731,8 +739,10 @@ ...@@ -731,8 +739,10 @@
} }
.zongchanliang-box{ .zongchanliang-box{
height: 300px; /*height: 300px;*/
height: 923px; height: 923px;
height: 580px;
/*height: 1240px;*/
} }
.bottom-inex23-box{ .bottom-inex23-box{
margin-right: 0px !important; margin-right: 0px !important;
...@@ -750,13 +760,26 @@ ...@@ -750,13 +760,26 @@
margin-top: 32px; margin-top: 32px;
color: #1DE9B6; color: #1DE9B6;
} }
.text-124-error{
text-align: center;
font-size: 140px;
margin-top: 32px;
color: #e91d1d;
}
.text-125{ .text-125{
text-align: center; text-align: center;
font-size: 140px; font-size: 140px;
margin-top: 32px; margin-top: 32px;
} }
.text-126{
text-align: center;
font-size: 60px;
margin-top: 32px;
}
.error{
color: #e91d1d;
}
.ul-list-123{ .ul-list-123{
padding-left: 26px; padding-left: 26px;
padding-right: 26px; padding-right: 26px;
...@@ -799,4 +822,4 @@ ...@@ -799,4 +822,4 @@
.echarts-div{ .echarts-div{
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
\ No newline at end of file
js/page2.js
View file @ f3d75ec4
// 开动率 // 开动率
function EchartsB3(){ /*function EchartsB3(){
var myChart = echarts.init(document.getElementById('echart_b3')); var myChart = echarts.init(document.getElementById('echart_b3'));
var data1=['1月','2月','3月','4月','5月','6月','7月']; // x轴 var data1=['1月','2月','3月','4月','5月','6月','7月']; // x轴
...@@ -138,148 +138,164 @@ function EchartsB3(){ ...@@ -138,148 +138,164 @@ function EchartsB3(){
myChart.setOption(option, true); myChart.setOption(option, true);
} }*/
// 小时产量 // 小时产量
function EchartsB5(){ function EchartsB5(){
var myChart = echarts.init(document.getElementById('echart_b5')); var myChart = echarts.init(document.getElementById('echart_b5'));
var siteId="333333";
var token="b7de53ef-bcf8-494f-aaf4-2e890298e507";
var data1=['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00']; // x轴 var data1=['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00']; // x轴
var data2=[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15]; // 柱状图数据 var data2=[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15]; // 柱状图数据
var data4=[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10]; // 折线 var data4=[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10]; // 折线
var option = { $.ajax({
// tooltip: { url: 'http://127.0.0.1:8180/stage-api/order/orderSn/siteHourReport/'+siteId,
// trigger: 'axis', type: 'GET',
// axisPointer: { headers: {
// type: 'cross', 'Authorization': 'Bearer_' + token
// crossStyle: {
// color: '#999'
// }
// }
// },
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
grid: {
left: 30,
right: 30,
top: 50,
bottom: 48,
containLabel: true
}, },
xAxis: [ success: function(response) {
{ console.log(response);
type: 'category', data1=response.data.hours;
data: data1, data2=response.data.planNums;
// show: false, // 隐藏x轴 data4=response.data.realNums;
axisLabel: { var option = {
textStyle: { // tooltip: {
color: '#fff', //更改坐标轴文字颜色 // trigger: 'axis',
fontSize : 28 //更改坐标轴文字大小 // axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
// },
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
grid: {
left: 30,
right: 30,
top: 50,
bottom: 48,
containLabel: true
}, },
}, xAxis: [
axisPointer: { {
type: 'shadow' type: 'category',
} data: data1,
} // show: false, // 隐藏x轴
], axisLabel: {
yAxis: [ textStyle: {
{ color: '#fff', //更改坐标轴文字颜色
type: 'value', fontSize : 28 //更改坐标轴文字大小
// name: 'Precipitation', },
min: 0, },
// max: 100, axisPointer: {
// interval: 20, type: 'shadow'
// show: false, // 隐藏x轴 }
}
],
yAxis: [
{
type: 'value',
// name: 'Precipitation',
min: 0,
// max: 100,
// interval: 20,
// show: false, // 隐藏x轴
// axisLine:{ // axisLine:{
// lineStyle:{ // lineStyle:{
// color:'#0087ED', // color:'#0087ED',
// width:1,//这里是为了突出显示加上的 // width:1,//这里是为了突出显示加上的
// } // }
// }, // },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'line', type: 'line',
color: 'rgba(255, 255, 255,0.4)' color: 'rgba(255, 255, 255,0.4)'
} }
}, },
// splitLine: { // splitLine: {
// show: false, // show: false,
// lineStyle: { // lineStyle: {
// type: 'dotted', // type: 'dotted',
// color: 'rgba(255, 255, 255,0.3)' // color: 'rgba(255, 255, 255,0.3)'
// } // }
// }, // },
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
textStyle: { textStyle: {
color: '#fff', //更改坐标轴文字颜色 color: '#fff', //更改坐标轴文字颜色
fontSize : 28 //更改坐标轴文字大小 fontSize : 28 //更改坐标轴文字大小
}, },
} }
}, },
], ],
series: [ series: [
{ {
name: 'Evaporation', name: 'Evaporation',
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
// 修改柱子颜色 // 修改柱子颜色
color: '#72ccff', color: '#72ccff',
width:"100" width:"100"
}, },
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + ' ml'; // return value + ' ml';
// } // }
// }, // },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium', label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
// formatter: function(value){ // formatter: function(value){
// return value.data +'%' // return value.data +'%'
// }, // },
}, },
data: data2, data: data2,
}, },
{ {
name: 'Evaporation2', name: 'Evaporation2',
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
// 修改柱子颜色 // 修改柱子颜色
color: '#91cc75', color: '#91cc75',
width:"100" width:"100"
}, },
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + ' ml'; // return value + ' ml';
// } // }
// }, // },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium', label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
// formatter: function(value){ // formatter: function(value){
// return value.data +'%' // return value.data +'%'
// }, // },
}, },
data: data4, data: data4,
}, },
] ]
}; };
myChart.setOption(option, true);
myChart.setOption(option, true); },
error: function(xhr) {
console.error('Error: ' + xhr.status);
}
});
} }
\ No newline at end of file
page1.html
View file @ f3d75ec4
...@@ -40,13 +40,13 @@ ...@@ -40,13 +40,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <a href="factory.html" class="topback wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s"></a> --> <!-- <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="box-right-container box-echarts-body-index1"> <div class="box-right-container box-echarts-body-index1">
<div class="main_t ul-index1"> <div class="main_t ul-index1">
...@@ -55,11 +55,11 @@ ...@@ -55,11 +55,11 @@
<span class="box-tittle-text">当前车型</span> <span class="box-tittle-text">当前车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-11">AS22</p> <p class="text-11" id="firstCarInfo-no">AS22</p>
<P class="text-22">TPS:0010772</P> <P class="text-22" id="firstCarInfo-tps">TPS:0010772</P>
<P class="text-33">左驾无天窗(GCC中东/伊朗/智利/南美)</P> <P class="text-33" id="firstCarInfo-name">左驾无天窗(GCC中东/伊朗/智利/南美)</P>
</div> </div>
</div> </div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
...@@ -68,11 +68,11 @@ ...@@ -68,11 +68,11 @@
<span class="box-tittle-text">下一车型</span> <span class="box-tittle-text">下一车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-11">AS22H</p> <p class="text-11" id="nextCarInfo-no">AS22H</p>
<P class="text-22">TPS:0010773</P> <P class="text-22" id="nextCarInfo-tps">TPS:0010773</P>
<P class="text-33">国六左驾无天窗手动尾门行李架无鲨</P> <P class="text-33" id="nextCarInfo-name">国六左驾无天窗手动尾门行李架无鲨</P>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main_t ul-index3">
...@@ -87,9 +87,9 @@ ...@@ -87,9 +87,9 @@
<li>上料</li> <li>上料</li>
</ul> --> </ul> -->
<img src="./img/2233.png" alt=""> <img src="" alt="" id="image">
</div> </div>
</div> </div>
</div> </div>
...@@ -101,11 +101,11 @@ ...@@ -101,11 +101,11 @@
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<div class="text-33"> <div class="text-33">
<span>58</span> <span id="stopwatch">58</span>
<b>s</b> <b id="stopwatch_s">s</b>
</div> </div>
</div> </div>
</div> </div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
...@@ -115,11 +115,11 @@ ...@@ -115,11 +115,11 @@
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<div class="text-33"> <div class="text-33">
<span>8</span> <span id="carInfo-batchNumber">8</span>
<b>台</b> <b>台</b>
</div> </div>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main_t ul-index3">
...@@ -186,22 +186,30 @@ ...@@ -186,22 +186,30 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <h1>与服务器连接失败!</h1> --> <!-- <h1>与服务器连接失败!</h1> -->
<!-- <h1>领导莅临检查请注意设备5S！</h1> --> <!-- <h1>领导莅临检查请注意设备5S！</h1>-->
<!-- <div class="dialog-entirety-box"> <div class="dialog-entirety-box" id="dialog-entirety-box-id">
<h1>领导莅临检查请注意设备5S！</h1> <h1>网络连接已断开！</h1>
<img src="./img/close.svg" alt=""> <img src="./img/close.svg" alt="">
</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> </div>
<script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script>
...@@ -209,15 +217,215 @@ ...@@ -209,15 +217,215 @@
<script> <script>
$(document).ready(function() { $(document).ready(function () {
// 初始化
let wsState = 0; // WebSocket 状态
function initFunc() {
console.log('开始链接');
const codeDianshi = '1194167820541632512'
// 生产
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);
closeMessage();
if(_data.type=='info'){
if(_data.message.firstCarInfo){
$("#firstCarInfo-no").text(_data.message.firstCarInfo.carNo);
$("#firstCarInfo-tps").text('TPS:'+_data.message.firstCarInfo.carTps);
$("#firstCarInfo-name").text(_data.message.firstCarInfo.carName);
}
if(_data.message.nextCarInfo){
$("#nextCarInfo-no").text(_data.message.nextCarInfo.carNo);
$("#nextCarInfo-tps").text('TPS:'+_data.message.nextCarInfo.carTps);
$("#nextCarInfo-name").text(_data.message.nextCarInfo.carName);
}
if(_data.message.imgUrl){
$("#image").attr("src", _data.message.imgUrl);
}
if(_data.message.batchNumber){
$("#carInfo-batchNumber").text(_data.message.batchNumber);
}
if (_data.message.jph){
clearInterval(timer);
// 定义计时器开始的时间
var startTime = new Date().getTime();
function updateStopwatch() {
// 获取当前时间
var currentTime = new Date().getTime();
// 计算经过的时间（以毫秒为单位）
var elapsedTime = currentTime - startTime;
// 将时间转换成秒
var seconds = Math.floor(elapsedTime / 1000);
// 将结果输出到页面上
$("#stopwatch").html(seconds);
// 如果经过的时间超过 30 秒，将字体颜色改为红色
if (seconds >= _data.message.jph) {
$("#stopwatch").css("color", "red");
$("#stopwatch_s").css("color", "red");
}
}
// 每秒钟更新一次计时器
var timer = setInterval(updateStopwatch, 1000);
}
}
if(_data.type=='broadcast'){
if(_data.message){
$("#msgShowWindow").text(_data.message);
showMessage();
}
}
}
// 监听连接关闭事件
ws.onclose = function () {
wsState = ws.readyState
// 监听整个过程中websocket的状态
console.log('ws连接关闭状态：' + ws.readyState);
updateStatus(true);
}
// 监听并处理error事件
ws.onerror = function (error) {
wsState = ws.readyState
updateStatus(true);
console.log('错误error' + error);
}
}
// 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);
//清除interval定时器
if (window.IntervalItemCenter1366) {
clearInterval(window.IntervalItemCenter1366);
}
// 定时刷新
window.IntervalItemCenter1366 = setInterval(() => {
location.reload()
}, (1000 * 60 * 60 * 3))
});
var status = false; // 初始状态为 false
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();
}
}
// 初始时关闭提示
}); closeAlert();
</script> </script>
</body> </body>
</html> <style>
\ No newline at end of file .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;
}
.error{
color: #e91d1d;
}
</style>
</html>
page2.html
View file @ f3d75ec4
...@@ -40,13 +40,13 @@ ...@@ -40,13 +40,13 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <a href="factory.html" class="topback wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s"></a> --> <!-- <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="container-main">
<div class="main-box-left"> <div class="main-box-left">
<div class="box-right-container box-echarts-body-index1"> <div class="box-right-container box-echarts-body-index1">
...@@ -56,9 +56,9 @@ ...@@ -56,9 +56,9 @@
<span class="box-tittle-text">当前车型</span> <span class="box-tittle-text">当前车型</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType0"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
...@@ -67,10 +67,10 @@ ...@@ -67,10 +67,10 @@
<span class="box-tittle-text">后续车型1</span> <span class="box-tittle-text">后续车型1</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType1"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main_t ul-index3">
...@@ -79,10 +79,10 @@ ...@@ -79,10 +79,10 @@
<span class="box-tittle-text">后续车型2</span> <span class="box-tittle-text">后续车型2</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType2"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index4"> <div class="main_t ul-index4">
...@@ -91,10 +91,10 @@ ...@@ -91,10 +91,10 @@
<span class="box-tittle-text">后续车型3</span> <span class="box-tittle-text">后续车型3</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType3"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index5"> <div class="main_t ul-index5">
...@@ -103,10 +103,10 @@ ...@@ -103,10 +103,10 @@
<span class="box-tittle-text">后续车型4</span> <span class="box-tittle-text">后续车型4</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType4"></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -117,10 +117,10 @@ ...@@ -117,10 +117,10 @@
<span class="box-tittle-text">后续车型5</span> <span class="box-tittle-text">后续车型5</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType5"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index2"> <div class="main_t ul-index2">
...@@ -129,10 +129,10 @@ ...@@ -129,10 +129,10 @@
<span class="box-tittle-text">后续车型6</span> <span class="box-tittle-text">后续车型6</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType6"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index3"> <div class="main_t ul-index3">
...@@ -141,10 +141,10 @@ ...@@ -141,10 +141,10 @@
<span class="box-tittle-text">后续车型7</span> <span class="box-tittle-text">后续车型7</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType7"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index4"> <div class="main_t ul-index4">
...@@ -153,10 +153,10 @@ ...@@ -153,10 +153,10 @@
<span class="box-tittle-text">后续车型8</span> <span class="box-tittle-text">后续车型8</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType8"></p>
</div> </div>
</div> </div>
<div class="main_t ul-index5"> <div class="main_t ul-index5">
...@@ -165,25 +165,25 @@ ...@@ -165,25 +165,25 @@
<span class="box-tittle-text">后续车型9</span> <span class="box-tittle-text">后续车型9</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-123">AS22</p> <p class="text-123" id="carType9"></p>
</div> </div>
</div> </div>
</div> </div>
<div class="box-right-container box-echarts-body-index2"> <div class="box-right-container box-echarts-body-index2">
<div class="main_t ul-index1"> <!--<div class="main_t ul-index1">
<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">
<ul class="echarts-mark-box" style="top: 30px;"> <ul class="echarts-mark-box" style="top: 30px;">
<li> <li>
<label style="background: #72ccff;"></label> <label style="background: #72ccff;"></label>
<span>班次一</span> <span>班次一</span>
</li> </li>
<li> <li>
<label style="background: #fac858;"></label> <label style="background: #fac858;"></label>
<span>班次二</span> <span>班次二</span>
</li> </li>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<span class="box-tittle-text">设备运行</span> <span class="box-tittle-text">设备运行</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<ul class="ul-list-123 ul-list-125"> <ul class="ul-list-123 ul-list-125">
<li> <li>
<div>正常运行:</div> <div>正常运行:</div>
...@@ -222,7 +222,8 @@ ...@@ -222,7 +222,8 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>-->
</div> </div>
</div> </div>
...@@ -233,7 +234,7 @@ ...@@ -233,7 +234,7 @@
<span class="box-tittle-text">设备状态</span> <span class="box-tittle-text">设备状态</span>
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<p class="text-124">自动</p> <p class="text-124" id="equipmentStatus">正常</p>
</div> </div>
</div> </div>
...@@ -247,7 +248,7 @@ ...@@ -247,7 +248,7 @@
<span style="font-size: 86px;">台</span> <span style="font-size: 86px;">台</span>
</p> </p>
<ul class="ul-list-123"> <!--<ul class="ul-list-123">
<li> <li>
<div>班次1:</div> <div>班次1:</div>
<div> <div>
...@@ -269,10 +270,12 @@ ...@@ -269,10 +270,12 @@
<span>台</span> <span>台</span>
</div> </div>
</li> </li>
</ul> </ul>-->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="box-right-container box-echarts-body-index2"> <div class="box-right-container box-echarts-body-index2">
...@@ -282,11 +285,11 @@ ...@@ -282,11 +285,11 @@
</div> </div>
<div class="ibox_m"> <div class="ibox_m">
<ul class="echarts-mark-box" style="top: 30px;"> <ul class="echarts-mark-box" style="top: 30px;">
<li> <li>
<label style="background: #72ccff;"></label> <label style="background: #72ccff;"></label>
<span>计划产量</span> <span>计划产量</span>
</li> </li>
<li> <li>
<label style="background: #91cc75;"></label> <label style="background: #91cc75;"></label>
<span>实际产量</span> <span>实际产量</span>
</li> </li>
...@@ -295,26 +298,160 @@ ...@@ -295,26 +298,160 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-right-container box-echarts-body-index2">
<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> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script> <script>
$(document).ready(function() { $(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);
}
}
}
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);
}
// 监听并处理error事件
ws.onerror = function (error) {
wsState = ws.readyState
updateStatus(true);
console.log('错误error' + error);
}
}
// 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);
//清除interval定时器
if (window.IntervalItemCenter1366) {
clearInterval(window.IntervalItemCenter1366);
}
// 定时刷新
window.IntervalItemCenter1366 = setInterval(() => {
location.reload()
}, (1000 * 60 * 60 * 3))
// 开动率
EchartsB3()
// 小时产量
EchartsB5()
}); });
// 当状态改变时，显示或关闭提示
function updateStatus(newStatus) {
if (newStatus) {
// showAlert();
} else {
// closeAlert();
}
}
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
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