11
This commit is contained in:
1 parent
8799b1190e
commit
31c08dce72
6 files changed
+98
-18
No files matched your search
@@ -28,3 +28,9 @@ coverage
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
# AI 工具生成的文件和文件夹
|
||||
.video_agent/
|
||||
.mimosa/
|
||||
.v2c/
|
||||
.zcode/
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user