From 300d34c1bf7f59d7ec90ce84e02907f3c7fcf675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Tue, 9 Jan 2024 13:49:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.ts                           |   8 +
 src/api/cs-device-boot/EquipmentDelivery.ts |  17 +
 src/api/cs-device-boot/csDataArray.ts       |  15 +
 src/api/cs-device-boot/csGroup.ts           |  15 +
 src/api/cs-device-boot/csLedger.ts          |   9 +
 src/api/system-boot/dictTree.ts             |  42 ++
 src/components/tree/deviceTree.vue          |  35 ++
 src/components/tree/index.vue               |  67 +++
 src/layouts/admin/index.vue                 | 430 ++++++++++----------
 src/styles/app.scss                         |  15 +-
 src/styles/mixins.scss                      |  35 ++
 src/views/auth/menu/popupForm.vue           |   2 +-
 src/views/auth/role/popupForm.vue           |   2 +-
 src/views/govern/device/manage.vue          | 172 ++++++++
 src/views/govern/device/managePopup.vue     |  15 +
 15 files changed, 655 insertions(+), 224 deletions(-)
 create mode 100644 src/api/cs-device-boot/EquipmentDelivery.ts
 create mode 100644 src/api/cs-device-boot/csDataArray.ts
 create mode 100644 src/api/cs-device-boot/csGroup.ts
 create mode 100644 src/api/cs-device-boot/csLedger.ts
 create mode 100644 src/api/system-boot/dictTree.ts
 create mode 100644 src/components/tree/deviceTree.vue
 create mode 100644 src/components/tree/index.vue
 create mode 100644 src/views/govern/device/manage.vue
 create mode 100644 src/views/govern/device/managePopup.vue

diff --git a/src/api/common.ts b/src/api/common.ts
index 69a5317..d732440 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -15,3 +15,11 @@ export function getAreaList() {
         method: 'POST'
     })
 }
