From ddd3d3214edd630c19c11b27d02e350dd3cc68ad Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 17 十一月 2020 16:48:53 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 255 ++++++++++++++++++++++++++++++++++-----------------
1 files changed, 170 insertions(+), 85 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index a0f53d5..d692433 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -5,36 +5,42 @@
<title>ASRS鐩戞帶</title>
<link href="css/monitor.css" rel="stylesheet">
<link href="css/Pacifico.css" rel="stylesheet">
+ <link href="../../static/layui/css/layui.css" rel="stylesheet">
+ <link href="css/lunbo.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/vincent.js"></script>
<script src="js/echarts/echarts.min.js"></script>
<script src="js/jquery.countup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
+ <script src="../../static/layui/layui.js"></script>
+ <script src="../../static/js/common.js"></script>
+ <script src="js/monitor.js"></script>
<style>
.crn-speed {
width: 100%;
- height: 20%;
+ height: 35%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
}
.crn-speed span {
display:inline-block;
margin:20px auto;
- font-size:64px;
+ font-size:56px;
font-family:'Pacifico',serif
}
.speed-content {
display: inline-block;
}
+
.scroll-pane {
width: 100%;
- height: 80%;
+ height: 65%;
}
-
.scroll-bar {
float: left;
width: 50%;
@@ -87,7 +93,7 @@
<div class="button-left"></div>
<div class="button-right"></div>
<div class="time-tools">
- 2019-04-27 10:30:01 鏄熸湡涓�
+ <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="title">
鑷姩浠撳簱WCS鐩戞帶骞冲彴
@@ -118,40 +124,40 @@
<img src="img/a.png">
<div class="info-detail">
<div class="real-data">
- <i class="count">7777</i>
- <span class="unit">涓�</span>
+ <i class="count" id="xDistance">0</i>
+ <span class="unit">km</span>
</div>
- <div class="content">搴撲綅鎬绘暟(涓�)</div>
+ <div class="content">绱璧拌璺濈(鍗冪背)</div>
</div>
</div>
<div class="charge-info-elem">
<img src="img/b.png">
<div class="info-detail">
<div class="real-data">
- <i class="count">777</i>
- <span class="unit">涓�</span>
+ <i class="count" id="yDistance">0</i>
+ <span class="unit">km</span>
</div>
- <div class="content">浣跨敤涓簱浣�(涓�)</div>
+ <div class="content">绱鍗囬檷璺濈(鍗冪背)</div>
</div>
</div>
<div class="charge-info-elem">
<img src="img/c.png">
<div class="info-detail">
<div class="real-data">
- <i class="count">33</i>
- <span class="unit">鎵�</span>
+ <i class="count" id="xDuration">0</i>
+ <span class="unit">h</span>
</div>
- <div class="content">浠婃棩鍏ュ簱(鎵�)</div>
+ <div class="content">绱璧拌鏃堕暱(灏忔椂)</div>
</div>
</div>
<div class="charge-info-elem">
<img src="img/d.png">
<div class="info-detail">
<div class="real-data">
- <i class="count">14296</i>
- <span class="unit">鍗冪摝鏃�</span>
+ <i class="count" id="yDuration">0</i>
+ <span class="unit">h</span>
</div>
- <div class="content">浠婃棩鐢垫�婚噺(鍗冪摝鏃�)</div>
+ <div class="content">绱鍗囬檷鏃堕暱(灏忔椂)</div>
</div>
</div>
</div>
@@ -160,7 +166,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="img/wxCode.jpg">
</div>
</div>
@@ -177,55 +183,71 @@
<!-- 涓笂 -->
<div class="crn-speed">
<div class="speed-content">
- <span>鍫嗗灈鏈洪�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ <div>
+ <span>鍫嗗灈鏈鸿蛋琛岄�熷害锛�</span><span id="xSpeed" class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
+ <div>
+ <span>鍫嗗灈鏈哄崌闄嶉�熷害锛�</span><span id="ySpeed" class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
</div>
</div>
<div class="scroll-pane">
- <!-- 涓乏 -->
- <div class="scroll-bar left-bar">
- <div class="scroll-header">
- <span>鍏ュ簱</span>
- <p class="english">Entering Warehouse</p>
- </div>
- <div class="scroll-content">
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
+
+ <div class="layui-carousel" id="test1">
+ <div carousel-item>
+ <div style="background-color: red"></div>
+ <div style="background-color: gold"></div>
+ <div style="background-color: #333333"></div>
+ <div style="background-color: #00FF00"></div>
+ <div style="background-color: #5FB878"></div>
</div>
</div>
- <!-- 涓彸 -->
- <div class="scroll-bar right-bar">
- <div class="scroll-header">
- <span>鍑哄簱</span>
- <p class="english">Delivery Of cargo From Storage</p>
- </div>
- <div class="scroll-content">
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- <p>111111111111111111111</p>
- </div>
- </div>
- </div>
+<!-- <!– 涓乏 –>-->
+<!-- <div class="scroll-bar left-bar">-->
+<!-- <div class="scroll-header">-->
+<!-- <span>鍏ュ簱</span>-->
+<!-- <p class="english">Entering Warehouse</p>-->
+<!-- </div>-->
+<!-- <div class="scroll-content">-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <!– 涓彸 –>-->
+<!-- <div class="scroll-bar right-bar">-->
+<!-- <div class="scroll-header">-->
+<!-- <span>鍑哄簱</span>-->
+<!-- <p class="english">Delivery Of Cargo From Storage</p>-->
+<!-- </div>-->
+<!-- <div class="scroll-content">-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- <p>111111111111111111111</p>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+
+ </div>
</div>
-
</div>
<!--鍙�-->
@@ -274,7 +296,7 @@
鍦ㄥ簱
</div>
<div class="elem-footer">
- 3,300
+ <span id="stock-count">0</span>
</div>
</div>
<div class="top-footer-elem">
@@ -284,17 +306,17 @@
绌哄簱
</div>
<div class="elem-footer">
- 161
+ <span id="empty-count">0</span>
</div>
</div>
<div class="top-footer-elem">
<div class="elem-header" id="elem-header-third">
</div>
<div class="elem-main">
- 浣跨敤涓�
+ 绂佺敤
</div>
<div class="elem-footer">
- 666
+ <span id="none-count">0</span>
</div>
</div>
</div>
@@ -307,7 +329,7 @@
<div class="progress-bar">
<div class="usage-rate">
<span class="usage-rate-left" >搴撲綅浣跨敤鐜�</span>
- <span class="usage-rate-right">60%</span>
+ <span class="usage-rate-right"><span id="usedPr">0</span>%</span>
</div>
<div class="usage-rate-english english">
<span class="usage-rate-left">EQUIPMENT USAGE THIS MONTH</span>
@@ -315,10 +337,13 @@
</div>
</div>
<div class="progress-bar-modal">
- <div class="bar-container">
- <div class="bar-proportion"><span>瀹為檯浣跨敤</span></div>
+ <div class="layui-progress layui-progress-big" lay-filter="used-progress" style="background-color: #233751;width: 80%;display: inline-block">
+ <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
- <i class="bar-container-count">7777<span>涓�</span></i>
+<!-- <div class="bar-container">-->
+<!-- <div class="bar-proportion"><span>瀹為檯浣跨敤</span></div>-->
+<!-- </div>-->
+ <i class="bar-container-count"><span id="used">0</span></i>
</div>
</div>
</div>
@@ -326,18 +351,24 @@
</div>
</body>
<script>
- $('.counter').countUp();
- // 閬僵
- let closeBtn = document.getElementById('closeBtn');
- let detailModal = document.getElementById('detail-modal');
- closeBtn.onclick = function () {
- detailModal.style.display = 'none';
- };
- var data = [];
+ layui.use(['element', 'carousel'], function(){
+ var carousel = layui.carousel;
+ var element = layui.element;
+ //寤洪�犲疄渚�
+ carousel.render({
+ elem: '#test1'
+ ,width: '100%' //璁剧疆瀹瑰櫒瀹藉害
+ ,arrow: 'always' //濮嬬粓鏄剧ず绠ご
+ //,anim: 'updown' //鍒囨崲鍔ㄧ敾鏂瑰紡
+ });
+ });
-// 鎶樼嚎鍥�
- let lineCharts = echarts.init(document.getElementById('line-charts'));
- lineChartOption = {
+ /***********************************************************************************/
+ /************************************* 鎶樼嚎鍥� ***************************************/
+ /***********************************************************************************/
+
+ var lineCharts = echarts.init(document.getElementById('line-charts'));
+ var lineChartOption = {
// animation: false,
grid: {
top: '0%',
@@ -402,11 +433,39 @@
}]
};
- lineCharts.setOption(lineChartOption);
+ // 璁块棶閲忔姤琛ㄥ姞杞�
+ function initlinChart() {
+ var reportView = lineChartOption;
+ var xAxisDate = [];
+ var seriesDate=[];
+ $.ajax({
+ url: baseUrl+"/monitor/pakin/rep",
+ method: 'GET',
+ success: function (res) {
+ if (res.code === 200){
+ var json = res.data;
+ for (var i = 0; i < json.length; i++) {
+ xAxisDate[i]=json[i].node;
+ seriesDate[i]=json[i].val;
+ }
+ reportView.xAxis.data=xAxisDate;
+ reportView.series[0].data=seriesDate;
+ lineCharts.setOption(reportView)
+ } else if (res.code === 403){
+ top.location.href = "/";
+ } else {
+ layer.msg(res.msg);
+ }
+ }
+ });
+ }
-// 楗煎浘
- let pieCharts = echarts.init(document.getElementById('pie-charts'));
- pieChartOption = {
+ /***********************************************************************************/
+ /************************************* 楗煎浘 *****************************************/
+ /***********************************************************************************/
+
+ var pieCharts = echarts.init(document.getElementById('pie-charts'));
+ var pieChartOption = {
// animation: false,
grid: {
top: '0%',
@@ -422,7 +481,7 @@
legend: {
orient: 'vertical',
left: 10,
- data: ['1', '2', '3']
+ data: ['鍦ㄥ簱', '绌�']
},
series: [
{
@@ -445,9 +504,10 @@
show: false
},
data: [
- {value: 335, name: '1'},
- {value: 310, name: '2'},
- {value: 234, name: '3'},
+ {value: 1, name: '鍦ㄥ簱'},
+ {value: 1, name: '绌�'},
+ {value: 1, name: '浣跨敤'},
+ {value: 1, name: '绂佺敤'},
],
itemStyle: {
emphasis: {
@@ -468,7 +528,32 @@
}
]
};
- pieCharts.setOption(pieChartOption);
+ // 楗煎浘鍔犺浇
+ function initPieChart() {
+ $.ajax({
+ url: baseUrl+"/monitor/loc/rep",
+ method: 'GET',
+ success: function (res) {
+ if (res.code === 200){
+ pieChartOption.series[0].data = res.data.pie;
+ pieCharts.setOption(pieChartOption);
+
+ $('#stock-count').text(res.data.stockCunt);
+ $('#empty-count').text(res.data.emptyCount);
+ $('#none-count').text(res.data.noneCount);
+
+ $('#usedPr').text(res.data.usedPr);
+ $('#used').text(res.data.used);
+
+ layui.element.progress('used-progress', res.data.usedPr + '%');
+ } else if (res.code === 403){
+ top.location.href = "/";
+ } else {
+ layer.msg(res.msg);
+ }
+ }
+ });
+ }
</script>
</html>
--
Gitblit v1.9.1