Skip to content

O
ocrCloudPlatformAdmin
Commit 912d1bba by 杨琪琪
Options

添加调用监察页；layui集成echarts

parent c226ed2e
Showing with 180 additions and 0 deletions
src/main/java/com/mailu/ocrCloudPlatformAdmin/controller/ViewController.java
...@@ -407,4 +407,10 @@ public class ViewController { ...@@ -407,4 +407,10 @@ public class ViewController {
modelMap.put("gatewayUrl", gatewayUrl); modelMap.put("gatewayUrl", gatewayUrl);
return "api/testPage"; return "api/testPage";
} }
@RequestMapping("/callSupervision")
public String testUrl(ModelMap modelMap) {
modelMap.put("gatewayUrl", gatewayUrl);
return "callSupervision/index";
}
} }
src/main/resources/static/js/echarts/echarts.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main/resources/static/js/echarts/echarts.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main/resources/static/js/echarts/echarts.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main/resources/templates/callSupervision/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath()}+'/'">
<meta charset="UTF-8">
<title>testUrl</title>
<link rel="stylesheet" href="newLayui/css/layui.css" media="all">
<script src="newLayui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts/echarts.js"></script>
<style>
body {
width: 100%;
height: 100%;
background: #fff;
}
.layui-form {
display: flex;
flex-direction: row;
align-items: center;
}
.layui-form-item {
margin-bottom: 0 !important;
}
.layui-input-block {
margin-left: 15px;
}
.layui-form-switch {
margin-top: 0 !important;
}
</style>
</head>
<body>
<div class="layui-layout">
<div class="chart-one">
<form class="layui-form" lay-filter="areaForm">
<div class="layui-form-item">
<input type="checkbox" name="isRegion" value="isRegion" lay-skin="switch" lay-text="全区|地市"
lay-filter="area">
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" lay-filter="time" name="time" value="hh" title="时">
<input type="radio" lay-filter="time" name="time" value="mm" title="分" checked>
<!-- <input type="radio" lay-filter="time" name="time" value="ss" title="秒">-->
</div>
</div>
</form>
<div id="first-chart" style="width: 100%; height: 400px;"></div>
</div>
</div>
</body>
<script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]];
</script>
<script>
var regionLegend = ['昨日', '今日']
var areaLegend = ['南宁', '柳州', '玉林', '桂林']
// 确保layui和echarts已经加载
layui.config({
base: '/js/echarts/' //假设这是你存放拓展模块的根目录
}).use(['echarts', 'form'], function () {
var echarts = layui.echarts;
var form = layui.form;
getCorrelationData();
// 表单初始赋值
form.val('areaForm', {
isRegion: true
})
// 全区/地市 切换监听
form.on('switch(area)', function (data) {
console.log(' --- 是否切换全区数据 --- ', data.elem.checked)
// initLineChart(dataList,xLine,chartLegend);
});
});
function initLineChart(dataObject, xLine, legend) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('first-chart'));
var series = [];
console.log(' --- 当前Y轴数据 --- ', dataObject)
if (dataObject && Object.keys(dataObject).length != 0) {
for (var k in dataObject) {
var obj = {};
obj['type'] = 'line';
obj['name'] = k;
obj['data'] = dataObject[k]
series.push(obj)
}
}
console.log(' --- series --- ', series);
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xLine
},
yAxis: {
type: 'value',
min: 0,
minInterval: 1,
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20
},
{
start: 0,
end: 20
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
window.onresize = function () {
myChart.resize();
}
}
// 获取全区数据
function getCorrelationData() {
$.ajax({
url: gatewayUrl + '/appAbilityRecordAll/getCorrelationData?day1=2024-01-23&day2=2024-01-24',
type: 'get',
success: function (res) {
if (res.success) {
var nDay = JSON.parse(JSON.stringify(res.data.day1));
var timeArr = [];
var YArrObject = {};
for (var i = 0; i < nDay.length; i++) {
timeArr = nDay.map(function (item) {
return item['time']
})
YArrObject['今日'] = nDay.map(function (item) {
return item['value']
})
}
initLineChart(YArrObject, timeArr);
}
}
});
}
// 获取地市数据
function getAreaData() {
initLineChart(YArr, timeArr);
}
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment