feat: 产品详情 - 服务端订阅

src/api/common/types.ts

@@ -13,5 +13,6 @@ export type SystemEnumKeys =
   | 'eProductNodeType'
   | 'eRoleAlias'
   | 'eAuthType'
+  | 'eSubscribeMessageType'
 
 export type SystemEnum = Record<SystemEnumKeys, SystemEnumValue[]>

src/api/product/index.ts

@@ -1,3 +1,4 @@
+import type { SubScription } from '../subscription/types'
 import type { GetProductListParmas, Product } from './types'
 import { defHttp } from '@/utils/http/axios'
 
@@ -9,7 +10,7 @@ export function getProductList(params: GetProductListParmas) {
 }
 
 export function getProductDetail(id: string) {
-  return defHttp.get<Product>({
+  return defHttp.get<Product & { subscribe: SubScription }>({
     url: `/product/detail?id=${id}`,
   })
 }

src/api/subscription/types.ts

@@ -0,0 +1,7 @@
+export interface SubScription {
+  id: string
+  messageType: string
+  productId: string
+  tenantId: string
+  createTime: string
+}

src/views/product/components/Subscription.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { Alert, Tag } from 'ant-design-vue'
+import { LinkOutlined } from '@ant-design/icons-vue'
+import type { DescItem } from '@/components/Description'
+import { Description } from '@/components/Description'
+import { useSystemEnumStore } from '@/store/modules/systemEnum'
+import type { SubScription } from '@/api/subscription/types'
+
+defineProps<{
+  data?: SubScription
+}>()
+
+const { getSystemEnums } = useSystemEnumStore()
+
+const schema: DescItem[] = [
+  {
+    label: '订阅类型',
+    field: 'type',
+    render: () => 'mqtt',
+  },
+  {
+    label: '订阅消息',
+    field: 'messageType',
+    render: (val: string) => {
+      const values = val.split(',')
+      const types = getSystemEnums('eSubscribeMessageType')
+      return h(
+        'div',
+        types
+          .map(item => values.includes(item.value.toString()) ? item.label : null)
+          .filter(Boolean)
+          .map(name => h(Tag, () => name)),
+      )
+    },
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <Alert
+      type="info" show-icon class="py-4px"
+      message="服务端订阅：服务端可以直接订阅产品下多种类型的消息，例如设备上报属性、设备上报消息、设备状态变化通知、设备生命周期变更等。配置服务端订阅后配合使用【消费组】，平台会将产品下所有设备中已订阅类型的消息进行转发。"
+    />
+    <a-button type="link" size="small" my="12px" @click="$router.push('/subscription/list')">
+      <LinkOutlined />
+      管理订阅
+    </a-button>
+    <Description :data="data" :schema="schema" :column="1" :label-style="{ width: '100px' }" />
+  </div>
+</template>

src/views/product/components/index.ts

@@ -1,2 +1,3 @@
 export { default as TopicManage } from './TopicManage.vue'
 export { default as Model } from './Model.vue'
+export { default as Subscription } from './Subscription.vue'

src/views/product/detail.vue

@@ -2,7 +2,7 @@
 import { Card, Tabs } from 'ant-design-vue'
 import { useAsyncState } from '@vueuse/core'
 import { useRoute } from 'vue-router'
-import { Model, TopicManage } from './components'
+import { Model, Subscription, TopicManage } from './components'
 import { Description } from '@/components/Description'
 import { getProductDetail } from '@/api/product'
 import type { DescItem } from '@/components/Description'
@@ -80,11 +80,8 @@ const schema: DescItem[] = [
         <Tabs.TabPane key="2" tab="物模型">
           <Model :tsl="state?.tsl" />
         </Tabs.TabPane>
-        <Tabs.TabPane key="3" tab="消息解析">
-          消息解析
-        </Tabs.TabPane>
         <Tabs.TabPane key="3" tab="服务端订阅">
-          服务端订阅
+          <Subscription :data="state?.subscribe" />
         </Tabs.TabPane>
       </Tabs>
     </Card>