设备监控

2024-01-11 13:42:54 +08:00
parent ec338efa03
commit f1c76b7ac6
6 changed files with 176 additions and 4 deletions
--- a/src/views/govern/device/manage/popup.vue
+++ b/src/views/govern/device/manage/popup.vue
@@ -0,0 +1,153 @@
+<template>
+    <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>
+                <div v-if="newGroupVisible" style="display: flex; align-items: center">
+                    <el-input v-model="groupName" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
+                    <el-button class="ml10"  ctype="primary" size="small" @click="newGroupVisible = false">取消</el-button>
+                    <el-button class="ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
+                </div>
+                <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 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
+}
+
+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>