实时标绘 发送数据

src/api/globalMap/onlinePlotting.ts

@@ -67,7 +67,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

@@ -361,6 +361,7 @@ let showTextEdit = ref();
 let lnglat = ref([]);
 // 协同
 let collaboration = ref(false);
+let webSock;
 // 分享
 let shareState = reactive({
   type: '',
@@ -414,6 +415,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 = {
@@ -431,6 +433,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);
@@ -461,8 +464,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,
@@ -568,6 +573,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);
 };
@@ -735,14 +751,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 {
@@ -758,8 +779,8 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  createWebSocket('G8RpcIZ6MVdj_PA_a2SY3', getWebSocketData);
-  patternId.value = 'G8RpcIZ6MVdj_PA_a2SY3';
+  createWebSocket('eZokH5XO6VC6xIXEHirTF', getWebSocketData);
+  patternId.value = 'eZokH5XO6VC6xIXEHirTF';
   // createCollaboration(form.value).then(() => {
   //   patternId.value = form.value.pattern_id;
   //   createWebSocket(form.value.pattern_id, getWebSocketData);