Skip to content

K
kanban-nanjing-11
Commit 4e08f60c authored by xcc's avatar xcc
Browse files
Options

南京MEB代码

parent 6f77eebb
Show whitespace changes
Inline Side-by-side
Showing with 598 additions and 214 deletions
css/page2.css
View file @ 4e08f60c
......@@ -7,9 +7,17 @@
position: relative;
/* background: url(../img/logistics/box1.png) no-repeat; */
border: 1px solid #026d91;
/* height: 608px; */
height: 448px;
height: 580px;
/*height: 448px;*/
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; }
......@@ -731,8 +739,10 @@
}
.zongchanliang-box{
height: 300px;
/*height: 300px;*/
height: 923px;
height: 580px;
/*height: 1240px;*/
}
.bottom-inex23-box{
margin-right: 0px !important;
......@@ -750,13 +760,26 @@
margin-top: 32px;
color: #1DE9B6;
}
.text-124-error{
text-align: center;
font-size: 140px;
margin-top: 32px;
color: #e91d1d;
}
.text-125{
text-align: center;
font-size: 140px;
margin-top: 32px;
}
.text-126{
text-align: center;
font-size: 60px;
margin-top: 32px;
}
.error{
color: #e91d1d;
}
.ul-list-123{
padding-left: 26px;
padding-right: 26px;
......
js/page2.js
View file @ 4e08f60c
// 开动率
function EchartsB3(){
/*function EchartsB3(){
var myChart = echarts.init(document.getElementById('echart_b3'));
var data1=['1月','2月','3月','4月','5月','6月','7月']; // x轴
......@@ -138,18 +138,30 @@ function EchartsB3(){
myChart.setOption(option, true);
}
}*/
// 小时产量
function EchartsB5(){
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 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]; // 折线
$.ajax({
url: 'http://127.0.0.1:8180/stage-api/order/orderSn/siteHourReport/'+siteId,
type: 'GET',
headers: {
'Authorization': 'Bearer_' + token
},
success: function(response) {
console.log(response);
data1=response.data.hours;
data2=response.data.planNums;
data4=response.data.realNums;
var option = {
// tooltip: {
// trigger: 'axis',
......@@ -279,7 +291,11 @@ function EchartsB5(){
]
};
myChart.setOption(option, true);
},
error: function(xhr) {
console.error('Error: ' + xhr.status);
}
});
}
page1.html
View file @ 4e08f60c
......@@ -55,9 +55,9 @@
<span class="box-tittle-text">当前车型</span>
</div>
<div class="ibox_m">
<p class="text-11">AS22</p>
<P class="text-22">TPS:0010772</P>
<P class="text-33">左驾无天窗(GCC中东/伊朗/智利/南美)</P>
<p class="text-11" id="firstCarInfo-no">AS22</p>
<P class="text-22" id="firstCarInfo-tps">TPS:0010772</P>
<P class="text-33" id="firstCarInfo-name">左驾无天窗(GCC中东/伊朗/智利/南美)</P>
</div>
</div>
......@@ -68,9 +68,9 @@
<span class="box-tittle-text">下一车型</span>
</div>
<div class="ibox_m">
<p class="text-11">AS22H</p>
<P class="text-22">TPS:0010773</P>
<P class="text-33">国六左驾无天窗手动尾门行李架无鲨</P>
<p class="text-11" id="nextCarInfo-no">AS22H</p>
<P class="text-22" id="nextCarInfo-tps">TPS:0010773</P>
<P class="text-33" id="nextCarInfo-name">国六左驾无天窗手动尾门行李架无鲨</P>
</div>
</div>
......@@ -87,7 +87,7 @@
<li>上料</li>
</ul> -->
<img src="./img/2233.png" alt="">
<img src="" alt="" id="image">
</div>
</div>
......@@ -101,8 +101,8 @@
</div>
<div class="ibox_m">
<div class="text-33">
<span>58</span>
<b>s</b>
<span id="stopwatch">58</span>
<b id="stopwatch_s">s</b>
</div>
</div>
......@@ -115,7 +115,7 @@
</div>
<div class="ibox_m">
<div class="text-33">
<span>8</span>
<span id="carInfo-batchNumber">8</span>
<b>台</b>
</div>
</div>
......@@ -188,13 +188,21 @@
</div>
<!-- <h1>与服务器连接失败!</h1> -->
<!-- <h1>领导莅临检查请注意设备5S！</h1> -->
<!-- <h1>与服务器连接失败!</h1> -->
<!-- <h1>领导莅临检查请注意设备5S！</h1>-->
<!-- <div class="dialog-entirety-box">
<h1>领导莅临检查请注意设备5S！</h1>
<div class="dialog-entirety-box" id="dialog-entirety-box-id">
<h1>网络连接已断开！</h1>
<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>
......@@ -203,15 +211,215 @@
<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>
</body>
<style>
.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 @ 4e08f60c
......@@ -56,7 +56,7 @@
<span class="box-tittle-text">当前车型</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType0"></p>
</div>
</div>
......@@ -67,7 +67,7 @@
<span class="box-tittle-text">后续车型1</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType1"></p>
</div>
......@@ -79,7 +79,7 @@
<span class="box-tittle-text">后续车型2</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType2"></p>
</div>
......@@ -91,7 +91,7 @@
<span class="box-tittle-text">后续车型3</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType3"></p>
</div>
......@@ -103,7 +103,7 @@
<span class="box-tittle-text">后续车型4</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType4"></p>
</div>
......@@ -117,7 +117,7 @@
<span class="box-tittle-text">后续车型5</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType5"></p>
</div>
......@@ -129,7 +129,7 @@
<span class="box-tittle-text">后续车型6</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType6"></p>
</div>
......@@ -141,7 +141,7 @@
<span class="box-tittle-text">后续车型7</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType7"></p>
</div>
......@@ -153,7 +153,7 @@
<span class="box-tittle-text">后续车型8</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType8"></p>
</div>
......@@ -165,7 +165,7 @@
<span class="box-tittle-text">后续车型9</span>
</div>
<div class="ibox_m">
<p class="text-123">AS22</p>
<p class="text-123" id="carType9"></p>
</div>
......@@ -173,7 +173,7 @@
</div>
<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">
<span class="box-tittle-text">开动率</span>
</div>
......@@ -222,7 +222,8 @@
</li>
</ul>
</div>
</div>
</div>-->
</div>
</div>
......@@ -233,7 +234,7 @@
<span class="box-tittle-text">设备状态</span>
</div>
<div class="ibox_m">
<p class="text-124">自动</p>
<p class="text-124" id="equipmentStatus">正常</p>
</div>
</div>
......@@ -247,7 +248,7 @@
<span style="font-size: 86px;">台</span>
</p>
<ul class="ul-list-123">
<!--<ul class="ul-list-123">
<li>
<div>班次1:</div>
<div>
......@@ -269,10 +270,12 @@
<span>台</span>
</div>
</li>
</ul>
</ul>-->
</div>
</div>
</div>
</div>
<div class="box-right-container box-echarts-body-index2">
......@@ -295,6 +298,13 @@
</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>
......@@ -302,19 +312,146 @@
</div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></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>
</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