673 lines
24 KiB
Vue
673 lines
24 KiB
Vue
<template>
|
||
<Layout>
|
||
<a-card class="ks-page-card ks-cards-wrapper">
|
||
|
||
<template #title>
|
||
<a-space>
|
||
<span class="point"></span>
|
||
<span class="text">博弈竞赛单元运行环境</span>
|
||
</a-space>
|
||
</template>
|
||
|
||
<div class="ks-scrollable">
|
||
<a-row :gutter="15">
|
||
<a-col :span="8">
|
||
<!-- 基础配置卡片 -->
|
||
<a-card data-step="0" title="基础配置" class="ks-apps-card ks-top-apps-card">
|
||
<a-form
|
||
:model="modelDeduction"
|
||
autocomplete="off"
|
||
layout="horizontal"
|
||
:label-col="{span: 6}"
|
||
name="basic"
|
||
>
|
||
<a-form-item
|
||
label="部署模型选择"
|
||
name="deploymentModelPath"
|
||
>
|
||
<Finder :path="modelDeduction.deploymentModelPath"
|
||
@select="(p: string|null) => modelDeduction.deploymentModelPath = p" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
label="对抗轮数配置"
|
||
name="competitionRound"
|
||
>
|
||
<a-input v-model:value="modelDeduction.competitionRound" placeholder="对抗轮数配置" style="width: 100%" />
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="对抗场次配置"
|
||
name="competitionSession"
|
||
>
|
||
<a-input-number min="1" v-model:value="modelDeduction.competitionSession" placeholder="对抗场次配置" style="width: 100%" />
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="推演倍数设置"
|
||
name="deductionMultiple"
|
||
>
|
||
<a-form-item-rest>
|
||
<a-flex>
|
||
<a-slider v-model:value="modelDeduction.deductionMultiple" :max="1000" :min="0" style="width:100%;" />
|
||
<a-input-number v-model:value="modelDeduction.deductionMultiple" :min="0" :max="1000" style="margin-left: 10px; width: 120px;" />
|
||
<span style="width: 80px; margin-left: 5px;color:#eee; line-height: 34px;"> / 1000</span>
|
||
</a-flex>
|
||
</a-form-item-rest>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="对抗模式选择"
|
||
name="competitionMode"
|
||
>
|
||
<a-select placeholder="请选择对抗模式" v-model:value="modelDeduction.competitionMode"
|
||
@change="(v: number | undefined | null)=> modelDeduction.competitionMode = v">
|
||
<a-select-option :value="1">循环赛</a-select-option>
|
||
<a-select-option :value="2">瑞士轮</a-select-option>
|
||
<a-select-option :value="3">单败淘汰赛</a-select-option>
|
||
<a-select-option :value="4">双败淘汰赛</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="并发调度配置"
|
||
name="balanceStrategy"
|
||
>
|
||
<a-select placeholder="并发调度配置" v-model:value="modelDeduction.balanceStrategy"
|
||
@change="(v: number | undefined | null)=> modelDeduction.balanceStrategy = v">
|
||
<a-select-option :value="1">均衡调度策略</a-select-option>
|
||
<a-select-option :value="2">集约调度策略</a-select-option>
|
||
<a-select-option :value="3">优先调度策略</a-select-option>
|
||
<a-select-option :value="4">触发调度策略</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
|
||
<!-- 对抗配置卡片 -->
|
||
<a-card data-step="0" title="对抗配置" class="ks-apps-card ks-bottom-apps-card">
|
||
<a-form
|
||
autocomplete="off"
|
||
layout="horizontal"
|
||
:label-col="{span: 6}"
|
||
name="basic"
|
||
>
|
||
<a-form-item
|
||
label="蓝方"
|
||
name="taskName"
|
||
>
|
||
<div class="counter-wrapper">
|
||
<div class="counter-wrapper-item" v-for="i in blueCounter" :key="`blue-${i}`">
|
||
<a-row :gutter="15">
|
||
<a-col :span="19">
|
||
<Finder :only-directory="false" @select="(_p: any, f: any)=> blueNames[i] = f.name"/>
|
||
</a-col>
|
||
<a-col :span="5" v-if="i == 1">
|
||
<a-space>
|
||
<plus-circle-outlined @click="()=> add('blue')"/>
|
||
<minus-circle-outlined @click="()=> minus('blue')"/>
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</a-form-item>
|
||
<a-form-item
|
||
label="红方"
|
||
name="t"
|
||
>
|
||
<div class="counter-wrapper">
|
||
<div class="counter-wrapper-item" v-for="i in redCounter" :key="`red-${i}`">
|
||
<a-row :gutter="15">
|
||
<a-col :span="19">
|
||
<Finder :only-directory="false" @select="(_p: any, f: any)=> redNames[i] = f.name"/>
|
||
</a-col>
|
||
<a-col :span="5" v-if="i == 1">
|
||
<a-space>
|
||
<plus-circle-outlined @click="()=> add('red')"/>
|
||
<minus-circle-outlined @click="()=> minus('red')"/>
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col :span="16">
|
||
<!-- 智能博弈空战卡片 -->
|
||
<a-card data-step="0" class="ks-pks-card ks-pk-apps-card">
|
||
<template #title>
|
||
<a-flex :gap="8">
|
||
<span style="margin-top: 5px;color:#eee;font-size:16px">智能博弈空战</span>
|
||
<span style="color:#999;font-size: 15px;line-height: 32px;margin-left: 40px;">
|
||
当前场次 {{ deductionPods.length }} 队伍数: {{ deductionPods.length * 2 }}
|
||
</span>
|
||
<a-button style="margin-left: auto; color:#fff;" @click="()=> startLoop()">
|
||
<a-flex>
|
||
<PlayCircleOutlined/>
|
||
<span style="margin-left: 10px;">对抗开始</span>
|
||
</a-flex>
|
||
</a-button>
|
||
<a-button style="margin-left: 15px;color:#fff;" @click="()=> rankingModelVisible = true">
|
||
<a-flex>
|
||
<OrderedListOutlined/>
|
||
<span style="margin-left: 10px;">排名统计</span>
|
||
</a-flex>
|
||
</a-button>
|
||
</a-flex>
|
||
</template>
|
||
|
||
<div class="w-full mt-2" style="margin-top: 15px;">
|
||
<a-row :gutter="15">
|
||
<a-col :span="8" v-for="(item,i) in deductionPods" :key="`pod-${item.id}`">
|
||
<a-card class="ks-pk-card" hoverable>
|
||
<template #title>
|
||
<a-flex>
|
||
<span class="ks-card-title">第 {{i + 1}} 组</span>
|
||
</a-flex>
|
||
</template>
|
||
<div class="pk-wrapper">
|
||
<div class="pk-overlay" @click="()=> handleClickPkCard(item)"></div>
|
||
<div class="pk-teams" @click="()=> handleClickPkCard(item)">
|
||
<span class="left-team">
|
||
<a-tooltip placement="bottom">
|
||
<template #title>
|
||
{{item.blueName ?? `蓝方${i+1}`}}
|
||
</template>
|
||
{{getTeamName(item.blueName,'blue', i + 1)}}
|
||
</a-tooltip>
|
||
</span>
|
||
<span class="right-team">
|
||
<a-tooltip placement="bottom">
|
||
<template #title>
|
||
{{item.redName ?? `红方${i+1}`}}
|
||
</template>
|
||
{{getTeamName(item.redName,'red', i + 1)}}
|
||
</a-tooltip>
|
||
</span>
|
||
</div>
|
||
<div class="pk-footer">
|
||
<a-flex>
|
||
<a-progress
|
||
:percent="item.targetPercent"
|
||
:stroke-width="6"
|
||
style="margin-right: 30px;"
|
||
></a-progress>
|
||
<a-button :disabled="item.targetPercent < 100" class="pk-details-btn" size="small" @click="()=> handleDetails(item)">
|
||
对抗详情
|
||
</a-button>
|
||
</a-flex>
|
||
</div>
|
||
</div>
|
||
<template #extra class="pk-actions">
|
||
<a-space>
|
||
<span class="icon-action eye" @click="()=> handleTermStatusPopoverVisible(item)" style="margin-right: -5px;"></span>
|
||
<a-popover title="" trigger="click" v-model:open="item.termStatusPopoverVisible">
|
||
<template #content>
|
||
<a-flex>
|
||
<span style="width: 100px;text-align: right;">仿真运行状态: </span>
|
||
<span style="margin-left: 10px;">{{item.statusName ?? '-'}}</span>
|
||
</a-flex>
|
||
</template>
|
||
</a-popover>
|
||
<!-- <a-popover title="" trigger="click" v-if="item?.metricsParsed">-->
|
||
<!-- <span class="icon-action eye"></span>-->
|
||
<!-- <template #content v-if="item?.metricsParsed">-->
|
||
<!-- <a-flex>-->
|
||
<!-- <span style="width: 100px;text-align: right;">本轮总奖励: </span>-->
|
||
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.reward ?? '-' }}</span>-->
|
||
<!-- </a-flex>-->
|
||
<!-- <a-flex>-->
|
||
<!-- <span style="width: 100px;text-align: right;">本轮生存步数: </span>-->
|
||
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.steps ?? '-' }}</span>-->
|
||
<!-- </a-flex>-->
|
||
<!-- <template v-if="item?.metricsParsed?.details">-->
|
||
<!-- <a-flex>-->
|
||
<!-- <span style="width: 100px;text-align: right;">开火奖励累计值: </span>-->
|
||
<!-- <span style="margin-left: 10px;">{{ item.metricsParsed?.details.fire_reward ?? '-' }}</span>-->
|
||
<!-- </a-flex>-->
|
||
<!-- <a-flex>-->
|
||
<!-- <span style="width: 100px;text-align: right;">越界惩罚累计值: </span>-->
|
||
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.details.boundary_penalty ?? '-' }}</span>-->
|
||
<!-- </a-flex>-->
|
||
<!-- </template>-->
|
||
<!-- </template>-->
|
||
<!-- </a-popover>-->
|
||
<a-popconfirm
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="()=> confirmPause(item)"
|
||
>
|
||
<template #title>
|
||
确定{{ item.simulationStatus === 1 ? '暂停' : '开始' }}
|
||
</template>
|
||
<span :class="['icon-action', item.simulationStatus === 1 ? 'pause' : 'start']">
|
||
</span>
|
||
</a-popconfirm>
|
||
<a-popconfirm
|
||
title="确定删除?"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="()=> confirmDelete(item)"
|
||
>
|
||
<span class="icon-action delete"></span>
|
||
</a-popconfirm>
|
||
</a-space>
|
||
</template>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
|
||
<ChartsModal :deduction="selectedDeduction" :visible="chartsModalVisible" @cancel="()=> chartsModalVisible = false" />
|
||
<RankingModel :visible="rankingModelVisible" @cancel="()=> rankingModelVisible = false"/>
|
||
</Layout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, onUnmounted, ref } from 'vue';
|
||
import {useRouter} from 'vue-router'
|
||
import { message } from 'ant-design-vue';
|
||
import Layout from '../layout.vue';
|
||
import { MinusCircleOutlined, OrderedListOutlined, PlayCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
|
||
import RankingModel from './ranking-modal.vue';
|
||
import { createModelDeduction, deleteModelDeduction, findDeductionPodResult, runDeductionPodAfsimControl } from './api';
|
||
import type { DeductionPod, DeductionPodMetrics, ModelDeduction } from './types';
|
||
import Finder from '../finder.vue';
|
||
import { defaultModelDeduction } from './config';
|
||
import ChartsModal from './charts/charts-modal.vue';
|
||
import type { NullableString } from '@/types';
|
||
|
||
const chartsModalVisible = ref<boolean>(false);
|
||
const router = useRouter();
|
||
|
||
// 排名弹窗显隐
|
||
const rankingModelVisible = ref<boolean>(false)
|
||
// 红蓝方计数器
|
||
const redCounter = ref<number>(1);
|
||
const blueCounter = ref<number>(1);
|
||
|
||
const blueNames = ref<string[]>([])
|
||
const redNames = ref<string[]>([])
|
||
|
||
// 模型推演配置
|
||
const modelDeduction = ref<ModelDeduction>({ ...defaultModelDeduction });
|
||
// 推演Pods数据（扩展类型，增加进度更新定时器）
|
||
const deductionPods = ref<(DeductionPod & {
|
||
animatePercent: number; // 动画进度值
|
||
targetPercent: number; // 目标进度值
|
||
stopped: boolean; // 是否暂停
|
||
progressTimer: any; // 动画定时器
|
||
updateTimer: any; // 进度更新定时器
|
||
})[]>([]);
|
||
// 心跳方法定时器标识
|
||
const heartbeatTimer = ref<any | null>(null);
|
||
const selectedDeduction = ref<DeductionPod | null | undefined>(null);
|
||
|
||
const getTeamName = (name: NullableString | undefined, side: string, level: number = 1): string => {
|
||
if(name){
|
||
if(name.length>3){
|
||
return name.substring(0,2) + '...';
|
||
}
|
||
return name;
|
||
}
|
||
return `${side === 'red' ? '红方' : '蓝方'}${level}`
|
||
}
|
||
|
||
const parseNumberPercent = (source: number|null , target: number|null) : number => {
|
||
if(source && target){
|
||
try{
|
||
return Number(Number((source/ target) * 100).toFixed(2));
|
||
} catch (e: any){
|
||
console.error(e);
|
||
}
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
const handleDetails = (item: Partial<DeductionPod>) => {
|
||
// chartsModalVisible.value = true;
|
||
// selectedDeduction.value = JSON.parse(JSON.stringify(item));
|
||
router.push({
|
||
path: `/app/ai/applications/gambling/${item.id}/charts`
|
||
})
|
||
};
|
||
|
||
/**
|
||
* 随机更新进度值（核心修改：优化初始启动逻辑）
|
||
* @param pod 单个pod实例
|
||
*/
|
||
const randomUpdateProgress = (pod: any) => {
|
||
// 如果暂停或进度已到100%，直接返回
|
||
if (pod.stopped || pod.animatePercent >= 100) {
|
||
return;
|
||
}
|
||
|
||
// 随机生成下次更新时间（1-3秒）
|
||
const randomInterval = 1000 + Math.random() * 2000;
|
||
// 随机生成进度增长量（1-5%）
|
||
const randomIncrement = 1 + Math.random() * 4;
|
||
|
||
pod.updateTimer = setTimeout(() => {
|
||
// 计算新的目标进度（不超过100%）
|
||
pod.targetPercent = Math.min(pod.animatePercent + randomIncrement, 100);
|
||
// 启动进度动画
|
||
animateProgress(pod, pod.targetPercent);
|
||
// 递归调用，实现持续更新
|
||
randomUpdateProgress(pod);
|
||
}, randomInterval);
|
||
};
|
||
|
||
/**
|
||
* 暂停/开始进度更新
|
||
* @param item 单个pod实例
|
||
*/
|
||
const confirmPause = (item: any) => {
|
||
item.simulationStatus = item.simulationStatus === 1 ? 2 : 1;
|
||
runDeductionPodAfsimControl({
|
||
jobId: item.jobId,
|
||
afsimHostIp: item.afsimHostIp,
|
||
afsimNodePort81: item.afsimNodePort81,
|
||
type: item.simulationStatus, // （1-恢复仿真，2-暂停仿真，3-查询状态）
|
||
}).then(r=> {
|
||
message.info(r.msg);
|
||
if(r.code === 200) {
|
||
item.stopped = !item.stopped;
|
||
}
|
||
if(r.data?.stateDescription){
|
||
item.statusName = r.data.stateDescription;
|
||
}
|
||
})
|
||
|
||
// if (item.stopped) {
|
||
// // 暂停：清除进度更新定时器
|
||
// if (item.updateTimer) {
|
||
// clearTimeout(item.updateTimer);
|
||
// item.updateTimer = null;
|
||
// }
|
||
// message.info('已暂停');
|
||
// } else {
|
||
// // 开始：重新启动进度更新
|
||
// randomUpdateProgress(item);
|
||
// message.info('已恢复');
|
||
// }
|
||
};
|
||
|
||
|
||
const handleTermStatusPopoverVisible = (item: Partial<DeductionPod>)=> {
|
||
item.termStatusPopoverVisible = ! item.termStatusPopoverVisible;
|
||
runDeductionPodAfsimControl({
|
||
jobId: item.jobId,
|
||
afsimHostIp: item.afsimHostIp,
|
||
afsimNodePort81: item.afsimNodePort81,
|
||
type: 3, // （1-恢复仿真，2-暂停仿真，3-查询状态）
|
||
}).then(r=> {
|
||
message.info(r.msg);
|
||
if(r.data.stateDescription){
|
||
item.statusName = r.data.stateDescription;
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
/**
|
||
* 删除pod，同时清除相关定时器
|
||
* @param item 单个pod实例
|
||
*/
|
||
const confirmDelete = (item: any) => {
|
||
console.error('confirmDelete', item);
|
||
// 清除该pod的所有定时器
|
||
if (item.updateTimer) clearTimeout(item.updateTimer);
|
||
if (item.progressTimer) clearInterval(item.progressTimer);
|
||
|
||
deleteModelDeduction(item.id as number).then(res => {
|
||
if (res.code === 200) {
|
||
message.info('删除成功.');
|
||
loadData();
|
||
}
|
||
});
|
||
};
|
||
|
||
// 进度条平滑动画函数（保留原有逻辑）
|
||
const animateProgress = (pod: any, targetPercent: number) => {
|
||
targetPercent = Math.max(0, Math.min(100, Number(targetPercent) || 0));
|
||
|
||
if (typeof pod.animatePercent !== 'number') {
|
||
pod.animatePercent = 0;
|
||
}
|
||
|
||
const step = 0.5;
|
||
if (pod.progressTimer) {
|
||
clearInterval(pod.progressTimer);
|
||
}
|
||
|
||
if (Math.abs(pod.animatePercent - targetPercent) < step) {
|
||
pod.animatePercent = targetPercent;
|
||
return;
|
||
}
|
||
|
||
pod.progressTimer = setInterval(() => {
|
||
if (pod.animatePercent < targetPercent) {
|
||
pod.animatePercent = Math.min(pod.animatePercent + step, targetPercent);
|
||
} else {
|
||
pod.animatePercent = Math.max(pod.animatePercent - step, targetPercent);
|
||
}
|
||
|
||
if (Math.abs(pod.animatePercent - targetPercent) < step) {
|
||
pod.animatePercent = targetPercent;
|
||
clearInterval(pod.progressTimer);
|
||
pod.progressTimer = null;
|
||
}
|
||
}, 30);
|
||
};
|
||
|
||
// 点击PK卡片打开链接（保留原有逻辑）
|
||
const handleClickPkCard = (item: DeductionPod) => {
|
||
if (item?.afsimHostIp && item?.afsimNodePort6901) {
|
||
let url = `${item.afsimHostIp}:${item.afsimNodePort6901}`;
|
||
if(!url.startsWith('http://') && !url.startsWith('https://')) {
|
||
url = 'https://' + url;
|
||
}
|
||
const newWindow = window.open(url);
|
||
if (!newWindow) {
|
||
message.warning('窗口打开失败，请检查浏览器弹窗设置');
|
||
}
|
||
} else {
|
||
message.warning('缺少IP或端口信息，无法打开链接');
|
||
}
|
||
};
|
||
|
||
const refresh = () => {
|
||
if (deductionPods.value) {
|
||
deductionPods.value.forEach(podItem => {
|
||
console.info('refresh', podItem);
|
||
randomUpdateProgress(podItem);
|
||
});
|
||
}
|
||
};
|
||
|
||
// 加载数据方法（核心修改：确保每个pod初始化后立即启动进度更新）
|
||
const loadData = () => {
|
||
findDeductionPodResult().then(r => {
|
||
let rows: DeductionPod[] = Object.values(r.data ?? []) as DeductionPod[];
|
||
const newPods: any[] = [];
|
||
|
||
rows.forEach(row=> {
|
||
let metricsParsed: DeductionPodMetrics | null = null;
|
||
try {
|
||
const metricsStr = row?.metrics?.toString() ?? '';
|
||
metricsParsed = metricsStr ? JSON.parse(metricsStr) as DeductionPodMetrics : null;
|
||
} catch (e: any) {
|
||
console.warn('解析 metrics 失败:', e);
|
||
}
|
||
|
||
// 初始化进度相关参数：默认不暂停，进度从0开始
|
||
const podItem = {
|
||
...row,
|
||
metricsParsed,
|
||
fake: false,
|
||
stopped: false, // 默认不暂停，页面加载后直接运行
|
||
targetPercent: parseNumberPercent(row.currentRound, row.totalRound), // 初始目标进度
|
||
animatePercent: 0, // 初始动画进度
|
||
progressTimer: null, // 动画定时器
|
||
updateTimer: null, // 进度更新定时器
|
||
statusName: null,
|
||
termStatusPopoverVisible: false,
|
||
};
|
||
newPods.push(podItem);
|
||
})
|
||
|
||
// setTimeout(() => refresh(), 1000);
|
||
deductionPods.value = newPods;
|
||
console.log('最终 deductionPods 数据:', deductionPods.value);
|
||
});
|
||
};
|
||
|
||
// 心跳方法（加载数据）
|
||
const heartbeat = () => {
|
||
loadData();
|
||
};
|
||
|
||
// 增加红蓝方计数器
|
||
const add = (side: string)=> {
|
||
if('blue' === side){
|
||
blueCounter.value ++;
|
||
} else {
|
||
redCounter.value ++;
|
||
}
|
||
};
|
||
|
||
// 减少红蓝方计数器
|
||
const minus = (side: string)=> {
|
||
if('blue' === side){
|
||
blueCounter.value = Math.max(1, blueCounter.value - 1);
|
||
blueNames.value = blueNames.value.splice(blueNames.value.length-1,1);
|
||
} else {
|
||
redCounter.value = Math.max(1, redCounter.value - 1);
|
||
redNames.value = redNames.value.splice(redNames.value.length-1,1);
|
||
}
|
||
};
|
||
|
||
// 开始对抗
|
||
const startLoop = () => {
|
||
modelDeduction.value.redNames = redNames.value.filter(v=> v).join(',')
|
||
modelDeduction.value.blueNames = blueNames.value.filter(v=> v).join(',')
|
||
createModelDeduction(modelDeduction.value).then(res => {
|
||
if (res.code === 200) {
|
||
message.success('对抗已开始');
|
||
|
||
if (heartbeatTimer.value) {
|
||
clearInterval(heartbeatTimer.value);
|
||
}
|
||
|
||
heartbeat();
|
||
|
||
heartbeatTimer.value = setInterval(() => {
|
||
heartbeat();
|
||
}, 10000);
|
||
|
||
} else if (res.msg) {
|
||
message.error(res.msg);
|
||
}
|
||
}).catch(err => {
|
||
console.error('提交配置失败:', err);
|
||
message.error('提交配置失败，请重试');
|
||
});
|
||
};
|
||
|
||
// 组件挂载时加载初始数据（页面加载完成后自动执行，触发进度模拟）
|
||
onMounted(() => {
|
||
// 页面挂载后立即加载数据，数据加载完成后自动启动所有Pods的进度更新
|
||
loadData();
|
||
});
|
||
|
||
heartbeatTimer.value = setInterval(() => {
|
||
loadData();
|
||
}, 3000);
|
||
|
||
|
||
// 组件卸载时清除所有定时器（防止内存泄漏，增强版）
|
||
onUnmounted(() => {
|
||
// 清除心跳定时器
|
||
if (heartbeatTimer.value) {
|
||
clearInterval(heartbeatTimer.value);
|
||
}
|
||
|
||
// 清除所有pod的定时器
|
||
// deductionPods.value.forEach(pod => {
|
||
// if (pod.progressTimer) clearInterval(pod.progressTimer);
|
||
// if (pod.updateTimer) clearTimeout(pod.updateTimer);
|
||
// });
|
||
|
||
// 清空pods数据，避免残留
|
||
deductionPods.value = [];
|
||
});
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.bg-wrapper .ant-card {
|
||
&.ks-apps-card{
|
||
&.ks-top-apps-card {
|
||
margin-bottom:15px!important;
|
||
&> .ant-card-body{
|
||
height: 35vh;
|
||
overflow: hidden;
|
||
.ant-form-item{
|
||
margin-bottom:15px;
|
||
}
|
||
}
|
||
}
|
||
&.ks-bottom-apps-card{
|
||
margin-bottom:0px!important;
|
||
&> .ant-card-body{
|
||
height: 32vh;
|
||
overflow: auto;
|
||
.ant-form-item{
|
||
margin-bottom:15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.ks-pk-apps-card{
|
||
&> .ant-card-body{
|
||
height: 74vh;
|
||
}
|
||
}
|
||
.counter-wrapper{
|
||
border: 1px solid #475f71;
|
||
padding: 15px;
|
||
border-radius: 2px;
|
||
.counter-wrapper-item{
|
||
margin-bottom:15px;
|
||
text-align: left;
|
||
.anticon{
|
||
color:#a2b1ba;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
display: block;
|
||
}
|
||
&:last-child{
|
||
margin-bottom:0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 进度条动画样式优化（增强平滑度）
|
||
.ant-progress-inner {
|
||
transition: width 0.05s ease-in-out;
|
||
}
|
||
|
||
.ant-progress-bg {
|
||
transition: width 0.05s ease-in-out;
|
||
}
|
||
|
||
</style> |