This commit is contained in:
dzc committed 2026-09-16 17:02:16 +08:00
1 parent 8799b1190e
commit 31c08dce72
6 files changed
+98 -18

No files matched your search

+6
View File
@@ -28,3 +28,9 @@ coverage
*.sw?
*.tsbuildinfo
# AI 工具生成的文件和文件夹
.video_agent/
.mimosa/
.v2c/
.zcode/
+31 -18
View File
@@ -3,14 +3,17 @@
<el-button :style="jsonViewStyle" type="text" link @click="clickJsonView">
<div class="json-view-container">
<div class="json-view">{{ jsonView }}</div>
<div class="json-view-btn">查看json</div>
<div class="json-view-btn">{{ props.buttonText }}</div>
</div>
</el-button>
<el-dialog append-to-body v-model="jsonViewVisible">
<div v-if="displayData.type === 'html'" v-html="displayData.content" class="html-preview"></div>
<div v-else-if="displayData.type === 'text'" class="text-preview">{{ displayData.content }}</div>
<vue-json-pretty v-else :data="displayData.content" showLength showLineNumber showIcon
:collapsedOnClickBrackets="false" />
<el-dialog append-to-body v-model="jsonViewVisible" :title="props.dialogTitle">
<div v-loading="loading" class="json-preview-content">
<el-empty v-if="!loading && displayData.type === 'empty'" description="暂无数据" />
<div v-else-if="displayData.type === 'html'" v-html="displayData.content" class="html-preview"></div>
<div v-else-if="displayData.type === 'text'" class="text-preview">{{ displayData.content }}</div>
<vue-json-pretty v-else-if="displayData.type === 'json'" :data="displayData.content" showLength showLineNumber showIcon
:collapsedOnClickBrackets="false" />
</div>
<template #footer>
<el-button @click="jsonViewVisible = false">关闭</el-button>
</template>
@@ -25,7 +28,9 @@ import "vue-json-pretty/lib/styles.css"
type Props = {
width?: number
json?: string
lazyJson?: () => Promise<object>
lazyJson?: () => Promise<unknown>
buttonText?: string
dialogTitle?: string
}
const state = reactive({
@@ -35,9 +40,12 @@ const state = reactive({
const props = withDefaults(defineProps<Props>(), {
width: 0,
json: "",
buttonText: "查看json",
dialogTitle: "JSON 详情",
})
const jsonViewVisible = ref<boolean>(false)
const loading = ref(false)
const displayData = computed(() => {
// 优先使用 lazyJson 返回的数据,如果没有则使用 props.json
@@ -74,16 +82,17 @@ const jsonViewStyle = computed(() => {
// 点击事件
const clickJsonView = async () => {
jsonViewVisible.value = true
console.log("props:", props);
if (props.lazyJson) {
state.jsonData = null
loading.value = true
try {
const string = await props.lazyJson()
if (string) {
state.jsonData = string
}
state.jsonData = string || ""
} catch (error) {
console.error("lazyJson error:", error)
} finally {
loading.value = false
}
}
}
@@ -109,14 +118,18 @@ const clickJsonView = async () => {
}
.html-preview {
max-height: 60vh;
overflow: auto;
}
.text-preview {
max-height: 60vh;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
}
.text-preview {
white-space: pre-wrap;
word-break: break-all;
}
.json-preview-content {
min-height: 80px;
max-height: 60vh;
overflow: auto;
}
</style>
@@ -48,6 +48,12 @@
:controls="false" class="w-full" placeholder="请输入0-359度,留空则朝向当前视角" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="摄像头俯仰" prop="cameraPitch">
<el-input-number v-model="form.cameraPitch" :min="-90" :max="90" :precision="2"
:controls="false" class="w-full" placeholder="请输入-90~90度,正数为抬头,留空则保持水平" />
</el-form-item>
</el-col>
</div>
</el-row>
</el-form>
@@ -87,6 +93,7 @@ const form = reactive<any>({
y: '',
z: '',
cameraDirection: null,
cameraPitch: null,
});
// 定义校验规则
@@ -111,6 +118,7 @@ const openDialog = (areaHouseId: string, bindId?: string) => {
y: '',
z: '',
cameraDirection: null,
cameraPitch: null,
})
// 表单值已在上方重置,这里只清除上次打开残留的校验状态
nextTick(() => {
@@ -178,6 +186,7 @@ const getareaHouseDeviceData = async (bindId: any, areaHouseId: any) => {
form.y = houseDeviceRes.y
form.z = houseDeviceRes.z
form.cameraDirection = houseDeviceRes.cameraDirection ?? null
form.cameraPitch = houseDeviceRes.cameraPitch ?? null
}
} else if (areaHouseId) {
const { data: houseRes } = await AreaHouseApi.getObj(areaHouseId)
@@ -33,6 +33,14 @@
<span v-else>默认朝向视角</span>
</template>
</el-table-column>
<el-table-column prop="cameraPitch" label="俯仰(度)" width="140">
<template #default="{ row }">
<span v-if="row.cameraPitch !== null && row.cameraPitch !== undefined">
{{ row.cameraPitch }}°
</span>
<span v-else>默认水平</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="房屋">
<el-table-column prop="houseName" label="房屋名" />
@@ -28,6 +28,16 @@
</el-table-column>
<el-table-column prop="errorMsg" label="失败原因" min-width="220" show-overflow-tooltip />
<el-table-column prop="createTime" label="调用时间" width="180" />
<el-table-column label="JSON 详情" width="250" fixed="right">
<template #default="{ row }">
<div class="json-actions">
<preview-json :width="110" button-text="请求参数 JSON" dialog-title="请求参数 JSON"
:lazy-json="getFullJson(row.id, 'req')" />
<preview-json :width="110" button-text="返回参数 JSON" dialog-title="返回参数 JSON"
:lazy-json="getFullJson(row.id, 'res')" />
</div>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
@@ -40,8 +50,20 @@ import { BasicTableProps, useTable } from "/@/hooks/table";
const queryRef = ref();
const state: BasicTableProps = reactive({ queryForm: {}, pageList: ComDhLogApi.fetchList });
const { getDataList, sizeChangeHandle, currentChangeHandle, tableStyle } = useTable(state);
const getFullJson = (id: string, field: "req" | "res") => async () => {
const { data } = await ComDhLogApi.getObj(id);
return data?.[field] || "";
};
const resetQuery = () => {
queryRef.value?.resetFields();
getDataList();
};
</script>
<style scoped>
.json-actions {
display: flex;
align-items: center;
gap: 8px;
}
</style>
@@ -32,6 +32,16 @@
</el-table-column>
<el-table-column prop="errorMsg" label="失败原因" min-width="230" show-overflow-tooltip />
<el-table-column prop="createTime" label="调用时间" width="180" />
<el-table-column label="JSON 详情" width="250" fixed="right">
<template #default="{ row }">
<div class="json-actions">
<preview-json :width="110" button-text="请求参数 JSON" dialog-title="请求参数 JSON"
:lazy-json="getFullJson(row.id, 'req')" />
<preview-json :width="110" button-text="返回参数 JSON" dialog-title="返回参数 JSON"
:lazy-json="getFullJson(row.id, 'res')" />
</div>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
@@ -51,9 +61,21 @@ const initialQuery = () => ({
});
const state: BasicTableProps = reactive({ queryForm: initialQuery(), pageList: ComDhLogApi.fetchList });
const { getDataList, sizeChangeHandle, currentChangeHandle, tableStyle } = useTable(state);
const getFullJson = (id: string, field: "req" | "res") => async () => {
const { data } = await ComDhLogApi.getObj(id);
return data?.[field] || "";
};
const resetQuery = () => {
queryRef.value?.resetFields();
Object.assign(state.queryForm, initialQuery());
getDataList();
};
</script>
<style scoped>
.json-actions {
display: flex;
align-items: center;
gap: 8px;
}
</style>