🦄 refactor(连油监控): 调整卡片列表样式，调整webSocket连接地址

src/utils/useSocketBus.ts

@@ -4,7 +4,7 @@ import { useWebSocket } from '@vueuse/core'
 type EventHandler = (data: any) => void
 
 export function useSocketBus(deviceCode: string) {
-  const url = `ws://172.21.10.65:8080/ws/${deviceCode}`
+  const url = `${import.meta.env.VITE_BASE_URL}/ws/${deviceCode}`
   // const url = `ws://192.168.188.149:8080/ws/${deviceCode}`
 
   // 响应式状态

src/views/oli-connection/monitoring/index.vue

@@ -292,93 +292,6 @@ const openDetail = (
               :class="width"
               view-class="grid grid-cols-4 grid-rows-3 gap-4 p-4"
             >
-              <!-- <div
-                v-for="item in list"
-                :key="item.id"
-                class="group relative flex flex-col bg-white dark:bg-[#262727] rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden"
-              >
-                <div
-                  class="h-[110px] px-4 pt-3 pb-1 flex flex-col justify-between"
-                  :class="getStatusConfig(item.ifInline).bg"
-                >
-                  <div class="flex justify-between items-center text-white">
-                    <div class="bg-white/20 p-1.5 rounded-full backdrop-blur-sm">
-                      <Icon icon="ep:cpu" class="text-lg" />
-                    </div>
-
-                    <div
-                      class="flex items-center gap-1 bg-black/20 backdrop-blur-md px-2 py-0.5 rounded-full text-xs font-medium"
-                    >
-                      <Icon :icon="getStatusConfig(item.ifInline).icon" />
-                      <span>{{ getStatusConfig(item.ifInline).label }}</span>
-                    </div>
-                  </div>
-
-                  <div class="text-white mb-1">
-                    <div class="text-lg font-bold truncate drop-shadow-md" :title="item.deviceName">
-                      {{ item.deviceName }}
-                    </div>
-                    <div class="text-xs opacity-80 font-mono truncate">
-                      {{ item.deviceCode }}
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  class="flex-1 p-4 flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300"
-                >
-                  <div
-                    class="flex items-center justify-between border-b border-gray-50 dark:border-gray-700 pb-2"
-                  >
-                    <span class="text-gray-400 text-xs flex items-center gap-1">
-                      <Icon icon="ep:postcard" /> 编码
-                    </span>
-                    <span
-                      class="font-mono font-medium truncate max-w-[140px]"
-                      :title="item.deviceCode"
-                    >
-                      {{ item.deviceCode }}
-                    </span>
-                  </div>
-
-                  <div
-                    class="flex items-center justify-between border-b border-gray-50 dark:border-gray-700 pb-2"
-                  >
-                    <span class="text-gray-400 text-xs flex items-center gap-1">
-                      <Icon icon="ep:price-tag" /> 类别
-                    </span>
-                    <el-tag
-                      size="small"
-                      type="info"
-                      effect="plain"
-                      class="!border-none !bg-gray-100 dark:!bg-gray-800"
-                    >
-                      {{ item.assetClassName || '-' }}
-                    </el-tag>
-                  </div>
-
-                  <div class="flex items-center justify-between">
-                    <span class="text-gray-400 text-xs flex items-center gap-1">
-                      <Icon icon="ep:clock" /> 最后上线
-                    </span>
-                    <span class="text-xs">
-                      {{ item.lastInlineTime || '从未上线' }}
-                    </span>
-                  </div>
-                </div>
-
-                <div
-                  class="p-3 bg-gray-50 dark:bg-[#1d1e1f] border-t border-gray-100 dark:border-gray-700 flex justify-end"
-                >
-                  <el-button
-                    type="primary"
-                    link
-                    class="!px-2 group-hover:scale-105 transition-transform"
-                  >
-                    查看详情 <Icon icon="ep:arrow-right" class="ml-1" />
-                  </el-button>
-                </div>
-              </div> -->
               <div
                 v-for="item in list"
                 :key="item.id"
@@ -388,7 +301,7 @@ const openDetail = (
                   class="h-[80px] px-4 flex items-center justify-between overflow-hidden"
                   :class="getStatusConfig(item.ifInline).bg"
                 >
-                  <div class="flex items-center gap-3 z-10 max-w-[95%]">
+                  <div class="flex items-center gap-3 z-10 max-w-[80%]">
                     <div class="bg-white/20 p-2 rounded-lg backdrop-blur-md shadow-inner shrink-0">
                       <Icon :icon="item.carId ? 'ep:van' : 'ep:cpu'" class="text-xl text-white" />
                     </div>
@@ -397,7 +310,7 @@ const openDetail = (
                     <div class="flex flex-col overflow-hidden">
                       <el-tooltip effect="dark" :content="item.deviceName" placement="top-start">
                         <span
-                          class="text-white font-bold text-base truncate leading-tight"
+                          class="text-white font-bold text-base leading-tight"
                           :title="item.deviceName"
                         >
                           {{ item.deviceName }}