113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
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 class="card-container" :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="title" style="flex: auto" :content="robot.label" ellipsis />
|
||
|
|
<a-tag :bordered="false">{{ $t(RobotType[robot.type]) }}</a-tag>
|
||
|
|
</a-flex>
|
||
|
|
</a-col>
|
||
|
|
|
||
|
|
<a-col :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">
|
||
|
|
.ant-typography.title {
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|