feat: 更新UI样式和修复路由ID冲突

董国庆

2026-04-01 0938962107f6c48e4a23e8b6bc7cb8142cebc685

feat: 更新UI样式和修复路由ID冲突

- 新增充电状态图标资源文件
- 调整车队详情页面内边距和背景色
- 修改运营车辆详情页充电记录显示样式，使用图标和颜色区分充电前后电量
- 修复路由配置中ID冲突问题
- 为多个表格添加flex-height属性以改善布局
- 注释掉开始运营失败的错误提示

 src/assets/element-img/power.png

 src/assets/element-img/powered.png

 src/router/routes.static.ts

@@ -657,7 +657,7 @@
    icon: 'icon-park-outline:auto-focus',
    menuType: 'page',
    componentPath: '/assetManagement/vehicleManagement/operatingVehicle/detail.vue',
    id: 5014,
    id: 50119,
    keepAlive: false,
    pid: 501,
    hide: true, // 不在菜单中显示
@@ -671,7 +671,7 @@
    icon: 'icon-park-outline:auto-focus',
    menuType: 'page',
    componentPath: '/assetManagement/vehicleManagement/operatingVehicle/detail.vue',
    id: 5014,
    id: 50131,
    keepAlive: false,
    pid: 501,
    hide: true, // 不在菜单中显示

 src/views/assetManagement/fleetManagement/detail.vue

@@ -822,8 +822,8 @@

<style scoped lang="scss">
.fleet-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  padding: 12px;
  // background-color: #f5f5f5;
  min-height: 100%;

  .edit {

 src/views/assetManagement/vehicleManagement/inventoryVehicle/index.vue

@@ -573,7 +573,7 @@
        getVehicleList()
      }
      else {
        window.$message.error((res as any).message || '开始运营失败')
        // window.$message.error((res as any).message || '开始运营失败')
      }
      showConfirmDialog.value = false
    },

 src/views/assetManagement/vehicleManagement/operatingVehicle/detail.vue

