From ba05cae7c0637b499a4632b0554358896bed1c6e Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 28 一月 2021 17:11:30 +0800
Subject: [PATCH] #
---
src/main/java/com/zy/common/web/RouterController.java | 11 +
src/main/webapp/views/monitor/monitor0.html | 539 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 549 insertions(+), 1 deletions(-)
diff --git a/src/main/java/com/zy/common/web/RouterController.java b/src/main/java/com/zy/common/web/RouterController.java
index 83c835b..2864277 100644
--- a/src/main/java/com/zy/common/web/RouterController.java
+++ b/src/main/java/com/zy/common/web/RouterController.java
@@ -48,11 +48,20 @@
@PathVariable("ledId") Integer ledId,
HttpServletResponse response) {
try{
-
response.sendRedirect(contextPath+"/views/monitor/monitor.html"+ "?" + "crnId=" + cnrId + "&" + "ledId=" + ledId);
} catch (Exception ex){
ex.printStackTrace();
}
}
+ @RequestMapping("/monitor0/{ledId}")
+ public void monitor(@PathVariable("ledId") Integer ledId,
+ HttpServletResponse response) {
+ try{
+ response.sendRedirect(contextPath+"/views/monitor/monitor0.html"+ "?" + "ledId=" + ledId);
+ } catch (Exception ex){
+ ex.printStackTrace();
+ }
+ }
+
}
diff --git a/src/main/webapp/views/monitor/monitor0.html b/src/main/webapp/views/monitor/monitor0.html
new file mode 100644
index 0000000..643eba5
--- /dev/null
+++ b/src/main/webapp/views/monitor/monitor0.html
@@ -0,0 +1,539 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <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: 75%;
+ position: absolute;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ top: -15%;
+ /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
+ }
+
+ .crn-speed span {
+ display:inline-block;
+ margin:20px auto;
+ font-size:56px;
+ font-family:'Pacifico',serif
+ }
+
+
+ .scroll-pane {
+ position: absolute;
+ width: 100%;
+ height: 85%;
+ }
+ .scroll-bar {
+ float: left;
+ width: 50%;
+ height: 100%;
+ text-align: center;
+ }
+
+ .scroll-header span {
+ font-size:64px;
+ font-family:'Pacifico',serif
+ }
+
+ .scroll-content {
+ animation:anis 10s linear infinite;
+ padding: 200px 10px 20px 10px;
+ font-family:'Pacifico',serif;
+ overflow:hidden;
+ }
+ .scroll-content:last-child {
+ border-left: 1px solid rgba(0, 0, 0, 0.3);
+ }
+ .scroll-content:hover {
+ animation-play-state:paused;
+ }
+ @keyframes anis {
+ 100% {
+ transform:translateY(-200px)
+ }
+ }
+
+ #led-content {
+ display: none;
+ }
+ #led-p-content {
+ text-align: center;
+ padding: 20px 40px;
+ font-size: 35px;
+ font-weight: bold;
+ /*color: #FF5722;*/
+ }
+
+ </style>
+</head>
+<body class="monitor-bg">
+
+ <!--澶撮儴-->
+ <div class="header" >
+ <div class="button-left"></div>
+ <div class="button-right"></div>
+ <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="title">
+ 鑷姩浠撳簱WCS鐩戞帶骞冲彴
+ </div>
+ </div>
+
+ <!--涓讳綋-->
+ <div class="container">
+
+ <!--宸�-->
+ <div class="container-element-side">
+ <div class="container-side-box">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+ <div class="introduce">
+ <h6>鑷姩鍖栫珛浣撲粨搴�</h6>
+ <p class="english">Automatic Storageand Retrieval System</p>
+ <p class="introduce-content"> 鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涜嚜鍔ㄥ寲绔嬩綋浠撳簱鏄綋鍓嶆妧鏈按骞宠緝楂樼殑褰㈠紡銆傝嚜鍔ㄥ寲绔嬩綋浠撳簱鐨勪富浣撶敱璐ф灦銆佸贩閬撳紡鍫嗗灈璧烽噸鏈恒�佸叆锛堝嚭锛夊簱宸ヤ綔鍙板拰鑷姩杩愯繘锛堝嚭锛夊強鎿嶄綔鎺у埗绯荤粺缁勬垚銆傝揣鏋舵槸閽㈢粨鏋勬垨閽㈢瓔娣峰嚌鍦熺粨鏋勭殑寤虹瓚鐗╂垨缁撴瀯浣擄紝璐ф灦鍐呮槸鏍囧噯灏哄鐨勮揣浣嶇┖闂达紝宸烽亾鍫嗗灈璧烽噸鏈虹┛琛屼簬璐ф灦涔嬮棿鐨勫贩閬撲腑锛屽畬鎴愬瓨銆佸彇璐х殑宸ヤ綔銆傜鐞嗕笂閲囩敤璁＄畻鏈哄強鏉″舰鐮佹妧鏈��</p>
+ </div>
+ <div class="charge-info">
+ <div class="info-header">
+ <h6>浠撳簱鏁版嵁</h6>
+ <p class="english">warehouse data</p>
+ </div>
+ <div class="charge-info-elem">
+ <img src="img/a.png">
+ <div class="info-detail">
+ <div class="real-data">
+ <i class="count" id="xDistance">0</i>
+ <span class="unit">m</span>
+ </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" id="yDistance">0</i>
+ <span class="unit">m</span>
+ </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" id="xDuration">0</i>
+ <span class="unit">s</span>
+ </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" id="yDuration">0</i>
+ <span class="unit">s</span>
+ </div>
+ <div class="content">绱鍗囬檷鏃堕暱(绉�)</div>
+ </div>
+ </div>
+ </div>
+ <div class="footer container-side-box">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+ <span>娴欐睙涓壃鐗╂祦瑁呭鏈夐檺鍏徃</span>
+ <img src="../../static/image/barcode.png">
+ </div>
+ </div>
+ </div>
+
+ <!--涓�-->
+ <div class="container-element-middle">
+ <div class="map-board" style="padding-top: 10%">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+
+ <!-- 涓笅 -->
+ <div class="scroll-pane">
+ <div class="layui-carousel" id="banner">
+ <div carousel-item>
+ <div class="item-img" id="img-1" style="background-color: red"></div>
+ <div class="item-img" id="img-2" style="background-color: gold"></div>
+ <div class="item-img" id="img-3" style="background-color: green"></div>
+ <div class="item-img" id="img-4" style="background-color: white"></div>
+ <div class="item-img" id="img-5" style="background-color: darkgoldenrod"></div>
+ </div>
+ </div>
+
+ <div id="led-content">
+ <pre id="led-p-content"></pre>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <!--鍙�-->
+ <div class="container-element-side">
+ <div class="container-side-box right-top">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+ <div class="line-chart-title">
+ <div class="order-report">
+ <span class="order-report-left" >鍏ュ嚭搴撶粺璁�</span>
+ <span class="order-report-right">31</span>
+ </div>
+ <div class="order-report-english english">
+ <span class="order-report-left">ORDER STATISTICS</span>
+ <span class="order-report-right">浠婃棩鍏呯數璁㈠崟鏁�</span>
+ </div>
+ </div>
+ <!--鎶樼嚎鍥�-->
+ <div id="line-charts"></div>
+ </div>
+ <div class="container-side-box right-middle">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+ <div class="top-header">
+ <div class="income-date">
+ <span class="income-date-left" >搴撳瓨绫诲瀷</span>
+ <span class="income-date-right">浠婂ぉ</span>
+ </div>
+ <div class="income-date-english english">
+ <span class="income-date-left">INCOME DATE</span>
+ <span class="income-date-right">Today</span>
+ </div>
+ </div>
+ <div class="top-main">
+ <div id="pie-charts"></div>
+ </div>
+ <div class="top-footer">
+ <div class="top-footer-elem">
+ <div class="elem-header" id="elem-header-first">
+ </div>
+ <div class="elem-main">
+ 鍦ㄥ簱
+ </div>
+ <div class="elem-footer">
+ <span id="stock-count">0</span>
+ </div>
+ </div>
+ <div class="top-footer-elem">
+ <div class="elem-header" id="elem-header-second">
+ </div>
+ <div class="elem-main">
+ 绌哄簱
+ </div>
+ <div class="elem-footer">
+ <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">
+ <span id="none-count">0</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container-side-box right-bottom">
+ <div class="image-border image-border1"></div>
+ <div class="image-border image-border2"></div>
+ <div class="image-border image-border3"></div>
+ <div class="image-border image-border4"></div>
+ <div class="progress-bar">
+ <div class="usage-rate">
+ <span class="usage-rate-left" >搴撲綅浣跨敤鐜�</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>
+ <span class="usage-rate-right">鍚屾瘮涓婃湀 + 5%</span>
+ </div>
+ </div>
+ <div class="progress-bar-modal">
+ <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>
+<!-- <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>
+
+ </div>
+</body>
+<script>
+ layui.use(['element', 'carousel'], function(){
+ var carousel = layui.carousel;
+ var element = layui.element;
+ // 杞挱鍥�
+ carousel.render({
+ elem: '#banner'
+ ,width: '100%' //璁剧疆瀹瑰櫒瀹藉害
+ ,arrow: 'hover' // 鍒囨崲绠ご榛樿鏄剧ず鐘舵�侊紝鍙�夊�间负 hover锛堟偓鍋滄樉绀猴級 always锛堝缁堟樉绀猴級 none锛堝缁堜笉鏄剧ず锛�
+ ,interval: '3000' // 鑷姩鍒囨崲鐨勬椂闂撮棿闅旓紝鍗曚綅锛歮s锛堟绉掞級锛屼笉鑳戒綆浜�800
+ ,anim: 'fade'
+ });
+ });
+
+ /***********************************************************************************/
+ /************************************* 澶撮儴鎸夐挳 *************************************/
+ /***********************************************************************************/
+ // 宸�
+ $('.button-left').click(function () {
+ exitFull();
+ });
+ // 鍙�
+ $('.button-right').click(function () {
+ full();
+ });
+
+ /***********************************************************************************/
+ /************************************* 鎶樼嚎鍥� ***************************************/
+ /***********************************************************************************/
+
+ var lineCharts = echarts.init(document.getElementById('line-charts'));
+ var lineChartOption = {
+ // animation: false,
+ grid: {
+ top: '0%',
+ left: '0%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true,
+ // backgroundColor: 'rgb(116,148,174,0.3)',
+ show: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['1', '2', '3', '4', '5', '6', '7'],
+ axisLabel: {
+ textStyle:{
+ color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 6,
+ },
+ },
+ axisLine:{
+ lineStyle:{
+ color:'#3590ac', // 鍧愭爣杞撮鑹�
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ textStyle:{
+ color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 5
+ },
+ },
+ axisLine:{
+ lineStyle:{
+ color:'#3590ac', // 鍧愭爣杞撮鑹�
+ }
+ },
+ splitLine:{
+ show: true,
+ lineStyle:{
+ color:'#517a9b', // 鍒嗗壊绾块鑹�
+ }
+ }
+
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ // areaStyle: {
+ // color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
+ // },
+ itemStyle:{
+ normal:{
+ color:'#3590ac', //鎶樼偣棰滆壊
+ lineStyle:{
+ color:'#3590ac' //鎶樼嚎棰滆壊
+ }
+ }
+ }
+ },
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ // areaStyle: {
+ // color: '#d55b35' // 鎶樼嚎鍖哄煙棰滆壊
+ // },
+ itemStyle:{
+ normal:{
+ color:'#ef550e', //鎶樼偣棰滆壊
+ lineStyle:{
+ color:'#ec670f' //鎶樼嚎棰滆壊
+ }
+ }
+ }
+ }
+ ]
+ };
+
+ function initlineChart() {
+ var reportView = lineChartOption;
+ $.ajax({
+ url: baseUrl+"/monitor/line/charts",
+ method: 'GET',
+ success: function (res) {
+ if (res.code === 200){
+ var json = res.data.rows;
+ reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
+ getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
+ reportView.series[0].data=res.data.rows[0].data;
+ reportView.series[1].data=res.data.rows[1].data;
+ lineCharts.setOption(reportView)
+ } else if (res.code === 403){
+ top.location.href = "/";
+ } else {
+ console.log(res.msg);
+ }
+ }
+ });
+ }
+
+ /***********************************************************************************/
+ /************************************* 楗煎浘 *****************************************/
+ /***********************************************************************************/
+
+ var pieCharts = echarts.init(document.getElementById('pie-charts'));
+ var pieChartOption = {
+ // animation: false,
+ grid: {
+ top: '0%',
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ containLabel: false,
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 10,
+ data: ['鍦ㄥ簱', '绌�']
+ },
+ series: [
+ {
+ name: '璁块棶鏉ユ簮',
+ type: 'pie',
+ radius: ['25%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: '50',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 1, name: '鍦ㄥ簱'},
+ {value: 1, name: '绌�'},
+ {value: 1, name: '浣跨敤'},
+ {value: 1, name: '绂佺敤'},
+ ],
+ itemStyle: {
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ normal:{
+ color:function(params) {
+ //鑷畾涔夐鑹�
+ let colorList = [
+ '#28b9a2', '#69d7fc', '#fcbf5d',
+ ];
+ return colorList[params.dataIndex]
+ }
+ }
+ }
+ }
+ ]
+ };
+ // 楗煎浘鍔犺浇
+ 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);
+ }
+ }
+ });
+ }
+
+ // eCharts 璺熼殢绐楀彛鏀瑰彉
+ window.onresize = function(){
+ lineCharts.resize();
+ pieCharts.resize();
+ }
+
+
+</script>
+</html>
--
Gitblit v1.9.1