实时标绘 开启、回显数据

src/api/globalMap/onlinePlotting.ts

@@ -42,11 +42,10 @@ export const createPattern = (data) => {
 };
 
 // 创建预案
-export const getPatternList2 = (params) => {
+export const getPatternList2 = () => {
   return request({
     url: '/api/pattern/ws/list',
-    method: 'get',
-    params: params
+    method: 'get'
   });
 };
 

src/api/onlineRollCall/index.ts

@@ -106,3 +106,73 @@ export function getCallSummary(params) {
         params: params
     });
 }
+
+// 创建协同
+export const createCollaboration = (data) => {
+    return request({
+        url: '/api/pattern/ws/create',
+        method: 'post',
+        data: data
+    });
+};
+// 开启协同
+export const startCollaboration = (data) => {
+    return request({
+        url: '/api/pattern/ws/reset_user',
+        method: 'put',
+        data: data
+    });
+};
+// 增加协同用户
+export const addWsUser = (data) => {
+    return request({
+        url: '/api/pattern/ws/add_user',
+        method: 'post',
+        data: data
+    });
+};
+
+// 关闭用户协同
+export const endCollaboration = (data) => {
+    return request({
+        url: '/api/pattern/ws/delete_user',
+        method: 'put',
+        data: data
+    });
+};
+
+// 关闭协同
+export const closeCollaboration = (data) => {
+    return request({
+        url: '/api/pattern/ws/delete_all_user',
+        method: 'put',
+        data: data
+    });
+};
+
+// 标注列表
+export const getBzList = (params) => {
+    return request({
+        url: '/api/pattern/ws/bz_list',
+        method: 'get',
+        params: params
+    });
+};
+
+// 添加分组
+export const addGroup = (data) => {
+    return request({
+        url: '/api/pattern/ws/add_group',
+        method: 'post',
+        data: data
+    });
+};
+
+// 协同用户
+export const getPatternUserList = (params) => {
+    return request({
+        url: '/api/pattern/ws/user_list',
+        method: 'get',
+        params: params
+    });
+};

src/components/Map/index.vue

