web-map/src/pages/movement-supervision.vue

<script setup lang="ts">
import type { RobotRealtimeInfo } from '@api/robot';
import { getSceneByGroupId, getSceneById, monitorRealSceneById, monitorSceneById } from '@api/scene';
import { EditorService } from '@core/editor.service';
import { StorageLocationService } from '@core/storage-location.service';
import { useViewState } from '@core/useViewState';
import { message } from 'ant-design-vue';
import { isNil } from 'lodash-es';
import { computed, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
import { useRoute } from 'vue-router';

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

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

//#region 响应式状态定义
// 获取路由信息以判断当前模式
const route = useRoute();
const isMonitorMode = computed(() => route.path.includes('/monitor'));

// 场景标题
const title = ref<string>('');

// 服务实例
const container = shallowRef<HTMLDivElement>();
const editor = shallowRef<EditorService>();
const storageLocationService = shallowRef<StorageLocationService>();
const client = shallowRef<WebSocket>();

// 依赖注入
provide(EDITOR_KEY, editor);
//#endregion

//#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);
};

/**
 * 监控场景中的机器人状态
 * 采用 requestAnimationFrame 优化高频数据渲染，确保动画流畅且不阻塞UI线程。
 */
const monitorScene = async () => {
  console.log(current.value?.id);
  client.value?.close();
  // 根据路由路径是否是真实场景监控决定使用哪个监控接口
  const ws = isMonitorMode.value ? await monitorRealSceneById(props.sid) : await monitorSceneById(props.sid);
  if (isNil(ws)) return;

  // 使用 Map 来缓冲每个机器人最新的实时数据。
  // Key 是机器人 ID，Value 是该机器人最新的完整信息。
  // 这样做可以确保我们总是有每个机器人最新的状态，并且可以快速更新，避免重复渲染。
  const latestRobotData = new Map<string, RobotRealtimeInfo>();

  // 用于存储 requestAnimationFrame 的 ID，方便在组件卸载或 WebSocket 关闭时取消动画循环。
  let animationFrameId: number;

  /**
   * 渲染循环函数。
   * 这个函数会通过 requestAnimationFrame 以浏览器的刷新频率（通常是60fps）被反复调用。
   * 这是实现流畅动画的核心。
   */
  const renderLoop = () => {
    // 检查是否有新的数据需要渲染。如果没有，则本次循环不执行任何操作，节省性能。
    if (latestRobotData.size > 0) {
      // 遍历所有待更新的机器人数据
      latestRobotData.forEach((data, id) => {
        const { x, y, active, angle, path, isWaring, isFault, ...rest } = data;
        // 确保机器人仍然存在于编辑器中
        if (!editor.value?.checkRobotById(id)) return;

        // 更新机器人的非位置属性（如状态等）
        editor.value?.updateRobot(id, rest);

        // 更新机器人的位置和可见性
        if (isNil(x) || isNil(y)) {
          // 如果坐标为空，则隐藏机器人
          editor.value.updatePen(id, { visible: false });
        } else {
          // 如果坐标有效，则刷新机器人在画布上的位置、角度等
          editor.value.refreshRobot(id, { x, y, active, angle, path, isWaring, isFault });
        }
      });
      // 本次渲染完成后，清空数据缓冲区，等待下一批新数据的到来。
      latestRobotData.clear();
    }
    // 请求浏览器在下一次重绘之前再次调用 renderLoop，形成动画循环。
    animationFrameId = requestAnimationFrame(renderLoop);
  };

  /**
   * WebSocket 的 onmessage 事件处理器。
   * 这个函数只做一件事：接收数据并将其快速存入缓冲区。
   * 这种“数据与渲染分离”的设计是避免UI阻塞的关键。
   */
  ws.onmessage = (e) => {
    const data = <RobotRealtimeInfo>JSON.parse(e.data || '{}');
    // 将最新数据存入 Map，如果已有相同ID的数据，则会被自动覆盖。
    latestRobotData.set(data.id, data);
  };

  client.value = ws;

  // WebSocket 连接成功后，立即启动渲染循环。
  renderLoop();

  // 增强 WebSocket 的 onclose 事件，以确保在连接关闭时清理资源。
  const originalOnClose = ws.onclose;
  ws.onclose = (event) => {
    // 停止渲染循环，防止不必要的计算和内存泄漏。
    cancelAnimationFrame(animationFrameId);
    // 如果原始的 onclose 处理函数存在，则继续执行它。
    if (originalOnClose) {
      originalOnClose.call(ws, event);
    }
  };
};
//#endregion

//#region 服务初始化
onMounted(() => {
  editor.value = new EditorService(container.value!);
  storageLocationService.value = new StorageLocationService(editor.value, props.sid);
});
//#endregion

//#region 生命周期管理
onMounted(async () => {
  await readScene();
  await editor.value?.initRobots();
  await monitorScene();
  await storageLocationService.value?.startMonitoring({ interval: 3 });
  // 自动保存和恢复视图状态
  await handleAutoSaveAndRestoreViewState();
});

onUnmounted(() => {
  client.value?.close();
  storageLocationService.value?.destroy();
});
//#endregion

//#region 选择状态管理
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');

/**
 * 选择机器人
 * @param id 机器人ID
 */
const selectRobot = (id: string) => {
  current.value = { type: 'robot', id };
  editor.value?.inactive();
  // 聚焦到机器人位置
  editor.value?.gotoById(id);
};
//#endregion

//#region 视图状态管理
const { saveViewState, autoSaveAndRestoreViewState, isSaving } = useViewState();

/**
 * 保存当前视图状态
 */
const handleSaveViewState = async () => {
  if (!editor.value) return;

  try {
    await saveViewState(editor.value, props.sid, props.id);
    message.success('视图状态保存成功');
  } catch {
    message.error('视图状态保存失败');
  }
};

/**
 * 自动保存和恢复视图状态
 */
const handleAutoSaveAndRestoreViewState = async () => {
  if (!editor.value) return;

  await autoSaveAndRestoreViewState(editor.value, props.sid, props.id);
};
//#endregion

//#region UI状态管理
const show = ref<boolean>(true);
//#endregion
</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 }}--{{ isMonitorMode ? '场景监控' : '场景仿真' }}</a-typography-text>
        <a-button type="primary" :loading="isSaving" @click="handleSaveViewState"> 保存比例 </a-button>
      </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 v-if="current?.id">
    <a-float-button style="top: 80px; right: 16px" shape="square" @click="show = !show">
      <template #icon><i class="icon detail" /></template>
    </a-float-button>
    <div v-if="show" class="card-container">
      <RobotDetailCard v-if="isRobot" :token="EDITOR_KEY" :current="current.id" />
      <PointDetailCard
        v-if="isPoint"
        :token="EDITOR_KEY"
        :current="current.id"
        :storage-locations="storageLocationService?.getLocationsByPointId(current.id)"
      />
      <RouteDetailCard v-if="isRoute" :token="EDITOR_KEY" :current="current.id" />
      <AreaDetailCard v-if="isArea" :token="EDITOR_KEY" :current="current.id" />
    </div>
  </template>
</template>

<style scoped lang="scss">
.editor-container {
  background-color: transparent !important;
}

.card-container {
  position: fixed;
  top: 80px;
  right: 64px;
  z-index: 100;
  width: 320px;
  height: calc(100% - 96px);
  overflow: visible;
  pointer-events: none;

  & > * {
    pointer-events: all;
  }
}
</style>