fix:修改bug

2026-01-21 09:35:50 +08:00
1 parent 7edd68b691
commit 4496d865a5
@@ -1,78 +1,82 @@
 export default {
-	root: true,
-	env: {
-		browser: true,
-		es2021: true,
-		node: true,
-	},
-	parser: 'vue-eslint-parser',
-	parserOptions: {
-		ecmaVersion: 12,
-		parser: '@typescript-eslint/parser',
-		sourceType: 'module',
-	},
-	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
-	plugins: ['vue', '@typescript-eslint'],
-	overrides: [
-		{
-			files: ['*.ts', '*.tsx', '*.vue'],
-			rules: {
-				'no-undef': 'off',
-			},
-		},
-	],
-	rules: {
-		// http://eslint.cn/docs/rules/
-		// https://eslint.vuejs.org/rules/
-		// https://typescript-eslint.io/rules/no-unused-vars/
-		'@typescript-eslint/ban-ts-ignore': 'off',
-		'@typescript-eslint/explicit-function-return-type': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-var-requires': 'off',
-		'@typescript-eslint/no-empty-function': 'off',
-		'@typescript-eslint/no-use-before-define': 'off',
-		'@typescript-eslint/ban-ts-comment': 'off',
-		'@typescript-eslint/ban-types': 'off',
-		'@typescript-eslint/no-non-null-assertion': 'off',
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
-		'@typescript-eslint/no-redeclare': 'error',
-		'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-		'@typescript-eslint/no-unused-vars': 'off',
-		'vue/custom-event-name-casing': 'off',
-		'vue/attributes-order': 'off',
-		'vue/one-component-per-file': 'off',
-		'vue/html-closing-bracket-newline': 'off',
-		'vue/max-attributes-per-line': 'off',
-		'vue/multiline-html-element-content-newline': 'off',
-		'vue/singleline-html-element-content-newline': 'off',
-		'vue/attribute-hyphenation': 'off',
-		'vue/html-self-closing': 'off',
-		'vue/no-multiple-template-root': 'off',
-		'vue/require-default-prop': 'off',
-		'vue/no-v-model-argument': 'off',
-		'vue/no-arrow-functions-in-watch': 'off',
-		'vue/no-template-key': 'off',
-		'vue/no-v-html': 'off',
-		'vue/comment-directive': 'off',
-		'vue/no-mutating-props': 'off',
-		'vue/no-parsing-error': 'off',
-		'vue/no-deprecated-v-on-native-modifier': 'off',
-		'vue/multi-word-component-names': 'off',
-		'no-useless-escape': 'off',
-		'no-sparse-arrays': 'off',
-		'no-prototype-builtins': 'off',
-		'no-constant-condition': 'off',
-		'no-use-before-define': 'off',
-		'no-restricted-globals': 'off',
-		'no-restricted-syntax': 'off',
-		'generator-star-spacing': 'off',
-		'no-unreachable': 'off',
-		'no-multiple-template-root': 'off',
-		'no-unused-vars': 'off',
-		'no-v-model-argument': 'off',
-		'no-case-declarations': 'off',
-		'no-console': 'error',
-		'no-redeclare': 'off',
-		'no-mixed-spaces-and-tabs': 'off',
-	},
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    ecmaVersion: 12,
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "plugin:vue/essential",
+    "eslint:recommended",
+  ],
+  plugins: ["vue", "@typescript-eslint"],
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx", "*.vue"],
+      rules: {
+        "no-undef": "off",
+      },
+    },
+  ],
+  rules: {
+    // http://eslint.cn/docs/rules/
+    // https://eslint.vuejs.org/rules/
+    // https://typescript-eslint.io/rules/no-unused-vars/
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-redeclare": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "vue/custom-event-name-casing": "off",
+    "vue/attributes-order": "off",
+    "vue/one-component-per-file": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/attribute-hyphenation": "off",
+    "vue/html-self-closing": "off",
+    "vue/no-multiple-template-root": "off",
+    "vue/require-default-prop": "off",
+    "vue/no-v-model-argument": "off",
+    "vue/no-arrow-functions-in-watch": "off",
+    "vue/no-template-key": "off",
+    "vue/no-v-html": "off",
+    "vue/comment-directive": "off",
+    "vue/no-mutating-props": "off",
+    "vue/no-parsing-error": "off",
+    "vue/no-deprecated-v-on-native-modifier": "off",
+    "vue/multi-word-component-names": "off",
+    "no-useless-escape": "off",
+    "no-sparse-arrays": "off",
+    "no-prototype-builtins": "off",
+    "no-constant-condition": "off",
+    "no-use-before-define": "off",
+    "no-restricted-globals": "off",
+    "no-restricted-syntax": "off",
+    "generator-star-spacing": "off",
+    "no-unreachable": "off",
+    "no-multiple-template-root": "off",
+    "no-unused-vars": "off",
+    "no-v-model-argument": "off",
+    "no-case-declarations": "off",
+    "no-console": "error",
+    "no-redeclare": "off",
+    "no-mixed-spaces-and-tabs": "off",
+  },
 };