@@ -371,5 +371,11 @@ onUnmounted(() => {
   :deep(.amap-copyright) {
     display: none !important;
   }
+  :deep(.amap-marker-label) {
+    border: 1px solid #474747;
+    background-color: rgba(255, 255, 255, 0.65);
+    padding: 3px 8px;
+    border-radius: 4px;
+  }
 }
 </style>

src/hooks/AMap/useAMap.ts

@@ -324,7 +324,6 @@ export function useAMap(options) {
   const drawData = (data) => {
     data.forEach((item) => {
       let graphic;
-      // debugger
       if (['rectangle', 'polygon'].includes(item.type)) {
         graphic = new AMap.Polygon({
           path: item.path,
@@ -369,7 +368,6 @@ export function useAMap(options) {
         map.add(graphic);
         // 计算区域面积
         const area = Math.round(AMap.GeometryUtil.ringArea(item.path));
-
         const text = new AMap.Text({
           position: item.path[item.path.length - 1],
           text: '区域面积' + area + '平方米',
@@ -378,7 +376,20 @@ export function useAMap(options) {
         data.area = area;
         map.add(text);
       } else if (item.type === 'marker') {
-        addMarker([item], true);
+        // 创建标注点
+        const marker = new AMap.Marker({
+          position: new AMap.LngLat(item.longitude, item.latitude), // 标注点的位置
+          icon: new AMap.Icon({
+            size: item.size,  //图标所处区域大小
+            image: item.icon
+          }),
+          size: item.size
+        });
+        marker.setLabel({
+          content: '<div>' + item.title + '</div>',
+          direction: 'top'
+        });
+        map.add(marker);
       }
     });
   };

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

@@ -11,7 +11,6 @@ function createWebSocket(id, callback) {
   if (webSock != null) {
     return;
   }
-  debugger
   webSock = new WebSocket(wsUrl + id + '/ws');
 
   global_callback = callback;
@@ -45,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);
   },
 
@@ -98,7 +97,7 @@ function websocketClose() {
 
 // 数据接收
 function websocketOnMessage(msg) {
-  if (!msg || !msg.data) {
+  if (!msg || !msg.data || msg.data === 'null') {
     // 可能得情况 - 心跳机制、无关信息接收
     console.log('收到数据：空消息');
     return;
@@ -135,7 +134,6 @@ const websocketError = () => {
 };
 
 function websocketOpen() {
-  debugger
   webSock.send('Authorization: Bearer ' + getToken());
   connectState = true;
   heartCheck.start(); //发送心跳 看个人项目需求

src/views/mobileControl/OnlinePlotting/index.vue

@@ -39,19 +39,21 @@
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
-import {computed, inject, onMounted, reactive, ref, watch} from "vue";
+import {computed, inject, reactive, ref, watch} from "vue";
 import {nanoid} from "nanoid";
 import {deepClone} from "@/utils";
 import {useHistory} from "@/hooks/useHistory";
 import { ElColorPicker } from 'element-plus';
 import TextEdit from "./TextEdit.vue";
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(['update:modelValue', 'update:onlinePlottingId', 'handleSendData']);
+const getMapUtils = inject('getMapUtils');
 const getDrawTool = inject('getDrawTool');
 const getMap = inject('getMap');
 const { currentState, commit, undo, history, future } = useHistory();
 const props = defineProps({
-  modelValue: Boolean
+  modelValue: Boolean,
+  onlinePlottingId: String
 });
 let drawing = ref(false);
 const mouseToolState = ref({
@@ -67,6 +69,7 @@ const show = computed({
     emits('update:modelValue', value);
   }
 });
+
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/map/onlinePlotting/icon/${name}.png`, import.meta.url).href;
 };
@@ -144,98 +147,97 @@ const menu = ref([
         name: '火点',
         value: 'firePoint',
         children: [
-          { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: getImageUrl('firePoint'), size: [55, 29] },
-          { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: getImageUrl('smokePoint'), size: [55, 29] },
-          { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: getImageUrl('extinguishedPoint'), size: [55, 29] }
+          { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: 'firePoint', size: [55, 29] },
+          { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: 'smokePoint', size: [55, 29] },
+          { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: 'extinguishedPoint', size: [55, 29] }
         ]
       },
       {
         name: '火线',
         value: 'firewire',
         children: [
-          { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: getImageUrl('firewire'), size: [55, 29] },
-          { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: getImageUrl('controlledfireline'), size: [55, 29] },
-          { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: getImageUrl('extinguishedline'), size: [55, 29] },
-          { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: getImageUrl('StrongFrontline'), size: [55, 29] },
-          { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: getImageUrl('ZhongxianLine'), size: [55, 29] },
-          { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: getImageUrl('WeakFrontline'), size: [55, 29] }
+          { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: 'firewire', size: [55, 29] },
+          { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: 'controlledfireline', size: [55, 29] },
+          { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: 'extinguishedline', size: [55, 29] },
+          { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: 'StrongFrontline', size: [55, 29] },
+          { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: 'ZhongxianLine', size: [55, 29] },
+          { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: 'WeakFrontline', size: [55, 29] }
         ]
       },
       {
         name: '火场',
         value: 'fireGround',
         children: [
-          { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: getImageUrl('fireground'), size: [55, 29] },
-          { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: getImageUrl('controlledfireground'), size: [55, 29] },
-          { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: getImageUrl('extinguishedfireground'), size: [55, 29] }
+          { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: 'fireground', size: [55, 29] },
+          { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: 'controlledfireground', size: [55, 29] },
+          { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: 'extinguishedfireground', size: [55, 29] }
         ]
       },
       {
         name: '箭头',
         value: 'arrow',
         children: [
-          { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: getImageUrl('curvedarrow'), size: [55, 29] },
-          { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: getImageUrl('straightarrow1'), size: [55, 29] },
-          { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: getImageUrl('thinarrow'), size: [55, 29] }
+          { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: 'curvedarrow', size: [55, 29] },
+          { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: 'straightarrow1', size: [55, 29] },
+          { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: 'thinarrow', size: [55, 29] }
         ]
       },
       // {
       //   name: '导航',
       //   value: 'navigation',
       //   children: [
-      //     { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [55, 29] }
+      //     { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: 'navigation', size: [55, 29] }
       //   ]
       // },
       {
         name: '扑救队伍',
         value: 'firefightingTeam',
         children: [
-          { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: getImageUrl('commandcentre'), size: [55, 29] },
-          { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: getImageUrl('dividingcenter'), size: [55, 29] },
-          { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: getImageUrl('rendezvous'), size: [55, 29] },
-          { name: '军队', value: 'marker', image: getImageUrl('army'), icon: getImageUrl('army'), size: [55, 29] },
-          { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: getImageUrl('armedpolice'), size: [55, 29] },
-          { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: getImageUrl('forestpoliceman'), size: [55, 29] },
-          { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: getImageUrl('firefightingteam'), size: [55, 29] },
-          // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: getImageUrl('Firefightingteamroute'), size: [55, 29] }
+          { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: 'commandcentre', size: [55, 29] },
+          { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: 'dividingcenter', size: [55, 29] },
+          { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: 'rendezvous', size: [55, 29] },
+          { name: '军队', value: 'marker', image: getImageUrl('army'), icon: 'army', size: [55, 29] },
+          { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: 'armedpolice', size: [55, 29] },
+          { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: 'forestpoliceman', size: [55, 29] },
+          { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: 'firefightingteam', size: [55, 29] },
+          // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: 'Firefightingteamroute', size: [55, 29] }
         ]
       },
       {
         name: '飞机车辆',
         value: 'aircraftVehicles',
         children: [
-          { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: getImageUrl('fixedwing'), size: [55, 29] },
-          { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: getImageUrl('helicopter'), size: [55, 29] },
-          { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: getImageUrl('UAV'), size: [55, 29] },
-          { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: getImageUrl('commandvehicle'), size: [55, 29] },
-          { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: getImageUrl('aircraftroutesetting'), size: [55, 29] },
-          { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: getImageUrl('helicopterroutesetting'), size: [55, 29] }
+          { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: 'fixedwing', size: [55, 29] },
+          { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: 'helicopter', size: [55, 29] },
+          { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: 'UAV', size: [55, 29] },
+          { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: 'commandvehicle', size: [55, 29] },
+          { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: 'aircraftroutesetting', size: [55, 29] },
+          { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: 'helicopterroutesetting', size: [55, 29] }
         ]
       },
       {
         name: '基础设置',
         value: 'basicSetting',
         children: [
-          { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: getImageUrl('terminal'), size: [55, 29] },
-          { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: getImageUrl('takeoffandlandingpoint'), size: [55, 29] },
-          { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: getImageUrl('waterpoint'), size: [55, 29] },
-          { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: getImageUrl('watchtower'), size: [55, 29] },
-          { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: getImageUrl('materialwarehouse'), size: [55, 29] },
-
+          { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: 'terminal', size: [55, 29] },
+          { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: 'takeoffandlandingpoint', size: [55, 29] },
+          { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: 'waterpoint', size: [55, 29] },
+          { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: 'watchtower', size: [55, 29] },
+          { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: 'materialwarehouse', size: [55, 29] },
         ]
       },
       // {
       //   name: '其他',
       //   value: 'other',
       //   children: [
-      //     { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: getImageUrl('dangerousarea'), size: [55, 29] },
-      //     { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: getImageUrl('Isolationzonemining'), size: [55, 29] },
-      //     { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: getImageUrl('emergencyshelter'), size: [55, 29] },
-      //     { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: getImageUrl('windspeedanddirection'), size: [55, 29] },
-      //     { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: getImageUrl('ranging'), size: [55, 29] },
-      //     { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: getImageUrl('strongwind'), size: [55, 29] },
-      //     { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: getImageUrl('artificialrainfall'), size: [55, 29] },
-      //     { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: getImageUrl('typhoon'), size: [55, 29] }
+      //     { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: 'dangerousarea', size: [55, 29] },
+      //     { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: 'Isolationzonemining', size: [55, 29] },
+      //     { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: 'emergencyshelter', size: [55, 29] },
+      //     { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: 'windspeedanddirection', size: [55, 29] },
+      //     { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: 'ranging', size: [55, 29] },
+      //     { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: 'strongwind', size: [55, 29] },
+      //     { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: 'artificialrainfall', size: [55, 29] },
+      //     { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: 'typhoon', size: [55, 29] }
       //   ]
       // }
     ]
@@ -250,20 +252,18 @@ const menu = ref([
 // 点击三级菜单
 const clickTab = (item, index) => {
   const type = item.value;
-  // getMap().setStatus({
-  //   dragEnable: false,
-  //   doubleClickZoom: false
-  // })
   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 = {
         graphicsType: type,
         lineWidth: mouseToolState.value.lineWidth,
         color: mouseToolState.value.color,
-        icon: item.icon,
+        icon: getImageUrl(item.icon),
+        iconName: item.icon,
         size: item.size,
         title: item.name
       };
@@ -273,6 +273,7 @@ const clickTab = (item, index) => {
       showTextEdit.value = false;
       drawing.value = true;
       mouseToolState.value.graphicsType = type;
+      mouseToolState.value.title = item.name;
     }
     emits('update:modelValue', false);
     const drawTool = getDrawTool();
@@ -304,8 +305,10 @@ const handleTextEdit = () => {
 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,
@@ -325,7 +328,23 @@ const addText = (textEditState) => {
   // 监听地图点击事件
   map.off('click', handleClickMap);
   close();
+  emits('handleSendData', JSON.stringify({
+    operation: 'add', // 必填
+    name: data.title, // 必填
+    content: JSON.stringify(data), // 必填
+    visible: false
+  }));
 };
+watch(() => props.onlinePlottingId, () => {
+  if (props.onlinePlottingId !== null) {
+    const drawTool = getDrawTool();
+    const map = drawTool.getMap();
+    if (!!map) {
+      map.off('click', handleClickMap);
+    }
+    close();
+  }
+});
 const close = () => {
   const drawTool = getDrawTool();
   drawTool.closeDraw();
@@ -340,10 +359,6 @@ const initDrawMethod = (options) => {
 
   const onDraw = (event) => {
     mouseTool.off('draw', onDraw);
-    // getMap().setStatus({
-    //   dragEnable: true,
-    //   doubleClickZoom: true
-    // })
     close();
     const obj = event.obj;
     const id = nanoid();
@@ -354,7 +369,17 @@ const initDrawMethod = (options) => {
     data.id = id;
     if (options.type == 'marker') {
       const position = obj.getPosition();
-      data.path = [position.lng, position.lat];
+      data.lnglat = [position.lng, position.lat];
+      data.latitude = position.lat;
+      data.longitude = position.lng;
+      data.icon = data.iconName;
+      data.image = data.iconName;
+      data.imageHover = data.iconName;
+      data.visible = true;
+      obj.setLabel({
+        content: '<div>' + data.title + '</div>',
+        direction: 'top'
+      });
     } else {
       const path = obj.getPath();
       // 将AMap.LngLat对象数组转换为经纬度数组
@@ -394,6 +419,12 @@ const initDrawMethod = (options) => {
     }
     // 右击进入编辑
     obj.on('rightclick', handleRightClick);
+    emits('handleSendData', JSON.stringify({
+      operation: 'add', // 必填
+      name: data.title, // 必填
+      content: JSON.stringify(data), // 必填
+      visible: false
+    }))
   };
   mouseTool.on('draw', onDraw);
 };
@@ -446,6 +477,22 @@ const removeOverlayByIndex = (index: number) => {
   overlays.splice(index, 1);
   overlaysData.splice(index, 1);
 };
+const getWebSocketData = (data) => {
+  if(data && data.length > 0) {
+    const data2 = []
+    data.forEach((item) => {
+      if (!!item.content) {
+        const parseContent =  JSON.parse(item.content);
+        if (parseContent.type === 'marker' && !!parseContent.icon) {
+          parseContent.icon = getImageUrl(parseContent.icon);
+        }
+        data2.push(parseContent);
+      }
+    })
+    getMapUtils().drawData(data2);
+  }
+}
+defineExpose({ getWebSocketData })
 </script>
 
 <style lang="scss" scoped>

src/views/mobileControl/index.vue

@@ -132,13 +132,13 @@
           @confirm="onConfirm"
       />
     </van-popup>
-    <OnlinePlotting ref="onlinePlotting" v-model="showOnlinePlotting2" />
+    <OnlinePlotting ref="onlinePlotting" v-model="showOnlinePlotting2" :onlinePlottingId="onlinePlottingId" @handleSendData="handleSendData" />
     <MaterialManage v-model="materialManageHeight" />
   </div>
 </template>
 
 <script lang="ts" setup name="mobileControl">
-import {onMounted, provide, reactive, ref} from "vue";
+import {nextTick, onMounted, provide, reactive, ref} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import EventBox from "./EventBox.vue";
 import SearchBtn from "./SearchBtn.vue";
@@ -151,8 +151,9 @@ import { closeEvent, getEventDetail } from "@/api/event";
 import LayerBox from "./LayerBox.vue";
 import OnlinePlotting from "./OnlinePlotting/index.vue";
 import MaterialManage from "@/views/mobileControl/MaterialManage.vue";
-import {getPatternList2, startCollaboration} from "@/api/globalMap/onlinePlotting";
 import {createWebSocket} from "@/utils/websocket";
+import {getPatternList2} from "@/api/globalMap/onlinePlotting";
+import {closeCollaboration} from "@/api/onlineRollCall";
 
 const router = useRouter();
 const route = useRoute();
@@ -296,10 +297,27 @@ const endProcess = () => {
   });
 };
 // 协同标绘
+let onlinePlotting = ref();
 let showOnlinePlotting = ref(false);
 let showOnlinePlotting2 = ref(false);
 let onlinePlottingId = ref('');
 let columns = ref([]);
+let webSock;
+const onCancel = () => {
+  showOnlinePlotting2.value = false;
+}
+const getWebSocketData = (data) => {
+  onlinePlotting.value.getWebSocketData(data);
+  console.log('接收数据', data);
+};
+const onConfirm = (data) => {
+  onlinePlottingId.value = data.selectedValues[0];
+  nextTick(() => {
+    webSock = createWebSocket(onlinePlottingId.value, getWebSocketData);
+    showOnlinePlotting.value = false;
+    showOnlinePlotting2.value = true;
+  })
+}
 const handleShowOnlinePlotting = () => {
   if (!!onlinePlottingId.value) {
     showOnlinePlotting2.value = true;
@@ -308,25 +326,15 @@ const handleShowOnlinePlotting = () => {
   }
 }
 const closeOnlinePlotting = () => {
-  onlinePlottingId.value = '';
+  // closeCollaboration({ pattern_id: onlinePlottingId.value }).then(() => {
+    onlinePlottingId.value = '';
+  // });
 }
 const getOnlinePlotting = () => {
   getPatternList2().then((res) => {
     columns.value = res.data;
   })
 }
-const onCancel = () => {
-  showOnlinePlotting.value = false;
-}
-const getWebSocketData = (data) => {
-  console.log('接收数据', data);
-};
-const onConfirm = (data) => {
-  onlinePlottingId.value = data.selectedValues[0]
-  createWebSocket(onlinePlottingId.value, getWebSocketData);
-  showOnlinePlotting.value = false;
-  showOnlinePlotting2.value = true;
-}
 //
 let materialManageHeight = ref(0);
 const handleShowMaterialManage = () => {
@@ -376,6 +384,9 @@ const getMapUtils = () => {
   }
   return {};
 };
+const handleSendData = (data) => {
+  webSock.send(data);
+}
 provide('getMapUtils', getMapUtils);
 provide('getMap', getMap);
 provide('getDrawTool', getDrawTool);