|
|
@ -37,17 +37,13 @@ const getClassByType = (type: string) => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div v-if="appEvents.length" class="reconnect-modal-overlay"> |
|
|
|
<div v-if="appEvents?.length" class="reconnect-modal-overlay"> |
|
|
|
<div class="reconnect-modal-container"> |
|
|
|
<h2 class="reconnect-title"> |
|
|
|
错误信息: |
|
|
|
</h2> |
|
|
|
<ul class="recipe-list"> |
|
|
|
<li |
|
|
|
v-for="(item, index) in appEvents" |
|
|
|
:key="index" |
|
|
|
:class="getClassByType(item.type)" |
|
|
|
> |
|
|
|
<li v-for="(item, index) in appEvents" :key="index" :class="getClassByType(item.type)"> |
|
|
|
<span v-if="item.type === 'AppCheckPointCheckFailEvent'"> |
|
|
|
<span v-for="checkItem in item.errCheckPoints" :key="checkItem.ecode"> |
|
|
|
{{ checkItem.ecodeInfo }} |
|
|
@ -76,7 +72,7 @@ const getClassByType = (type: string) => { |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 5px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #E6A23C; |
|
|
|
border: 1px solid #e6a23c; |
|
|
|
} |
|
|
|
.list-info { |
|
|
|
padding: 10px; |
|
|
@ -84,136 +80,147 @@ const getClassByType = (type: string) => { |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #909399; |
|
|
|
} |
|
|
|
.list-err { |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 5px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #F56C6C; |
|
|
|
} |
|
|
|
.list-info { |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 5px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #f0f9eb; |
|
|
|
} |
|
|
|
.reconnect-modal-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
backdrop-filter: blur(4px); |
|
|
|
.list-err { |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 5px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #f56c6c; |
|
|
|
} |
|
|
|
.list-info { |
|
|
|
padding: 10px; |
|
|
|
margin-bottom: 5px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #f0f9eb; |
|
|
|
} |
|
|
|
.reconnect-modal-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
backdrop-filter: blur(4px); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
|
|
|
|
.reconnect-modal-container { |
|
|
|
background-color: white; |
|
|
|
border-radius: 12px; |
|
|
|
padding: 40px; |
|
|
|
width: 40vw; |
|
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
|
text-align: center; |
|
|
|
animation: fadeIn 0.3s ease-out; |
|
|
|
.recipe-list { |
|
|
|
list-style: none; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.recipe-list li { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 9999; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
margin-bottom: 8px; |
|
|
|
transition: all 0.2s; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.reconnect-modal-container { |
|
|
|
background-color: white; |
|
|
|
border-radius: 12px; |
|
|
|
padding: 40px; |
|
|
|
width: 40vw; |
|
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
|
text-align: center; |
|
|
|
animation: fadeIn 0.3s ease-out; |
|
|
|
.recipe-list { |
|
|
|
list-style: none; |
|
|
|
padding: 0; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.recipe-list li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
margin-bottom: 8px; |
|
|
|
transition: all 0.2s; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.recipe-list li:hover { |
|
|
|
background-color: #f5f7fa; |
|
|
|
} |
|
|
|
|
|
|
|
.recipe-list li.selected { |
|
|
|
background-color: #e6f7ff; |
|
|
|
/* border: 1px solid #1890ff; */ |
|
|
|
/* padding: 9px; */ |
|
|
|
} |
|
|
|
.recipe-list li:hover { |
|
|
|
background-color: #f5f7fa; |
|
|
|
} |
|
|
|
|
|
|
|
.reconnect-spinner { |
|
|
|
width: 64px; |
|
|
|
height: 64px; |
|
|
|
border: 6px solid #f3f3f3; |
|
|
|
border-radius: 50%; |
|
|
|
border-top: 6px solid #3b82f6; |
|
|
|
margin: 0 auto 24px; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
.recipe-list li.selected { |
|
|
|
background-color: #e6f7ff; |
|
|
|
/* border: 1px solid #1890ff; */ |
|
|
|
/* padding: 9px; */ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.reconnect-title { |
|
|
|
font-size: 1.12rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #1f2937; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
.reconnect-spinner { |
|
|
|
width: 64px; |
|
|
|
height: 64px; |
|
|
|
border: 6px solid #f3f3f3; |
|
|
|
border-radius: 50%; |
|
|
|
border-top: 6px solid #3b82f6; |
|
|
|
margin: 0 auto 24px; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.reconnect-message { |
|
|
|
font-size: 16px; |
|
|
|
color: #4b5563; |
|
|
|
} |
|
|
|
.reconnect-title { |
|
|
|
font-size: 1.12rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #1f2937; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.actions { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.reconnect-message { |
|
|
|
font-size: 16px; |
|
|
|
color: #4b5563; |
|
|
|
} |
|
|
|
|
|
|
|
.view-button, .delete-button { |
|
|
|
border: none; |
|
|
|
padding: 4px 8px; |
|
|
|
border-radius: 3px; |
|
|
|
cursor: pointer; |
|
|
|
margin-right: 5px; |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
.actions { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.view-button { |
|
|
|
background-color: #e6f7ff; |
|
|
|
color: #1890ff; |
|
|
|
} |
|
|
|
.view-button, |
|
|
|
.delete-button { |
|
|
|
border: none; |
|
|
|
padding: 4px 8px; |
|
|
|
border-radius: 3px; |
|
|
|
cursor: pointer; |
|
|
|
margin-right: 5px; |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
.view-button:hover { |
|
|
|
background-color: #1890ff; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.view-button { |
|
|
|
background-color: #e6f7ff; |
|
|
|
color: #1890ff; |
|
|
|
} |
|
|
|
|
|
|
|
.delete-button { |
|
|
|
background-color: #ffe6e6; |
|
|
|
color: #ff4d4f; |
|
|
|
} |
|
|
|
.view-button:hover { |
|
|
|
background-color: #1890ff; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.delete-button:hover { |
|
|
|
background-color: #ff4d4f; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.delete-button { |
|
|
|
background-color: #ffe6e6; |
|
|
|
color: #ff4d4f; |
|
|
|
} |
|
|
|
|
|
|
|
.selected-icon { |
|
|
|
color: #1890ff; |
|
|
|
/* margin-left: 8px; */ |
|
|
|
} |
|
|
|
.delete-button:hover { |
|
|
|
background-color: #ff4d4f; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
0% { transform: rotate(0deg); } |
|
|
|
100% { transform: rotate(360deg); } |
|
|
|
.selected-icon { |
|
|
|
color: #1890ff; |
|
|
|
/* margin-left: 8px; */ |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
from { opacity: 0; transform: scale(0.95); } |
|
|
|
to { opacity: 1; transform: scale(1); } |
|
|
|
@keyframes fadeIn { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
to { |
|
|
|
opacity: 1; |
|
|
|
transform: scale(1); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |