fzzy-igdss.git - Gitblit

			@@ -12,21 +12,17 @@
			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 ;
			html {
			overflow: hidden;
			}

			/* 页面基础样式 */
			body {
			background-color: #FFF;
			@@ -35,7 +31,6 @@
			font-size: 14px;
			overflow-x: hidden;
			}

			.container {
			margin: 0 auto;
			background-color: #fff;
			@@ -43,13 +38,11 @@
			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;
			@@ -58,22 +51,18 @@
			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;
			@@ -83,17 +72,14 @@
			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;
			@@ -107,7 +93,6 @@
			color: white;
			z-index: 2;
			}

			.timeline-content {
			background-color: #f9f9f9;
			border-radius: 6px;
			@@ -115,36 +100,38 @@
			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; }

			.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; /* 设置最大高度 */
			@@ -167,37 +154,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;" th:text="${tipTime}">0分钟</span>，累计处理次数 <span
			style="color:#1E9FFF; font-weight:bold;" th:text="${tipCount}">0次</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 +201,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 +215,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 +228,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 +241,73 @@
			<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>';
			htm += '<div class="status-change">' + item.remark + '</div>';
			htm += '<div class="time-info">' + item.createTime + '</div>';
			htm += '</div></div>';
			}
			$('#timelineScroll').html(htm);
			}

			});

			</script>

			</body>
			</html>