From cb15c6400b7dfc3855e5fdd76b8b217bf6bc9567 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <xltys1995>
Date: 星期三, 30 十二月 2020 10:55:09 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 820 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 613 insertions(+), 207 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index e932d59..31dacad 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -2,19 +2,97 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>鐢垫々鐩戞帶</title>
+ <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="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script>
- <script src="js/echarts/bmap.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
+ }
+ .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;*/
+ }
+
+ </style>
</head>
-<style>
-
-
-
-</style>
<body class="monitor-bg">
<!-- 鐢电珯璇︽儏 -->
@@ -35,7 +113,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鐩戞帶骞冲彴
@@ -53,53 +131,53 @@
<div class="image-border image-border3"></div>
<div class="image-border image-border4"></div>
<div class="introduce">
- <h6>鍏呯數妗╁熀鏈俊鎭�</h6>
- <p class="english">charge base info</p>
- <p class="introduce-content">閭ｅ氨鏄崡鏄屾墦寮�鍙﹀绾虫柉杈惧厠鑴镐笂闅剧湅浜嗕笂鐢佃剳璇炬媺钀ㄧ瓑浣犲彲鎬滄垜閭ｅ氨鏄崡鏄屽競绗笁浠ｇ寮�娓╂殩鐨勬复鏈涙噿寰楀揩鏉ヤ负浣犳墦寮�鍙﹀绾虫柉杈惧厠鑴镐笂闅剧湅浜嗕笂鐢佃剳璇炬媺钀ㄧ瓑浣犲彲鎬滄垜閭ｅ氨鏄崡鏄屽競绗笁浠ｇ寮�娓╂殩鐨勬复鏈涙噿寰楀揩鏉ヤ负浣犳墦寮�鍙﹀绾虫柉杈惧厠鑴镐笂闅剧湅浜嗕笂鐢佃剳璇炬媺钀ㄧ瓑浣犲彲鎬滄垜</p>
+ <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">charge data</p>
+ <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">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>
@@ -108,8 +186,8 @@
<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="img/wxCode.jpg">
+ <span>娴欐睙涓壃鐗╂祦瑁呭鏈夐檺鍏徃</span>
+ <img src="../../static/image/barcode.png">
</div>
</div>
</div>
@@ -117,47 +195,78 @@
<!--涓�-->
<div class="container-element-middle">
<div class="map-board">
- <div id="map">
- </div>
- </div>
- <div class="station-list">
- <div class="outside">
- <div class="inside">
- <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="station-name">姝ｅ伐楦垮ぇ</div>
+ <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 class="outside">
- <div class="inside">
- <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="station-name">璀︿綋涓績</div>
- </div>
- </div>
- <div class="outside">
- <div class="inside">
- <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="station-name">涓嬫矙鏂板姞鍧＄鎶�鍥�</div>
- </div>
- </div>
- <div class="outside">
- <div class="inside">
- <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="station-name">濉樻爾甯傛皯涔嬪</div>
- </div>
- </div>
- </ul>
+
</div>
</div>
@@ -170,7 +279,7 @@
<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-left" >鍏ュ嚭搴撶粺璁�</span>
<span class="order-report-right">31</span>
</div>
<div class="order-report-english english">
@@ -188,7 +297,7 @@
<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-left" >搴撳瓨绫诲瀷</span>
<span class="income-date-right">浠婂ぉ</span>
</div>
<div class="income-date-english english">
@@ -204,30 +313,30 @@
<div class="elem-header" id="elem-header-first">
</div>
<div class="elem-main">
- 鍚堣(鍏�)
+ 鍦ㄥ簱
</div>
<div class="elem-footer">
- 3,300
+ <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">
- 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">
- 闈㈢Н(m虏)
+ 绂佺敤
</div>
<div class="elem-footer">
- 666
+ <span id="none-count">0</span>
</div>
</div>
</div>
@@ -239,8 +348,8 @@
<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">60%</span>
+ <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>
@@ -248,10 +357,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>
@@ -259,120 +371,340 @@
</div>
</body>
<script>
- // 閬僵
- let closeBtn = document.getElementById('closeBtn');
- let detailModal = document.getElementById('detail-modal');
- closeBtn.onclick = function () {
- detailModal.style.display = 'none';
- };
- var data = [];
- var chart = echarts.init(document.getElementById('map'));
- var lastStationId = null;
- var defalutName = '閫掗�掑彮鍙厖鐢垫々鐩戞帶骞冲彴';
- var lastName = defalutName;
- function reload(stationId){
- data = [];
- let center = [120.307658, 30.372121];
- let param = {
- stationId: stationId
- };
- http.post("http://localhost:8080/admin/stations.action", param, function (res) {
- res.data.list.map(item => {
- data.push({
- name: item.name,
- stationId: item.stationId,
- value: [item.lon, item.lat]
- })
- });
- option = {
- backgroundColor: 'transparent',
- title: {
- text: '',
- subtext: '',
- sublink: '',
- left: 'center',
- textStyle: {
+ 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: 130,
+ splitNumber: 13,
+ 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'
}
},
- tooltip : {
- trigger: 'item'
+ data: [{value: 40, name: 'x\nm/min'}]
+ },
+ {
+ name: '鍗囬檷閫熷害',
+ type: 'gauge',
+ center: ['25%', '55%'], // 榛樿鍏ㄥ眬灞呬腑
+ radius: '30%',
+ min: 0,
+ max: 30,
+ endAngle: 30,
+ splitNumber: 6,
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
+ width: 2,
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
+ }
},
- bmap: {
- center: stationId==null?center:data[0].value,
- zoom: stationId==null?12:18,
- roam: true, // 鏄惁鍙缉鏀�
+ axisLabel: { // 鍧愭爣杞村皬鏍囪
+ fontWeight: 'bolder',
+ color: '#fff',
+ shadowColor: '#fff', //榛樿閫忔槑
+ shadowBlur: 10
},
- series : [
- {
- name: '',
- type: 'effectScatter',
- coordinateSystem: 'bmap',
- data: data,
- symbolSize: function () {
- return 18;
- },
- showEffectOn: 'emphasis',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: { // 鏍囩
- formatter: '{b}',
- position: 'right',
- show: false
- },
- itemStyle: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- },
- zlevel: 1
- },
- ]
- };
-
- chart.setOption(option);
-
- var bMap = chart.getModel().getComponent('bmap').getBMap();
- bMap.setMapStyle({
- style : "midnight",
- });
-
- if (stationId != null) {
- lastStationId = stationId;
- lastName = data[0].name;
- } else {
- lastStationId = null;
- lastName = defalutName;
+ 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: 25,
+ startAngle: 135,
+ endAngle: 45,
+ 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'}]
}
-
- }, 'form');
- }
-
- reload();
-
- chart.on('click', function (param) {
- reload(param.data.stationId);
- $('.title').html(param.data.name);
- });
-
- // 杩斿洖
- $('.button-left').click(function () {
- reload();
- $('.title').html(defalutName);
- });
- // 鍒锋柊
- $('.button-right').click(function () {
- detailModal.style.display = 'block';
- // reload(lastStationId);
- // $('.title').html(lastName);
- });
+ ]
+ };
-// 鎶樼嚎鍥�
- let lineCharts = echarts.init(document.getElementById('line-charts'));
- lineChartOption = {
+ /***********************************************************************************/
+ /************************************* 鎶樼嚎鍥� ***************************************/
+ /***********************************************************************************/
+
+ var lineCharts = echarts.init(document.getElementById('line-charts'));
+ var lineChartOption = {
// animation: false,
grid: {
top: '0%',
@@ -386,7 +718,7 @@
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', //鍧愭爣鐨勫瓧浣撻鑹�
@@ -420,28 +752,68 @@
}
},
- series: [{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
- areaStyle: {
- color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ // areaStyle: {
+ // color: '#7494ae' // 鎶樼嚎鍖哄煙棰滆壊
+ // },
+ itemStyle:{
+ normal:{
+ color:'#3590ac', //鎶樼偣棰滆壊
+ lineStyle:{
+ color:'#3590ac' //鎶樼嚎棰滆壊
+ }
+ }
+ }
},
- 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' //鎶樼嚎棰滆壊
+ }
}
}
}
- }]
+ ]
};
- lineCharts.setOption(lineChartOption);
+ 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);
+ }
+ }
+ });
+ }
-// 楗煎浘
- let pieCharts = echarts.init(document.getElementById('pie-charts'));
- pieChartOption = {
+ /***********************************************************************************/
+ /************************************* 楗煎浘 *****************************************/
+ /***********************************************************************************/
+
+ var pieCharts = echarts.init(document.getElementById('pie-charts'));
+ var pieChartOption = {
// animation: false,
grid: {
top: '0%',
@@ -457,7 +829,7 @@
legend: {
orient: 'vertical',
left: 10,
- data: ['1', '2', '3']
+ data: ['鍦ㄥ簱', '绌�']
},
series: [
{
@@ -480,9 +852,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: {
@@ -503,7 +876,40 @@
}
]
};
- 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);
+ }
+ }
+ });
+ }
+
+ // eCharts 璺熼殢绐楀彛鏀瑰彉
+ window.onresize = function(){
+ crnChart.resize();
+ lineCharts.resize();
+ pieCharts.resize();
+ }
+
</script>
</html>
--
Gitblit v1.9.1