@@ -1,39 +1,39 @@
 export default {
-	// 一行最多多少个字符
-	printWidth: 150,
-	// 指定每个缩进级别的空格数
-	tabWidth: 2,
-	// 使用制表符而不是空格缩进行
-	useTabs: true,
-	// 在语句末尾打印分号
-	semi: true,
-	// 使用单引号而不是双引号
-	singleQuote: true,
-	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
-	quoteProps: 'as-needed',
-	// 在JSX中使用单引号而不是双引号
-	jsxSingleQuote: false,
-	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-	trailingComma: 'es5',
-	// 在对象文字中的括号之间打印空格
-	bracketSpacing: true,
-	// jsx 标签的反尖括号需要换行
-	jsxBracketSameLine: false,
-	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
-	arrowParens: 'always',
-	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
-	rangeStart: 0,
-	rangeEnd: Infinity,
-	// 指定要使用的解析器，不需要写文件开头的 @prettier
-	requirePragma: false,
-	// 不需要自动在文件开头插入 @prettier
-	insertPragma: false,
-	// 使用默认的折行标准 always\never\preserve
-	proseWrap: 'preserve',
-	// 指定HTML文件的全局空格敏感度 css\strict\ignore
-	htmlWhitespaceSensitivity: 'css',
-	// Vue文件脚本和样式标签缩进
-	vueIndentScriptAndStyle: false,
-	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
-	endOfLine: 'lf',
+  // 一行最多多少个字符
+  printWidth: 150,
+  // 指定每个缩进级别的空格数
+  tabWidth: 2,
+  // 使用制表符而不是空格缩进行
+  useTabs: true,
+  // 在语句末尾打印分号
+  semi: true,
+  // 使用单引号而不是双引号
+  singleQuote: true,
+  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+  quoteProps: "as-needed",
+  // 在JSX中使用单引号而不是双引号
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+  trailingComma: "es5",
+  // 在对象文字中的括号之间打印空格
+  bracketSpacing: true,
+  // jsx 标签的反尖括号需要换行
+  jsxBracketSameLine: false,
+  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+  arrowParens: "always",
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准 always\never\preserve
+  proseWrap: "preserve",
+  // 指定HTML文件的全局空格敏感度 css\strict\ignore
+  htmlWhitespaceSensitivity: "css",
+  // Vue文件脚本和样式标签缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+  endOfLine: "lf",
 };
@@ -1,35 +1,35 @@
 (function () {
-    const result = []
-    const dictId = "1970693001990479873"
-    const dictType = "alarm_type"
-    let children = document.querySelector("#doc").children;
-    if (children) {
-        children = Array.from(children)
+  const result = [];
+  const dictId = "1970693001990479873";
+  const dictType = "alarm_type";
+  let children = document.querySelector("#doc").children;
+  if (children) {
+    children = Array.from(children);
+  }
+  if (children && children.length) {
+    children.forEach((dom) => {
+      const tdList = dom.querySelectorAll("td");
+      const id = tdList[0];
+      const desc = tdList[1];
+      result.push({
+        id: id?.innerText,
+        desc: desc?.innerText,
+      });
+    });
+  }
+  // 生产sql
+  let fullSql = ``;
+  if (result && result.length) {
+    let sort = 10;
+    for (const v of result) {
+      // 随机id 当前时间戳 + 6位数数字随机
+      const id = new Date().getTime() + Math.floor(Math.random() * 1000000);
+      const sql = `
+            INSERT INTO jhkjx.sys_dict_item (id, dict_id, item_value, label, dict_type, description, sort_order, create_by, update_by, create_time, update_time, remarks, del_flag, tenant_id) VALUES (${id}, ${dictId}, '${v.id}', '${v.desc}', '${dictType}',  '${v.desc}', ${sort}, ' ', ' ', '2019-03-19 11:08:59', '2019-03-25 12:49:13', '', '0', 1);`;
+      // 换行
+      fullSql = fullSql + sql + "\n";
+      sort += 10;
    }
-    if (children && children.length) {
-        children.forEach((dom) => {
-            const tdList = dom.querySelectorAll("td")
-            const id = tdList[0]
-            const desc = tdList[1]
-            result.push({
-                id: id?.innerText,
-                desc: desc?.innerText
-            })
-        });
-    }
-    // 生产sql
-    let fullSql = ``
-    if (result && result.length) {
-        let sort = 10
-        for (const v of result) {
-            // 随机id 当前时间戳 + 6位数数字随机
-            const id = new Date().getTime() + Math.floor(Math.random() * 1000000)
-            const sql = `
-            INSERT INTO jhkjx.sys_dict_item (id, dict_id, item_value, label, dict_type, description, sort_order, create_by, update_by, create_time, update_time, remarks, del_flag, tenant_id) VALUES (${id}, ${dictId}, '${v.id}', '${v.desc}', '${dictType}',  '${v.desc}', ${sort}, ' ', ' ', '2019-03-19 11:08:59', '2019-03-25 12:49:13', '', '0', 1);`
-            // 换行
-            fullSql = fullSql + sql + "\n"
-            sort += 10
-        }
-    }
-    console.log(fullSql);
-})();
+  }
+  console.log(fullSql);
+})();
@@ -22,6 +22,40 @@ export function createGroupItem(data: any) {
  })
 }

