事件增加websocket配置

src/hooks/eventHandler.hook.ts

@@ -6,24 +6,14 @@ import { EventBus } from '@/utils/eventBus';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
-
-// 交互事件
-export const eventHandlerHook = (
+export const eventCommonHandler = (
   componentList: any,
-  interactConfigEvents: any,
+  elementList: any,
   type: string,
   params: any = null,
 ) => {
   let obj: any = {};
   let index = 0;
-  const elementList: any = [];
-  for (let i = 0; i < interactConfigEvents.length; i++) {
-    if (interactConfigEvents[i].type == type) {
-      for (let j = 0; j < interactConfigEvents[i].movementList.length; j++) {
-        elementList.push(interactConfigEvents[i].movementList[j]);
-      }
-    }
-  }
   for (let i = 0; i < componentList.length; i++) {
     for (let j = 0; j < elementList.length; j++) {
       if (elementList[j].movement == 'newaddress') {
@@ -102,3 +92,38 @@ export const eventHandlerHook = (
     }
   }
 };
+// 交互事件
+export const eventHandlerHook = (
+  componentList: any,
+  interactConfigEvents: any,
+  type: string,
+  params: any = null,
+) => {
+  const elementList: any = [];
+  for (let i = 0; i < interactConfigEvents.length; i++) {
+    if (interactConfigEvents[i].type == type) {
+      if (!interactConfigEvents[i].movementList) {
+        return false;
+      }
+      for (let j = 0; j < interactConfigEvents[i].movementList.length; j++) {
+        elementList.push(interactConfigEvents[i].movementList[j]);
+      }
+    }
+  }
+
+  if (componentList.length == 0 || elementList.length == 0) {
+    return false;
+  }
+  eventCommonHandler(componentList, elementList, type, params);
+};
+// websocket事件
+export const websocketEvent = (interactConfigEvents: any, params: any = null) => {
+  console.log('websocketEvent', interactConfigEvents, params);
+  interactConfigEvents.forEach((element) => {
+    if (element.messageType == params.type) {
+      element.elementId.forEach((item) => {
+        EventBus.emit(item + 'websocket', params);
+      });
+    }
+  });
+};

src/packages/components/Icons/Default/Icon/index.vue

@@ -20,6 +20,7 @@
   import { GoIconify } from '@/components/GoIconify';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+  import { EventBus } from '@/utils/eventBus';
 
   const chartEditStore = useChartEditStore();
   const props = defineProps({
@@ -30,7 +31,6 @@
   });
   const { w, h } = toRefs(props.chartConfig.attr);
   const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
-
   const clickBtn = (val) => {
     eventHandlerHook(
       chartEditStore.getComponentList,
@@ -71,6 +71,16 @@
       val,
     );
   };
+  onMounted(() => {
+    // 获取eventBus传过来的值
+    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      console.log('data', data);
+    });
+    // websocket传过来的值
+    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
+      console.log('data', data);
+    });
+  });
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/WuRenJiImage/index.vue

@@ -28,7 +28,7 @@
     dataset: props.chartConfig.option.dataset,
   });
   onMounted(() => {
-    // 获取点击事件传过来的值
+    // 获取eventBus传过来的值
     EventBus.on(props.chartConfig.id + 'click', (data) => {
       console.log('data', data);
     });

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue

@@ -107,7 +107,16 @@
                     :options="routeOptions"
                   />
                 </div>
+                <!-- 消息类型 -->
               </template>
+              <div class="movement-type__element" v-if="eventType == 'websocket'">
+                消息类型
+                <n-select
+                  v-model:value="panel.messageType"
+                  placeholder="请选择"
+                  :options="messageOptions"
+                />
+              </div>
             </div>
           </div>
         </n-tab-pane>
@@ -126,6 +135,7 @@
   import { previewPath } from '@/utils';
   import { projectListApi } from '@/api/path/project.api';
   import { funSelectOptions } from '@/hooks/ceshiFun.hook';
+  import { getLoad } from '@/api/sys/sysDataItemDetail';
 
   const { chartEditStore } = useTargetData();
 
@@ -145,7 +155,7 @@
     },
   ]);
   const publishOptions = ref([]);
-
+  const messageOptions = ref([]);
   const props = defineProps({
     eventData: {
       type: Object,
@@ -159,6 +169,7 @@
         ],
       }),
     },
+    eventType: String,
   });
   const emits = defineEmits(['changeTab']);
   const eventValue = ref(props.eventData.type);
@@ -247,6 +258,18 @@
       };
     });
   };
