From 283da741b2429cf5a53786e5ee1b5528b757fdf6 Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期三, 11 六月 2025 11:10:42 +0800
Subject: [PATCH] 首页及电子货位卡页面
---
igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js | 435 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 265 insertions(+), 170 deletions(-)
diff --git a/igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js b/igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js
index 0a39085..79daa55 100644
--- a/igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js
+++ b/igds-dzhwk-web/src/main/resources/static/dzhwk/dzhwk.js
@@ -1,173 +1,105 @@
+var linexData = ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'];
+var lineyData = [22, 23, 23, 23, 24, 25, 28];
+var lineyData2 = [16.5, 17.5, 18, 16.5, 18, 19, 21];
+var lineyData3 = [11, 12, 13, 10, 12, 13, 14];
$(document).ready(function () {
- function initLineEchart(id, xData, yData, yData2, yData3) {
- var echart = null
- var dom = document.getElementById(id);
- echart = echarts.init(dom);
- var option = {
- tooltip: {
- trigger: 'axis',
- },
- legend: {
- right: '0',
- top: '2%',
- itemWidth: 12,
- itemHeight: 12,
- icon: 'circle',
- textStyle: {
- color: '#91ceff',
- fontSize: 18,
- paddingLeft: 5,
- }
- },
- grid: {
- top: '15%',
- left: '3%',
- right: '0',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: "category",
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.6)",
- width: 1
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: true,
- color: "#fff",
- fontSize: 20,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "rgba(255,255,255,.2)",
- }
- },
- data: xData
- },
- yAxis: [{
- name: '(掳C)',
- min: 0,
- max: 40,
- interval: 10,
- nameTextStyle: {
- color: 'rgba(145,206,255,.5)',
- fontSize: 18,
- padding: [0, 0, 5, -30]
- },
- type: 'value',
- axisTick: {
- show: false
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- color: "#91ceff", //X杞存枃瀛楅鑹�
- fontSize: 18,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: "dashed",
- color: "rgba(255,255,255,.3)",
- }
- },
- }],
- series: [{
- name: '绮珮娓�',
- type: 'line',
- symbol: 'none',
- color: '#ffd12b',
- lineStyle: {
- width: 3
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(255, 209, 43,0.3)'
- },
- {
- offset: 1,
- color: 'rgba(255, 209, 43,0)'
- },
- ]),
- },
- label: {
- show: false,
- },
- data: yData,
- },
- {
- name: '绮潎娓�',
- type: 'line',
- symbol: 'none',
- color: '#02afff',
- lineStyle: {
- width: 3
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(2, 175, 255, .3)'
- },
- {
- offset: 1,
- color: 'rgba(2, 175, 255,0)'
- },
- ]),
- },
- label: {
- show: false,
- },
- data: yData2,
- },
- {
- name: '绮綆娓�',
- type: 'line',
- symbol: 'none',
- color: '#39ff02',
- lineStyle: {
- width: 3
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgb(97,154,82)'
- },
- {
- offset: 1,
- color: 'rgba(2, 175, 255,0)'
- },
- ]),
- },
- label: {
- show: false,
- },
- data: yData3,
- }]
- };
- if (option && typeof option === "object") {
- echart.setOption(option, true);
- }
- }
- var linexData = ['01', '02', '03', '04', '05', '06', '07'];
- var lineyData = [22, 23, 23, 23, 24, 25, 28];
- var lineyData2 = [16.5, 17.5, 18, 16.5, 18, 19, 21];
- var lineyData3 = [11, 12, 13, 10, 12, 13, 14];
- initLineEchart('lineChart1', linexData, lineyData, lineyData2, lineyData3)
- initLineEchart('lineChart2', linexData, lineyData, lineyData2, lineyData3)
- initLineEchart('lineChart3', linexData, lineyData, lineyData2, lineyData3)
- initLineEchart('lineChart4', linexData, lineyData, lineyData2, lineyData3)
- initLineEchart('lineChart5', linexData, lineyData, lineyData2, lineyData3)
- initLineEchart('lineChart6', linexData, lineyData, lineyData2, lineyData3)
+ var html = "";
+ if(depotList){
+ $.each(depotList, function (index, item) {
+ html += '<div class="swiper-slide"><div class="electron1"><div class="col-l"><div class="g-boxl1"><div class="g-titl1">璐т綅淇℃伅</div><ul class="ul-listl5">';
+ html += '<li><div class="con"><div class="tit">'+item.name+'</div><div class="info">鍚嶇О</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.depotStatusName+'</div><div class="info">璐т綅鐘舵��</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.storageReal+'<em>t</em></div><div class="info">绮鍌ㄩ噺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.foodVarietyName+'</div><div class="info">绮鍝佺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.foodTypeName+'</div><div class="info">绮鎬ц川</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.foodLevelName+'</div><div class="info">绮绛夌骇</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.foodYear+'</div><div class="info">绮骞翠唤</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.storeDate+'</div><div class="info">鍏ヤ粨鏃堕棿</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.depotTypeName+'</div><div class="info">浠撴埧绫诲瀷</div></div></li></ul></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">绮儏涓夋俯鍥�</div><div class="m-chartl"><div class="chart" id="lineChart'+index+'"></div></div></div></div>';
+ html += '<div class="col-c"><div class="g-boxl1"><div class="g-titl1">绮儏淇℃伅</div>';
+ html += '<ul class="ul-listl6"><li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div>';
+ html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>'+item.inTemp+'</em> 掳C</div><div class="tt">浠撳唴娓╁害</div></div></div>';
+ html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>'+item.outTemp+'</em> 掳C</div><div class="tt">浠撳娓╁害</div></div></div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl19.png" alt=""></div>';
+ html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>'+item.inHumidity+'</em> %</div><div class="tt">浠撳唴婀垮害</div></div></div>';
+ html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>'+item.outHumidity+'</em> %</div><div class="tt">浠撳婀垮害</div></div></div></div></div></li></ul>';
+ html += '<ul class="ul-listl5 styl3"><li><div class="con" style="background-color: rgba(254,139,76,.2);"><div class="tit">'+item.maxTemp+'<em>掳C</em></div><div class="info">绮珮娓�</div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="tit">'+item.aveTemp+'<em>掳C</em></div><div class="info">绮潎娓�</div></div></li>';
+ html += '<li><div class="con"><div class="tit">'+item.minTemp+'<em>掳C</em></div><div class="info">绮綆娓�</div></div></li></ul><div class="date">'+item.grainDate+'</div></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">璐ㄦ淇℃伅</div><ul class="ul-listl5 styl2">';
+ html += '<li><div class="con"><div class="tit">'+item.foodVarietyName+'</div><div class="info">绮鍝佺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">妫�楠屼汉</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">妫�楠屾棩鏈�</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">姘村垎</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">鏉傝川</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">涓嶅畬鍠勭被</div></div></li></ul></div></div>';
+ html += '<div class="col-r"><div class="g-boxl1"><div class="g-titl1">姘斾綋淇℃伅</div><ul class="ul-listl3 styl2">';
+ html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>'+item.perPh3+'</em>ppm</div><div class="tt">纾峰寲姘�</div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>'+item.perO2+'</em>%</div><div class="tt">姘ф皵</div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl28.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>'+item.perCo2+'</em>ppm</div><div class="tt">浜屾哀鍖栫⒊</div></div></div></li><div class="date">'+item.gasDate+'</div></ul></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">淇濈鍛�</div><ul class="ul-intel styl2">';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl23.png" alt=""></div>淇濈鍛�</div><div class="rr">'+item.storeKeeperName+'</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>鐢佃瘽</div><div class="rr">'+item.storeKeeperPhone+'</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl26.png" alt=""></div>閮ㄩ棬</div><div class="rr">--</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl27.png" alt=""></div>鏈�杩戞墦鍗�</div><div class="rr">--</div></div></li></ul>';
+ html += '</div></div></div></div>';
+ })
+ }else{
+ html += '<div class="swiper-slide"><div class="electron1"><div class="col-l"><div class="g-boxl1"><div class="g-titl1">璐т綅淇℃伅</div><ul class="ul-listl5">';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">鍚嶇О</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">璐т綅鐘舵��</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--<em>t</em></div><div class="info">绮鍌ㄩ噺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">绮鍝佺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">绮鎬ц川</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">绮绛夌骇</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">绮骞翠唤</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">鍏ヤ粨鏃堕棿</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">浠撴埧绫诲瀷</div></div></li></ul></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">绮儏涓夋俯鍥�</div><div class="m-chartl"><div class="chart" id="lineChart1"></div></div></div></div>';
+ html += '<div class="col-c"><div class="g-boxl1"><div class="g-titl1">绮儏淇℃伅</div>';
+ html += '<ul class="ul-listl6"><li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl18.png" alt=""></div>';
+ html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>--</em> 掳C</div><div class="tt">浠撳唴娓╁害</div></div></div>';
+ html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>--</em> 掳C</div><div class="tt">浠撳娓╁害</div></div></div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl19.png" alt=""></div>';
+ html += '<div class="rr"><div class="itm"><div class="info" style="background-color: rgba(18,110,112,.15);"><div class="num"><em>--</em> %</div><div class="tt">浠撳唴婀垮害</div></div></div>';
+ html += '<div class="itm"><div class="info" style="background-color: rgba(255,255,255,.05);"><div class="num"><em>--</em> %</div><div class="tt">浠撳婀垮害</div></div></div></div></div></li></ul>';
+ html += '<ul class="ul-listl5 styl3"><li><div class="con" style="background-color: rgba(254,139,76,.2);"><div class="tit">--<em>掳C</em></div><div class="info">绮珮娓�</div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="tit">--<em>掳C</em></div><div class="info">绮潎娓�</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--<em>掳C</em></div><div class="info">绮綆娓�</div></div></li></ul></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">璐ㄦ淇℃伅</div><ul class="ul-listl5 styl2">';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">绮鍝佺</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">妫�楠屼汉</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--</div><div class="info">妫�楠屾棩鏈�</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">姘村垎</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">鏉傝川</div></div></li>';
+ html += '<li><div class="con"><div class="tit">--%</div><div class="info">涓嶅畬鍠勭被</div></div></li></ul></div></div>';
+ html += '<div class="col-r"><div class="g-boxl1"><div class="g-titl1">姘斾綋淇℃伅</div><ul class="ul-listl3 styl2">';
+ html += '<li><div class="con" style="background-color: rgba(3,77,146,.3);"><div class="icon"><img src="/img/dzhwk/iconl21.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">纾峰寲姘�</div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(31,133,78,.15);"><div class="icon"><img src="/img/dzhwk/iconl20.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>--</em>%</div><div class="tt">姘ф皵</div></div></div></li>';
+ html += '<li><div class="con" style="background-color: rgba(91,104,225,.25);"><div class="icon"><img src="/img/dzhwk/iconl28.png" alt="">';
+ html += '</div><div class="txt"><div class="num"><em>--</em>ppm</div><div class="tt">浜屾哀鍖栫⒊</div></div></div></li></ul></div>';
+ html += '<div class="g-boxl1 h378"><div class="g-titl1">淇濈鍛�</div><ul class="ul-intel styl2">';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl23.png" alt=""></div>淇濈鍛�</div><div class="rr">--</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl24.png" alt=""></div>鐢佃瘽</div><div class="rr">--</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl26.png" alt=""></div>閮ㄩ棬</div><div class="rr">--</div></div></li>';
+ html += '<li><div class="con df-jb"><div class="ll"><div class="ico"><img src="/img/dzhwk/iconl27.png" alt=""></div>鏈�杩戞墦鍗�</div><div class="rr">--</div></div></li></ul>';
+ html += '</div></div></div></div>';
+
+ initLineEchart('lineChart1', linexData, lineyData, lineyData2, lineyData3)
+ }
+ $("#depotList").html(html);
+
+ //鍒濆鍖栦笁娓╁浘
+ $.each(depotList, function (index, item) {
+ initLineEchart('lineChart' + index, linexData, lineyData, lineyData2, lineyData3);
+ })
var swiper = new Swiper('.m-swiperl2 .swiper', {
slidesPerView: 1,
@@ -175,7 +107,11 @@
// delay: 2500,
// disableOnInteraction: false,
// },
- // loop: true,
+ loop: true,
+ autoplay:{
+ delay: 5000,
+ disableOnInteraction: false
+ },
pagination: {
el: '.g-swbtnl .swiper-pagination',
type: 'fraction',
@@ -185,4 +121,163 @@
prevEl: '.g-swbtnl .swiper-button-prev',
},
});
-});
\ No newline at end of file
+});
+
+function initLineEchart(id, xData, yData, yData2, yData3) {
+ var echart = null
+ var dom = document.getElementById(id);
+ echart = echarts.init(dom);
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ legend: {
+ right: '0',
+ top: '2%',
+ itemWidth: 12,
+ itemHeight: 12,
+ icon: 'circle',
+ textStyle: {
+ color: '#91ceff',
+ fontSize: 18,
+ paddingLeft: 5,
+ }
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '0',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: "category",
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.6)",
+ width: 1
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ color: "#fff",
+ fontSize: 20,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(255,255,255,.2)",
+ }
+ },
+ data: xData
+ },
+ yAxis: [{
+ name: '(掳C)',
+ min: 0,
+ max: 40,
+ interval: 10,
+ nameTextStyle: {
+ color: 'rgba(145,206,255,.5)',
+ fontSize: 18,
+ padding: [0, 0, 5, -30]
+ },
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#91ceff", //X杞存枃瀛楅鑹�
+ fontSize: 18,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: "rgba(255,255,255,.3)",
+ }
+ },
+ }],
+ series: [{
+ name: '绮珮娓�',
+ type: 'line',
+ symbol: 'none',
+ color: '#ffd12b',
+ lineStyle: {
+ width: 3
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(255, 209, 43,0.3)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(255, 209, 43,0)'
+ },
+ ]),
+ },
+ label: {
+ show: false,
+ },
+ data: yData,
+ },
+ {
+ name: '绮潎娓�',
+ type: 'line',
+ symbol: 'none',
+ color: '#02afff',
+ lineStyle: {
+ width: 3
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(2, 175, 255, .3)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(2, 175, 255,0)'
+ },
+ ]),
+ },
+ label: {
+ show: false,
+ },
+ data: yData2,
+ },
+ {
+ name: '绮綆娓�',
+ type: 'line',
+ symbol: 'none',
+ color: '#39ff02',
+ lineStyle: {
+ width: 3
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(97,154,82)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(2, 175, 255,0)'
+ },
+ ]),
+ },
+ label: {
+ show: false,
+ },
+ data: yData3,
+ }]
+ };
+ if (option && typeof option === "object") {
+ echart.setOption(option, true);
+ }
+}
\ No newline at end of file
--
Gitblit v1.9.3