人物库进行数据修改

rwk-admin/src/main/java/com/rwk/web/controller/ability/RwkStaffInformationController.java

@@ -1,6 +1,11 @@
 package com.rwk.web.controller.ability;
 
+import java.util.ArrayList;
 import java.util.List;
+
+import com.rwk.common.utils.StringUtils;
+import com.rwk.system.domain.RwkFamilyMember;
+import com.rwk.system.service.IRwkFamilyMemberService;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -34,6 +39,9 @@ public class RwkStaffInformationController extends BaseController
     @Autowired
     private IRwkStaffInformationService rwkStaffInformationService;
 
+    @Autowired
+    private IRwkFamilyMemberService rwkFamilyMemberService;
+
     @RequiresPermissions("system:information:view")
     @GetMapping()
     public String information()
@@ -47,6 +55,24 @@ public class RwkStaffInformationController extends BaseController
         return prefix + "/addressBook";
     }
 
+    /**
+     * 查看收文
+     */
+    @GetMapping("informationView/{id}")
+    public String receiveView(@PathVariable("id") Long id, ModelMap mmap)
+    {
+        RwkStaffInformation rwkStaffInformation = rwkStaffInformationService.selectRwkStaffInformationById(id);
+        List<RwkFamilyMember> list = new ArrayList<>();
+        if (StringUtils.isNotEmpty(rwkStaffInformation.getFamilyMemberCode())){
+            RwkFamilyMember rwkFamilyMember = new RwkFamilyMember();
+            rwkFamilyMember.setFamilyMemberCode(rwkStaffInformation.getFamilyMemberCode());
+            list = rwkFamilyMemberService.selectRwkFamilyMemberList(rwkFamilyMember);
+        }
+        mmap.put("rwkStaffInformation",rwkStaffInformation);
+        mmap.put("familyList",list);
+        return prefix + "/informationView";
+    }
+
     /**
      * 查询人员信息列表
      */

rwk-admin/src/main/resources/static/css/use/css1.css

@@ -90,7 +90,6 @@
     vertical-align: top;
     color: #ff0000;
 }
-
 .float-left{
     float: left;
 }
@@ -120,11 +119,6 @@
     font-size: 16px;
     color: #999999;
 }
-.opinionTable {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-}
 .table-row {
     width: 25%;
     box-sizing: border-box;
@@ -136,28 +130,6 @@
 .input-container {
     position: relative;
 }
-#departmentsContainer {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-left: 5px;
-    height: 22px;
-}
-.department-block {
-    color: #fff;
-    background: #1AB394;
-    border: 1px solid #1AB394;
-    border-radius: 4px;
-    margin-right: 5px;
-    padding: 2px 5px;
-    display: flex;
-    height: 100%;
-    align-items: center;
-}
 .moveRadian{
     border-radius: 0!important;
 }
@@ -190,4 +162,66 @@
     border: 2px solid #cad0d9;
     font-size: 16px;
     background: #fff url(../../img/sousuo.png) no-repeat 95% center;
