From 942aada5dd435ba2e58364df6ee6716edc4bc5a5 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Tue, 8 Jul 2025 17:06:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=98=AF=E5=90=A6=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tag/TagOnline.vue        | 17 +++++++++++++++++
 src/components/TagList/index.vue        | 25 ++++++-------------------
 src/components/index.ts                 |  4 ++++
 src/views/device/deviceManage/index.vue | 12 ++++++++++--
 4 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Tag/TagOnline.vue

diff --git a/src/components/Tag/TagOnline.vue b/src/components/Tag/TagOnline.vue
new file mode 100644
index 0000000..c9c3f51
--- /dev/null
+++ b/src/components/Tag/TagOnline.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-wrap items-center gap-2 max-w-full">
+        <div class="w-2 h-2 rounded-full" :class="{ 'bg-success': props.isOnline, 'bg-error': !props.isOnline }" />
+        <el-tag size="small" :type="props.isOnline ? 'success' : 'danger'">{{ props.isOnline ? '在线' : '离线' }}</el-tag>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+export type Props = {
+    isOnline?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+    isOnline: false,
+})
+</script>
\ No newline at end of file
diff --git a/src/components/TagList/index.vue b/src/components/TagList/index.vue
index bc5067d..293344c 100644
--- a/src/components/TagList/index.vue
+++ b/src/components/TagList/index.vue
@@ -1,24 +1,11 @@
 <template>
   <div class="flex flex-wrap items-center gap-2 max-w-full">
-    <el-tag
-        v-for="tag in tags"
-        :key="tag"
-        :type="tagType"
-        closable
-        :disable-transitions="false"
-        @close="handleClose(tag)"
-    >
+    <el-tag v-for="tag in tags" :key="tag" :type="tagType" closable :disable-transitions="false"
+      @close="handleClose(tag)">
       {{ tag }}
     </el-tag>
-    <el-input
-        v-if="inputVisible"
-        ref="InputRef"
-        v-model="inputValue"
-        class="w-20"
-        size="small"
-        @keyup.enter="handleInputConfirm"
-        @blur="handleInputConfirm"
-    />
+    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
+      @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
     <el-button v-else class="button-new-tag" size="small" @click="showInput">
       {{ buttonText }}
     </el-button>
@@ -26,8 +13,8 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, nextTick, defineProps, defineEmits} from 'vue';
-import {ElInput} from 'element-plus';
+import { ref, nextTick, defineProps, defineEmits } from 'vue';
+import { ElInput } from 'element-plus';
 
 const props = defineProps({
   modelValue: {
diff --git a/src/components/index.ts b/src/components/index.ts
index caf8402..38fcc37 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,6 +14,8 @@ import Sign from '/@/components/Sign/index.vue';
 import ChinaArea from '/@/components/ChinaArea/index.vue';
 import OrgSelector from '/@/components/OrgSelector/index.vue';
 
+import TagOnline from "/@/components/Tag/TagOnline.vue"
+
 // 第三方组件
 import ElementPlus from 'element-plus';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
@@ -51,6 +53,8 @@ export default {
 		app.component('OrgSelector', OrgSelector);
 		app.component('Sign', Sign);
 
+		app.component('TagOnline', TagOnline);
+
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 			app.component(key, component);
diff --git a/src/views/device/deviceManage/index.vue b/src/views/device/deviceManage/index.vue
index 0250150..451e329 100644
--- a/src/views/device/deviceManage/index.vue
+++ b/src/views/device/deviceManage/index.vue
@@ -30,8 +30,16 @@
         <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型" />
         <el-table-column prop="deviceModel" align="left" min-width="100" label="设备型号" />
         <el-table-column prop="ownerCode" align="left" min-width="150" label="设备所属组织" />
-        <el-table-column prop="isOnline" align="left" min-width="100" label="状态" />
-        <el-table-column prop="isSync" align="left" min-width="100" label="同步状态" />
+        <el-table-column prop="isOnline" align="left" min-width="100" label="状态">
+          <template #default="{ row }">
+            <tag-online :isOnline="row.isOnline == 1" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="isSync" align="left" min-width="100" label="同步状态">
+          <template #default="scope">
+            <el-tag :type="scope.row.isSync ? 'success' : 'danger'">{{ scope.row.isSync ? '已同步' : '未同步' }}</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" fixed="right" width="150">
           <template #default="scope">
             <el-button icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"