From 8329c5f60438a0f1f98a1dc553bd1bafdcdf2eb5 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 10 十一月 2020 19:17:18 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 254 +++++++++++++++++---------------------------------
1 files changed, 88 insertions(+), 166 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index e932d59..d69e0db 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -2,19 +2,48 @@
<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">-->
<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>
+ <style>
+ span.counter {
+ display:block;
+ margin:20px auto;
+ font-size:64px;
+ font-family:'Pacifico',serif
+ }
+
+ /*.div1 {*/
+ /* width:200px;*/
+ /* height:200px;*/
+ /* overflow:hidden;*/
+ /* margin:auto;*/
+ /* position:relative;*/
+ /* font-family:'Pacifico',serif*/
+ /*}*/
+ /*@keyframes anis {*/
+ /* 100% {*/
+ /* transform:translateY(-200px)*/
+ /* }*/
+ /*}img {*/
+ /* position:absolute;*/
+ /* }*/
+ /*.div2 {*/
+ /* animation:anis 10s linear infinite;*/
+ /*}*/
+ /*.div2:hover {*/
+ /* animation-play-state:paused;*/
+ /*}*/
+
+ </style>
</head>
-<style>
-
-
-
-</style>
<body class="monitor-bg">
<!-- 鐢电珯璇︽儏 -->
@@ -53,14 +82,14 @@
<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">
@@ -69,7 +98,7 @@
<i class="count">7777</i>
<span class="unit">涓�</span>
</div>
- <div class="content">鍏呯數妗╂�绘暟(涓�)</div>
+ <div class="content">搴撲綅鎬绘暟(涓�)</div>
</div>
</div>
<div class="charge-info-elem">
@@ -79,7 +108,7 @@
<i class="count">777</i>
<span class="unit">涓�</span>
</div>
- <div class="content">浣跨敤涓數妗�(涓�)</div>
+ <div class="content">浣跨敤涓簱浣�(涓�)</div>
</div>
</div>
<div class="charge-info-elem">
@@ -87,9 +116,9 @@
<div class="info-detail">
<div class="real-data">
<i class="count">33</i>
- <span class="unit">鍏�</span>
+ <span class="unit">鎵�</span>
</div>
- <div class="content">浠婃棩鍏呯數閲戦(鍏�)</div>
+ <div class="content">浠婃棩鍏ュ簱(鎵�)</div>
</div>
</div>
<div class="charge-info-elem">
@@ -99,7 +128,7 @@
<i class="count">14296</i>
<span class="unit">鍗冪摝鏃�</span>
</div>
- <div class="content">浠婃棩鍏呯數鎬婚噺(鍗冪摝鏃�)</div>
+ <div class="content">浠婃棩鐢垫�婚噺(鍗冪摝鏃�)</div>
</div>
</div>
</div>
@@ -108,7 +137,7 @@
<div class="image-border image-border2"></div>
<div class="image-border image-border3"></div>
<div class="image-border image-border4"></div>
- <span>閫掗�掑彮鍙鎴锋湇鍔′腑蹇�</span>
+ <span>涓壃鐗╂祦瀹㈡埛鏈嶅姟涓績</span>
<img src="img/wxCode.jpg">
</div>
</div>
@@ -117,48 +146,43 @@
<!--涓�-->
<div class="container-element-middle">
<div class="map-board">
- <div id="map">
+ <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="demo">
+ <span class="counter">5.00</span>
+ </div>
+
+ <!-- 涓乏 -->
+ <div class="div1">
+ <div class="div2">
+ <p>111111111111111111111</p>
+ <p>211111111111111111111</p>
+ <p>311111111111111111111</p>
+ <p>411111111111111111111</p>
+ <p>511111111111111111111</p>
+ <p>611111111111111111111</p>
+ <p>711111111111111111111</p>
+ <p>2211111111111111111111</p>
+ <p>331111111111111111111</p>
+ <p>441111111111111111111</p>
+ <p>551111111111111111111</p>
+ <p>661111111111111111111</p>
+ <p>771111111111111111111</p>
+ <p>881111111111111111111</p>
+ <p>991111111111111111111</p>
+ <p>001111111111111111111</p>
+ </div>
+ </div>
+ <!-- 涓彸 -->
</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>
- </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 +194,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 +212,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,7 +228,7 @@
<div class="elem-header" id="elem-header-first">
</div>
<div class="elem-main">
- 鍚堣(鍏�)
+ 鍦ㄥ簱
</div>
<div class="elem-footer">
3,300
@@ -214,7 +238,7 @@
<div class="elem-header" id="elem-header-second">
</div>
<div class="elem-main">
- 鐢垫々鏁�(涓�)
+ 绌哄簱
</div>
<div class="elem-footer">
161
@@ -224,7 +248,7 @@
<div class="elem-header" id="elem-header-third">
</div>
<div class="elem-main">
- 闈㈢Н(m虏)
+ 浣跨敤涓�
</div>
<div class="elem-footer">
666
@@ -239,7 +263,7 @@
<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-left" >搴撲綅浣跨敤鐜�</span>
<span class="usage-rate-right">60%</span>
</div>
<div class="usage-rate-english english">
@@ -259,6 +283,7 @@
</div>
</body>
<script>
+ $('.counter').countUp();
// 閬僵
let closeBtn = document.getElementById('closeBtn');
let detailModal = document.getElementById('detail-modal');
@@ -266,109 +291,6 @@
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: {
- color: '#fff'
- }
- },
- tooltip : {
- trigger: 'item'
- },
- bmap: {
- center: stationId==null?center:data[0].value,
- zoom: stationId==null?12:18,
- roam: true, // 鏄惁鍙缉鏀�
- },
- 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;
- }
-
- }, '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'));
--
Gitblit v1.9.1