frontend_hmi/src/components/LmsStatus/index.vue

<template>
  <!-- Status Item -->
  <div class="status-item status-button" @click="show">
    <i-lucide-zap class="status-icon" />
    <span class="status-label">LMS 状态:</span>
    <span class="status-value" :class="onlineStatusClass">{{ lmsStatus }}</span>
  </div>

  <a-modal v-model:open="dialogVisible" :title="modalTitle" :footer="null">
    <a-row :gutter="[0, 12]">
      <a-col :span="8" class="modal-label">LMS 状态</a-col>
      <a-col :span="16" class="modal-value">
        <a-switch v-model:checked="isOnline" checked-children="在线" un-checked-children="离线" @change="handleToggleOnline" />
      </a-col>
    </a-row>
    <a-row :gutter="[0, 12]">
      <template v-for="(item, index) in modalItems" :key="index">
        <a-col :span="8" class="modal-label">{{ item.label }}</a-col>
        <a-col :span="16" class="modal-value">{{ item.value }}</a-col>
      </template>
    </a-row>
    <div class="actions">
      <a-button size="large" @click="redirectTo('L1')">L1 数据</a-button>
      <a-button size="large" @click="redirectTo('L4')">L4 数据</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useDialog } from '@/utils/useDialog';
import { fetchLmsWorkMode, updateLmsWorkMode } from '@/api/lms';
import { message } from 'ant-design-vue';

// useDialog管理弹窗状态
const { visible: dialogVisible, show, hide } = useDialog();

const isOnline = ref(false);
const lmsStatus = computed(() => isOnline.value ? '在线' : '离线');

const onlineStatusClass = computed(() => {
  return isOnline.value ? 'success' : 'error';
});

// 当请求发送成功后才切换状态
async function handleToggleOnline(checked: boolean | string | number) {
  await updateLmsWorkMode(checked ? 1 : 0).then(() => {
    isOnline.value = Boolean(checked);
    message.success('切换成功');
  }).catch((error) => {
    message.error('切换失败');
  });
}

const modalTitle = ref('LMS 状态');
const modalItems = ref<{ label: string; value: string }[]>([]);

// 初始化 LMS 状态
async function initLmsStatus() {
  try {
    const { msg } = await fetchLmsWorkMode();
    isOnline.value = msg === "1";
  } catch (error) {
    console.error('获取 LMS 工作模式失败:', error);
  }
}


const router = useRouter();
function redirectTo(type: string) {
  router.push(`/${type}-data`);
}

// 初始化 LMS 状态
onMounted(initLmsStatus);

// 暴露方法
defineExpose({
  show,
  hide
});
</script>

<style scoped lang="scss">
@use "@/assets/styles/variables" as *;

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  
  &.status-button {
    cursor: pointer;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  
  .status-icon {
    width: 16px;
    height: 16px;
    color: #8395B6;
    
    &.success {
      color: $success-color;
    }
    
    &.error {
      color: $error-color;
    }
    
    &.warning {
      color: $warning-color;
    }
  }
  
  .status-label {
    font-size: 13px;
    color: #8395B6;
    white-space: nowrap;
  }
  
  .status-value {
    font-size: 13px;
    font-weight: 500;
    
    &.success {
      color: $success-color;
    }
    
    &.error {
      color: $error-color;
    }
    
    &.warning {
      color: $warning-color;
    }
  }
}

.modal-label {
  font-size: $text-size;
  font-weight: bold;
}

.actions {
  margin: 20px 0 10px;
  display: flex;
  gap: 10px;
  justify-content: space-between;

  .ant-btn {
    flex: 1;
  }
}
</style>