web-map/src/components/context-menu/robot-menu.vue

<template>
  <div class="robot-menu">
    <div v-if="robotInfo" class="robot-info-section">
      <!-- 机器人基本信息 -->
      <div class="robot-header">
        <div class="robot-name">{{ robotInfo.name }}</div>
        <div class="robot-status" :style="{ color: getStatusColor(robotInfo.status) }">
          {{ getStatusText(robotInfo.status) }}
        </div>
      </div>
      
      <!-- 机器人详细信息 -->
      <div class="robot-details">
        <div v-if="robotInfo.batteryLevel !== undefined" class="detail-item">
          <span class="detail-label">电量:</span>
          <div class="battery-container">
            <div class="battery-bar">
              <div 
                class="battery-fill" 
                :style="{ width: `${robotInfo.batteryLevel}%` }"
                :class="getBatteryClass(robotInfo.batteryLevel)"
              ></div>
            </div>
            <span class="battery-text">{{ robotInfo.batteryLevel }}%</span>
          </div>
        </div>
        
        <div v-if="robotInfo.currentTask" class="detail-item">
          <span class="detail-label">当前任务:</span>
          <span class="detail-value">{{ robotInfo.currentTask }}</span>
        </div>
      </div>
    </div>

    <!-- 机器人操作菜单 -->
    <div class="robot-actions">
      <div class="action-group">
        <div class="action-group-title">基本操作</div>
        <div class="action-item" @click="handleRobotAction('start', '启动')">
          <span class="action-icon">🚀</span>
          <span>启动</span>
        </div>
        <div class="action-item" @click="handleRobotAction('stop', '停止')">
          <span class="action-icon">⏹️</span>
          <span>停止</span>
        </div>
        <div class="action-item" @click="handleRobotAction('pause', '暂停')">
          <span class="action-icon">⏸️</span>
          <span>暂停</span>
        </div>
        <div class="action-item" @click="handleRobotAction('resume', '恢复')">
          <span class="action-icon">▶️</span>
          <span>恢复</span>
        </div>
      </div>

      <div class="action-group">
        <div class="action-group-title">导航控制</div>
        <div class="action-item" @click="handleRobotAction('go_home', '回原点')">
          <span class="action-icon">🏠</span>
          <span>回原点</span>
        </div>
        <div class="action-item" @click="handleRobotAction('charge', '充电')">
          <span class="action-icon">🔋</span>
          <span>充电</span>
        </div>
        <div class="action-item" @click="handleRobotAction('emergency_stop', '紧急停止')">
          <span class="action-icon">🛑</span>
          <span>紧急停止</span>
        </div>
      </div>

      <div class="action-group">
        <div class="action-group-title">状态管理</div>
        <div class="action-item" @click="handleRobotAction('reset', '重置')">
          <span class="action-icon">🔄</span>
          <span>重置</span>
        </div>
        <div class="action-item" @click="handleRobotAction('diagnose', '诊断')">
          <span class="action-icon">🔧</span>
          <span>诊断</span>
        </div>
        <div class="action-item" @click="handleRobotAction('update', '更新')">
          <span class="action-icon">📱</span>
          <span>更新</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { RobotInfo } from '../../services/context-menu';
import { getRobotStatusText, getRobotStatusColor } from '../../services/context-menu';

interface Props {
  robotInfo?: RobotInfo;
}

interface Emits {
  (e: 'actionComplete', data: { action: string; robot: RobotInfo; success: boolean }): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 定义组件名称
defineOptions({
  name: 'RobotMenu',
});

// 获取状态显示文本
const getStatusText = (status: string): string => {
  return getRobotStatusText(status);
};

// 获取状态颜色
const getStatusColor = (status: string): string => {
  return getRobotStatusColor(status);
};

// 获取电量条样式类
const getBatteryClass = (batteryLevel: number) => {
  if (batteryLevel > 50) return 'battery-high';
  if (batteryLevel > 20) return 'battery-medium';
  return 'battery-low';
};

// 处理机器人操作
const handleRobotAction = async (action: string, actionName: string) => {
  if (!props.robotInfo) return;
  
  try {
    console.log(`执行机器人操作: ${action}`, props.robotInfo);
    
    // 模拟操作延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 发送操作完成事件
    emit('actionComplete', {
      action,
      robot: props.robotInfo,
      success: true
    });
  } catch (error) {
    console.error(`机器人${actionName}操作失败:`, error);
    
    // 发送操作失败事件
    emit('actionComplete', {
      action,
      robot: props.robotInfo,
      success: false
    });
  }
};
</script>

<style scoped>
.robot-menu {
  width: 100%;
  min-width: 200px;
}

/* 机器人信息区域 */
.robot-info-section {
  padding: 12px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.robot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.robot-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.robot-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.05);
}

.robot-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.detail-label {
  color: #666;
  min-width: 60px;
}

.detail-value {
  color: #000;
  flex: 1;
}

/* 电量条样式 */
.battery-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.battery-bar {
  flex: 1;
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 3px;
}

.battery-fill.battery-high {
  background-color: #52c41a;
}

.battery-fill.battery-medium {
  background-color: #faad14;
}

.battery-fill.battery-low {
  background-color: #ff4d4f;
}

.battery-text {
  font-size: 11px;
  color: #666;
  min-width: 30px;
  text-align: right;
}

/* 操作区域 */
.robot-actions {
  padding: 8px 0;
}

.action-group {
  margin-bottom: 8px;
}

.action-group:last-child {
  margin-bottom: 0;
}

.action-group-title {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 13px;
  color: #000;
  gap: 8px;
}

.action-item:hover {
  background-color: #f5f5f5;
}

.action-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
}
</style>