From 5659a9ea7319179237f50fd3ba569b223311a43f Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期四, 23 三月 2023 17:00:42 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor.css | 665 ++++++++++++++++++++++++++
src/main/webapp/views/monitor.html | 826 +++++++++++++++++++++++++++++++++
2 files changed, 1,491 insertions(+), 0 deletions(-)
diff --git a/src/main/webapp/views/monitor.css b/src/main/webapp/views/monitor.css
new file mode 100644
index 0000000..6748561
--- /dev/null
+++ b/src/main/webapp/views/monitor.css
@@ -0,0 +1,665 @@
+body {
+ background-color: #6CA7A8;
+ color: #FFF;
+}
+.head {
+ width: 100%;
+ height: 5%;
+ display: flex;
+}
+label {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 150px;
+
+ font-size: 20px;
+ color: #FFF;
+
+}
+label:active {
+ border-top: 3px solid rgb(239, 177, 102);
+ border-right: 1px solid #FFF;
+ border-left: 1px solid #FFF;
+}
+/*label:checked {*/
+/* border-top: 3px solid rgb(239, 177, 102);*/
+/* border-right: 1px solid #FFF;*/
+/* border-left: 1px solid #FFF;*/
+/*}*/
+.body {
+ height: 75%;
+ width: 100%;
+ border-top: 1px solid #FFF;
+ background-color: #5D7677;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.canves {
+ width: 90%;
+ height: 648px;
+ /*width: 1152px;*/
+ /*height: 648px;*/
+ background-image: url("monitor/img/background.png");
+ background-repeat: no-repeat;
+ background-size:100% 100%;
+}
+.canves-header {
+ position: relative;
+ height: 10%;
+ width: 100%;
+}
+.button-left {
+ position: absolute;
+ margin-left: 21.4%;
+ margin-top: 0.8%;
+ width: 13.3%;
+ height: 90%;
+ background-image: url('monitor/img/right.png');
+ background-size: 100% 100%;
+ -moz-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ transform: scaleX(-1);
+ /*filter: FlipH;*/
+ /*background-color: white;*/
+}
+.button-right {
+ position: absolute;
+ margin-left: 65.1%;
+ margin-top: 0.8%;
+ width: 13.3%;
+ height: 90%;
+ background-image: url('monitor/img/right.png');
+ background-size: 100% 100%;
+}
+.canves-title {
+ text-align: center;
+ font-size: 28px;
+ line-height: 60px;
+}
+.time-tools {
+ position: absolute;
+ top: 85px;
+ left: 1560px;
+ width: auto;
+ height: 10%;
+ text-align: center;
+}
+
+/*涓讳綋*/
+.container{
+ height: 90%;
+ /*background-color: #074b0f;*/
+}
+.container-element-side {
+ float: left;
+ width: 24%;
+ height: 100%;
+ padding: 1%;
+ box-sizing: border-box;
+}
+.container-side-box {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ border: 1px solid rgba(20, 80, 136, 1);
+ padding: 15px;
+ box-sizing: border-box;
+}
+
+/* 宸� */
+/*宸︿笂*/
+.english {
+ font-size: xx-small;
+ color: #999;
+}
+.introduce {
+ height: 30%;
+}
+.introduce-content {
+ text-indent: 2em;
+ margin-top: 13px;
+ height: 150px;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 10px;
+ opacity: 0.7;
+}
+/*宸︿腑*/
+.charge-info {
+ height: 60%;
+}
+.info-header {
+ height: 15%;
+}
+.info-header h6 {
+ letter-spacing: 3px;
+}
+.charge-info-elem {
+ height: 20%;
+}
+.charge-info-elem img {
+ display: inline-block;
+ height: 100%;
+ width: 30%;
+ vertical-align: middle;
+ padding: 10px 25px 10px 5px;
+}
+.info-detail {
+ display: inline-block;
+ height: 100%;
+ width: 65%;
+ vertical-align: middle
+}
+.real-data {
+ width: 100%;
+ height: 60%;
+ position: relative;
+}
+.real-data .count {
+ position: absolute;
+ left: 0%;
+ bottom: 0;
+ font-size: x-large;
+}
+.real-data .unit {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ font-size: x-small;
+ opacity: 0.7;
+}
+.content {
+ width: 100%;
+ height: 40%;
+ font-size: x-small;
+ opacity: 0.7;
+}
+/*宸︿笅*/
+.footer {
+ position: relative;
+ background-color: #063a7b;
+ height: 10%;
+ text-align: center;
+}
+.footer span {
+ position: absolute;
+ left: 18%;
+ top: 50%;
+ transform:translateY(-50%);
+ -webkit-transform:translateY(-50%); /*鍏煎-webkit-寮曟搸娴忚鍣�*/
+ -moz-transform:translateY(-50%); /*鍏煎-moz-寮曟搸娴忚鍣�*/
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space:nowrap;
+}
+.footer img {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ width: auto;
+}
+/* 涓� */
+.container-element-middle {
+ float: left;
+ width: 52%;
+ height: 100%;
+ padding: 1.2% 1% 1.5% 1%;
+ box-sizing: border-box;
+}
+.map-board{
+ height: 100%;
+ width: 100%;
+ border: 1px solid rgba(20, 80, 136, 1);
+ position: relative;
+ background-color: rgba(3, 36, 85, 0.4); /*閽堝鍏朵粬娴忚鍣�*/
+ filter: Alpha(Opacity=50); /* 閽堝IE*/
+}
+
+
+/*鍙�*/
+/*鍙充笂*/
+.container-side-box.right-top {
+ height: 30%;
+ margin-bottom: 5%;
+}
+.line-chart-title {
+ height: 30%;
+}
+.order-report {
+ position: relative;
+ height: 50%;
+}
+.order-report .order-report-left {
+ letter-spacing: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+.order-report .order-report-right {
+ letter-spacing: 2px;
+ font-size: x-large;
+ position: absolute;
+ transform-origin: 0 100%;
+ right: 0;
+ bottom: 0;
+}
+.order-report-english {
+ position: relative;
+ height: 50%;
+}
+.order-report-english .order-report-left {
+ letter-spacing: 2px;
+ color: #999;
+ font-size: xx-small;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.order-report-english .order-report-right {
+ font-size: xx-small;
+ color: #999;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 100% 0;
+ -webkit-transform-origin: 100% 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+#line-charts {
+ height: 70%;
+}
+/*鍙充腑*/
+.container-side-box.right-middle {
+ height: 50%;
+ margin-bottom: 5%;
+}
+.top-header {
+ height: 20%;
+}
+.income-date {
+ position: relative;
+ height: 50%;
+}
+.income-date .income-date-left {
+ letter-spacing: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+.income-date .income-date-right {
+ letter-spacing: 2px;
+ font-size: large;
+ position: absolute;
+ transform-origin: 0 100%;
+ right: 0;
+ bottom: 0;
+}
+.income-date-english {
+ position: relative;
+ height: 50%;
+}
+.income-date-english .income-date-left {
+ letter-spacing: 2px;
+ color: #999;
+ font-size: xx-small;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.income-date-english .income-date-right {
+ font-size: xx-small;
+ color: #999;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 100% 0;
+ -webkit-transform-origin: 100% 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.top-main {
+ height: 40%;
+}
+#pie-charts {
+ height: 100%;
+}
+
+.top-footer {
+ height: 40%;
+}
+.top-footer-elem {
+ float: left;
+ width: 33.33%;
+ height: 100%;
+}
+.elem-header {
+ height: 60%;
+ background-repeat: no-repeat;
+ background-position: 45% 50%;
+ background-size: 50% auto;
+}
+#elem-header-first {
+ background-image: url("../img/g1.png");
+}
+#elem-header-second {
+ background-image: url("../img/f1.png");
+}
+#elem-header-third {
+ background-image: url("../img/e1.png");
+}
+.elem-main {
+ height: 20%;
+ text-align: center;
+ font-size: small;
+ opacity: 0.7;
+ padding: 4px 0;
+}
+.elem-footer {
+ height: 20%;
+ text-align: center;
+ letter-spacing: 2px;
+}
+/*鍙充笅*/
+.container-side-box.right-bottom {
+ height: 15%;
+}
+.progress-bar {
+ height: 60%;
+}
+.usage-rate {
+ position: relative;
+ height: 50%;
+}
+.usage-rate .usage-rate-left {
+ letter-spacing: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+.usage-rate .usage-rate-right {
+ letter-spacing: 2px;
+ font-size: large;
+ position: absolute;
+ transform-origin: 0 100%;
+ right: 0;
+ bottom: 0;
+}
+.usage-rate .usage-rate-right span {
+ letter-spacing: 2px;
+ font-size: large;
+}
+.usage-rate-english {
+ position: relative;
+ height: 50%;
+}
+.usage-rate-english .usage-rate-left {
+ letter-spacing: 2px;
+ color: #999;
+ font-size: xx-small;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.usage-rate-english .usage-rate-right {
+ font-size: xx-small;
+ color: #999;
+ transform: scale(0.50);
+ -webkit-transform: scale(0.50);
+ transform-origin: 100% 0;
+ -webkit-transform-origin: 100% 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.progress-bar-modal {
+ height: 30%;
+ padding-top: 1%;
+}
+.bar-container {
+ width: 70%;
+ height: 100%;
+ background-color: #233751;
+ vertical-align: middle;
+ display: inline-block;
+}
+.bar-proportion {
+ width: 60%;
+ height: 100%;
+ background-color: #e77b2c;
+ position: relative;
+}
+.bar-proportion span {
+ font-size: xx-small;
+ position: absolute;
+ right: 5%;
+ top: 45%;
+ transform:translateY(-50%);
+ -webkit-transform:translateY(-50%); /*鍏煎-webkit-寮曟搸娴忚鍣�*/
+ -moz-transform:translateY(-50%); /*鍏煎-moz-寮曟搸娴忚鍣�*/
+ opacity: 0.8;
+}
+.bar-container-count, .bar-container-count span {
+ float: right;
+ color: #e77b2c;
+ vertical-align: middle;
+ font-size: 18px;
+}
+
+/*杈规*/
+.image-border {
+ position: absolute;
+ width: 5px;
+ height: 5px;
+}
+.image-border1 {
+ top: 0;
+ left: 0;
+ border-left: 2px solid #31c4c4;
+ border-top: 2px solid #31c4c4;
+ /*transform: scale(0.5)*/
+}
+.image-border2 {
+ top: 0;
+ right: 0;
+ border-right: 2px solid #31c4c4;
+ border-top: 2px solid #31c4c4;
+}
+.image-border3 {
+ bottom: 0;
+ left: 0;
+ border-bottom: 2px solid #31c4c4;
+ border-left: 2px solid #31c4c4;
+}
+.image-border4 {
+ bottom: 0;
+ right: 0;
+ border-right: 2px solid #31c4c4;
+ border-bottom: 2px solid #31c4c4;
+}
+
+/*鍦板浘*/
+.anchorBL img{
+ display: none;
+}
+.BMap_cpyCtrl.BMap_noprint.anchorBL {
+ display: none;
+}
+.ec-extension-bmap{
+ border-radius:15px;
+}
+
+/*閬僵*/
+#detail-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ z-index: 1;
+ display: none;
+}
+#closeBtn {
+ font-size: large;
+ float: right;
+ background-color: black;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ outline: none;
+ cursor: pointer;
+}
+#closeBtn:hover {
+ background-color: white;
+ color: black;
+}
+#detail-modal ul {
+ position: absolute;
+ top: 20%;
+ left: 50%;
+ transform: translate(-50%, 0);
+ list-style-type: none;
+}
+#detail-modal li {
+ font-size: large;
+ padding: 20px;
+}
+.animationTop {
+ -webkit-animation: animationTop 0.4s;
+ animation: animationTop 0.4s;
+}
+@-webkit-keyframes animationTop {
+ from {
+ top: -500px;
+ opacity: 0;
+ }
+ to {
+ top: 0;
+ opacity: 1;
+ }
+}
+@keyframes animationTop {
+ from {
+ top: -500px;
+ opacity: 0;
+ }
+ to {
+ top: 0;
+ opacity: 1;
+ }
+}
+
+.item-img {
+ background-size: 100% 100%;
+}
+#img-1 {
+ background-image: url(monitor/img/banner/banner1.jpg);
+}
+#img-2 {
+ background-image: url(monitor/img/banner/banner2.jpg);
+}
+#img-3 {
+ background-image: url(monitor/img/banner/banner3.jpg);
+}
+#img-4 {
+ background-image: url(monitor/img/banner/banner4.jpg);
+}
+#img-5 {
+ background-image: url(monitor/img/banner/banner5.jpg);
+}
+
+.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
+}
+.speed-content {
+ height: 100%;
+}
+.speed-chart {
+ float: left;
+ width: 100%;
+ height: 100%;
+}
+
+
+.scroll-pane {
+ position: absolute;
+ top: 42%;
+ width: 100%;
+ height: 58%;
+}
+.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;*/
+}
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor.html b/src/main/webapp/views/monitor.html
new file mode 100644
index 0000000..4072bec
--- /dev/null
+++ b/src/main/webapp/views/monitor.html
@@ -0,0 +1,826 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>WCS杈撻�佽澶囩鐞�</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">
+ <link rel="stylesheet" type="text/css" href="../static/css/common.css">
+ <link rel="stylesheet" type="text/css" href="./monitor.css">
+ <link href="../static/layui/css/layui.css" rel="stylesheet">
+ <link href="monitor/css/lunbo.css" rel="stylesheet">
+ <script src="monitor/js/jquery-3.3.1.min.js"></script>
+ <script src="monitor/js/echarts/echarts.min.js"></script>
+ <script src="../static/layui/layui.js"></script>
+ <script src="../static/js/common.js"></script>
+ <script src="monitor/js/monitor.js"></script>
+</head>
+<body>
+ <div style="padding: 10px;height: 100%;float: left;width: 6%">
+ <div class="button-window">111</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 class="head">
+ <label for="">TV1</label>
+ <label for="">TV2</label>
+ <label for="">TV3</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>
+ <div class="canves" style="display: none">
+ <!--澶撮儴-->
+ <div class="canves-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="canves-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="monitor/img/a1.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="monitor/img/b1.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="monitor/img/c1.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="monitor/img/d1.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/images/barcode.png">
+ </div>
+ </div>
+ </div>
+
+ <!--涓�-->
+ <div class="container-element-middle">
+ <div class="map-board">
+ <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="crn-speed">
+ <div class="speed-content">
+ <div id="crn-chart" class="speed-chart">
+ </div>
+ </div>
+ </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>
+ </div>
+ <div class="canves">
+ <div class="canves-header" >
+ <div class="button-left"></div>
+ <div class="button-right"></div>
+
+ <div class="canves-title">
+ 鑷姩浠撳簱WCS鐩戞帶骞冲彴
+ </div>
+ </div>
+ <div style="height: 90%;">
+ <div class="container-side-box" style="width: 95%;height: 95%;margin: 20px auto">
+ <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 style="display: flex;align-items: center;justify-content: center;height: 100%;font-size: 40px">
+ Automatic Storageand Retrieval System
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</body>
+</html>
+<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 crnChart = echarts.init(document.getElementById('crn-chart'));
+ crnChartOption = {
+ // backgroundColor: '#1b1b1b',
+ tooltip: {
+ formatter: '{a} <br/>{c} {b}'
+ },
+ // toolbox: { // 淇濆瓨鍥剧墖
+ // show: true,
+ // feature: {
+ // mark: {show: true},
+ // restore: {show: true},
+ // saveAsImage: {show: true}
+ // }
+ // },
+ series: [
+ {
+ name: '璧拌閫熷害',
+ type: 'gauge',
+ min: 0,
+ max: 160,
+ splitNumber: 16,
+ radius: '50%',
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']],
+ width: 3,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存暟瀛�
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 25, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: { // 鍒嗛殧绾�
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: { // 閫熷害鍗曚綅
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontSize: 20,
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ detail: { // 閫熷害鍊�
+ backgroundColor: 'rgba(30,144,255,0.8)',
+ borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ offsetCenter: [0, '50%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
+ },
+ data: [{value: 40, name: 'x\nm/min'}]
+ },
+ {
+ name: '鍗囬檷閫熷害',
+ type: 'gauge',
+ center: ['25%', '55%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 40,
+ endAngle: 40,
+ splitNumber: 5,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 20, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width: 5,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ offsetCenter: [0, '-30%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ detail: {
+ //backgroundColor: 'rgba(30,144,255,0.8)',
+ // borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ width: 80,
+ height: 30,
+ offsetCenter: [35, '20%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
+ },
+ data: [{value: 1.5, name: 'y'}]
+ },
+ {
+ name: '璐у弶閫熷害',
+ type: 'gauge',
+ center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 50,
+ startAngle: 135,
+ endAngle: 50,
+ splitNumber: 2,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ // axisLabel: {
+ // fontWeight: 'bolder',
+ // color: '#fff',
+ // shadowColor: '#fff', //榛樿閫忔槑
+ // shadowBlur: 10,
+ // formatter: function (v){
+ // switch (v + '') {
+ // case '0': return 'E';
+ // case '1': return 'Gas';
+ // case '2': return 'F';
+ // }
+ // }
+ // },
+ splitLine: { // 鍒嗛殧绾�
+ length:15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width:3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width:2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ offsetCenter: [0, '-30%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ fontStyle: 'italic',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ detail: {
+ //backgroundColor: 'rgba(30,144,255,0.8)',
+ // borderWidth: 1,
+ borderColor: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5,
+ width: 80,
+ height: 30,
+ offsetCenter: [40, '5%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder',
+ color: '#fff'
+ }
+ },
+ data: [{value: 0.5, name: 'z'}]
+ },
+ {
+ name: '璐у弶浣嶇疆',
+ type: 'gauge',
+ center: ['75%', '50%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 2,
+ startAngle: 315,
+ endAngle: 225,
+ splitNumber: 2,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ show: false
+ },
+ axisLabel: {
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10,
+ formatter: function(v){
+ switch (v + '') {
+ case '0': return '鍙�';
+ case '1': return '涓�';
+ case '2': return '宸�';
+ }
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 15, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ width: 3,
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
+ },
+ pointer: {
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 5
+ },
+ title: {
+ show: false
+ },
+ detail: {
+ show: false
+ },
+ data:[{value: 0.5, name: 'gas'}]
+ }
+ ]
+ };
+
+
+ /***********************************************************************************/
+ /************************************* 鎶樼嚎鍥� ***************************************/
+ /***********************************************************************************/
+
+ 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(){
+ crnChart.resize();
+ lineCharts.resize();
+ pieCharts.resize();
+ }
+
+</script>
\ No newline at end of file
--
Gitblit v1.9.1