From 99b24c107cf5e78d4167a446a5f74161cb576d56 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 14 Dec 2024 20:44:58 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=91IoT=EF=BC=9A=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=A2=9E=E5=8A=A0=E8=AE=BE=E5=A4=87=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=9E=9A=E4=B8=BE=E5=8F=8A=E7=8A=B6=E6=80=81=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts           |  8 +++++
 src/views/iot/device/device/index.vue | 47 ++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index a483484d..c618bb19 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -55,6 +55,14 @@ export interface DeviceHistoryDataVO {
   data: string // 数据
 }
 
+// IoT 设备状态枚举
+export enum DeviceStatusEnum {
+  INACTIVE = 0, // 未激活
+  ONLINE = 1,   // 在线
+  OFFLINE = 2,  // 离线
+  DISABLED = 3  // 已禁用
+}
+
 // 设备 API
 export const DeviceApi = {
   // 查询设备分页
diff --git a/src/views/iot/device/device/index.vue b/src/views/iot/device/device/index.vue
index bcc2df21..f4a3702f 100644
--- a/src/views/iot/device/device/index.vue
+++ b/src/views/iot/device/device/index.vue
@@ -150,14 +150,45 @@
     <template v-if="viewMode === 'card'">
       <el-row :gutter="16">
         <el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
-          <el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
-            <div class="p-4">
+          <el-card
+            class="h-full transition-colors relative overflow-hidden"
+            :body-style="{ padding: '0' }"
+          >
+            <!-- 添加渐变背景层 -->
+            <div
+              class="absolute top-0 left-0 right-0 h-[50px] pointer-events-none"
+              :class="[
+                item.status === DeviceStatusEnum.ONLINE
+                  ? 'bg-gradient-to-b from-[#eefaff] to-transparent'
+                  : 'bg-gradient-to-b from-[#fff1f1] to-transparent'
+              ]"
+            >
+            </div>
+            <div class="p-4 relative">
               <!-- 标题区域 -->
               <div class="flex items-center mb-3">
                 <div class="mr-2.5 flex items-center">
                   <el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
                 </div>
-                <div class="text-[16px] font-600">{{ item.deviceName }}</div>
+                <div class="text-[16px] font-600 flex-1">{{ item.deviceName }}</div>
+                <!-- 添加设备状态标签 -->
+                <div class="inline-flex items-center">
+                  <div
+                    class="w-1 h-1 rounded-full mr-1.5"
+                    :class="
+                      item.status === DeviceStatusEnum.ONLINE
+                        ? 'bg-[var(--el-color-success)]'
+                        : 'bg-[var(--el-color-danger)]'
+                    "
+                  >
+                  </div>
+                  <el-text
+                    class="!text-xs font-bold"
+                    :type="item.status === DeviceStatusEnum.ONLINE ? 'success' : 'danger'"
+                  >
+                    {{ getDictLabel(DICT_TYPE.IOT_DEVICE_STATUS, item.status) }}
+                  </el-text>
+                </div>
               </div>
 
               <!-- 信息区域 -->
@@ -186,7 +217,7 @@
               <!-- 分隔线 -->
               <el-divider class="!my-3" />
 
-              <!-- 按钮组 -->
+              <!-- 按钮 -->
               <div class="flex items-center px-0">
                 <el-button
                   class="flex-1 !px-2 !h-[32px] text-[13px]"
@@ -327,9 +358,9 @@
 </template>
 
 <script setup lang="ts">
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceVO, DeviceStatusEnum } from '@/api/iot/device'
 import DeviceForm from './DeviceForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product/product'
 import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
@@ -342,7 +373,7 @@ defineOptions({ name: 'IoTDevice' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
-const loading = ref(true) // 列表的加载中
+const loading = ref(true) // 列表���加载中
 const list = ref<DeviceVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
@@ -389,7 +420,7 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 添加/修改操作 */
+/** ���加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)