web-map/src/pages/scene-editor.vue

<script setup lang="ts">
import type { RobotGroup } from '@api/robot';
import { getSceneById } from '@api/scene';
import { EditorService } from '@core/editor.service';
import { isEmpty } from 'lodash-es';
import { watch } from 'vue';
import { ref } from 'vue';
import { onMounted, provide, shallowRef } from 'vue';

const EDITOR_KEY = Symbol('editor-key');

type Props = {
  id: string;
};
const props = defineProps<Props>();

const title = ref<string>('');
const groups = ref<RobotGroup[]>([]);
const map = ref<string>('');
onMounted(() => {
  getSceneById(props.id).then((res) => {
    title.value = res?.label ?? '';
    groups.value = res?.robotGroups ?? [];
    map.value = res?.map ?? '';
  });
});
watch(map, (v) => {
  editor.value?.load(v, !editable.value);
});

const container = shallowRef<HTMLDivElement>();
const editor = shallowRef<EditorService>();
provide(EDITOR_KEY, editor);
onMounted(() => {
  editor.value = new EditorService(container.value!);
});

const editable = ref<boolean>(false);
</script>

<template>
  <a-layout class="full">
    <a-layout-header class="ph-16" style="height: 64px">
      <a-flex justify="space-between">
        <a-typography-text strong>{{ title }}</a-typography-text>
      </a-flex>
    </a-layout-header>

    <a-layout>
      <a-layout-sider>
        <RobotList v-if="editor" :editor="EDITOR_KEY" />
      </a-layout-sider>
      <a-layout-content>
        <div ref="container" class="full"></div>
      </a-layout-content>
      <a-layout-sider>{{ $t('查询') }}</a-layout-sider>
    </a-layout>
  </a-layout>
</template>

<!-- <style scoped lang="scss"></style> -->