From c5cd170d47b9a889045c19e3715a0fb9c34842d4 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Wed, 25 Feb 2026 16:38:11 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=A4=A7=E5=B1=8F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-dropdown=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/dashboardList/index.vue | 210 +++++++----------------
 1 file changed, 65 insertions(+), 145 deletions(-)

diff --git a/src/views/report/dashboardList/index.vue b/src/views/report/dashboardList/index.vue
index 8c155d67..9b82150e 100644
--- a/src/views/report/dashboardList/index.vue
+++ b/src/views/report/dashboardList/index.vue
@@ -1,43 +1,21 @@
 <template>
   <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="80px"
-    >
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
       <el-form-item label="名称" prop="name">
         <el-input
-          v-model="queryParams.name"
-          placeholder="请输入名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery"
+          class="!w-240px" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
-          v-model="queryParams.remark"
-          placeholder="请输入备注"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery"
+          class="!w-240px" />
       </el-form-item>
       <el-form-item label="启用状态" prop="state">
-        <el-select
-          v-model="queryParams.state"
-          placeholder="请选择启用状态"
-          clearable
-          class="!w-240px"
-        >
+        <el-select v-model="queryParams.state" placeholder="请选择启用状态" clearable class="!w-240px">
           <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -58,23 +36,10 @@
     <div class="dashboard-card-list">
       <el-empty v-if="!loading && list.length === 0" description="暂无数据" />
       <el-row v-else :gutter="16">
-        <el-col
-          v-for="item in list"
-          :key="item.id"
-          :xl="6"
-          :lg="8"
-          :md="12"
-          :sm="24"
-          :xs="24"
-          class="mb-16px"
-        >
+        <el-col v-for="item in list" :key="item.id" :xl="6" :lg="8" :md="12" :sm="24" :xs="24" class="mb-16px">
           <el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
             <div class="dashboard-card-image-wrapper" @click="handlePreview(item)">
-              <img
-                class="dashboard-card-image"
-                :src="getDashboardImage(item)"
-                alt="封面图"
-              />
+              <img class="dashboard-card-image" :src="getDashboardImage(item)" alt="封面图" />
               <div class="dashboard-card-state">
                 <el-tag v-if="item.state === 1" type="success" size="small">
                   启用
@@ -94,43 +59,31 @@
                 </div>
               </div>
               <div class="dashboard-card-actions">
-              <el-popover placement="bottom-end" trigger="click" width="140">
-                <div class="dashboard-card-menu">
-                  <el-button type="primary" text @click="openEditDialog(item)">
-                    编辑
-                  </el-button>
-                  <el-button type="danger" text @click="handleDelete(item)">
-                    删除
-                  </el-button>
-                </div>
-                <template #reference>
+                <el-dropdown trigger="click" placement="bottom-end">
                   <el-button text circle>
                     <Icon icon="ep:more" />
                   </el-button>
-                </template>
-              </el-popover>
+                  <template #dropdown>
+                    <el-dropdown-menu class="dashboard-card-menu">
+                      <el-dropdown-item class="dashboard-card-menu-primary" @click="openEditDialog(item)">编辑</el-dropdown-item>
+                      <el-dropdown-item divided class="dashboard-card-menu-danger" @click="handleDelete(item)">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
       <Pagination
-        v-if="total > 0"
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
+v-if="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+        @pagination="getList" />
     </div>
   </ContentWrap>
 
   <el-dialog
-    v-model="createDialogVisible"
-    :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
-    width="600px"
-    draggable
-    @closed="handleCreateDialogClosed"
-  >
+v-model="createDialogVisible" :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'" width="600px"
+    draggable @closed="handleCreateDialogClosed">
     <el-form :model="createForm" ref="createFormRef" label-width="80px" :rules="createFormRules">
       <el-form-item label="名称" prop="name">
         <el-input v-model="createForm.name" placeholder="请输入名称" />
@@ -138,104 +91,51 @@
       <el-form-item label="大屏类型" prop="type">
         <el-select v-model="createForm.type" placeholder="请选择大屏类型" class="!w-240px">
           <el-option
-            v-for="dict in getStrDictOptions('mes_goview_type')"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+v-for="dict in getStrDictOptions('mes_goview_type')" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="产线" prop="orgId">
         <el-tree-select
-          v-model="createForm.orgId"
-          :data="organizationTree"
-          :props="lineTreeProps"
-          filterable
-          clearable
-          class="!w-240px"
-          placeholder="请选择产线"
-          @change="handleOrgChange"
-        />
+v-model="createForm.orgId" :data="organizationTree" :props="lineTreeProps" filterable clearable
+          class="!w-240px" placeholder="请选择产线" @change="handleOrgChange" />
       </el-form-item>
       <el-form-item label="设备" v-if="createForm.type === '1'">
         <div class="dashboard-device-group-list">
