From d25f16bcc7f143dd480893e22a8ed5bd662721b9 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Mon, 5 Jan 2026 16:34:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=B3=BB=E7=BB=9F=E7=BB=91?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cockpit/indicatorCrossingTime/index.vue   |  25 +-
 .../cockpit/indicatorDistribution/index.vue   |  25 +-
 .../listOfMainMonitoringPoints/index.vue      |  11 +-
 src/components/tree/allocation.vue            |   6 +-
 .../admin/components/menus/menuVertical.vue   | 162 +++---
 src/layouts/admin/components/navMenus.vue     |  21 +-
 src/stores/navTabs.ts                         |   7 +-
 src/views/auth/role/index.vue                 |  70 ++-
 src/views/auth/userList/index.vue             |   1 +
 src/views/auth/userList/popupEdit.vue         | 516 +++++++++---------
 .../pqs/cockpit/setUp/components/popup.vue    |   9 +-
 .../setting/dictionary/component/add.vue      |  31 +-
 .../setting/dictionary/component/index.vue    |  19 +-
 13 files changed, 502 insertions(+), 401 deletions(-)

diff --git a/src/components/cockpit/indicatorCrossingTime/index.vue b/src/components/cockpit/indicatorCrossingTime/index.vue
index c9dc431..56b74cd 100644
--- a/src/components/cockpit/indicatorCrossingTime/index.vue
+++ b/src/components/cockpit/indicatorCrossingTime/index.vue
@@ -2,7 +2,14 @@
     <div>
         <!--指标越限时间分布
          -->
-        <TableHeader :showReset="false"  :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
+        <TableHeader
+            :showReset="false"
+            :timeKeyList="prop.timeKey"
+            ref="TableHeaderRef"
+            @selectChange="selectChange"
+            datePicker
+            v-if="fullscreen"
+        >
             <template v-slot:select>
                 <el-form-item label="监测点">
                     <el-select size="small" filterable v-model="tableStore.table.params.lineId">
@@ -22,7 +29,7 @@
                 :options="echartList1"
                 :style="{
                     width: prop.width,
-                      height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+                    height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
                 }"
             />
             <!-- <my-echart
@@ -49,7 +56,7 @@ const prop = defineProps({
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
     interval: { type: Number }
 })
