style：设备运行参数分析-添加设备标识/刷新按钮

src/views/iot/deviceParamAnalysis/index.vue

@@ -2,13 +2,19 @@
   <el-row :gutter="20">
     <el-col :span="6" :xs="24">
       <ContentWrap class="h-1/1">
-        <el-input
+        <div class="device-param-tree-toolbar">
-          v-model="keyword"
+          <el-input
-          clearable
+            v-model="keyword"
-          :placeholder="t('DataCollection.DeviceParamAnalysis.treeSearchPlaceholder')"
+            clearable
-          class="!w-1/1"
+            :placeholder="t('DataCollection.DeviceParamAnalysis.treeSearchPlaceholder')"
-          @input="handleKeywordChange"
+            class="device-param-tree-toolbar__input"
-        />
+            @input="handleKeywordChange"
+          />
+          <el-button :loading="treeLoading" @click="handleTreeRefresh">
+            <Icon icon="ep:refresh" class="mr-5px" />
+            {{ t('DataCollection.DeviceParamAnalysis.refreshButtonText') }}
+          </el-button>
+        </div>
         <div class="mt-12px">
           <el-tree
             ref="treeRef"
@@ -20,7 +26,14 @@
             show-checkbox
             check-strictly
             @check="handleTreeCheck"
-          />
+          >
+            <template #default="{ data }">
+              <span class="device-param-tree-node">
+                <span class="device-param-tree-node__label">{{ data.label }}</span>
+                <el-tag v-if="data.tag === 'equipment'" type="success" size="small" effect="plain">&#35774;&#22791;</el-tag>
+              </span>
+            </template>
+          </el-tree>
         </div>
       </ContentWrap>
     </el-col>
@@ -93,11 +106,13 @@ defineOptions({ name: 'DeviceParamAnalysis' })
 const { t } = useI18n()
 
 type TreeNodeType = 'device' | 'param'
+type TreeNodeTag = 'equipment'
 
 type DeviceTreeNode = {
   id: string
   label: string
   type: TreeNodeType
+  tag?: TreeNodeTag
   children?: DeviceTreeNode[]
   orgClass?: string
   deviceId?: number
@@ -203,6 +218,14 @@ const handleKeywordChange = () => {
   }, 300)
 }
 
+const handleTreeRefresh = async () => {
+  if (keywordTimer) {
+    window.clearTimeout(keywordTimer)
+    keywordTimer = undefined
+  }
+  await loadTree()
+}
+
 const toFiniteId = (value: any): number | undefined => {
   if (typeof value === 'number') return Number.isFinite(value) ? value : undefined
   if (typeof value === 'string') {
@@ -300,6 +323,7 @@ const buildTreeFromApi = (orgs: ApiTreeOrg[]): DeviceTreeNode[] => {
         id: `equipment-${org.id}-${eq.id}`,
         label: eq?.name ?? String(eq?.id ?? ''),
         type: 'device',
+        tag: 'equipment',
         deviceId: toFiniteId(eq.id),
         paramCount: params.length,
         children: paramNodes.length ? paramNodes : undefined,
@@ -695,6 +719,29 @@ onMounted(async () => {
   gap: 12px;
 }
 
+.device-param-tree-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.device-param-tree-toolbar__input {
+  flex: 1;
+  min-width: 0;
+}
+
+.device-param-tree-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.device-param-tree-node__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 :deep(.el-tree) {
   max-height: calc(100vh - 280px);
   overflow: auto;