fix:卡顿问题
This commit is contained in:
1 parent
72ec1f3128
commit
dd2130eb09
6 files changed
+85
-15
No files matched your search
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button :style="jsonViewStyle" type="text" link @click="jsonViewVisible = true">
|
||||
<el-button :style="jsonViewStyle" type="text" link @click="clickJsonView">
|
||||
<div :style="jsonViewStyle" class="json-view">{{ jsonView }}</div>
|
||||
</el-button>
|
||||
<el-dialog append-to-body v-model="jsonViewVisible">
|
||||
@@ -19,8 +19,13 @@ import "vue-json-pretty/lib/styles.css"
|
||||
type Props = {
|
||||
width?: number
|
||||
json?: string
|
||||
lazyJson?: () => Promise<object>
|
||||
}
|
||||
|
||||
const state = reactive({
|
||||
jsonData: {},
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 0,
|
||||
json: "",
|
||||
@@ -29,6 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
const jsonViewVisible = ref<boolean>(false)
|
||||
|
||||
const jsonData = computed(() => {
|
||||
// 先用lazyJson
|
||||
if (state.jsonData) return state.jsonData
|
||||
if (!props.json) return ""
|
||||
if (typeof props.json == "string") return JSON.parse(props.json)
|
||||
return props.json
|
||||
@@ -44,6 +51,21 @@ const jsonViewStyle = computed(() => {
|
||||
if (!props.width) return { width: "160px !important" }
|
||||
return { width: `${props.width}px !important` }
|
||||
})
|
||||
|
||||
// 点击事件
|
||||
const clickJsonView = async () => {
|
||||
jsonViewVisible.value = true
|
||||
if (props.lazyJson) {
|
||||
const string = await props.lazyJson()
|
||||
if (string) {
|
||||
if (typeof string == "string") {
|
||||
state.jsonData = JSON.parse(string)
|
||||
} else {
|
||||
state.jsonData = string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -41,19 +41,19 @@
|
||||
|
||||
<el-table-column prop="headers" label="请求头" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.headers" />
|
||||
<preview-json :json="row.headers" :lazy-json="getFullJson(row.id, 'headers')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="req" label="请求参数" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.req" />
|
||||
<preview-json :json="row.req" :lazy-json="getFullJson(row.id, 'req')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="res" label="请求响应" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.res" />
|
||||
<preview-json :json="row.res" :lazy-json="getFullJson(row.id, 'res')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -114,6 +114,22 @@ const {
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
|
||||
// 获取完整json
|
||||
const getFullJson = (id: any, field: string) => {
|
||||
return async function () {
|
||||
try {
|
||||
const { data } = await ComDhLogApi.getObj(id)
|
||||
if (data && data[field]) {
|
||||
return data[field]
|
||||
}
|
||||
return ""
|
||||
} catch (error) {
|
||||
console.error("|获取完整json|,意外的错误", error);
|
||||
return JSON.stringify("{}")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
// 清空搜索条件
|
||||
|
||||
@@ -41,19 +41,19 @@
|
||||
|
||||
<el-table-column prop="headers" label="请求头" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.headers" />
|
||||
<preview-json :json="row.headers" :lazy-json="getFullJson(row.id, 'headers')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="req" label="请求参数" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.req" />
|
||||
<preview-json :json="row.req" :lazy-json="getFullJson(row.id, 'req')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="res" label="请求响应" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.res" />
|
||||
<preview-json :json="row.res" :lazy-json="getFullJson(row.id, 'res')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -116,6 +116,22 @@ const {
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
|
||||
// 获取完整json
|
||||
const getFullJson = (id: any, field: string) => {
|
||||
return async function () {
|
||||
try {
|
||||
const { data } = await ComDhLogApi.getObj(id)
|
||||
if (data && data[field]) {
|
||||
return data[field]
|
||||
}
|
||||
return ""
|
||||
} catch (error) {
|
||||
console.error("|获取完整json|,意外的错误", error);
|
||||
return JSON.stringify("{}")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
// 清空搜索条件
|
||||
|
||||
@@ -41,19 +41,19 @@
|
||||
|
||||
<el-table-column prop="headers" label="请求头" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.headers" />
|
||||
<preview-json :json="row.headers" :lazy-json="getFullJson(row.id, 'headers')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="req" label="请求参数" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.req" />
|
||||
<preview-json :json="row.req" :lazy-json="getFullJson(row.id, 'req')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="res" label="请求响应" width="200px">
|
||||
<template #default="{ row }">
|
||||
<preview-json :json="row.res" />
|
||||
<preview-json :json="row.res" :lazy-json="getFullJson(row.id, 'res')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -114,6 +114,22 @@ const {
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
|
||||
// 获取完整json
|
||||
const getFullJson = (id: any, field: string) => {
|
||||
return async function () {
|
||||
try {
|
||||
const { data } = await ComDhLogApi.getObj(id)
|
||||
if (data && data[field]) {
|
||||
return data[field]
|
||||
}
|
||||
return ""
|
||||
} catch (error) {
|
||||
console.error("|获取完整json|,意外的错误", error);
|
||||
return JSON.stringify("{}")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
// 清空搜索条件
|
||||
|
||||
@@ -18,9 +18,9 @@ import { rendererVideoPage } from "../lib/custom/video-custom"
|
||||
let realPlayer: any = null;
|
||||
|
||||
const state = reactive<any>({
|
||||
numList: [1, 4, 9, 16],
|
||||
num: 16,
|
||||
maxNum: 16,
|
||||
numList: [1, 4, 9],
|
||||
num: 9,
|
||||
maxNum: 9,
|
||||
channelList: [],
|
||||
/**
|
||||
* 码流类型:
|
||||
|
||||
@@ -25,8 +25,8 @@ const state = reactive<any>({
|
||||
loading: false,
|
||||
treeLoading: false,
|
||||
currentNum: 4,
|
||||
maxCurrentNum: 16,
|
||||
numList: [1, 4, 9, 16],
|
||||
maxCurrentNum: 9,
|
||||
numList: [1, 4, 9],
|
||||
type: "device",
|
||||
code: null,
|
||||
current: 1,
|
||||
|
||||
Reference in new issue
Block a user