@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgSimulator/KgSimulator.Panel.Scene.tsx

@@ -0,0 +1,819 @@
+import { Icon } from '@iconify/vue';
+import { Q } from '@thymine/xunee';
+import { ElButton, ElInput, ElTree, TreeData, TreeInstance, TreeKey, TreeNodeData } from 'element-plus';
+import { debounce, isNil, without, xor } from 'lodash-es';
+import { defineComponent, inject, nextTick, ref, watch } from 'vue';
+import { KG } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgCanvas } from '../KgCanvas';
+import { IKgForm$EventListenerParameter$onChange } from '../KgForm/KgForm.event';
+import { useKgVar } from '../KgVar';
+import {
+    emit,
+    IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$Click,
+    IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$Delete,
+    IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$SelectChange,
+} from './KgSimulator.event';
+import { useKgSimulator } from './KgSimulator.hooks';
+import { Agent, JackUpTransferStationDto, NODE_KEY, PalletStackerStationDto, PhotoelectricSensorDto, StationDto } from './KgSimulator.model';
+import { KgSimulatorPanel } from './KgSimulator.Panel';
+
+/**
+ * 模拟器--面板--场景.
+ */
+export const KgSimulatorPanelScene = defineComponent({
+    name: 'KgSimulatorPanelScene',
+    setup() {
+        const ID = inject(KG.DI.ID, '');
+
+        const $KgSimulatorPanelProperty$kgVar = useKgVar(KG.FORM_ID__KG_SIMULATOR__PANEL__PROPERTY);
+        const kgSimulator = useKgSimulator();
+        const kgCanvas = useKgCanvas(kgSimulator.$KgCanvas$id);
+
+        //region 事件: 画布--选中发生变更
+        //----------------------------------------------------------------------------------------------------
+        const $KgCanvas$onSelectChangeListener = debounce(
+            async (param) => {
+                const selectedDataList: Array<Q.Node | Q.Edge> = kgCanvas.get$graph()?.selectionModel?.datas ?? [];
+
+                switch (true) {
+                    //region 环形输送线
+                    //----------------------------------------------------------------------------------------------------
+                    case kgSimulator.$Config$Env$IsCircularConveyor: {
+                        const idList = selectedDataList.map((i) => i.properties.data.id);
+
+                        // 如果画布的选中和场景面板的选中已经相同, 则不作操作,
+                        // 否则, 将场景面板的选中更新为画布的选中,
+                        if (xor(idList, defaultCheckedKeys$.value).length > 0) {
+                            init({
+                                defaultCheckedKeys: idList,
+                                defaultExpandedKeys: (() => {
+                                    // 选中零个, 则展开节点保持不变,
+                                    if (idList.length === 0) {
+                                        return undefined;
+                                    }
+                                    // 选中一个或者多个, 则将新选中的节点展开(如果该节点尚未展开),
+                                    else {
+                                        const expandKeyList = getExpandKeyList();
+
+                                        for (let id of idList) {
+                                            if (!expandKeyList.includes(id)) {
+                                                expandKeyList.push(id);
+                                            }
+                                        }
+
+                                        return expandKeyList;
+                                    }
+                                })(),
+                            });
+                            scrollFirstSelectNodeIntoView();
+                        }
+
+                        break;
+                    }
+                    //----------------------------------------------------------------------------------------------------
+                    //endregion
+
+                    //region 环形穿梭车
+                    //----------------------------------------------------------------------------------------------------
+                    case kgSimulator.$Config$Env$IsCircularShuttle: {
+                        // TODO LT 环形穿梭车
+                        break;
+                    }
+                    //----------------------------------------------------------------------------------------------------
+                    //endregion
+                }
+
+                return false;
+            },
+            100,
+            { leading: false, trailing: true },
+        );
+        kgCanvas.onSelectChange($KgCanvas$onSelectChangeListener as any);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 事件: 画布--创建一个对象
+        //----------------------------------------------------------------------------------------------------
+        kgSimulator.on$KgSimulatorCanvas$CreateData(async (param) => {
+            switch (true) {
+                //region 环形输送线
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                    switch (param.type) {
+                        //region 创建者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.CJZ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.creators?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 销毁者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.XHZ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.destroyers?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 输送机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.SSJ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.stations?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 移栽机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.YZJ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.jackUpTransferStations?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 叠盘机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.DPJ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.palletStackerStations?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 传感器
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.CGQ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.photoelectricSensors?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 连线
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.EDGE: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.edges?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 代理者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.DLZ: {
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.agents?.push(param.data);
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        default: {
+                            break;
+                        }
+                    }
+
+                    switch (true) {
+                        case kgSimulator.$Mode$IsEdit: {
+                            // 选中新创建的对象
+                            init({
+                                defaultCheckedKeys: [param.data.id],
+                                defaultExpandedKeys: (() => {
+                                    if (!defaultExpandedKeys$.value.includes(param.data.id)) {
+                                        defaultExpandedKeys$.value = [...defaultExpandedKeys$.value, param.data.id];
+                                    }
+
+                                    return defaultExpandedKeys$.value;
+                                })(),
+                            });
+                            scrollFirstSelectNodeIntoView();
+
+                            break;
+                        }
+                    }
+
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                //region 环形穿梭车
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+            }
+
+            return false;
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 事件: 画布--删除一个对象
+        //----------------------------------------------------------------------------------------------------
+        kgSimulator.on$KgSimulatorCanvas$DeleteData(async (param) => {
+            switch (true) {
+                //region 环形输送线
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                    switch (param.type) {
+                        //region 创建者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.CJZ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 销毁者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.XHZ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 输送机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.SSJ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 移栽机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.YZJ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 叠盘机
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.DPJ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 传感器
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.CGQ: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 连线
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.EDGE: {
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        //region 代理者
+                        //----------------------------------------------------------------------------------------------------
+                        case NODE_KEY.DLZ: {
+                            const agent = param.data as Agent;
+
+                            kgSimulator.$Env$CircularConveyor$CurrentScene!.agents?.splice(
+                                kgSimulator.$Env$CircularConveyor$CurrentScene!.agents?.findIndex((i) => i.id === agent.id || i.code === agent.code || i.code === agent.id),
+                                1,
+                            );
+                            break;
+                        }
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+
+                        default: {
+                            break;
+                        }
+                    }
+
+                    init({
+                        defaultCheckedKeys: (() => {
+                            if (defaultCheckedKeys$.value.includes(param.data.id)) {
+                                defaultCheckedKeys$.value = without(defaultCheckedKeys$.value, param.data.id);
+                            }
+
+                            return defaultCheckedKeys$.value;
+                        })(),
+                        defaultExpandedKeys: (() => {
+                            if (defaultExpandedKeys$.value.includes(param.data.id)) {
+                                defaultExpandedKeys$.value = without(defaultExpandedKeys$.value, param.data.id);
+                            }
+
+                            return defaultExpandedKeys$.value;
+                        })(),
+                    });
+
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                //region 环形穿梭车
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+            }
+
+            return false;
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 事件: 面板--属性--属性发生变更
+        //----------------------------------------------------------------------------------------------------
+        const $KgSimulatorPanelProperty$kgVar$kgForm$onChangeListener = debounce(
+            async (param: IKgForm$EventListenerParameter$onChange) => {
+                switch (param.varName) {
+                    case 'name': {
+                        init();
+                        break;
+                    }
+
+                    case 'code': {
+                        init();
+                        break;
+                    }
+                }
+
+                return false;
+            },
+            100,
+            { leading: false, trailing: true },
+        );
+        $KgSimulatorPanelProperty$kgVar.kgForm.onChange($KgSimulatorPanelProperty$kgVar$kgForm$onChangeListener as any);
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const treeRef = ref<TreeInstance>();
+
+        /**
+         * 树的数据.
+         */
+        const treeData$ = ref<TreeData>([]);
+
+        /**
+         * 默认展开的节点.
+         */
+        const defaultExpandedKeys$ = ref<Array<TreeKey>>([]);
+
+        /**
+         * 默认选中的节点.
+         */
+        const defaultCheckedKeys$ = ref<Array<TreeKey>>([]);
+
+        /**
+         * 过滤的关键字.
+         */
+        const filterText$ = ref<string>('');
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region WATCH
+        //----------------------------------------------------------------------------------------------------
+        //region 环形输送线--当前场景
+        //----------------------------------------------------------------------------------------------------
+        watch(
+            () => kgSimulator.$Env$CircularConveyor$CurrentScene,
+            () => {
+                if (kgSimulator.$Config$Env$IsCircularConveyor) {
+                    init({ defaultCheckedKeys: [], isExpandAll: true });
+                }
+            },
+        );
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 过滤的关键字
+        //----------------------------------------------------------------------------------------------------
+        watch(filterText$, (value) => {
+            treeRef.value?.filter(value);
+        });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        //region 初始
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 初始.
+         *
+         * @param param
+         * @param param.defaultCheckedKeys 默认选中的节点. 如果为 null 或则 undefined 则保持不变.
+         * @param param.defaultExpandedKeys 默认展开的节点. 如果为 null 或则 undefined 则保持不变.
+         * @param param.isExpandAll 是否默认展开所有节点. 如果为 true 则会忽略 param.defaultExpandedKeys.
+         */
+        function init(param?: { defaultCheckedKeys?: Array<TreeKey> | null | undefined; defaultExpandedKeys?: Array<TreeKey> | null | undefined; isExpandAll?: boolean | null | undefined }) {
+            filterText$.value = '';
+
+            // 通过参数指定选中数据,
+            if (!isNil(param?.defaultCheckedKeys)) {
+                defaultCheckedKeys$.value = param!.defaultCheckedKeys;
+            }
+            // 获取当前选中数据,
+            else {
+                defaultCheckedKeys$.value = treeRef.value?.getCheckedKeys() ?? [];
+            }
+
+            // 通过参数指定展开数据,
+            if (!isNil(param?.defaultExpandedKeys)) {
+                defaultExpandedKeys$.value = param!.defaultExpandedKeys;
+            }
+            // 获取当前展开数据,
+            else {
+                defaultExpandedKeys$.value = getExpandKeyList();
+            }
+
+            treeRef.value?.setCurrentKey('', false);
+
+            initTreeData({ isExpandAll: param?.isExpandAll });
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 构造树的初始数据
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 构造树的初始数据.
+         *
+         * @param param
+         * @param param.isExpandAll 是否默认展开所有节点.
+         */
+        async function initTreeData(param?: { isExpandAll?: boolean | null | undefined }) {
+            switch (true) {
+                //region 环形输送线
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                    const scene = kgSimulator.$Env$CircularConveyor$CurrentScene;
+
+                    if (!scene) {
+                        treeData$.value = [];
+                    } else {
+                        const treeData: TreeData = [
+                            {
+                                id: scene.id,
+                                label: scene.name ?? 'NULL',
+                                children: [
+                                    {
+                                        id: NODE_KEY.CJZ,
+                                        label: '创建者',
+                                        type: NODE_KEY.CJZ,
+                                        children: scene.creators?.map((creator) => ({ id: creator.id, label: creator.code || creator.id || 'NULL', type: NODE_KEY.CJZ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.XHZ,
+                                        label: '销毁者',
+                                        type: NODE_KEY.XHZ,
+                                        children: scene.destroyers?.map((destroyer) => ({ id: destroyer.id, label: destroyer.code || destroyer.id || 'NULL', type: NODE_KEY.XHZ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.SSJ,
+                                        label: '普通输送机',
+                                        type: NODE_KEY.SSJ,
+                                        children: scene.stations?.map((ptssj) => ({ id: ptssj.id, label: ptssj.code || ptssj.id || 'NULL', type: NODE_KEY.SSJ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.YZJ,
+                                        label: '移栽机',
+                                        type: NODE_KEY.YZJ,
+                                        children: scene.jackUpTransferStations?.map((dsyzj) => ({ id: dsyzj.id, label: dsyzj.code || dsyzj.id || 'NULL', type: NODE_KEY.YZJ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.DPJ,
+                                        label: '叠盘机',
+                                        type: NODE_KEY.DPJ,
+                                        children: scene.palletStackerStations?.map((dpj) => ({ id: dpj.id, label: dpj.code || dpj.id || 'NULL', type: NODE_KEY.DPJ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.CGQ,
+                                        label: '光电传感器',
+                                        type: NODE_KEY.CGQ,
+                                        children: scene.photoelectricSensors?.map((gdcgq) => ({ id: gdcgq.id, label: gdcgq.code || gdcgq.id || 'NULL', type: NODE_KEY.CGQ }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.EDGE,
+                                        label: '连线',
+                                        type: NODE_KEY.EDGE,
+                                        children: scene.edges?.map((edge) => ({ id: edge.id, label: edge.code || edge.id || 'NULL', type: NODE_KEY.EDGE }) as TreeNodeData) ?? [],
+                                    },
+                                    {
+                                        id: NODE_KEY.DLZ,
+                                        label: '代理',
+                                        type: NODE_KEY.EDGE,
+                                        children: scene.agents?.map((agent) => ({ id: agent.id, label: agent.code || agent.id || 'NULL', type: NODE_KEY.DLZ }) as TreeNodeData) ?? [],
+                                    },
+                                ],
+                            },
+                        ];
+
+                        if (param?.isExpandAll) {
+                            defaultExpandedKeys$.value = getChildKeyList(treeData[0]);
+                        }
+
+                        treeData$.value = treeData;
+                    }
+
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                    break;
+                }
+            }
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 将第一个选中的节点滚动到可视区域
+        //----------------------------------------------------------------------------------------------------
+        /**
+         * 将第一个选中的节点滚动到可视区域.
+         */
+        async function scrollFirstSelectNodeIntoView() {
+            if ((defaultCheckedKeys$.value?.length ?? 0) > 0) {
+                await nextTick();
+
+                const divElement = document.querySelector(`.el-tree-node[data-key="${defaultCheckedKeys$.value[0]}"]`);
+                if (divElement) {
+                    setTimeout(() => {
+                        const rect = divElement.getBoundingClientRect();
+
+                        // 尚未在可视区域,
+                        if (!(rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth))) {
+                            divElement.scrollIntoView({ block: 'start' });
+                        }
+                        // 已经在可视区域, 不做操作,
+                        else {
+                        }
+                    });
+                }
+            }
+        }
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        /**
+         * 根据父节点, 获取它的下级节点的主键列表.
+         *
+         * @param parentNode 父节点, 如果为空表示是根节点.
+         */
+        function getChildKeyList(parentNode?: TreeNodeData) {
+            let keyList: Array<string> = [];
+
+            // 根节点,
+            if (!parentNode) {
+                for (const child of treeData$.value) {
+                    keyList.push(child.id);
+                    keyList = keyList.concat(getChildKeyList(child));
+                }
+            }
+            // 子节点,
+            else {
+                if ((parentNode.children?.length ?? 0) > 0) {
+                    for (const child of parentNode.children) {
+                        keyList.push(child.id);
+                        keyList = keyList.concat(getChildKeyList(child));
+                    }
+                }
+            }
+
+            return keyList;
+        }
+
+        /**
+         * 根据父节点, 获取他的当前已展开的下级节点的主键列表.
+         *
+         * @param parentNode 父节点, 如果为空表示是根节点.
+         */
+        function getExpandKeyList(parentNode?: any) {
+            let keyList: Array<string> = [];
+
+            // 根节点,
+            if (!parentNode) {
+                const rootNode = treeRef.value?.root?.childNodes?.[0];
+                if (rootNode) {
+                    if (rootNode.expanded) {
+                        keyList.push(rootNode.data.id);
+                        keyList = keyList.concat(getExpandKeyList(rootNode));
+                    }
+                }
+            }
+            // 子节点,
+            else {
+                if ((parentNode.childNodes?.length ?? 0) > 0) {
+                    for (const childNode of parentNode.childNodes) {
+                        if (childNode.expanded) {
+                            keyList.push(childNode.data.id);
+                            keyList = keyList.concat(getExpandKeyList(childNode));
+                        }
+                    }
+                }
+            }
+
+            return keyList;
+        }
+
+        /**
+         * 根据关键字过滤节点.
+         *
+         * @param value 过滤的关键字.
+         * @param data 被检查的节点数据.
+         */
+        function filterNode(value: string, data: TreeNodeData) {
+            if (!value) {
+                return true;
+            }
+
+            return data.label.includes(value) || data.id.includes(value);
+        }
+
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 页面
+        //----------------------------------------------------------------------------------------------------
+        return () => {
+            if (!kgSimulator.$Config$Toolbar$Scene$IsVisible) {
+                return null;
+            }
+
+            return (
+                <KgSimulatorPanel
+                    kgPlacement={kgSimulator.$Config$Toolbar$Scene$Placement}
+                    kgIsOpen={kgSimulator.$Config$Toolbar$Scene$IsOpen}
+                    onUpdate:kgIsOpen={(value) => kgSimulator.set$Config$Toolbar$Scene$IsOpen(value)}
+                    kgTitle={'场景'}
+                    kgClass={{ 'kg-simulator--panel--scene': true }}
+                >
+                    {{
+                        actionLeft: () => {
+                            return (
+                                <>
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElButton
+                                            class="kg-simulator--panel--header--action--button"
+                                            title={'删除选中'}
+                                            text={true}
+                                            disabled={defaultCheckedKeys$.value.length === 0}
+                                            onClick={() => {
+                                                KgUtil.confirm({
+                                                    onOk: () => {
+                                                        const scene = kgSimulator.$Env$CircularConveyor$CurrentScene;
+
+                                                        scene!.creators = scene!.creators!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.destroyers = scene!.destroyers!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.stations = scene!.stations!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.jackUpTransferStations = scene!.jackUpTransferStations!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.palletStackerStations = scene!.palletStackerStations!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.photoelectricSensors = scene!.photoelectricSensors!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.edges = scene!.edges!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+                                                        scene!.agents = scene!.agents!.filter((i) => !defaultCheckedKeys$.value.includes(i.id!));
+
+                                                        emit<IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$Delete>({
+                                                            event: 'on$KgSimulatorPanelScene$Delete',
+                                                            id: ID,
+                                                            parameter: { deleteIdList: defaultCheckedKeys$.value as Array<string> },
+                                                        });
+
+                                                        init({ defaultCheckedKeys: [] });
+                                                    },
+                                                });
+                                            }}
+                                        >
+                                            <Icon icon="ant-design:delete-outlined" />
+                                        </ElButton>
+                                    )}
+
+                                    <ElButton
+                                        class="kg-simulator--panel--header--action--button"
+                                        title={'清空选中'}
+                                        text={true}
+                                        onClick={() => {
+                                            defaultCheckedKeys$.value = [];
+                                            treeRef.value?.setCheckedKeys([]);
+                                        }}
+                                    >
+                                        <Icon icon="material-symbols:check-box-outline-blank" />
+                                    </ElButton>
+
+                                    <ElButton
+                                        class="kg-simulator--panel--header--action--button"
+                                        title={'展开所有'}
+                                        text={true}
+                                        onClick={() => {
+                                            init({ defaultCheckedKeys: treeRef.value?.getCheckedKeys() ?? [], defaultExpandedKeys: getChildKeyList() });
+                                        }}
+                                    >
+                                        <Icon icon="material-symbols:expand-all-rounded" />
+                                    </ElButton>
+
+                                    <ElButton
+                                        class="kg-simulator--panel--header--action--button"
+                                        title={'收起所有'}
+                                        text={true}
+                                        onClick={() => {
+                                            // 根节点需要展开, 否则「将选中节点滚动到可视区域」将失效,
+                                            const rootNode = treeRef.value?.root?.childNodes?.[0];
+                                            init({ defaultCheckedKeys: treeRef.value?.getCheckedKeys() ?? [], defaultExpandedKeys: rootNode?.data?.id ? [rootNode?.data?.id] : [] });
+                                        }}
+                                    >
+                                        <Icon icon="material-symbols:collapse-all-rounded" />
+                                    </ElButton>
+                                </>
+                            );
+                        },
+                        body: () => {
+                            return (
+                                <>
+                                    <ElInput
+                                        modelValue={filterText$.value}
+                                        onUpdate:modelValue={(value) => (filterText$.value = value)}
+                                        clearable={true}
+                                    />
+                                    <ElTree
+                                        ref={treeRef}
+                                        data={treeData$.value}
+                                        indent={14}
+                                        nodeKey={'id'}
+                                        showCheckbox={true}
+                                        checkOnClickNode={false}
+                                        checkOnClickLeaf={false}
+                                        expandOnClickNode={false}
+                                        renderAfterExpand={false}
+                                        defaultCheckedKeys={defaultCheckedKeys$.value}
+                                        defaultExpandedKeys={defaultExpandedKeys$.value}
+                                        filterNodeMethod={filterNode}
+                                        onNodeClick={(data: StationDto | JackUpTransferStationDto | PhotoelectricSensorDto | PalletStackerStationDto) => {
+                                            switch (true) {
+                                                //region 环形输送线
+                                                //----------------------------------------------------------------------------------------------------
+                                                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                                                    // 当点击某个具体对象节点时,
+                                                    if (![NODE_KEY.SCENE, NODE_KEY.CJZ, NODE_KEY.XHZ, NODE_KEY.SSJ, NODE_KEY.YZJ, NODE_KEY.DPJ, NODE_KEY.CGQ, NODE_KEY.EDGE, NODE_KEY.DLZ].includes(data.id!)) {
+                                                        init({ defaultCheckedKeys: [data.id!] });
+
+                                                        emit<IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$Click>({
+                                                            event: 'on$KgSimulatorPanelScene$Click',
+                                                            id: ID,
+                                                            parameter: { id: data.id! },
+                                                        });
+                                                    }
+
+                                                    break;
+                                                }
+                                                //----------------------------------------------------------------------------------------------------
+                                                //endregion
+
+                                                //region 环形穿梭车
+                                                //----------------------------------------------------------------------------------------------------
+                                                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                                                    // TODO LT 环形穿梭车
+                                                    break;
+                                                }
+                                                //----------------------------------------------------------------------------------------------------
+                                                //endregion
+                                            }
+                                        }}
+                                        onCheck={(data, { checkedKeys }) => {
+                                            defaultCheckedKeys$.value = checkedKeys;
+
+                                            emit<IKgSimulator$EventListenerParameter$on$KgSimulatorPanelScene$SelectChange>({
+                                                event: 'on$KgSimulatorPanelScene$SelectChange',
+                                                id: ID,
+                                                parameter: { selectedIdList: checkedKeys as Array<string> },
+                                            });
+                                        }}
+                                    ></ElTree>
+                                </>
+                            );
+                        },
+                    }}
+                </KgSimulatorPanel>
+            );
+        };
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+    },
+});