|
|
@@ -243,184 +243,198 @@ const openDetail = (
|
|
|
<div class="flex-1 relative">
|
|
|
<el-auto-resizer class="absolute">
|
|
|
<template #default="{ width, height }">
|
|
|
- <zm-table
|
|
|
- v-if="viewMode === 'list'"
|
|
|
- :data="list"
|
|
|
- :loading="loading"
|
|
|
- :width="width"
|
|
|
- :max-height="height"
|
|
|
- :height="height"
|
|
|
- >
|
|
|
- <zm-table-column type="index" :label="t('monitor.serial')" :width="60" />
|
|
|
- <zm-table-column prop="deviceName" :label="t('monitor.deviceName')" />
|
|
|
- <zm-table-column prop="deviceCode" :label="t('monitor.deviceCode')" />
|
|
|
- <zm-table-column prop="assetClassName" :label="t('monitor.category')" />
|
|
|
- <zm-table-column prop="deviceStatus" :label="t('monitor.status')">
|
|
|
- <template #default="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- <zm-table-column prop="ifInline" :label="t('monitor.ifInline')">
|
|
|
- <template #default="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.ifInline" />
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- <zm-table-column prop="lastInlineTime" :label="t('monitor.latestDataTime')" />
|
|
|
- <zm-table-column :label="t('monitor.operation')" :width="60">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- link
|
|
|
- type="primary"
|
|
|
- @click="
|
|
|
- openDetail(
|
|
|
- scope.row.id,
|
|
|
- scope.row.ifInline,
|
|
|
- scope.row.lastInlineTime,
|
|
|
- scope.row.deviceName,
|
|
|
- scope.row.deviceCode,
|
|
|
- scope.row.deptName,
|
|
|
- scope.row.vehicleName,
|
|
|
- scope.row.carOnline ?? ''
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- {{ t('monitor.check') }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- </zm-table>
|
|
|
- <el-scrollbar
|
|
|
- v-else
|
|
|
- :height="height"
|
|
|
- :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-[0_8px_20px_rgba(0,0,0,0.1)] hover:-translate-y-1 transition-all duration-300 overflow-hidden"
|
|
|
+ <template v-if="list.length > 0">
|
|
|
+ <zm-table
|
|
|
+ v-if="viewMode === 'list'"
|
|
|
+ :data="list"
|
|
|
+ :loading="loading"
|
|
|
+ :width="width"
|
|
|
+ :max-height="height"
|
|
|
+ :height="height"
|
|
|
+ >
|
|
|
+ <zm-table-column type="index" :label="t('monitor.serial')" :width="60" />
|
|
|
+ <zm-table-column prop="deviceName" :label="t('monitor.deviceName')" />
|
|
|
+ <zm-table-column prop="deviceCode" :label="t('monitor.deviceCode')" />
|
|
|
+ <zm-table-column prop="assetClassName" :label="t('monitor.category')" />
|
|
|
+ <zm-table-column prop="deviceStatus" :label="t('monitor.status')">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
|
|
|
+ </template>
|
|
|
+ </zm-table-column>
|
|
|
+ <zm-table-column prop="ifInline" :label="t('monitor.ifInline')">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.ifInline" />
|
|
|
+ </template>
|
|
|
+ </zm-table-column>
|
|
|
+ <zm-table-column prop="lastInlineTime" :label="t('monitor.latestDataTime')" />
|
|
|
+ <zm-table-column :label="t('monitor.operation')" :width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="
|
|
|
+ openDetail(
|
|
|
+ scope.row.id,
|
|
|
+ scope.row.ifInline,
|
|
|
+ scope.row.lastInlineTime,
|
|
|
+ scope.row.deviceName,
|
|
|
+ scope.row.deviceCode,
|
|
|
+ scope.row.deptName,
|
|
|
+ scope.row.vehicleName,
|
|
|
+ scope.row.carOnline ?? ''
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ t('monitor.check') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </zm-table-column>
|
|
|
+ </zm-table>
|
|
|
+ <el-scrollbar
|
|
|
+ v-else
|
|
|
+ :height="height"
|
|
|
+ :class="width"
|
|
|
+ view-class="grid grid-cols-4 grid-rows-3 gap-4 p-4"
|
|
|
>
|
|
|
<div
|
|
|
- class="h-[80px] px-4 flex items-center justify-between overflow-hidden"
|
|
|
- :class="getStatusConfig(item.ifInline).bg"
|
|
|
+ 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-[0_8px_20px_rgba(0,0,0,0.1)] hover:-translate-y-1 transition-all duration-300 overflow-hidden"
|
|
|
>
|
|
|
- <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>
|
|
|
+ <div
|
|
|
+ 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-[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>
|
|
|
|
|
|
- <!-- 文本区域 -->
|
|
|
- <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 leading-tight"
|
|
|
- :title="item.deviceName"
|
|
|
- >
|
|
|
- {{ item.deviceName }}
|
|
|
- </span>
|
|
|
- </el-tooltip>
|
|
|
+ <!-- 文本区域 -->
|
|
|
+ <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 leading-tight"
|
|
|
+ :title="item.deviceName"
|
|
|
+ >
|
|
|
+ {{ item.deviceName }}
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
- <span class="text-white/80 text-xs font-mono truncate mt-0.5">
|
|
|
- {{ item.deviceCode }}
|
|
|
- </span>
|
|
|
+ <span class="text-white/80 text-xs font-mono truncate mt-0.5">
|
|
|
+ {{ item.deviceCode }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="z-10 shrink-0">
|
|
|
- <div
|
|
|
- class="flex items-center gap-1.5 bg-black/20 backdrop-blur-md px-2.5 py-1 rounded-full text-xs font-medium text-white shadow-sm border border-white/10"
|
|
|
- >
|
|
|
+ <div class="z-10 shrink-0">
|
|
|
<div
|
|
|
- class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"
|
|
|
- v-if="item.ifInline === 3"
|
|
|
+ class="flex items-center gap-1.5 bg-black/20 backdrop-blur-md px-2.5 py-1 rounded-full text-xs font-medium text-white shadow-sm border border-white/10"
|
|
|
>
|
|
|
+ <div
|
|
|
+ class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"
|
|
|
+ v-if="item.ifInline === 3"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <Icon :icon="getStatusConfig(item.ifInline).icon" v-else />
|
|
|
+ <span>{{ getStatusConfig(item.ifInline).label }}</span>
|
|
|
</div>
|
|
|
- <Icon :icon="getStatusConfig(item.ifInline).icon" v-else />
|
|
|
- <span>{{ getStatusConfig(item.ifInline).label }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 内容区域 -->
|
|
|
- <div
|
|
|
- class="flex-1 p-4 flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300 relative z-20 bg-white dark:bg-[#262727]"
|
|
|
- >
|
|
|
- <!-- 编码行 -->
|
|
|
- <div class="flex items-center justify-between pb-2">
|
|
|
- <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
- <Icon icon="ep:postcard" /> 设备编码
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="font-mono font-medium truncate max-w-[140px] select-all"
|
|
|
- :title="item.deviceCode"
|
|
|
- >
|
|
|
- {{ item.deviceCode }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div
|
|
|
+ class="flex-1 p-4 flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300 relative z-20 bg-white dark:bg-[#262727]"
|
|
|
+ >
|
|
|
+ <!-- 编码行 -->
|
|
|
+ <div class="flex items-center justify-between pb-2">
|
|
|
+ <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
+ <Icon icon="ep:postcard" /> 设备编码
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="font-mono font-medium truncate max-w-[140px] select-all"
|
|
|
+ :title="item.deviceCode"
|
|
|
+ >
|
|
|
+ {{ item.deviceCode }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 类别行 -->
|
|
|
- <div class="flex items-center justify-between pb-2">
|
|
|
- <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
- <Icon icon="ep:price-tag" /> 设备类别
|
|
|
- </span>
|
|
|
- <el-tag
|
|
|
- size="small"
|
|
|
- type="info"
|
|
|
- effect="light"
|
|
|
- round
|
|
|
- class="!bg-gray-100 dark:!bg-gray-800 !border-gray-200 dark:!border-gray-600"
|
|
|
- >
|
|
|
- {{ item.assetClassName || '-' }}
|
|
|
- </el-tag>
|
|
|
+ <!-- 类别行 -->
|
|
|
+ <div class="flex items-center justify-between pb-2">
|
|
|
+ <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
+ <Icon icon="ep:price-tag" /> 设备类别
|
|
|
+ </span>
|
|
|
+ <el-tag
|
|
|
+ size="small"
|
|
|
+ type="info"
|
|
|
+ effect="light"
|
|
|
+ round
|
|
|
+ class="!bg-gray-100 dark:!bg-gray-800 !border-gray-200 dark:!border-gray-600"
|
|
|
+ >
|
|
|
+ {{ item.assetClassName || '-' }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 时间行 -->
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
+ <Icon icon="ep:clock" /> 最后上线
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="text-xs font-medium"
|
|
|
+ :class="
|
|
|
+ item.lastInlineTime ? 'text-gray-600 dark:text-gray-300' : 'text-gray-300'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.lastInlineTime || '暂无记录' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 时间行 -->
|
|
|
- <div class="flex items-center justify-between">
|
|
|
- <span class="text-gray-400 text-xs flex items-center gap-1.5">
|
|
|
- <Icon icon="ep:clock" /> 最后上线
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="text-xs font-medium"
|
|
|
- :class="
|
|
|
- item.lastInlineTime ? 'text-gray-600 dark:text-gray-300' : 'text-gray-300'
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.lastInlineTime || '暂无记录' }}
|
|
|
- </span>
|
|
|
+ <!-- 底部操作栏 -->
|
|
|
+ <div
|
|
|
+ class="px-4 py-2.5 bg-gray-50/80 dark:bg-[#1d1e1f] flex justify-between items-center group-hover:bg-blue-50/30 dark:group-hover:bg-blue-900/10 transition-colors"
|
|
|
+ >
|
|
|
+ <span class="text-[10px] text-gray-400"></span>
|
|
|
+ <!-- <span class="text-[10px] text-gray-400">ID: {{ item.id }}</span> -->
|
|
|
+ <el-button type="primary" link size="small" class="!px-0 group/btn">
|
|
|
+ <span
|
|
|
+ class="mr-1 group-hover/btn:underline"
|
|
|
+ @click="
|
|
|
+ openDetail(
|
|
|
+ item.id,
|
|
|
+ item.ifInline,
|
|
|
+ item.lastInlineTime,
|
|
|
+ item.deviceName,
|
|
|
+ item.deviceCode,
|
|
|
+ item.deptName,
|
|
|
+ item.vehicleName,
|
|
|
+ item.carOnline ?? ''
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >查看详情</span
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ icon="ep:arrow-right"
|
|
|
+ class="group-hover/btn:translate-x-1 transition-transform"
|
|
|
+ />
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ :style="{ width: width + 'px', height: height + 'px' }"
|
|
|
+ class="flex flex-col items-center justify-center text-gray-400"
|
|
|
+ >
|
|
|
+ <div class="i-lucide-inbox text-5xl mb-4 op-50"></div>
|
|
|
|
|
|
- <!-- 底部操作栏 -->
|
|
|
- <div
|
|
|
- class="px-4 py-2.5 bg-gray-50/80 dark:bg-[#1d1e1f] flex justify-between items-center group-hover:bg-blue-50/30 dark:group-hover:bg-blue-900/10 transition-colors"
|
|
|
- >
|
|
|
- <span class="text-[10px] text-gray-400"></span>
|
|
|
- <!-- <span class="text-[10px] text-gray-400">ID: {{ item.id }}</span> -->
|
|
|
- <el-button type="primary" link size="small" class="!px-0 group/btn">
|
|
|
- <span
|
|
|
- class="mr-1 group-hover/btn:underline"
|
|
|
- @click="
|
|
|
- openDetail(
|
|
|
- item.id,
|
|
|
- item.ifInline,
|
|
|
- item.lastInlineTime,
|
|
|
- item.deviceName,
|
|
|
- item.deviceCode,
|
|
|
- item.deptName,
|
|
|
- item.vehicleName,
|
|
|
- item.carOnline ?? ''
|
|
|
- )
|
|
|
- "
|
|
|
- >查看详情</span
|
|
|
- >
|
|
|
- <Icon
|
|
|
- icon="ep:arrow-right"
|
|
|
- class="group-hover/btn:translate-x-1 transition-transform"
|
|
|
- />
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
+ <p class="text-sm font-medium">暂无相关数据</p>
|
|
|
+ <p class="text-xs mt-1 op-60">尝试调整过滤条件或刷新页面</p>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-auto-resizer>
|
|
|
</div>
|
Zimo