4 changed files with 161 additions and 14 deletions
@ -0,0 +1,77 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import { Modal } from 'ant-design-vue' |
||||||
|
import { EyeOutlined } from '@ant-design/icons-vue' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { getMqttConnectParams } from '@/api/device-manage/device' |
||||||
|
import type { DescItem } from '@/components/Description' |
||||||
|
import { Description } from '@/components/Description' |
||||||
|
import { noop } from '@/utils' |
||||||
|
import { copyText } from '@/utils/copyTextToClipboard' |
||||||
|
|
||||||
|
const props = defineProps<{ deviceId: string }>() |
||||||
|
|
||||||
|
const { state, execute, isLoading } = useAsyncState(() => getMqttConnectParams(props.deviceId), undefined, { immediate: false }) |
||||||
|
|
||||||
|
const open = ref(false) |
||||||
|
function handleOpen() { |
||||||
|
if (state.value) |
||||||
|
return open.value = true |
||||||
|
|
||||||
|
execute() |
||||||
|
.then(() => { |
||||||
|
open.value = true |
||||||
|
}) |
||||||
|
.catch(noop) |
||||||
|
} |
||||||
|
|
||||||
|
const schema: DescItem[] = [ |
||||||
|
{ |
||||||
|
label: '服务器地址 (hostUrl)', |
||||||
|
field: 'hostUrl', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '端口 (port)', |
||||||
|
field: 'port', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: 'ClientID (clientId)', |
||||||
|
field: 'clientId', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '用户名 (username)', |
||||||
|
field: 'username', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '密码 (password)', |
||||||
|
field: 'password', |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
function handleCopy() { |
||||||
|
const data = schema.map((item) => { |
||||||
|
return { |
||||||
|
key: item.field, |
||||||
|
keyName: item.label, |
||||||
|
value: state.value[item.field], |
||||||
|
} |
||||||
|
}) |
||||||
|
copyText(JSON.stringify(data)) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-button size="small" :loading="isLoading" @click="handleOpen"> |
||||||
|
<EyeOutlined /> |
||||||
|
查看参数 |
||||||
|
</a-button> |
||||||
|
|
||||||
|
<Modal v-model:open="open" title="MQTT 连接参数" :footer="null"> |
||||||
|
<Description :data="state" :schema="schema" :column="1" /> |
||||||
|
<div text="center" mt="10px"> |
||||||
|
<a-button size="small" @click="handleCopy"> |
||||||
|
一键复制 |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
</template> |
@ -0,0 +1,57 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { h, ref } from 'vue' |
||||||
|
import { Modal } from 'ant-design-vue' |
||||||
|
import { EyeOutlined } from '@ant-design/icons-vue' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import { getReportExample } from '@/api/device-manage/device' |
||||||
|
import type { DescItem } from '@/components/Description' |
||||||
|
import { Description } from '@/components/Description' |
||||||
|
import { JsonPreview } from '@/components/CodeEditor' |
||||||
|
import { noop } from '@/utils' |
||||||
|
|
||||||
|
const props = defineProps<{ productId: string, deviceSn: string }>() |
||||||
|
|
||||||
|
const { state, execute, isLoading } = useAsyncState(() => getReportExample(props.productId, props.deviceSn), undefined, { immediate: false }) |
||||||
|
|
||||||
|
const open = ref(false) |
||||||
|
function handleOpen() { |
||||||
|
if (state.value) |
||||||
|
return open.value = true |
||||||
|
|
||||||
|
execute() |
||||||
|
.then(() => open.value = true) |
||||||
|
.catch(noop) |
||||||
|
} |
||||||
|
|
||||||
|
const schema: DescItem[] = [ |
||||||
|
{ |
||||||
|
label: 'Topic', |
||||||
|
field: 'topic', |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '上报示例', |
||||||
|
field: 'message', |
||||||
|
render(value) { |
||||||
|
let content = value |
||||||
|
try { |
||||||
|
content = JSON.parse(value) |
||||||
|
} |
||||||
|
catch {} |
||||||
|
return h(JsonPreview, { |
||||||
|
data: content, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-button size="small" :loading="isLoading" @click="handleOpen"> |
||||||
|
<EyeOutlined /> |
||||||
|
查看参数 |
||||||
|
</a-button> |
||||||
|
|
||||||
|
<Modal v-model:open="open" title="上报示例" :footer="null" width="50%"> |
||||||
|
<Description :data="state" :schema="schema" :column="1" /> |
||||||
|
</Modal> |
||||||
|
</template> |
Loading…
Reference in new issue