@@ -136,9 +136,29 @@
const chargingColumns = [
  { title: '序号', key: 'index', align: 'left' as const, width: 80, render: (row: any, index: number) => (chargingPage.value.pageNum - 1) * chargingPage.value.pageSize + index + 1 },
  { title: '记录时间', key: 'operationTime', align: 'left' as const, width: 180, render: (row: any) => row.operationTime ? dayjs(row.operationTime).format('YYYY/MM/DD HH:mm:ss') : '-' },
  { title: '充电前剩余电量', key: 'startRemainingBattery', align: 'left' as const, width: 160, render: (row: any) => row.startRemainingBattery ? `${row.startRemainingBattery}%` : '-' },
  { title: '充电前剩余电量', key: 'startRemainingBattery', align: 'left' as const, width: 160,
   render: (row: any) =>(
    <div class="flex items-center gap-4px">
              <n-image
                src="/src/assets/element-img/power.png"
                style="width:25px;height:12px"
              />
              <span style="color:#E85050;font-size: 11px;">{row.startRemainingBattery ?? "0"} km</span>
            </div>
   )
 },
  { title: '图片', key: 'startChargingPicture', align: 'left' as const, width: 140, render: (row: any) => renderImageCell(row.startChargingPicture) },
  { title: '充电后剩余电量', key: 'endRemainingBattery', align: 'left' as const, width: 160, render: (row: any) => row.endRemainingBattery ? `${row.endRemainingBattery}%` : '-' },
  { title: '充电后剩余电量', key: 'endRemainingBattery', align: 'left' as const, width: 160, 
  render: (row: any) => (
    row.endRemainingBattery ? <div class="flex items-center gap-4px">
              <n-image
                src="/src/assets/element-img/powered.png"
                style="width:25px;height:12px"
              />
              <span style="color:#06B752;font-size: 11px;">{row.endRemainingBattery ?? "0"} km</span>
            </div> : '-'
  )
},
  { title: '图片', key: 'endChargingPicture', align: 'left' as const, width: 140, render: (row: any) => renderImageCell(row.endChargingPicture) },
  { title: '充电时间', key: 'chargingTime', align: 'left' as const, width: 240, render: (row: any) =>
(
@@ -1488,7 +1508,7 @@
        <NTabs v-model:value="activeTab" type="line" animated>
          <!-- 年检记录 -->
          <NTabPane name="inspection" tab="年检记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <!-- 搜索区域 -->
              <NCard :bordered="false" class="search-form-card">
                <NForm
@@ -1546,6 +1566,7 @@
                :data="inspectionRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="inspectionScrollX"
                striped
              >
@@ -1572,7 +1593,7 @@

          <!-- 整备记录 -->
          <NTabPane name="preparation" tab="整备记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <!-- 搜索区域 -->
              <NCard :bordered="false" class="search-form-card">
                <NForm
@@ -1629,6 +1650,8 @@
                :columns="preparationColumns"
                :data="preparationRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="preparationScrollX"
                striped
              >
@@ -1654,7 +1677,7 @@
          </NTabPane>
          <!-- 车辆清洁 -->
          <NTabPane name="clean" tab="车辆清洁" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <!-- 搜索区域 -->
              <NCard :bordered="false" class="search-form-card">
                <NForm
@@ -1709,6 +1732,7 @@
                :data="cleanRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="cleanScrollX"
                striped
              >
@@ -1735,7 +1759,7 @@

          <!-- 充电记录 -->
          <NTabPane name="charging" tab="充电记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <!-- 搜索区域 -->
              <NCard :bordered="false" class="search-form-card">
                <NForm
@@ -1790,6 +1814,7 @@
                :data="chargingRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="chargingScrollX"
                striped
              >
@@ -1816,7 +1841,7 @@

          <!-- 检测记录 -->
          <NTabPane name="detection" tab="检测记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <NCard :bordered="false" class="search-form-card">
                <NForm
                  inline
@@ -1870,6 +1895,7 @@
                :data="detectionRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="detectionScrollX"
                striped
              >
@@ -1896,7 +1922,7 @@

          <!-- 维修记录 -->
          <NTabPane name="maintenance" tab="维修记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <NCard :bordered="false" class="search-form-card">
                <NForm
                  inline
@@ -1962,6 +1988,7 @@
                :data="maintenanceRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="maintenanceScrollX"
                striped
              >
@@ -1985,10 +2012,10 @@
              />
            </div>
          </NTabPane>
          

          <!-- 任务/事故记录 -->
          <NTabPane name="task" tab="任务/事故记录" class="h-full flex-1">
            <div class="flex flex-col h-full" >
            <div class="flex flex-col h-full">
              <NCard :bordered="false" class="search-form-card">
                <NForm
                  inline
@@ -2104,6 +2131,7 @@
                :data="taskRecords"
                :loading="loading"
                class="flex-1"
                flex-height
                :scroll-x="taskScrollX"
                striped
              >
@@ -2298,7 +2326,6 @@
          align-items: center;
          font-size: 13px;


          .detail-label {
            color: rgba(23, 31, 38, 0.6);
            font-size: 13px;
@@ -2441,12 +2468,11 @@
  }
}


.n-tabs{
.n-tabs {
  height: 100%;
  display: flex;
}
::v-deep .n-tabs-pane-wrapper{
::v-deep .n-tabs-pane-wrapper {
  flex: 1;
}
</style>

 src/views/operations/taskOrder/taskOrderCenter/components/RegularDetailModal.vue

@@ -346,8 +346,12 @@
        <div class="flex items-center mt-16px">
          <div class="flex-1">
            <div class="kv-label">开始充电前电量</div>
            <div class="kv-value">
              {{ currentDetail.startRemainingBattery ?? "-" }}%
            <div class="flex items-center gap-4px">
              <n-image
                src="/src/assets/element-img/power.png"
                style="width:25px;height:12px"
              />
              <span style="color:#E85050;font-size: 11px;">{{currentDetail.startRemainingBattery ?? "-"}} km</span>
            </div>
          </div>
          <div class="flex-1">
@@ -360,8 +364,15 @@
        <div class="flex items-center mt-16px">
          <div class="flex-1">
            <div class="kv-label">充电后电量</div>
            <div class="kv-value">
            <!-- <div class="kv-value">
              {{ currentDetail.endRemainingBattery ?? "-" }}%
            </div> -->
            <div class="flex items-center gap-4px">
              <n-image
                src="/src/assets/element-img/powered.png"
                style="width:25px;height:12px"
              />
              <span style="color:#06B752;font-size: 11px;">{{currentDetail.endRemainingBattery ?? "-"}} km</span>
            </div>
          </div>
          <div class="flex-1">