Skip to content

O
ocrCloudPlatformAdmin
Commit b1a4f713 by 杨琪琪
Options

layui table表格单元合并

parent 74d5b5da
Showing with 148 additions and 56 deletions
src/main/resources/static/css/callSupervision.css
......@@ -70,36 +70,28 @@
color: #2d6aea;
}
.layui-table-view {
#tableContent > .layui-table-view {
border-color: #323232;
margin: 0;
}
.layui-table thead tr {
#tableContent > .layui-table thead tr {
background-color: #a1b9fd24;
border-color: #323232;
}
.layui-table tbody tr:hover {
#tableContent > .layui-table tbody tr:hover {
background-color: #a1b9fd24;
}
.layui-table-header {
#tableContent > .layui-table-header {
background-color: #b3b3b30d;
}
.layui-table td, .layui-table th, .layui-table-header {
#tableContent > .layui-table td,#tableContent > .layui-table th,#tableContent > .layui-table-header {
border-color: #323232;
}
/*.layui-table-cell {*/
/* overflow: visible;*/
/* text-overflow: inherit;*/
/* white-space: normal;*/
/* height: auto !important;*/
/* word-break: break-all;*/
/*}*/
.flex {
display: flex;
}
......
src/main/resources/static/js/callSupervision/callChartOptions.js
......@@ -98,19 +98,6 @@ var defaultXBarOptions = {
},
],
}
const labelOption = {
show: true,
position: 'insideBottom',
distance: 15,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{@metric} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
var defaultYBarOptions = {
title: {
text: '服务器资源实时监控',
......@@ -151,16 +138,7 @@ var defaultYBarOptions = {
type: 'value'
}
],
series: [
{
type: 'bar',
barGap: 0,
// label: labelOption,
emphasis: {
focus: 'series'
},
},
],
series: [],
dataZoom: [ // 数据区域缩放配置
{
type: 'inside', // 内置型数据区域缩放
......
src/main/resources/templates/callSupervision/index.html
......@@ -8,6 +8,7 @@
<link rel="stylesheet" href="layui2_9_8/css/layui.css" media="all">
<link rel="stylesheet" href="css/callSupervision.css" media="all">
<script src="layui2_9_8/layui.js"></script>
<script src="js/utils/axios.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts/echarts.js"></script>
<style>
......@@ -29,7 +30,8 @@
<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" title="预览" id="previewAll">
<button type="button" class="layui-btn layui-btn-xs" lay-on="test-page-wrap" title="预览"
id="previewAll">
<i class="layui-icon layui-icon-table"></i>
</button>
</div>
......@@ -130,7 +132,7 @@
</div>
</div>
</div>
<div class="layui-row layui-col-space5" style="height: 40vh">
<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="ocr-hardware-chart" style="width: 100%;height: 100%"></div>
......@@ -142,9 +144,8 @@
<script src="js/callSupervision/callChartOptions.js"></script>
<script src="js/utils/dateformat.js"></script>
<script src="js/utils/axios.min.js"></script>
<script src="js/utils/fileDownload.js"></script>
<script src="js/jquery.min.js"></script>
<script th:inline="javascript">
var gatewayUrl = [[${gatewayUrl}]];
......@@ -174,12 +175,13 @@
// 确保layui和echarts已经加载
layui.config({
base: '/js/echarts/' //假设这是你存放拓展模块的根目录
}).use(['echarts', 'form', 'laydate', 'table'], function () {
}).use(['echarts', 'form', 'laydate', 'table', 'util'], function () {
var echarts = layui.echarts;
var form = layui.form;
var laydate = layui.laydate;
var table = layui.table;
var $ = layui.jquery;
var util = layui.util;
//图表初始
initChart('ocr-call-chart', 'line', 'timeLineChart');
......@@ -273,9 +275,6 @@
table.render({
elem: '#call-table',
url: gatewayUrl + '/server/getServerStatus',
// url: '/static/js/callSupervision/testData.json', // 此处为静态模拟数据，实际使用时需换成真实接口
// height: 300,
// height: "#tableContent",
cellMinWidth: 80,
parseData: function (res) { // res 即为原始返回的数据
return {
......@@ -340,9 +339,11 @@
var currChart = window[key];
option && currChart.setOption(option, true)
// 如果需要在layui的事件中响应，比如窗口大小改变，可以绑定resize事件
window.onresize = function () {
window.addEventListener("resize", function () {
if (currChart && currChart.resize) {
currChart.resize();
}
});
}
// 时间轴折线图
......@@ -549,10 +550,6 @@
downloadFile('各法院调用统计.xlsx');
});
$('#previewAll').click(function () {
console.log(' --- 打开预览 --- ')
})
$("#exportYear").click(function () {
let date = `${currYear}`
downloadFile(`各法院${date}调用统计.xlsx`, {yearMonthDay: date});
......@@ -595,17 +592,118 @@
if (responseData.success) {
saveAs(data, filename);
} else {
console.log(' --- 下载失败 --- ', responseData)
console.log(' --- 已获取文件流 下载失败 --- ', responseData)
}
};
} else {
console.log(' --- 下载失败 --- ', data)
console.log(' --- 未获取文件流 下载失败 --- ', data)
}
}).catch(function (err) {
console.log(' --- 接口请求失败，抛出异常 --- ', err)
})
}
$("#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);//调用
}
});
}
});
},
})
});
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var columsName = ['name'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $("#samples > .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]);//获取相同列的第一列
console.log(tdCurArr, tdPreArr)
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
// 服务器资源实时监控
function getServerMonitoring(flag) {
axios({
......@@ -624,19 +722,28 @@
function updateYBarChart(source, flag) {
// hardwareBarChart.clear();
let option_o = hardwareBarChart.getOption();
console.log(' --- 当前监控图表配置 --- ', option_o)
let option = defaultYBarOptions;
let len = source[0].length - 1;
option.dataset['source'] = source;
option.dataset.source = source;
if (flag) {
let bar = option.series[0];
let n = 0;
let len = source[0].length - 1;
let bar = {
type: 'bar',
barGap: 0,
datasetIndex: 0,
emphasis: {
focus: 'series'
},
};
option.series = [];
let n = 0;
while (n < len) {
option.series.push(bar);
n++;
}
}
hardwareBarChart.setOption(option, true);
hardwareBarChart.setOption(option);
}
// 页面即将销毁
......@@ -644,6 +751,21 @@
if (monitorInterval) {
clearInterval(monitorInterval)
}
window.removeEventListener('resize', function () {
if (timeLineChart && timeLineChart.resize) {
timeLineChart.resize();
}
})
window.removeEventListener('resize', function () {
if (courtBarChart && courtBarChart.resize) {
courtBarChart.resize();
}
})
window.removeEventListener('resize', function () {
if (hardwareBarChart && hardwareBarChart.resize) {
hardwareBarChart.resize();
}
})
});
});
</script>
......
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