+}
+/*-----百度百科样式-----*/
+dd,dl{
+    margin: 0;
+}
+
+.basicInfo_UxXSa {
+    background: url(../../img/use/basicInfo-bg.png);
+    margin: 10px 0 10px;
+}
+
+.basicInfo_UxXSa:after {
+    clear: both;
+    content: "";
+    display: block
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb {
+    float: left;
+    width: 33.33%;
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .itemWrapper_yeNiB {
+    position: relative
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .itemWrapper_yeNiB:after {
+    clear: both;
+    content: "";
+    display: block
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .basicInfoItem_aRc0i {
+    display: block;
+    float: left;
+    line-height: 26px;
+    margin: 0;
+    padding: 0
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .basicInfoItem_aRc0i.itemName_PqU2f {
+    color: #999;
+    font-weight: 700;
+    overflow: hidden;
+    padding: 0 5px 0 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 150px;
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .basicInfoItem_aRc0i.itemName_PqU2f:before {
+    content: "";
+    display: block
+}
+
+.basicInfo_UxXSa .basicInfoBlock_q4iJb .basicInfoItem_aRc0i.itemValue_OfJ1R {
+    zoom: 1;
+    color: #333;
+    float: left;
+    position: relative;
+    min-width: 80px;
+    word-break: break-all
 }

rwk-admin/src/main/resources/templates/main.html

@@ -98,10 +98,10 @@
         {name:'数据3',value:310},
         {name:'数据4',value:335}
     ];
-    // $(".cut").click(function () {
-    //     $('.box').removeClass('active');
-    //     $(this).addClass('active');
-    // });
+    $(".cut").click(function () {
+        $('.cut').removeClass('active');
+        $(this).addClass('active');
+    });
     var array2 = [2,4,6,8,10];
     var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
     //饼图1
@@ -120,17 +120,23 @@
     //柱状图
     var yAxis = {
         type: 'category',
-        data: ['30岁以下', '31-40岁', '41-50岁', '51-60岁', '61岁以上']
+        data: ['30岁以下', '31-40岁', '41-50岁', '51-60岁', '61岁以上'],
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        }
     }
     var series = [{
-            name: '男性',
+            name: '男',
             type: 'bar',
             data: [1200, 900, 600, 300, 200],
             emphasis: {
                 focus: 'series'
             }
         }, {
-            name: '女性',
+            name: '女',
             type: 'bar',
             data: [1100, 950, 650, 350, 250],
             emphasis: {
@@ -139,34 +145,64 @@
         }
     ]
     //柱状图1
-    var grid1 = {left: '15%', right: '6%', bottom: '12%', top:'3%'};
-    barChartMethod("barChart1","",{data: ['男', '女']},{type: 'value', name: '人数'},yAxis,grid1,series);
+    var grid1 = {left: '15%', right: '6%', bottom: '12%', top:'12%'};
+    barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', name: '人数',
+        axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
+    grid1.top = '3%';
+    series = [{
+        name: '数据',
+        type: 'bar',
+        data: [120, 200, 150, 80, 70, 110, 130,120],
+        itemStyle: {
+            normal: {
+                color: function(params) {
+                    var colors = ['#34b3a0', '#ff6347'];
+                    return colors[params.dataIndex % 2];
+                }
+            }
+        }
+    }];
+    yAxis = {
+        type: 'category',
+        data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他']
+    }
     //柱状图2
-    barChartMethod("barChart2","",{data: ['男', '女']},{type: 'value', name: '人数'},yAxis,grid1,series);
+    barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value', name: '人数'},yAxis,grid1,series);
     var itemStyle = {borderColor: '#fff',borderWidth: 2}
     //饼图3
     pieChartMethod('pieChart3',array1,"饼图3",'60%',"",grid,"",true,itemStyle);
     //柱状图3
+    var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70];
+    var maxHeight = Math.max(...data1);
     var xAxis = {
         type: 'category',
-            data: ['类别A', '类别B', '类别C', '类别D', '类别E']
+            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
     }
     yAxis = {
         type: 'value'
     }
     var series1 = [{
-        name: '数量',
+        name: '灰色背景',
         type: 'bar',
-        data: [120, 200, 150, 80, 70],
+        data: data1.map(value => maxHeight), // 使用最大高度填充
         itemStyle: {
-            color: '#73C9C8'
+            color: '#ccc', // 灰色
+            opacity: 0.5 // 可选：使灰色柱子稍微透明
+        },
+        barGap: '-100%', // 使灰色柱子与实际数据柱子重叠
+        tooltip: {
+            show: false //禁用灰色柱子的 tooltip
         },
-        showBackground: true,
-        backgroundStyle: {
-            color: '#000000'
+        silent: true //禁用柱子的悬停和点击事件
+    }, {
+        name: '数据',
+        type: 'bar',
+        data: data1,
+        itemStyle: {
+            color: '#73C9C8' // 实际数据的颜色
         }
     }];
-    var grid3 = {left: '5%', right: '6%', bottom: '4%', top:'6%'}
+    var grid3 = {left: '5%', right: '6%', bottom: '12%', top:'6%'}
     barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);
 
     //饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线
@@ -261,7 +297,7 @@
         var barChart = echarts.init(document.getElementById(id));
         var barOption = {
             tooltip: {
-                trigger: 'axis'
+
             },
         };
         if (tooltip) barOption.tooltip = tooltip;

rwk-admin/src/main/resources/templates/system/information/add.html

@@ -378,7 +378,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">简历：</label>
                     <div class="col-md-11">
-                        <textarea name="resume" class="form-control"></textarea>
+                        <textarea rows="6" name="resume" class="form-control"></textarea>
                     </div>
                 </div>
             </div>
@@ -386,7 +386,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">培训情况：</label>
                     <div class="col-md-11">
-                        <textarea name="training" class="form-control"></textarea>
+                        <textarea rows="6" name="training" class="form-control"></textarea>
                     </div>
                 </div>
             </div>
@@ -394,7 +394,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">主要成就：</label>
                     <div class="col-md-11">
-                        <textarea name="achievement" class="form-control"></textarea>
+                        <textarea rows="6" name="achievement" class="form-control"></textarea>
                     </div>
                 </div>
             </div>

rwk-admin/src/main/resources/templates/system/information/edit.html

@@ -378,7 +378,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">简历：</label>
                     <div class="col-md-11">
-                        <textarea name="resume" class="form-control">[[*{resume}]]</textarea>
+                        <textarea rows="6" name="resume" class="form-control">[[*{resume}]]</textarea>
                     </div>
                 </div>
             </div>
@@ -386,7 +386,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">培训情况：</label>
                     <div class="col-md-11">
-                        <textarea name="training" class="form-control">[[*{training}]]</textarea>
+                        <textarea rows="6" name="training" class="form-control">[[*{training}]]</textarea>
                     </div>
                 </div>
             </div>
@@ -394,7 +394,7 @@
                 <div class="form-group">
                     <label class="col-md-1 control-label">主要成就：</label>
                     <div class="col-md-11">
-                        <textarea name="achievement" class="form-control">[[*{achievement}]]</textarea>
+                        <textarea rows="6" name="achievement" class="form-control">[[*{achievement}]]</textarea>
                     </div>
                 </div>
             </div>

rwk-admin/src/main/resources/templates/system/information/information.html

@@ -105,6 +105,7 @@
                     formatter: function(value, row, index) {
                         var actions = [];
                         actions.push('<a class="btn btn-unite btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑</a> ');
+                        actions.push('<a class="btn btn-unite btn-xs" href="javascript:void(0)" onclick="viewShow(\'' + row.id + '\')">查看</a> ');
                         actions.push('<a class="btn btn-unite btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>');
                         return actions.join('');
                     }
@@ -112,6 +113,24 @@
             };
             $.table.init(options);
         });
+
+        //查看个人信息
+        function viewShow(id){
+            top.layer.open({
+                type: 2,
+                area: [window.innerWidth*0.8+"px", ($(window).height() - 20)+'px'],
+                fix: false,
+                maxmin: true,
+                shade: 0.3,
+                title: "信息查看",
+                content: prefix+'/informationView/'+id,
+                btn: ['关闭'],
+                shadeClose: true,
+                cancel: function(index) {
+                    return true;
+                }
+            });
+        }
     </script>
 </body>
 </html>

rwk-admin/src/main/resources/templates/system/information/informationView.html

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <th:block th:include="include :: header('人员详情')" />
+    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
+    <style>
+        .gray-bg{
+            background-color: #ffffff;
+        }
+        .piece{
+            margin-bottom: 20px;
+        }
+        .education{
+            width: 30%;
+            display: flex;
+        }
+        .education div:first-child{
+            color: #999;
+            margin-right: 50px;
+            font-weight: bold;
+        }
+        .piece .marks{
+            width: 10px;
+            height: 20px;
+            margin-right: 10px;
+            margin-top: 3px;
+            background-color: #1a7bb9;
+        }
+        .piece .line{
+            width: calc(64% - 20px);
+            margin-left: 20px;
+            margin-top: 10px;
+            border-top: 1px solid #E1E1E1;
+        }
+        .piece .content .informationText{
+            padding-left: 20px;
+        }
+        .piece .content {
+            width: 75%;
+            max-height: 500px;
+            box-sizing: border-box;
+            overflow-y: auto; /* 超出内容出现滚动条 */
+            border-right: 1px solid #ccc; /* 右边框 */
+            scrollbar-width: thin; /* Firefox: 设置滚动条宽度为细 */
+            scrollbar-color: #888 #f1f1f1; /* Firefox: 滚动条颜色和背景颜色 */
+        }
+        .piece .sidebar {
+            width: 25%;
+            max-height: 500px;
+            padding: 10px 10px 10px 40px;
+            position: relative;
+        }
+        .piece .title {
+            margin: 10px 0;
+            font-size: 16px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .sidebar .arrow {
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-left: 16px solid blue; /* 三角形底部为左 */
+            border-right: 16px solid transparent;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            left: 10px; /* 三角形位置 */
+            top: 21px; /* 默认位置 */
+            transition: top 0.3s; /* 动画效果 */
+        }
+        .sidebar .active {
+            color: blue;
+        }
+        /* 自定义滚动条样式 */
+        .piece .content::-webkit-scrollbar {
+            width: 6px; /* 设置更细的滚动条宽度 */
+        }
+        .piece .content::-webkit-scrollbar-thumb {
+            background: #888; /* 滚动条颜色 */
+            border-radius: 10px; /* 滚动条圆角 */
+        }
+        .piece .content::-webkit-scrollbar-thumb:hover {
+            background: #555; /* 滚动条悬停颜色 */
+        }
+    </style>
+</head>
+<body class="gray-bg">
+<form class="form-horizontal m" id="form-information-view" th:object="${rwkStaffInformation}">
+    <div class="container-div">
+        <div class="piece">
+            <h2 style="font-weight: bold;" th:text="*{name}">姓名</h2>
+            <h3 style="font-weight: normal;" th:text="*{currentOccupation}">职务</h3>
+        </div>
+        <div class="piece" style="display: flex;">
+            <div style="width: 77%; font-size: 16px;">
+                <div class="basicInfo_UxXSa J-basic-info">
+                    <dl class="basicInfoBlock_q4iJb left">
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">性&nbsp;&nbsp;&nbsp;&nbsp;别</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" id="sex"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">籍&nbsp;&nbsp;&nbsp;&nbsp;贯</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{nativePlace}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">加入党派时间</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{joinTime}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">单位属性</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{unitAttribute}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">是否取得境外长期居留资格</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" id="overseasResidencyStatus"></span>
+                            </dd>
+                        </div>
+                    </dl>
+                    <dl class="basicInfoBlock_q4iJb center">
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">出生年月</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{birthday}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">出&nbsp;生&nbsp;地</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{birthplace}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">参加工作时间</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{workTime}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">单位职务级别</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{jobLevel}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">取得国家</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{acquiringCountry}"></span>
+                            </dd>
+                        </div>
+                    </dl>
+                    <dl class="basicInfoBlock_q4iJb right">
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">民&nbsp;&nbsp;&nbsp;&nbsp;族</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{nation}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">政治面貌</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{party}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">党派职务</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{partyPositions}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">宗教信仰</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{religion}"></span>
+                            </dd>
+                        </div>
+                        <div class="itemWrapper_yeNiB">
+                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">证件号</dt>
+                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
+                                <span class="text_lqEdu" data-text="true" th:text="*{idNumber}"></span>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+            <div style="width: 25%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
+                <div style="width: 45%;height: 80%;"><img style="width: 100%;height: 100%"  src="../img/use/tx.png" /></div>
+                <div style="width: 60%;height: 20%;border: 1px solid grey;text-align: center;">
+                    <div>其他补充材料</div>
+                </div>
+            </div>
+        </div>
+        <div class="piece" style="font-size: 16px;">
+            <div style="display: flex;">
+                <div class="marks"></div><h3>学历&nbsp;&nbsp;学位</h3><span class="line"></span>
+            </div>
+            <div style="margin-left: 40px;border-bottom: 1px dashed grey;width: 75%;">
+                <h3>全日制教育</h3>
+                <div style="display: flex;">
+                    <div class="education">
+                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;历</div>
+                        <div th:text="*{qrzQualification}"></div>
+                    </div>
+                    <div class="education">
+                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;位</div>
+                        <div th:text="*{qrzDegree}"></div>
+                    </div>
+                    <div class="education">
+                        <div>毕业院校系及专业</div>
+                        <div th:text="*{qrzSchoolMajor}">研究生</div>
+                    </div>
+                </div>
+            </div>
+            <div style="margin-left: 40px;border-bottom: 1px dashed grey;width: 75%;margin-top:10px;">
+                <h3>在职教育</h3>
+                <div style="display: flex;">
+                    <div class="education">
+                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;历</div>
+                        <div th:text="*{zzQualification}"></div>
+                    </div>
+                    <div class="education">
+                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;位</div>
+                        <div th:text="*{zzDegree}"></div>
+                    </div>
+                    <div class="education">
+                        <div>毕业院校系及专业</div>
+                        <div th:text="*{zzSchoolMajor}"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="piece" style="margin-top: 40px;">
+            <div style="display: flex;">
+                <div class="content" id="content">
+                    <div class="section" id="title1">
+                        <div style="display: flex;">
+                            <div class="marks"></div><h3>简历</h3><span class="line"></span>
+                        </div>
+                        <div class="informationText" th:text="*{resume}"></div>
+                    </div>
+                    <div class="section" id="title2">
+                        <div style="display: flex;">
+                            <div class="marks" style="width: 4px;"></div><h3>培训情况</h3><span class="line"></span>
+                        </div>
+                        <div class="informationText" th:text="*{training}"></div>
+                    </div>
+                    <div class="section" id="title3">
+                        <div style="display: flex;">
+                            <div class="marks" style="width: 4px;"></div><h3>主要成就</h3><span class="line"></span>
+                        </div>
+                        <div class="informationText" th:text="*{achievement}"></div>
+                    </div>
+                    <div class="section" id="title4">
+                        <div style="display: flex;">
+                            <div class="marks" style="width: 4px;"></div><h3>家庭成员</h3><span class="line"></span>
+                        </div>
+                        <div class="informationText">
+                            这是内容。这里是一些示例文本，内容可以很长，测试内容测试内容测试内容<br/>
+                            测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试。
+                        </div>
+                    </div>
+                </div>
+                <div class="sidebar" id="sidebar">
+                    <div class="arrow" id="arrow"></div>
+                    <div class="title active" data-target="#title1">1&nbsp;&nbsp;简历</div>
+                    <div class="title" data-target="#title2">2&nbsp;&nbsp;培训情况</div>
+                    <div class="title" data-target="#title3">3&nbsp;&nbsp;主要成就</div>
+                    <div class="title" data-target="#title4">4&nbsp;&nbsp;家庭成员</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+<th:block th:include="include :: footer" />
+<script th:inline="javascript">
+    var prefix = ctx + "system/information";
+    var sexData = [[${@dict.getType('sys_user_sex')}]];
+    var overseasData = [[${@dict.getType('sys_yes_no')}]];
+    rollingLinkage();
+    init();
+    //数据进行初始化加载
+    function init(){
+        //多选框进行数据赋值
+        $("#sex").text($.table.selectDictLabelStr(sexData,[[${rwkStaffInformation.sex}]]));
+        $("#overseasResidencyStatus").text($.table.selectDictLabelStr(overseasData,[[${rwkStaffInformation.overseasResidencyStatus}]]));
+    }
+
+    function rollingLinkage(){
+        // 点击事件
+        var arrow = $("#arrow");
+        $('.sidebar .title').click(function() {
+            const target = $(this).data('target');
+            const targetElement = $(target);
+            let scrollPosition = 0;
+            // 计算目标标签之前的所有兄弟标签的高度
+            targetElement.prevAll().each(function() {
+                scrollPosition += parseInt($(this).css("height"));
+            });
+            // 移动箭头
+            const newArrowPosition = $(this).position().top + 11; // 更新箭头位置
+            arrow.css('top', newArrowPosition); // 更新箭头位置
+            $('.sidebar .title').removeClass('active'); // 移除所有标题的选中状态
+            $(this).addClass('active'); // 设置当前标题为选中状态
+            // 滚动左侧区域到目标内容
+            $('#content').animate({
+                scrollTop: scrollPosition
+            }, 300); // 动画效果
+        });
+    }
+</script>
+</body>
+</html>