From dd2130eb09555be8a4e6247624d0ade63e5e5fca Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 20 Nov 2025 15:17:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8D=A1=E9=A1=BF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PreviewJson/index.vue          | 24 ++++++++++++++++++-
 src/views/api/carLog/index.vue                | 22 ++++++++++++++---
 src/views/api/deviceLog/index.vue             | 22 ++++++++++++++---
 src/views/api/doorLog/index.vue               | 22 ++++++++++++++---
 .../device/components/preview-video/index.vue |  6 ++---
 .../device/components/replay-video/index.vue  |  4 ++--
 6 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/src/components/PreviewJson/index.vue b/src/components/PreviewJson/index.vue
index ae78d0b..91c1ba8 100644
--- a/src/components/PreviewJson/index.vue
+++ b/src/components/PreviewJson/index.vue
@@ -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>
diff --git a/src/views/api/carLog/index.vue b/src/views/api/carLog/index.vue
index ae441a3..32f16a0 100644
--- a/src/views/api/carLog/index.vue
+++ b/src/views/api/carLog/index.vue
@@ -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 = () => {
     // 清空搜索条件
diff --git a/src/views/api/deviceLog/index.vue b/src/views/api/deviceLog/index.vue
index fbe2f7c..3325310 100644
--- a/src/views/api/deviceLog/index.vue
+++ b/src/views/api/deviceLog/index.vue
@@ -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 = () => {
     // 清空搜索条件
diff --git a/src/views/api/doorLog/index.vue b/src/views/api/doorLog/index.vue
index 6bb2b1e..22e7447 100644
--- a/src/views/api/doorLog/index.vue
+++ b/src/views/api/doorLog/index.vue
@@ -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 = () => {
     // 清空搜索条件
diff --git a/src/views/device/components/preview-video/index.vue b/src/views/device/components/preview-video/index.vue
index cfe4457..394fa3b 100644
--- a/src/views/device/components/preview-video/index.vue
+++ b/src/views/device/components/preview-video/index.vue
@@ -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: [],
     /**
      * 码流类型:
diff --git a/src/views/device/components/replay-video/index.vue b/src/views/device/components/replay-video/index.vue
index 2c1ab98..655aa89 100644
--- a/src/views/device/components/replay-video/index.vue
+++ b/src/views/device/components/replay-video/index.vue
@@ -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,