From c865d2f933c1e4e50bcaa7ab7b7df3d338637999 Mon Sep 17 00:00:00 2001 From: K <1175047471@qq.com> Date: Thu, 7 Mar 2024 14:49:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85=20?= =?UTF-8?q?-=20=E6=9F=A5=E7=9C=8B=20mqtt=20=E5=8F=82=E6=95=B0=20/=20?= =?UTF-8?q?=E4=B8=8A=E6=8A=A5=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/device-manage/device/index.ts | 19 +++++ .../device/components/MqttParamsModal.vue | 77 +++++++++++++++++++ .../device/components/ReportExampleModal.vue | 57 ++++++++++++++ .../components/composables/useDeviceInfo.ts | 22 ++---- 4 files changed, 161 insertions(+), 14 deletions(-) create mode 100644 src/views/device-manage/device/components/MqttParamsModal.vue create mode 100644 src/views/device-manage/device/components/ReportExampleModal.vue 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,