From bd3c4b90882fc29711a5e73f4929db2da3e22cb6 Mon Sep 17 00:00:00 2001
From: sgj <1442489573@qq.com>
Date: 星期五, 06 三月 2026 11:14:11 +0800
Subject: [PATCH] 建模gis监管页面样式修改
---
fzzy-igdss-web/src/main/resources/templates/main.html | 302 ++++++++++++++++---------------------------------
1 files changed, 99 insertions(+), 203 deletions(-)
diff --git a/fzzy-igdss-web/src/main/resources/templates/main.html b/fzzy-igdss-web/src/main/resources/templates/main.html
index 8254650..d7b7225 100644
--- a/fzzy-igdss-web/src/main/resources/templates/main.html
+++ b/fzzy-igdss-web/src/main/resources/templates/main.html
@@ -94,7 +94,7 @@
<div class="layui-row layui-col-space15 p-top">
<div class="layui-col-sm3 layui-col-xs6">
<div class="console-link-block">
- <div class="console-link-block-num">2</div>
+ <div class="console-link-block-num" th:text="${mainData.orderNum}">2</div>
<div class="console-link-block-text">寰呭姙宸ュ崟</div>
<i class="console-link-block-icon layui-icon layui-icon-survey"></i>
<div class="console-link-block-band">寰呭鐞�</div>
@@ -102,15 +102,15 @@
</div>
<div class="layui-col-sm3 layui-col-xs6">
<div class="console-link-block">
- <div class="console-link-block-num">0</div>
+ <div class="console-link-block-num" th:text="${mainData.inSum}">0</div>
<div class="console-link-block-text">浠婃棩鍏ュ簱锛堝惃锛�</div>
<i class="console-link-block-icon layui-icon layui-icon-form"></i>
<div class="console-link-block-band">鍘绘煡鐪�</div>
</div>
</div>
- <div class="layui-col-sm3 layui-col-xs6">
+ <div class="layui-col-sm3 layui-col-xs6">
<div class="console-link-block">
- <div class="console-link-block-num">0</div>
+ <div class="console-link-block-num" th:text="${mainData.outSum}">0</div>
<div class="console-link-block-text">浠婃棩鍑哄簱锛堝惃锛�</div>
<i class="console-link-block-icon layui-icon layui-icon-form"></i>
<div class="console-link-block-band">鍘绘煡鐪�</div>
@@ -118,7 +118,7 @@
</div>
<div class="layui-col-sm3 layui-col-xs6">
<div class="console-link-block">
- <div class="console-link-block-num">0</div>
+ <div class="console-link-block-num" th:text="${mainData.aiNum}">0</div>
<div class="console-link-block-text">AI浜嬩欢锛堣繎7澶╋級</div>
<i class="console-link-block-icon layui-icon layui-icon-chart"></i>
<div class="console-link-block-band">鍘绘煡鐪�</div>
@@ -131,12 +131,9 @@
<div class="layui-row layui-col-space15">
<div class="layui-col-md4 layui-col-sm6">
<div class="layui-card" style="overflow: hidden;">
- <div class="layui-card-header">鏃ュ嚭搴撶粺璁�</div>
+ <div class="layui-card-header">鏃ュ嚭鍏ュ簱缁熻</div>
<div class="layui-card-body">
<div id="consoleChartsDay" style="height: 300px;"></div>
- <div style="color: #10B4E8;font-size: 18px;position: absolute;bottom: 85px;left: 0;right:0;text-align: center;cursor: pointer;">
- 鍑哄叆搴撴槑缁�<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>
- </div>
</div>
</div>
</div>
@@ -157,68 +154,19 @@
</div>
</div>
</div>
-
-
- <div class="layui-col-md4 layui-col-sm6">
- <div class="layui-card" style="overflow: hidden;">
- <div class="layui-card-header">鐑棬鎼滅储</div>
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">杩�7澶〢I浜嬩欢缁熻</div>
<div class="layui-card-body">
- <div id="consoleChartsWord" style="height: 300px;"></div>
+ <div id="aiChartsWeek" style="height: 300px;"></div>
</div>
</div>
</div>
- <div class="layui-col-md8 layui-col-sm12">
- <div class="layui-card" style="overflow: hidden;">
- <div class="layui-card-header">鐢ㄦ埛鍒嗗竷</div>
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">杩�7澶╂姄鎷嶇粺璁�</div>
<div class="layui-card-body">
- <div class="layui-row">
- <div class="layui-col-md8 layui-col-sm7">
- <div id="consoleChartsMap" style="height: 300px;"></div>
- </div>
- <div class="layui-col-md4 layui-col-sm5">
- <table class="layui-table" lay-skin="line" style="margin-top: 15px;">
- <thead>
- <tr>
- <td>鎺掑悕</td>
- <td>鍦板尯</td>
- <td>浜烘暟</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>娴欐睙</td>
- <td>62310</td>
- </tr>
- <tr>
- <td>2</td>
- <td>涓婃捣</td>
- <td>59190</td>
- </tr>
- <tr>
- <td>3</td>
- <td>骞夸笢</td>
- <td>55891</td>
- </tr>
- <tr>
- <td>4</td>
- <td>鍖椾含</td>
- <td>51919</td>
- </tr>
- <tr>
- <td>5</td>
- <td>灞变笢</td>
- <td>39231</td>
- </tr>
- <tr>
- <td>6</td>
- <td>婀栧寳</td>
- <td>37109</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
+ <div id="snapChartsWeek" style="height: 300px;"></div>
</div>
</div>
</div>
@@ -226,11 +174,11 @@
</div>
<!-- js閮ㄥ垎 -->
<script th:src="@{/ajax/libs/layui-ruoyi/layui.js}"></script>
-<!--<script src="${ctxPath}/assets/js/common.js"></script>-->
<script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
<script th:src="@{/ajax/libs/echarts/china.js}"></script>
<script th:src="@{/ajax/libs/echarts/echarts-wordcloud.min.js}"></script>
-<script>
+<script th:inline="javascript">
+ var mainData = [[${mainData}]];
layui.use(['layer'], function () {
var $ = layui.jquery;
var layer = layui.layer;
@@ -239,7 +187,7 @@
var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
var options1 = {
title: {
- text: '鍏ュ簱鏁伴噺/鍑哄簱鏁伴噺', x: 'center', y: '32%',
+ text: '鍏ュ簱杞︽/鍑哄簱杞︽', x: 'center', y: '32%',
textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'},
subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
},
@@ -247,14 +195,14 @@
tooltip: {trigger: 'item'},
legend: {
orient: 'vertical', right: '0px', top: '0px',
- data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'], textStyle: {color: '#595959'}
+ data: ['鍏ュ簱杞︽', '鍑哄簱杞︽'], textStyle: {color: '#595959'}
},
series: [{name: '鏁伴噺', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}]
};
myCharts1.setOption(options1);
// 璧嬪��
myCharts1.setOption({
- title: {subtext: '38/60'}, series: [{data: [{name: '鍏ュ簱鏁伴噺', value: 38}, {name: '鍑哄簱鏁伴噺', value: 22}]}]
+ title: {subtext: mainData.inNumDay + "/" + mainData.outNumDay}, series: [{data: [{name: '鍏ュ簱杞︽', value: mainData.inNumDay}, {name: '鍑哄簱杞︽', value: mainData.outNumDay}]}]
});
/** 娓叉煋鍛ㄧ粺璁″浘琛� */
@@ -264,14 +212,14 @@
color: ['#10B4E8', '#FFA800'],
legend: {
orient: 'vertical', right: '0px', top: '0px',
- data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'], textStyle: {color: '#595959'}
+ data: ['鍏ュ簱杞︽', '鍑哄簱杞︽'], textStyle: {color: '#595959'}
},
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
xAxis: {
- name: '鏄熸湡',
+ name: '鏃ユ湡',
nameTextStyle: {color: '#595959'},
type: 'category',
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲'],
+ data: mainData.weekDateList,
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
axisLabel: {color: '#8c8c8c'},
axisTick: {alignWithLabel: true}
@@ -289,16 +237,16 @@
minInterval: 1
},
series: [{
- name: '鍏ュ簱鏁伴噺', type: 'bar', stack: 'one', barMaxWidth: '30px',
+ name: '鍏ュ簱杞︽', type: 'bar', stack: 'one', barMaxWidth: '30px',
label: {normal: {show: true, position: 'inside'}}
}, {
- name: '鍑哄簱鏁伴噺', type: 'bar', stack: 'one', barMaxWidth: '30px',
+ name: '鍑哄簱杞︽', type: 'bar', stack: 'one', barMaxWidth: '30px',
label: {normal: {show: true, position: 'inside'}}
}]
};
myCharts2.setOption(options2);
// 璧嬪��
- myCharts2.setOption({series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]});
+ myCharts2.setOption({series: [{data: mainData.weekInNumList}, {data: mainData.weekOutNumList}]});
/** 娓叉煋鏈堢粺璁″浘琛� */
var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
@@ -311,14 +259,14 @@
color: ['#10B4E8', '#FFA800'],
legend: {
orient: 'vertical', right: '0px', top: '0px',
- data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'], textStyle: {color: '#595959'}
+ data: ['鍏ュ簱杞︽', '鍑哄簱杞︽'], textStyle: {color: '#595959'}
},
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
xAxis: {
name: '鏃ユ湡',
nameTextStyle: {color: '#595959'},
type: 'category',
- data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+ data: mainData.monthDateList,
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
axisLabel: {
color: '#8c8c8c', interval: function (index, value) {
@@ -340,151 +288,98 @@
minInterval: 1
},
series: [
- {name: '鍏ュ簱鏁伴噺', type: 'line', smooth: false},
- {name: '鍑哄簱鏁伴噺', type: 'line', smooth: false}
+ {name: '鍏ュ簱杞︽', type: 'line', smooth: false},
+ {name: '鍑哄簱杞︽', type: 'line', smooth: false}
]
};
myCharts3.setOption(options3);
// 璧嬪��
myCharts3.setOption({
series: [
- {data: [15, 14, 13, 13, 13, 14, 15, 16, 17, 18, 19, 18, 18, 19, 20, 19, 18, 16, 14, 12, 10, 10, 12, 14, 16, 16, 14, 13, 12, 11, 10]},
- {data: [24, 22, 20, 18, 16, 14, 13, 12, 11, 11, 10, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 23, 24, 25, 26, 26, 24, 22, 20, 18, 16]}
+ {data: mainData.monthInNumList},
+ {data: mainData.monthOutNumList}
]
});
- /** 娓叉煋鍦板浘鍥捐〃 */
- var myCharts4 = echarts.init(document.getElementById('consoleChartsMap'));
+ /** 娓叉煋鍛ㄧ粺璁″浘琛� */
+ var myCharts4 = echarts.init(document.getElementById('aiChartsWeek'));
var options4 = {
- tooltip: {trigger: 'item'},
- dataRange: {
- min: 0, max: 6e4, text: ['楂�', '浣�'], color: ['#2395FF', '#f2f2f2'], itemHeight: 60, itemWidth: 12
- }, series: [{
- name: '鍑哄簱鏁伴噺', type: 'map', mapType: "china",
- itemStyle: {normal: {label: {show: true, color: '#262626'}, borderColor: '#dddddd'}},
- emphasis: {label: {show: true, color: '#fff'}, itemStyle: {areaColor: '#FACF20'}},
- top: '0px', left: '15px', bottom: '0px'
+ tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
+ color: ['#10B4E8'],
+ legend: {
+ orient: 'vertical', right: '0px', top: '0px',
+ data: ['AI浜嬩欢鏁�'], textStyle: {color: '#595959'}
+ },
+ grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
+ xAxis: {
+ name: '鏃ユ湡',
+ nameTextStyle: {color: '#595959'},
+ type: 'category',
+ data: mainData.weekAiDateList,
+ axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
+ axisLabel: {color: '#8c8c8c'},
+ axisTick: {alignWithLabel: true}
+ },
+ yAxis: {
+ name: '鏁伴噺',
+ nameTextStyle: {color: '#595959'},
+ type: 'value',
+ boundaryGap: ['0', '20%'],
+ axisTick: {show: false},
+ axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
+ axisLabel: {color: '#8c8c8c'},
+ splitLine: {show: false},
+ splitArea: {show: false},
+ minInterval: 1
+ },
+ series: [{
+ name: 'AI浜嬩欢', type: 'bar', stack: 'one', barMaxWidth: '30px',
+ label: {normal: {show: true, position: 'inside'}}
}]
};
myCharts4.setOption(options4);
// 璧嬪��
- myCharts4.setOption({
- series: [{
- data: [
- {name: "瑗胯棌", value: 60},
- {name: "闈掓捣", value: 167},
- {name: "瀹佸", value: 210},
- {name: "娴峰崡", value: 252},
- {name: "鐢樿們", value: 502},
- {name: "璐靛窞", value: 570},
- {name: "鏂扮枂", value: 661},
- {name: "浜戝崡", value: 8890},
- {name: "閲嶅簡", value: 10010},
- {name: "鍚夋灄", value: 5056},
- {name: "灞辫タ", value: 2123},
- {name: "澶╂触", value: 9130},
- {name: "姹熻タ", value: 10170},
- {name: "骞胯タ", value: 6172},
- {name: "闄曡タ", value: 9251},
- {name: "榛戦緳姹�", value: 5125},
- {name: "鍐呰挋鍙�", value: 1435},
- {name: "瀹夊窘", value: 9530},
- {name: "鍖椾含", value: 51919},
- {name: "绂忓缓", value: 3756},
- {name: "涓婃捣", value: 59190},
- {name: "婀栧寳", value: 37109},
- {name: "婀栧崡", value: 8966},
- {name: "鍥涘窛", value: 31020},
- {name: "杈藉畞", value: 7222},
- {name: "娌冲寳", value: 3451},
- {name: "娌冲崡", value: 9693},
- {name: "娴欐睙", value: 62310},
- {name: "灞变笢", value: 39231},
- {name: "姹熻嫃", value: 35911},
- {name: "骞夸笢", value: 55891}
- ]
- }]
- });
+ myCharts4.setOption({series: [{data: mainData.weekAiNumList}]});
- /** 娓叉煋璇嶄簯鍥捐〃 */
- var myCharts5 = echarts.init(document.getElementById('consoleChartsWord'));
+ /** 娓叉煋鍛ㄧ粺璁″浘琛� */
+ var myCharts5 = echarts.init(document.getElementById('snapChartsWeek'));
var options5 = {
- tooltip: {show: true},
+ tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
+ color: ['#FFA800'],
+ legend: {
+ orient: 'vertical', right: '0px', top: '0px',
+ data: ['鎶撴媿鏁�'], textStyle: {color: '#595959'}
+ },
+ grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
+ xAxis: {
+ name: '鏃ユ湡',
+ nameTextStyle: {color: '#595959'},
+ type: 'category',
+ data: mainData.weekSnapDateList,
+ axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
+ axisLabel: {color: '#8c8c8c'},
+ axisTick: {alignWithLabel: true}
+ },
+ yAxis: {
+ name: '鏁伴噺',
+ nameTextStyle: {color: '#595959'},
+ type: 'value',
+ boundaryGap: ['0', '20%'],
+ axisTick: {show: false},
+ axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
+ axisLabel: {color: '#8c8c8c'},
+ splitLine: {show: false},
+ splitArea: {show: false},
+ minInterval: 1
+ },
series: [{
- name: "鎼滅储閲�",
- type: 'wordCloud',
- shape: 'diamond',
- width: '100%',
- height: '100%',
- sizeRange: [12, 23],
- gridSize: 6,
- textStyle: {
- normal: {
- color: function () {
- return 'rgb(' + [
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160)
- ].join(',') + ')';
- }
- },
- emphasis: {shadowBlur: 10, shadowColor: '#666'}
- }, data: []
+ name: '鎶撴媿淇℃伅', type: 'bar', stack: 'one', barMaxWidth: '30px',
+ label: {normal: {show: true, position: 'inside'}}
}]
};
myCharts5.setOption(options5);
// 璧嬪��
- myCharts5.setOption({
- series: [{
- data: [
- {name: "杞瀛�", value: 23},
- {name: "姹槦浜�", value: 23},
- {name: "闀胯吙娆у反", value: 23},
- {name: "钀濊帀", value: 22},
- {name: "杈", value: 22},
- {name: "K姝�", value: 22},
- {name: "澶ч暱鑵�", value: 21},
- {name: "宸濆瀛�", value: 21},
- {name: "濂崇", value: 21},
- {name: "绫崇矇", value: 20},
- {name: "涓撴敞璁捐", value: 20},
- {name: "閫涜", value: 20},
- {name: "榛戦暱鐩�", value: 20},
- {name: "娴风撼鐧惧窛", value: 19},
- {name: "钀岃悓鍝�", value: 19},
- {name: "鍧氭寔", value: 19},
- {name: "璇濆敔", value: 19},
- {name: "鏋滅矇", value: 18},
- {name: "鍠垫槦浜�", value: 18},
- {name: "鑺辩矇", value: 18},
- {name: "琛～鎺�", value: 18},
- {name: "瀹呯敺", value: 17},
- {name: "灏忔竻鏂�", value: 17},
- {name: "鐪奸暅鐢�", value: 17},
- {name: "鐞肩懚", value: 17},
- {name: "绌锋父鍏�", value: 16},
- {name: "閾插睅瀹�", value: 16},
- {name: "姝ｅお", value: 16},
- {name: "涓簩鐥�", value: 16},
- {name: "澶滅尗瀛�", value: 15},
- {name: "閫楁瘮", value: 15},
- {name: "鑵归粦", value: 15},
- {name: "鍚冮浮", value: 15},
- {name: "涓轰簡鑱旂洘", value: 14},
- {name: "鑳屽寘瀹�", value: 14},
- {name: "姘戣埃", value: 14},
- {name: "涓轰簡閮ㄨ惤", value: 14},
- {name: "鎳掔檶鎮ｈ��", value: 13},
- {name: "杩藉墽", value: 13},
- {name: "IT姘戝伐", value: 13},
- {name: "CNB鎴愬憳", value: 13},
- {name: "閫夋嫨鍥伴毦", value: 12},
- {name: "閿ょ矇", value: 12},
- {name: "娆х殗", value: 12},
- {name: "浠欐皵鍗佽冻", value: 12}
- ]
- }]
- });
+ myCharts5.setOption({series: [{data: mainData.weekSnapNumList}]});
/** 绐楀彛澶у皬鏀瑰彉浜嬩欢 */
window.onresize = function () {
@@ -496,6 +391,7 @@
};
});
+
</script>
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.3