提交工单处理逻辑。

jiazx0107

2026-01-15 d0abf3d3c2190d9d16b91a12a1a99fd94b8d63b4

提交工单处理逻辑。

 fzzy-igdss-core/src/main/java/com/fzzy/work/data/WorkBizType.java

@@ -28,14 +28,4 @@
    public String getMsg() {
        return msg;
    }

    public static String getMsg(String code) {
        if(null == code) return null;
        if(WorkBizType.TYPE_10.getCode().equals(code)) return WorkBizType.TYPE_10.getMsg();
        if(WorkBizType.TYPE_20.getCode().equals(code)) return WorkBizType.TYPE_20.getMsg();
        if(WorkBizType.TYPE_30.getCode().equals(code)) return WorkBizType.TYPE_30.getMsg();
        if(WorkBizType.TYPE_40.getCode().equals(code)) return WorkBizType.TYPE_40.getMsg();
        if(WorkBizType.TYPE_99.getCode().equals(code)) return WorkBizType.TYPE_99.getMsg();
        return code;
    }
}

 fzzy-igdss-core/src/main/java/com/fzzy/work/service/BizWorkService.java

@@ -10,6 +10,7 @@
import com.fzzy.work.domain.WorkOrder;
import com.fzzy.work.domain.WorkOrderConf;
import com.fzzy.work.domain.WorkOrderProcess;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
@@ -20,6 +21,7 @@
 * @Author: Andy.jia
 * @Date: 2026/1/15
 */
@Slf4j
@Service
public class BizWorkService {
    @Resource
@@ -112,4 +114,21 @@

        return WorkNode.NODE_END;
    }

    /**
     * èŽ·å–待处理工单
     * @return å¤„理结果
     */
    public BaseResp todoByProcess(WorkOrderProcess data) {
        // TODO Auto-generated method stub

        log.info("-----工单处理-----{}",data);
        //获取工单
        WorkOrder work = orderService.selectById(data.getOrderId());
        if(null == work) return BaseResp.error("当前工单已不存在");



        return BaseResp.success();
    }
}

 fzzy-igdss-core/src/main/java/com/fzzy/work/service/WorkOrderService.java