-          <div
-            v-for="(group, index) in deviceAttrSelections"
-            :key="index"
-            class="dashboard-device-group"
-          >
+          <div v-for="(group, index) in deviceAttrSelections" :key="index" class="dashboard-device-group">
             <el-select
-              v-model="group.deviceId"
-              placeholder="请选择设备"
-              clearable
-              filterable
-              class="!w-160px mr-8px"
-              @change="(val) => handleDeviceChange(val, index)"
-            >
-              <el-option
-                v-for="item in deviceList"
-                :key="item.id"
-                :label="item.deviceName"
-                :value="item.id"
-              />
+v-model="group.deviceId" placeholder="请选择设备" clearable filterable class="!w-160px mr-8px"
+              @change="(val) => handleDeviceChange(val, index)">
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
             </el-select>
             <el-select
-              v-model="group.attributeIds"
-              multiple
-              collapse-tags
-              collapse-tags-tooltip
-              :disabled="!group.deviceId"
-              placeholder="请选择点位"
-              clearable
-              filterable
-              class="!w-260px"
-            >
+v-model="group.attributeIds" multiple collapse-tags collapse-tags-tooltip
+              :disabled="!group.deviceId" placeholder="请选择点位" clearable filterable class="!w-260px">
               <el-option
-                v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])"
-                :key="attr.id"
-                :label="attr.attributeName"
-                :value="attr.id"
-              />
+v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])" :key="attr.id"
+                :label="attr.attributeName" :value="attr.id" />
             </el-select>
             <el-button
-              v-if="deviceAttrSelections.length > 1"
-              type="danger"
-              text
-              class="dashboard-device-remove-btn"
-              @click="removeDeviceAttrGroup(index)"
-              circle
-            >
+v-if="deviceAttrSelections.length > 1" type="danger" text class="dashboard-device-remove-btn"
+              @click="removeDeviceAttrGroup(index)" circle>
               <Icon icon="ep:minus" />
             </el-button>
           </div>
           <el-button
-            type="primary"
-            text
-            @click="addDeviceAttrGroup"
-            :disabled="deviceAttrSelections.length >= 8"
-            class="mt-8px"
-          >
+type="primary" text @click="addDeviceAttrGroup" :disabled="deviceAttrSelections.length >= 8"
+            class="mt-8px">
             <Icon icon="ep:plus" class="mr-5px" /> 添加设备
           </el-button>
         </div>
       </el-form-item>
       <el-form-item label="内容">
-        <el-input
-          v-model="createForm.content"
-          type="textarea"
-          :rows="4"
-          placeholder="请输入内容"
-        />
+        <el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="请输入内容" />
       </el-form-item>
       <el-form-item label="备注">
         <el-input v-model="createForm.remark" placeholder="请输入备注" />
       </el-form-item>
       <el-form-item label="启用状态">
-        <el-switch
-          v-model="createForm.state"
-          :active-value="1"
-          :inactive-value="0"
-        />
+        <el-switch v-model="createForm.state" :active-value="1" :inactive-value="0" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -425,7 +325,7 @@ const normalizeDeviceIdsList = (val: any): { deviceId: number; attributesIds: nu
         if (Array.isArray(parsed)) {
           return normalizeDeviceIdsList(parsed)
         }
-      } catch {}
+      } catch { }
     }
     const ids = trimmed
       .split(',')
@@ -456,9 +356,9 @@ const openEditDialog = (item: DashboardItem) => {
   deviceAttrSelections.value =
     createForm.deviceIdsList && createForm.deviceIdsList.length
       ? createForm.deviceIdsList.slice(0, 8).map((g) => ({
-          deviceId: g.deviceId,
-          attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
-        }))
+        deviceId: g.deviceId,
+        attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
+      }))
       : [{ deviceId: undefined, attributeIds: [] }]
   deviceAttrSelections.value.forEach((g) => {
     if (g.deviceId) {
@@ -546,7 +446,7 @@ const handleDelete = async (item: DashboardItem) => {
     })
     message.success('删除成功')
     await getList()
-  } catch {}
+  } catch { }
 }
 
 const loadOrganizationTree = async () => {
@@ -690,6 +590,26 @@ onMounted(() => {
   min-width: 120px;
 }
 
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary) {
+  color: var(--el-color-primary);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:hover),
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:focus) {
+  color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger) {
+  color: var(--el-color-danger);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:hover),
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:focus) {
+  color: var(--el-color-danger);
+  background-color: var(--el-color-danger-light-9);
+}
+
 .dashboard-device-group-list {
   display: flex;
   flex-direction: column;