+  // 获取消息分类
+  const getMsgTypeList = async () => {
+    const data = await getLoad({
+      code: 'websocket',
+    });
+    data.forEach((item) => {
+      messageOptions.value.push({
+        label: item.itemName,
+        value: item.itemValue,
+      });
+    });
+  };
   onMounted(() => {
     routeOptions.value = [
       {
@@ -256,6 +279,7 @@
     ];
     getRouteList();
     getPublishedPageList();
+    getMsgTypeList();
   });
 </script>
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/index.vue

@@ -62,7 +62,7 @@
               :key="panel.type"
               :name="'交互' + (Number(panelIndex) + 1) + '-' + getEventName(panel.type)"
             >
-              <EventItem :eventData="panel" @changeTab="changeTab" />
+              <EventItem :eventType="panel.type" :eventData="panel" @changeTab="changeTab" />
             </n-tab-pane>
             <template #prefix> 事件 <n-icon :component="HandLeftOutline" /></template>
           </n-tabs>

src/views/chart/ContentConfigurations/components/hooks/eventData.hook.ts

@@ -22,6 +22,10 @@ export const eventTypeOptions: EventOptionsItemType[] = [
     label: '鼠标移出',
     value: 'mouseout',
   },
+  {
+    label: '前后端通信',
+    value: 'websocket',
+  },
 ];
 // * 动作类型
 export const movementTypeOptions: EventOptionsItemType[] = [

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -119,5 +119,6 @@
 <style lang="scss" scoped>
   .chart-item {
     position: absolute;
+    cursor: pointer;
   }
 </style>

src/views/preview/suspenseIndex.vue

@@ -23,6 +23,7 @@
         <div :style="previewRefStyle" v-if="show">
           <!-- 渲染层 -->
           <preview-render-list></preview-render-list>
+          <!-- <button @click="test">测试</button> -->
         </div>
       </div>
     </template>
@@ -30,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, watch } from 'vue';
+  import { computed, watch, onMounted, ref } from 'vue';
   import { PreviewRenderList } from './components/PreviewRenderList';
   import { getFilterStyle, setTitle } from '@/utils';
   import {
@@ -46,13 +47,15 @@
   import type { ChartEditStorageType } from './index.d';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useRoute } from 'vue-router';
+  import { EventBus } from '@/utils/eventBus';
+  import { websocketEvent, eventCommonHandler } from '@/hooks/eventHandler.hook';
 
   // const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
   const route = useRoute();
 
   await getSessionStorageInfo();
   const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType;
-  console.log('chartEditStore', chartEditStore);
+
   setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`);
 
   const previewRefStyle = computed(() => {
@@ -80,6 +83,82 @@
       location.reload();
     },
   );
+  const createListeningEvent = (value) => {
+    chartEditStore.getComponentList.forEach((item) => {
+      item.events.interactConfigEvents.forEach((event) => {
+        if (event.type == 'websocket') {
+          eventCommonHandler(chartEditStore.getComponentList, event.movementList, value);
+          websocketEvent(event.movementList, value);
+        }
+      });
+    });
+  };
+  const myWebSocket = ref();
+  const lockReconnect = ref(false);
+  const myWebSocketTimer = ref();
+
+  function websocketReconnect() {
+    if (lockReconnect.value) {
+      // 是否已经执行重连
+      return;
+    }
+    lockReconnect.value = true;
+    // 没连接上会一直重连，设置延迟避免请求过多
+    var tt = null;
+    tt && clearTimeout(tt);
+
+    tt = setTimeout(function () {
+      initWebSocket();
+      lockReconnect.value = false;
+      // console.log("正在发起1次WebSocket重连")
+    }, 120000);
+  }
+  function initWebSocket() {
+    if ('WebSocket' in window) {
+      myWebSocket.value = new WebSocket('ws://192.168.10.163:9000');
+      myWebSocket.value.onopen = function () {
+        console.log('websocket连接成功');
+        if (myWebSocketTimer.value) {
+          clearInterval(myWebSocketTimer.value);
+        }
+        webSocketHeart();
+      };
+
+      myWebSocket.value.onmessage = function (evt) {
+        const data = JSON.parse(evt.data);
+        console.log('websock-message', data);
+        createListeningEvent(data);
+      };
+      myWebSocket.value.onclose = function () {
+        // 如果断开则重新连接
+        websocketReconnect();
+      };
+    } else {
+      alert('您的浏览器不支持 WebSocket!');
+    }
+  }
+
+  function webSocketHeart() {
+    //长连接心跳检测
+    let total = 1;
+    myWebSocketTimer.value = setInterval(function () {
+      if (myWebSocket.value) {
+        // console.log("WebSocket","向服务器发送了第"+total+"条心跳检测消息");
+        // myWebSocket.value.send('发送数据');
+        total = total + 1;
+      }
+    }, 30000);
+  }
+  const test = () => {
+    const data = {
+      type: 'type1',
+      data: 'test',
+    };
+    myWebSocket.value.send(JSON.stringify(data));
+  };
+  onMounted(() => {
+    initWebSocket();
+  });
 </script>
 
 <style lang="scss" scoped>