Skip to content

O
ocrCloudPlatformAdmin
Commit 2a76d5b0 by 杨琪琪
Options

ocr调用折线图修改legend过长挡住title，定时调用折线数据

parent ca5b28dd
Showing with 71 additions and 51 deletions
src/main/resources/static/js/callSupervision/callChartOptions.js
...@@ -19,6 +19,10 @@ var defaultLineOptions = { ...@@ -19,6 +19,10 @@ var defaultLineOptions = {
color: "#fff", color: "#fff",
fontSize: 13, fontSize: 13,
}, },
type: 'scroll',
orient: 'horizontal', // vertical
// left: 10,
top: '6%',
}, },
xAxis: { xAxis: {
type: 'time', type: 'time',
......
src/main/resources/templates/callSupervision/index.html
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
<div class="layui-col-xs12" style="height: 100%"> <div class="layui-col-xs12" style="height: 100%">
<div id="row-form" class="content-box box-border" <div id="row-form" class="content-box box-border"
style="width: calc(100% - 20px);height: calc(100% - 20px)"> style="width: calc(100% - 20px);height: calc(100% - 20px)">
<form class="layui-form layui-row layui-col-space10" lay-filter="areaForm"> <form class="layui-form layui-row layui-col-space10" lay-filter="areaForm" autocomplete="off">
<div class="layui-form-item layui-col-xs1" style="text-align: center"> <div class="layui-form-item layui-col-xs1" style="text-align: center">
<input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市" <input type="checkbox" name="isRegion" value="true" lay-skin="switch" lay-text="全区|地市"
lay-filter="area"> lay-filter="area">
...@@ -175,6 +175,11 @@ ...@@ -175,6 +175,11 @@
var currMonth = new Date().strftime('%m'); var currMonth = new Date().strftime('%m');
var currDate = new Date().strftime('%d'); var currDate = new Date().strftime('%d');
var monitorInterval = null; var monitorInterval = null;
var brokenLineInterval = null;
var datazoom_start_n = 0;
var datazoom_end_n = 100;
var datazoom_broken_start_n = 0;
var datazoom_broken_end_n = 100;
// 确保layui和echarts已经加载 // 确保layui和echarts已经加载
layui.config({ layui.config({
...@@ -208,7 +213,7 @@ ...@@ -208,7 +213,7 @@
// 全区/地市 切换监听 // 全区/地市 切换监听
form.on('switch(area)', function (data) { form.on('switch(area)', function (data) {
getBrokenLineData(); restartBrokenLineInterval();
}); });
// 时间选择器初始 // 时间选择器初始
...@@ -220,7 +225,7 @@ ...@@ -220,7 +225,7 @@
showBottom: false, showBottom: false,
// max: new Date(), // max: new Date(),
done: function (value, date, endDate) { done: function (value, date, endDate) {
getBrokenLineData(); restartBrokenLineInterval();
} }
}); });
laydate.render({ laydate.render({
...@@ -237,7 +242,7 @@ ...@@ -237,7 +242,7 @@
}); });
$('.interval-box').css('display', 'none') $('.interval-box').css('display', 'none')
} }
getBrokenLineData(); restartBrokenLineInterval();
} }
}); });
laydate.render({ laydate.render({
...@@ -259,17 +264,17 @@ ...@@ -259,17 +264,17 @@
}); });
$('.interval-box').css('display', 'none') $('.interval-box').css('display', 'none')
} }
getBrokenLineData(); restartBrokenLineInterval(true);
} }
}); });
//时分秒选择框 //时分秒选择框
form.on('radio(radio-time)', function (data) { form.on('radio(radio-time)', function (data) {
let val = data.value; restartBrokenLineInterval();
getBrokenLineData()
}); });
getBrokenLineData(); getBrokenLineData();
restartBrokenLineInterval();
getServerMonitoring(true); getServerMonitoring(true);
monitorInterval = setInterval(function () { monitorInterval = setInterval(function () {
getServerMonitoring(); getServerMonitoring();
...@@ -327,6 +332,14 @@ ...@@ -327,6 +332,14 @@
table.resize('callTable'); table.resize('callTable');
}); });
// table高度自适应
function adjustTableHeight() {
let tableHeight = $('#tableContent').height();
let headerHeight = $('.layui-table-header').height();
$(".layui-table-main").css("height", (tableHeight - headerHeight) + "px");
table.resize('callTable');
}
function initChart(chartId, type, key) { function initChart(chartId, type, key) {
window[key] = echarts.init(document.getElementById(chartId)) window[key] = echarts.init(document.getElementById(chartId))
var option = {}; var option = {};
...@@ -369,7 +382,16 @@ ...@@ -369,7 +382,16 @@
legendData.push(k); legendData.push(k);
} }
} }
timeLineChart.clear(); timeLineChart.on('dataZoom', function (event) {
if (event.batch) {
datazoom_broken_start_n = event.batch[0].start
datazoom_broken_end_n = event.batch[0].end
} else {
datazoom_broken_start_n = event.start
datazoom_broken_end_n = event.end
}
})
// timeLineChart.clear();
let option = defaultLineOptions; let option = defaultLineOptions;
if (showLegend) { if (showLegend) {
option.legend.data = legendData; option.legend.data = legendData;
...@@ -395,6 +417,10 @@ ...@@ -395,6 +417,10 @@
option.xAxis.minInterval = 1000 * 3600 * 24; option.xAxis.minInterval = 1000 * 3600 * 24;
break break
} }
option.dataZoom[0].start = datazoom_broken_start_n;
option.dataZoom[0].end = datazoom_broken_end_n;
option.dataZoom[1].start = datazoom_broken_start_n;
option.dataZoom[1].end = datazoom_broken_end_n;
timeLineChart.setOption(option, true); timeLineChart.setOption(option, true);
} }
...@@ -443,6 +469,19 @@ ...@@ -443,6 +469,19 @@
}) })
} }
// 重新计时
function restartBrokenLineInterval() {
datazoom_broken_start_n = 0;
datazoom_broken_end_n = 100;
getBrokenLineData();
if (brokenLineInterval) {
clearInterval(brokenLineInterval)
}
brokenLineInterval = setInterval(function () {
getBrokenLineData();
}, 5000)
}
// 获取法院调用排名 // 获取法院调用排名
function getCourtUseSum() { function getCourtUseSum() {
axios({ axios({
...@@ -545,14 +584,6 @@ ...@@ -545,14 +584,6 @@
}) })
} }
// table高度自适应
function adjustTableHeight() {
let tableHeight = $('#tableContent').height();
let headerHeight = $('.layui-table-header').height();
$(".layui-table-main").css("height", (tableHeight - headerHeight) + "px");
table.resize('callTable');
}
// 按钮点击事件 // 按钮点击事件
$("#exportAll").click(function () { $("#exportAll").click(function () {
downloadFile('各法院调用统计.xlsx'); downloadFile('各法院调用统计.xlsx');
...@@ -611,6 +642,7 @@ ...@@ -611,6 +642,7 @@
}) })
} }
// 自定义事件监听
util.on('lay-on', { util.on('lay-on', {
'pre-all-page-wrap': function () { 'pre-all-page-wrap': function () {
openDialog('各法院总调用统计详情') openDialog('各法院总调用统计详情')
...@@ -660,38 +692,6 @@ ...@@ -660,38 +692,6 @@
table.render({ table.render({
elem: '#samples', elem: '#samples',
url: gatewayUrl + '/appAbilityRecordAll/showCallRecord', //数据接口 url: gatewayUrl + '/appAbilityRecordAll/showCallRecord', //数据接口
// data: [
// {
// name: "广西高院",
// cs_name: "北投",
// num: 123,
// pNum: 34
// },
// {
// name: "广西高院",
// cs_name: "华宇",
// num: 123,
// pNum: 34
// },
// {
// name: "广西高院",
// cs_name: "oa",
// num: 123,
// pNum: 34
// },
// {
// name: "南宁高院",
// cs_name: "华宇",
// num: 123,
// pNum: 34
// },
// {
// name: "南宁高院",
// cs_name: "北投",
// num: 123,
// pNum: 34
// },
// ],
page: false, page: false,
where: params ? params : {}, where: params ? params : {},
parseData: function (res) { // res 即为原始返回的数据 parseData: function (res) { // res 即为原始返回的数据
...@@ -716,7 +716,6 @@ ...@@ -716,7 +716,6 @@
// totalRow: true, // 是否开启合计行区域 // totalRow: true, // 是否开启合计行区域
cols, cols,
done: function (res, curr, count) { done: function (res, curr, count) {
console.log(' --- 数据渲染完毕 --- ', res)
merge(res);//调用 merge(res);//调用
} }
}); });
...@@ -724,6 +723,7 @@ ...@@ -724,6 +723,7 @@
}); });
} }
// table合并行
function merge(res) { function merge(res) {
var data = res.data; var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数 var mergeIndex = 0;//定位需要添加合并属性的行数
...@@ -774,9 +774,22 @@ ...@@ -774,9 +774,22 @@
function updateYBarChart(source, flag) { function updateYBarChart(source, flag) {
// hardwareBarChart.clear(); // hardwareBarChart.clear();
let option_o = hardwareBarChart.getOption(); // let option_o = hardwareBarChart.getOption();
console.log(' --- 当前监控图表配置 --- ', option_o) hardwareBarChart.on('dataZoom', function (event) {
console.log(' --- datazoom --- ', event)
if (event.batch) {
datazoom_start_n = event.batch[0].start
datazoom_end_n = event.batch[0].end
} else {
datazoom_start_n = event.start
datazoom_end_n = event.end
}
})
let option = defaultYBarOptions; let option = defaultYBarOptions;
option.dataZoom[0].start = datazoom_start_n;
option.dataZoom[0].end = datazoom_end_n;
option.dataZoom[1].start = datazoom_start_n;
option.dataZoom[1].end = datazoom_end_n;
option.dataset.source = source; option.dataset.source = source;
if (flag) { if (flag) {
let len = source[0].length - 1; let len = source[0].length - 1;
...@@ -803,6 +816,9 @@ ...@@ -803,6 +816,9 @@
if (monitorInterval) { if (monitorInterval) {
clearInterval(monitorInterval) clearInterval(monitorInterval)
} }
if (brokenLineInterval) {
clearInterval(brokenLineInterval)
}
window.removeEventListener('resize', function () { window.removeEventListener('resize', function () {
if (timeLineChart && timeLineChart.resize) { if (timeLineChart && timeLineChart.resize) {
timeLineChart.resize(); timeLineChart.resize();
......
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