From b621bb1034544a8c3c90257c96e4a1460747aa6d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 17 十一月 2020 09:35:39 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor/monitor.html | 371 +++++++++++++++++++++++++++++-----------------------
1 files changed, 209 insertions(+), 162 deletions(-)
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index 176ca3f..7bdb4b6 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -2,19 +2,77 @@
<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: 35%;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ /*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 {
+ display: inline-block;
+ }
+
+
+ .scroll-pane {
+ width: 100%;
+ height: 65%;
+ }
+ .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)
+ }
+ }
+
+ </style>
</head>
-<style>
-
-
-
-</style>
<body class="monitor-bg">
<!-- 鐢电珯璇︽儏 -->
@@ -35,7 +93,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鐩戞帶骞冲彴
@@ -117,47 +175,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">A</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>
+ <span>鍫嗗灈鏈鸿蛋琛岄�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
+ <div>
+ <span>鍫嗗灈鏈哄崌闄嶉�熷害锛�</span><span class="counter">5.00</span><span>绫�/绉�</span>
+ </div>
+ </div>
</div>
+
+ <div class="scroll-pane">
+
+ <div class="layui-carousel" id="test1">
+ <div carousel-item>
+ <div style="background-color: red">鏉＄洰1</div>
+ <div style="background-color: gold">鏉＄洰2</div>
+ <div style="background-color: #333333">鏉＄洰3</div>
+ <div style="background-color: #00FF00">鏉＄洰4</div>
+ <div style="background-color: #5FB878">鏉＄洰5</div>
+ </div>
+ </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">B</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">C</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">D</div>
- </div>
- </div>
- </ul>
+
</div>
</div>
@@ -259,6 +348,17 @@
</div>
</body>
<script>
+ layui.use('carousel', function(){
+ var carousel = layui.carousel;
+ //寤洪�犲疄渚�
+ carousel.render({
+ elem: '#test1'
+ ,width: '100%' //璁剧疆瀹瑰櫒瀹藉害
+ ,arrow: 'always' //濮嬬粓鏄剧ず绠ご
+ //,anim: 'updown' //鍒囨崲鍔ㄧ敾鏂瑰紡
+ });
+ });
+ $('.counter').countUp();
// 閬僵
let closeBtn = document.getElementById('closeBtn');
let detailModal = document.getElementById('detail-modal');
@@ -266,113 +366,14 @@
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'));
- lineChartOption = {
+ /***********************************************************************************/
+ /************************************* 鎶樼嚎鍥� ***************************************/
+ /***********************************************************************************/
+
+ var lineCharts = echarts.init(document.getElementById('line-charts'));
+ var lineChartOption = {
// animation: false,
grid: {
top: '0%',
@@ -437,11 +438,39 @@
}]
};
- lineCharts.setOption(lineChartOption);
+ // 璁块棶閲忔姤琛ㄥ姞杞�
+ function initlinChart() {
+ var reportView = lineChartOption;
+ var xAxisDate = [];
+ var seriesDate=[];
+ $.ajax({
+ url: baseUrl+"/monitor/pakin/rep",
+ method: 'GET',
+ success: function (res) {
+ if (res.code === 200){
+ var json = res.data;
+ for (var i = 0; i < json.length; i++) {
+ xAxisDate[i]=json[i].node;
+ seriesDate[i]=json[i].val;
+ }
+ reportView.xAxis.data=xAxisDate;
+ reportView.series[0].data=seriesDate;
+ lineCharts.setOption(reportView)
+ } else if (res.code === 403){
+ top.location.href = "/";
+ } else {
+ layer.msg(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 +486,7 @@
legend: {
orient: 'vertical',
left: 10,
- data: ['1', '2', '3']
+ data: ['鍦ㄥ簱搴撲綅', '绌哄簱浣�', '浣跨敤搴撲綅', '绂佺敤搴撲綅']
},
series: [
{
@@ -480,9 +509,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 +533,24 @@
}
]
};
- pieCharts.setOption(pieChartOption);
+ // 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;
+ pieCharts.setOption(pieChartOption)
+ } else if (res.code === 403){
+ top.location.href = "/";
+ } else {
+ layer.msg(res.msg);
+ }
+ }
+ });
+ }
</script>
</html>
--
Gitblit v1.9.1