From 01a2d01abeadef5488a100ddf58a22dbcf7b95d6 Mon Sep 17 00:00:00 2001
From: zjj <3272660260@qq.com>
Date: 星期二, 23 四月 2024 20:18:03 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor.html | 257 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 233 insertions(+), 24 deletions(-)
diff --git a/src/main/webapp/views/monitor.html b/src/main/webapp/views/monitor.html
index 4072bec..d4b9aef 100644
--- a/src/main/webapp/views/monitor.html
+++ b/src/main/webapp/views/monitor.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>WCS杈撻�佽澶囩鐞�</title>
+ <title>鏄剧ず鍣�</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -15,24 +15,71 @@
<script src="../static/layui/layui.js"></script>
<script src="../static/js/common.js"></script>
<script src="monitor/js/monitor.js"></script>
+ <style>
+ .abc {
+ border-top: 3px solid rgb(239, 177, 102);
+ border-right: 1px solid #FFF;
+ border-left: 1px solid #FFF;
+ }
+ </style>
</head>
<body>
<div style="padding: 10px;height: 100%;float: left;width: 6%">
- <div class="button-window">111</div>
+ <div class="button-window"></div>
</div>
<div style="height: 100%;padding-left: 6%">
<div style="padding: 10px;height: 100%">
- <div style="width: 100%;height: 100%;background-color: #93D1FF">
+ <div style="width: 100%;height: 100%;">
<div class="head">
- <label for="">TV1</label>
- <label for="">TV2</label>
- <label for="">TV3</label>
+ <label id="lcd-100" class="label lcd">LCD1</label>
+ <label id="lcd-110" class="label lcd">LCD2</label>
+ <label id="lcd-113" class="label lcd">LCD3</label>
</div>
<div class="body">
- <div class="time-tools">
- <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> <span id="bar-week"></span>
+ <!--<div class="time-tools">-->
+ <!-- <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> <span id="bar-week"></span>-->
+ <!--</div>-->
+ <div class="canves1 aData">
+ <div style="width: 25%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around;">
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱璧拌璺濈锛�<span id="xDistance"></span>绫�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱鍗囬檷璺濈锛�<span id="yDistance"></span>绫�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱璧拌鏃堕暱锛�<span id="xDuration"></span>绉�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱鍗囬檷鏃堕暱锛�<span id="yDuration"></span>绉�</div>
+ </div>
+ <div id="ledData" style="width: 50%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around;background-color: #93D1FF;text-align: center;">
+ AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM
+ </div>
+ <div style="width: 25%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
+ <div style="width: 80%;height: 40%">
+ <div id="line-charts"></div>
+ </div>
+ <div style="width: 80%;height: 40%">
+ <div id="pie-charts"></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="canves1 bData">
+ <!--灞曠ず鍑哄簱淇℃伅-->
+ <div id="ledData4" style="width: 100%;height: 100%;font-size: 30px;display: flex;flex-direction: column;background-color: #93D1FF;display: none">
+ <div class="info-head">
+ <!--澶撮儴-->
+ <div style="flex: 2">鎵樼洏鐮�:80001289</div>
+ <div style="flex: 2">鍟嗗搧缂栧彿</div>
+ <div style="flex: 2">鍟嗗搧鍚嶇О</div>
+ <div style="flex: 2">瑙勬牸</div>
+ <div style="flex: 1">鏁伴噺</div>
+ </div>
+ <div class="info-context">
+ <div style="flex: 2">index</div>
+ <div style="flex: 2">77008945781523</div>
+ <div style="flex: 2">瑗跨摐</div>
+ <div style="flex: 2">500g</div>
+ <div style="flex: 1">30</div>
+ </div>
+ </div>
</div>
<div class="canves" style="display: none">
<!--澶撮儴-->
@@ -69,7 +116,7 @@
<img src="monitor/img/a1.png">
<div class="info-detail">
<div class="real-data">
- <i class="count" id="xDistance">0</i>
+ <i class="count" id="xDistance0">0</i>
<span class="unit">m</span>
</div>
<div class="content">绱璧拌璺濈(绫�)</div>
@@ -79,7 +126,7 @@
<img src="monitor/img/b1.png">
<div class="info-detail">
<div class="real-data">
- <i class="count" id="yDistance">0</i>
+ <i class="count" id="yDistance0">0</i>
<span class="unit">m</span>
</div>
<div class="content">绱鍗囬檷璺濈(绫�)</div>
@@ -89,7 +136,7 @@
<img src="monitor/img/c1.png">
<div class="info-detail">
<div class="real-data">
- <i class="count" id="xDuration">0</i>
+ <i class="count" id="xDuration0">0</i>
<span class="unit">s</span>
</div>
<div class="content">绱璧拌鏃堕暱(绉�)</div>
@@ -99,7 +146,7 @@
<img src="monitor/img/d1.png">
<div class="info-detail">
<div class="real-data">
- <i class="count" id="yDuration">0</i>
+ <i class="count" id="yDuration0">0</i>
<span class="unit">s</span>
</div>
<div class="content">绱鍗囬檷鏃堕暱(绉�)</div>
@@ -111,7 +158,7 @@
<div class="image-border image-border2"></div>
<div class="image-border image-border3"></div>
<div class="image-border image-border4"></div>
- <span>娴欐睙涓壃绔嬪簱鎶�鏈湁闄愬叕鍙�</span>
+ <span>绫冲</span>
<img src="../static/images/barcode.png">
</div>
</div>
@@ -173,7 +220,7 @@
</div>
</div>
<!--鎶樼嚎鍥�-->
- <div id="line-charts"></div>
+ <!--<div id="line-charts"></div>-->
</div>
<div class="container-side-box right-middle">
<div class="image-border image-border1"></div>
@@ -191,7 +238,7 @@
</div>
</div>
<div class="top-main">
- <div id="pie-charts"></div>
+ <!--<div id="pie-charts"></div>-->
</div>
<div class="top-footer">
<div class="top-footer-elem">
@@ -255,7 +302,7 @@
</div>
</div>
- <div class="canves">
+ <div class="canves" style="display: none">
<div class="canves-header" >
<div class="button-left"></div>
<div class="button-right"></div>
@@ -277,7 +324,29 @@
</div>
</div>
</div>
-
+ <div class="monitor-operate">
+ <!--鏄剧ず鍣ㄩ�夋嫨-->
+ <div class="monitor-operate-item">
+ <div style="width: 100%" class="item-top">
+ <button id="selectAll">鍏ㄩ��</button>
+ <button id="unSelectAll">鍙栨秷鍏ㄩ��</button>
+ </div>
+ <div id="checked" style="overflow-y: scroll;height: 80%;border: 1px solid #888" >
+ <label for=""><input type="checkbox" name="monitor" checked="checked" value="100">1鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor" value="110">2鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor" value="113">3鍙锋樉绀哄櫒</label>
+ </div>
+ </div>
+ <!--鏂囨湰鍐呭-->
+ <div class="monitor-operate-item" style="height: 100%;min-width: 200px;display: flex;align-items: center;">
+ <textarea name="textarea" id="sendContent" cols="50" rows="3" style="font-size: 20px" placeholder="鏄剧ず鍐呭"></textarea>
+ </div>
+ <!--鎿嶄綔-->
+ <div class="monitor-operate-item" style="height: 100%;min-width: 260px;display: flex;justify-content: space-around">
+ <button id="sendMessage">鍙戦��</button>
+ <button id="removeMessage">閲嶇疆</button>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -309,11 +378,151 @@
full();
});
+ var crnId = 1;
+ var lcdId = 100;
+ var lcdData = 'TEST DATA'
+ var lcdControll = 1;
+ $('.lcd').click(function () {
+ var id = this.id.split("-")[1];
+ switch (id) {
+ case '100':
+ crnId = 1;
+ lcdId = 100;
+ break;
+ case '110':
+ crnId = 1;
+ lcdId = 110;
+ break;
+ case '113':
+ crnId = 2;
+ lcdId = 113;
+ break;
+ }
+ getOther2(crnId,lcdId)
+ })
+ // lcd鍒囨崲鎸夐挳
+ $(function() {
+ $(".label").click(function() {
+ $(this).addClass("abc").siblings().removeClass("abc");
+ });
+ });
+ // 鍏ㄩ�夋寜閽�
+ $("#selectAll").click(function(){
+ $('input:checkbox[name=monitor]').each(function () {
+ $(this).prop("checked",true);
+ })
+ });
+ // 鍙栨秷鍏ㄩ�夋寜閽�
+ $("#unSelectAll").click(function(){
+ $('input:checkbox[name=monitor]').each(function () {
+ $(this).prop("checked",false);
+ })
+ });
+ // 鍙戦�佽妭鐩寜閽�
+ $('#sendMessage').click(function () {
+ var sendMessage = $('#sendContent').val()
+ $('input:checkbox[name=monitor]:checked').each(function () {
+ var ledId = parseInt($(this).val())
+ console.log(typeof ledId,ledId,sendMessage)
+ $.ajax({
+ url: baseUrl+"/monitor/led/add/program",
+ data: {ledId:ledId,msg:sendMessage},
+ method: 'GET',
+ success: function (res) {
+ console.log(res)
+ }
+ })
+ })
+
+ })
+ // 绉婚櫎鑺傜洰鎸夐挳
+ $('#removeMessage').click(function () {
+ var sendMessage = ''
+ inputValue = ''
+ $('input:checkbox[name=monitor]:checked').each(function () {
+ var ledId = parseInt($(this).val())
+ console.log(ledId)
+ $.ajax({
+ url: baseUrl+"/monitor/led/add/program",
+ data: {ledId:ledId,msg:sendMessage},
+ method: 'GET',
+ success: function (res) {
+ console.log(res)
+ }
+ })
+ })
+
+ })
+ setInterval(function () {
+ setDate();
+ initlineChart();
+ initPieChart();
+ getOther2(crnId,lcdId)
+ getInfo(lcdId);
+ getError(lcdId);
+ getProgram(lcdId)
+ }, 1000);
+
+ // 鍑哄簱淇℃伅
+ function getInfo(ledId) {
+ $.ajax({
+ url: baseUrl+"/monitor/led",
+ data: {ledId:ledId},
+ method: 'GET',
+ success: function (res) {
+ if (lcdControll < 3) {
+ $('.aData').attr('display','none')
+ $('.bData').attr('display','flex')
+ }
+ }
+ });
+ }
+
+ // 寮傚父淇℃伅
+ function getError(ledId) {
+ $.ajax({
+ url: baseUrl+"/monitor/led/error",
+ data: {ledId:ledId},
+ method: 'GET',
+ success: function (res) {
+ if (lcdControll < 4) {
+ if (res.data == null) {
+ lcdControll = 0
+ } else {
+ lcdControll = 3
+ $('.bData').attr('display','none')
+ $('.aData').attr('display','flex')
+ $('#ledData').text(res.data)
+ }
+ }
+ }
+ });
+ }
+ // 鑺傜洰淇℃伅
+ function getProgram(ledId) {
+ $.ajax({
+ url: baseUrl+"/monitor/led/program",
+ data: {ledId:ledId},
+ method: 'GET',
+ success: function (res) {
+ if (res.data != '') {
+ lcdControll = 4
+ $('.bData').attr('display','none')
+ $('.aData').attr('display','flex')
+ $('#ledData').text(res.data)
+ } else {
+ lcdControll = 0
+ }
+ }
+ });
+ }
/***********************************************************************************/
/************************************ 鍫嗗灈鏈洪�熷害 *************************************/
/***********************************************************************************/
+
+
var crnChart = echarts.init(document.getElementById('crn-chart'));
crnChartOption = {
@@ -634,13 +843,13 @@
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLabel: {
textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
- fontSize: 6,
+ color:'#ffffff', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 20,
},
},
axisLine:{
lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ color:'#ffffff', // 鍧愭爣杞撮鑹�
}
}
},
@@ -648,19 +857,19 @@
type: 'value',
axisLabel: {
textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
- fontSize: 5
+ color:'#ffffff', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 20
},
},
axisLine:{
lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ color:'#ffffff', // 鍧愭爣杞撮鑹�
}
},
splitLine:{
show: true,
lineStyle:{
- color:'#517a9b', // 鍒嗗壊绾块鑹�
+ color:'#ffffff', // 鍒嗗壊绾块鑹�
}
}
--
Gitblit v1.9.1