Skip to content

O
ocrCloudPlatformAdmin
Commit ca5b28dd by 杨琪琪
Options

添加各法院调用量详情弹窗，对接表格

parent b1a4f713
Showing with 133 additions and 75 deletions
src/main/resources/static/css/callSupervision.css
.layui-form { #row-form > .layui-form {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.layui-form-item { #row-form .layui-form-item {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.layui-input-block { #row-form .layui-input-block {
margin-left: 15px; margin-left: 15px;
} }
.layui-form-switch { #row-form .layui-form-switch {
margin-top: 0 !important; margin-top: 0 !important;
} }
.layui-input-block { #row-form .layui-input-block {
color: #fff !important; color: #fff !important;
} }
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
width: 100%; width: 100%;
} }
.layui-table { #tableContent > .layui-table-view > .layui-table-box .layui-table {
background-color: #b3b3b30d; background-color: #b3b3b30d;
color: #2d6aea; color: #2d6aea;
} }
...@@ -75,20 +75,20 @@ ...@@ -75,20 +75,20 @@
margin: 0; margin: 0;
} }
#tableContent > .layui-table thead tr { #tableContent > .layui-table-view > .layui-table-box > .layui-table-body > .layui-table tbody tr:hover {
background-color: #a1b9fd24; background-color: #a1b9fd24;
border-color: #323232; border-color: #323232;
} }
#tableContent > .layui-table tbody tr:hover { #tableContent > .layui-table-view > .layui-table-box > .layui-table-header {
background-color: #a1b9fd24;
}
#tableContent > .layui-table-header {
background-color: #b3b3b30d; background-color: #b3b3b30d;
border-color: #323232;
} }
#tableContent > .layui-table td,#tableContent > .layui-table th,#tableContent > .layui-table-header { #tableContent > .layui-table-view > .layui-table-box > .layui-table-body > .layui-table td,
#tableContent > .layui-table-view > .layui-table-box > .layui-table-body > .layui-table th,
#tableContent > .layui-table-view > .layui-table-box > .layui-table-header > .layui-table th,
#tableContent > .layui-table-view > .layui-table-box > .layui-table-body > .layui-table-header {
border-color: #323232; border-color: #323232;
} }
...@@ -113,10 +113,16 @@ ...@@ -113,10 +113,16 @@
} }
/* 隐藏时间选择器顶部的切换按钮 */ /* 隐藏时间选择器顶部的切换按钮 */
#layui-laydate2 .laydate-prev-y, #layui-laydate2 .laydate-next-y, #layui-laydate2 .laydate-prev-m#layui-laydate2, .laydate-next-m { #layui-laydate2 .laydate-prev-y,
.laydate-next-y,
.laydate-prev-m,
.laydate-next-m {
display: none !important; display: none !important;
} }
#layui-laydate3 .laydate-prev-y, .laydate-next-y, .laydate-prev-m, .laydate-next-m { #layui-laydate3 .laydate-prev-y,
.laydate-next-y,
.laydate-prev-m,
.laydate-next-m {
display: none !important; display: none !important;
} }
src/main/resources/templates/callSupervision/index.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportAll"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportAll">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" lay-on="test-page-wrap" title="预览" <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-all-page-wrap" title="预览"
id="previewAll"> id="previewAll">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>
</button> </button>
...@@ -48,7 +48,8 @@ ...@@ -48,7 +48,8 @@
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportYear"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportYear">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewYear"> <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-year-page-wrap" title="预览"
id="previewYear">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>
</button> </button>
</div> </div>
...@@ -64,7 +65,8 @@ ...@@ -64,7 +65,8 @@
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportMonth"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportMonth">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewMonth"> <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-month-page-wrap" title="预览"
id="previewMonth">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>
</button> </button>
</div> </div>
...@@ -80,7 +82,8 @@ ...@@ -80,7 +82,8 @@
<button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportDay"> <button type="button" class="layui-btn layui-btn-xs" title="导出" id="exportDay">
<i class="layui-icon layui-icon-download-circle"></i> <i class="layui-icon layui-icon-download-circle"></i>
</button> </button>
<button type="button" class="layui-btn layui-btn-xs" title="预览" id="previewDay"> <button type="button" class="layui-btn layui-btn-xs" lay-on="pre-day-page-wrap" title="预览"
id="previewDay">
<i class="layui-icon layui-icon-table"></i> <i class="layui-icon layui-icon-table"></i>
</button> </button>
</div> </div>
...@@ -100,7 +103,8 @@ ...@@ -100,7 +103,8 @@
</div> </div>
<div class="layui-row layui-col-space5" style="height: 50vh"> <div class="layui-row layui-col-space5" style="height: 50vh">
<div class="layui-col-xs12" style="height: 100%"> <div class="layui-col-xs12" style="height: 100%">
<div class="content-box box-border" style="width: calc(100% - 20px);height: calc(100% - 20px)"> <div id="row-form" class="content-box box-border"
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">
<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="全区|地市"
...@@ -274,8 +278,10 @@ ...@@ -274,8 +278,10 @@
// 表格初始 // 表格初始
table.render({ table.render({
elem: '#call-table', elem: '#call-table',
id: 'callTable',
url: gatewayUrl + '/server/getServerStatus', url: gatewayUrl + '/server/getServerStatus',
cellMinWidth: 80, cellMinWidth: 80,
height: '#tableContent-0',
parseData: function (res) { // res 即为原始返回的数据 parseData: function (res) { // res 即为原始返回的数据
return { return {
"code": res.code, // 解析接口状态 "code": res.code, // 解析接口状态
...@@ -310,14 +316,15 @@ ...@@ -310,14 +316,15 @@
], ],
// res: 返回信息 curr: 当前页码 count: 数据总量 // res: 返回信息 curr: 当前页码 count: 数据总量
done: function (res, curr, count) { done: function (res, curr, count) {
adjustTableHeight(); // adjustTableHeight();
} }
}) })
// 窗口大小变化监听 // 窗口大小变化监听
$(window).resize(function () { $(window).resize(function () {
resizeText(); // 调整字体大小 resizeText(); // 调整字体大小
adjustTableHeight(); // 调整table高度 // adjustTableHeight(); // 调整table高度
table.resize('callTable');
}); });
function initChart(chartId, type, key) { function initChart(chartId, type, key) {
...@@ -474,7 +481,7 @@ ...@@ -474,7 +481,7 @@
} }
}).then(function (res) { }).then(function (res) {
callYearNum = res.count; callYearNum = res.count;
let len = $('#call-year-num').text(callYearNum).text().length; $('#call-year-num').text(callYearNum);
resizeText(); resizeText();
}).catch(function (err) { }).catch(function (err) {
console.log(' --- 接口请求失败，抛出异常 --- ', err) console.log(' --- 接口请求失败，抛出异常 --- ', err)
...@@ -493,14 +500,14 @@ ...@@ -493,14 +500,14 @@
} }
}).then(function (res) { }).then(function (res) {
callMonthNum = res.count; callMonthNum = res.count;
let len = $('#call-month-num').text(callMonthNum).text().length; $('#call-month-num').text(callMonthNum);
resizeText(); resizeText();
}).catch(function (err) { }).catch(function (err) {
console.log(' --- 接口请求失败，抛出异常 --- ', err) console.log(' --- 接口请求失败，抛出异常 --- ', err)
}) })
} }
// 获取年调用量 // 获取日调用量
function getCourtUseInDay() { function getCourtUseInDay() {
axios({ axios({
url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInDay', url: gatewayUrl + '/appAbilityRecordAll/getCourtUseInDay',
...@@ -543,6 +550,7 @@ ...@@ -543,6 +550,7 @@
let tableHeight = $('#tableContent').height(); let tableHeight = $('#tableContent').height();
let headerHeight = $('.layui-table-header').height(); let headerHeight = $('.layui-table-header').height();
$(".layui-table-main").css("height", (tableHeight - headerHeight) + "px"); $(".layui-table-main").css("height", (tableHeight - headerHeight) + "px");
table.resize('callTable');
} }
// 按钮点击事件 // 按钮点击事件
...@@ -603,64 +611,110 @@ ...@@ -603,64 +611,110 @@
}) })
} }
$("#previewAll").click(function () {
// 事件
util.on('lay-on', { util.on('lay-on', {
'test-page-wrap': function () { 'pre-all-page-wrap': function () {
openDialog('各法院总调用统计详情')
},
'pre-year-page-wrap': function () {
openDialog(`各法院${currYear}年调用统计详情`, {yearMonthDay: currYear})
},
'pre-month-page-wrap': function () {
openDialog(`各法院${currYear}-${currMonth}调用统计详情`, {yearMonthDay: `${currYear}-${currMonth}`})
},
'pre-day-page-wrap': function () {
openDialog(`各法院${currYear}-${currMonth}-${currDate}调用统计详情`, {yearMonthDay: `${currYear}-${currMonth}-${currDate}`})
}
})
function openDialog(title, params) {
layer.open({ layer.open({
title: '各法院总调用统计详情', title,
type: 1, type: 1,
// shade: false, // 不显示遮罩 // shade: false, // 不显示遮罩
area: ['100%', '100%'], area: ['100%', '100%'],
maxmin: false, // 是否开启最大最小化 maxmin: false, // 是否开启最大最小化
content: '<div class="layui-container" style="width: 98%"><table id="samples" style="height: 100%"></table></div>', content: '<div id="samples-table" style="width: calc(100% - 20px);padding: 10px"><table id="samples" style="height: 100%"></table></div>',
scrollbar: false, // 暂时屏蔽浏览器滚动条
move: false, // 禁止拖动
// 弹出层表格定义 // 弹出层表格定义
success: function () { success: function () {
table.render({ let cols = [
elem: '#samples', [ //表头
// url: '/index/Develorderss/samplelists?od_id=' + od_id, //数据接口 {field: 'courtName', title: '法院名称', align: 'center'},
data: [ {field: 'businessVendorName', title: '业务厂商', align: 'center'},
{ {field: 'abilityName', title: '识别能力', align: 'center'},
name: "广西高院",
cs_name: "北投",
num: 123
},
{
name: "广西高院",
cs_name: "华宇",
num: 123
},
{
name: "广西高院",
cs_name: "oa",
num: 123
},
{ {
name: "南宁高院", field: 'abilityDocCount',
cs_name: "华宇", title: '调用次数',
num: 123 align: 'center',
totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
}, },
{ {
name: "南宁高院", field: 'fileCount',
cs_name: "北投", title: '调用页数',
num: 123 align: 'center',
totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
}
]
]
table.render({
elem: '#samples',
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,
where: params ? params : {},
parseData: function (res) { // res 即为原始返回的数据
return {
"code": res.code, // 解析接口状态
"msg": res.message, // 解析提示文本
"data": res.data // 解析数据列表
};
}, },
], response: {
page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 statusName: 'code', //规定数据状态的字段名称，默认：code
layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'] //自定义分页布局 statusCode: 200 //规定成功的状态码，默认：0
//,curr: 5 //设定初始在第 5 页
, groups: 10 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
}, },
limit: 10, // page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
cols: [ // layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'] //自定义分页布局
[ //表头 // //,curr: 5 //设定初始在第 5 页
{field: 'name', title: '名称'}, // , groups: 10 //只显示 1 个连续页码
{field: 'cs_name', title: '厂商'}, // , first: false //不显示首页
{field: 'num', title: '调用次数'} // , last: false //不显示尾页
] // },
], // limit: 10,
// totalRow: true, // 是否开启合计行区域
cols,
done: function (res, curr, count) { done: function (res, curr, count) {
console.log(' --- 数据渲染完毕 --- ', res) console.log(' --- 数据渲染完毕 --- ', res)
merge(res);//调用 merge(res);//调用
...@@ -668,19 +722,17 @@ ...@@ -668,19 +722,17 @@
}); });
} }
}); });
}, }
})
});
function merge(res) { function merge(res) {
var data = res.data; var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数 var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var columsName = ['name'];//需要合并的列名称 var columsName = ['courtName'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值 var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $("#samples > .layui-table-body > .layui-table").find("tr");//所有行 var trArr = $("#samples-table .layui-table-body > .layui-table").find("tr");//所有行
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
......
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