实时标绘 发送数据

.env.development

@@ -18,7 +18,7 @@ VITE_APP_MONITOR_ADMIN = 'http://localhost:9090/admin/applications'
 # SnailJob 控制台地址
 VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
 
-VITE_APP_PORT = 8086
+VITE_APP_PORT = 8087
 
 # 接口加密功能开关(如需关闭 后端也必须对应关闭)
 VITE_APP_ENCRYPT = false

src/api/globalMap/onlinePlotting.ts

@@ -66,7 +66,7 @@ export const addWsUser = (data) => {
   });
 };
 
-// 关闭协同
+// 关闭用户协同
 export const endCollaboration = (data) => {
   return request({
     url: '/api/pattern/ws/delete_user',

src/hooks/AMap/useDrawTool.ts

@@ -53,6 +53,7 @@ export function useDrawTool() {
     if (['circle', 'rectangle', 'polygon', 'measureArea'].includes(newOptions.graphicsType)) {
       drawOptions = {
         type: newOptions.graphicsType,
+        title: newOptions.title,
         strokeColor: !!data.color ? data.color : newOptions.color,
         strokeOpacity: 1,
         strokeWeight: newOptions.lineWidth,
@@ -63,6 +64,7 @@ export function useDrawTool() {
     } else if (['anyLine', 'straightLine'].includes(newOptions.graphicsType)) {
       drawOptions = {
         type: newOptions.graphicsType,
+        title: newOptions.title,
         strokeColor: !!data.color ? data.color : newOptions.color,
         strokeOpacity: data.opacity,
         strokeWeight: newOptions.lineWidth,
@@ -74,11 +76,13 @@ export function useDrawTool() {
         anchor: 'bottom-center',
         title: newOptions.title,
         icon: newOptions.icon,
+        iconName: newOptions.iconName,
         size: [newOptions.size[0], newOptions.size[1]]
       };
     } else if (newOptions.graphicsType === 'text') {
       drawOptions = {
         type: newOptions.graphicsType,
+        title: newOptions.title,
         text: newOptions.text,
         fontSize: newOptions.fontSize,
         fontColor: newOptions.fontColor,

src/utils/websocket.ts

@@ -44,7 +44,7 @@ const heartCheck = {
 
   start: function () {
     this.timeoutObj = setInterval(function () {
-      if (connectState) webSock.send(JSON.stringify({ type: 0 }));
+      if (connectState) webSock.send(JSON.stringify({ operation: 'heartCheck' }));
     }, this.timeout);
   },
 
@@ -97,7 +97,7 @@ function websocketClose() {
 
 // 数据接收
 function websocketOnMessage(msg) {
-  if (!msg || !msg.data) {
+  if (!msg || !msg.data || msg.data === 'null') {
     // 可能得情况 - 心跳机制、无关信息接收
     console.log('收到数据：空消息');
     return;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -383,6 +383,7 @@ let showTextEdit = ref();
 let lnglat = ref([]);
 // 协同
 let collaboration = ref(false);
+let webSock;
 // 分享
 let shareState = reactive({
   type: '',
@@ -436,6 +437,7 @@ const clickTab3 = (item, index) => {
   if (mouseToolState.value.graphicsType !== type || (mouseToolState.value.graphicsType === 'marker' && mouseToolState.value.title !== item.name)) {
     if (type === 'text') {
       mouseToolState.value.graphicsType = type;
+      mouseToolState.value.title = item.name;
       handleTextEdit();
     } else if (type === 'marker') {
       const data = {
@@ -453,6 +455,7 @@ const clickTab3 = (item, index) => {
       showTextEdit.value = false;
       drawing.value = true;
       mouseToolState.value.graphicsType = type;
+      mouseToolState.value.title = item.name;
     }
     const drawTool = getDrawTool();
     const newOptions = drawTool.drawGraphics(mouseToolState.value);
@@ -483,8 +486,10 @@ const handleClickMap = (e) => {
 const addText = (textEditState) => {
   const data = {
     graphicsType: 'text',
+    type: 'text',
     lineWidth: mouseToolState.value.lineWidth,
     color: mouseToolState.value.color,
+    title: '文本',
     text: textEditState.text,
     fontColor: textEditState.fontColor,
     fontSize: textEditState.fontSize,
@@ -503,6 +508,14 @@ const addText = (textEditState) => {
   const map = drawTool.getMap();
   // 监听地图点击事件
   map.off('click', handleClickMap);
+  webSock.send(
+    JSON.stringify({
+      operation: 'add', // 必填
+      name: data.title, // 必填
+      content: JSON.stringify(data), // 必填
+      visible: false
+    })
+  );
   close();
 };
 // watch(
@@ -590,6 +603,17 @@ const initDrawMethod = (options) => {
     }
     // 右击进入编辑
     obj.on('rightclick', handleRightClick);
+    // 发送
+    if (!!collaboration.value) {
+      webSock.send(
+        JSON.stringify({
+          operation: 'add', // 必填
+          name: data.title, // 必填
+          content: JSON.stringify(data), // 必填
+          visible: false
+        })
+      );
+    }
   };
   mouseTool.on('draw', onDraw);
 };
@@ -758,14 +782,19 @@ const handleShareConfirm = (data) => {
     data.forEach((item) => {
       userIdList.push(item.userId);
     });
-    let content = currentState.value.length > 0 ? JSON.stringify(currentState.value[currentState.value.length - 1]) : '';
+    let list = [];
+    currentState.value.forEach((item) => {
+      list.push({
+        name: item.title,
+        visible: 'true',
+        content: JSON.stringify(item)
+      });
+    });
     form.value = {
       pattern_id: nanoid(),
       user_id_list: userIdList,
-      name: '',
       pattern_name: '',
-      visible: 'false',
-      content: content
+      bz_list: list
     };
     showForm.value = true;
   } else {
@@ -777,17 +806,18 @@ const handleShareConfirm = (data) => {
 const getWebSocketData = (data) => {
   console.log('接收数据', data);
 };
+
 const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  createWebSocket('2-85yd6_ZmiYDoZTezv5S', getWebSocketData);
-  patternId.value = '2-85yd6_ZmiYDoZTezv5S';
+  webSock = createWebSocket('eZokH5XO6VC6xIXEHirTF', getWebSocketData);
+  patternId.value = 'eZokH5XO6VC6xIXEHirTF';
   // createCollaboration(form.value).then(() => {
   //   patternId.value = form.value.pattern_id;
-  //   createWebSocket(form.value.pattern_id, getWebSocketData);
-    showForm.value = false;
-    collaboration.value = true;
+  //   webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
+  showForm.value = false;
+  collaboration.value = true;
   // });
 };
 const handleShowDialog = () => {