113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { getSceneByGroupId, getSceneById } from '@api/scene';
|
||
|
|
import { EditorService } from '@core/editor.service';
|
||
|
|
import { computed, onMounted, provide, ref, shallowRef, watch } from 'vue';
|
||
|
|
|
||
|
|
const EDITOR_KEY = Symbol('editor-key');
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
sid: string;
|
||
|
|
id?: string;
|
||
|
|
};
|
||
|
|
const props = defineProps<Props>();
|
||
|
|
|
||
|
|
//#region 接口
|
||
|
|
const readScene = async () => {
|
||
|
|
const res = props.id ? await getSceneByGroupId(props.id, props.sid) : await getSceneById(props.sid);
|
||
|
|
title.value = res?.label ?? '';
|
||
|
|
editor.value?.load(res?.json);
|
||
|
|
};
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
const title = ref<string>('');
|
||
|
|
watch(
|
||
|
|
() => props.id,
|
||
|
|
() => readScene(),
|
||
|
|
{ immediate: true, flush: 'post' },
|
||
|
|
);
|
||
|
|
|
||
|
|
const container = shallowRef<HTMLDivElement>();
|
||
|
|
const editor = shallowRef<EditorService>();
|
||
|
|
provide(EDITOR_KEY, editor);
|
||
|
|
onMounted(() => {
|
||
|
|
editor.value = new EditorService(container.value!);
|
||
|
|
});
|
||
|
|
|
||
|
|
const show = ref<boolean>(true);
|
||
|
|
const current = ref<{ type: 'robot' | 'point' | 'line' | 'area'; id: string }>();
|
||
|
|
watch(
|
||
|
|
() => editor.value?.selected.value[0],
|
||
|
|
(v) => {
|
||
|
|
const pen = editor.value?.getPenById(v);
|
||
|
|
if (pen?.id) {
|
||
|
|
current.value = { type: <'point' | 'line' | 'area'>pen.name, id: pen.id };
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (current.value?.type === 'robot') return;
|
||
|
|
current.value = undefined;
|
||
|
|
},
|
||
|
|
);
|
||
|
|
const isRobot = computed(() => current.value?.type === 'robot');
|
||
|
|
const isPoint = computed(() => current.value?.type === 'point');
|
||
|
|
const isRoute = computed(() => current.value?.type === 'line');
|
||
|
|
const isArea = computed(() => current.value?.type === 'area');
|
||
|
|
|
||
|
|
const selectRobot = (id: string) => {
|
||
|
|
current.value = { type: 'robot', id };
|
||
|
|
editor.value?.inactive();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-layout class="full">
|
||
|
|
<a-layout-header class="p-16" style="height: 64px">
|
||
|
|
<a-flex justify="space-between" align="center">
|
||
|
|
<a-typography-text class="title">{{ title }}</a-typography-text>
|
||
|
|
</a-flex>
|
||
|
|
</a-layout-header>
|
||
|
|
|
||
|
|
<a-layout class="p-16">
|
||
|
|
<a-layout-sider :width="320">
|
||
|
|
<a-tabs type="card">
|
||
|
|
<a-tab-pane key="1" :tab="$t('机器人')">
|
||
|
|
<RobotGroups v-if="editor" :token="EDITOR_KEY" :sid="sid" :current="current?.id" @change="selectRobot" />
|
||
|
|
</a-tab-pane>
|
||
|
|
<a-tab-pane key="2" :tab="$t('库区')">
|
||
|
|
<PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-area1 />
|
||
|
|
</a-tab-pane>
|
||
|
|
<a-tab-pane key="3" :tab="$t('高级组')">
|
||
|
|
<PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" />
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
</a-layout-sider>
|
||
|
|
<a-layout-content>
|
||
|
|
<div ref="container" class="editor-container full"></div>
|
||
|
|
</a-layout-content>
|
||
|
|
</a-layout>
|
||
|
|
</a-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.editor-container {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-container {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 40px;
|
||
|
|
left: 50%;
|
||
|
|
z-index: 100;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 80px;
|
||
|
|
right: 64px;
|
||
|
|
z-index: 100;
|
||
|
|
width: 320px;
|
||
|
|
height: calc(100% - 96px);
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
</style>
|