智慧粮库质押监管系统
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
sgj
2026-02-03 9e64b2df66a7ab69b9daf258999d88844cccecce 
 fzzy-igdss-web/src/main/resources/templates/work/flow-his.html


@@ -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,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>