up

package.json

@@ -33,6 +33,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
+    "mqtt": "^4.3.7",
     "node-waves": "^0.7.6",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",

src/App.vue

@@ -9,6 +9,7 @@ import { getElementLocales } from '@/locales'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 import useTabbarStore from '@/store/modules/tabbar'
+import { mqttWatch } from '@/utils/mqtt'
 
 const route = useRoute()
 const settingsStore = useSettingsStore()
@@ -101,6 +102,13 @@ function generateI18nTitle(key: string | undefined, defaultTitle: string | Funct
 
 import.meta.env.VITE_APP_DEBUG_TOOL === 'eruda' && eruda.init()
 import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
+
+mqttWatch('topic/#', (obj) => {
+  if (obj.topic) {
+    const message = JSON.parse(obj.topic.message.toString ())
+    window.console.log({ message })
+  }
+})
 </script>
 
 <template>

src/main.ts

@@ -23,6 +23,7 @@ import icons from '@/iconify/index.json'
 // 全局样式
 import 'uno.css'
 import '@/assets/styles/globals.scss'
+import { initMqtt } from '@/utils/mqtt'
 
 const app = createApp(App)
 app.use(ElementPlus)
@@ -38,4 +39,6 @@ if (icons.useType === 'offline') {
   }
 }
 
+initMqtt(app)
+
 app.mount('#app')

src/store/modules/mqtt.ts

@@ -6,7 +6,9 @@ const useMqttStore = defineStore(
     const message = ref()
     // 获取mqtt消息
     function setMqttMessage(topic: any, messageInfo: any) {
-      message.value[topic] = messageInfo
+      message.value = {
+        [topic]: messageInfo,
+      }
     }
 
     return {

src/utils/mqtt.ts

@@ -12,29 +12,23 @@ export function initMqtt(app: App<Element>) {
   }
   const client = mqtt.connect('ws://1.15.92.205:8083/mqtt', options)
   client.on('connect', () => {
-    client.subscribe('topic/goaf/waring/person', (err: any) => {
+    client.subscribe('topic/#', (err: any) => {
       if (!err) {
-        client.publish('topic/goaf/waring/person', 'Hello mqtt')
+        client.publish('topic1', 'sub failed')
       }
       else {
-        client.publish('topic/goaf/waring/person', 'Hello mqtt err')
-      }
-    })
-    client.subscribe('topic/goaf/waring/sensor', (err: any) => {
-      if (!err) {
-        client.publish('topic/goaf/waring/sensor', 'Hello mqtt')
-      }
-      else {
-        client.publish('topic/goaf/waring/sensor', 'Hello mqtt err')
+        client.publish('topic2', 'sub succesed!')
       }
     })
   })
   client.on('message', (topic: any, message: any) => {
-    const messageInfo = {
-      message,
-      time: new Date().getTime(),
+    if (topic) {
+      const messageInfo = {
+        message,
+        time: new Date().getTime(),
+      }
+      mqttStore.setMqttMessage(topic, messageInfo)
     }
-    mqttStore.setMqttMessage(topic, messageInfo)
   })
   if (app) {
     app.config.globalProperties.$mqtt = client
@@ -45,7 +39,7 @@ export function mqttWatch(topic: string | number, callback: (arg0: any) => void)
   if (!topic) {
     return
   }
-  watch(() => mqttStore.message.value[topic], (val) => {
+  watch(() => mqttStore.message, (val) => {
     callback(val)
   })
 }

src/views/biz/oam_rule/components/ObjectOAMRule.vue

@@ -8,7 +8,6 @@ import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { createObjectOAMRule, getObjectOAMRuleById, updateObjectOAMRule } from '@/api/biz/bizObjectOAMRuleApi'
 import RuleSelector from '@/views/biz/components/BizRuleSelector.vue'
-import ObjectAttrSelector from '@/views/biz/rule/components/ObjectAttrSelector.vue'
 const emit = defineEmits(['success'])
 
 const formRef = ref<FormInstance>()
@@ -125,15 +124,6 @@ defineExpose({
     <el-drawer v-model="state.dialogVisible" :title="state.title" size="30%">
       <div v-loading="state.loading">
         <el-form ref="formRef" :model="state.formData" :rules="formRules" label-width="120px" label-suffix="：">
-          <el-form-item label="目标属性" prop="ruleCode">
-            <ObjectAttrSelector
-              v-model="state.formData.targetAttrId"
-              :biz-id="state.formData.bizId"
-              :object-id="state.formData.objectId"
-              placeholder="请输入行为代码"
-            />
-          </el-form-item>
-
           <el-form-item label="业务规则" prop="ruleId">
             <RuleSelector v-model="state.formData.ruleId" />
           </el-form-item>