web-map/src/components/card/robot-detail-card.vue

<script setup lang="ts">
import { type RobotInfo, RobotState, RobotType } from '@api/robot';
import type { EditorService } from '@core/editor.service';
import sTheme from '@core/theme.service';
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';

type Props = {
  token: InjectionKey<ShallowRef<EditorService>>;
  current?: string;
};
const props = defineProps<Props>();
const editor = inject(props.token)!;

const robot = computed<RobotInfo | null>(() => {
  const id = props.current;
  if (!id) return null;
  return editor.value.getRobotById(id) ?? null;
});

const batteryIcon = computed<string>(() => (robot.value?.state === RobotState.充电中 ? 'battery_charge' : 'battery'));
const stateDot = computed<string>(() => `state-${robot.value?.state}`);
</script>

<template>
  <a-card :bordered="false">
    <template v-if="robot">
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <a-flex align="center" :gap="8">
            <i class="icon robot" />
            <a-typography-text class="card-title" style="flex: auto" :content="robot.label" ellipsis />
            <a-tag :bordered="false">{{ $t(RobotType[robot.type]) }}</a-tag>
          </a-flex>
        </a-col>

        <a-col v-if="robot.ip" :span="24">
          <a-typography-text code>{{ robot.ip }}</a-typography-text>
        </a-col>

        <a-col :span="24">
          <a-space align="center" :size="8">
            <a-tag v-if="robot.isConnected">
              <i class="icon connect_on size-18 mr-4" />
              <span>{{ $t('已连接') }}</span>
            </a-tag>
            <a-tag v-else>
              <i class="icon connect_off size-18 mr-4" />
              <span>{{ $t('未连接') }}</span>
            </a-tag>

            <a-tag>
              <i class="icon size-18 mr-4" :class="batteryIcon" />
              <span>{{ robot.battery ?? 0 }}%</span>
            </a-tag>

            <a-tag v-if="robot.state">
              <i class="dot mr-4" :class="stateDot" />
              <span>{{ $t(RobotState[robot.state]) }}</span>
            </a-tag>
          </a-space>
        </a-col>
      </a-row>

      <a-list class="block mt-16">
        <a-list-item>
          <a-typography-text type="secondary">{{ $t('接单状态') }}</a-typography-text>
          <a-typography-text>{{ $t(robot.canOrder ? '接单' : '不可接单') }}</a-typography-text>
        </a-list-item>
        <a-list-item>
          <a-typography-text type="secondary">{{ $t('急停状态') }}</a-typography-text>
          <a-typography-text>{{ $t(robot.canStop ? '是' : '否') }}</a-typography-text>
        </a-list-item>
        <a-list-item>
          <a-typography-text type="secondary">{{ $t('控制权') }}</a-typography-text>
          <a-typography-text>{{ $t(robot.canControl ? '已抢占' : '当前无控制权') }}</a-typography-text>
        </a-list-item>
      </a-list>
    </template>
    <a-empty v-else :image="sTheme.empty" />
  </a-card>
</template>

<style scoped lang="scss">
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  &.state {
    &-1 {
      background-color: #19f390;
    }

    &-2 {
      background-color: #fdc11c;
    }

    &-3 {
      background-color: #1982f3;
    }

    &-4 {
      background-color: #888;
    }
  }
}
</style>