智能柜日志json查看

src/views/hard/hard-door-manager/index.vue

@@ -52,7 +52,7 @@
 				<el-descriptions-item>
 					{{ state.deviceDetail.signalIntensity }}
 					<template #label>
-						SIM信号强度<tip content="大于-95 表示信号强度好；-95 到-105 表示信号强度中等；小于-105 表示信号差" />：
+						SIM信号强度<tip content="大于 -95 表示信号强度好；-95 到 -105 表示信号强度中等；小于 -105 表示信号差" />：
 					</template>
 				</el-descriptions-item>
 				<el-descriptions-item>

src/views/hard/third-door-log/detail.vue

@@ -0,0 +1,45 @@
+<template>
+	<el-drawer v-model="visible" size="40%">
+		<div class="w-full">
+			<div
+				class="coding inverse-toggle px-5 shadow-lg text-gray-100 text-sm font-mono subpixel-antialiased bg-gray-800 pb-6 pt-4 rounded-lg leading-normal overflow-hidden"
+			>
+				<div class="top mb-2 flex">
+					<div class="h-3 w-3 bg-red-500 rounded-full"></div>
+					<div class="ml-2 h-3 w-3 bg-orange-300 rounded-full"></div>
+					<div class="ml-2 h-3 w-3 bg-green-500 rounded-full"></div>
+				</div>
+				<div class="mt-4">
+					<div class="text-green-400">错误信息:</div>
+					<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
+						{{ data }}
+						<br />
+					</p>
+				</div>
+			</div>
+		</div>
+	</el-drawer>
+</template>
+
+<script setup lang="ts" name="log-detail">
+const visible = ref(false)
+
+const data = ref({} as any)
+
+const openDialog = (error: any) => {
+	visible.value = true
+	data.value = error
+	// Object.assign(data, {
+	// 	...row,
+	// 	error: row.error
+	// 		.split("stack")[0]
+	// 		.split("|")
+	// 		.filter((item: any) => item),
+	// })
+}
+
+// 暴露变量
+defineExpose({
+	openDialog,
+})
+</script>

src/views/hard/third-door-log/index.vue

@@ -40,16 +40,51 @@
 					</template>
 				</el-table-column>
 				<el-table-column prop="apiUrl" label="api url" show-overflow-tooltip />
-				<el-table-column prop="res" label="res" show-overflow-tooltip />
-				<el-table-column prop="req" label="req" show-overflow-tooltip />
-				<el-table-column prop="error" label="调用错误" show-overflow-tooltip />
+				<el-table-column prop="res" label="res" show-overflow-tooltip>
+					<template #default="{ row }">
+						<el-button v-if="row.res" text type="primary" @click="row.res && handleClickJsonView(row.res)">查看</el-button>
+						<div v-else class="color-danger">null</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="req" label="req" show-overflow-tooltip>
+					<template #default="{ row }">
+						<el-button v-if="row.req" text type="primary" @click="row.req && handleClickJsonView(row.req)">查看</el-button>
+						<div v-else class="color-danger">null</div>
+					</template>
+				</el-table-column>
+				<el-table-column prop="error" label="调用错误" show-overflow-tooltip>
+					<template #default="{ row }">
+						<el-button
+							v-if="row.error"
+							icon="view"
+							@click="row.error && logDetailRef && logDetailRef.openDialog(row.error)"
+							size="small"
+							text
+							type="primary"
+						>
+							详情
+						</el-button>
+						<div v-else class="color-danger">null</div>
+					</template>
+				</el-table-column>
 				<el-table-column prop="timeConsuming" label="耗时(毫秒)" show-overflow-tooltip />
 			</el-table>
 			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
 		</div>
 
-		<!-- 编辑、新增  -->
+		<!-- 编辑、新增 -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+
+		<!-- json查看 -->
+		<el-dialog v-model="jsonViewVisible">
+			<vue-json-pretty :data="jsonData" showLength showLineNumber showIcon :collapsedOnClickBrackets="false" />
+			<template #footer>
+				<el-button @click="jsonViewVisible = false">关闭</el-button>
+			</template>
+		</el-dialog>
+
+		<!-- 调用错误 -->
+		<log-detail ref="logDetailRef" />
 	</div>
 </template>
 
@@ -58,19 +93,23 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as thirdDoorLog from "/@/api/thirdparty/third-door-log"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
+import VueJsonPretty from "vue-json-pretty"
+import "vue-json-pretty/lib/styles.css"
 
-// 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+const LogDetail = defineAsyncComponent(() => import("./detail.vue"))
 // 定义查询字典
 const { third_biz_type, third_api_type } = useDict("third_biz_type", "third_api_type")
 // 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
 const queryRef = ref()
-const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const jsonViewVisible = ref<boolean>()
+const jsonData = ref()
+const logDetailRef = ref()
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -100,6 +139,12 @@ const selectionChangHandle = (objs: { id: string }[]) => {
 	multiple.value = !objs.length
 }
 
+// 点击查看json
+const handleClickJsonView = (json: any) => {
+	jsonViewVisible.value = true
+	jsonData.value = JSON.parse(json)
+}
+
 // 删除操作
 const handleDelete = async (ids: string[]) => {
 	try {

src/views/wallet/wallet-setting/components/third-zy/index.vue

@@ -61,7 +61,7 @@
 						<el-button
 							v-if="row.error"
 							icon="view"
-							@click="row.error && LogDetailRef.openDialog(row.error)"
+							@click="row.error && logDetailRef.openDialog(row.error)"
 							size="small"
 							text
 							type="primary"
@@ -83,7 +83,7 @@
 			</template>
 		</el-dialog>
 
-		<log-detail ref="LogDetailRef" />
+		<log-detail ref="logDetailRef" />
 	</div>
 </template>
 
@@ -100,7 +100,7 @@ import { ElLoading } from "element-plus"
 
 const LogDetail = defineAsyncComponent(() => import("./detail.vue"))
 
-const LogDetailRef = ref()
+const logDetailRef = ref()
 const { thrid_zy_biz_type } = useDict("thrid_zy_biz_type")
 const jsonViewVisible = ref<boolean>()
 const jsonData = ref()