zengzy / hhrcs_web · Files

<script setup lang="ts">
import { ref, onBeforeMount, computed, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import fatigueTestApi, { FatigueTestConfig, FatigueTestStatus } from '../../services/fatigueTest'
import optionsApi from '../../services/options'

const { t } = useI18n()
const { init: notify } = useToast()

// 加载状态
const isLoading = ref(false)
const isSaving = ref(false)
const isStarting = ref(false)
const isStopping = ref(false)

// 配置数据
const config = ref<FatigueTestConfig>({
  mapId: '',
  robotIds: [],
  locationIds: [],
  taskIntervalMs: 1000,
})

// 运行状态
const status = ref<FatigueTestStatus>({
  isRunning: false,
  mapId: null,
  robotCount: 0,
  locationCount: 0,
  taskIntervalMs: 1000,
})

// 下拉选项
const robotOptions = ref<{ text: string; value: string; code?: string }[]>([])
const locationOptions = ref<{ text: string; value: string; code?: string }[]>([])
const isLoadingRobots = ref(false)
const isLoadingLocations = ref(false)

// 选中的选项对象（用于正确显示）
const selectedRobots = ref<{ text: string; value: string; code?: string }[]>([])
const selectedLocations = ref<{ text: string; value: string; code?: string }[]>([])

// 任务间隔选项（毫秒）
const intervalOptions = [
  { text: '100ms', value: 100 },
  { text: '500ms', value: 500 },
  { text: '1s', value: 1000 },
  { text: '2s', value: 2000 },
  { text: '5s', value: 5000 },
  { text: '10s', value: 10000 },
]

// 表单验证错误
const errors = ref<{
  robotIds?: string
  locationIds?: string
}>({})

// 计算属性：是否正在运行
const isRunning = computed(() => status.value?.isRunning || false)

// 计算属性：表单是否有效
const isFormValid = computed(() => {
  return config.value.robotIds.length > 0 && config.value.locationIds.length >= 2
})

// 监听选项变化，更新选中的对象
watch(
  () => config.value.robotIds,
  (newIds) => {
    selectedRobots.value = robotOptions.value.filter((opt) => newIds.includes(opt.value))
  },
  { immediate: true },
)

watch(
  () => config.value.locationIds,
  (newIds) => {
    selectedLocations.value = locationOptions.value.filter((opt) => newIds.includes(opt.value))
  },
  { immediate: true },
)

// 监听选项数据加载完成
watch(
  () => robotOptions.value,
  (newOptions) => {
    if (newOptions.length > 0 && config.value.robotIds.length > 0) {
      selectedRobots.value = newOptions.filter((opt) => config.value.robotIds.includes(opt.value))
    }
  },
  { immediate: true },
)

watch(
  () => locationOptions.value,
  (newOptions) => {
    if (newOptions.length > 0 && config.value.locationIds.length > 0) {
      selectedLocations.value = newOptions.filter((opt) => config.value.locationIds.includes(opt.value))
    }
  },
  { immediate: true },
)

// 加载机器人列表 - 使用 /api/options/robots (OptionsController)
const loadRobots = async () => {
  isLoadingRobots.value = true
  try {
    const res: any = await optionsApi.getRobots()
    // OptionsController 返回格式: { value, text, code }
    const list = Array.isArray(res) ? res : res?.data || res?.Data || []
    robotOptions.value = list.map((item: any) => ({
      text: item.text || item.name || item.label || item.RobotCode || item.id,
      value: item.value || item.id,
      code: item.code || item.RobotCode,
    }))
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.loadRobotsFailed'), color: 'danger' })
  } finally {
    isLoadingRobots.value = false
  }
}

// 加载库位列表 - 使用 /api/options/locations (OptionsController)
const loadLocations = async () => {
  isLoadingLocations.value = true
  try {
    const res: any = await optionsApi.getLocations()
    // OptionsController 返回格式: { value, text, code }
    const list = Array.isArray(res) ? res : res?.data || res?.Data || []
    locationOptions.value = list.map((item: any) => ({
      text: item.text || item.name || item.label || item.LocationName || item.id,
      value: item.value || item.id,
      code: item.code || item.LocationCode,
    }))
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.loadLocationsFailed'), color: 'danger' })
  } finally {
    isLoadingLocations.value = false
  }
}

// 加载配置
const loadConfig = async () => {
  try {
    const res: any = await fatigueTestApi.getConfig()
    const data = res?.data || res?.Data
    if (data) {
      config.value = {
        mapId: data.mapId || '',
        robotIds: data.robotIds || [],
        locationIds: data.locationIds || [],
        taskIntervalMs: data.taskIntervalMs || 1000,
      }
      // 更新选中的对象
      await nextTick()
      selectedRobots.value = robotOptions.value.filter((opt) => config.value.robotIds.includes(opt.value))
      selectedLocations.value = locationOptions.value.filter((opt) => config.value.locationIds.includes(opt.value))
    }
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.loadConfigFailed'), color: 'danger' })
  }
}

// 加载状态
const loadStatus = async () => {
  try {
    const res: any = await fatigueTestApi.getStatus()
    const data = res?.data || res?.Data
    if (data) {
      status.value = {
        isRunning: data.isRunning || false,
        mapId: data.mapId || null,
        robotCount: data.robotCount || 0,
        locationCount: data.locationCount || 0,
        taskIntervalMs: data.taskIntervalMs || 1000,
      }
    }
  } catch (err: any) {
    console.error('Failed to load status:', err)
  }
}

// 保存配置
const handleSave = async () => {
  // 验证表单
  errors.value = {}

  if (!config.value.robotIds || config.value.robotIds.length === 0) {
    errors.value.robotIds = t('fatigueTest.validation.robotRequired')
  }
  if (!config.value.locationIds || config.value.locationIds.length < 2) {
    errors.value.locationIds = t('fatigueTest.validation.locationRequired')
  }

  if (Object.keys(errors.value).length > 0) {
    return
  }

  isSaving.value = true
  try {
    const res: any = await fatigueTestApi.saveConfig({
      mapId: config.value.mapId,
      robotIds: config.value.robotIds,
      locationIds: config.value.locationIds,
      taskIntervalMs: config.value.taskIntervalMs,
    })

    if (res && res.success === false) {
      notify({ message: res.message || t('fatigueTest.messages.saveFailed'), color: 'danger' })
    } else {
      notify({ message: res?.message || t('fatigueTest.messages.saveSuccess'), color: 'success' })
      await loadStatus()
    }
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.saveFailed'), color: 'danger' })
  } finally {
    isSaving.value = false
  }
}

// 启动测试
const handleStart = async () => {
  if (!isFormValid.value) {
    notify({ message: t('fatigueTest.messages.configIncomplete'), color: 'warning' })
    return
  }

  isStarting.value = true
  try {
    const res: any = await fatigueTestApi.start()
    if (res && res.success === false) {
      notify({ message: res.message || t('fatigueTest.messages.startFailed'), color: 'danger' })
    } else {
      notify({ message: res?.message || t('fatigueTest.messages.startSuccess'), color: 'success' })
      await loadStatus()
    }
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.startFailed'), color: 'danger' })
  } finally {
    isStarting.value = false
  }
}

// 停止测试
const handleStop = async () => {
  isStopping.value = true
  try {
    const res: any = await fatigueTestApi.stop()
    if (res && res.success === false) {
      notify({ message: res.message || t('fatigueTest.messages.stopFailed'), color: 'danger' })
    } else {
      notify({ message: res?.message || t('fatigueTest.messages.stopSuccess'), color: 'success' })
      await loadStatus()
    }
  } catch (err: any) {
    notify({ message: err?.message || t('fatigueTest.messages.stopFailed'), color: 'danger' })
  } finally {
    isStopping.value = false
  }
}

// 页面加载时获取数据 - 先加载选项，再加载配置
onBeforeMount(async () => {
  isLoading.value = true
  try {
    // 先加载下拉选项
    await Promise.all([loadRobots(), loadLocations()])
    // 再加载配置（这样选项已存在，可以正确匹配）
    await Promise.all([loadConfig(), loadStatus()])
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div class="fatigue-test-page">
    <div class="page-header">
      <h1 class="page-title">{{ t('fatigueTest.title') }}</h1>
      <div class="status-badge" :class="{ running: isRunning }">
        <span class="status-dot"></span>
        {{ isRunning ? t('fatigueTest.status.running') : t('fatigueTest.status.stopped') }}
      </div>
    </div>

    <div class="content-wrapper">
      <VaCard class="config-card">
        <VaCardTitle>{{ t('fatigueTest.config.title') }}</VaCardTitle>
        <VaCardContent>
          <div class="form-grid">
            <!-- 任务间隔 -->
            <div class="form-item">
              <VaSelect
                v-model="config.taskIntervalMs"
                :label="t('fatigueTest.config.interval')"
                :options="intervalOptions"
                text-by="text"
                value-by="value"
                class="w-full"
              />
            </div>

            <!-- 机器人多选 -->
            <div class="form-item full-width">
              <VaSelect
                v-model="config.robotIds"
                :label="t('fatigueTest.config.robots')"
                :options="robotOptions"
                text-by="text"
                value-by="value"
                track-by="value"
                :loading="isLoadingRobots"
                :error="!!errors.robotIds"
                :error-messages="errors.robotIds"
                multiple
                searchable
                clearable
                class="w-full"
              >
                <template #content="{ valueArray }">
                  <template v-if="valueArray?.length">
                    <VaChip
                      v-for="item in valueArray.slice(0, 3)"
                      :key="item.value"
                      size="small"
                      class="mr-1"
                      closeable
                      @close="config.robotIds = config.robotIds.filter((id) => id !== item.value)"
                    >
                      {{ item.text }}
                    </VaChip>
                    <span v-if="valueArray.length > 3" class="text-secondary ml-1"> +{{ valueArray.length - 3 }} </span>
                  </template>
                </template>
              </VaSelect>
            </div>

            <!-- 库位多选 -->
            <div class="form-item full-width">
              <VaSelect
                v-model="config.locationIds"
                :label="t('fatigueTest.config.locations')"
                :options="locationOptions"
                text-by="text"
                value-by="value"
                track-by="value"
                :loading="isLoadingLocations"
                :error="!!errors.locationIds"
                :error-messages="errors.locationIds"
                multiple
                searchable
                clearable
                class="w-full"
              >
                <template #content="{ valueArray }">
                  <template v-if="valueArray?.length">
                    <VaChip
                      v-for="item in valueArray.slice(0, 3)"
                      :key="item.value"
                      size="small"
                      class="mr-1"
                      closeable
                      @close="config.locationIds = config.locationIds.filter((id) => id !== item.value)"
                    >
                      {{ item.text }}
                    </VaChip>
                    <span v-if="valueArray.length > 3" class="text-secondary ml-1"> +{{ valueArray.length - 3 }} </span>
                  </template>
                </template>
              </VaSelect>
              <div class="hint-text">
                {{ t('fatigueTest.config.locationHint') }}
              </div>
            </div>
          </div>

          <!-- 当前配置信息 -->
          <div v-if="status.robotCount > 0 || status.locationCount > 0" class="current-config">
            <VaDivider />
            <h4>{{ t('fatigueTest.config.currentConfig') }}</h4>
            <div class="config-info">
              <div class="info-item">
                <span class="label">{{ t('fatigueTest.config.robotCount') }}:</span>
                <span class="value">{{ status.robotCount }}</span>
              </div>
              <div class="info-item">
                <span class="label">{{ t('fatigueTest.config.locationCount') }}:</span>
                <span class="value">{{ status.locationCount }}</span>
              </div>
              <div class="info-item">
                <span class="label">{{ t('fatigueTest.config.interval') }}:</span>
                <span class="value">{{ status.taskIntervalMs }}ms</span>
              </div>
            </div>
          </div>
        </VaCardContent>
      </VaCard>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <VaButton color="primary" :loading="isSaving" :disabled="isRunning" @click="handleSave">
          {{ t('fatigueTest.actions.save') }}
        </VaButton>

        <VaButton v-if="!isRunning" color="success" :loading="isStarting" :disabled="!isFormValid" @click="handleStart">
          {{ t('fatigueTest.actions.start') }}
        </VaButton>

        <VaButton v-else color="danger" :loading="isStopping" @click="handleStop">
          {{ t('fatigueTest.actions.stop') }}
        </VaButton>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fatigue-test-page {
  padding: 1.5rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: var(--va-background-element);
  font-weight: 500;

  &.running {
    background-color: var(--va-success);
    color: white;
  }
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--va-secondary);

  .running & {
    background-color: white;
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.content-wrapper {
  max-width: 800px;
}

.config-card {
  margin-bottom: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-item {
  &.full-width {
    grid-column: span 2;
  }
}

.hint-text {
  font-size: 0.875rem;
  color: var(--va-secondary);
  margin-top: 0.5rem;
}

.current-config {
  margin-top: 1.5rem;

  h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
  }
}

.config-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.info-item {
  display: flex;
  gap: 0.5rem;

  .label {
    color: var(--va-secondary);
  }

  .value {
    font-weight: 500;
  }
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.w-full {
  width: 100%;
}

.mr-1 {
  margin-right: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.text-secondary {
  color: var(--va-secondary);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-item.full-width {
    grid-column: span 1;
  }

  .config-info {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>