+
+// 设备列表
+export function getDeviceTree() {
+    return createAxios({
+        url: '/cs-device-boot/csLedger/deviceTree',
+        method: 'POST'
+    })
+}
diff --git a/src/api/cs-device-boot/EquipmentDelivery.ts b/src/api/cs-device-boot/EquipmentDelivery.ts
new file mode 100644
index 0000000..cd25a5a
--- /dev/null
+++ b/src/api/cs-device-boot/EquipmentDelivery.ts
@@ -0,0 +1,17 @@
+import createAxios from '@/utils/request'
+
+// 装置基础数据和模板数据
+export function getDeviceData(deviceId: string, type: string, lineId = '') {
+    let form = new FormData()
+    form.append('deviceId', deviceId)
+    form.append('lineId', lineId)
+    form.append('type', type)
+    return createAxios({
+        url: '/cs-device-boot/EquipmentDelivery/deviceData',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
diff --git a/src/api/cs-device-boot/csDataArray.ts b/src/api/cs-device-boot/csDataArray.ts
new file mode 100644
index 0000000..2c70480
--- /dev/null
+++ b/src/api/cs-device-boot/csDataArray.ts
@@ -0,0 +1,15 @@
+import createAxios from '@/utils/request'
+
+//  根据数据集获取指标数据
+export function getTargetById(id: string) {
+    let form = new FormData()
+    form.append('id', id)
+    return createAxios({
+        url: '/cs-device-boot/csDataArray/getTargetById',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
diff --git a/src/api/cs-device-boot/csGroup.ts b/src/api/cs-device-boot/csGroup.ts
new file mode 100644
index 0000000..9da5625
--- /dev/null
+++ b/src/api/cs-device-boot/csGroup.ts
@@ -0,0 +1,15 @@
+import createAxios from '@/utils/request'
+
+// 查询分组
+export function getGroup(dataSet: string) {
+    let form = new FormData()
+    form.append('dataSet', dataSet)
+    return createAxios({
+        url: '/cs-device-boot/csGroup/getGroup',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
diff --git a/src/api/cs-device-boot/csLedger.ts b/src/api/cs-device-boot/csLedger.ts
new file mode 100644
index 0000000..c269215
--- /dev/null
+++ b/src/api/cs-device-boot/csLedger.ts
@@ -0,0 +1,9 @@
+import createAxios from '@/utils/request'
+
+// 设备列表
+export function getDeviceTree() {
+    return createAxios({
+        url: '/cs-device-boot/csLedger/deviceTree',
+        method: 'POST'
+    })
+}
diff --git a/src/api/system-boot/dictTree.ts b/src/api/system-boot/dictTree.ts
new file mode 100644
index 0000000..ca98002
--- /dev/null
+++ b/src/api/system-boot/dictTree.ts
@@ -0,0 +1,42 @@
+import createAxios from '@/utils/request'
+// 字典树接口
+export function queryByCode(code: string) {
+    let form = new FormData()
+    form.append('code', code)
+    return createAxios({
+        url: '/system-boot/dictTree/queryByCode',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
+
+// 字典树接口通过code
+export function queryCsDictTree(pid: string) {
+    let form = new FormData()
+    form.append('pid', pid)
+    return createAxios({
+        url: '/system-boot/dictTree/query',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
+
+// 字典树接口通过id
+export function queryByid(id: string) {
+    let form = new FormData()
+    form.append('id', id)
+    return createAxios({
+        url: '/system-boot/dictTree/queryByid',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}
diff --git a/src/components/tree/deviceTree.vue b/src/components/tree/deviceTree.vue
new file mode 100644
index 0000000..34499e4
--- /dev/null
+++ b/src/components/tree/deviceTree.vue
@@ -0,0 +1,35 @@
+<template>
+    <Tree :data="tree" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Tree from './index.vue'
+import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
+import { useConfig } from '@/stores/config'
+defineOptions({
+    name: 'govern/deviceTree'
+})
+const config = useConfig()
+const tree = ref()
+getDeviceTree().then(res => {
+    let arr: any[] = []
+    res.data.forEach(item => {
+        item.icon = 'el-icon-HomeFilled'
+        item.color = config.getColorVal('elementUiPrimary')
+        item.children.forEach(item2 => {
+            item2.icon = 'el-icon-List'
+            item.color = config.getColorVal('elementUiPrimary')
+            item2.children.forEach(item3 => {
+                item3.icon = 'el-icon-Platform'
+                item3.color = config.getColorVal('elementUiPrimary')
+                if (item3.comFlag === 1) {
+                    item3.color = '#e26257 !important'
+                }
+                arr.push(item3)
+            })
+        })
+    })
+    tree.value = res.data
+})
+</script>
diff --git a/src/components/tree/index.vue b/src/components/tree/index.vue
new file mode 100644
index 0000000..dda32cd
--- /dev/null
+++ b/src/components/tree/index.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="cn-tree">
+        <el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
+            <template #prefix>
+                <Icon name="el-icon-Search" style="font-size: 16px" />
+            </template>
+        </el-input>
+        <el-tree
+            style="flex: 1"
+            ref="treeRef"
+            :props="defaultProps"
+            v-bind="$attrs"
+            highlight-current
+            default-expand-all
+            :filter-node-method="filterNode"
+        >
+            <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                    <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
+                    <span style="margin-left: 4px">{{ node.label }}</span>
+                </span>
+            </template>
+        </el-tree>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+const filterText = ref('')
+const treeRef = ref()
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+watch(filterText, val => {
+    treeRef.value!.filter(val)
+})
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+</script>
+<style lang="scss" scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 280px;
+    :deep(.el-tree) {
+        background: #efeff0;
+    }
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+}
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+}
+</style>
diff --git a/src/layouts/admin/index.vue b/src/layouts/admin/index.vue
index 4232e39..9aca992 100644
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -58,219 +58,219 @@ const init = async () => {
      * 后台初始化请求，获取站点配置，动态路由等信息
      */
     getRouteMenu().then((res: any) => {
-        // const arr = [
-        //     {
-        //         id: 1,
-        //         pid: 0,
-        //         type: 'menu',
-        //         title: '控制台',
-        //         name: 'dashboard',
-        //         path: 'dashboard',
-        //         icon: 'fa fa-dashboard',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         component: '/src/views/dashboard/index.vue',
-        //         keepalive: 'dashboard',
-        //         extend: 'none',
-        //         children: []
-        //     },
-        //     {
-        //         id: 3,
-        //         pid: 0,
-        //         type: 'menu',
-        //         title: '审计管理',
-        //         name: 'test',
-        //         path: 'test',
-        //         icon: 'el-icon-List',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         component: '/src/views/dashboard/test.vue',
-        //         keepalive: 'test',
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 1,
-        //                 pid: 3,
-        //                 type: 'menu',
-        //                 title: '审计列表',
-        //                 name: 'comptroller/list',
-        //                 path: 'comptroller/list',
-        //                 icon: 'el-icon-List',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/comptroller/list.vue',
-        //                 keepalive: 'auth/role',
-        //                 extend: 'none',
-        //                 children: []
-        //             }
-        //         ]
-        //     },
-        //     {
-        //         id: 3,
-        //         pid: 0,
-        //         type: 'menu_dir',
-        //         title: '电压暂降',
-        //         name: 'voltage/sags',
-        //         path: 'voltage/sags',
-        //         icon: 'el-icon-BellFilled',
-        //         menu_type: 'tab',
-        //         url: '',
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 1,
-        //                 pid: 3,
-        //                 type: 'menu_dir',
-        //                 title: '运行管理',
-        //                 name: 'voltage/sags/operationsManagement',
-        //                 path: 'voltage/sags/operationsManagement',
-        //                 icon: 'fa-solid fa-bars-progress',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 extend: 'none',
-        //                 children: [
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '终端运行管理',
-        //                         name: 'voltage/sags/operationsManagement/index',
-        //                         path: 'voltage/sags/operationsManagement/index',
-        //                         icon: 'fa-solid fa-recycle',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/index.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/index',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '终端运行统计',
-        //                         name: 'voltage/sags/operationsManagement/statistics',
-        //                         path: 'voltage/sags/operationsManagement/statistics',
-        //                         icon: 'fa-solid fa-chart-column',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/statistics',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '监测点台账信息',
-        //                         name: 'voltage/sags/operationsManagement/point',
-        //                         path: 'voltage/sags/operationsManagement/point',
-        //                         icon: 'fa-brands fa-square-pinterest',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/voltage/sags/operationsManagement/point.vue',
-        //                         keepalive: 'voltage/sags/operationsManagement/point',
-        //                         extend: 'none',
-        //                         children: []
-        //                     }
-        //                 ]
-        //             },
-        //             {
-        //                 id: 2,
-        //                 pid: 3,
-        //                 type: 'menu',
-        //                 title: '区域',
-        //                 name: 'Event-boot/Region/distribution',
-        //                 path: 'Event-boot/Region/distribution',
-        //                 icon: 'el-icon-Management',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/Event-boot/Region/distribution.vue',
-        //                 keepalive: 'Event-boot/Region/distribution',
-        //                 extend: 'none',
-        //                 children: [
-        //                     {
-        //                         id: 2,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '区域概览',
-        //                         name: 'Region/overview',
-        //                         path: 'Region/overview',
-        //                         icon: 'el-icon-Promotion',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/dashboard/index.vue',
-        //                         keepalive: 'Region/overview',
-        //                         extend: 'none',
-        //                         children: []
-        //                     },
-        //                     {
-        //                         id: 1,
-        //                         pid: 3,
-        //                         type: 'menu',
-        //                         title: '监测网分布',
-        //                         name: 'Region/distribution',
-        //                         path: 'Region/distribution',
-        //                         icon: 'el-icon-Share',
-        //                         menu_type: 'tab',
-        //                         url: '',
-        //                         component: '/src/views/Event-boot/Region/distribution.vue',
-        //                         keepalive: 'Region/distribution',
-        //                         extend: 'none',
-        //                         children: []
-        //                     }
-        //                 ]
-        //             }
-        //         ]
-        //     },
-        //     {
-        //         id: 2,
-        //         pid: 0,
-        //         type: 'menu_dir',
-        //         title: '权限管理',
-        //         name: 'auth',
-        //         path: 'auth',
-        //         icon: 'fa-solid fa-layer-group',
-        //         menu_type: null,
-        //         url: '',
-        //         component: '',
-        //         keepalive: 0,
-        //         extend: 'none',
-        //         children: [
-        //             {
-        //                 id: 3,
-        //                 pid: 2,
-        //                 type: 'menu',
-        //                 title: '角色管理',
-        //                 name: 'auth/role',
-        //                 path: 'auth/role',
-        //                 icon: 'el-icon-Avatar',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/auth/role/index.vue',
-        //                 keepalive: 'auth/role',
-        //                 extend: 'none',
-        //                 children: []
-        //             },
-        //             {
-        //                 id: 13,
-        //                 pid: 2,
-        //                 type: 'menu',
-        //                 title: '菜单规则管理',
-        //                 name: 'auth/menu',
-        //                 path: 'auth/menu',
-        //                 icon: 'el-icon-Menu',
-        //                 menu_type: 'tab',
-        //                 url: '',
-        //                 component: '/src/views/auth/menu/index.vue',
-        //                 keepalive: 'auth/menu',
-        //                 extend: 'none',
-        //                 children: []
-        //             }
-        //         ]
-        //     }
-        // ]
+        const arr = [
+            {
+                id: 1,
+                pid: 0,
+                type: 'menu',
+                title: '设备管理',
+                name: 'dashboard',
+                path: 'dashboard',
+                icon: 'fa fa-dashboard',
+                menu_type: 'tab',
+                url: '',
+                component: '/src/views/govern/device/manage.vue',
+                keepalive: 'dashboard',
+                extend: 'none',
+                children: []
+            },
+            {
+                id: 3,
+                pid: 0,
+                type: 'menu',
+                title: '审计管理',
+                name: 'test',
+                path: 'test',
+                icon: 'el-icon-List',
+                menu_type: 'tab',
+                url: '',
+                component: '/src/views/dashboard/test.vue',
+                keepalive: 'test',
+                extend: 'none',
+                children: [
+                    {
+                        id: 1,
+                        pid: 3,
+                        type: 'menu',
+                        title: '审计列表',
+                        name: 'comptroller/list',
+                        path: 'comptroller/list',
+                        icon: 'el-icon-List',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/comptroller/list.vue',
+                        keepalive: 'auth/role',
+                        extend: 'none',
+                        children: []
+                    }
+                ]
+            },
+            {
+                id: 3,
+                pid: 0,
+                type: 'menu_dir',
+                title: '电压暂降',
+                name: 'voltage/sags',
+                path: 'voltage/sags',
+                icon: 'el-icon-BellFilled',
+                menu_type: 'tab',
+                url: '',
+                extend: 'none',
+                children: [
+                    {
+                        id: 1,
+                        pid: 3,
+                        type: 'menu_dir',
+                        title: '运行管理',
+                        name: 'voltage/sags/operationsManagement',
+                        path: 'voltage/sags/operationsManagement',
+                        icon: 'fa-solid fa-bars-progress',
+                        menu_type: 'tab',
+                        url: '',
+                        extend: 'none',
+                        children: [
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '终端运行管理',
+                                name: 'voltage/sags/operationsManagement/index',
+                                path: 'voltage/sags/operationsManagement/index',
+                                icon: 'fa-solid fa-recycle',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/index.vue',
+                                keepalive: 'voltage/sags/operationsManagement/index',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '终端运行统计',
+                                name: 'voltage/sags/operationsManagement/statistics',
+                                path: 'voltage/sags/operationsManagement/statistics',
+                                icon: 'fa-solid fa-chart-column',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
+                                keepalive: 'voltage/sags/operationsManagement/statistics',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '监测点台账信息',
+                                name: 'voltage/sags/operationsManagement/point',
+                                path: 'voltage/sags/operationsManagement/point',
+                                icon: 'fa-brands fa-square-pinterest',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/voltage/sags/operationsManagement/point.vue',
+                                keepalive: 'voltage/sags/operationsManagement/point',
+                                extend: 'none',
+                                children: []
+                            }
+                        ]
+                    },
+                    {
+                        id: 2,
+                        pid: 3,
+                        type: 'menu',
+                        title: '区域',
+                        name: 'Event-boot/Region/distribution',
+                        path: 'Event-boot/Region/distribution',
+                        icon: 'el-icon-Management',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/Event-boot/Region/distribution.vue',
+                        keepalive: 'Event-boot/Region/distribution',
+                        extend: 'none',
+                        children: [
+                            {
+                                id: 2,
+                                pid: 3,
+                                type: 'menu',
+                                title: '区域概览',
+                                name: 'Region/overview',
+                                path: 'Region/overview',
+                                icon: 'el-icon-Promotion',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/dashboard/index.vue',
+                                keepalive: 'Region/overview',
+                                extend: 'none',
+                                children: []
+                            },
+                            {
+                                id: 1,
+                                pid: 3,
+                                type: 'menu',
+                                title: '监测网分布',
+                                name: 'Region/distribution',
+                                path: 'Region/distribution',
+                                icon: 'el-icon-Share',
+                                menu_type: 'tab',
+                                url: '',
+                                component: '/src/views/Event-boot/Region/distribution.vue',
+                                keepalive: 'Region/distribution',
+                                extend: 'none',
+                                children: []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                id: 2,
+                pid: 0,
+                type: 'menu_dir',
+                title: '权限管理',
+                name: 'auth',
+                path: 'auth',
+                icon: 'fa-solid fa-layer-group',
+                menu_type: null,
+                url: '',
+                component: '',
+                keepalive: 0,
+                extend: 'none',
+                children: [
+                    {
+                        id: 3,
+                        pid: 2,
+                        type: 'menu',
+                        title: '角色管理',
+                        name: 'auth/role',
+                        path: 'auth/role',
+                        icon: 'el-icon-Avatar',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/auth/role/index.vue',
+                        keepalive: 'auth/role',
+                        extend: 'none',
+                        children: []
+                    },
+                    {
+                        id: 13,
+                        pid: 2,
+                        type: 'menu',
+                        title: '菜单规则管理',
+                        name: 'auth/menu',
+                        path: 'auth/menu',
+                        icon: 'el-icon-Menu',
+                        menu_type: 'tab',
+                        url: '',
+                        component: '/src/views/auth/menu/index.vue',
+                        keepalive: 'auth/menu',
+                        extend: 'none',
+                        children: []
+                    }
+                ]
+            }
+        ]
 
         const handlerMenu = (data: any) => {
             data.forEach((item: any) => {
@@ -287,8 +287,8 @@ const init = async () => {
         }
         handlerMenu(res.data)
         // handleAdminRoute(arr)
-        handleAdminRoute(res.data)
-        // handleAdminRoute([...arr, ...res.data])
+        // handleAdminRoute(res.data)
+        handleAdminRoute([...arr, ...res.data])
 
         // 预跳转到上次路径
         if (route.params.to) {
diff --git a/src/styles/app.scss b/src/styles/app.scss
index e43889c..0d9a647 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -108,30 +108,30 @@ body,
 /* 表格-e */
 
 /* 新增/编辑表单-s */
-.ba-operate-dialog {
+.cn-operate-dialog {
     overflow: hidden;
     border-radius: var(--el-border-radius-base);
 }
-.ba-operate-dialog .el-dialog__header {
+.cn-operate-dialog .el-dialog__header {
     padding-bottom: 16px;
     border-bottom: 1px solid var(--ba-bg-color);
 }
-.ba-operate-dialog .el-dialog__body {
+.cn-operate-dialog .el-dialog__body {
     height: 60vh;
     padding-top: 20px;
     padding-bottom: 52px;
 }
-.ba-operate-dialog .el-dialog__body .el-scrollbar {
+.cn-operate-dialog .el-dialog__body .el-scrollbar {
     padding-right: 60px;
 }
-.ba-operate-dialog .el-dialog__footer {
+.cn-operate-dialog .el-dialog__footer {
     padding: 10px var(--el-dialog-padding-primary);
     box-shadow: var(--el-box-shadow);
     position: absolute;
     width: 100%;
     bottom: 0;
 }
-.ba-operate-dialog .el-form--inline {
+.cn-operate-dialog .el-form--inline {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
 }
@@ -228,7 +228,7 @@ body,
     }
 }
 @media screen and (max-width: 1024px) {
-    .ba-operate-dialog {
+    .cn-operate-dialog {
         width: 96%;
     }
 }
@@ -238,3 +238,4 @@ body,
     }
 }
 /* 自适应-e */
+
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index ae0d086..9a78111 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -28,3 +28,38 @@
         }
     }
 }
+
+// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
+@for $i from 0 through 100 {
+    .mt#{$i} {
+        margin-top: #{$i}px !important;
+    }
+
+    .mr#{$i} {
+        margin-right: #{$i}px !important;
+    }
+
+    .mb#{$i} {
+        margin-bottom: #{$i}px !important;
+    }
+
+    .ml#{$i} {
+        margin-left: #{$i}px !important;
+    }
+
+    .pt#{$i} {
+        padding-top: #{$i}px !important;
+    }
+
+    .pr#{$i} {
+        padding-right: #{$i}px !important;
+    }
+
+    .pb#{$i} {
+        padding-bottom: #{$i}px !important;
+    }
+
+    .pl#{$i} {
+        padding-left: #{$i}px !important;
+    }
+}
diff --git a/src/views/auth/menu/popupForm.vue b/src/views/auth/menu/popupForm.vue
index 71f5999..4a5a4aa 100644
--- a/src/views/auth/menu/popupForm.vue
+++ b/src/views/auth/menu/popupForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog class='ba-operate-dialog' v-model='dialogVisible' :title='title'>
+    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
         <el-scrollbar>
             <el-form :inline='false' :model='form' label-width='120px'>
                 <el-form-item label='上级菜单'>
diff --git a/src/views/auth/role/popupForm.vue b/src/views/auth/role/popupForm.vue
index 0fc89a1..60e45b4 100644
--- a/src/views/auth/role/popupForm.vue
+++ b/src/views/auth/role/popupForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-scrollbar>
             <el-form :inline="false" :model="form" label-width="120px">
                 <el-form-item label="上级菜单">
diff --git a/src/views/govern/device/manage.vue b/src/views/govern/device/manage.vue
new file mode 100644
index 0000000..388241c
--- /dev/null
+++ b/src/views/govern/device/manage.vue
@@ -0,0 +1,172 @@
+<template>
+    <div class="default-main manage" :style="{ height: pageHeight.height }">
+        <DeviceTree @node-click="nodeClick"></DeviceTree>
+        <div class="manage-right" v-if="deviceData" v-loading="loading">
+            <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
+                <template #extra>
+                    <el-button
+                        type="primary"
+                        icon="el-icon-Share"
+                        @click="openGroup"
+                        size="small"
+                        :loading="getGroupLoading"
+                    >
+                        设备模版分组
+                    </el-button>
+                </template>
+                <el-descriptions-item label="名称">
+                    {{ deviceData.name }}
+                </el-descriptions-item>
+                <el-descriptions-item label="类型">
+                    {{ echoName(deviceData.devType, devTypeOptions) }}
+                </el-descriptions-item>
+
+                <el-descriptions-item label="接入方式">
+                    {{ deviceData.devAccessMethod }}
+                </el-descriptions-item>
+                <el-descriptions-item label="识别码">
+                    {{ deviceData.ndid }}
+                </el-descriptions-item>
+                <el-descriptions-item label="型号">
+                    {{ echoName(deviceData.devModel, devModelOptions) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="接入时间">
+                    {{ deviceData.time }}
+                </el-descriptions-item>
+            </el-descriptions>
+            <el-tabs v-model="dataSet" type="card" class="device-manage-box-card" @tab-click="handleClick">
+                <el-tab-pane
+                    lazy
+                    :label="item.name"
+                    :name="item.id"
+                    v-for="item in deviceData.dataSetList"
+                    :key="item.id"
+                ></el-tab-pane>
+                <div :style="{ height: tableHeight }">
+                    <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
+                        <vxe-column type="seq" title="序号" width="80"></vxe-column>
+                        <vxe-column field="name" title="数据名称"></vxe-column>
+                        <vxe-column field="phasic" title="相别"></vxe-column>
+                        <vxe-column field="type" title="数据类型"></vxe-column>
+                        <vxe-column field="unit" title="单位"></vxe-column>
+                        <vxe-column field="startTimes" title="开始次数"></vxe-column>
+                        <vxe-column field="endTimes" title="结束次数"></vxe-column>
+                    </vxe-table>
+                </div>
+            </el-tabs>
+        </div>
+        <MangePopup ref="mangePopup" />
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    name: 'govern/device/manage'
+})
+import MangePopup from './managePopup.vue'
+import DeviceTree from '@/components/tree/deviceTree.vue'
+import { mainHeight } from '@/utils/layout'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
+import { getTargetById } from '@/api/cs-device-boot/csDataArray'
+import { getGroup } from '@/api/cs-device-boot/csGroup'
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const pageHeight = mainHeight(20)
+const loading = ref(false)
+const selectAll = ref(false)
+const dialogFormVisible = ref(false)
+const getGroupLoading = ref(false)
+const newGroupVisible = ref(false)
+const deviceData = ref<any>(null)
+const dataSet = ref('')
+const devTypeOptions = ref([])
+const devModelOptions = ref([])
+const tableData = ref([])
+const tableHeight = mainHeight(230).height
+const mangePopup = ref()
+const nodeClick = (e: anyObj) => {
+    if (e.level == 2) {
+        loading.value = true
+        getDeviceData(e.id, 'rt').then((res: any) => {
+            deviceData.value = res.data
+            loading.value = false
+            if (res.data.dataSetList.length === 0) {
+                dataSet.value = ''
+                tableData.value = []
+            } else {
+                dataSet.value = res.data.dataSetList[0].id
+                handleClick()
+            }
+        })
+    }
+}
+const handleClick = () => {
+    tableData.value = []
+    getTargetById(dataSet.value).then(res => {
+        tableData.value = res.data
+    })
+}
+queryByCode('Device_Type').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        devTypeOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+    queryByid(res.data.id).then(res => {
+        devModelOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+})
+const echoName = (value: any, arr: any[]) => {
+    return arr.find(item => item.value == value).label
+}
+const openGroup = () => {
+    if (!dataSet.value) {
+        return ElMessage.warning('暂无数据')
+    }
+    getGroupLoading.value = true
+    getGroup(dataSet.value).then((res: any) => {
+        const call = (data: any[]) => {
+            data.forEach(item => {
+                item.label = item.name
+                item.isShow = item.isShow == 1
+                if (item.children && item.children.length > 0) {
+                    call(item.children)
+                }
+            })
+        }
+        call(res.data)
+        getGroupLoading.value = false
+        mangePopup.value.open(res.data, dataSet.value)
+    })
+}
+</script>
+
+<style lang="scss">
+.manage {
+    display: flex;
+
+    &-right {
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        .el-descriptions__header {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+</style>
diff --git a/src/views/govern/device/managePopup.vue b/src/views/govern/device/managePopup.vue
new file mode 100644
index 0000000..d01a36e
--- /dev/null
+++ b/src/views/govern/device/managePopup.vue
@@ -0,0 +1,15 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="设备模版分组">111</el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+
+const dialogVisible = ref(false)
+const popupData = ref<any[]>([])
+const open = (data: any[]) => {
+    dialogVisible.value = true
+    popupData.value = data
+}
+
+defineExpose({ open })
+</script>