fix:卡顿问题

This commit is contained in:
dzc committed 2025-11-20 15:17:05 +08:00
1 parent 72ec1f3128
commit dd2130eb09
6 files changed
+85 -15

No files matched your search

+23 -1
View File
@@ -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>
+19 -3
View File
@@ -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 = () => {
// 清空搜索条件
+19 -3
View File
@@ -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 = () => {
// 清空搜索条件
+19 -3
View File
@@ -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,