Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
O
ocrCloudPlatformAdmin
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ocr-cloud-platform
ocrCloudPlatformAdmin
Commits
b1a4f713
Commit
b1a4f713
authored
Apr 26, 2024
by
杨琪琪
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
layui table表格单元合并
parent
74d5b5da
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
150 additions
and
58 deletions
+150
-58
src/main/resources/static/css/callSupervision.css
+5
-13
src/main/resources/static/js/callSupervision/callChartOptions.js
+1
-23
src/main/resources/templates/callSupervision/index.html
+144
-22
No files found.
src/main/resources/static/css/callSupervision.css
View file @
b1a4f713
...
...
@@ -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
:
#b3b3b30
d
;
}
.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
View file @
b1a4f713
...
...
@@ -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
View file @
b1a4f713
...
...
@@ -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:
4
0vh"
>
<div
class=
"layui-row layui-col-space5"
style=
"height:
5
0vh"
>
<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
()
{
currChart
.
resize
();
}
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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment