161 lines
3.6 KiB
Vue
161 lines
3.6 KiB
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> |