@kengic/vue 0.30.1-beta.83 → 0.30.1-beta.87

package/component/KgSimulator/KgSimulator.Menu.tsx

@@ -0,0 +1,446 @@
+import { Icon } from '@iconify/vue';
+import { ElButton, ElMenu, ElMenuItem, ElSubMenu } from 'element-plus';
+import { cloneDeep } from 'lodash-es';
+import { defineComponent, ref, toRaw } from 'vue';
+import { KG } from '../../model';
+import { KgUtil } from '../../util';
+import { useKgVar } from '../KgVar';
+import { emit, IKgSimulator$EventListenerParameter$on$KgSimulatorMenu$Scene$Import } from './KgSimulator.event';
+import { useKgSimulator } from './KgSimulator.hooks';
+import { KgSimulatorMenuSceneCreateCircularConveyor, KgSimulatorMenuSceneCreateCircularConveyorProps } from './KgSimulator.Menu.Scene.Create.CircularConveyor';
+import { KgSimulatorMenuSceneOpenCircularConveyor, KgSimulatorMenuSceneOpenCircularConveyorProps } from './KgSimulator.Menu.Scene.Open.CircularConveyor';
+import { NODE_KEY } from './KgSimulator.model';
+
+/**
+ * 模拟器--菜单.
+ */
+export const KgSimulatorMenu = defineComponent({
+    name: 'KgSimulatorMenu',
+    setup() {
+        const $KgSimulatorPanelProperty$kgVar = useKgVar(KG.FORM_ID__KG_SIMULATOR__PANEL__PROPERTY);
+        const kgSimulator = useKgSimulator();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+        const kgSimulatorMenuSceneOpenCircularConveyorProps = ref<KgSimulatorMenuSceneOpenCircularConveyorProps>({ kgIsVisible: false });
+        const kgSimulatorMenuSceneCreateCircularConveyorProps = ref<KgSimulatorMenuSceneCreateCircularConveyorProps>({ kgIsVisible: false });
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region FUNCTION
+        //----------------------------------------------------------------------------------------------------
+        function disableContextMenu(event: MouseEvent) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        /**
+         * 场景--导出.
+         */
+        function on$scene$export() {
+            switch (true) {
+                //region 环形输送线
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularConveyor: {
+                    const currentScene = cloneDeep(toRaw(kgSimulator.$Env$CircularConveyor$CurrentScene!)) as any;
+
+                    delete currentScene.isCheck;
+                    delete currentScene._X_ROW_KEY;
+
+                    KgUtil.downloadFile(JSON.stringify(currentScene, null, 4), `${kgSimulator.$Env$CircularConveyor$CurrentScene!.name ?? '场景'}.json`, 'application/json');
+
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                //region 环形穿梭车
+                //----------------------------------------------------------------------------------------------------
+                case kgSimulator.$Config$Env$IsCircularShuttle: {
+                    break;
+                }
+                //----------------------------------------------------------------------------------------------------
+                //endregion
+
+                default: {
+                    return Promise.resolve();
+                }
+            }
+        }
+
+        /**
+         * 场景--导入.
+         */
+        async function on$scene$import() {
+            try {
+                const scene = await importSceneFromJSON();
+
+                kgSimulator.set$Env$CircularConveyor$CurrentScene(scene);
+                kgSimulator.set$Env$CircularConveyor$CurrentScene$IsSave(true);
+
+                emit<IKgSimulator$EventListenerParameter$on$KgSimulatorMenu$Scene$Import>({
+                    event: 'on$KgSimulatorMenu$Scene$Import',
+                    id: kgSimulator.id,
+                    parameter: {},
+                });
+
+                await kgSimulator.$KgSimulatorPanelProperty$patchVarSubmitDetailList({
+                    varSubmitDetailList: [
+                        { enable_flag: 0, required_flag: 0, var_nam: '$typeDsc' },
+                        { enable_flag: 0, required_flag: 0, var_nam: 'id' },
+                        { enable_flag: 1, required_flag: 1, var_nam: 'code' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'name' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'description' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'width' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'depth' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'height' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'configurationJson' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'gravity' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'humidity' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'status' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'temperature' },
+                        { enable_flag: 1, required_flag: 0, var_nam: 'timeScale' },
+                    ],
+                });
+                $KgSimulatorPanelProperty$kgVar.kgSubmit.onAfterSetFormModel(async () => {
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.$type = NODE_KEY.SCENE;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.$typeDsc = '场景';
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.id = kgSimulator.$Env$CircularConveyor$CurrentScene?.id;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.code = kgSimulator.$Env$CircularConveyor$CurrentScene?.code;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.name = kgSimulator.$Env$CircularConveyor$CurrentScene?.name;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.description = kgSimulator.$Env$CircularConveyor$CurrentScene?.description;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.width = kgSimulator.$Env$CircularConveyor$CurrentScene?.width;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.depth = kgSimulator.$Env$CircularConveyor$CurrentScene?.depth;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.height = kgSimulator.$Env$CircularConveyor$CurrentScene?.height;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.configurationJson = kgSimulator.$Env$CircularConveyor$CurrentScene?.configurationJson;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.gravity = kgSimulator.$Env$CircularConveyor$CurrentScene?.gravity;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.humidity = kgSimulator.$Env$CircularConveyor$CurrentScene?.humidity;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.status = kgSimulator.$Env$CircularConveyor$CurrentScene?.status;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.temperature = kgSimulator.$Env$CircularConveyor$CurrentScene?.temperature;
+                    $KgSimulatorPanelProperty$kgVar.kgSubmit.formModel.value.timeScale = kgSimulator.$Env$CircularConveyor$CurrentScene?.timeScale;
+
+                    return false;
+                }, true);
+            } catch (e) {
+                throw new Error('导入场景失败', { cause: e });
+            }
+        }
+
+        /**
+         * 从 JSON 文件导入场景.
+         */
+        function importSceneFromJSON(): Promise<any> {
+            return new Promise((resolve, reject) => {
+                const inputElement = document.createElement('input');
+                inputElement.type = 'file';
+                inputElement.accept = '.json';
+                inputElement.onchange = (event: any) => {
+                    const file = event.target.files[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = (e: any) => {
+                            try {
+                                const jsonObject = JSON.parse(e.target.result);
+                                resolve(jsonObject);
+                            } catch (e) {
+                                reject(new Error('导入场景失败, 解析 JSON 失败', { cause: e }));
+                            }
+                        };
+                        reader.onerror = () => reject(new Error('导入场景失败, 读取文件失败'));
+                        reader.readAsText(file);
+                    }
+                };
+                inputElement.click();
+            });
+        }
+
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        //region 页面
+        //----------------------------------------------------------------------------------------------------
+        return () => (
+            <div
+                class="kg-simulator--menu"
+                onContextmenu={disableContextMenu}
+            >
+                <ElMenu
+                    mode={'horizontal'}
+                    menuTrigger={'click'}
+                    collapseTransition={false}
+                    uniqueOpened={true}
+                    closeOnClickOutside={true}
+                    ellipsis={false}
+                    showTimeout={0}
+                    hideTimeout={0}
+                    popperOffset={2}
+                    popperClass={'kg-simulator--menu--popup'}
+                    onContextmenu={disableContextMenu}
+                >
+                    <ElSubMenu
+                        index="scene"
+                        collapseCloseIcon={() => null}
+                        collapseOpenIcon={() => null}
+                        expandCloseIcon={() => null}
+                        expandOpenIcon={() => null}
+                    >
+                        {{
+                            default: () => (
+                                <>
+                                    <ElSubMenu
+                                        index="scene.open"
+                                        collapseCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        collapseOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        expandCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        expandOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        disabled={kgSimulator.$Mode$IsSimulate && kgSimulator.$Mode$Simulate$IsRunning}
+                                    >
+                                        {{
+                                            default: () => (
+                                                <>
+                                                    <ElMenuItem
+                                                        index="scene.open.cicular-conveyor"
+                                                        onContextmenu={disableContextMenu}
+                                                        onClick={() => {
+                                                            kgSimulatorMenuSceneOpenCircularConveyorProps.value.kgIsVisible = true;
+                                                        }}
+                                                    >
+                                                        环形输送线
+                                                    </ElMenuItem>
+                                                    <ElMenuItem
+                                                        index="scene.open.cicular-shuttle"
+                                                        onContextmenu={disableContextMenu}
+                                                    >
+                                                        环形穿梭车
+                                                    </ElMenuItem>
+                                                </>
+                                            ),
+                                            title: () => <span onContextmenu={disableContextMenu}>打开</span>,
+                                        }}
+                                    </ElSubMenu>
+
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElSubMenu
+                                            index="scene.create"
+                                            collapseCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                            collapseOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                            expandCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                            expandOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        >
+                                            {{
+                                                default: () => (
+                                                    <>
+                                                        <ElMenuItem
+                                                            index="scene.create.cicular-conveyor"
+                                                            onContextmenu={disableContextMenu}
+                                                            onClick={() => {
+                                                                kgSimulatorMenuSceneCreateCircularConveyorProps.value.kgIsVisible = true;
+                                                            }}
+                                                        >
+                                                            环形输送线
+                                                        </ElMenuItem>
+                                                        <ElMenuItem
+                                                            index="scene.create.cicular-shuttle"
+                                                            onContextmenu={disableContextMenu}
+                                                        >
+                                                            环形穿梭车
+                                                        </ElMenuItem>
+                                                    </>
+                                                ),
+                                                title: () => <span onContextmenu={disableContextMenu}>新建</span>,
+                                            }}
+                                        </ElSubMenu>
+                                    )}
+
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElMenuItem
+                                            index="scene.import"
+                                            onContextmenu={disableContextMenu}
+                                            onClick={on$scene$import}
+                                        >
+                                            导入
+                                        </ElMenuItem>
+                                    )}
+
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElMenuItem
+                                            index="scene.export"
+                                            disabled={!kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Config$Env$IsCircularShuttle}
+                                            onContextmenu={disableContextMenu}
+                                            onClick={on$scene$export}
+                                        >
+                                            导出
+                                        </ElMenuItem>
+                                    )}
+
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElMenuItem
+                                            index="scene.save"
+                                            disabled={!kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Config$Env$IsCircularShuttle}
+                                            onContextmenu={disableContextMenu}
+                                            onClick={async () => {
+                                                await kgSimulator.saveScene();
+                                            }}
+                                        >
+                                            保存
+                                        </ElMenuItem>
+                                    )}
+
+                                    {kgSimulator.$Mode$IsEdit && (
+                                        <ElMenuItem
+                                            index="scene.save-as"
+                                            disabled={!kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Config$Env$IsCircularShuttle}
+                                            onContextmenu={disableContextMenu}
+                                        >
+                                            另存...
+                                        </ElMenuItem>
+                                    )}
+                                </>
+                            ),
+                            title: () => '场景',
+                        }}
+                    </ElSubMenu>
+                    <ElSubMenu
+                        index="view"
+                        collapseCloseIcon={() => null}
+                        collapseOpenIcon={() => null}
+                        expandCloseIcon={() => null}
+                        expandOpenIcon={() => null}
+                    >
+                        {{
+                            default: () => (
+                                <>
+                                    <ElSubMenu
+                                        index="view.panel"
+                                        collapseCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        collapseOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        expandCloseIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                        expandOpenIcon={() => <Icon icon="ant-design:caret-right-outlined" />}
+                                    >
+                                        {{
+                                            default: () => (
+                                                <>
+                                                    {kgSimulator.$Mode$IsEdit && (
+                                                        <ElMenuItem
+                                                            index="view.panel.prefab"
+                                                            onContextmenu={disableContextMenu}
+                                                        >
+                                                            预制组件面板
+                                                        </ElMenuItem>
+                                                    )}
+
+                                                    <ElMenuItem
+                                                        index="view.panel.scene"
+                                                        onContextmenu={disableContextMenu}
+                                                    >
+                                                        场景面板
+                                                    </ElMenuItem>
+
+                                                    <ElMenuItem
+                                                        index="view.panel.property"
+                                                        onContextmenu={disableContextMenu}
+                                                    >
+                                                        属性面板
+                                                    </ElMenuItem>
+                                                </>
+                                            ),
+                                            title: () => <span onContextmenu={disableContextMenu}>面板</span>,
+                                        }}
+                                    </ElSubMenu>
+                                </>
+                            ),
+                            title: () => '视图',
+                        }}
+                    </ElSubMenu>
+                    <ElSubMenu
+                        index="setting"
+                        collapseCloseIcon={() => null}
+                        collapseOpenIcon={() => null}
+                        expandCloseIcon={() => null}
+                        expandOpenIcon={() => null}
+                    >
+                        {{
+                            default: () => (
+                                <>
+                                    <ElMenuItem
+                                        index="setting.setting"
+                                        onContextmenu={disableContextMenu}
+                                    >
+                                        设置
+                                    </ElMenuItem>
+                                </>
+                            ),
+                            title: () => '设置',
+                        }}
+                    </ElSubMenu>
+                </ElMenu>
+
+                <div class="kg-simulator--menu--title">
+                    {
+                        //region 保存
+                        //----------------------------------------------------------------------------------------------------
+                        kgSimulator.$Mode$IsEdit && (
+                            <ElButton
+                                text={true}
+                                class="kg-simulator--menu--title--button"
+                                title={'保存'}
+                                disabled={!kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Config$Env$IsCircularShuttle}
+                                onClick={async () => {
+                                    await kgSimulator.saveScene();
+                                }}
+                            >
+                                {(kgSimulator.$Env$CircularConveyor$CurrentScene$IsSaving || kgSimulator.$Env$CircularShuttle$CurrentScene$IsSaving) && (
+                                    <Icon
+                                        icon="eos-icons:bubble-loading"
+                                        width={14}
+                                        height={14}
+                                    />
+                                )}
+                                {!(kgSimulator.$Env$CircularConveyor$CurrentScene$IsSaving || kgSimulator.$Env$CircularShuttle$CurrentScene$IsSaving) && <Icon icon="material-symbols:save-outline-rounded" />}
+                            </ElButton>
+                        )
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+                    }
+
+                    {
+                        //region 开始仿真, 停止仿真
+                        //----------------------------------------------------------------------------------------------------
+                        kgSimulator.$Mode$IsSimulate && (
+                            <ElButton
+                                text={true}
+                                class="kg-simulator--menu--title--button"
+                                title={kgSimulator.$Mode$Simulate$IsRunning ? '停止仿真' : '开始仿真'}
+                                disabled={!kgSimulator.$Config$Env$IsCircularConveyor && !kgSimulator.$Config$Env$IsCircularShuttle}
+                                onClick={async () => {
+                                    kgSimulator.set$Mode$Simulate$IsRunning(!kgSimulator.$Mode$Simulate$IsRunning);
+                                }}
+                            >
+                                {kgSimulator.$Mode$Simulate$IsRunning && <Icon icon="material-symbols:pause-rounded" />}
+                                {!kgSimulator.$Mode$Simulate$IsRunning && <Icon icon="material-symbols:play-arrow-rounded" />}
+                            </ElButton>
+                        )
+                        //----------------------------------------------------------------------------------------------------
+                        //endregion
+                    }
+                </div>
+
+                {kgSimulatorMenuSceneOpenCircularConveyorProps.value.kgIsVisible && (
+                    <KgSimulatorMenuSceneOpenCircularConveyor
+                        kgIsVisible={kgSimulatorMenuSceneOpenCircularConveyorProps.value.kgIsVisible}
+                        onUpdate:kgIsVisible={(value) => (kgSimulatorMenuSceneOpenCircularConveyorProps.value.kgIsVisible = value)}
+                    />
+                )}
+
+                {kgSimulatorMenuSceneCreateCircularConveyorProps.value.kgIsVisible && (
+                    <KgSimulatorMenuSceneCreateCircularConveyor
+                        kgIsVisible={kgSimulatorMenuSceneCreateCircularConveyorProps.value.kgIsVisible}
+                        onUpdate:kgIsVisible={(value) => (kgSimulatorMenuSceneCreateCircularConveyorProps.value.kgIsVisible = value)}
+                    />
+                )}
+            </div>
+        );
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+    },
+});

