From 98ff0df343bd4e5d2d5e138a02c6db2b7fa9696b Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 27 Jan 2026 10:23:03 +0800
Subject: [PATCH] feat:角色权限弹窗配置页面，调整
---
applications/drone-command/src/styles/common/cockpit.scss | 187 ++++++++++++++++++++++++++++++
applications/drone-command/src/components/map-container/device-map-container.vue | 83 -------------
applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue | 17 +-
applications/drone-command/src/views/permissionManage/permissionRole/RolePermissionDialog.vue | 71 ++---------
4 files changed, 204 insertions(+), 154 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index f5813aa..c2a8168 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/applications/drone-command/src/components/map-container/device-map-container.vue
@@ -14,7 +14,7 @@
<div class="panel-title">图层管理</div>
<div class="panel-content">
- <el-tree :data="layerTree" show-checkbox default-expand-all node-key="key"
+ <el-tree class="command-tree" :data="layerTree" show-checkbox default-expand-all node-key="key"
:props="layerTreeProps" :default-checked-keys="defaultCheckedKeys" />
</div>
</div>
@@ -1041,87 +1041,6 @@
flex: 1;
overflow: auto;
}
-
- ::v-deep(.el-tree) {
- background: transparent;
- color: #c3c3dd;
- font-size: 12px;
-
- .el-tree-node {
- line-height: 30px !important;
-
- .el-tree-node__content {
- padding-left: 0 !important;
- display: flex;
- align-items: center;
- height: 40px !important;
- line-height: 40px !important;
- border-bottom: 1px solid rgba(70, 70, 100, 0.5);
- box-sizing: border-box;
- }
-
- .el-tree-node__children {
- .el-tree-node__content {
- border: none;
- }
- }
-
- &:focus {
- .el-tree-node__content {
- background: transparent !important;
- }
- }
- }
- }
-}
-
-.layer-panel :deep(.el-tree-node__label) {
- color: #c3c3dd;
-}
-
-.layer-panel :deep(.el-tree-node__expand-icon) {
- order: 3;
- margin-left: auto;
-}
-
-.layer-panel :deep(.el-tree-node__expand-icon.is-leaf) {
- visibility: hidden;
-}
-
-.layer-panel :deep(.el-checkbox) {
- order: 1;
-}
-
-.layer-panel :deep(.el-tree-node__label) {
- order: 2;
-}
-
-.layer-panel :deep(.el-tree-node__expand-icon:not(.is-leaf) ~ .el-checkbox) {
- display: none;
-}
-
-.layer-panel :deep(.el-tree-node__content:hover),
-.layer-panel :deep(.el-tree-node__content:focus) {
- background: transparent !important;
-}
-
-.layer-panel :deep(.el-tree-node.is-current > .el-tree-node__content) {
- background: transparent !important;
- color: #ffffff;
-}
-
-.layer-panel :deep(.el-tree-node.is-current > .el-tree-node__content .el-tree-node__label) {
- color: #ffffff;
-}
-
-.layer-panel :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
- background-color: #023aff;
- border-color: #023aff;
-}
-
-.layer-panel :deep(.el-checkbox__inner) {
- background-color: transparent;
- border-color: #a1a3d4;
}
</style>
diff --git a/applications/drone-command/src/styles/common/cockpit.scss b/applications/drone-command/src/styles/common/cockpit.scss
index 43bcd17..61579d7 100644
--- a/applications/drone-command/src/styles/common/cockpit.scss
+++ b/applications/drone-command/src/styles/common/cockpit.scss
@@ -41,6 +41,87 @@
height: 40px;
}
+.command-tree {
+ background: transparent;
+ color: #c3c3dd;
+ font-size: 12px;
+
+ .el-tree-node {
+ line-height: 30px !important;
+
+ .el-tree-node__content {
+ padding-left: 0 !important;
+ display: flex;
+ align-items: center;
+ height: 40px !important;
+ line-height: 40px !important;
+ border-bottom: 1px solid rgba(70, 70, 100, 0.5);
+ box-sizing: border-box;
+ }
+
+ .el-tree-node__children {
+ .el-tree-node__content {
+ border: none;
+ }
+ }
+
+ &:focus {
+ .el-tree-node__content {
+ background: transparent !important;
+ }
+ }
+ }
+
+ .el-tree-node__label {
+ color: #c3c3dd;
+ }
+
+ .el-tree-node__expand-icon {
+ order: 3;
+ margin-left: auto;
+ }
+
+ .el-tree-node__expand-icon.is-leaf {
+ visibility: hidden;
+ }
+
+ .el-checkbox {
+ order: 1;
+ }
+
+ .el-tree-node__label {
+ order: 2;
+ }
+
+ .el-tree-node__expand-icon:not(.is-leaf)~.el-checkbox {
+ display: none;
+ }
+
+ .el-tree-node__content:hover,
+ .el-tree-node__content:focus {
+ background: transparent !important;
+ }
+
+ .el-tree-node.is-current>.el-tree-node__content {
+ background: transparent !important;
+ color: #ffffff;
+ }
+
+ .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
+ color: #ffffff;
+ }
+
+ .el-checkbox__input.is-checked .el-checkbox__inner {
+ background-color: #023aff;
+ border-color: #023aff;
+ }
+
+ .el-checkbox__inner {
+ background-color: transparent;
+ border-color: #a1a3d4;
+ }
+}
+
.command-cascader {
height: 40px;
@@ -233,7 +314,7 @@
.el-time-panel__btn {
color: #fff;
}
-
+
.el-time-panel__btn:first-child {
color: #86909C;
}
@@ -279,7 +360,7 @@
.el-time-panel__btn {
color: #fff;
}
-
+
.el-time-panel__btn:first-child {
color: #86909C;
}
@@ -329,7 +410,7 @@
}
// td:hover,
- // td.current:not(.disabled) {
+ // td.current:not(.disabled{
// background: rgba(60, 121, 202) !important;
// color: white !important;
// }
@@ -744,7 +825,7 @@
}
}
}
-
+
.el-input {
width: 160px;
}
@@ -1170,7 +1251,7 @@
text-transform: none;
}
- & > button {
+ &>button {
width: auto;
height: auto;
display: flex;
@@ -1383,6 +1464,102 @@
}
}
}
+
+ .address-btn {
+ display: flex;
+ justify-content: flex-start;
+ padding: 0 8px;
+ width: 100%;
+ }
+ }
+ }
+
+ .el-tabs {
+ background: transparent;
+ border: none;
+
+ .el-tabs__header {
+ position: relative;
+ background: transparent;
+ border: none;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 1px;
+ background: #333355;
+ }
+
+ .el-tabs__item {
+ position: relative;
+ margin-left: 26px;
+
+ font-family: Source Code Pro, Source Code Pro;
+ font-weight: 400;
+ font-size: 14px;
+ color: #86909C;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ cursor: pointer;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &.is-active {
+ font-weight: normal;
+ color: #FFFFFF;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 0;
+ }
+
+ &.is-active::after {
+ height: 3px;
+ background: #284FE3;
+ box-shadow: 0px 3px 2px 0px rgba(15, 89, 255, 0.1), 0px 7px 5px 0px rgba(15, 89, 255, 0.15), 0px 13px 10px 0px rgba(15, 89, 255, 0.18), 0px 22px 18px 0px rgba(15, 89, 255, 0.21), 0px 42px 33px 0px rgba(15, 89, 255, 0.26), 0px 100px 80px 0px rgba(15, 89, 255, 0.36);
+ border-radius: 5px 5px 0px 0px;
+ z-index: 9;
+ }
+ }
+ }
+
+ .el-tabs__content {
+ background: transparent;
+ border: none;
+ height: 430px;
+ overflow-y: auto;
+
+
+ .el-tab-pane {
+ background: transparent;
+ border: none;
+
+ .el-tree {
+ background: transparent;
+ border: none;
+ }
+ }
+ }
+
+ .el-tabs__nav {
+ background: transparent;
+ border: none;
+
+ .el-tabs__item {
+ background: transparent;
+ border: none;
+ }
}
}
}
diff --git a/applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue
index d76eae9..7e0f3b4 100644
--- a/applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue
+++ b/applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue
@@ -24,10 +24,17 @@
<el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"
label-width="100px">
<el-row>
- <el-col :span="12">
+ <el-col :span="24">
<el-form-item label="派出所名称" prop="stationName">
<el-input class="command-input" v-model="formData.stationName" maxlength="50"
placeholder="请输入" clearable />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="位置" prop="longitude">
+ <el-button class="address-btn" @click="selectLocation">
+ {{ formData.longitude }}, {{ formData.latitude }}, {{ formData.address }}
+ </el-button>
</el-form-item>
</el-col>
<el-col :span="12">
@@ -40,13 +47,6 @@
<el-form-item label="联系方式" prop="contactPhone">
<el-input class="command-input" v-model="formData.contactPhone" maxlength="50"
placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="位置" prop="longitude">
- <el-button @click="selectLocation" style="width: 100%">
- {{ formData.longitude }}, {{ formData.latitude }}, {{ formData.address }}
- </el-button>
</el-form-item>
</el-col>
</el-row>
@@ -290,4 +290,5 @@
defineExpose({ open })
</script>
<style scoped lang="scss">
+
</style>
diff --git a/applications/drone-command/src/views/permissionManage/permissionRole/RolePermissionDialog.vue b/applications/drone-command/src/views/permissionManage/permissionRole/RolePermissionDialog.vue
index c909480..37c6736 100644
--- a/applications/drone-command/src/views/permissionManage/permissionRole/RolePermissionDialog.vue
+++ b/applications/drone-command/src/views/permissionManage/permissionRole/RolePermissionDialog.vue
@@ -1,45 +1,17 @@
<template>
<el-dialog
+ class="command-page-view-dialog"
v-model="visible"
title="角色权限配置"
- width="620px"
append-to-body
:close-on-click-modal="false"
+ destroy-on-close
@closed="handleClosed"
>
<el-tabs type="border-card">
- <el-tab-pane label="后台管理">
- <el-tree
- ref="treeMenu"
- :data="menuGrantList"
- show-checkbox
- node-key="id"
- :default-checked-keys="menuTreeObj"
- :props="treeProps"
- />
- </el-tab-pane>
- <el-tab-pane label="移动app">
- <el-tree
- ref="treeMenuApp"
- :data="menuGrantListApp"
- show-checkbox
- node-key="id"
- :default-checked-keys="menuTreeObjApp"
- :props="treeProps"
- />
- </el-tab-pane>
- <el-tab-pane label="新大屏菜单">
- <el-tree
- ref="treeMenuWebNew"
- :data="menuGrantListNew"
- show-checkbox
- node-key="id"
- :default-checked-keys="menuTreeObjNew"
- :props="treeProps"
- />
- </el-tab-pane>
<el-tab-pane label="无人机管控">
<el-tree
+ class="command-tree"
ref="droneControl"
:data="menuGrantListDroneControl"
show-checkbox
@@ -50,6 +22,7 @@
</el-tab-pane>
<el-tab-pane label="任务工单">
<el-tree
+ class="command-tree"
ref="workRef"
:data="menuGrantListWord"
show-checkbox
@@ -58,20 +31,21 @@
:props="treeProps"
/>
</el-tab-pane>
- <el-tab-pane label="大屏菜单">
+ <el-tab-pane label="移动app">
<el-tree
- ref="treeMenuWebOld"
- :data="menuGrantListOld"
+ class="command-tree"
+ ref="treeMenuApp"
+ :data="menuGrantListApp"
show-checkbox
node-key="id"
- :default-checked-keys="menuTreeObjOld"
+ :default-checked-keys="menuTreeObjApp"
:props="treeProps"
/>
</el-tab-pane>
</el-tabs>
<template #footer>
- <el-button @click="visible = false">取 消</el-button>
- <el-button type="primary" @click="submit">确 定</el-button>
+ <el-button color="#2B2B4C" @click="visible = false">取消</el-button>
+ <el-button color="#284FE3" type="primary" @click="submit">确定</el-button>
</template>
</el-dialog>
</template>
@@ -88,23 +62,14 @@
label: 'title',
value: 'key',
}
-const menuGrantList = ref([])
const menuGrantListApp = ref([])
-const menuGrantListOld = ref([])
-const menuGrantListNew = ref([])
const menuGrantListDroneControl = ref([])
const menuGrantListWord = ref([])
-const menuTreeObj = ref([])
const menuTreeObjApp = ref([])
-const menuTreeObjOld = ref([])
-const menuTreeObjNew = ref([])
const droneControlMenuTreeObj = ref([])
const menuTreeObjWork = ref([])
-const treeMenu = ref(null)
const treeMenuApp = ref(null)
-const treeMenuWebOld = ref(null)
-const treeMenuWebNew = ref(null)
const workRef = ref(null)
const droneControl = ref(null)
@@ -112,16 +77,10 @@
const route = useRoute()
function resetState() {
- menuGrantList.value = []
menuGrantListApp.value = []
- menuGrantListOld.value = []
- menuGrantListNew.value = []
menuGrantListDroneControl.value = []
menuGrantListWord.value = []
- menuTreeObj.value = []
menuTreeObjApp.value = []
- menuTreeObjOld.value = []
- menuTreeObjNew.value = []
droneControlMenuTreeObj.value = []
menuTreeObjWork.value = []
}
@@ -138,25 +97,19 @@
visible.value = true
resetState()
await Promise.all([
- loadGrantTree(1, menuGrantList, menuTreeObj),
loadGrantTree(3, menuGrantListApp, menuTreeObjApp),
- loadGrantTree(4, menuGrantListNew, menuTreeObjNew),
loadGrantTree(5, menuGrantListDroneControl, droneControlMenuTreeObj),
loadGrantTree(6, menuGrantListWord, menuTreeObjWork),
- loadGrantTree(2, menuGrantListOld, menuTreeObjOld),
])
}
function submit() {
- const menuList = treeMenu.value?.getCheckedKeys?.() ?? []
const menuListApp = treeMenuApp.value?.getCheckedKeys?.() ?? []
- const menuListWebNew = treeMenuWebNew.value?.getCheckedKeys?.() ?? []
const menuListWebWork = workRef.value?.getCheckedKeys?.() ?? []
const menuListDroneControl = droneControl.value?.getCheckedKeys?.() ?? []
- const menuListWebOld = treeMenuWebOld.value?.getCheckedKeys?.() ?? []
grant(
[roleId.value],
- [...menuList, ...menuListApp, ...menuListWebNew, ...menuListDroneControl, ...menuListWebOld, ...menuListWebWork],
+ [...menuListApp, ...menuListDroneControl, ...menuListWebWork],
[],
[]
).then(() => {
--
Gitblit v1.9.3