+/**
+ * 添加设施分组子项
+ */
+export function createGroupItems(data: any) {
+  return request({
+    url: '/admin/device/deviceGroup/createGroupItems',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 添加设施分组子项
+ */
+export function editGroupItem(data: any) {
+  return request({
+    url: '/admin/device/deviceGroup/editGroupItem',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 添加设施分组子项
+ */
+export function groupItemDetail(params: any) {
+  return request({
+    url: '/admin/device/deviceGroup/groupItemDetail',
+    method: 'get',
+    params: params
+  })
+}
+
+
 /**
 * 删除设施分组子项
 */
@@ -0,0 +1,431 @@
+<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"
+                        :check-strictly="false" node-key="id" :highlight-current="nodeClickable ? true : false"
+                        draggable default-expand-all :show-checkbox="state.showCheckbox" @node-click="handleNodeClick"
+                        @check="handleCheck" @node-drop="handleNodeDrop" @node-drag-start="nodeDragStart"
+                        :allow-drag="handleAllowDrag" :allow-drop="handleAllowDrop"
+                        :default-expanded-keys="state.defaultExpandedKeys">
+                        <template #default="{ node, data }">
+                            <div class="flex items-center">
+                                <div v-if="data.deep == 2 && state.checkedTreeExtMap[data.id]"
+                                    style="margin-right: 8px;">
+                                    <el-tag size="small" effect="dark" color="var(--el-color-primary)">
+                                        {{ state.checkedTreeExtMap[data.id] }}
+                                    </el-tag>
+                                </div>
+                                <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 v-if="false" 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="DraggableDeviceGroupDraggable">
+import { useMessage } from "/@/hooks/message"
+import { getDeviceGroupTree, editGroupItem } 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
+        windowNum?: number | null
+    }>(),
+    {
+        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,
+        windowNum: null
+    },
+)
+
+const treeRef = ref() // 树组件ref
+const windowMap: Record<string, number> = {
+    "2": 1,
+    "4": 2,
+    "9": 3
+}
+const state = reactive<any>({
+    searchName: "", // 查询关键字
+    isExpand: true, // 是否展开树所有节点
+    treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
+    treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
+    treeDataList: [],
+    curClickedNode: {},
+    checkedTreeNodes: [], // 被勾选的树节点
+    loading: false,
+    switch: false, // switch开关
+    defaultExpandedKeys: [],
+    showCheckbox: true, // 节点是否可被选择
+    windowNum: null,
+    checkedTreeExtMap: {}
+})
+
+// 是否折叠树组件
+const treeVisible = computed(() => state.treeWidth > 0)
+
+watch(() => [props.windowNum, state.checkedTreeNodes], (newVal, oldVal) => {
+    if (newVal[0] !== oldVal[0]) {
+        state.windowNum = newVal[0]
+    }
+    setCheckedTreeExt()
+})
+
+const setCheckedTreeExt = () => {
+    const targetNum = windowMap[String(state.windowNum)]
+    if (!targetNum) {
+        return
+    }
+    state.checkedTreeExtMap = {}
+    const checkedTreeNodes = state.checkedTreeNodes.filter((item: any) => item.deep == 2)
+    const maxLength = checkedTreeNodes.length
+    let current = 0
+    for (let i = 1; i <= targetNum; i++) {
+        for (let j = 1; j <= targetNum; j++) {
+            if (current >= maxLength) break
+            const select = checkedTreeNodes[current]
+            state.checkedTreeExtMap[select.id] = `${i}-${j}`
+            current++
+        }
+    }
+}
+
+const getTreeData = async () => {
+    if (props.query instanceof Function) {
+        state.loading = true
+        try {
+            const result = props.query(state.searchName)
+            // 如果查询结果为 Promise 类型，则进行后续处理
+            if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+                const r = await result
+                if (r.data && r.data.length) {
+                    r.data = filterVisibleNodes(r.data)
+                }
+                state.treeDataList = r.data
+
+                if (state.checkedTreeNodes && state.checkedTreeNodes.length) {
+                    // 更新已选中的sort
+                    for (const select of state.checkedTreeNodes) {
+                        if (select.deep == 1) continue
+                        const parentList = state.treeDataList.find((v: any) => v.id == select.parentId)
+                        if (parentList && parentList.children) {
+                            const target = parentList.children.find((v: any) => v.id == select.id)
+                            if (target) {
+                                select.sort = target.sort
+                            }
+                        }
+                    }
+                }
+            }
+        } catch (err: any) {
+            useMessage().error(err.msg)
+        } finally {
+            state.loading = false
+        }
+    }
+}
+
+// 或者获取默认展开的节点
+const getDefaultExpandedKeys = () => {
+    const targetIndex = state.treeDataList.findIndex((item: any) => item.children && item.children.length)
+    if (~targetIndex) {
+        const targetList = state.treeDataList[targetIndex]
+        state.defaultExpandedKeys = [targetList.id, ...targetList.children.map((item: any) => item.id)]
+        // 获取选中的keys
+        treeRef.value?.setCheckedKeys(state.defaultExpandedKeys)
+        // 获取选中的节点
+        state.checkedTreeNodes = treeRef.value?.getCheckedNodes()
+        emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch, buildParentChildCheckedArray())
+    }
+}
+
+// 过滤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, buildParentChildCheckedArray())
+}
+
+// 判断节点能否被拖拽如果返回false，节点不能被拖动
+const handleAllowDrag = (node: any): boolean => {
+    if (state.checkedTreeNodes && state.checkedTreeNodes.length) {
+        const checkedCodes = state.checkedTreeNodes.map((item: any) => item.code)
+        const nodeCode = node.data.code
+        if (!nodeCode) return false
+        return checkedCodes.includes(nodeCode)
+    }
+    return false
+}
+
+// 拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
+const handleAllowDrop = (draggingNode: any, dropNode: any, type: any): boolean => {
+    // 不能插入到节点中
+    if (type === "inner") return false
+    // 不能拖入到非checked节点中
+    if (handleAllowDrag(draggingNode) && handleAllowDrag(dropNode)) {
+        // 不能拖入到自己的子节点中
+        if (draggingNode.data.id == dropNode.data.id) return false
+        // 父节点必须一致
+        if (draggingNode.data.parentId != dropNode.data.parentId) {
+            return false
+        }
+        return true
+    }
+    return false
+}
+
+// 节点开始拖拽时触发的事件
+const nodeDragStart = (node: Node, ev: DragEvent) => {
+}
+
+// 拖拽成功完成时触发的事件
+const handleNodeDrop = async (draggingNode: any, dropNode: any, dropType: any, ev: DragEvent) => {
+    const checkedIds = state.checkedTreeNodes.map((item: any) => item.id)
+    if (checkedIds && checkedIds.length) {
+        treeRef.value?.setCheckedKeys(checkedIds)
+    }
+    const draggingNodeSort = draggingNode.data?.sort ?? 0
+    const dropNodeSort = dropNode.data?.sort ?? 0
+    try {
+        await editGroupItem({
+            id: draggingNode.data.id,
+            sort: dropNodeSort + 10
+        })
+        await getTreeData()
+        if (state.checkedTreeNodes && state.checkedTreeNodes.length) {
+            // 重写排序
+            state.checkedTreeNodes = state.checkedTreeNodes.filter((item: any) => item.deep == 2).sort((a: any, b: any) => b.sort - a.sort)
+        }
+        emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch, buildParentChildCheckedArray())
+    } catch (error) {
+        console.log("|拖拽成功完成时触发的事件|,意外的错误", error);
+    }
+    setCheckedTreeExt()
+}
+
+// 勾选树节点时
+const handleCheck = (data: any, checkStatus: any) => {
+    const { checkedNodes } = checkStatus
+    const halfCheckedNodes = treeRef.value?.getHalfCheckedNodes?.() || []
+    const merged: any[] = []
+    const seen = new Set<string>()
+        ;[...checkedNodes, ...halfCheckedNodes].forEach((n: any) => {
+            const k = String(n.id ?? n.value ?? '')
+            if (k && !seen.has(k)) {
+                seen.add(k)
+                merged.push(n)
+            }
+        })
+    state.checkedTreeNodes = merged
+    if (props.nodeClickable && state.checkedTreeNodes.length > 0) {
+        state.switch = false
+    }
+    emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch, buildParentChildCheckedArray())
+}
+
+// switch改变时
+const handleSwitchChange = () => emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch, buildParentChildCheckedArray())
+
+function buildParentChildCheckedArray(): Array<Record<string, string[]>> {
+    const result: Array<Record<string, string[]>> = []
+    const leafIds = new Set<string>(
+        (state.checkedTreeNodes || [])
+            .filter((n: any) => n && (n.deep === 2 || !n.children || (Array.isArray(n.children) && n.children.length === 0)))
+            .map((n: any) => String(n.id))
+    )
+    if (!state.treeDataList || !state.treeDataList.length || leafIds.size === 0) return result
+    for (const parent of state.treeDataList) {
+        const pId = String(parent.id)
+        const children = Array.isArray(parent.children) ? parent.children : []
+        const childIds: string[] = []
+        for (const ch of children) {
+            const cid = String(ch.id)
+            if (leafIds.has(cid)) childIds.push(cid)
+        }
+        if (childIds.length) {
+            result.push({ [pId]: childIds })
+        }
+    }
+    return result
+}
+
+// 切换所有节点的展开/收起状态。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(async () => {
+    await getTreeData()
+    getDefaultExpandedKeys()
+})
+
+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>
@@ -4,7 +4,19 @@
        children: 'deviceChannelList',
    }" node-key="treeValue" v-model="state.selectId" :placeholder="props.placeholder" :clearable="props.clearable"
        :loading="state.loading" :data="state.options" :render-after-expand="false" show-checkbox multiple