package/component/KgSimulator/KgSimulator.Panel.Prefab.tsx

@@ -0,0 +1,87 @@
+import { defineComponent } from 'vue';
+import { useKgSimulator } from './KgSimulator.hooks';
+import { NODE_KEY } from './KgSimulator.model';
+import { KgSimulatorPanel } from './KgSimulator.Panel';
+import { KgSimulatorPrefab } from './KgSimulator.Prefab';
+
+/**
+ * 模拟器--面板--预制组件.
+ */
+export const KgSimulatorPanelPrefab = defineComponent({
+    name: 'KgSimulatorPanelPrefab',
+    setup() {
+        const kgSimulator = useKgSimulator();
+
+        //region DATA
+        //----------------------------------------------------------------------------------------------------
+
+        //----------------------------------------------------------------------------------------------------
+        //endregion
+
+        return () => {
+            if (kgSimulator.$Mode$IsMonitor || kgSimulator.$Mode$IsSimulate) {
+                return null;
+            }
+
+            if (!kgSimulator.$Config$Toolbar$Prefab$IsVisible) {
+                return null;
+            }
+
+            return (
+                <KgSimulatorPanel
+                    kgPlacement={kgSimulator.$Config$Toolbar$Prefab$Placement}
+                    kgIsOpen={kgSimulator.$Config$Toolbar$Prefab$IsOpen}
+                    onUpdate:kgIsOpen={(value) => kgSimulator.set$Config$Toolbar$Prefab$IsOpen(value)}
+                    kgTitle={'预制组件'}
+                >
+                    {{
+                        body: () => {
+                            if (kgSimulator.$Config$Env$IsCircularConveyor) {
+                                return (
+                                    <>
+                                        <KgSimulatorPrefab
+                                            kgIcon={'SSJ'}
+                                            kgName={'普通输送机'}
+                                            kgType={NODE_KEY.SSJ}
+                                        />
+                                        <KgSimulatorPrefab
+                                            kgIcon={'YZJ'}
+                                            kgName={'移栽机'}
+                                            kgType={NODE_KEY.YZJ}
+                                        />
+                                        <KgSimulatorPrefab
+                                            kgIcon={'DPJ'}
+                                            kgName={'叠盘机'}
+                                            kgType={NODE_KEY.DPJ}
+                                        />
+                                        <KgSimulatorPrefab
+                                            kgIcon={'CGQ'}
+                                            kgName={'光电传感器'}
+                                            kgType={NODE_KEY.CGQ}
+                                        />
+                                        <KgSimulatorPrefab
+                                            kgIcon={'CJZ'}
+                                            kgName={'创建者'}
+                                            kgType={NODE_KEY.CJZ}
+                                        />
+                                        <KgSimulatorPrefab
+                                            kgIcon={'XHZ'}
+                                            kgName={'销毁者'}
+                                            kgType={NODE_KEY.XHZ}
+                                        />
+                                    </>
+                                );
+                            }
+
+                            if (kgSimulator.$Config$Env$IsCircularShuttle) {
+                                return <div></div>;
+                            }
+
+                            return null;
+                        },
+                    }}
+                </KgSimulatorPanel>
+            );
+        };
+    },
+});