@@ -146,6 +153,9 @@ const initProbabilityData = () => {
             const yAxisData = sortedData.map(item => item.indexName)
 
             echartList.value = {
+                title: {
+                    text: '指标越限概率分布'
+                },
                 options: {
                     backgroundColor: '#fff',
                     tooltip: {
@@ -166,14 +176,7 @@ const initProbabilityData = () => {
                             return tips
                         }
                     },
-                    title: {
-                        text: '指标越限概率分布',
-                        x: 'center',
-                        textStyle: {
-                            fontSize: 16,
-                            fontWeight: 'normal'
-                        }
-                    },
+
                     // 移除或隐藏 visualMap 组件
                     visualMap: {
                         show: false, // 设置为 false 隐藏右侧颜色条
diff --git a/src/components/cockpit/indicatorDistribution/index.vue b/src/components/cockpit/indicatorDistribution/index.vue
index 70e1c15..628ae00 100644
--- a/src/components/cockpit/indicatorDistribution/index.vue
+++ b/src/components/cockpit/indicatorDistribution/index.vue
@@ -1,7 +1,14 @@
 <template>
     <div>
         <!--指标越限概率分布 -->
-        <TableHeader :showReset="false"  :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
+        <TableHeader
+            :showReset="false"
+            :timeKeyList="prop.timeKey"
+            ref="TableHeaderRef"
+            @selectChange="selectChange"
+            datePicker
+            v-if="fullscreen"
+        >
             <template v-slot:select>
                 <el-form-item label="监测点">
                     <el-select size="small" filterable v-model="tableStore.table.params.lineId">
@@ -21,7 +28,7 @@
                 :options="echartList"
                 :style="{
                     width: prop.width,
-                      height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
+                    height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
                 }"
             />
             <!-- <my-echart
@@ -48,7 +55,7 @@ const prop = defineProps({
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
     interval: { type: Number }
 })
@@ -145,6 +152,9 @@ const initProbabilityData = () => {
             const yAxisData = sortedData.map(item => item.indexName)
 
             echartList.value = {
+                title: {
+                    text: '指标越限概率分布'
+                },
                 options: {
                     backgroundColor: '#fff',
                     tooltip: {
@@ -165,14 +175,7 @@ const initProbabilityData = () => {
                             return tips
                         }
                     },
-                    title: {
-                        text: '指标越限概率分布',
-                        x: 'center',
-                        textStyle: {
-                            fontSize: 16,
-                            fontWeight: 'normal'
-                        }
-                    },
+
                     // 移除或隐藏 visualMap 组件
                     visualMap: {
                         show: false, // 设置为 false 隐藏右侧颜色条
diff --git a/src/components/cockpit/listOfMainMonitoringPoints/index.vue b/src/components/cockpit/listOfMainMonitoringPoints/index.vue
index 5dd2f6c..03f0c7c 100644
--- a/src/components/cockpit/listOfMainMonitoringPoints/index.vue
+++ b/src/components/cockpit/listOfMainMonitoringPoints/index.vue
@@ -5,7 +5,7 @@
             datePicker
             @selectChange="selectChange"
             v-if="fullscreen"
-            ref="TableHeaderRef" 
+            ref="TableHeaderRef"
             :timeKeyList="prop.timeKey"
         >
             <template v-slot:select>
@@ -100,7 +100,7 @@ const prop = defineProps({
     h: { type: [String, Number] },
     width: { type: [String, Number] },
     height: { type: [String, Number] },
-   timeKey: { type: Array as () => string[] },
+    timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
     interval: { type: Number }
 })
@@ -432,10 +432,9 @@ watch(
     }
 )
 
-onMounted(() => {
-    initLineList().then(() => {
-        initCode()
-    })
+onMounted(async () => {
+    await initLineList()
+    await initCode()
 })
 
 watch(
diff --git a/src/components/tree/allocation.vue b/src/components/tree/allocation.vue
index b268284..3049565 100644
--- a/src/components/tree/allocation.vue
+++ b/src/components/tree/allocation.vue
@@ -1,6 +1,6 @@
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
-        <div class="mt15 mr10" style="display: flex; justify-content: end">
+        <div class="mt10 mr10" style="display: flex; justify-content: end">
             <el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
         </div>
         <Icon
@@ -39,7 +39,7 @@
             </div>
 
             <el-tree
-                :style="{ height: 'calc(100vh - 235px)' }"
+                :style="{ height: 'calc(100vh - 267px)' }"
                 style="overflow: auto"
                 ref="treeRef"
                 :props="defaultProps"
@@ -183,5 +183,7 @@ defineExpose({ treeRef, loading })
 .custom-tree-node {
     display: flex;
     align-items: center;
+   
+
 }
 </style>
diff --git a/src/layouts/admin/components/menus/menuVertical.vue b/src/layouts/admin/components/menus/menuVertical.vue
index 2951627..2e4c5a8 100644
--- a/src/layouts/admin/components/menus/menuVertical.vue
+++ b/src/layouts/admin/components/menus/menuVertical.vue
@@ -1,81 +1,81 @@
-<template>
-    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
-        <el-menu
-            class="layouts-menu-vertical"
-            :collapse-transition="false"
-            :unique-opened="config.layout.menuUniqueOpened"
-            :default-active="state.defaultActive"
-            :collapse="config.layout.menuCollapse"
-        >
-            <MenuTree :menus="navTabs.state.tabsViewRoutes" />
-        </el-menu>
-    </el-scrollbar>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
-import MenuTree from '@/layouts/admin/components/menus/menuTree.vue'
-import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
-import type { ScrollbarInstance } from 'element-plus'
-import { useConfig } from '@/stores/config'
-import { useNavTabs } from '@/stores/navTabs'
-
-const config = useConfig()
-const navTabs = useNavTabs()
-const route = useRoute()
-
-const verticalMenusRef = ref<ScrollbarInstance>()
-
-const state = reactive({
-    defaultActive: '',
-})
-
-const verticalMenusScrollbarHeight = computed(() => {
-    let menuTopBarHeight = 0
-    if (config.layout.menuShowTopBar) {
-        menuTopBarHeight = 50
-    }
-    if (config.layout.layoutMode == 'Default') {
-        return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
-    } else {
-        return 'calc(100vh - ' + menuTopBarHeight + 'px)'
-    }
-})
-
-// 激活当前路由的菜单
-const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
-    state.defaultActive = currentRoute.path
-}
-
-// 滚动条滚动到激活菜单所在位置
-const verticalMenusScroll = () => {
-    nextTick(() => {
-        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
-        if (!activeMenu) return false
-        verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
-    })
-}
-
-onMounted(() => {
-    currentRouteActive(route)
-    verticalMenusScroll()
-})
-
-onBeforeRouteUpdate((to) => {
-    currentRouteActive(to)
-})
-</script>
-<style>
-.vertical-menus-scrollbar {
-    height: v-bind(verticalMenusScrollbarHeight);
-    background-color: v-bind('config.getColorVal("menuBackground")');
-}
-.layouts-menu-vertical {
-    border: 0;
-    padding-bottom: 30px;
-    --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
-    --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
-    --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
-    --el-menu-hover-color: v-bind('config.getColorVal("menuActiveBackground")');
-}
-</style>
+<template>
+    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
+        <el-menu
+            class="layouts-menu-vertical"
+            :collapse-transition="false"
+            :unique-opened="config.layout.menuUniqueOpened"
+            :default-active="state.defaultActive"
+            :collapse="config.layout.menuCollapse"
+        >
+            <MenuTree :menus="navTabs.state.tabsViewRoutes" />
+        </el-menu>
+    </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import MenuTree from '@/layouts/admin/components/menus/menuTree.vue'
+import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ScrollbarInstance } from 'element-plus'
+import { useConfig } from '@/stores/config'
+import { useNavTabs } from '@/stores/navTabs'
+
+const config = useConfig()
+const navTabs = useNavTabs()
+const route = useRoute()
+
+const verticalMenusRef = ref<ScrollbarInstance>()
+
+const state = reactive({
+    defaultActive: '',
+})
+
+const verticalMenusScrollbarHeight = computed(() => {
+    let menuTopBarHeight = 0
+    if (config.layout.menuShowTopBar) {
+        menuTopBarHeight = 50
+    }
+    if (config.layout.layoutMode == 'Default') {
+        return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
+    } else {
+        return 'calc(100vh - ' + menuTopBarHeight + 'px)'
+    }
+})
+
+// 激活当前路由的菜单
+const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
+    state.defaultActive = currentRoute.path
+}
+
+// 滚动条滚动到激活菜单所在位置
+const verticalMenusScroll = () => {
+    nextTick(() => {
+        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
+        if (!activeMenu) return false
+        verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
+    })
+}
+
+onMounted(() => {
+    currentRouteActive(route)
+    verticalMenusScroll()
+})
+
+onBeforeRouteUpdate((to) => {
+    currentRouteActive(to)
+})
+</script>
+<style>
+.vertical-menus-scrollbar {
+    height: v-bind(verticalMenusScrollbarHeight);
+    background-color: v-bind('config.getColorVal("menuBackground")');
+}
+.layouts-menu-vertical {
+    border: 0;
+    padding-bottom: 30px;
+    --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
+    --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
+    --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
+    --el-menu-hover-color: v-bind('config.getColorVal("menuActiveBackground")');
+}
+</style>
diff --git a/src/layouts/admin/components/navMenus.vue b/src/layouts/admin/components/navMenus.vue
index bf8e925..87eed47 100644
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -24,7 +24,7 @@
                 size="18"
             />
         </div>
-      
+
         <el-dropdown style="height: 100%" @command="handleCommand">
             <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                 <el-avatar :size="25" fit="fill">
@@ -47,8 +47,9 @@
                 name="fa fa-cogs"
                 size="18"
             />
-        </div> -->"
-       
+        </div> -->
+        "
+
         <Config />
         <PopupPwd ref="popupPwd" />
         <AdminInfo ref="popupAdminInfo" />
@@ -71,7 +72,6 @@ import PopupPwd from './popup/password.vue'
 import AdminInfo from './popup/adminInfo.vue'
 import { useNavTabs } from '@/stores/navTabs'
 
-
 const adminInfo = useAdminInfo()
 const navTabs = useNavTabs()
 const configStore = useConfig()
@@ -106,7 +106,7 @@ const onFullScreen = () => {
     })
 }
 
-const handleCommand = (key: string) => {
+const handleCommand = async (key: string) => {
     // console.log(key)
     switch (key) {
         case 'adminInfo':
@@ -116,10 +116,13 @@ const handleCommand = (key: string) => {
             popupPwd.value.open()
             break
         case 'layout':
-            navTabs.closeTabs()
-            window.localStorage.clear()
-            adminInfo.reset()
-            router.push({ name: 'login' })
+            await window.location.reload()
+            setTimeout(() => {
+                navTabs.closeTabs()
+                window.localStorage.clear()
+                adminInfo.reset()
+                router.push({ name: 'login' })
+            }, 0)
             break
         default:
             break
diff --git a/src/stores/navTabs.ts b/src/stores/navTabs.ts
index b16784a..10cef46 100644
--- a/src/stores/navTabs.ts
+++ b/src/stores/navTabs.ts
@@ -25,7 +25,6 @@ export const useNavTabs = defineStore(
         })
 
         function addTab(route: RouteLocationNormalized) {
-            console.log('🚀 ~ addTab ~ route:', route)
             if (!route.meta.addtab) return
             for (const key in state.tabsView) {
                 if (state.tabsView[key].path === route.path) {
@@ -69,7 +68,7 @@ export const useNavTabs = defineStore(
         }
 
         const setTabsViewRoutes = (data: RouteRecordRaw[]): void => {
-            state.tabsViewRoutes = encodeRoutesURI(data)
+            state.tabsViewRoutes = encodeRoutesURI(JSON.parse(JSON.stringify(data)))
         }
 
         const setAuthNode = (key: string, data: string[]) => {
@@ -87,9 +86,9 @@ export const useNavTabs = defineStore(
         const refresh = () => {
             // setTimeout(() => {
             // console.log(123, state.tabsViewRoutes)
-           
+
             let list = matchAndReturnRouteData(state.tabsViewRoutes, state.tabsView)
-             state.tabsView = []
+            state.tabsView = []
             list.forEach(item => {
                 addTab(item)
             })
diff --git a/src/views/auth/role/index.vue b/src/views/auth/role/index.vue
index 743cd94..0cd2310 100644
--- a/src/views/auth/role/index.vue
+++ b/src/views/auth/role/index.vue
@@ -7,16 +7,34 @@
             </div>
             <Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }" @currentChange="currentChange" />
         </div>
-        <Tree
-            v-if="menuListId"
-            ref="treeRef"
-            show-checkbox
-            width="350px"
-            :data="menuTree"
-            :checkStrictly="false"
-            @checkChange="checkChange"
-        ></Tree>
-        <el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
+        <div>
+            <el-tabs type="border-card">
+                <el-tab-pane label="菜单">
+                    <Tree
+                        v-if="menuListId"
+                        ref="treeRef"
+                        show-checkbox
+                        width="350px"
+                        :data="menuTree"
+                        :checkStrictly="false"
+                        @checkChange="checkChange"
+                    ></Tree>
+                    <el-empty
+                        style="width: 350px; padding-top: 300px; box-sizing: border-box"
+                        description="请选择角色"
+                        v-else
+                    />
+                </el-tab-pane>
+                <el-tab-pane label="系统">
+                    <div class="mt10 mr10" style="display: flex; justify-content: end">
+                        <el-button type="primary" icon="el-icon-Select" @click="saveSystem">保存</el-button>
+                    </div>
+                    <el-checkbox-group v-model="systemIds" class="md10  system" >
+                        <el-checkbox v-for="item in systemList" :label="item.name" :value="item.id" :key="item.id" />
+                    </el-checkbox-group>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
         <PopupForm ref="popupRef"></PopupForm>
     </div>
 </template>
@@ -34,11 +52,14 @@ import { del } from '@/api/user-boot/role'
 import { ElMessage } from 'element-plus'
 import PopupForm from './popupForm.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
-
+import { useDictData } from '@/stores/dictData'
+const dictData = useDictData()
+const systemList = dictData.getBasicData('System_Type')
 const adminInfo = useAdminInfo()
 defineOptions({
     name: 'auth/role'
 })
+const systemIds = ref([])
 const height = mainHeight(20).height
 const treeRef = ref()
 const menuTree = ref<treeData[]>([])
@@ -163,6 +184,19 @@ const checkChange = (data: any) => {
             treeRef.value.loading = false
         })
 }
+const saveSystem = () => {
+    //  updateRoleMenu({
+    //     id: menuListId.value,
+    //     idList: systemIds.value
+    // })
+    //     .then(() => {
+    //         ElMessage.success('操作成功!')
+    //         treeRef.value.loading = false
+    //     })
+    //     .catch(() => {
+    //         treeRef.value.loading = false
+    //     })
+}
 onMounted(() => {
     tableStore.index()
 })
@@ -170,3 +204,17 @@ const addRole = () => {
     popupRef.value.open('新增角色')
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs--border-card > .el-tabs__content) {
+    padding: 0px !important;
+}
+.system{
+    width: 330px;
+    height: calc(100vh - 225px);
+     border: 1px solid var(--el-border-color);
+     padding: 5px 10px;
+    display: flex;
+    flex-direction: column;
+}
+</style>
diff --git a/src/views/auth/userList/index.vue b/src/views/auth/userList/index.vue
index 54e9a01..6ecdc8a 100644
--- a/src/views/auth/userList/index.vue
+++ b/src/views/auth/userList/index.vue
@@ -95,6 +95,7 @@ const tableStore = new TableStore({
                     },
                     click: row => {
                         popupEditRef.value.open('编辑用户', row)
+                        console.log("🚀 ~ row:", row)
                     }
                 },
                 {
diff --git a/src/views/auth/userList/popupEdit.vue b/src/views/auth/userList/popupEdit.vue
index 88152d2..82a69f5 100644
--- a/src/views/auth/userList/popupEdit.vue
+++ b/src/views/auth/userList/popupEdit.vue
@@ -1,245 +1,271 @@
-<template>
-    <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
-
-        <el-form :model="form" label-width="auto" class="form-two" :rules="rules">
-            <el-form-item label="用户名" prop="name">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入昵称" />
-            </el-form-item>
-            <el-form-item label="登录名" prop="loginName">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.loginName" placeholder="请输入登录名" />
-            </el-form-item>
-            <el-form-item label="默认密码" prop="password" v-if="title === '新增用户'">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.password" placeholder="请输入密码" disabled />
-            </el-form-item>
-            <el-form-item label="权限类型" prop="type">
-                <el-select v-model.trim="form.type" @change="changeValue" disabled placeholder="请选择权限类型">
-                    <el-option v-for="(item, index) in UserTypeOption" :label="item.label" :value="item.value"
-                        :key="index"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="用户类型" prop="casualUser">
-                <el-select v-model.trim="form.casualUser" placeholder="请选择权限类型">
-                    <el-option v-for="(item, index) in TypeOptions" :label="item.label" :value="item.value"
-                        :key="index"></el-option>
-                </el-select>
-            </el-form-item>
-            <!-- <el-form-item label="所属部门" prop="deptId">
-                <Area v-model.trim="form.deptId" />
-            </el-form-item> -->
-            <el-form-item label="角色" prop="role">
-                <el-select v-model.trim="form.role" placeholder="请选择角色" multiple collapse-tags>
-                    <el-option v-for="(item, index) in roleOptions" :label="item.label" :value="item.value"
-                        :key="index"></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-form-item label="手机号" prop="phone">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.phone" placeholder="请输入手机号" />
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.email" placeholder="请输入描述" />
-            </el-form-item>
-            <el-form-item label="时间段" prop="limitTime">
-                <el-slider v-model.trim="form.limitTime" style="width: 95%" range show-stops :max="24" />
-            </el-form-item>
-            <el-form-item label="起始IP" prop="limitIpStart">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.limitIpStart" placeholder="请输入描述" />
-            </el-form-item>
-            <el-form-item label="结束IP" prop="limitIpEnd">
-                <el-input maxlength="32" show-word-limit v-model.trim="form.limitIpEnd" placeholder="请输入描述" />
-            </el-form-item>
-
-            <el-form-item label="短信通知" prop="smsNotice">
-                <el-radio-group v-model.trim="form.smsNotice" style="width: 200px">
-                    <el-radio-button :label="0">是</el-radio-button>
-                    <el-radio-button :label="1">否</el-radio-button>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="邮件通知" prop="emailNotice">
-                <el-radio-group v-model.trim="form.emailNotice" style="width: 200px">
-                    <el-radio-button :label="0">是</el-radio-button>
-                    <el-radio-button :label="1">否</el-radio-button>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="用户ID">
-                <div style="display: flex; width: 100%">
-                    <el-radio-group v-model.trim="useId">
-                        <el-radio-button :label="1">是</el-radio-button>
-                        <el-radio-button :label="0">否</el-radio-button>
-                    </el-radio-group>
-                    <el-input maxlength="32" show-word-limit :disabled="title !== '新增用户'" v-model.trim="form.id"
-                        placeholder="请输入用户id" v-if="useId" style="flex: 1;" class="ml10"></el-input>
-                </div>
-            </el-form-item>
-        </el-form>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { ElMessage, FormItemRule } from 'element-plus'
-import { roleList } from '@/api/user-boot/role'
-import { add, edit } from '@/api/user-boot/user'
-import { useAdminInfo } from '@/stores/adminInfo'
-import Area from '@/components/form/area/index.vue'
-import { Arrayable } from 'element-plus/es/utils'
-
-const adminInfo = useAdminInfo()
-const tableStore = inject('tableStore') as TableStore
-// do not use same name with ref
-const form = reactive({
-    id: '',
-    name: '',
-    password: '123456',
-    email: '',
-    limitIpStart: '',
-    deptId: '',
-    deptName: '',
-    casualUser: 1,
-    loginName: '',
-    phone: '',
-    limitIpEnd: '',
-    limitTime: [1, 2],
-    role: [],
-    smsNotice: 0,
-    emailNotice: 0,
-    type: 0
-})
-const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
-    name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
-    role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
-    password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
-    loginName: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
-    casualUser: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
-    smsNotice: [{ required: true, message: '短信通知不能为空', trigger: 'blur' }],
-    emailNotice: [{ required: true, message: '邮件通知不能为空', trigger: 'blur' }],
-    email: [
-        { required: false, message: '邮箱不能为空', trigger: 'blur' },
-        {
-            type: 'email',
-            message: "'请输入正确的邮箱地址",
-            trigger: ['blur', 'change']
-        }
-    ],
-    phone: [
-        { required: false, message: '手机号不能为空', trigger: 'blur' },
-        {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: '请输入正确的手机号码',
-            trigger: 'blur'
-        }
-    ],
-    limitTime: [{ required: true, message: '时间段不能为空', trigger: 'blur' }],
-    limitIpStart: [
-        { required: true, message: '起始IP不能为空', trigger: 'blur' },
-        {
-            required: true,
-            validator: (rule: any, value: string, callback: any) => {
-                let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
-                let isCorrect = regexp.test(value)
-                if (value == '') {
-                    return callback(new Error('请输入IP地址'))
-                } else if (!isCorrect) {
-                    callback(new Error('请输入正确的IP地址'))
-                } else {
-                    callback()
-                }
-            },
-            trigger: 'blur'
-        }
-    ],
-    limitIpEnd: [
-        { required: true, message: '结束IP不能为空', trigger: 'blur' },
-        {
-            required: true,
-            validator: (rule: any, value: string, callback: any) => {
-                let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
-                let isCorrect = regexp.test(value)
-                if (value == '') {
-                    return callback(new Error('请输入IP地址'))
-                } else if (!isCorrect) {
-                    callback(new Error('请输入正确的IP地址'))
-                } else {
-                    callback()
-                }
-            },
-            trigger: 'blur'
-        }
-    ]
-}
-const UserTypeOption = [
-    { label: '管理员', value: 1 },
-    { label: '普通用户', value: 2 }
-]
-const TypeOptions = [
-    { label: '临时用户', value: 0 },
-    { label: '长期用户', value: 1 }
-]
-const useId = ref(1)
-const roleOptions = ref<treeData>()
-const queryRole = () => {
-    roleList(adminInfo.$state.userType).then((res: any) => {
-        roleOptions.value = res.data.map((item: any) => {
-            return {
-                label: item.name,
-                value: item.id
-            }
-        })
-    })
-}
-queryRole()
-const dialogVisible = ref(false)
-const title = ref('新增菜单')
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    dialogVisible.value = true
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-        form.limitTime = data.limitTime.split('-')
-        form.role = data.roleList
-    } else {
-        for (let key in form) {
-            form[key] = ''
-        }
-        form.casualUser = 1
-        form.limitTime = [0, 24]
-        form.role = []
-        form.smsNotice = 0
-        form.emailNotice = 0
-        useId.value = 1
-        form.id = ''
-        form.limitIpStart = '0.0.0.0'
-        form.limitIpEnd = '255.255.255.255'
-        form.password = '123456'
-    }
-    form.type = adminInfo.$state.userType + 1
-}
-const submit = async () => {
-    let obj = JSON.parse(JSON.stringify(form))
-    obj.limitTime = obj.limitTime.join('-')
-    delete obj.password
-    if (form.id) {
-        await edit(obj)
-        ElMessage.success('修改成功')
-    } else {
-        form.type = adminInfo.$state.userType + 1
-        await add(obj)
-        ElMessage.success('新增成功')
-    }
-    tableStore.index()
-    dialogVisible.value = false
-}
-
-const changeValue = () => { }
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
+        <el-form :model="form" label-width="auto" class="form-two" :rules="rules">
+            <el-form-item label="用户名" prop="name">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入昵称" />
+            </el-form-item>
+            <el-form-item label="登录名" prop="loginName">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.loginName" placeholder="请输入登录名" />
+            </el-form-item>
+            <el-form-item label="默认密码" prop="password" v-if="title === '新增用户'">
+                <el-input
+                    maxlength="32"
+                    show-word-limit
+                    v-model.trim="form.password"
+                    placeholder="请输入密码"
+                    disabled
+                />
+            </el-form-item>
+            <el-form-item label="权限类型" prop="type">
+                <el-select v-model.trim="form.type" @change="changeValue" disabled placeholder="请选择权限类型">
+                    <el-option
+                        v-for="(item, index) in UserTypeOption"
+                        :label="item.label"
+                        :value="item.value"
+                        :key="index"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="用户类型" prop="casualUser">
+                <el-select v-model.trim="form.casualUser" placeholder="请选择权限类型">
+                    <el-option
+                        v-for="(item, index) in TypeOptions"
+                        :label="item.label"
+                        :value="item.value"
+                        :key="index"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="所属部门" prop="deptId">
+                <Area v-model.trim="form.deptId" />
+            </el-form-item> -->
+            <el-form-item label="角色" prop="role">
+                <el-select v-model.trim="form.role" placeholder="请选择角色" multiple collapse-tags>
+                    <el-option
+                        v-for="(item, index) in roleOptions"
+                        :label="item.label"
+                        :value="item.value"
+                        :key="index"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="手机号" prop="phone">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.phone" placeholder="请输入手机号" />
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.email" placeholder="请输入描述" />
+            </el-form-item>
+            <el-form-item label="时间段" prop="limitTime">
+                <el-slider v-model.trim="form.limitTime" style="width: 95%" range show-stops :max="24" />
+            </el-form-item>
+            <el-form-item label="起始IP" prop="limitIpStart">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.limitIpStart" placeholder="请输入描述" />
+            </el-form-item>
+            <el-form-item label="结束IP" prop="limitIpEnd">
+                <el-input maxlength="32" show-word-limit v-model.trim="form.limitIpEnd" placeholder="请输入描述" />
+            </el-form-item>
+
+            <el-form-item label="短信通知" prop="smsNotice">
+                <el-radio-group v-model.trim="form.smsNotice" style="width: 200px">
+                    <el-radio-button :label="0">是</el-radio-button>
+                    <el-radio-button :label="1">否</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="邮件通知" prop="emailNotice">
+                <el-radio-group v-model.trim="form.emailNotice" style="width: 200px">
+                    <el-radio-button :label="0">是</el-radio-button>
+                    <el-radio-button :label="1">否</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="用户ID">
+                <div style="display: flex; width: 100%">
+                    <el-radio-group v-model.trim="useId">
+                        <el-radio-button :label="1">是</el-radio-button>
+                        <el-radio-button :label="0">否</el-radio-button>
+                    </el-radio-group>
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        :disabled="title !== '新增用户'"
+                        v-model.trim="form.id"
+                        placeholder="请输入用户id"
+                        v-if="useId"
+                        style="flex: 1"
+                        class="ml10"
+                    ></el-input>
+                </div>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage, FormItemRule } from 'element-plus'
+import { roleList } from '@/api/user-boot/role'
+import { add, edit } from '@/api/user-boot/user'
+import { useAdminInfo } from '@/stores/adminInfo'
+import Area from '@/components/form/area/index.vue'
+import { Arrayable } from 'element-plus/es/utils'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+// do not use same name with ref
+const form = reactive({
+    id: '',
+    name: '',
+    password: '123456',
+    email: '',
+    limitIpStart: '',
+    deptId: '',
+    deptName: '',
+    casualUser: 1,
+    loginName: '',
+    phone: '',
+    limitIpEnd: '',
+    limitTime: [1, 2],
+    role: [],
+    smsNotice: 0,
+    emailNotice: 0,
+    type: 0
+})
+const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
+    name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+    role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
+    password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
+    loginName: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
+    casualUser: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
+    smsNotice: [{ required: true, message: '短信通知不能为空', trigger: 'blur' }],
+    emailNotice: [{ required: true, message: '邮件通知不能为空', trigger: 'blur' }],
+    email: [
+        { required: false, message: '邮箱不能为空', trigger: 'blur' },
+        {
+            type: 'email',
+            message: "'请输入正确的邮箱地址",
+            trigger: ['blur', 'change']
+        }
+    ],
+    phone: [
+        { required: false, message: '手机号不能为空', trigger: 'blur' },
+        {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+        }
+    ],
+    limitTime: [{ required: true, message: '时间段不能为空', trigger: 'blur' }],
+    limitIpStart: [
+        { required: true, message: '起始IP不能为空', trigger: 'blur' },
+        {
+            required: true,
+            validator: (rule: any, value: string, callback: any) => {
+                let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
+                let isCorrect = regexp.test(value)
+                if (value == '') {
+                    return callback(new Error('请输入IP地址'))
+                } else if (!isCorrect) {
+                    callback(new Error('请输入正确的IP地址'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur'
+        }
+    ],
+    limitIpEnd: [
+        { required: true, message: '结束IP不能为空', trigger: 'blur' },
+        {
+            required: true,
+            validator: (rule: any, value: string, callback: any) => {
+                let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
+                let isCorrect = regexp.test(value)
+                if (value == '') {
+                    return callback(new Error('请输入IP地址'))
+                } else if (!isCorrect) {
+                    callback(new Error('请输入正确的IP地址'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur'
+        }
+    ]
+}
+const UserTypeOption = [
+    { label: '管理员', value: 1 },
+    { label: '普通用户', value: 2 }
+]
+const TypeOptions = [
+    { label: '临时用户', value: 0 },
+    { label: '长期用户', value: 1 }
+]
+const useId = ref(1)
+const roleOptions = ref<treeData>()
+const queryRole = () => {
+    roleList(adminInfo.$state.userType).then((res: any) => {
+        roleOptions.value = res.data.map((item: any) => {
+            return {
+                label: item.name,
+                value: item.id
+            }
+        })
+    })
+}
+queryRole()
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    console.log("🚀 ~ open ~ data:", data)
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+        form.limitTime = data.limitTime.split('-')
+        form.role = data.roleList
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.casualUser = 1
+        form.limitTime = [0, 24]
+        form.role = []
+        form.smsNotice = 0
+        form.emailNotice = 0
+        useId.value = 1
+        form.id = ''
+        form.limitIpStart = '0.0.0.0'
+        form.limitIpEnd = '255.255.255.255'
+        form.password = '123456'
+        form.type = adminInfo.$state.userType + 1
+    }
+}
+const submit = async () => {
+    let obj = JSON.parse(JSON.stringify(form))
+    obj.limitTime = obj.limitTime.join('-')
+    delete obj.password
+    if (form.id) {
+        await edit(obj)
+        ElMessage.success('修改成功')
+    } else {
+        form.type = adminInfo.$state.userType + 1
+        await add(obj)
+        ElMessage.success('新增成功')
+    }
+    tableStore.index()
+    dialogVisible.value = false
+}
+
+const changeValue = () => {}
+defineExpose({ open })
+</script>
diff --git a/src/views/pqs/cockpit/setUp/components/popup.vue b/src/views/pqs/cockpit/setUp/components/popup.vue
index 21596db..15fea32 100644
--- a/src/views/pqs/cockpit/setUp/components/popup.vue
+++ b/src/views/pqs/cockpit/setUp/components/popup.vue
@@ -380,10 +380,11 @@ const drag = throttle(row => {
         } catch (e) {}
 
         Object.assign(item.state, {
-            top: mouseAt.y - parentRect.top,
-            left: mouseAt.x - parentRect.left
+            top: mouseAt.y - parentRect.top - 300,
+            left: mouseAt.x - parentRect.left - 180
         })
-        const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
+
+        const newPos = item.calcXY(mouseAt.y - parentRect.top - 300, mouseAt.x - parentRect.left - 180)
 
         if (mouseInGrid) {
             gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
@@ -441,7 +442,7 @@ const onSubmit = () => {
     console.log(123, findDuplicateNames(layout.value))
     let repeat = findDuplicateNames(layout.value) || []
     if (repeat.length > 0) {
-        return ElMessage.warning(repeat.join('、')+' 组件重复,请删除重复组件!')
+        return ElMessage.warning(repeat.join('、') + ' 组件重复,请删除重复组件!')
     }
 
     // const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
diff --git a/src/views/setting/dictionary/component/add.vue b/src/views/setting/dictionary/component/add.vue
index 757af31..b5a9d90 100644
--- a/src/views/setting/dictionary/component/add.vue
+++ b/src/views/setting/dictionary/component/add.vue
@@ -31,13 +31,6 @@
                     <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                 </el-form-item>
                 <el-form-item class="top" label="组件查询时间" prop="timeKeys">
-                    <!-- <el-radio-group v-model="form.timeKeys" style="width: 100%">
-                        <el-radio-button label="年" value="1" />
-                        <el-radio-button label="季" value="2" />
-                        <el-radio-button label="月" value="3" />
-                        <el-radio-button label="周" value="4" />
-                        <el-radio-button label="日" value="5" />
-                    </el-radio-group> -->
                     <el-checkbox-group v-model="form.timeKeys">
                         <el-checkbox-button value="1">年</el-checkbox-button>
                         <el-checkbox-button value="2">季</el-checkbox-button>
@@ -46,6 +39,17 @@
                         <el-checkbox-button value="5">日</el-checkbox-button>
                     </el-checkbox-group>
                 </el-form-item>
+                <el-form-item class="top" label="组件绑定系统" prop="systemIds">
+                    <el-select
+                        v-model="form.systemIds"
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        placeholder="请选择组件绑定系统"
+                    >
+                        <el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item>
                 <el-form-item class="top" label="组件排序" prop="sort">
                     <el-input v-model.number="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
@@ -70,7 +74,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="cancel">取消</el-button>
-                <el-button type="primary" @click="submit">保存</el-button>
+                <el-button type="primary" @click="submit" :loading="loading">保存</el-button>
             </span>
         </template>
     </el-dialog>
@@ -88,6 +92,7 @@ const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
 const formRef = ref()
+const loading = ref(false)
 // 注意不要和表单ref的命名冲突
 const form = ref<anyObj>({
     name: '',
@@ -95,6 +100,7 @@ const form = ref<anyObj>({
     system: [],
     timeKeys: ['1', '2', '3', '4', '5'],
     code: '',
+    systemIds: [],
     path: ''
 })
 const props = { label: 'name', value: 'id' }
@@ -105,11 +111,14 @@ const rules = {
     icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
     path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
     sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
-    timeKeys: [{ required: true, message: '请选择组件查询时间', trigger: 'change' }]
+    timeKeys: [{ required: true, message: '请选择组件查询时间', trigger: 'change' }],
+    systemIds: [{ required: true, message: '请选择组件绑定系统', trigger: 'change' }]
 }
 const customDeptOption: any = ref([])
+const systemList = dictData.getBasicData('System_Type')
 onMounted(() => {
-    customDeptOption.value = dictData.getBasicData('System_Type')
+    customDeptOption.value = dictData.getBasicData('Component_Type')
+
     customDeptOption.value.forEach((item: any) => {
         getFatherComponent({ systemType: item.id }).then(res => {
             item.children = res.data.filter(item => item.name != '无')
@@ -134,6 +143,7 @@ const submit = () => {
         if (valid) {
             let url = ''
             ElMessage.info('正在保存请稍等!')
+            loading.value = true
             setTimeout(async () => {
                 await html2canvas(document.querySelector('.GridLayout'), {
                     // scale: 2
@@ -173,6 +183,7 @@ const submit = () => {
                         cancel()
                     })
                 }
+                loading.value = false
             }, 500)
         }
     })
diff --git a/src/views/setting/dictionary/component/index.vue b/src/views/setting/dictionary/component/index.vue
index 8f57fbb..e214165 100644
--- a/src/views/setting/dictionary/component/index.vue
+++ b/src/views/setting/dictionary/component/index.vue
@@ -13,11 +13,11 @@
         /> -->
         <el-tabs v-model="tableName" type="border-card" @tab-change="changeTab">
             <el-tab-pane v-for="item in tableStore.table.data" :key="item.name" :label="item.name" :name="item.name">
-                <el-tabs v-model="tableName1" tab-position="left">
+                <el-tabs v-model="tableName1" tab-position="left"  class="componentList">
                     <el-tab-pane v-for="k in item?.children" :key="k.name" :label="k.name" :name="k.name">
                         <template #label>
                             <span class="custom-tabs-label">
-                                <span>{{ k.name }}</span>
+                                <p>{{ k.name }}</p>
 
                                 <!-- <el-icon><Edit /></el-icon> -->
                                 <el-button
@@ -25,21 +25,21 @@
                                     icon="el-icon-Edit"
                                     link
                                     class="ml10"
-                                    @click="editTree(k, 0)"
+                                    @click.stop="editTree(k, 0)"
                                 ></el-button>
                                 <el-button
                                     type="danger"
                                     icon="el-icon-Delete"
                                     link
                                     class="ml0"
-                                    @click="del(k)"
+                                    @click.stop="del(k)"
                                 ></el-button>
                             </span>
                         </template>
                         <div :style="height" style="overflow-y: auto; overflow-x: hidden">
                             <el-row :gutter="10" class="pl5 pr5 pt5">
                                 <el-col :span="6" v-for="component in k.children" :key="component.id" class="mb10">
-                                    <el-card class="box-card" shadow="hover">
+                                    <el-card class="box-card"  shadow="hover">
                                         <div slot="header" class="clearfix">
                                             <span style="display: flex; align-items: center">
                                                 {{ component.name }}
@@ -50,7 +50,7 @@
                                                         icon="el-icon-Edit"
                                                         style="padding: 3px 0; color: blue"
                                                         type="text"
-                                                        @click="editTree(component, 1)"
+                                                        @click.stop="editTree(component, 1)"
                                                     >
                                                         编辑
                                                     </el-button>
@@ -58,7 +58,7 @@
                                                         icon="el-icon-Delete"
                                                         style="padding: 3px 0; color: red"
                                                         type="text"
-                                                        @click="del(component)"
+                                                        @click.stop="del(component)"
                                                     >
                                                         删除
                                                     </el-button>
@@ -356,4 +356,9 @@ span {
         min-width: 128px;
     }
 }
+:deep(.componentList){
+    .el-tabs__header{
+        height: calc(100vh - 250px)!important;
+    }
+}
 </style>