-        style="width: 100%" filterable default-expand-all @visible-change="(e: boolean) => e && getOptions()" />
+        style="width: 100%" filterable default-expand-all @visible-change="(e: boolean) => e && getOptions()">
+        <template #default="{ data, node }">
+            <div v-if="node.level == 1" class="flex items-center gap-2">
+                <el-tag size="small" effect="dark" color="var(--el-color-primary)">硬盘录像机</el-tag>
+                <span class="font-medium truncate max-w-[160px]">{{ data.deviceName }}</span>
+                <span class="text-gray-400 truncate max-w-[160px]">{{ data.deviceIp }}:{{ data.devicePort }}</span>
+            </div>
+            <div v-if="node.level == 2" class="flex items-center gap-2">
+                <el-tag size="small" effect="dark" color="var(--el-color-success)">摄像头</el-tag>
+                <span class="truncate max-w-[200px]">{{ data.channelName }}</span>
+            </div>
+        </template>
+    </el-tree-select>
 </template>

 <script setup lang="ts" name="select-tree-channel">
@@ -49,7 +61,7 @@ watch(
    (newVal, oldValue) => {
        if (newVal == oldValue) return
        state.selectId = newVal
-        getOptions()
+        // getOptions()
    },
    { immediate: true },
 )
@@ -77,4 +89,8 @@ async function getOptions() {
 .stafftree>.el-tree-node>.el-tree-node__content .el-checkbox {
    display: none;
 }
-</style>
+
+.--el-tree-node-content-height {
+    height: 40px !important;
+}
+</style>
@@ -17,6 +17,7 @@ import OrgSelector from '/@/components/OrgSelector/index.vue';
 import DraggableDeptTree from "/@/components/DraggableDeptTree/index.vue"
 import DraggableOrgTree from "/@/components/DraggableOrgTree/index.vue"
 import DraggableDeviceGroup from "/@/components/DraggableDeviceGroup/index.vue"
+import DraggableDeviceGroupDraggable from "/@/components/DraggableDeviceGroupDraggable/index.vue"

 import PreviewImage from "/@/components/PreviewImage/index.vue"

@@ -80,6 +81,7 @@ export default {
 		app.component('DraggableDeptTree', DraggableDeptTree)
 		app.component('DraggableOrgTree', DraggableOrgTree)
 		app.component('DraggableDeviceGroup', DraggableDeviceGroup)
+		app.component('DraggableDeviceGroupDraggable', DraggableDeviceGroupDraggable)

 		app.component('TagOnline', TagOnline);
 		app.component('TagSex', TagSex);
@@ -51,6 +51,23 @@
            <el-switch v-model="form.panelClickCollectEnable" active-text="开启" inactive-text="关闭" active-value="1"
                inactive-value="0" />
        </el-form-item>
+
+        <el-form-item prop="panelClickCollectEnable">
+            <template #label>
+                <div class="flex items-center gap-1">
+                    <span>拾取模式</span>
+                    <el-tooltip class="box-item" :content="`请选择拾取模式`" placement="top">
+                        <el-icon :size="16">
+                            <InfoFilled />
+                        </el-icon>
+                    </el-tooltip>
+                </div>
+            </template>
+            <el-radio-group v-model="form.panelCollectEnableType">
+                <el-radio label="ROOM_NUM" size="large">房间号</el-radio>
+                <el-radio label="CAMERA" size="large">摄像头</el-radio>
+            </el-radio-group>
+        </el-form-item>
    </el-form>

 </template>
@@ -77,6 +94,8 @@ const form = reactive<any>({
    panelUrl: null,
    // 是否开启大屏经纬度拾取
    panelClickCollectEnable: "0",
+    // 拾取模式
+    panelCollectEnableType: "ROOM_NUM"
 })

 const dataRules = ref({
@@ -144,4 +163,4 @@ defineExpose({
    onSubmit
 });

-</script>
+</script>
@@ -15,6 +15,8 @@ import PlayerManager from "../../components/lib/icc/PlayerManager";
 // @ts-ignore
 import { rendererVideoPage } from "../lib/custom/video-custom"

+const emit = defineEmits(["windowNumChanged"])
+
 let realPlayer: any = null;

 const state = reactive<any>({
@@ -28,13 +30,14 @@ const state = reactive<any>({
     * 2=辅码流
     * 3=辅码流2
     */
-    streamType: 1,
+    streamType: 2,
    current: 1,
    total: 100,
 })

 const query = reactive({
    list: [],
+    deviceMap: {},
    deviceCode: null,
 })

@@ -43,7 +46,7 @@ onUnmounted(() => {
 })

 // 视频预览初始化
-async function init(channelCodelist: any, deviceCode: any) {
+async function init(channelCodelist: any, deviceCode: any, deviceMap: any) {
    try {
        destroy()
        if (channelCodelist) {
@@ -52,6 +55,11 @@ async function init(channelCodelist: any, deviceCode: any) {
        if (deviceCode) {
            query.deviceCode = deviceCode
        }
+        if (deviceMap) {
+            query.deviceMap = deviceMap
+        } else {
+            query.deviceMap = {}
+        }
        state.current = 1
        state.num = state.numList[state.numList.length - 1]
        refreshPage()
@@ -65,16 +73,15 @@ async function initVideo() {
    const _params = {
        deviceChannelCodeList: query.list ?? [],
        deviceCode: query.deviceCode ?? null,
+        deviceTreeMap: query.deviceMap ?? null,
        current: state.current,
        size: state.num,
    };
    try {
        let { code, data } = await DeviceChannelApi.getChannelPage(_params);
        if (code != 0) throw new Error();
-        let { records, total } = data
+        let { records = [], total } = data
        if (!records || !records.length) records = []
-        console.log("page total:", total);
-
        state.total = total
        let suitableNum = state.num
        if (state.total < state.numList[state.numList.length - 1]) {
@@ -148,7 +155,7 @@ function initPlayerManager() {
                    break;
                // 播放器显示的路数发生改变
                case "windowNumChanged":
-                    console.log("每页", data);
+                    emit("windowNumChanged", data)
                    if (data == state.num) return
                    state.current = 1
                    state.num = data
@@ -223,7 +230,6 @@ function refreshPage() {
            return state.total
        },
        onChange: (page: any, pageSize: any) => {
-            console.log("分页", page, pageSize);
            if (page == state.current && pageSize == state.num) {
                return
            }
@@ -11,6 +11,7 @@ import { formatDateRange } from "/@/utils/formatTime"
 import * as AlarmReplayVideoListApi from "/@/api/third/deviceCameraReplay"
 import * as DeviceChannelApi from "/@/api/device/deviceChannel"

+const emit = defineEmits(["windowNumChanged"])

 // @ts-ignore
 import PlayerManager from "../lib/icc/PlayerManager";
@@ -143,6 +144,7 @@ function initPlayerManager() {
                    break;
                // 播放器显示的路数发生改变
                case 'windowNumChanged':
+                    emit("windowNumChanged", data)
                    if (state.currentNum == data) return
                    state.currentNum = data
                    if (replayVideo) {
@@ -25,7 +25,7 @@
            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
            @sort-change="sortChangeHandle">
            <el-table-column type="selection" width="40" align="center" />
-            <el-table-column type="index" label="#" width="40" />
+            <el-table-column type="index" label="#" width="60" />
            <el-table-column prop="groupName" label="设备" />
            <el-table-column label="设备">
                <el-table-column prop="deviceName" label="设备名" />
@@ -37,8 +37,24 @@
                    </template>
                </el-table-column>
            </el-table-column>
+            <el-table-column width="120" prop="groupName" label="默认播放码流">
+                <template #default="{ row }">
+                    <el-tag v-if="row.deviceChannelStreamType == 1" type="primary">主码流</el-tag>
+                    <el-tag v-else-if="row.deviceChannelStreamType == 2" type="primary">辅码流</el-tag>
+                    <el-tag v-else type="danger">未定义</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column width="80" prop="groupName" label="排序">
+                <template #default="{ row }">
+                    {{ row.sort ?? 0 }}
+                </template>
+            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
+                    <el-button icon="edit-pen" text type="primary" @click="cameraTableFormDialogRef.openDialog
+                        (row.id)">
+                        编辑
+                    </el-button>
                    <el-button icon="delete" text type="primary" size="mini" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
@@ -51,7 +67,8 @@
            <el-row :gutter="24">
                <el-col :span="24" class="mb20">
                    <el-form-item label="摄像头" prop="deviceChannelCode">
-                        <select-tree-channel-radio v-model="cameraForm.deviceChannelCode" placeholder="请选择摄像头" />
+                        <!-- <select-tree-channel-radio v-model="cameraForm.deviceChannelCode" placeholder="请选择摄像头" /> -->
+                        <select-tree-channel v-model="cameraForm.deviceChannelCode" placeholder="请选择摄像头" />
                    </el-form-item>
                </el-col>
            </el-row>
@@ -63,6 +80,8 @@
            </span>
        </template>
    </el-dialog>
+
+    <camera-table-form-dialog ref="cameraTableFormDialogRef" @refresh="getDataList" />
 </template>

 <script setup lang="ts" name="CameraTableDialog">
@@ -71,8 +90,11 @@ import { useMessage, useMessageBox } from "/@/hooks/message";

 import * as deviceGroupApi from "/@/api/device/deviceGroup";

+import CameraTableFormDialog from "./camera-table-form-dialog.vue"
+
 // 定义变量内容
 const dataFormRef = ref();
+const cameraTableFormDialogRef = ref()

 const visible = ref(false)
 const cameraVisible = ref(false)
@@ -81,7 +103,7 @@ const cameraLoading = ref(false)

 const cameraForm = reactive<any>({
    groupId: "",
-    deviceChannelCode: "",
+    deviceChannelCode: [],
 });

 const cameraDataRules = ref({
@@ -165,7 +187,7 @@ async function onCameraSubmit() {
    if (!valid) return
    cameraLoading.value = true
    try {
-        const { data } = await deviceGroupApi.createGroupItem(cameraForm)
+        const { data } = await deviceGroupApi.createGroupItems(cameraForm)
        if (!data) throw new Error()
        cameraLoading.value = false
        cameraVisible.value = false
@@ -0,0 +1,113 @@
+<template>
+    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" width="40%" :close-on-click-modal="false" draggable>
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px"
+            v-loading="loading">
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="默认码流" prop="deviceChannelStreamType">
+                        <el-select v-model="form.deviceChannelStreamType" placeholder="请选择默认码流">
+                            <el-option label="主码流" value="1" />
+                            <el-option label="辅码流" value="2" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="排序" prop="sort">
+                        <template #label>
+                            <span>排序</span>
+                            <tip content="越大越在前" />
+                        </template>
+                        <el-input-number :min="0" :step="1" v-model="form.sort" placeholder="" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="CameraTableFormDialog">
+import * as deviceGroupApi from "/@/api/device/deviceGroup";
+import { useMessage } from "/@/hooks/message";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 提交表单数据
+const defaultForm = {
+    id: '',
+    deviceChannelStreamType: "1",
+    sort: 10,
+}
+const form = reactive({ ...defaultForm });
+
+// 定义校验规则
+const dataRules = ref({
+    name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }],
+    deviceChannelStreamType: [{ required: true, message: '默认码流不能为空', trigger: 'change' }],
+    sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+})
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+    try {
+        loading.value = true;
+        const _form: any = {
+            id: form.id,
+            deviceChannelStreamType: form.deviceChannelStreamType,
+            sort: form.sort,
+        }
+        await deviceGroupApi.editGroupItem(_form)
+        useMessage().success(form.id ? '修改成功' : '添加成功');
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+}
+
+const openDialog = (id: string) => {
+    visible.value = true
+    form.id = ''
+    // 重置表单数据
+    dataFormRef.value?.resetFields();
+    Object.assign(form, defaultForm)
+    // 获取deviceGroup信息
+    if (id) {
+        form.id = id
+        getdeviceGroupItemData(id)
+    }
+}
+
+// 初始化表单数据
+const getdeviceGroupItemData = async (id: string) => {
+    try {
+        loading.value = true
+        const { code, data } = await deviceGroupApi.groupItemDetail({ itemId: id })
+        Object.assign(form, data)
+    } catch (error) {
+        console.error("|初始化表单数据|意外的错误:", error);
+    } finally {
+        loading.value = false
+    }
+}
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>
@@ -9,7 +9,7 @@
        </el-col>

        <el-col :span="24" class="mb20">
-          <el-form-item label="大屏预览分组" prop="bizType">
+          <el-form-item label="大屏预览分组" prop="panelViewCodes">
            <dict-select v-model="form.panelViewCodes" :options="panel_type" multiple placeholder="请选择大屏预览分组" />
          </el-form-item>
        </el-col>
@@ -55,18 +55,19 @@ const loading = ref(false)
 // 定义字典
 const { panel_type } = useDict("panel_type")
 // 提交表单数据
-const form = reactive({
+const defaultForm = {
  id: '',
  name: '',
  bizType: '',
  panelViewCodes: [],
-  sort: '',
-});
+  sort: 10,
+}
+const form = reactive({ ...defaultForm });

 // 定义校验规则
 const dataRules = ref({
  name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }],
-  bizType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
+  panelViewCodes: [{ required: true, message: '类型不能为空', trigger: 'change' }],
  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
 })

@@ -76,10 +77,8 @@ const openDialog = (id: string) => {
  form.id = ''

  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
-
+  dataFormRef.value?.resetFields();
+  Object.assign(form, defaultForm)
  // 获取deviceGroup信息
  if (id) {
    form.id = id
@@ -119,6 +118,8 @@ const getdeviceGroupData = async (id: string) => {
    const { code, data } = await deviceGroupApi.getObj(id)
    if (data.panelViewCodes) {
      data.panelViewCodes = data.panelViewCodes.split(',')
+    } else {
+      data.panelViewCodes = []
    }
    Object.assign(form, data)
  } catch (error) {
@@ -1,16 +1,17 @@
 <template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
-            <draggable-device-group ref="draggableDepTreeRef" placeholder="请输入设施分组" :show-expand="true"
+            <draggable-device-group-draggable ref="draggableDepTreeRef" placeholder="请输入设施分组" :show-expand="true"
                @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-                :defaultTreeWidth="20" :nodeClickable="false">
+                :defaultTreeWidth="30" :nodeClickable="false" :windowNum="state.windowNum">
                <template #default>
                    <div class="w-full h-full flex flex-col">
                        <el-tabs v-model="state.currentTab" class="demo-tabs" @tab-click="tabClick">
                            <el-tab-pane v-for="(v, i) in data.tabs" :key="v.name" :label="v.label" :name="v.name" />
                        </el-tabs>
                        <div class="w-full h-full flex-1 overflow-hidden" v-loading="videoLoading">
-                            <preview-video ref="previewVideoRef" v-if="state.currentTab == 'PREVIEW'" />
+                            <preview-video ref="previewVideoRef" v-if="state.currentTab == 'PREVIEW'"
+                                @windowNumChanged="windowNumChanged" />
                            <div class="w-full h-full flex flex-col" v-if="state.currentTab == 'DOOR'">
                                <el-row shadow="hover" class="ml10">
                                    <el-form :model="state.replayForm" ref="queryRef" :inline="true"
@@ -40,12 +41,13 @@
                                        </el-form-item>
                                    </el-form>
                                </el-row>
-                                <replay-video class="flex-1 overflow-hidden" ref="replayVideoRef" />
+                                <replay-video class="flex-1 overflow-hidden" ref="replayVideoRef"
+                                    @windowNumChanged="windowNumChanged" />
                            </div>
                        </div>
                    </div>
                </template>
-            </draggable-device-group>
+            </draggable-device-group-draggable>
        </div>
    </div>
 </template>
@@ -85,21 +87,27 @@ const data = {

 const state = reactive({
    currentTab: data.tabs[0].name,
+    deviceTreeMap: {},
    channelCodeList: [],
    replayForm: {
        streamType: "1",
        recordSource: "2",
        videoDateList: getDefaultDateRange()
    },
-    dataList: []
+    dataList: [],
+    windowNum: null
 })

 onMounted(() => {

 })

+const windowNumChanged = (num: any) => {
+    state.windowNum = num
+}
+
 // 树节点选择时
-const handleGetSelectNode = async (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+const handleGetSelectNode = async (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean, selectMap: any) => {
    if (!checkedTreeNodes || !checkedTreeNodes.length) return
    const list = checkedTreeNodes.filter((v: any) => v.deep == 2).map((v: any) => v.code)
    if (!list || !list.length) {
@@ -107,6 +115,7 @@ const handleGetSelectNode = async (curClickedNode: any, checkedTreeNodes: any, i
        return;
    }
    state.channelCodeList = list
+    state.deviceTreeMap = selectMap
    init(state.currentTab)
 }

@@ -120,7 +129,7 @@ function init(type: string) {
        await new Promise(resolve => setTimeout(resolve, 500))
        switch (type) {
            case 'PREVIEW':
-                previewVideoRef.value.init(state.channelCodeList)
+                previewVideoRef.value.init(state.channelCodeList, null, state.deviceTreeMap)
                break;
            case 'DOOR':
                await getDataList()
@@ -0,0 +1,211 @@
+<template>
+    <el-dialog title="摄像头列表" v-model="visible" :close-on-click-modal="false" width="60%" draggable>
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+            <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
+                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
+            </el-form-item>
+            <el-form-item style="width: 250px;" label="设备ip" prop="deviceIp">
+                <el-input v-model="state.queryForm.deviceIp" placeholder="请输入设备ip" />
+            </el-form-item>
+            <el-form-item>
+                <el-button icon="search" type="primary" @click="getDataList">
+                    {{ $t('common.queryBtn') }}
+                </el-button>
+                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row>
+            <div class="mb8" style="width: 100%">
+                <el-button icon="folder-add" type="primary" class="ml10" @click="addCamera">
+                    新 增
+                </el-button>
+            </div>
+        </el-row>
+        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+            @sort-change="sortChangeHandle">
+            <el-table-column type="selection" width="40" align="center" />
+            <el-table-column type="index" label="#" width="60" />
+            <el-table-column prop="groupName" label="设备" />
+            <el-table-column label="设备">
+                <el-table-column prop="deviceName" label="设备名" />
+                <el-table-column prop="channelName" label="通道名" />
+                <el-table-column prop="deviceIp" label="设备ip">
+                    <template #default="{ row }">
+                        <span>{{ row.deviceIp }}</span>
+                        <span v-if="row.devicePort">:{{ row.devicePort }}</span>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column width="120" prop="groupName" label="默认播放码流">
+                <template #default="{ row }">
+                    <el-tag v-if="row.deviceChannelStreamType == 1" type="primary">主码流</el-tag>
+                    <el-tag v-else-if="row.deviceChannelStreamType == 2" type="primary">辅码流</el-tag>
+                    <el-tag v-else type="danger">未定义</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column width="80" prop="groupName" label="排序">
+                <template #default="{ row }">
+                    {{ row.sort ?? 0 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template #default="{ row }">
+                    <el-button icon="edit-pen" text type="primary" @click="cameraTableFormDialogRef.openDialog
+                        (row.id)">
+                        编辑
+                    </el-button>
+                    <el-button icon="delete" text type="primary" size="mini" @click="handleDelete(row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-dialog>
+
+    <el-dialog title="添加摄像头" v-model="cameraVisible" :close-on-click-modal="false" width="30%" draggable>
+        <el-form ref="dataFormRef" :model="cameraForm" :rules="cameraDataRules" formDialogRef label-width="90px">
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="摄像头" prop="deviceChannelCode">
+                        <!-- <select-tree-channel-radio v-model="cameraForm.deviceChannelCode" placeholder="请选择摄像头" /> -->
+                        <select-tree-channel v-model="cameraForm.deviceChannelCode" placeholder="请选择摄像头" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="cameraVisible = false">取消</el-button>
+                <el-button type="primary" @click="onCameraSubmit" :disabled="cameraLoading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <camera-table-form-dialog ref="cameraTableFormDialogRef" @refresh="getDataList" />
+</template>
+
+<script setup lang="ts" name="CameraTableDialog">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+
+import * as deviceGroupApi from "/@/api/device/deviceGroup";
+
+import CameraTableFormDialog from "./camera-table-form-dialog.vue"
+
+// 定义变量内容
+const dataFormRef = ref();
+const cameraTableFormDialogRef = ref()
+
+const visible = ref(false)
+const cameraVisible = ref(false)
+
+const cameraLoading = ref(false)
+
+const cameraForm = reactive<any>({
+    groupId: "",
+    deviceChannelCode: [],
+});
+
+const cameraDataRules = ref({
+    deviceChannelCode: [{ required: true, message: '摄像头不能为空', trigger: 'change' }],
+})
+
+// 搜索变量
+const queryRef = ref()
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: { groupId: "" },
+    pageList: deviceGroupApi.getDeviceGroupList
+})
+
+//  table hook
+const {
+    getDataList,
+    currentChangeHandle,
+    sizeChangeHandle,
+    sortChangeHandle,
+    downBlobFile,
+    tableStyle
+} = useTable(state)
+
+// 打开弹窗
+const openDialog = async (id: string) => {
+    visible.value = true
+    if (!id) return
+    cameraForm.groupId = id
+    state.queryForm.groupId = id
+    getDataList()
+}
+
+// 清空搜索条件
+const resetQuery = () => {
+    // 清空搜索条件
+    queryRef.value?.resetFields()
+    // 清空多选
+    selectObjs.value = []
+    getDataList()
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id);
+    multiple.value = !objs.length;
+};
+
+// 删除
+async function handleDelete(row: any) {
+    try {
+        await useMessageBox().confirm('此操作将永久删除');
+    } catch {
+        return;
+    }
+    try {
+        await deviceGroupApi.delGroupItemIds([row.id]);
+        getDataList();
+        useMessage().success('删除成功');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    }
+}
+
+/* ************************************* start 摄像头弹框 start ************************************* */
+
+// 添加摄像头
+function addCamera() {
+    dataFormRef.value?.resetFields();
+    cameraVisible.value = true
+}
+
+// 确定添加摄像头
+async function onCameraSubmit() {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return
+    cameraLoading.value = true
+    try {
+        const { data } = await deviceGroupApi.createGroupItems(cameraForm)
+        if (!data) throw new Error()
+        cameraLoading.value = false
+        cameraVisible.value = false
+        useMessage().success('添加成功');
+        getDataList();
+    } catch (error: any) {
+        console.error(error)
+        cameraLoading.value = false
+        useMessage().error(error.msg ?? "操作错误");
+    }
+}
+
+/* ************************************* end 摄像头弹框 end ************************************* */
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>
+
+<style></style>
@@ -0,0 +1,98 @@
+<template>
+    <div class="layout-padding">
+        <div class="layout-padding-auto layout-padding-view">
+            <el-row shadow="hover" v-show="showSearch" class="ml10">
+                <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+                    <el-form-item style="width: 250px;" label="分组名称" prop="name">
+                        <el-input v-model="state.queryForm.name" placeholder="请输入分组名称" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="search" type="primary" @click="getDataList">
+                            {{ $t('common.queryBtn') }}
+                        </el-button>
+                        <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-row>
+            <el-row>
+                <div class="mb8" style="width: 100%">
+                    <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                        v-auth="'device_deviceGroup_add'">
+                        新 增
+                    </el-button>
+                    <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'device_deviceGroup_del'"
+                        @click="handleDelete(selectObjs)">
+                        删除
+                    </el-button>
+                    <right-toolbar v-model:showSearch="showSearch" :export="'device_deviceGroup_export'"
+                        @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                        @queryTable="getDataList"></right-toolbar>
+                </div>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="devicePlaybackGroup">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as deviceGroupApi from "/@/api/device/deviceGroup";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useDict } from '/@/hooks/dict';
+
+// 定义查询字典
+const { device_group_type, panel_type } = useDict("device_group_type", "panel_type")
+// 定义变量内容
+const formDialogRef = ref()
+const cameraTableDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    queryForm: {},
+    pageList: deviceGroupApi.fetchList
+})
+
+//  table hook
+const {
+    getDataList,
+    currentChangeHandle,
+    sizeChangeHandle,
+    sortChangeHandle,
+    downBlobFile,
+    tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+    // 清空搜索条件
+    queryRef.value?.resetFields()
+    // 清空多选
+    selectObjs.value = []
+    getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+    downBlobFile('/device/deviceGroup/export', Object.assign(state.queryForm, { ids: selectObjs }), 'deviceGroup.xlsx')
+}
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+    try {
+        await useMessageBox().confirm('此操作将永久删除');
+    } catch {
+        return;
+    }
+    try {
+        await deviceGroupApi.delObjs(ids);
+        getDataList();
+        useMessage().success('删除成功');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    }
+};
+</script>