补充观看教学视频路由跳转功能,检测页面微调

This commit is contained in:
caozehui
2026-05-29 10:39:12 +08:00
parent ee08263e4a
commit c05d329614
6 changed files with 94 additions and 34 deletions

View File

@@ -1,24 +1,35 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/routers'
import type { DetectionLockHolder } from '@/stores/modules/detectionLock'
import mittBus, { STOP_DETECTION_TIMER_EVENT } from '@/utils/mittBus'
const stopDetectionTimer = () => {
mittBus.emit(STOP_DETECTION_TIMER_EVENT)
}
const goResourceManage = async () => {
if (router.hasRoute('resourceManage')) {
await router.push({ name: 'resourceManage' })
return
}
await router.push('/resourceManage')
}
/**
* S1:他人正在做检测,自己抢锁被挡
* S1: 他人正在做检测, 自己抢锁被挡
*/
export const showLockBusyDialog = (holder: DetectionLockHolder) => {
ElMessageBox.confirm(
`${holder.holderUserName}」正在做检测,请稍后。`,
'检测进行中',
{
confirmButtonText: '观看检测视频教学',
cancelButtonText: '我知道了',
type: 'warning',
distinguishCancelAndClose: true,
customClass: 'detection-lock-busy-dialog'
}
)
stopDetectionTimer()
ElMessageBox.confirm(`${holder.holderUserName}」正在做检测,请稍后。`, '检测进行中', {
confirmButtonText: '观看检测视频教学',
cancelButtonText: '我知道了',
type: 'warning',
distinguishCancelAndClose: true,
customClass: 'detection-lock-busy-dialog'
})
.then(() => {
// 视频教学跳转 URL 暂未配置,先用 Toast 兜底
ElMessage.info('视频教学功能开发中,敬请期待')
return goResourceManage()
})
.catch(() => {
// 用户点了"我知道了"或关闭,什么都不做
@@ -26,16 +37,18 @@ export const showLockBusyDialog = (holder: DetectionLockHolder) => {
}
/**
* S2:未开始检测就调中间接口
* S2: 未开始检测就调中间接口
*/
export const showLockNotStartedToast = () => {
ElMessage.warning('请先点击"开始检测"按钮启动本轮检测')
}
/**
* S3:自己暂停超 10 分钟,被 WS 推 STOP_TIMEOUT 强制结束
* S3: 自己暂停超 10 分钟, 被 WS 推 STOP_TIMEOUT 强制结束
*/
export const showPauseTimeoutDialog = () => {
stopDetectionTimer()
ElMessageBox.alert('暂停超过 10 分钟未恢复,系统已自动结束本次检测。\n\n如需继续,请重新发起检测。', '本次检测已结束', {
confirmButtonText: '我知道了',
type: 'warning'
@@ -43,24 +56,22 @@ export const showPauseTimeoutDialog = () => {
}
/**
* S4:被管理员强制释放
* - holder 为 null 强释后无人接手
* - holder 非 null 强释后被别人立刻抢占
* S4: 被管理员强制释放
* - holder 为 null: 强释后无人接手
* - holder 非 null: 强释后被别人立刻抢占
*/
export const showForceReleasedDialog = (holder: DetectionLockHolder | null) => {
stopDetectionTimer()
if (holder) {
ElMessageBox.confirm(
`当前「${holder.holderUserName}」正在做检测,您无法继续检测,请稍后。`,
'检测已被中止',
{
confirmButtonText: '观看检测视频教学',
cancelButtonText: '我知道了',
type: 'warning',
distinguishCancelAndClose: true
}
)
ElMessageBox.confirm(`当前「${holder.holderUserName}」正在做检测,您无法继续检测,请稍后。`, '检测已被中止', {
confirmButtonText: '观看检测视频教学',
cancelButtonText: '我知道了',
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
ElMessage.info('视频教学功能开发中,敬请期待')
return goResourceManage()
})
.catch(() => {})
} else {

View File

@@ -1,4 +1,11 @@
import mitt from "mitt";
const mittBus = mitt();
export const STOP_DETECTION_TIMER_EVENT = "stopDetectionTimer";
type MittBusEvents = {
openThemeDrawer: undefined;
[STOP_DETECTION_TIMER_EVENT]: undefined;
};
const mittBus = mitt<MittBusEvents>();
export default mittBus;

View File

@@ -122,7 +122,8 @@
<script lang="tsx" setup name="test">
import {InfoFilled, Loading} from '@element-plus/icons-vue'
import CompareDataCheckSingleChannelSingleTestPopup from './compareDataCheckSingleChannelSingleTestPopup.vue'
import {computed, ComputedRef, nextTick, onBeforeMount, onMounted, reactive, ref, toRef, watch} from 'vue'
import {computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRef, watch} from 'vue'
import type { ComputedRef } from 'vue'
import {dialogBig} from '@/utils/elementBind'
import {CheckData} from '@/api/check/interface'
import {useCheckStore} from '@/stores/modules/check'
@@ -132,6 +133,7 @@ import {getAutoGenerate, getCanCoefficient, startCoefficient} from '@/api/user/l
import { generateDevReport } from '@/api/plan/plan'
import {useModeStore} from '@/stores/modules/mode' // 引入模式 store
import {useDictStore} from '@/stores/modules/dict'
import mittBus, { STOP_DETECTION_TIMER_EVENT } from '@/utils/mittBus'
const checkStore = useCheckStore()
const modeStore = useModeStore()
const dictStore = useDictStore()
@@ -740,6 +742,10 @@ const stopTimeCount = (type: number) => {
}
}
const handleStopDetectionTimer = () => {
stopTimeCount(1)
}
// 将秒数转换为 HH:MM:SS 格式
const secondToTime = (second: number) => {
let h: string | number = Math.floor(second / 3600) // 小时
@@ -898,6 +904,7 @@ const initializeParameters = async () => {
//
onMounted(() => {
mittBus.on(STOP_DETECTION_TIMER_EVENT, handleStopDetectionTimer)
if (!checkStore.selectTestItems.preTest) {
// 判断是否预检测
@@ -905,6 +912,10 @@ onMounted(() => {
}
})
onBeforeUnmount(() => {
mittBus.off(STOP_DETECTION_TIMER_EVENT, handleStopDetectionTimer)
})
defineExpose({
initializeParameters,
handlePause,

View File

@@ -148,6 +148,7 @@ import { useCheckStore } from '@/stores/modules/check'
import { contrastTest, pauseTest, resumeTest, startPreTest } from '@/api/socket/socket'
import { useUserStore } from '@/stores/modules/user'
import { JwtUtil } from '@/utils/jwtUtil'
import mittBus, { STOP_DETECTION_TIMER_EVENT } from '@/utils/mittBus'
const userStore = useUserStore()
const checkStore = useCheckStore()
@@ -165,6 +166,14 @@ const preTestStatus = ref('waiting') //预检测执行状态
const TestStatus = ref('waiting') //正式检测执行状态
const webMsgSend = ref() //webSocket推送的数据
const hideInitializingButton = () => {
if (TestStatus.value === 'test_init') {
TestStatus.value = 'waiting'
}
}
mittBus.on(STOP_DETECTION_TIMER_EVENT, hideInitializingButton)
const dialogTitle = ref('')
const showComponent = ref(true)
const preTestRef = ref<InstanceType<typeof ComparePreTest> | null>(null)
@@ -187,6 +196,7 @@ onMounted(() => {
})
onUnmounted(() => {
mittBus.off(STOP_DETECTION_TIMER_EVENT, hideInitializingButton)
window.removeEventListener('resize', handleResize)
})

View File

@@ -105,7 +105,7 @@ import { InfoFilled, Loading } from '@element-plus/icons-vue'
// 单通道单测试项详情弹窗组件
import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
// Vue 3 Composition API
import { computed, reactive, ref, toRef, watch } from 'vue'
import { computed, onBeforeUnmount, onMounted, reactive, ref, toRef, watch } from 'vue'
// 对话框大小绑定工具
import { dialogBig } from '@/utils/elementBind'
// 检测数据类型定义
@@ -120,6 +120,7 @@ import { getAutoGenerate } from '@/api/user/login'
import { generateDevReport } from '@/api/plan/plan'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict'
import mittBus, { STOP_DETECTION_TIMER_EVENT } from '@/utils/mittBus'
// 获取检测状态管理实例
const checkStore = useCheckStore()
@@ -1176,6 +1177,10 @@ const stopTimeCount = () => {
}
}
const handleStopDetectionTimer = () => {
stopTimeCount()
}
// 恢复计时(用于暂停后继续)
const resumeTimeCount = () => {
@@ -1199,8 +1204,14 @@ const secondToTime = (second: number) => {
return h + ':' + m + ':' + s
}
onMounted(() => {
mittBus.on(STOP_DETECTION_TIMER_EVENT, handleStopDetectionTimer)
})
// 组件卸载前清理定时器和响应式引用
onBeforeUnmount(() => {
mittBus.off(STOP_DETECTION_TIMER_EVENT, handleStopDetectionTimer)
// 清理定时器
if (timer) {
clearInterval(timer)

View File

@@ -172,6 +172,7 @@ import { useCheckStore } from '@/stores/modules/check'
import { pauseTest, resumeTest, startPreTest } from '@/api/socket/socket'
import { useUserStore } from '@/stores/modules/user'
import { JwtUtil } from '@/utils/jwtUtil'
import mittBus, { STOP_DETECTION_TIMER_EVENT } from '@/utils/mittBus'
// ====================== 状态管理 ======================
const userStore = useUserStore()
@@ -200,6 +201,14 @@ const channelsTestStatus = ref('waiting') // 通道系数校准执行状态
const TestStatus = ref('waiting') // 正式检测执行状态
const webMsgSend = ref() // webSocket推送的数据用于组件间通信
const hideInitializingButton = () => {
if (TestStatus.value === 'test_init') {
TestStatus.value = 'waiting'
}
}
mittBus.on(STOP_DETECTION_TIMER_EVENT, hideInitializingButton)
// ====================== WebSocket 相关 ======================
const dataSocket = reactive<{
socketServe: typeof socketClient.Instance | null
@@ -705,6 +714,7 @@ const handleClose = () => {
* 确保路由切换或组件销毁时正确关闭WebSocket连接
*/
onBeforeUnmount(() => {
mittBus.off(STOP_DETECTION_TIMER_EVENT, hideInitializingButton)
closeWebSocket() // 组件销毁前关闭WebSocket连接
})
@@ -767,4 +777,4 @@ defineExpose({ open }) // 只暴露open方法供父组件调用
transform: rotate(360deg);
}
}
</style>
</style>