协同标绘加入功能、定点分析修复bug

src/api/globalMap/onlinePlotting.ts

@@ -8,6 +8,13 @@ export const getPatternList = (params) => {
     params: params
   });
 };
+// 创建预案
+export const getPatternList2 = () => {
+  return request({
+    url: '/api/pattern/ws/list',
+    method: 'get'
+  });
+};
 // 删除预案
 export const deletePatternById = (id) => {
   return request({

src/components/HKVideo/index2.vue

@@ -84,7 +84,7 @@ interface Props {
   height?: number;
   autoplay?: boolean;
   isIndex?: boolean;
-  hiddenCollect: boolean;
+  hiddenCollect?: boolean;
   isNoLive?: boolean;
 }
 

src/views/comprehensiveGuarantee/electronicDisasterMapManage/index.vue

@@ -721,7 +721,7 @@ onMounted(() => {
   initData();
 });
 onUnmounted(() => {
-  if (!!map) {
+   if (!!map && Object.keys(map).length !== 0) {
     map.on('click', handleClickMap);
   }
 });

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">定点分析</div>
+    <div class="gradient-text common-dialog-title2">定点分析</div>
     <div class="scroll-box">
       <div class="search-box">
         <di class="text-box">
@@ -547,6 +547,10 @@ onMounted(() => {
   }
   getAddress(props.location);
 });
+
+onUnmounted(() => {
+  clearMarker();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -564,6 +568,7 @@ onMounted(() => {
     height: 665px;
     position: relative;
     overflow-y: auto;
+    overflow-x: hidden;
   }
   .search-box {
     width: 100%;

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="poltting-container">
+    <Dialog custom-show title="协同标绘" type="xs" @close="handleClose" @confirm="handleConfirm">
+      <div style="display: flex; align-items: center">
+        <div style="font-size: 16px; flex-shrink: 0">协同案例：</div>
+        <el-select v-model="id" placeholder="请选择" class="custom-select" popper-class="custom-select-popper" :teleported="false">
+          <el-option v-for="item in columns" :key="item.pattern_id" :label="item.pattern_name" :value="item.pattern_id" />
+        </el-select>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getPatternList2 } from '@/api/globalMap/onlinePlotting';
+
+const props = defineProps({
+  modelValue: Boolean
+});
+const emits = defineEmits(['update:modelValue', 'confirm']);
+const id = ref('');
+const columns = ref([]);
+const getOnlinePlotting = () => {
+  getPatternList2().then((res) => {
+    columns.value = res.data;
+  });
+};
+getOnlinePlotting();
+
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+
+const handleConfirm = () => {
+  emits('confirm', id.value);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.dialog-content) {
+  overflow: unset !important;
+}
+</style>

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

@@ -3,7 +3,7 @@
     <div class="gradient-text common-dialog-title2">实时标绘</div>
     <div v-show="collaboration" style="display: flex; align-items: center; justify-content: flex-end">
       <div class="btn2" style="margin-left: 10px" @click="handleCloseCollaboration">关闭协同</div>
-      <div class="btn2" style="margin-left: 10px">保存</div>
+<!--      <div class="btn2" style="margin-left: 10px">保存</div>-->
     </div>
     <div class="line">
       <div class="tabs1">
@@ -16,7 +16,7 @@
           <div class="icon1" />
           当前地图截图导出
         </div>
-        <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>
+        <div v-show="!collaboration" class="btn2" @click="handlePlotting()">协同标绘</div>
         <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
       </div>
     </div>
@@ -169,7 +169,13 @@
     </div>
   </div>
   <!--添加修改分类弹窗-->
-  <EditClassDialog v-if="showAddDialog" v-model="showAddDialog" :id="selectEditId" :templateId="selectTemplateId" @updateData="getTemplateTreeData" />
+  <EditClassDialog
+    v-if="showAddDialog"
+    :id="selectEditId"
+    v-model="showAddDialog"
+    :template-id="selectTemplateId"
+    @update-data="getTemplateTreeData"
+  />
   <!--添加文字-->
   <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
   <!--绘制提示信息-->
@@ -177,13 +183,15 @@
   <!--保存修改弹窗-->
   <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
   <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
-  <Dialog v-if="showForm" v-model="showForm" customShow title="协同标绘" type="xs" @close="showForm = false" @confirm="handleSendForm">
+  <Dialog v-if="showForm" v-model="showForm" custom-show title="协同标绘" type="xs" @close="showForm = false" @confirm="handleSendForm">
     <div style="display: flex; align-items: center">
       <div style="font-size: 16px">预案名称：</div>
       <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
     </div>
   </Dialog>
-  <LayerDetail v-if="showLayer" v-model="showLayer" :patternId="patternId" />
+  <LayerDetail v-if="showLayer" v-model="showLayer" :pattern-id="patternId" />
+  <!--协同标绘选择弹窗-->
+  <SelectPoltting v-if="showOnlinePlotting" v-model="showOnlinePlotting" @confirm="handleOpenPlotting" />
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
@@ -201,7 +209,7 @@ import {
   deleteClassificationCreate,
   deletePatternById,
   getPatternInfo,
-  getPatternList,
+  getPatternList, getPatternList2,
   getTemplateTree
 } from '@/api/globalMap/onlinePlotting';
 import { Search } from '@element-plus/icons-vue';
@@ -212,6 +220,7 @@ import * as turf from '@turf/turf';
 import Style from 'ol/style/Style';
 import Icon from 'ol/style/Icon';
 import useMapStore from '@/store/modules/map';
+import SelectPoltting from '@/views/globalMap/RightMenu/OnlinePlotting/SelectPoltting.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const mapStore = useMapStore();
@@ -264,6 +273,7 @@ let shareId = ref('');
 let overlays = [];
 let overlaysData = [];
 let map, mapUtils;
+
 watch(
   () => mapStore.mapLoaded,
   (loaded) => {
@@ -307,7 +317,7 @@ const tipTitle = computed(() => {
 
 // 获取模板分类树
 const getTemplateTreeData = () => {
-  getTemplateTree({ visible: showSetting.value ? '' : '1'}).then((res) => {
+  getTemplateTree({ visible: showSetting.value ? '' : '1' }).then((res) => {
     menu.value[0].children = res.data;
   });
 };
@@ -568,7 +578,7 @@ const initDrawMethod = (options) => {
               anchorYUnits: 'fraction',
               size: [width, height],
               scale: !!options.size[0] ? options.size[0] / width : 1
-            }),
+            })
             // text: new Text({
             //   text: data.title, // 使用属性中的值作为文本
             //   font: '14px sans-serif',
@@ -832,6 +842,13 @@ const handleEdit = (id) => {
   });
   showEdit.value = true;
 };
+// 实时标绘
+let showOnlinePlotting = ref(false);
+
+// 协同标绘选择
+const handlePlotting = () => {
+  showOnlinePlotting.value = true;
+};
 const handleShare = (type, id?: string) => {
   shareState.type = type;
   shareState.id = id;
@@ -842,9 +859,10 @@ const handleCloseShare = () => {
   shareState.id = '';
 };
 const handleCloseCollaboration = () => {
-  closeCollaboration({ pattern_id: patternId.value }).then(() => {
-    collaboration.value = false;
-  });
+  // closeCollaboration({ pattern_id: patternId.value }).then(() => {
+  patternId.value = false;
+  collaboration.value = false;
+  // });
 };
 let showForm = ref(false);
 let form = ref({
@@ -907,6 +925,16 @@ const getWebSocketData = (data) => {
   }
   console.log('接收数据', data);
 };
+// 加入协同
+const handleOpenPlotting = (id) => {
+  patternId.value = id;
+  nextTick(() => {
+    webSock = createWebSocket(patternId.value, getWebSocketData);
+    showOnlinePlotting.value = false;
+    collaboration.value = true;
+    proxy?.$modal.msgSuccess('开启协同标绘成功');
+  });
+};
 const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');

src/views/globalMap/RightMenu/index.vue

@@ -25,7 +25,7 @@
           <div class="down-btn" @click="clickBtn('down')"></div>
         </div>
       </div>
-      <div v-show="menuState.showMenu" style="display: inline-block; pointer-events: auto; position: relative">
+      <div v-show="menuState.showMenu && menuState.menuData.length > 0" style="display: inline-block; pointer-events: auto; position: relative">
         <div class="fold-btn" @click="clickContractMenu">
           <i class="fold-icon" />
           折叠菜单
@@ -195,16 +195,16 @@ const handleMenu = (name, data) => {
 // 新增菜单 type 1 新增 2 删除
 const updateMenu = (type, menu, newLocation?: any) => {
   if (type === '1') {
-    if (menu.name === '图层分析') {
+    if (['图层分析', '定点分析'].includes(menu.name)) {
       let index = menuState.value.menuData.findIndex((item) => {
         return item.name === menu.name;
       });
       if (index === -1) {
         menuState.value.menuData.push(menu);
       }
-    } else if (menu.name === '定点分析') {
-      menuState.value.menuData.push(menu);
-      location2.value = newLocation;
+      if (menu.name === '定点分析') {
+        location2.value = newLocation;
+      }
     } else {
       menuState.value.menuData.push(menu);
     }

src/views/globalMap/index.vue

@@ -262,11 +262,16 @@ const clickMenu = (item, dataList) => {
     communicationSupport.show = !communicationSupport.show;
     communicationSupport.data = item;
   } else if (item.path === '4' && ['定点分析', '格点雨量'].includes(item.name)) {
-    // 定点分析、格点雨量
-    tempMenu.value = item;
-    //为地图注册click事件获取鼠标点击出的经纬度坐标
-    map.on('click', handleClickMap);
-    mapStore.setIsMapSelect(true);
+    if (item.name === '定点分析' && !item.checked) {
+      closeClickMap();
+      rightMenuRef.value.updateMenu('2', item, []);
+    } else {
+      // 定点分析、格点雨量
+      tempMenu.value = item;
+      //为地图注册click事件获取鼠标点击出的经纬度坐标
+      map.on('click', handleClickMap);
+      mapStore.setIsMapSelect(true);
+    }
   }
   if (['重点车辆'].includes(item.name) && !item.checked) {
     timeAxisRef.value.clearData();
@@ -484,7 +489,7 @@ watch(
     if (loaded) {
       map = getMap();
       mapUtils = getMapUtils();
-      if (!!map) {
+       if (!!map && Object.keys(map).length !== 0) {
         map.on('moveend', mapMoveEnd);
       }
       if (eventId.value) {
@@ -556,7 +561,7 @@ onMounted(() => {
   eventId.value = route.query.event_id;
 });
 onBeforeUnmount(() => {
-  if (!!map) {
+   if (!!map && Object.keys(map).length !== 0) {
     if (mapStore.isAMap) {
       map.off('click', handleClickMap);
       map.off('moveend', handleClickMap);

src/views/routineCommandMap/PositionMap.vue

@@ -191,7 +191,7 @@ onMounted(() => {
   window.addEventListener('resize', handleResize);
 });
 onUnmounted(() => {
-  if (!!map) {
+   if (!!map && Object.keys(map).length !== 0) {
     map.off('rightclick');
     map.destroy();
     map = null;