Skip to content

O
ocrCloudPlatformAdmin
Commit ca5b28dd by 杨琪琪
Options

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

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