fix: 修复“勤务执行”模块，table表格仿真数据内容展示。调整样式属性，解决布局错乱问题。

src/views/Home.vue

@@ -251,18 +251,18 @@
             <table class="tbl">
               <thead>
                 <tr>
-                  <th style="width:52px;">序号</th>
-                  <th>名称</th>
-                  <th style="width:86px;">执行人</th>
-                  <th style="width:68px;">等级</th>
-                  <th style="width:78px;">状态</th>
-                  <th style="width:64px;">操作</th>
+                  <th style="width: 12%;">序号</th>
+                  <th style="width: 30%;">名称</th>
+                  <th style="width: 15%;">执行人</th>
+                  <th style="width: 15%;">等级</th>
+                  <th style="width: 15%;">状态</th>
+                  <th style="width: 13%;">操作</th>
                 </tr>
               </thead>
               <tbody :style="dutyScrollStyle">
                 <tr v-for="(r,i) in duty" :key="r.id" :class="{ hl: activeDutyId === r.id }">
                   <td>{{ i + 1 }}</td>
-                  <td class="name">{{ r.name }}</td>
+                  <td :title="r.name" class="name">{{ r.name }}</td>
                   <td>{{ r.executor }}</td>
                   <td><span class="tag" :class="'lv' + r.level">{{ r.levelText }}</span></td>
                   <td><span class="st" :class="r.statusKey">{{ r.status }}</span></td>
@@ -380,12 +380,13 @@ deviceTab: "signal",
         { id: "a1", level: 1, levelText: "一级", title: "通讯中断", loc: "中关村大街-科学院南路口-设备离线", time: "16:28:28" },
         { id: "a2", level: 2, levelText: "二级", title: "降级黄闪", loc: "中关村大街-科学院南路口-设备离线", time: "16:28:28" },
         { id: "a3", level: 3, levelText: "三级", title: "信号灯报警", loc: "知春路-学院路口-信号灯异常", time: "16:18:02" }
-      ],      duty: [
-        { id: "d1", name: "测试", executor: "测试", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
-        { id: "d2", name: "张飞", executor: "张飞", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
-        { id: "d3", name: "关将", executor: "关将", level: 2, levelText: "二级", statusKey: "doing", status: "进行中" },
-        { id: "d4", name: "刘备", executor: "刘备", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
-        { id: "d5", name: "孙权", executor: "孙权", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" }
+      ],
+      duty: [
+        { id: "d1", name: "大型活动交通安保", executor: "赵刚", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
+        { id: "d2", name: "道路施工路段交通引导", executor: "林小宇", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
+        { id: "d3", name: "酒驾醉驾专项查缉", executor: "周婷", level: 2, levelText: "二级", statusKey: "doing", status: "进行中" },
+        { id: "d4", name: "交通信号灯故障排查", executor: "吴磊", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" },
+        { id: "d5", name: "应急救援通道清障", executor: "郑晓东", level: 1, levelText: "一级", statusKey: "wait", status: "未开始" }
       ],
       dutyScrollOffset: 0,
       activeDutyId: "",
@@ -1086,12 +1087,13 @@ onlineChart: null,
   flex:1;
   min-height:0;
   overflow:auto;
- height:100%; overflow:hidden; }
+  height:100%; overflow:hidden; }
 .tbl{
   width:100%;
   border-collapse: collapse;
   color: rgba(220,250,255,0.86);
   font-size: 12px;
+  table-layout: fixed;
 }
 .tbl thead th{
   position:sticky;
@@ -1102,12 +1104,23 @@ onlineChart: null,
   font-weight: 900;
   border-bottom: 1px solid rgba(80,200,255,0.12);
   padding: 8px 6px;
+  text-align: center;
+  box-sizing: border-box;
 }
 .tbl td{
   padding: 8px 6px;
   border-bottom: 1px solid rgba(80,200,255,0.10);
+  text-align: center;
+  box-sizing: border-box;
+}
+.tbl .name{
+  color: rgba(235,255,255,0.92); 
+  font-weight: 800;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
 }
-.tbl .name{ color: rgba(235,255,255,0.92); font-weight: 800; }
 .tbl tbody tr.hl{ background: rgba(0,200,255,0.10); }
 .tag{
   display:inline-flex;