From 37281ae5fa9e93d27252fd99f7afec74a23e666c Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期四, 31 八月 2023 15:43:43 +0800
Subject: [PATCH] # 显示屏
---
src/main/webapp/views/monitor/css/index.css | 40 ++++++
src/main/webapp/views/monitor/index.html | 295 +++++++++++++++++++++++++++++++++++++------------
src/main/webapp/views/monitor/monitor.html | 1
3 files changed, 260 insertions(+), 76 deletions(-)
diff --git a/src/main/webapp/views/monitor/css/index.css b/src/main/webapp/views/monitor/css/index.css
index e55ffe7..d4d6c51 100644
--- a/src/main/webapp/views/monitor/css/index.css
+++ b/src/main/webapp/views/monitor/css/index.css
@@ -57,7 +57,8 @@
display: flex;
align-items: center;
justify-content: center;
- font-size: 20px;
+ font-size: 26px;
+ font-weight: 600;
}
.box-body {
width: 95%;
@@ -75,6 +76,29 @@
width: 100%;
height: 90%;
}
+.table-head {
+ height: 40px;
+ background-color: rgba(0, 54, 167, 0.4);
+ color: #f1f1f1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 20px;
+ font-weight: 700;
+}
+.table-item {
+ color: #FFF;
+ text-align: center;
+}
+.table-td {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+}
+.table-td:nth-child(even) {
+ background-color: rgba(90, 163, 172, 0.3);
+}
.percentage {
text-align: center;
line-height: 100px;
@@ -82,8 +106,18 @@
margin-left: 20px;
height: 100px;
width: 100px;
- background-color: #f1f1f1;
+ background-color: rgba(85, 255, 227, 0.56);
border-radius: 50%;
- font-size: 40px;
+ font-size: 32px;
+ color: #ffffff;
font-family: electronicFont;
+}
+.time-tools {
+ position: absolute;
+ margin-left: 80%;
+ margin-top: 0.8%;
+ width: 20%;
+ height: 10%;
+ text-align: center;
+ color: #FFF;
}
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor/index.html b/src/main/webapp/views/monitor/index.html
index 631b7c7..e6dea99 100644
--- a/src/main/webapp/views/monitor/index.html
+++ b/src/main/webapp/views/monitor/index.html
@@ -8,20 +8,24 @@
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/echarts/echarts.min.js"></script>
+ <script src="../../static/js/common.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="head">
<div class="head-title">鑷姩浠撳簱鐩戞帶骞冲彴</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>
<div class="body">
<div class="area">
<div class="box">
- <div class="box-title">鍥炬爣1</div>
+ <div class="box-title">娴嬭瘯鐘舵��</div>
<div class="box-body">
- <div style="display: flex"><div style="flex: 1">搴撲綅鍙�</div><div style="flex: 1">搴撲綅鐘舵��</div><div style="flex: 1">娴嬭瘯鐘舵��</div></div>
- <div class="swiper">
- <div class="swiper-wrapper">
+ <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="swiper" style="height: 85%">
+ <div class="swiper-wrapper table-item">
</div>
</div>
</div>
@@ -41,8 +45,8 @@
<div style="display: flex;"class="box-body">
<div class="box-body2" id="barLabelRotation"></div>
<div class="box-body3" >
- <div class="percentage">60%</div>
- <div class="percentage">40%</div>
+ <div class="percentage" id="thisWeek">60%</div>
+ <div class="percentage" id="lastWeek">40%</div>
</div>
</div>
</div>
@@ -52,55 +56,90 @@
</body>
</html>
<script>
- var item = [
- {
- locNo:'0100101',
- loc_sts: 'F',
- packStatus$: '鏈畬鎴�'
- },
- {
- locNo:'0100102',
- loc_sts: 'F',
- packStatus$: '鏈畬鎴�'
- },
- {
- locNo:'0100103',
- loc_sts: 'F',
- packStatus$: '鏈畬鎴�'
- },]
- var el
- var box = ''
- for (var i = 0; i < item.length; i++) {
- el = "<div class='swiper-slide' style='display: flex'><div style='flex: 1'>"
- + item[i].locNo + "</div><div style='flex: 1'>"
- + item[i].loc_sts + "</div><div style='flex: 1'>"
- + item[i].packStatus$
- + "</div></div>"
- box = box + el
+ let url = 'http://127.0.0.1:8080/fnwms'
+ var item = []
+ var year = '2020';
+ var month = '05';
+ var day = '01';
+ var hour = '08';
+ var minute = '00';
+ var second = '00';
+ var week = '鏄熸湡涓�';
+ initBasicInformation();
+ setTimeout(()=>{
+ initTest();
+ },500)
+ setInterval(()=>{
+ initUsageRate();
+ initQualified();
+ initMorning();
+ initEvening();
+ getDate();
+ setDate();
+ },1000)
+ setInterval(()=>{
+ //location.reload()
+ },10000)
+ function initTest() {
+ console.log(item)
+ var box = ''
+ var el
+ for (var i = 0; i < item.length; i++) {
+ 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].packStatus$
+ + "</div></div>"
+ box = box + el
+ }
+ $('.swiper-wrapper').append(box)
+ var mySwiper = new Swiper ('.swiper', {
+ direction: 'vertical', // 鍨傜洿鍒囨崲閫夐」
+ loop: true, // 寰幆妯″紡閫夐」
+ autoplay:true,
+ slidesPerView: 5,
+ })
}
- $('.swiper-wrapper').append(box)
- var mySwiper = new Swiper ('.swiper', {
- direction: 'vertical', // 鍨傜洿鍒囨崲閫夐」
- loop: true, // 寰幆妯″紡閫夐」
- autoplay:true,
- slidesPerView: 3,
- // 濡傛灉闇�瑕佸垎椤靛櫒
- pagination: {
- el: '.swiper-pagination',
- },
- })
+ function setDate() {
+ getDate();
+ $('#bar-year').text(year);
+ $('#bar-month').text(month);
+ $('#bar-day').text(day);
+ $('#bar-hour').text(hour);
+ $('#bar-minute').text(minute);
+ $('#bar-second').text(second);
+ $('#bar-week').text(week);
+ }
+ /**
+ * 鑾峰彇鏃堕棿
+ */
+ function getDate() {
+ http.get("http://localhost:9090/fnwcs/monitor/date", null, function (res) {
+ if (res.code === 200){
+ year = res.data.year;
+ month = res.data.month;
+ day = res.data.day;
+ hour = res.data.hour;
+ minute = res.data.minute;
+ second = res.data.second;
+ week = res.data.week;
+ } else if (res.code === 403){
+ parent.location.href = baseUrl+"/login";
+ } else {
+ layer.msg("杩炴帴鏈嶅姟鍣ㄥけ璐�", {icon: 2});
+ }
+ })
+
+ }
/**
* 鍫嗗彔鏌辩姸鍥� -- 浣跨敤鐜�
* */
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var stackedColumnChart = echarts.init(document.getElementById('stackedColumnChart'));
// 鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹�
- var option = {
+ var stackedColumnChartOption = {
// 鍏ㄥ眬璋冭壊鐩樸��
- color: [
- '#2f89cf',
- '#27d08a',
- ],
+ color: ['#00d887', '#0184d5',],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -124,7 +163,7 @@
color: '#FFF'
}
},
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+ data: ['鏈煡', '娴嬭瘯搴撲綅', '闈欑疆搴撲綅', '娴嬭瘯鍓嶆殏瀛樺簱涓�', '娴嬭瘯澶辫触搴撲綅']
}
],
yAxis: [
@@ -139,44 +178,53 @@
],
series: [
{
- name: 'Email',
+ name: '宸蹭娇鐢ㄥ簱浣�',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
+ z:99,
label: {
- show: true
+ show: true,
+ fontSize: 16,
+ fontWeight: 'bold',
+ position: 'top',
+ color: '#FFF',
+ offset: [15,5],
},
barWidth:'50%',
- data: [50, 132, 101, 134, 90]
+ data: [],
},
{
- name: 'Union Ads',
+ name: '绌洪棽搴撲綅',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
label: {
- show: true
+ show: true,
+ fontSize: 16,fontWeight: 'bold',
+ position: 'top',offset: [-15,5],
},
- data: [300, 182, 191, 234, 290]
+ data: []
},
]
};
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
- stackedColumnChart.setOption(option);
+ stackedColumnChart.setOption(stackedColumnChartOption);
/**
* 鏌辩姸鍥炬爣绛炬棆杞� -- 鍚堟牸鐜�
* */
var chartDom = document.getElementById('barLabelRotation');
var barLabelRotation = echarts.init(chartDom);
- var option;
+ var barLabelRotationOption;
- option = {
+ barLabelRotationOption = {
+ color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -209,32 +257,49 @@
color: '#FFF'
}
},
- data: ['鍚堟牸', '涓嶅悎鏍�']
+ data: ['鏈懆', '涓婂懆']
},
series: [
{
- name: '鏈懆',
+ name: '鍚堟牸',
type: 'bar',
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'right'
+ }
+ }
+ },
data: [10, 1]
},
{
- name: '涓婂懆',
+ name: '涓嶅悎鏍�',
type: 'bar',
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'right'
+ }
+ }
+ },
data: [9, 3]
}
]
};
- option && barLabelRotation.setOption(option);
+ barLabelRotationOption && barLabelRotation.setOption(barLabelRotationOption);
var smoothedLineChart = echarts.init(document.getElementById('smoothedLineChart'));
- var option;
+ var smoothedLineChartOption;
- option = {
+ smoothedLineChartOption = {
+ color: ['rgb(225,5,85)', 'rgb(255,72,31)', 'rgb(0,146,252)', 'rgb(13,46,207)', '#FFBF00'],
legend: {
icon: 'roundRect',
- data: ['涓婂崍鍑哄簱', '涓婂崍鍏ュ簱', '涓嬪崍鍑哄簱', '涓嬪崍鍏ュ簱'],
+ data: ['8-20鍑哄簱', '8-20鍏ュ簱', '20-8鍑哄簱', '20-8鍏ュ簱'],
textStyle:{color:'#FFF'},
},
grid: { // 鍥捐〃璺濈杈规鐨勮窛绂伙紝鍙敤鐧惧垎姣斿拰鏁板瓧锛坧x锛夐厤缃�
@@ -264,7 +329,7 @@
},
series: [
{
- name: '涓婂崍鍑哄簱',
+ name: '8-20鍑哄簱',
type: 'line',
lineStyle: {
width: 0,
@@ -273,10 +338,10 @@
}
},
smooth: true,
- data: [10, 10, 10, 10, 10, 10, 10]
+ data: [10, 15, 8, 10, 10, 10, 10]
},
{
- name: '涓婂崍鍏ュ簱',
+ name: '8-20鍏ュ簱',
type: 'line',
lineStyle: {
width: 0,
@@ -285,10 +350,10 @@
}
},
smooth: true,
- data: [10, 10, 10, 10, 10, 10, 10]
+ data: [12, 20, 7, 10, 10, 10, 10]
},
{
- name: '涓嬪崍鍑哄簱',
+ name: '20-8鍑哄簱',
type: 'line',
lineStyle: {
normal: {
@@ -296,10 +361,10 @@
}
},
smooth: true,
- data: [10, 10, 10, 10, 10, 10, 10]
+ data: [8, 7, 10, 6, 10, 10, 10]
},
{
- name: '涓嬪崍鍏ュ簱',
+ name: '20-8鍏ュ簱',
type: 'line',
lineStyle: {
normal: {
@@ -307,11 +372,95 @@
}
},
smooth: true,
- data: [10, 1, 10, 10, 10, 10, 10]
+ data: [9, 9, 10, 5, 10, 10, 10]
},
]
};
- option && smoothedLineChart.setOption(option);
+ smoothedLineChartOption && smoothedLineChart.setOption(smoothedLineChartOption);
+
+
+ function initUsageRate() {
+ $.ajax({
+ url: url+"/mobile/pack/usage/rate",
+ method: 'POST',
+ success: function (res) {
+ if (res.code === 200) {
+ for (var i = 0; i < res.data.length; i++) {
+ stackedColumnChartOption.series[0].data[i] = res.data[i].currentQuantity
+ stackedColumnChartOption.series[1].data[i] = (res.data[i].total - res.data[i].currentQuantity)
+ }
+ stackedColumnChart.setOption(stackedColumnChartOption);
+ }
+ }
+ });
+ }
+ function initQualified() {
+ $.ajax({
+ url: url+"/mobile/pack/qualified",
+ method: 'POST',
+ success: function (res) {
+ var qualifieds = []
+ if (res.code === 200) {
+ for (var i = 0; i < res.data.length; i++) {
+ 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
+ var percent = (Math.round(qualified*10000))/100+'%';
+ qualifieds.push(percent)
+ }
+ $('#lastWeek').text(qualifieds[0])
+ $('#thisWeek').text(qualifieds[1])
+ barLabelRotation.setOption(barLabelRotationOption);
+ }
+ }
+ });
+ }
+ 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",
+ 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[3].data=res.data.rows[0].data;
+ smoothedLineChartOption.series[2].data=res.data.rows[1].data;
+ smoothedLineChart.setOption(smoothedLineChartOption)
+ }
+ }
+ });
+ }
+
+ function initBasicInformation() {
+ $.ajax({
+ url: url+"/mobile/pack/basic/information",
+ method: 'POST',
+ success: function (res) {
+ var array = []
+ if (res.code === 200) {
+ for (var i = 0; i < res.data.length; i++) {
+ array.push(res.data[i])
+ }
+ item = array
+ }
+ }
+ });
+ }
</script>
\ No newline at end of file
diff --git a/src/main/webapp/views/monitor/monitor.html b/src/main/webapp/views/monitor/monitor.html
index fd1fdf2..46989e4 100644
--- a/src/main/webapp/views/monitor/monitor.html
+++ b/src/main/webapp/views/monitor/monitor.html
@@ -792,6 +792,7 @@
url: baseUrl+"/monitor/line/charts",
method: 'GET',
success: function (res) {
+ console.log(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),
--
Gitblit v1.9.1