设备管理修改

src/api/cs-device-boot/csGroArr.ts

@@ -0,0 +1,10 @@
+import createAxios from '@/utils/request'
+
+// 更新组和指标关系
+export function updateGroArr(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/csGroArr/updateGroArr',
+        method: 'POST',
+        data
+    })
+}

src/components/tree/deviceTree.vue

@@ -14,13 +14,13 @@ const config = useConfig()
 const tree = ref()
 getDeviceTree().then(res => {
     let arr: any[] = []
-    res.data.forEach(item => {
+    res.data.forEach((item: any) => {
         item.icon = 'el-icon-HomeFilled'
         item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach(item2 => {
+        item.children.forEach((item2: any) => {
             item2.icon = 'el-icon-List'
             item.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach(item3 => {
+            item2.children.forEach((item3: any) => {
                 item3.icon = 'el-icon-Platform'
                 item3.color = config.getColorVal('elementUiPrimary')
                 if (item3.comFlag === 1) {

src/layouts/admin/index.vue

@@ -84,7 +84,7 @@ const init = async () => {
                 icon: 'el-icon-List',
                 menu_type: 'tab',
                 url: '',
-                component: '/src/views/dashboard/test.vue',
+                component: '/src/views/govern/device/manage.vue',
                 keepalive: 'test',
                 extend: 'none',
                 children: [
@@ -98,7 +98,7 @@ const init = async () => {
                         icon: 'el-icon-List',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/comptroller/list.vue',
+                        component: '/src/views/govern/device/manage.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []

src/views/govern/device/manage.vue

@@ -42,7 +42,7 @@
                     v-for="item in deviceData.dataSetList"
                     :key="item.id"
                 ></el-tab-pane>
-                <div :style="{ height: tableHeight }">
+                <div :style="{ height: tableHeight }" v-loading="tableLoading">
                     <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>
@@ -75,10 +75,8 @@ 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 tableLoading = ref(false)
 const getGroupLoading = ref(false)
-const newGroupVisible = ref(false)
 const deviceData = ref<any>(null)
 const dataSet = ref('')
 const devTypeOptions = ref([])
@@ -103,9 +101,11 @@ const nodeClick = (e: anyObj) => {
     }
 }
 const handleClick = () => {
+    tableLoading.value = true
     tableData.value = []
     getTargetById(dataSet.value).then(res => {
         tableData.value = res.data
+        tableLoading.value = false
     })
 }
 queryByCode('Device_Type').then(res => {
@@ -148,7 +148,12 @@ const openGroup = () => {
         }
         call(res.data)
         getGroupLoading.value = false
-        mangePopup.value.open(res.data, dataSet.value)
+        mangePopup.value.open({
+            deviceData: deviceData.value,
+            dataSetName: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name,
+            dataSet: dataSet.value,
+            tree: res.data
+        })
     })
 }
 </script>

src/views/govern/device/managePopup.vue

@@ -1,11 +1,135 @@
 <template>
-    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="设备模版分组">111</el-dialog>
+    <el-dialog class="cn-operate-dialog device-manage-popup" v-model="dialogVisible" title="设备模版分组">
+        <el-descriptions class="mb10" :column="3" border>
+            <el-descriptions-item label="名称">
+                {{ popupData.deviceData.name }}
+            </el-descriptions-item>
+            <el-descriptions-item label="识别码">
+                {{ popupData.deviceData.ndid }}
+            </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions :title="'数据集名称: ' + popupData.dataSetName" size="small" :column="2" border>
+            <template #extra>
+                <template v-if="newGroupVisible">
+                    <el-input v-model="groupName" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
+                    <el-button class="mt10" type="primary" size="small" @click="newGroupVisible = false">
+                        取消
+                    </el-button>
+                    <el-button class="mt10 ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
+                </template>
+                <template v-else>
+                    <el-button type="primary" size="small" @click="selectGroup">
+                        {{ selectAll ? '取消全选' : '全选' }}
+                    </el-button>
+                    <el-button type="primary" size="small" @click="newGroupVisible = true">新增分组</el-button>
+                </template>
+            </template>
+        </el-descriptions>
+        <div style="flex: 1; overflow: auto">
+            <el-tree :data="popupData.tree" node-key="id" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
+                <template #default="{ node, data }">
+                    <div class="group-tree-node">
+                        <span>{{ node.label }}</span>
+                        <div v-if="node.level == 1" style="display: flex;align-items: center;">
+                            <el-popconfirm :title="'确定删除' + node.label + '吗?'" @confirm="deleteGroup(node)">
+                                <template #reference>
+                                    <Icon name="el-icon-Delete"></Icon>
+                                </template>
+                            </el-popconfirm>
+                            <el-checkbox v-model="data.isShow" @click.stop.native="" class="ml5"></el-checkbox>
+                        </div>
+                    </div>
+                </template>
+            </el-tree>
+        </div>
+        <template #footer="">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="submit">确 定</el-button>
+        </template>
+    </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ref, inject } from 'vue'
-
+import { ElMessage } from 'element-plus'
+import { updateGroArr } from '@/api/cs-device-boot/csGroArr'
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type'
+const newGroupVisible = ref(false)
 const dialogVisible = ref(false)
-const popupData = ref<any[]>([])
+const selectAll = ref(false)
+const popupData = ref<any>([])
+const groupName = ref('')
+const submit = () => {
+    let data = JSON.parse(JSON.stringify(popupData.value.tree))
+    const call = (data: any) => {
+        data.forEach((item: any) => {
+            item.isShow = item.isShow ? 1 : 0
+            delete item.label
+            if (item.children && item.children.length > 0) {
+                call(item.children)
+            }
+        })
+    }
+    call(data)
+    data.forEach((item: any) => {
+        item.children = item.children.map((item: any) => item.id)
+    })
+    updateGroArr({
+        setId: popupData.value.dataSet,
+        data: data
+    }).then((res: any) => {
+        ElMessage.success('保存成功')
+        dialogVisible.value = false
+    })
+}
+const deleteGroup = (node: any) => {
+    console.log(node)
+    if (node.data.children && node.data.children.length > 0) {
+        ElMessage.error('该分组下有指标，不能删除')
+        return
+    }
+    let index = popupData.value.tree.findIndex((item: any) => item.id === node.data.id || item.name === node.data.name)
+    popupData.value.tree.splice(index, 1)
+}
+const selectGroup = () => {
+    if (selectAll.value) {
+        popupData.value.tree.forEach((item: any) => {
+            item.isShow = false
+        })
+        selectAll.value = false
+    } else {
+        popupData.value.tree.forEach((item: any) => {
+            item.isShow = true
+        })
+        selectAll.value = true
+    }
+}
+const addNewGroup = () => {
+    if (groupName.value === '') {
+        ElMessage.warning('请输入分组名称')
+        return
+    }
+    if (popupData.value.tree.some((item: any) => item.name === groupName.value)) {
+        ElMessage.warning('分组名称已存在')
+
+        return
+    }
+    newGroupVisible.value = false
+    popupData.value.tree.splice(0, 0, {
+        id: '',
+        label: groupName.value,
+        name: groupName.value,
+        isShow: true,
+        children: []
+    })
+    groupName.value = ''
+}
+const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
+    return (dropNode.level === 2 && type !== 'inner') || (dropNode.level === 1 && type === 'inner')
+}
+const allowDrag = (draggingNode: Node) => {
+    return draggingNode.level === 2
+}
 const open = (data: any[]) => {
     dialogVisible.value = true
     popupData.value = data
@@ -13,3 +137,19 @@ const open = (data: any[]) => {
 
 defineExpose({ open })
 </script>
+<style lang="scss">
+.device-manage-popup {
+    .group-tree-node {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        padding-right: 8px;
+    }
+    .el-dialog__body {
+        display: flex;
+        flex-direction: column;
+    }
+}
+</style>