feat:设备分组、设备分组查看监控

src/components/DraggableDeviceGroup/index.vue

@@ -0,0 +1,268 @@
+<template>
+    <Splitpanes @resize="state.treeWidth = $event[0].size">
+        <pane :size="state.treeWidth">
+            <!-- 树 -->
+            <div v-loading="state.loading" class="h-full flex flex-col m-1">
+                <!-- 头部区域 -->
+                <div class="flex items-center pb-2 shadow-gray-400 z-10"
+                    style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
+                    <div class="w-4/5">
+                        <el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable
+                            @change="handleSearchInputChange" />
+                    </div>
+                    <div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
+                        <el-dropdown :hide-on-click="false">
+                            <el-icon style="transform: rotate(90deg)">
+                                <MoreFilled />
+                            </el-icon>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>
+                                        <el-button
+                                            class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                                            link :icon="state.isExpand ? 'expand' : 'fold'"
+                                            @click="toggleRowExpansionAll(state.isExpand ? false : true)">
+                                            {{ state.isExpand ? "折叠" : "展开" }}
+                                        </el-button>
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                </div>
+
+                <!-- 树形结构 -->
+                <div class="flex-1 overflow-hidden hover:overflow-auto">
+                    <el-tree ref="treeRef" :props="props.props" :data="state.treeDataList" :expand-on-click-node="false"
+                        node-key="id" :highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
+                        @node-click="handleNodeClick" @check="handleCheck">
+                        <template #default="{ node, data }">
+                            <div class="flex items-center">
+                                <el-icon class="flex justify-center align-center" v-if="data.deep == 1">
+                                    <Files />
+                                </el-icon>
+                                <el-icon class="flex justify-center align-center" v-if="data.deep == 2">
+                                    <VideoCamera />
+                                </el-icon>
+                                <span class="ml-1">{{ node.label }}</span>
+                            </div>
+                        </template>
+                    </el-tree>
+                </div>
+
+                <!-- 底部区域 -->
+                <div class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
+                    style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)">
+                    <el-switch v-model="state.switch" @change="handleSwitchChange" :inactive-text="switchInactiveText"
+                        :active-text="switchActiveText"
+                        :disabled="nodeClickable && state.checkedTreeNodes.length > 0" />
+                </div>
+            </div>
+        </pane>
+
+        <pane :size="100 - state.treeWidth" class="pl-1 relative">
+            <!-- 折叠按钮 -->
+            <div class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
+                @click="handleClickTreeFold()">
+                <i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
+                    <el-icon>
+                        <ArrowLeftBold v-if="state.treeWidth > 0" />
+                        <ArrowRightBold v-else />
+                    </el-icon>
+                </i>
+            </div>
+
+            <div class="w-full h-full p-3 overflow-auto">
+                <slot name="default" />
+            </div>
+        </pane>
+    </Splitpanes>
+</template>
+
+<script setup lang="ts" name="draggableDeviceGroup">
+import { useMessage } from "/@/hooks/message"
+import { getDeviceGroupTree } from "/@/api/device/deviceGroup"
+
+const emit = defineEmits(["getSelectNode"])
+
+const props = withDefaults(
+    defineProps<{
+        placeholder?: string // 输入框占位符
+        showExpand?: boolean // 折叠控制
+        query?: (searchName?: string) => Promise<any> // 查询函数
+        props?: object
+        nodeClickable?: boolean
+        switchInactiveText?: string | undefined
+        switchActiveText?: string | undefined
+        defaultTreeWidth?: number | string
+    }>(),
+    {
+        placeholder: "",
+        showExpand: true,
+        query: (name?: string) => getDeviceGroupTree({ orgName: name || "" }),
+        props: () => {
+            return {
+                label: "name",
+                children: "children",
+                value: "id",
+                disabled: "isLock",
+            }
+        },
+        nodeClickable: true,
+        switchInactiveText: "当前级",
+        switchActiveText: "当前级及子级",
+        defaultTreeWidth: 20,
+    },
+)
+
+const treeRef = ref() // 树组件ref
+const state = reactive({
+    searchName: "", // 查询关键字
+    isExpand: true, // 是否展开树所有节点
+    treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
+    treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
+    treeDataList: [],
+    curClickedNode: {},
+    checkedTreeNodes: [], // 被勾选的树节点
+    loading: false,
+    switch: false, // switch开关
+})
+
+// 是否折叠树组件
+const treeVisible = computed(() => state.treeWidth > 0)
+
+// 获取部门树形结构数据
+const getTreeData = () => {
+    if (props.query instanceof Function) {
+        state.loading = true
+        const result = props.query(state.searchName)
+        // 如果查询结果为 Promise 类型，则进行后续处理
+        if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+            result
+                .then((r: any) => {
+                    if (r.data && r.data.length) {
+                        r.data = filterVisibleNodes(r.data)
+                    }
+                    state.treeDataList = r.data
+                })
+                .catch((err) => {
+                    useMessage().error(err.msg)
+                })
+                .finally(() => (state.loading = false))
+        }
+    }
+}
+
+// 过滤visible为false
+const filterVisibleNodes = (nodes: Array<any>) => {
+    if (!Array.isArray(nodes)) return [];
+    return nodes.reduce((filtered, node) => {
+        if (node.visible) {
+            const filteredNode = { ...node };
+            if (node.children?.length) {
+                filteredNode.children = filterVisibleNodes(node.children);
+            }
+            filtered.push(filteredNode);
+        } else if (node.children?.length) {
+            // 如果当前节点不是visible，但是它的子节点可能是visible，所以需要继续检查
+            const filteredChildren = filterVisibleNodes(node.children);
+            if (filteredChildren.length > 0) {
+                filtered.push({ ...node, children: filteredChildren });
+            }
+        }
+        return filtered;
+    }, []);
+}
+
+// 点击折叠树组件
+const handleClickTreeFold = () => {
+    if (treeVisible.value) {
+        state.treeWidthMemo = state.treeWidth
+        state.treeWidth = 0
+    } else {
+        state.treeWidth = state.treeWidthMemo
+    }
+}
+
+// 输入框改变
+const handleSearchInputChange = () => {
+    treeRef.value!.setCheckedKeys([], false)
+    state.checkedTreeNodes = []
+    state.curClickedNode = {}
+    getTreeData()
+}
+
+// 点击树形结构节点
+const handleNodeClick = (nodeData: any) => {
+    if (!props.nodeClickable) return
+    state.curClickedNode = nodeData
+    emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+}
+
+// 勾选树节点时
+const handleCheck = (data: any, checkStatus: any) => {
+    const { checkedNodes } = checkStatus
+    console.log("checkedNodes", checkedNodes)
+    state.checkedTreeNodes = checkedNodes
+    if (props.nodeClickable && state.checkedTreeNodes.length > 0) {
+        state.switch = false
+    }
+    emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+}
+
+// switch改变时
+const handleSwitchChange = () => emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+
+// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
+const toggleRowExpansionAll = (status: boolean) => {
+    state.isExpand = status
+    const nodes = treeRef.value.store._getAllNodes()
+    for (let i = 0; i < nodes.length; i++) {
+        nodes[i].expanded = status
+    }
+}
+
+// 重置数据
+const resetData = () => {
+    state.searchName = ""
+    state.checkedTreeNodes = []
+    state.curClickedNode = {}
+    state.switch = false
+    getTreeData()
+}
+onMounted(() => {
+    getTreeData()
+})
+
+defineExpose({
+    getTreeData,
+    resetData,
+})
+</script>
+
+<style>
+.splitpanes {
+    height: 100%;
+}
+
+.splitpanes>.splitpanes__pane {
+    height: 100%;
+}
+
+.splitpanes--vertical>.splitpanes__splitter {
+    background: var(--el-color-primary);
+    /* min-width: 2px; */
+    width: 2px;
+    transition: all 0.3s ease;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:active {
+    background: var(--el-color-primary);
+    opacity: 0.6;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:hover {
+    background: var(--el-color-primary);
+    opacity: 0.6;
+}
+</style>

src/components/index.ts

@@ -14,6 +14,7 @@ import Sign from '/@/components/Sign/index.vue';
 import ChinaArea from '/@/components/ChinaArea/index.vue';
 import OrgSelector from '/@/components/OrgSelector/index.vue';
 import DraggableOrgTree from "/@/components/DraggableOrgTree/index.vue"
+import DraggableDeviceGroup from "/@/components/DraggableDeviceGroup/index.vue"
 
 import PreviewImage from "/@/components/PreviewImage/index.vue"
 
@@ -73,6 +74,7 @@ export default {
 
 		app.component('PreviewImage', PreviewImage)
 		app.component('DraggableOrgTree', DraggableOrgTree)
+		app.component('DraggableDeviceGroup', DraggableDeviceGroup)
 
 		app.component('TagOnline', TagOnline);
 		app.component('TagSex', TagSex);