From 6876084ffc4a01c1eca6a609dec8c176efc59aae Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期四, 22 一月 2026 15:16:45 +0800
Subject: [PATCH] 1
---
zy-acs-cv/src/main/webapp/views/monitor/monitor.html | 665 ++++++++++++++++++++++++++++---------------------------
1 files changed, 339 insertions(+), 326 deletions(-)
diff --git a/zy-acs-cv/src/main/webapp/views/monitor/monitor.html b/zy-acs-cv/src/main/webapp/views/monitor/monitor.html
index a2d8d81..461d6b4 100644
--- a/zy-acs-cv/src/main/webapp/views/monitor/monitor.html
+++ b/zy-acs-cv/src/main/webapp/views/monitor/monitor.html
@@ -29,14 +29,16 @@
}
.crn-speed span {
- display:inline-block;
- margin:20px auto;
- font-size:56px;
- font-family:'Pacifico',serif
+ display: inline-block;
+ margin: 20px auto;
+ font-size: 56px;
+ font-family: 'Pacifico', serif
}
+
.speed-content {
height: 100%;
}
+
.speed-chart {
float: left;
width: 100%;
@@ -50,6 +52,7 @@
width: 100%;
height: 58%;
}
+
.scroll-bar {
float: left;
width: 50%;
@@ -58,31 +61,35 @@
}
.scroll-header span {
- font-size:64px;
- font-family:'Pacifico',serif
+ font-size: 64px;
+ font-family: 'Pacifico', serif
}
.scroll-content {
- animation:anis 10s linear infinite;
+ animation: anis 10s linear infinite;
padding: 200px 10px 20px 10px;
- font-family:'Pacifico',serif;
- overflow:hidden;
+ 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;
+ animation-play-state: paused;
}
+
@keyframes anis {
100% {
- transform:translateY(-200px)
+ transform: translateY(-200px)
}
}
#led-content {
display: none;
}
+
#led-p-content {
text-align: center;
padding: 20px 40px;
@@ -95,292 +102,295 @@
</head>
<body class="monitor-bg">
- <!-- 鐢电珯璇︽儏 -->
- <div class="animationTop" id="detail-modal">
- <button id="closeBtn">鍏抽棴</button>
- <ul>
- <li>鍦虹珯鍚�: 涓嬫矙鏂板姞鍧＄鎶�鍥厖鐢电珯</li>
- <li>蹇厖涓暟: 10</li>
- <li>蹇厖鐢典环: 1.08鍏�/搴�</li>
- <li>鎱㈠厖涓暟: 5</li>
- <li>鎱㈠厖鐢典环: 1.44鍏�/搴�</li>
- <li>鎬绘敹鍏�: 4212.4鍏�</li>
- </ul>
- </div>
+<!-- 鐢电珯璇︽儏 -->
+<div class="animationTop" id="detail-modal">
+ <button id="closeBtn">鍏抽棴</button>
+ <ul>
+ <li>鍦虹珯鍚�: 涓嬫矙鏂板姞鍧＄鎶�鍥厖鐢电珯</li>
+ <li>蹇厖涓暟: 10</li>
+ <li>蹇厖鐢典环: 1.08鍏�/搴�</li>
+ <li>鎱㈠厖涓暟: 5</li>
+ <li>鎱㈠厖鐢典环: 1.44鍏�/搴�</li>
+ <li>鎬绘敹鍏�: 4212.4鍏�</li>
+ </ul>
+</div>
- <!--澶撮儴-->
- <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 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/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="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="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="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/image/barcode.png">
+ </div>
</div>
</div>
- <!--涓讳綋-->
- <div class="container">
+ <!--涓�-->
+ <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="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 class="crn-speed">
+ <div class="speed-content">
+ <div id="crn-chart" class="speed-chart">
</div>
- <div class="charge-info-elem">
- <img src="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="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="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="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/image/barcode.png">
</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 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 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 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>
-
- <!--鍙�-->
- <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 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(){
+ 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'
+ , width: '100%' //璁剧疆瀹瑰櫒瀹藉害
+ , arrow: 'hover' // 鍒囨崲绠ご榛樿鏄剧ず鐘舵�侊紝鍙�夊�间负 hover锛堟偓鍋滄樉绀猴級 always锛堝缁堟樉绀猴級 none锛堝缁堜笉鏄剧ず锛�
+ , interval: '3000' // 鑷姩鍒囨崲鐨勬椂闂撮棿闅旓紝鍗曚綅锛歮s锛堟绉掞級锛屼笉鑳戒綆浜�800
+ , anim: 'fade'
});
});
@@ -395,7 +405,6 @@
$('.button-right').click(function () {
full();
});
-
/***********************************************************************************/
@@ -572,7 +581,7 @@
shadowBlur: 10
}
},
- axisLabel: { // 鍧愭爣杞村皬鏍囪
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //榛樿閫忔槑
@@ -600,16 +609,16 @@
// }
// },
splitLine: { // 鍒嗛殧绾�
- length:15, // 灞炴�ength鎺у埗绾块暱
+ length: 15, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
- width:3,
+ width: 3,
color: '#fff',
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10
}
},
pointer: {
- width:2,
+ width: 2,
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 5
},
@@ -665,11 +674,14 @@
color: '#fff',
shadowColor: '#fff', //榛樿閫忔槑
shadowBlur: 10,
- formatter: function(v){
+ formatter: function (v) {
switch (v + '') {
- case '0': return '鍙�';
- case '1': return '涓�';
- case '2': return '宸�';
+ case '0':
+ return '鍙�';
+ case '1':
+ return '涓�';
+ case '2':
+ return '宸�';
}
}
},
@@ -693,7 +705,7 @@
detail: {
show: false
},
- data:[{value: 0.5, name: 'gas'}]
+ data: [{value: 0.5, name: 'gas'}]
}
]
};
@@ -718,36 +730,36 @@
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['1', '2', '3', '4', '5', '6', '7'],
+ data: ['1', '2', '3', '4', '5', '6', '7'],
axisLabel: {
- textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
+ textStyle: {
+ color: '#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
fontSize: 6,
},
},
- axisLine:{
- lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ axisLine: {
+ lineStyle: {
+ color: '#3590ac', // 鍧愭爣杞撮鑹�
}
}
},
yAxis: {
type: 'value',
axisLabel: {
- textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
+ textStyle: {
+ color: '#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
fontSize: 5
},
},
- axisLine:{
- lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ axisLine: {
+ lineStyle: {
+ color: '#3590ac', // 鍧愭爣杞撮鑹�
}
},
- splitLine:{
+ splitLine: {
show: true,
- lineStyle:{
- color:'#517a9b', // 鍒嗗壊绾块鑹�
+ lineStyle: {
+ color: '#517a9b', // 鍒嗗壊绾块鑹�
}
}
@@ -759,11 +771,11 @@
// areaStyle: {
// color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
// },
- itemStyle:{
- normal:{
- color:'#3590ac', //鎶樼偣棰滆壊
- lineStyle:{
- color:'#3590ac' //鎶樼嚎棰滆壊
+ itemStyle: {
+ normal: {
+ color: '#3590ac', //鎶樼偣棰滆壊
+ lineStyle: {
+ color: '#3590ac' //鎶樼嚎棰滆壊
}
}
}
@@ -774,11 +786,11 @@
// areaStyle: {
// color: '#d55b35' // 鎶樼嚎鍖哄煙棰滆壊
// },
- itemStyle:{
- normal:{
- color:'#ef550e', //鎶樼偣棰滆壊
- lineStyle:{
- color:'#ec670f' //鎶樼嚎棰滆壊
+ itemStyle: {
+ normal: {
+ color: '#ef550e', //鎶樼偣棰滆壊
+ lineStyle: {
+ color: '#ec670f' //鎶樼嚎棰滆壊
}
}
}
@@ -789,17 +801,17 @@
function initlineChart() {
var reportView = lineChartOption;
$.ajax({
- url: baseUrl+"/monitor/line/charts",
+ url: baseUrl + "/monitor/line/charts",
method: 'GET',
success: function (res) {
- if (res.code === 200){
+ if (res.code === 200) {
var json = res.data.rows;
- reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
+ 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;
+ 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){
+ } else if (res.code === 403) {
top.location.href = "/";
} else {
console.log(res.msg);
@@ -863,8 +875,8 @@
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
- normal:{
- color:function(params) {
+ normal: {
+ color: function (params) {
//鑷畾涔夐鑹�
let colorList = [
'#28b9a2', '#69d7fc', '#fcbf5d',
@@ -876,13 +888,14 @@
}
]
};
+
// 楗煎浘鍔犺浇
function initPieChart() {
$.ajax({
- url: baseUrl+"/monitor/loc/rep",
+ url: baseUrl + "/monitor/loc/rep",
method: 'GET',
success: function (res) {
- if (res.code === 200){
+ if (res.code === 200) {
pieChartOption.series[0].data = res.data.pie;
pieCharts.setOption(pieChartOption);
@@ -894,7 +907,7 @@
$('#used').text(res.data.used);
layui.element.progress('used-progress', res.data.usedPr + '%');
- } else if (res.code === 403){
+ } else if (res.code === 403) {
top.location.href = "/";
} else {
layer.msg(res.msg);
@@ -904,7 +917,7 @@
}
// eCharts 璺熼殢绐楀彛鏀瑰彉
- window.onresize = function(){
+ window.onresize = function () {
crnChart.resize();
lineCharts.resize();
pieCharts.resize();
--
Gitblit v1.9.1