diff --git a/src/api/device-manage/device/index.ts b/src/api/device-manage/device/index.ts index 94e5f48a..ea786f5d 100644 --- a/src/api/device-manage/device/index.ts +++ b/src/api/device-manage/device/index.ts @@ -56,3 +56,22 @@ export function getDeviceTopicList(params: PageParam & { deviceId: string }) { params, }) } + +export function getMqttConnectParams(deviceId: string) { + return defHttp.get({ + url: '/device/mqttLinkInfo', + params: { + deviceId, + }, + }) +} + +export function getReportExample(productId: string, deviceSn: string) { + return defHttp.get({ + url: '/device/messageExample', + params: { + productId, + deviceSn, + }, + }) +} diff --git a/src/views/device-manage/device/components/MqttParamsModal.vue b/src/views/device-manage/device/components/MqttParamsModal.vue new file mode 100644 index 00000000..d6aa0f43 --- /dev/null +++ b/src/views/device-manage/device/components/MqttParamsModal.vue @@ -0,0 +1,77 @@ + + + diff --git a/src/views/device-manage/device/components/ReportExampleModal.vue b/src/views/device-manage/device/components/ReportExampleModal.vue new file mode 100644 index 00000000..ce7c09cb --- /dev/null +++ b/src/views/device-manage/device/components/ReportExampleModal.vue @@ -0,0 +1,57 @@ + + + diff --git a/src/views/device-manage/device/components/composables/useDeviceInfo.ts b/src/views/device-manage/device/components/composables/useDeviceInfo.ts index 0d23d535..6340930f 100644 --- a/src/views/device-manage/device/components/composables/useDeviceInfo.ts +++ b/src/views/device-manage/device/components/composables/useDeviceInfo.ts @@ -1,8 +1,9 @@ import { h } from 'vue' -import { Button, Tag } from 'ant-design-vue' -import { EyeOutlined } from '@ant-design/icons-vue' +import { Tag } from 'ant-design-vue' import { useRoute } from 'vue-router' import { useAsyncState } from '@vueuse/core' +import MqttParamsModal from '../MqttParamsModal.vue' +import ReportExampleModal from '../ReportExampleModal.vue' import type { DescItem } from '@/components/Description' import { getDeviceDetail } from '@/api/device-manage/device' import { usePermission } from '@/hooks/web/usePermission' @@ -61,19 +62,16 @@ export function useDeviceInfo() { field: 'mqtt', label: 'MQTT连接参数', show: () => hasPermission('device_mqtt_params'), - render: () => h(Button, { - size: 'small', - onClick: openMqttParamsModal, - }, () => [h(EyeOutlined), '查看参数']), + render: () => h(MqttParamsModal, { deviceId: data.value!.id }), }, { field: 'report', label: '上报示例', show: () => hasPermission('device_report_example'), - render: () => h(Button, { - size: 'small', - onClick: openReportExampleModal, - }, () => [h(EyeOutlined), '查看示例']), + render: () => h(ReportExampleModal, { + productId: data.value!.productId, + deviceSn: data.value!.deviceSn, + }), }, { field: 'deviceDesc', @@ -84,10 +82,6 @@ export function useDeviceInfo() { const route = useRoute() const { state: data } = useAsyncState(() => getDeviceDetail(route.params.id as string), undefined) - function openMqttParamsModal() {} - - function openReportExampleModal() {} - return { data, scheam,