@@ -91,6 +91,14 @@
        return list;
    }

    public List<SysDictData> triggerBizType() {
        List<SysDictData> list = new ArrayList<SysDictData>();
        for (WorkBizType w : WorkBizType.values()) {
            list.add(new SysDictData(w.getMsg(), w.getCode()));
        }
        return list;
    }

    /**
     * èŽ·å–用户待处理工单数
     * @param status
@@ -111,4 +119,8 @@
    }


    public WorkOrder selectById(String orderId) {
        if(null == orderId) return null;
        return workOrderMapper.selectById(orderId);
    }
}

 fzzy-igdss-view/src/main/java/com/fzzy/work/WorkOrder.view.xml

@@ -19,11 +19,12 @@
      </PropertyDef>
      <PropertyDef name="bizType">
        <Property></Property>
        <Property name="label">业务分类</Property>
      </PropertyDef>
      <PropertyDef name="category">
        <Property></Property>
        <Property name="label">工单分类</Property>
        <Property name="mapping">
          <Property name="mapValues">${dorado.getDataProvider(&quot;workOrderPR#triggerBizType&quot;).getResult()}</Property>
          <Property name="keyProperty">dictValue</Property>
          <Property name="valueProperty">dictLabel</Property>
        </Property>
      </PropertyDef>
      <PropertyDef name="status">
        <Property></Property>
@@ -47,14 +48,14 @@
      </PropertyDef>
      <PropertyDef name="createTime">
        <Property name="dataType">DateTime</Property>
        <Property name="label">工单创建时间</Property>
        <Property name="label">创建时间</Property>
      </PropertyDef>
      <PropertyDef name="createUserId">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="createUserName">
        <Property></Property>
        <Property name="label">工单创建人</Property>
        <Property name="label">创建人</Property>
      </PropertyDef>
      <PropertyDef name="businessId">
        <Property></Property>
@@ -77,6 +78,27 @@
          <Property name="keyProperty">id</Property>
          <Property name="valueProperty">kqmc</Property>
        </Property>
      </PropertyDef>
      <PropertyDef name="node">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="createById">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="bankId">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="confId">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="createBy">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="updateBy">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="updateTime">
        <Property name="dataType">Date</Property>
      </PropertyDef>
    </DataType>
    <DataType name="dtParam">
@@ -120,6 +142,23 @@
      </PropertyDef>
      <PropertyDef name="remark">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="id">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="assigneeId">
        <Property></Property>
      </PropertyDef>
      <PropertyDef name="assigneeName">
        <Property></Property>
        <Property name="label">处理人</Property>
      </PropertyDef>
      <PropertyDef name="node">
        <Property></Property>
        <Property name="label">当前节点</Property>
      </PropertyDef>
      <PropertyDef name="createTime">
        <Property name="dataType">Date</Property>
      </PropertyDef>
    </DataType>
  </Model>
@@ -175,15 +214,12 @@
    var dialog = view.get(&quot;#dialogMain&quot;);&#xD;
    if(1 == tabIndex){&#xD;
        cur = view.get(&quot;#dsMain2.data:#&quot;);&#xD;
        dialog = view.get(&quot;#dialogMain&quot;);&#xD;
    }&#xD;
    dialog.show();&#xD;
    &#xD;
    var orderId = cur.get(&quot;id&quot;);&#xD;
    //赋值给审批&#xD;
    view.get(&quot;#dsWordProcess&quot;).set(&quot;data&quot;,{orderId:orderId});&#xD;
    //历史记录&#xD;
    view.get(&quot;#iFrameProcess&quot;).set(&quot;path&quot;,&quot;com.fzzy.work.WorkProcess.d?orderId=&quot;+orderId);&#xD;
    //历史数据&#xD;
    view.get('#iFrameFlowHis').set('path','/work/flow-his?orderId='+orderId);&#xD;
    //业务信息&#xD;
    if(cur.get(&quot;businessUrl&quot;)){&#xD;
        var url = cur.get(&quot;businessUrl&quot;)+&quot;?businessId=&quot;+cur.get(&quot;businessId&quot;)+&quot;&amp;orderId=&quot;+orderId;&#xD;
@@ -191,7 +227,35 @@
    }else{&#xD;
        view.get(&quot;#iFrameBiz&quot;).set(&quot;path&quot;,&quot;/work/no-business?orderId=&quot;+orderId);&#xD;
    }&#xD;
}</ClientEvent>
}&#xD;
//执行审批&#xD;
todo = function(action){&#xD;
    var cur = view.get(&quot;#dsMain.data:#&quot;);&#xD;
    var process = view.get(&quot;#dsProcess.data&quot;);&#xD;
    process.set(&quot;orderId&quot;, cur.get(&quot;id&quot;));&#xD;
    process.set(&quot;action&quot;, action);&#xD;
    process.set(&quot;node&quot;, cur.get(&quot;node&quot;));&#xD;
    &#xD;
    var remark = process.get('remark');&#xD;
    if(!remark){&#xD;
        $notify(&quot;请填写审批意见……&quot;);&#xD;
        return;&#xD;
    }&#xD;
    view.get(&quot;#ajaxTodo&quot;).set('parameter',process).execute(function(result){&#xD;
        if('200' != result.code){&#xD;
            $alert(result.msg);&#xD;
        }else{&#xD;
            $alert(&quot;执行成功！&quot;);&#xD;
            view.get('#dialogTodo').hide();&#xD;
        }&#xD;
    });&#xD;
}&#xD;
cancelTodo = function(){&#xD;
    var process = view.get(&quot;#dsProcess.data&quot;);&#xD;
    process.set('remark',null);&#xD;
    view.get('#dialogTodo').hide();&#xD;
}&#xD;
</ClientEvent>
    <Property name="packages">font-awesome,css-common</Property>
    <DataSet id="dsMain">
      <ClientEvent name="onLoadData">$notify(&quot;数据加载完成……&quot;);</ClientEvent>
@@ -201,8 +265,7 @@
      <Property name="loadMode">lazy</Property>
    </DataSet>
    <DataSet id="dsMain2">
      <ClientEvent name="onLoadData">$notify(&quot;数据加载完成……&quot;);&#xD;
</ClientEvent>
      <ClientEvent name="onLoadData">$notify(&quot;数据加载完成……&quot;);</ClientEvent>
      <Property name="dataType">[dtMain]</Property>
      <Property name="dataProvider">workOrderPR#pageQuery2</Property>
      <Property name="pageSize">10</Property>
@@ -212,7 +275,7 @@
      <ClientEvent name="onReady">self.insert({});</ClientEvent>
      <Property name="dataType">dtParam</Property>
    </DataSet>
    <DataSet id="dsWordProcess">
    <DataSet id="dsProcess">
      <ClientEvent name="onReady">self.insert();</ClientEvent>
      <Property name="dataType">dtWordProcess</Property>
    </DataSet>
@@ -553,59 +616,28 @@
      <Property name="closeable">false</Property>
      <Property name="caption">工单详细</Property>
      <Property name="iconClass">fa fa-tasks</Property>
      <Property name="height">95%</Property>
      <Property name="width">95%</Property>
      <Property name="width">90%</Property>
      <Property name="showCaptionBar">false</Property>
      <Property name="style">
        <Property name="background-color">#e6e6e6</Property>
      </Property>
      <Buttons>
        <Button>
          <ClientEvent name="onClick">view.get(&quot;#updateSave&quot;).execute(function(result){&#xD;
    if(result){&#xD;
        $alert(result);&#xD;
        return;&#xD;
    }&#xD;
    $notify(&quot;数据执行完成！！&quot;);&#xD;
    self.get(&quot;parent&quot;).hide();&#xD;
});</ClientEvent>
          <Property name="caption">处理</Property>
          <Property name="iconClass">fa fa-check-circle</Property>
          <Property name="exClassName">btn1</Property>
        </Button>
        <Button>
          <ClientEvent name="onClick">view.get(&quot;#updateSave&quot;).execute(function(result){&#xD;
    if(result){&#xD;
        $alert(result);&#xD;
        return;&#xD;
    }&#xD;
    $notify(&quot;数据执行完成！！&quot;);&#xD;
    self.get(&quot;parent&quot;).hide();&#xD;
});</ClientEvent>
          <Property name="caption">转交</Property>
          <Property name="iconClass">fa fa-check-circle</Property>
          <Property name="exClassName">btn2</Property>
        </Button>
        <Button>
          <ClientEvent name="onClick">view.get(&quot;#dsMain.data:#&quot;).cancel();&#xD;
            self.get(&quot;parent&quot;).hide();</ClientEvent>
          <Property name="caption">关闭</Property>
          <Property name="exClassName">btn3</Property>
          <Property name="iconClass">fa fa-times-circle</Property>
        </Button>
      </Buttons>
      <Property name="height">95%</Property>
      <Buttons/>
      <Children>
        <TabControl>
          <ControlTab>
            <Property name="caption">工单信息</Property>
            <Property name="iconClass">fa fa-edit</Property>
            <Property name="width">120</Property>
            <Container>
              <Container>
                <Property name="exClassName">c-data</Property>
              <AutoForm>
                <Property name="dataSet">dsMain</Property>
                <Property name="cols">*,*,*</Property>
                <Property name="labelAlign">right</Property>
                <Property name="labelSeparator">：</Property>
                <Property name="labelWidth">120</Property>
                  <Property name="labelWidth">100</Property>
                <Property name="readOnly">true</Property>
                <AutoFormElement layoutConstraint="colSpan:2">
                  <Property name="name">title</Property>
@@ -654,55 +686,46 @@
                  <Property name="labelWidth">140</Property>
                  <Editor/>
                </AutoFormElement>
                <AutoFormElement layoutConstraint="colSpan:3">
                  <Property name="name">remark</Property>
                  <Property name="property">remark</Property>
                  <Property name="editorType">TextArea</Property>
                  <Editor/>
                </AutoFormElement>
              </AutoForm>
              <GroupBox>
                <Property name="caption">工单审批/处理</Property>
                <Property name="collapseable">false</Property>
                <Buttons/>
                <Children>
                  <AutoForm>
                    <Property name="dataSet">dsWordProcess</Property>
                    <Property name="cols">*,*,*</Property>
                    <Property name="labelAlign">right</Property>
                    <Property name="labelSeparator">：</Property>
                    <Property name="labelWidth">120</Property>
                    <Property name="showLabel">false</Property>
                    <AutoFormElement layoutConstraint="colSpan:3">
                      <Property name="name">remark</Property>
                      <Property name="property">remark</Property>
                      <Editor>
                        <TextArea>
                          <Property name="blankText">-- å®¡æ‰¹/处理说明 --</Property>
                        </TextArea>
                      </Editor>
                    </AutoFormElement>
                    <HtmlContainer layoutConstraint="colSpan:3">
                      <Property name="content">1.工单详细业务见【业务信息】查看。&lt;br></Property>
                      <Property name="exClassName">h-tip</Property>
                      <Property name="contentOverflow">hidden</Property>
                    </HtmlContainer>
                  </AutoForm>
                </Children>
              </GroupBox>
                <ToolBar>
                  <Fill/>
                  <ToolBarButton>
                    <ClientEvent name="onClick">view.get(&quot;#dialogTodo&quot;).show();&#xD;
</ClientEvent>
                    <Property name="caption">处理</Property>
                    <Property name="width">80</Property>
                    <Property name="exClassName">btn1</Property>
                    <Property name="iconClass">fa fa-check-circle</Property>
                  </ToolBarButton>
                  <ToolBarButton>
                    <Property name="caption">转交</Property>
                    <Property name="width">80</Property>
                    <Property name="exClassName">btn2</Property>
                    <Property name="iconClass">fa fa-check-circle</Property>
                  </ToolBarButton>
                  <ToolBarButton>
                    <ClientEvent name="onClick">view.get(&quot;#dsMain.data:#&quot;).cancel();&#xD;
view.get(&quot;#dialogMain&quot;).hide();</ClientEvent>
                    <Property name="caption">关闭</Property>
                    <Property name="width">80</Property>
                    <Property name="exClassName">btn3</Property>
                    <Property name="iconClass">fa fa-times-circle</Property>
                  </ToolBarButton>
                  <Separator>
                    <Property name="width">30</Property>
                  </Separator>
                </ToolBar>
              </Container>
              <IFrame id="iFrameFlowHis">
                <Property name="path">/work/flow-his?orderId=1</Property>
              </IFrame>
            </Container>
          </ControlTab>
          <ControlTab>
            <Property name="caption">业务信息</Property>
            <Property name="iconClass">fa fa-file-o</Property>
            <Property name="width">120</Property>
            <IFrame id="iFrameBiz"/>
          </ControlTab>
          <ControlTab>
            <Property name="caption">审批记录</Property>
            <Property name="iconClass">fa fa-history</Property>
            <IFrame id="iFrameProcess">
              <Property name="path">com.fzzy.work.WorkProcess.d</Property>
            </IFrame>
          </ControlTab>
        </TabControl>
      </Children>
@@ -717,5 +740,59 @@
    <AjaxAction id="ajaxDel">
      <Property name="confirmMessage">确定要执行删除么？</Property>
    </AjaxAction>
    <Dialog id="dialogTodo">
      <Property name="width">600</Property>
      <Property name="caption">审批处理</Property>
      <Property name="closeable">false</Property>
      <Property name="iconClass">fa fa-bookmark</Property>
      <Buttons>
        <Button>
          <ClientEvent name="onClick">todo('pass');</ClientEvent>
          <Property name="caption">通过</Property>
          <Property name="iconClass">fa fa-check</Property>
          <Property name="exClassName">btn1</Property>
          <Property name="width">90</Property>
        </Button>
        <Button>
          <ClientEvent name="onClick">todo('refuse');</ClientEvent>
          <Property name="caption">拒绝</Property>
          <Property name="exClassName">btn4</Property>
          <Property name="iconClass">fa fa-times</Property>
          <Property name="width">90</Property>
        </Button>
        <Button>
          <ClientEvent name="onClick">cancelTodo();</ClientEvent>
          <Property name="caption">取消操作</Property>
          <Property name="iconClass">fa fa-times</Property>
          <Property name="exClassName">btn3</Property>
          <Property name="width">90</Property>
        </Button>
      </Buttons>
      <Children>
        <Container>
          <AutoForm>
            <Property name="cols">*</Property>
            <Property name="dataSet">dsProcess</Property>
            <AutoFormElement>
              <Property name="name">remark</Property>
              <Property name="property">remark</Property>
              <Property name="showHint">false</Property>
              <Property name="showLabel">false</Property>
              <Editor>
                <TextArea>
                  <Property name="blankText">-- å¡«å†™å®¡æ‰¹å»ºè®® --</Property>
                  <Property name="height">100</Property>
                </TextArea>
              </Editor>
            </AutoFormElement>
          </AutoForm>
        </Container>
      </Children>
      <Tools/>
    </Dialog>
    <AjaxAction id="ajaxTodo">
      <Property name="service">workOrderPR#todo</Property>
      <Property name="executingMessage">处理中……</Property>
    </AjaxAction>
  </View>
</ViewConfig>

 fzzy-igdss-view/src/main/java/com/fzzy/work/WorkOrderPR.java

@@ -11,6 +11,7 @@
import com.fzzy.work.data.WorkOrderParam;
import com.fzzy.work.domain.WorkOrderConf;
import com.fzzy.work.domain.WorkOrderProcess;
import com.fzzy.work.service.BizWorkService;
import com.fzzy.work.service.WorkOrderConfService;
import com.fzzy.work.service.WorkOrderProcessService;
import com.fzzy.work.service.WorkOrderService;
@@ -37,6 +38,8 @@
    private WorkOrderProcessService workOrderProcessService;
    @Resource
    private WorkOrderConfService workOrderConfService;
    @Resource
    private BizWorkService bizWorkService;

    /**
     *
@@ -93,6 +96,17 @@
    @DataProvider
    public List<SysDictData> triggerStatus() {
        return workOrderService.triggerStatus();
    }
    
    /**
     * å·¥å•ç±»åž‹
     * ${dorado.getDataProvider("workOrderPR#triggerBizType").getResult()}
     *
     * @return
     */
    @DataProvider
    public List<SysDictData> triggerBizType() {
        return workOrderService.triggerBizType();
    }


