|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container row-container"> |
|
|
|
<div class="container-wrap"> |
|
|
|
<div class="container-wrap" style="height: calc(100vh - 200px);"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<el-form ref="form" :rules="rules" :model="form" size="small" label-width="120px"> |
|
|
|
@ -55,7 +55,21 @@ |
|
|
|
<el-dialog class="tip-dialog tip-middle-dialog" title="AI处理终端连接测试" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="serviceContentDialogVisible" :before-close="handleClose"> |
|
|
|
<div class="setting-dialog service-all"> |
|
|
|
<div class="service-top-text"><i class="iconfont icon-zhongduanjiankong" />终端连接正常</div> |
|
|
|
<!-- <ul> |
|
|
|
<li v-for="(item, index) in serviceItems" :key="index" :style="{animationDelay: index * 300 + 'ms'}"> |
|
|
|
<p :class="item.status === 'running'? 'true-active' : 'false-active' ">{{ item.serviceName }}</p> |
|
|
|
<i v-if="item.status === 'running'" class="iconfont icon-shi" /> |
|
|
|
<i v-else class="iconfont icon-cuowu1" /> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in serviceItems" :key="index"> |
|
|
|
<p :class="index <= currentIndex && item.status === 'running'? 'true-active' : 'false-active' ">{{ item.serviceName }}</p> |
|
|
|
<i v-if="index <= currentIndex && item.status === 'running'" class="iconfont icon-shi" /> |
|
|
|
<i v-else-if="index <= currentIndex" class="iconfont icon-cuowu1" /> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<!-- <ul> |
|
|
|
<li> |
|
|
|
<p :class="service.service_imgCamera.status === 'running' ? 'true-active' : 'false-active' ">图像采集</p> |
|
|
|
<i v-if="service.service_imgCamera.status === 'running'" class="iconfont icon-shi" /> |
|
|
|
@ -81,9 +95,9 @@ |
|
|
|
<i v-if="service.service_imgResult.status === 'running'" class="iconfont icon-shi" /> |
|
|
|
<i v-else class="iconfont icon-cuowu1" /> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<div v-if="isAllServicesRunning" class="service-bottom-text" style="color: rgb(18, 196, 122);">所有服务均正常运行，请放心使用</div> |
|
|
|
<div v-else class="service-bottom-text" style="color: #ED4A41;">请尽快联系系统维护人员进行恢复</div> |
|
|
|
</ul> --> |
|
|
|
<div v-if="servicesDisplayed && isAllServicesRunning" class="service-bottom-text" :class="{ 'fade-in': servicesDisplayed && isAllServicesRunning }" style="color: rgb(18, 196, 122);">所有服务均正常运行，请放心使用</div> |
|
|
|
<div v-else-if="servicesDisplayed && !isAllServicesRunning" class="service-bottom-text" :class="{ 'fade-in': servicesDisplayed &&!isAllServicesRunning }" style="color: #ED4A41;">请尽快联系系统维护人员进行恢复</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
@ -151,7 +165,11 @@ export default { |
|
|
|
'service_imgYolo': { 'last_heartbeat': 1736496961.953832, 'status': '' }, |
|
|
|
'service_imgOcr': { 'last_heartbeat': 1736496961.6238313, 'status': '' }, |
|
|
|
'service_imgResult': { 'last_heartbeat': 1736496963.4378026, 'status': '' } |
|
|
|
} |
|
|
|
}, |
|
|
|
serviceItems: [], |
|
|
|
currentIndex: -1, |
|
|
|
timer: null, |
|
|
|
servicesDisplayed: false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -170,8 +188,14 @@ export default { |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.timer) { |
|
|
|
clearInterval(this.timer) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleService() { |
|
|
|
this.servicesDisplayed = false |
|
|
|
FetchAITerminalStatusQuery({ 'ip': this.crud.form.ip }).then(res => { |
|
|
|
// { |
|
|
|
// "service_imgCamera":{"last_heartbeat":1736496962.2368362,"status":"running"}, |
|
|
|
@ -181,14 +205,65 @@ export default { |
|
|
|
// "service_imgResult":{"last_heartbeat":1736496963.4378026,"status":"running"}, |
|
|
|
// } |
|
|
|
if (res) { |
|
|
|
this.service = JSON.parse(res) |
|
|
|
this.serviceContentDialogVisible = true |
|
|
|
this.service = JSON.parse(res) |
|
|
|
this.serviceItems = [] |
|
|
|
const keysOrder = ['service_imgCamera', 'service_imgProcess', 'service_imgYolo', 'service_imgOcr', 'service_imgResult'] |
|
|
|
keysOrder.forEach(key => { |
|
|
|
let serviceName = '' |
|
|
|
switch (key) { |
|
|
|
case 'service_imgCamera': |
|
|
|
serviceName = '图像采集' |
|
|
|
break |
|
|
|
case 'service_imgProcess': |
|
|
|
serviceName = '图像处理' |
|
|
|
break |
|
|
|
case 'service_imgYolo': |
|
|
|
serviceName = '图像识别' |
|
|
|
break |
|
|
|
case 'service_imgOcr': |
|
|
|
serviceName = '文字识别' |
|
|
|
break |
|
|
|
case 'service_imgResult': |
|
|
|
serviceName = '同步服务' |
|
|
|
break |
|
|
|
} |
|
|
|
this.serviceItems.push({ |
|
|
|
serviceName: serviceName, |
|
|
|
status: this.service[key].status |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.showServicesSequentially() |
|
|
|
} else { |
|
|
|
this.serviceDialogVisible = true |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
showServicesSequentially() { |
|
|
|
// let delay = 0 |
|
|
|
// this.serviceItems.forEach((item, index) => { |
|
|
|
// setTimeout(() => { |
|
|
|
// this.$set(this.serviceItems, index, { |
|
|
|
// ...item, |
|
|
|
// opacity: 1 |
|
|
|
// }) |
|
|
|
// }, delay) |
|
|
|
// delay += 300 |
|
|
|
// }) |
|
|
|
let index = 0 |
|
|
|
const interval = 300 |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.currentIndex = index |
|
|
|
index++ |
|
|
|
if (index >= this.serviceItems.length) { |
|
|
|
clearInterval(this.timer) |
|
|
|
setTimeout(() => { |
|
|
|
this.servicesDisplayed = true |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
}, interval) |
|
|
|
}, |
|
|
|
[CRUD.HOOK.beforeToCU](crud, form, btn) { |
|
|
|
if (this.showVerifyDialog) { |
|
|
|
// 打开输入验证码对话框 |
|
|
|
@ -351,4 +426,27 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.fade-enter-active, |
|
|
|
.fade-leave-active { |
|
|
|
transition: all 0.5s ease; |
|
|
|
} |
|
|
|
.fade-enter, |
|
|
|
.fade-leave-to { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(20px); |
|
|
|
} |
|
|
|
.fade-in { |
|
|
|
animation: fadeIn 0.5s ease; |
|
|
|
} |
|
|
|
@keyframes fadeIn { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(20px); |
|
|
|
} |
|
|
|
to { |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
