From 1ff7a3df69e7b3d64a9241aa70a1e46c8a863c18 Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 01 九月 2023 16:43:42 +0800
Subject: [PATCH] # 显示屏
---
src/main/webapp/views/monitor/index.html | 111 ++++++++++++++++++-------------------------------------
1 files changed, 37 insertions(+), 74 deletions(-)
diff --git a/src/main/webapp/views/monitor/index.html b/src/main/webapp/views/monitor/index.html
index e6dea99..698134e 100644
--- a/src/main/webapp/views/monitor/index.html
+++ b/src/main/webapp/views/monitor/index.html
@@ -23,7 +23,7 @@
<div class="box">
<div class="box-title">娴嬭瘯鐘舵��</div>
<div class="box-body">
- <div class="table-head" style="display: flex"><div style="flex: 1">搴撲綅鍙�</div><div style="flex: 1">搴撲綅鐘舵��</div><div style="flex: 1">娴嬭瘯鐘舵��</div></div>
+ <div class="table-head" style="display: flex"><div style="flex: 1">搴撲綅鍙�</div><div style="flex: 1">搴撲綅鐘舵��</div><div style="flex: 1">鍖呭彿</div><div style="flex: 1">娴嬭瘯鐘舵��</div></div>
<div class="swiper" style="height: 85%">
<div class="swiper-wrapper table-item">
</div>
@@ -31,7 +31,7 @@
</div>
</div>
<div class="box">
- <div class="box-title">鏃�8鏅�8</div>
+ <div class="box-title">12灏忔椂鍏ュ嚭搴撶粺璁�</div>
<div class="box-body" id="smoothedLineChart"></div>
</div>
</div>
@@ -43,11 +43,11 @@
<div class="box">
<div class="box-title">鍚堟牸鐜�</div>
<div style="display: flex;"class="box-body">
- <div class="box-body2" id="barLabelRotation"></div>
- <div class="box-body3" >
- <div class="percentage" id="thisWeek">60%</div>
- <div class="percentage" id="lastWeek">40%</div>
- </div>
+ <div class="box-body" id="barLabelRotation"></div>
+ <!--<div class="box-body3" >-->
+ <!-- <div class="percentage" id="thisWeek">60%</div>-->
+ <!-- <div class="percentage" id="lastWeek">40%</div>-->
+ <!--</div>-->
</div>
</div>
</div>
@@ -56,7 +56,7 @@
</body>
</html>
<script>
- let url = 'http://127.0.0.1:8080/fnwms'
+ let url = 'http://192.168.4.34:8080/fnwms'
var item = []
var year = '2020';
var month = '05';
@@ -72,7 +72,6 @@
setInterval(()=>{
initUsageRate();
initQualified();
- initMorning();
initEvening();
getDate();
setDate();
@@ -88,6 +87,7 @@
el = "<div class='swiper-slide table-td'><div style='flex: 1'>"
+ item[i].locNo + "</div><div style='flex: 1'>"
+ item[i].locSts + "</div><div style='flex: 1'>"
+ + item[i].mk + "</div><div style='flex: 1'>"
+ item[i].packStatus$
+ "</div></div>"
box = box + el
@@ -163,7 +163,7 @@
color: '#FFF'
}
},
- data: ['鏈煡', '娴嬭瘯搴撲綅', '闈欑疆搴撲綅', '娴嬭瘯鍓嶆殏瀛樺簱涓�', '娴嬭瘯澶辫触搴撲綅']
+ data: ['鍏朵粬', '娴嬭瘯搴撲綅', '闈欑疆搴撲綅', '娴嬭瘯鍓嶆殏瀛樺簱涓�', '娴嬭瘯澶辫触搴撲綅']
}
],
yAxis: [
@@ -224,7 +224,7 @@
var barLabelRotationOption;
barLabelRotationOption = {
- color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+ color: ['#80FFA5', '#FFBF00','#00DDFF', '#37A2FF', '#FF0087', ],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -234,30 +234,28 @@
legend: {
textStyle:{color:'#FFF'},
},
- grid: { // 鍥捐〃璺濈杈规鐨勮窛绂伙紝鍙敤鐧惧垎姣斿拰鏁板瓧锛坧x锛夐厤缃�
- top: '10%',
+ grid: {
left: '3%',
- right: '5%',
- bottom: '0%',
+ right: '4%',
+ bottom: '3%',
containLabel: true
},
xAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#FFF'
- }
- },
- boundaryGap: [0, 0.01]
- },
- yAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
- data: ['鏈懆', '涓婂懆']
+ data: ['鏈煡', '娴嬭瘯搴撲綅', '闈欑疆搴撲綅', '娴嬭瘯鍓嶆殏瀛樺簱涓�', '娴嬭瘯澶辫触搴撲綅']
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#FFF'
+ }
+ },
},
series: [
{
@@ -267,7 +265,7 @@
normal: {
label: {
show: true,
- position: 'right'
+ position: 'top'
}
}
},
@@ -280,7 +278,7 @@
normal: {
label: {
show: true,
- position: 'right'
+ position: 'top'
}
}
},
@@ -299,7 +297,7 @@
color: ['rgb(225,5,85)', 'rgb(255,72,31)', 'rgb(0,146,252)', 'rgb(13,46,207)', '#FFBF00'],
legend: {
icon: 'roundRect',
- data: ['8-20鍑哄簱', '8-20鍏ュ簱', '20-8鍑哄簱', '20-8鍏ュ簱'],
+ data: ['鍑哄簱', '鍏ュ簱'],
textStyle:{color:'#FFF'},
},
grid: { // 鍥捐〃璺濈杈规鐨勮窛绂伙紝鍙敤鐧惧垎姣斿拰鏁板瓧锛坧x锛夐厤缃�
@@ -329,31 +327,7 @@
},
series: [
{
- name: '8-20鍑哄簱',
- type: 'line',
- lineStyle: {
- width: 0,
- normal: {
- width: 4
- }
- },
- smooth: true,
- data: [10, 15, 8, 10, 10, 10, 10]
- },
- {
- name: '8-20鍏ュ簱',
- type: 'line',
- lineStyle: {
- width: 0,
- normal: {
- width: 4
- }
- },
- smooth: true,
- data: [12, 20, 7, 10, 10, 10, 10]
- },
- {
- name: '20-8鍑哄簱',
+ name: '鍑哄簱',
type: 'line',
lineStyle: {
normal: {
@@ -364,7 +338,7 @@
data: [8, 7, 10, 6, 10, 10, 10]
},
{
- name: '20-8鍏ュ簱',
+ name: '鍏ュ簱',
type: 'line',
lineStyle: {
normal: {
@@ -402,7 +376,9 @@
success: function (res) {
var qualifieds = []
if (res.code === 200) {
+ res.data.reverse()
for (var i = 0; i < res.data.length; i++) {
+ barLabelRotationOption.xAxis.data[i] = res.data[i].week
barLabelRotationOption.series[0].data[i] = res.data[i].qualified
barLabelRotationOption.series[1].data[i] = res.data[i].unqualified
var qualified = res.data[i].qualified / res.data[i].total
@@ -416,31 +392,18 @@
}
});
}
- function initMorning() {
- $.ajax({
- url: url+"/mobile/pack/morning/v2",
- method: 'POST',
- success: function (res) {
- if (res.code === 200) {
- smoothedLineChartOption.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)];
- smoothedLineChartOption.series[0].data=res.data.rows[0].data;
- smoothedLineChartOption.series[1].data=res.data.rows[1].data;
- smoothedLineChart.setOption(smoothedLineChartOption)
- }
- }
- });
- }
function initEvening() {
$.ajax({
- url: url+"/mobile/pack/evening/v2",
+ url: url+"/mobile/pack/evening",
method: 'POST',
success: function (res) {
+ res.data.reverse()
if (res.code === 200) {
- smoothedLineChartOption.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)];
- smoothedLineChartOption.series[3].data=res.data.rows[0].data;
- smoothedLineChartOption.series[2].data=res.data.rows[1].data;
+ for (var i = 0; i < res.data.length;i++) {
+ smoothedLineChartOption.xAxis.data[i] = res.data[i].week
+ smoothedLineChartOption.series[0].data[i]=res.data[i].unqualified
+ smoothedLineChartOption.series[1].data[i]=res.data[i].qualified
+ }
smoothedLineChart.setOption(smoothedLineChartOption)
}
}
--
Gitblit v1.9.1