<!DOCTYPE html>
|
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>工单处理历史记录</title>
|
<link rel="stylesheet" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/>
|
<style>
|
/* 隐藏滚动条的基础CSS */
|
.hide-scrollbar {
|
/* 隐藏标准滚动条 */
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* IE 和 Edge */
|
}
|
|
/* Chrome, Safari 和 Opera */
|
.hide-scrollbar::-webkit-scrollbar {
|
display: none;
|
}
|
|
/* 平滑滚动效果 */
|
.smooth-scroll {
|
scroll-behavior: smooth;
|
}
|
|
html {
|
overflow: hidden;
|
}
|
|
/* 页面基础样式 */
|
body {
|
background-color: #FFF;
|
padding: 20px;
|
font-family: "Microsoft YaHei", Arial, sans-serif;
|
font-size: 14px;
|
overflow-x: hidden;
|
}
|
|
.container {
|
margin: 0 auto;
|
background-color: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
}
|
|
.header {
|
background-color: #e6e6e6;
|
padding: 15px;
|
font-weight: bold;
|
}
|
|
.summary-box {
|
margin: 20px;
|
padding: 15px;
|
background-color: #f0f9ff;
|
border-left: 4px solid #1E9FFF;
|
border-radius: 4px;
|
font-size: 14px;
|
}
|
|
.summary-box .layui-icon {
|
margin-right: 8px;
|
color: #1E9FFF;
|
}
|
|
.timeline-container {
|
padding: 0 20px 20px;
|
}
|
|
/* 自定义时间轴样式 */
|
.custom-timeline {
|
position: relative;
|
padding: 20px 0;
|
}
|
|
.custom-timeline:before {
|
content: '';
|
position: absolute;
|
left: 18px;
|
top: 0;
|
bottom: 0;
|
width: 2px;
|
background-color: #e8e8e8;
|
}
|
|
.timeline-item {
|
position: relative;
|
padding-left: 50px;
|
margin-bottom: 25px;
|
}
|
|
.timeline-item:last-child {
|
margin-bottom: 0;
|
}
|
|
.timeline-icon {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
z-index: 2;
|
}
|
|
.timeline-content {
|
background-color: #f9f9f9;
|
border-radius: 6px;
|
padding: 15px;
|
border-left: 3px solid #1E9FFF;
|
font-size: 14px;
|
}
|
|
.operator-info {
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 5px;
|
}
|
.status-change {
|
color: #666;
|
margin-bottom: 5px;
|
}
|
.status-description {
|
color: #888;
|
font-size: 13px;
|
}
|
|
.time-info {
|
text-align: right;
|
color: #999;
|
font-size: 13px;
|
margin-top: 8px;
|
}
|
|
/* 不同状态的图标颜色 */
|
.status-created {
|
background-color: #FFB800;
|
}
|
|
.status-waiting {
|
background-color: #FF5722;
|
}
|
|
.status-processing {
|
background-color: #1E9FFF;
|
}
|
|
.status-completed {
|
background-color: #009688;
|
}
|
|
/* 可滚动区域样式 */
|
.scrollable-area {
|
max-height: 400px; /* 设置最大高度 */
|
overflow-y: auto; /* 垂直方向允许滚动 */
|
overflow-x: hidden; /* 水平方向隐藏 */
|
}
|
|
/* 方法1：完全隐藏滚动条 */
|
.method-1 {
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* IE 和 Edge */
|
}
|
|
.method-1::-webkit-scrollbar {
|
display: none; /* Chrome, Safari 和 Opera */
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.container {
|
margin: 10px;
|
}
|
|
.timeline-item {
|
padding-left: 40px;
|
}
|
|
.timeline-icon {
|
width: 32px;
|
height: 32px;
|
}
|
|
.scrollable-area {
|
max-height: 300px; /* 移动端调整高度 */
|
}
|
}
|
|
/* 额外的工单记录用于演示滚动
|
.extra-records {
|
display: none;
|
}
|
*/
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
<!-- <div class="header">-->
|
<!-- <i class="layui-icon layui-icon-form"></i> 工单处理记录-->
|
<!-- </div>-->
|
<div class="summary-box">
|
<i class="layui-icon layui-icon-tips"></i>
|
处理记录：该工单累计处理时长 <span style="color:#1E9FFF; font-weight:bold;">1分钟</span>，累计处理次数 <span
|
style="color:#1E9FFF; font-weight:bold;">3次</span>
|
</div>
|
|
<div class="timeline-container">
|
<!-- 这里是可滚动的时间轴区域 -->
|
<div class="custom-timeline scrollable-area method-1 smooth-scroll" id="timelineScroll">
|
<!-- 已完成
|
<div class="timeline-item">
|
<div class="timeline-icon status-completed">
|
<i class="layui-icon layui-icon-ok"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 已完成</div>
|
<div class="time-info">2026-01-06 13:56:21</div>
|
</div>
|
</div>
|
-->
|
|
<!-- 处理中
|
<div class="timeline-item">
|
<div class="timeline-icon status-processing">
|
<i class="layui-icon layui-icon-loading"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 处理中</div>
|
<div class="status-description">已接收工单</div>
|
<div class="time-info">2026-01-06 13:56:01</div>
|
</div>
|
</div>
|
-->
|
|
<!-- 待接收
|
<div class="timeline-item">
|
<div class="timeline-icon status-waiting">
|
<i class="layui-icon layui-icon-user"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="operator-info">经办人 柳白</div>
|
<div class="status-change">将工单状态设置为 待接收，下个受理人为 柳白</div>
|
<div class="time-info">2026-01-06 13:55:20</div>
|
</div>
|
</div>
|
-->
|
|
<!-- 新建工单
|
<div class="timeline-item">
|
<div class="timeline-icon status-created">
|
<i class="layui-icon layui-icon-add-circle"></i>
|
</div>
|
<div class="timeline-content">
|
<div class="status-change">新建工单</div>
|
<div class="status-description">公众号·WGCLOUD</div>
|
<div class="time-info">2026-01-06 13:55:00</div>
|
</div>
|
</div>
|
-->
|
|
</div>
|
</div>
|
</div>
|
|
<!-- 全局js -->
|
<script th:src="@{/js/jquery.min.js}"></script>
|
|
<script th:inline="javascript">
|
var list = [[${list}]];
|
|
$(function () {
|
if (list && list.length > 0) {
|
init();
|
}
|
function getNodeName(node) {
|
if (node.indexOf('start') > 0) {
|
return '提交';
|
} else if (node.indexOf('end') > 0) {
|
return '完成';
|
} else if ('node1' === node) {
|
return '库区审批';
|
} else if ('node2' === node) {
|
return '监管审批';
|
} else if ('node3' === node) {
|
return '银行审批';
|
} else {
|
return '审批';
|
}
|
}
|
|
function init() {
|
var htm = '';
|
for (var i = 0; i < list.length; i++) {
|
var item = list[i];
|
var node = item.node;
|
htm += '<div class="timeline-item">';
|
|
if (node.indexOf('start') > 0) {
|
htm += '<div class="timeline-icon status-created">';
|
htm += '<i class="layui-icon layui-icon-add-circle"></i>'
|
} else if (node.indexOf('end') > 0) {
|
htm += '<div class="timeline-icon status-completed">';
|
htm += '<i class="layui-icon layui-icon-ok"></i>'
|
} else {
|
htm += '<div class="timeline-icon status-processing">';
|
htm += '<i class="layui-icon layui-icon-loading"></i>'
|
}
|
htm += '</div>';
|
htm += '<div class="timeline-content">';
|
//htm += '<div class="operator-info">' + item.assigneeName + '</div>';
|
htm += '<div class="operator-info">';
|
htm += '流程节点：'+getNodeName(node);
|
htm += ' 审批动作：'+item.action;
|
htm += ' 经办人：'+item.assigneeName;
|
htm += '</div>';
|
if(item.remark){
|
htm += '<div class="status-change">' + item.remark + '</div>';
|
}else{
|
htm += '<div class="status-change">' + '' + '</div>';
|
}
|
htm += '<div class="time-info">' + item.createTime + '</div>';
|
htm += '</div></div>';
|
}
|
$('#timelineScroll').html(htm);
|
}
|
|
});
|
|
</script>
|
|
</body>
|
</html>
|
