mirror of
https://github.com/nsnail/NetAdmin.git
synced 2025-04-20 05:02:50 +08:00
refactor: ♻️ 前端体验优化
[skip ci]
This commit is contained in:
nsnail
parent
442a69f90d
commit
b1678e2537
@ -92,8 +92,8 @@ export default {
|
||||
// 设置语言
|
||||
this.$i18n.locale = this.$TOOL.data.get('APP_SET_LANG') || this.$CONFIG.APP_SET_LANG
|
||||
|
||||
//ctrl + enter 触发主按钮点击事件
|
||||
document.onkeydown = (e) => {
|
||||
//ctrl + enter 触发主按钮点击事件
|
||||
if (e.ctrlKey && e.keyCode === 13) {
|
||||
document
|
||||
.getElementsByClassName('el-dialog__footer')[0]
|
||||
@ -118,8 +118,22 @@ export default {
|
||||
break
|
||||
}
|
||||
}
|
||||
} else if (e.altKey && e.keyCode === 81) {
|
||||
UseTabs.close()
|
||||
} else if (e.altKey) {
|
||||
if (e.keyCode === 81) {
|
||||
if (e.ctrlKey) {
|
||||
UseTabs.closeOther()
|
||||
} else {
|
||||
UseTabs.close()
|
||||
}
|
||||
} else if (e.keyCode === 65) {
|
||||
document.getElementsByClassName('userbar-btn-search')[0]?.dispatchEvent(
|
||||
new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: false,
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import colorTool from '@/utils/color'
|
||||
|
||||
export default {
|
||||
build() {
|
||||
async build() {
|
||||
const style = getComputedStyle(document.documentElement)
|
||||
const el_color_primary = style.getPropertyValue('--el-color-primary')
|
||||
let el_color_primary
|
||||
while ((el_color_primary = style.getPropertyValue('--el-color-primary')) === 'rgba(0, 0, 0, 0)') {
|
||||
await new Promise((x) => setTimeout(x, 100))
|
||||
}
|
||||
const el_color_info = style.getPropertyValue('--el-color-info')
|
||||
const el_text_color_primary = style.getPropertyValue('--el-text-color-primary')
|
||||
const el_border_color_lighter = style.getPropertyValue('--el-border-color-lighter')
|
||||
|
||||
return {
|
||||
color: [el_color_primary, colorTool.lighten(el_color_primary, 0.5), ...colorTool.colorSets],
|
||||
grid: {
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
option: {
|
||||
deep: true,
|
||||
handler(v) {
|
||||
unwarp(this.myChart).setOption(v, { notMerge: true })
|
||||
unwarp(this.myChart)?.setOption(v, { notMerge: true })
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -48,12 +48,11 @@ export default {
|
||||
deactivated() {
|
||||
this.isActivat = false
|
||||
},
|
||||
mounted() {
|
||||
async mounted() {
|
||||
this.isActivat = true
|
||||
this.$nextTick(() => {
|
||||
echarts.registerTheme('T', T.build())
|
||||
this.draw()
|
||||
})
|
||||
await this.$nextTick()
|
||||
echarts.registerTheme('T', await T.build())
|
||||
this.draw()
|
||||
},
|
||||
methods: {
|
||||
draw() {
|
||||
|
||||
@ -1,64 +1,5 @@
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
const Time = {
|
||||
//获取当前时间戳
|
||||
getUnix: function () {
|
||||
const date = new Date()
|
||||
return date.getTime()
|
||||
},
|
||||
//获取今天0点0分0秒的时间戳
|
||||
getTodayUnix: function () {
|
||||
const date = new Date()
|
||||
date.setHours(0)
|
||||
date.setMinutes(0)
|
||||
date.setSeconds(0)
|
||||
date.setMilliseconds(0)
|
||||
return date.getTime()
|
||||
},
|
||||
//获取今年1月1日0点0秒的时间戳
|
||||
getYearUnix: function () {
|
||||
const date = new Date()
|
||||
date.setMonth(0)
|
||||
date.setDate(1)
|
||||
date.setHours(0)
|
||||
date.setMinutes(0)
|
||||
date.setSeconds(0)
|
||||
date.setMilliseconds(0)
|
||||
return date.getTime()
|
||||
},
|
||||
//获取标准年月日
|
||||
getLastDate: function (time) {
|
||||
const date = new Date(time)
|
||||
const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
|
||||
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||||
return date.getFullYear() + '-' + month + '-' + day
|
||||
},
|
||||
//转换时间
|
||||
getFormatTime: function (timestamp) {
|
||||
timestamp = new Date(timestamp)
|
||||
const now = this.getUnix()
|
||||
const today = this.getTodayUnix()
|
||||
//var year = this.getYearUnix();
|
||||
const timer = (now - timestamp) / 1000
|
||||
let tip
|
||||
|
||||
if (timer <= 0) {
|
||||
tip = '刚刚'
|
||||
} else if (Math.floor(timer / 60) <= 0) {
|
||||
tip = '刚刚'
|
||||
} else if (timer < 3600) {
|
||||
tip = Math.floor(timer / 60) + '分钟前'
|
||||
} else if (timer >= 3600 && (timestamp - today >= 0 || Math.floor(timer / 86400) <= 0)) {
|
||||
tip = Math.floor(timer / 3600) + '小时前'
|
||||
} else if (timer / 86400 <= 31) {
|
||||
tip = Math.floor(timer / 86400) + '天前'
|
||||
} else {
|
||||
tip = this.getLastDate(timestamp)
|
||||
}
|
||||
return tip
|
||||
},
|
||||
}
|
||||
|
||||
export default (el, binding) => {
|
||||
let { value, modifiers } = binding
|
||||
if (!value) {
|
||||
@ -68,9 +9,9 @@ export default (el, binding) => {
|
||||
value = value * 1000
|
||||
}
|
||||
if (modifiers.tip) {
|
||||
el.innerHTML = Time.getFormatTime(value)
|
||||
el.innerHTML = tool.time.getFormatTime(value)
|
||||
el.__timeout__ = setInterval(() => {
|
||||
el.innerHTML = Time.getFormatTime(value)
|
||||
el.innerHTML = tool.time.getFormatTime(value)
|
||||
}, 60000)
|
||||
} else {
|
||||
const format = el.getAttribute('format') || undefined
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
:placeholder="$t('搜索')"
|
||||
:trigger-on-focus="false"
|
||||
@input="inputChange"
|
||||
@keydown="inputKeyDown"
|
||||
autofocus
|
||||
clearable
|
||||
prefix-icon="el-icon-search"
|
||||
ref="input"
|
||||
@ -25,7 +27,11 @@
|
||||
<div v-if="result.length <= 0" class="sc-search-no-result">{{ $t('暂无搜索结果') }}</div>
|
||||
<ul v-else>
|
||||
<el-scrollbar max-height="30rem">
|
||||
<li v-for="item in result" :key="item.path" @click="to(item)">
|
||||
<li
|
||||
v-for="(item, i) in result"
|
||||
:class="{ 'sc-search-result-li-hover': this.cursor.index === i }"
|
||||
:key="item.path"
|
||||
@click="to(item)">
|
||||
<el-icon>
|
||||
<component :is="item.icon || 'el-icon-menu'" />
|
||||
</el-icon>
|
||||
@ -41,18 +47,55 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cursor: {
|
||||
position: 0,
|
||||
index: 0,
|
||||
},
|
||||
input: '',
|
||||
menu: [],
|
||||
result: [],
|
||||
history: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
watch: {
|
||||
result() {
|
||||
this.cursor.position = 0
|
||||
this.cursor.index = 0
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.history = this.$TOOL.data.get('SEARCH_HISTORY') || []
|
||||
this.filterMenu(this.$GLOBAL.menu)
|
||||
await this.$nextTick()
|
||||
await new Promise((x) => setTimeout(x, 200))
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
methods: {
|
||||
inputKeyDown(e) {
|
||||
if (e.keyCode === 13) {
|
||||
document
|
||||
.getElementsByClassName('sc-search-result')[0]
|
||||
?.getElementsByClassName('el-scrollbar__view')[0]
|
||||
?.children[this.cursor.index]?.dispatchEvent(
|
||||
new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: false,
|
||||
}),
|
||||
)
|
||||
return
|
||||
}
|
||||
if (e.keyCode === 40) {
|
||||
this.cursor.index = Math.abs(++this.cursor.position % this.result.length)
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
if (e.keyCode === 38) {
|
||||
this.cursor.index = Math.abs(--this.cursor.position % this.result.length)
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
},
|
||||
inputChange(value) {
|
||||
if (value) {
|
||||
this.result = this.menuFilter(value)
|
||||
@ -152,6 +195,9 @@ export default {
|
||||
}
|
||||
|
||||
.sc-search-history {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@ -182,9 +228,10 @@ export default {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.sc-search-result-li-hover,
|
||||
.sc-search-result li:hover {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
border-color: var(--el-color-primary);
|
||||
background: var(--el-color-primary) !important;
|
||||
color: var(--el-color-white) !important;
|
||||
border-color: var(--el-color-primary) !important;
|
||||
}
|
||||
</style>
|
||||
@ -10,6 +10,43 @@
|
||||
</p>
|
||||
</el-empty>
|
||||
<el-row :gutter="10">
|
||||
<el-col :lg="12">
|
||||
<el-empty v-if="!failJobs">
|
||||
<template #description>
|
||||
<p>{{ $TOOL.time.getFormatTime(new Date(failJobViewTime).getTime()) }}</p>
|
||||
<p>至今</p>
|
||||
<p>未发现新的异常作业</p>
|
||||
</template>
|
||||
</el-empty>
|
||||
<el-card v-else v-for="job in failJobs" :class="`user-bar-jobs-item alert`" :key="job.job.id" shadow="hover">
|
||||
<div class="user-bar-jobs-item-body">
|
||||
<div class="jobIcon">
|
||||
{{ job.httpStatusCode.toUpperCase().slice(0, 2) }}
|
||||
</div>
|
||||
<div class="jobMain">
|
||||
<div class="title">
|
||||
<h2>{{ job.job.jobName }}</h2>
|
||||
<p>{{ $t('出错时间：') }}<span v-time.tip="job.createdTime" :title="job.createdTime"></span></p>
|
||||
<p>
|
||||
执行耗时：<span>{{ $TOOL.groupSeparator(job.duration) }} ms</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="status failJobs">
|
||||
{{ job.responseBody }}
|
||||
</div>
|
||||
<div class="handler">
|
||||
<el-button
|
||||
@click="dialog.jobRecordSave = { mode: 'view', row: { id: job.id } }"
|
||||
circle
|
||||
icon="el-icon-view"
|
||||
type="danger"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card
|
||||
v-for="job in jobs"
|
||||
@ -47,49 +84,36 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-empty v-if="!failJobs" description="未发现新的异常作业"></el-empty>
|
||||
<el-card v-else v-for="job in failJobs" :class="`user-bar-jobs-item alert`" :key="job.job.id" shadow="hover">
|
||||
<div class="user-bar-jobs-item-body">
|
||||
<div class="jobIcon">
|
||||
{{ job.httpStatusCode.toUpperCase().slice(0, 2) }}
|
||||
</div>
|
||||
<div class="jobMain">
|
||||
<div class="title">
|
||||
<h2>{{ job.job.jobName }}</h2>
|
||||
<p>{{ $t('出错时间：') }}<span v-time.tip="job.createdTime" :title="job.createdTime"></span></p>
|
||||
<p>
|
||||
执行耗时：<span>{{ $TOOL.groupSeparator(job.duration) }} ms</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="status failJobs">
|
||||
{{ job.responseBody }}
|
||||
</div>
|
||||
<div class="handler">
|
||||
<el-button
|
||||
@click="dialog.jobRecordSave = { mode: 'view', row: { id: job.id } }"
|
||||
circle
|
||||
icon="el-icon-view"
|
||||
type="danger"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
<el-footer class="flex" style="justify-content: space-evenly; height: unset">
|
||||
<div>
|
||||
<el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
|
||||
<el-button @click="dialog.save = { tabId: 'all' }">{{ $t('作业管理') }}</el-button>
|
||||
<div v-if="failJobs">
|
||||
<el-badge :hidden="fail === 0" :value="`${$TOOL.time.getFormatTime(new Date(failJobViewTime).getTime())} 至今 ${fail}个`">
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
this.$router.push({ path: '/sys/job', query: { view: 'fail' } })
|
||||
this.$emit('closed')
|
||||
}
|
||||
"
|
||||
plain
|
||||
type="danger"
|
||||
>{{ $t('异常日志') }}</el-button
|
||||
>
|
||||
</el-badge>
|
||||
</div>
|
||||
<el-button @click="refresh" circle icon="el-icon-refresh"></el-button>
|
||||
<div v-if="failJobs">
|
||||
<el-badge :hidden="fail === 0" :value="fail">
|
||||
<el-button @click="dialog.save = { tabId: 'fail' }" plain type="danger">{{ $t('异常日志') }}</el-button>
|
||||
<div>
|
||||
<el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
this.$router.push({ path: '/sys/job' })
|
||||
this.$emit('closed')
|
||||
}
|
||||
"
|
||||
>{{ $t('作业管理') }}</el-button
|
||||
>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-footer>
|
||||
@ -105,7 +129,6 @@
|
||||
@closed="dialog.jobRecordSave = null"
|
||||
@mounted="$refs.jobRecordSaveDialog.open(dialog.jobRecordSave)"
|
||||
ref="jobRecordSaveDialog"></jobRecordSaveDialog>
|
||||
<saveDialog v-if="dialog.save" @closed="dialog.save = null" @mounted="$refs.saveDialog.open(dialog.save)" ref="saveDialog"></saveDialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -113,12 +136,16 @@ import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const jobSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/all/save.vue'))
|
||||
const jobRecordSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/record/save.vue'))
|
||||
const saveDialog = defineAsyncComponent(() => import('./save.vue'))
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
failJobViewTime() {
|
||||
return this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd')
|
||||
},
|
||||
},
|
||||
components: {
|
||||
jobSaveDialog,
|
||||
jobRecordSaveDialog,
|
||||
saveDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -175,7 +202,7 @@ export default {
|
||||
],
|
||||
field: 'createdTime',
|
||||
operator: 'greaterThan',
|
||||
value: this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
value: this.failJobViewTime,
|
||||
},
|
||||
}),
|
||||
])
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<sc-dialog v-model="visible" :title="$t('作业中心')" @closed="$emit('closed')" append-to-body destroy-on-close full-screen>
|
||||
<job v-if="tabId" :statusCodes="statusCodes" :tab="tabId" />
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">{{ $t('取消') }}</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const job = defineAsyncComponent(() => import('@/views/sys/job/index.vue'))
|
||||
export default {
|
||||
components: { job },
|
||||
data() {
|
||||
return {
|
||||
statusCodes: null,
|
||||
tabId: null,
|
||||
loading: true,
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
emits: ['success', 'closed', 'mounted'],
|
||||
methods: {
|
||||
//显示
|
||||
async open(data) {
|
||||
this.visible = true
|
||||
if (data.tabId === 'fail') {
|
||||
data.tabId = 'log'
|
||||
this.statusCodes = ['300,399', '400,499', '500,599', '900,999']
|
||||
await this.$TOOL.data.set('APP_SET_FAIL_JOB_VIEW_TIME', this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
|
||||
}
|
||||
this.tabId = data.tabId
|
||||
return this
|
||||
},
|
||||
//表单提交方法
|
||||
async submit() {},
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('mounted')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -83,7 +83,7 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import avatar from '../../utils/avatar'
|
||||
const search = defineAsyncComponent(() => import('./search.vue'))
|
||||
const tasks = defineAsyncComponent(() => import('./tasks/index.vue'))
|
||||
const tasks = defineAsyncComponent(() => import('./tasks.vue'))
|
||||
const message = defineAsyncComponent(() => import('@/views/profile/message/components/list.vue'))
|
||||
export default {
|
||||
components: {
|
||||
|
||||
@ -498,4 +498,7 @@ export default {
|
||||
本页: '本页',
|
||||
'JSON 格式化': 'JSON 格式化',
|
||||
格式错误: '格式错误',
|
||||
'按下 {key} 可关闭当前标签页': '按下 {key} 可关闭当前标签页',
|
||||
'按下 {key} 可关闭其它标签页': '按下 {key} 可关闭其它标签页',
|
||||
'按下 {key} 快速查找菜单功能': '按下 {key} 快速查找菜单功能',
|
||||
}
|
||||
@ -328,4 +328,8 @@
|
||||
.el-popper {
|
||||
max-width: 90%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
@ -12,19 +12,16 @@ export function permissionAll(permissions) {
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function judementSameArr(news, old) {
|
||||
// console.log(news)
|
||||
// console.log(old)
|
||||
let count = 0
|
||||
const len = news.length
|
||||
for (let i in news) {
|
||||
for (let j in old) {
|
||||
if (news[i] === old[j]) {
|
||||
count++
|
||||
// console.log(news[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('相同的数量', count)
|
||||
|
||||
return count === len
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,65 @@ import sysConfig from '@/config'
|
||||
|
||||
const tool = {}
|
||||
|
||||
tool.time = {
|
||||
//获取当前时间戳
|
||||
getUnix: function () {
|
||||
const date = new Date()
|
||||
return date.getTime()
|
||||
},
|
||||
//获取今天0点0分0秒的时间戳
|
||||
getTodayUnix: function () {
|
||||
const date = new Date()
|
||||
date.setHours(0)
|
||||
date.setMinutes(0)
|
||||
date.setSeconds(0)
|
||||
date.setMilliseconds(0)
|
||||
return date.getTime()
|
||||
},
|
||||
//获取今年1月1日0点0秒的时间戳
|
||||
getYearUnix: function () {
|
||||
const date = new Date()
|
||||
date.setMonth(0)
|
||||
date.setDate(1)
|
||||
date.setHours(0)
|
||||
date.setMinutes(0)
|
||||
date.setSeconds(0)
|
||||
date.setMilliseconds(0)
|
||||
return date.getTime()
|
||||
},
|
||||
//获取标准年月日
|
||||
getLastDate: function (time) {
|
||||
const date = new Date(time)
|
||||
const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
|
||||
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||||
return date.getFullYear() + '-' + month + '-' + day
|
||||
},
|
||||
//转换时间
|
||||
getFormatTime: function (timestamp) {
|
||||
timestamp = new Date(timestamp)
|
||||
const now = this.getUnix()
|
||||
const today = this.getTodayUnix()
|
||||
//var year = this.getYearUnix();
|
||||
const timer = (now - timestamp) / 1000
|
||||
let tip
|
||||
|
||||
if (timer <= 0) {
|
||||
tip = '刚刚'
|
||||
} else if (Math.floor(timer / 60) <= 0) {
|
||||
tip = '刚刚'
|
||||
} else if (timer < 3600) {
|
||||
tip = Math.floor(timer / 60) + '分钟前'
|
||||
} else if (timer >= 3600 && (timestamp - today >= 0 || Math.floor(timer / 86400) <= 0)) {
|
||||
tip = Math.floor(timer / 3600) + '小时前'
|
||||
} else if (timer / 86400 <= 31) {
|
||||
tip = Math.floor(timer / 86400) + '天前'
|
||||
} else {
|
||||
tip = this.getLastDate(timestamp)
|
||||
}
|
||||
return tip
|
||||
},
|
||||
}
|
||||
|
||||
/* localStorage */
|
||||
tool.data = {
|
||||
configJson: null,
|
||||
|
||||
@ -5,9 +5,13 @@
|
||||
</el-main>
|
||||
|
||||
<el-tour v-model="tour.open" @close="$TOOL.data.set('TOUR_TIP_READ_INDEX', true)">
|
||||
<el-tour-step :target="tour.targets.tags" :title="$t('操作指引')"> {{ $t('按下 ALT+Q 可快速关闭当前标签页') }} </el-tour-step>
|
||||
<el-tour-step :target="tour.targets.search" :title="$t('操作指引')"> {{ $t('快速查找菜单功能') }} </el-tour-step>
|
||||
<el-tour-step :target="tour.targets.userCenter" :title="$t('操作指引')"> {{ $t('修改个人信息和密码') }} </el-tour-step>
|
||||
<el-tour-step :target="tour.targets.tags" :title="$t('操作指引')">
|
||||
<p v-html="$t('按下 {key} 可关闭当前标签页', { key: '<b>Alt+Q</b>' })"></p>
|
||||
<p v-html="$t('按下 {key} 可关闭其它标签页', { key: '<b>Ctrl+Alt+Q</b>' })"></p>
|
||||
</el-tour-step>
|
||||
<el-tour-step :target="tour.targets.search" :title="$t('操作指引')">
|
||||
<p v-html="$t('按下 {key} 快速查找菜单功能', { key: '<b>Alt+A</b>' })"></p>
|
||||
</el-tour-step>
|
||||
<el-tour-step v-if="dashboard" :target="tour.targets.layoutSetting" :title="$t('操作指引')">
|
||||
{{ $t('自定义首页布局') }}
|
||||
</el-tour-step>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</el-tabs>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<component :is="tabId" :status-codes="statusCodes" />
|
||||
<component :is="tabId" :status-codes="statusCodes || dataStatusCode" />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
@ -20,9 +20,20 @@ const all = defineAsyncComponent(() => import('@/views/sys/job/all/index.vue'))
|
||||
export default {
|
||||
components: { all, log },
|
||||
computed: {},
|
||||
created() {},
|
||||
created() {
|
||||
if (this.$route.query.view === 'log') {
|
||||
this.tabId = 'log'
|
||||
}
|
||||
|
||||
if (this.$route.query.view === 'fail') {
|
||||
this.tabId = 'log'
|
||||
this.dataStatusCode = ['300,399', '400,499', '500,599', '900,999']
|
||||
this.$TOOL.data.set('APP_SET_FAIL_JOB_VIEW_TIME', this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataStatusCode: null,
|
||||
tabId: 'all',
|
||||
}
|
||||
},
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<el-container>
|
||||
<el-header v-loading="statistics.total === '...'" class="el-header-statistics">
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :value="statistics.total" group-separator title="总数"></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic :value="statistics.rate" suffix="%" title="成功率"></sc-statistic>
|
||||
</el-card>
|
||||
|
||||
@ -10,22 +10,82 @@
|
||||
ref="dialogForm">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane :label="$t('基本信息')">
|
||||
<el-form-item :label="$t('唯一编码')" prop="id"><el-input v-model="form.id" clearable /></el-form-item
|
||||
><el-form-item :label="$t('执行耗时（毫秒）')" prop="duration"><el-input v-model="form.duration" clearable /></el-form-item
|
||||
><el-form-item :label="$t('请求方法')" prop="httpMethod"><el-input v-model="form.httpMethod" clearable /></el-form-item
|
||||
><el-form-item :label="$t('响应状态码')" prop="httpStatusCode"><el-input v-model="form.httpStatusCode" clearable /></el-form-item
|
||||
><el-form-item :label="$t('作业编号')" prop="jobId"><el-input v-model="form.jobId" clearable /></el-form-item
|
||||
><el-form-item :label="$t('请求体')" prop="requestBody"
|
||||
><el-input v-model="form.requestBody" clearable rows="5" type="textarea" /></el-form-item
|
||||
><el-form-item :label="$t('请求头')" prop="requestHeader">
|
||||
<el-input v-model="form.requestHeader" clearable rows="5" type="textarea" /></el-form-item
|
||||
><el-form-item :label="$t('请求的网络地址')" prop="requestUrl"><el-input v-model="form.requestUrl" clearable /></el-form-item
|
||||
><el-form-item :label="$t('响应体')" prop="responseBody"
|
||||
><el-input v-model="form.responseBody" clearable rows="5" type="textarea" /></el-form-item
|
||||
><el-form-item :label="$t('响应头')" prop="responseHeader">
|
||||
<el-input v-model="form.responseHeader" clearable rows="5" type="textarea" /></el-form-item
|
||||
><el-form-item :label="$t('执行时间编号')" prop="timeId"><el-input v-model="form.timeId" clearable /></el-form-item
|
||||
><el-form-item :label="$t('创建时间')" prop="createdTime"><el-input v-model="form.createdTime" clearable /></el-form-item>
|
||||
<el-row :gutter="10">
|
||||
<el-col :lg="8">
|
||||
<el-form-item :label="$t('唯一编码')" prop="id">
|
||||
<el-input v-model="form.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('执行耗时（毫秒）')" prop="duration">
|
||||
<el-input v-model="form.duration" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('请求方法')" prop="httpMethod">
|
||||
<el-input v-model="form.httpMethod" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('响应状态码')" prop="httpStatusCode">
|
||||
<el-input v-model="form.httpStatusCode" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('作业编号')" prop="jobId">
|
||||
<el-input v-model="form.jobId" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('请求的网络地址')" prop="requestUrl">
|
||||
<el-input v-model="form.requestUrl" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('执行时间编号')" prop="timeId">
|
||||
<el-input v-model="form.timeId" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('创建时间')" prop="createdTime">
|
||||
<el-input v-model="form.createdTime" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="16">
|
||||
<el-form-item v-if="form.requestHeader" :label="$t('请求头')" prop="requestHeader">
|
||||
<json-viewer
|
||||
v-if="mode === 'view'"
|
||||
:expand-depth="1"
|
||||
:theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
|
||||
:value="JSON.parse(form.requestHeader)"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
<el-input v-else v-model="form.requestHeader" clearable rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.requestBody" :label="$t('请求体')" prop="requestBody">
|
||||
<json-viewer
|
||||
v-if="mode === 'view'"
|
||||
:expand-depth="5"
|
||||
:theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
|
||||
:value="JSON.parse(form.requestBody)"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
<el-input v-else v-model="form.requestBody" clearable rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.responseHeader" :label="$t('响应头')" prop="responseHeader">
|
||||
<json-viewer
|
||||
v-if="mode === 'view'"
|
||||
:expand-depth="1"
|
||||
:theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
|
||||
:value="JSON.parse(form.responseHeader)"
|
||||
copyable
|
||||
expanded
|
||||
sort></json-viewer>
|
||||
<el-input v-else v-model="form.responseHeader" clearable rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.responseBody" :label="$t('响应体')" prop="responseBody">
|
||||
<json-viewer
|
||||
v-if="mode === 'view'"
|
||||
:expand-depth="5"
|
||||
:theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
|
||||
:value="JSON.parse(form.responseBody)"
|
||||
copyable
|
||||
expanded
|
||||
sort>
|
||||
</json-viewer>
|
||||
<el-input v-else v-model="form.responseBody" clearable rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
|
||||
<json-viewer
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user