@@ -166,4 +180,16 @@
    public List<SysDictData> triggerType() {
        return workOrderService.triggerType();
    }
    
    //-----------------------流程处理---------------------------//
    /**
    *
    * workOrderPR#todo
    * ä¿¡æ¯åˆ—表
    *
    */
    @Expose
    public BaseResp todo(WorkOrderProcess data) {
        return bizWorkService.todoByProcess(data);
    }
}

 fzzy-igdss-web/src/main/java/com/fzzy/work/WorkOrderController.java

@@ -52,7 +52,7 @@
     *
     */
    @GetMapping("/flow-conf")
    public String noBusiness(@RequestParam("id") String id, ModelMap mmap) {
    public String flowConf(@RequestParam("id") String id, ModelMap mmap) {

        WorkOrderConf conf = workOrderConfService.selectById(id);
        if (null == conf) conf = new WorkOrderConf();
@@ -61,4 +61,17 @@

        return prefix + "/flow-conf";
    }


    /**
     * å·¥å•è®°å½•
     *
     */
    @GetMapping("/flow-his")
    public String flowHis(@RequestParam("orderId") String orderId, ModelMap mmap) {

        mmap.put("list", null);

        return prefix + "/flow-his";
    }
}

 fzzy-igdss-web/src/main/resources/templates/work/flow-his.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,305 @@
<!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 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>
</body>
</html>