fzzy-igdss.git - Gitblit

			@@ -23,8 +23,8 @@
			scroll-behavior: smooth;
			}

			html{
			overflow: hidden ;
			html {
			overflow: hidden;
			}

			/* 页面基础样式 */
			@@ -121,12 +121,10 @@
			color: #333;
			margin-bottom: 5px;
			}

			.status-change {
			color: #666;
			margin-bottom: 5px;
			}

			.status-description {
			color: #888;
			font-size: 13px;
			@@ -140,10 +138,21 @@
			}

			/* 不同状态的图标颜色 */
			.status-created { background-color: #FFB800; }
			.status-waiting { background-color: #FF5722; }
			.status-processing { background-color: #1E9FFF; }
			.status-completed { background-color: #009688; }
			.status-created {
			background-color: #FFB800;
			}

			.status-waiting {
			background-color: #FF5722;
			}

			.status-processing {
			background-color: #1E9FFF;
			}

			.status-completed {
			background-color: #009688;
			}

			/* 可滚动区域样式 */
			.scrollable-area {
			@@ -167,37 +176,43 @@
			.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="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>
			处理记录：该工单累计处理时长 <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>
			@@ -208,8 +223,9 @@
			<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>
			@@ -221,8 +237,9 @@
			<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>
			@@ -233,8 +250,9 @@
			<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>
			@@ -245,61 +263,77 @@
			<div class="time-info">2026-01-06 13:55:00</div>
			</div>
			</div>
			-->

			<!-- 以下为额外记录，用于演示滚动效果 -->
			<div class="extra-records">
			<!-- 额外记录1 -->
			<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:54:30</div>
			</div>
			</div>

			<!-- 额外记录2 -->
			<div class="timeline-item">
			<div class="timeline-icon status-waiting">
			<i class="layui-icon layui-icon-notice"></i>
			</div>
			<div class="timeline-content">
			<div class="operator-info">系统自动</div>
			<div class="status-change">发送工单创建通知</div>
			<div class="time-info">2026-01-06 13:54:15</div>
			</div>
			</div>

			<!-- 额外记录3 -->
			<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="status-description">用户通过Web端提交工单</div>
			<div class="time-info">2026-01-06 13:54:00</div>
			</div>
			</div>

			<!-- 额外记录4 -->
			<div class="timeline-item">
			<div class="timeline-icon status-created">
			<i class="layui-icon layui-icon-edit"></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:53:45</div>
			</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>