From eed0d9c99a29546e8f9614d72cd6e44a07814044 Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Wed, 19 Mar 2025 22:16:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(iot):=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加设备状态切换功能
- 优化设备状态展示样式
- 实现设备在线状态切换
- 重构产品编辑组件，优化图片上传逻辑
---
 src/api/device.ts                             |   5 +
 src/views/iot/device/index.vue                |  50 ++++++++-
 .../iot/product/components/product-edit.vue   | 102 +++++++++---------
 3 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/src/api/device.ts b/src/api/device.ts
index 18a4ae5..c699379 100644
--- a/src/api/device.ts
+++ b/src/api/device.ts
@@ -72,6 +72,11 @@ export function queryProductByName(data: any) {
   });
 }
 
+// 设备状态
+export function toggleDeviceStatus(id: number) {
+  return axios.patch(`/api/rest/device/toggle/${id}`)
+}
+
 // 新增
 export function createDevice(data: DeviceCreateRecord) {
   return axios.post(`/api/rest/device`, data);
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index ce3d5ec..508232f 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -171,11 +171,18 @@
           <span>{{ record.id }}</span>
         </template>
         <template #state="{ record }">
-          {{ record.state == "UNACTIVATED" ? '未激活' : '激活'}}
+          <a-tag v-if="record.state == 'UNACTIVATED'" color="red">未激活</a-tag>
+          <a-tag v-else-if="record.state == 'ACTIVATED'" color="green">激活</a-tag>
+          <a-tag v-else-if="record.state == 'DISCARDED'" color="red">已报废</a-tag>
+          <a-tag v-else color="red">已锁定</a-tag>
         </template>
         <template #online="{ record }">
-          <a-tag v-if="record.online == true" color="green">在线</a-tag>
-          <a-tag v-else color="red">离线</a-tag>
+          <a-switch
+            v-model="record.online"
+            :checked-value="true"
+            :unchecked-value="false"
+            @change="handleToggleEventStatus(record)"
+          />
         </template>
         <template #operations="{ record }">
           <a-button
@@ -235,8 +242,9 @@
   import useTableOption from '@/hooks/table-option';
   import { Message } from '@arco-design/web-vue';
   import { useRouter } from 'vue-router';
-  import { deleteDevice, DeviceRecord, queryDeviceList, queryProductByName } from '@/api/device';
+  import { deleteDevice, DeviceRecord, queryDeviceList, queryProductByName, toggleDeviceStatus } from '@/api/device';
   import DeviceEdit from '@/views/iot/device/components/device-edit.vue';
+  import { enableEvent } from '@/api/tsl';
 
   const generateFormModel = () => {
     return {
@@ -257,6 +265,24 @@
   ]);
   const formModel = ref(generateFormModel());
   const router = useRouter();
+  const stateOptions = computed(() => [
+    {
+      label: '未激活',
+      value: 'UNACTIVATED',
+    },
+    {
+      label: '激活',
+      value: 'ACTIVATED',
+    },
+    {
+      label: '已报废',
+      value: 'DISCARDED',
+    },
+    {
+      label: '已锁定',
+      value: 'LOCKED',
+    },
+  ])
   const {
     cloneColumns,
     showColumns,
@@ -365,6 +391,22 @@
     search();
   };
 
+  // 切换设备状态
+  const handleToggleEventStatus = async (record: any) => {
+    try {
+      const res = await toggleDeviceStatus(record.id);
+      if (res.status === 200) {
+        Message.success({
+          content: '状态更新成功',
+          duration: 5 * 1000,
+        });
+        search();
+      }
+    } catch (error) {
+      console.error('状态更新失败:', error);
+    }
+  };
+
   // 数据条数改变
   const onSizeChange = (Size: number) => {
     pagination.value.size = Size;
diff --git a/src/views/iot/product/components/product-edit.vue b/src/views/iot/product/components/product-edit.vue
index 1646ea7..b8e937c 100644
--- a/src/views/iot/product/components/product-edit.vue
+++ b/src/views/iot/product/components/product-edit.vue
@@ -77,31 +77,31 @@
       <a-form-item field="remark" label="备注">
         <a-textarea v-model="formData.remark" placeholder="请输入备注" />
       </a-form-item>
-<!--      &lt;!&ndash; 上传预览图 &ndash;&gt;-->
-<!--      <a-form-item-->
-<!--        label="预览图"-->
-<!--      >-->
-<!--        <a-upload-->
-<!--          show-file-list-->
-<!--          :file-list="previewList"-->
-<!--          :limit="1"-->
-<!--          list-type="picture-card"-->
-<!--          :custom-request="(option: any) => customRequest(option, 'preview')"-->
-<!--          @before-remove="beforeRemove"-->
-<!--        />-->
-<!--      </a-form-item>-->
-<!--      &lt;!&ndash; 上传图标 &ndash;&gt;-->
-<!--      <a-form-item-->
-<!--        label="图标"-->
-<!--      >-->
-<!--        <a-upload-->
-<!--          show-file-list-->
-<!--          :file-list="iconList"-->
-<!--          :limit="1"-->
-<!--          :custom-request="(option: any) => customRequest(option, 'icon')"-->
-<!--          @before-remove="beforeRemove"-->
-<!--        />-->
-<!--      </a-form-item>-->
+      <!-- 上传预览图 -->
+      <a-form-item
+        label="预览图"
+      >
+        <a-upload
+          show-file-list
+          :file-list="previewList"
+          :limit="1"
+          list-type="picture-card"
+          :custom-request="(option: any) => customRequest(option, 'preview')"
+          @before-remove="beforeRemove"
+        />
+      </a-form-item>
+      <!-- 上传图标 -->
+      <a-form-item
+        label="图标"
+      >
+        <a-upload
+          show-file-list
+          :file-list="iconList"
+          :limit="1"
+          :custom-request="(option: any) => customRequest(option, 'icon')"
+          @before-remove="beforeRemove"
+        />
+      </a-form-item>
       <!-- 参数   -->
       <a-form-item field="params" label="参数">
         <div style="width: 100%">
@@ -145,9 +145,7 @@
 
     <template #footer>
       <a-button class="editor-button" @click="handleCancel">取消</a-button>
-      <a-button class="editor-button" type="primary" @click="handleSubmit"
-        >确定</a-button
-      >
+      <a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
     </template>
   </a-modal>
 </template>
@@ -255,22 +253,17 @@
     paramsData.value = res.data.params;
   };
 
-  // // 预览图列表
-  // const previewList = computed(() => {
-  //   return  {
-  //     name: formData.value.preview?.fileName,
-  //     url: formData.value.preview?.url,
-  //     uid: formData.value.preview?.id,
-  //   }
-  // });
-  // // 图标列表
-  // const iconList = computed(() => {
-  //   return {
-  //     name: formData.value.icon?.fileName,
-  //     url: formData.value.icon?.url,
-  //     uid: formData.value.icon?.id,
-  //   }
-  // });
+  // 预览图列表
+  const previewList = computed(() => {
+    const { preview }= formData.value;
+    return preview?.url ? [{ name: preview.fileName, url: preview.url, uid: preview.id }] : [];
+  });
+
+  // 图标列表
+  const iconList = computed(() => {
+    const { icon } = formData.value;
+    return icon?.url ? [{ name: icon.fileName, url: icon.url, uid: icon.id }] : [];
+  });
   // 自定义预览图上传
   const customRequest = async (option: any,type: string) => {
     const { fileItem, onSuccess, onError } = option;
@@ -295,12 +288,23 @@
   };
   // 删除图片
   const beforeRemove = async (file: any) => {
-    if (!file.uid) {
-      const res = await deleteAttachment(file.response.id);
-      return res.status === 200;
+    try {
+      const fileId = file.uid || file.response?.id;
+      if (!fileId) {
+        Message.error('无法获取图片 ID');
+      }
+      // 调用删除接口
+      const res = await deleteAttachment(fileId);
+      if (res.status === 200) {
+        // 删除成功后
+        Message.success('删除成功');
+      } else {
+        Message.error('删除失败');
+      }
+    }
+    catch (error) {
+      Message.error('删除图片失败，请稍后重试');
     }
-    const res = await deleteAttachment(file.uid);
-    return res.status === 200;
   };
 
   // 组件被点击