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,