feat：报警列表 加油站名称列显示效果

admin.ui.plus-master/src/api/admin/reportManagement/alarm/alarmDto.ts

@@ -50,6 +50,7 @@ export  interface alarmFilterModel_SearchFilter{
     CreateBeginTime?: string,
     /**创建结束的时间 */
     CreateEndTime?: string,
+    truncatedGasStation?:string
   }
   
   /**

admin.ui.plus-master/src/views/admin/statement/alarmManagement/index.vue

@@ -90,6 +90,12 @@
                     {{ row.alarmDescription }}
                   </span>
                 </el-tooltip>
+
+              </template>
+              <template v-else-if="column.prop === 'gasStation'">      
+                <el-tooltip placement="top" effect="light" :content="row.gasStation">
+                  <div class="truncated-name">{{ row.truncatedGasStation }}</div>
+                </el-tooltip>
               </template>
                 <template v-else>
                   {{ row[column.prop] }}
@@ -162,7 +168,7 @@ const Data = reactive({
   } as alarmFilterModel_SearchFilter,
   tableModel: [] as Array<alarmFilterModel>,
   dynamicColumns: [
-    { prop: 'gasStation', label: '加油站名称' },
+    { prop: 'gasStation', label: '加油站名称',width: 300 },
     { prop: 'name', label: '油机号' },
     { prop: 'serialNumber', label: '序列号' },
     { prop: 'alarmSource', label: '报警来源' },
@@ -195,18 +201,33 @@ enum FuelDispenserEnum {
 
 /**初始化 */
 const init = async () => {
-  Data.loading = true
-  const res: any = await new AlarmApi().getPage({ ...Data.pageInput, filter: Data.Filter })
-  Data.tableModel = res?.data?.list ?? []
-  Data.total = res?.data?.total ?? 0
-  Data.loading = false
+  Data.loading = true;
+  const res: any = await new AlarmApi().getPage({ ...Data.pageInput, filter: Data.Filter });
+  Data.tableModel = res?.data?.list ?? [];
+  
+  // 处理加油站名称：显示后六个字，不足六个字则显示全部
+  Data.tableModel.forEach(row => {
+    const name = row.gasStation || '';
+    row.truncatedGasStation = name.length > 6 
+      ? name.slice(-6) + '...' // 后六个字+省略号
+      : name;
+  });
+  
+  Data.total = res?.data?.total ?? 0;
+  Data.loading = false;
 }
 
 onMounted(async () => {
   Data.pageInput.pageSize = pageState.pageInput.pageSize;
-  await onQuery()
-  init()
-})
+  await onQuery();
+  init();
+  
+  // 处理加油站名称截断
+  Data.tableModel.forEach(row => {
+    const name = row.gasStation || '';
+    row.gasStation = name.length > 6 ? `${name.slice(-6)}...` : name;
+  });
+});
 
 /**
  * 监听时间变换
@@ -348,4 +369,22 @@ const handlePushRules = async () => {
   line-height: 1.5;
   min-height: 3em;
 }
+
+/* 加油站名称截断样式 */
+.truncated-name {
+  display: inline-block;
+  min-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  
+  /* 核心逻辑：通过伪元素实现后六位显示 */
+  &::before {
+    content: attr(data-truncated);
+    position: absolute;
+    right: 0;
+  }
+  
+}
+
 </style>

admin.ui.plus-master/src/views/admin/yujing/alarmRules/components/add-alarmRules.vue

@@ -830,4 +830,6 @@ defineExpose({
   border-radius: 4px;
   background-color: #fafafa;
 }
+
+
 </style>