From 77e0a763891007befafe8e73dbf671b3318df1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Wed, 1 Jan 2025 20:41:59 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91IOT:=20=E6=9B=B4=E6=96=B0=E6=8F=92=E4=BB=B6=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=AD=97=E6=AE=B5=E5=90=8D=E4=B8=BA=E2=80=9CfileName?=
 =?UTF-8?q?=E2=80=9D=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=A7=86=E5=9B=BE=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=8F=92=E4=BB=B6=E8=AF=A6=E6=83=85=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/plugininfo/index.ts       |   2 +-
 src/views/iot/plugin/detail/index.vue |  18 +-
 src/views/iot/plugin/index.vue        | 226 ++++++++++++++++++++------
 3 files changed, 193 insertions(+), 53 deletions(-)

diff --git a/src/api/iot/plugininfo/index.ts b/src/api/iot/plugininfo/index.ts
index 21dfce42..49a79bbf 100644
--- a/src/api/iot/plugininfo/index.ts
+++ b/src/api/iot/plugininfo/index.ts
@@ -7,7 +7,7 @@ export interface PluginInfoVO {
   name: string // 插件名称
   description: string // 描述
   deployType: number // 部署方式
-  file: string // 插件包文件名
+  fileName: string // 插件包文件名
   version: string // 插件版本
   type: number // 插件类型
   protocol: string // 设备插件协议类型
diff --git a/src/views/iot/plugin/detail/index.vue b/src/views/iot/plugin/detail/index.vue
index 9b402924..b5f69e6d 100644
--- a/src/views/iot/plugin/detail/index.vue
+++ b/src/views/iot/plugin/detail/index.vue
@@ -55,7 +55,21 @@ import PluginImportForm from './PluginImportForm.vue'
 
 const message = useMessage()
 const route = useRoute()
-const pluginInfo = ref<PluginInfoVO>({})
+const pluginInfo = ref<PluginInfoVO>({
+  id: 0,
+  pluginKey: '',
+  name: '',
+  description: '',
+  version: '',
+  status: 0,
+  deployType: 0,
+  fileName: '',
+  type: 0,
+  protocol: '',
+  configSchema: '',
+  config: '',
+  script: ''
+})
 const isInitialLoad = ref(true) // 初始化标志位
 
 onMounted(() => {
@@ -98,4 +112,4 @@ const importFormRef = ref()
 const handleImport = () => {
   importFormRef.value.open()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/iot/plugin/index.vue b/src/views/iot/plugin/index.vue
index 3cd5f94a..eeecd79c 100644
--- a/src/views/iot/plugin/index.vue
+++ b/src/views/iot/plugin/index.vue
@@ -33,6 +33,16 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item class="float-right !mr-0 !mb-0">
+        <el-button-group>
+          <el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
+            <Icon icon="ep:grid" />
+          </el-button>
+          <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
+            <Icon icon="ep:list" />
+          </el-button>
+        </el-button-group>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -50,57 +60,154 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="插件名称" align="center" prop="name" />
-      <el-table-column label="插件标识" align="center" prop="pluginKey" />
-      <el-table-column label="jar包" align="center" prop="file" />
-      <el-table-column label="版本号" align="center" prop="version" />
-      <el-table-column label="部署方式" align="center" prop="deployType">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center" min-width="120px">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openDetail(scope.row.id)"
-            v-hasPermi="['iot:product:query']"
+    <template v-if="viewMode === 'list'">
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="插件名称" align="center" prop="name" />
+        <el-table-column label="插件标识" align="center" prop="pluginKey" />
+        <el-table-column label="jar包" align="center" prop="file" />
+        <el-table-column label="版本号" align="center" prop="version" />
+        <el-table-column label="部署方式" align="center" prop="deployType">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              :active-value="1"
+              :inactive-value="0"
+              @change="handleStatusChange(scope.row.id, Number($event))"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+        <el-table-column label="操作" align="center" min-width="120px">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openDetail(scope.row.id)"
+              v-hasPermi="['iot:product:query']"
+            >
+              查看
+            </el-button>
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['iot:plugin-info:update']"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['iot:plugin-info:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <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 relative overflow-hidden"
+            :body-style="{ padding: '0' }"
           >
-            查看
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:plugin-info:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:plugin-info:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            <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 flex-1">{{ item.name }}</div>
+              </div>
+
+              <!-- 信息区域 -->
+              <div class="flex items-center text-[14px]">
+                <div class="flex-1">
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">插件标识</span>
+                    <span class="text-[#0b1d30] whitespace-normal break-all">{{
+                      item.pluginKey
+                    }}</span>
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">jar包</span>
+                    <span class="text-[#0b1d30]">{{ item.fileName }}</span>
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">版本号</span>
+                    <span class="text-[#0b1d30]">{{ item.version }}</span>
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">部署方式</span>
+                    <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">状态</span>
+                    <el-switch
+                      v-model="item.status"
+                      :active-value="1"
+                      :inactive-value="0"
+                      @change="handleStatusChange(item.id, Number($event))"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 分隔线 -->
+              <el-divider class="!my-3" />
+
+              <!-- 按钮 -->
+              <div class="flex items-center px-0">
+                <el-button
+                  class="flex-1 !px-2 !h-[32px] text-[13px]"
+                  type="primary"
+                  plain
+                  @click="openForm('update', item.id)"
+                  v-hasPermi="['iot:plugin-info:update']"
+                >
+                  <Icon icon="ep:edit-pen" class="mr-1" />
+                  编辑
+                </el-button>
+                <el-button
+                  class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
+                  type="warning"
+                  plain
+                  @click="openDetail(item.id)"
+                >
+                  <Icon icon="ep:view" class="mr-1" />
+                  详情
+                </el-button>
+                <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
+                <el-button
+                  class="!px-2 !h-[32px] text-[13px]"
+                  type="danger"
+                  plain
+                  @click="handleDelete(item.id)"
+                  v-hasPermi="['iot:device:delete']"
+                >
+                  <Icon icon="ep:delete" />
+                </el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </template>
+
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -136,6 +243,8 @@ const queryParams = reactive({
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
+const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认插件图标
+const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
 
 /** 查询列表 */
 const getList = async () => {
@@ -186,6 +295,23 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 处理状态变更 */
+const handleStatusChange = async (id: number, status: number) => {
+  try {
+    // 修改状态的二次确认
+    const text = status === 1 ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '"插件吗?')
+    await PluginInfoApi.updatePluginStatus({
+      id: id,
+      status
+    })
+    message.success('更新状态成功')
+    getList()
+  } catch (error) {
+    message.error('更新状态失败')
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()