协同标绘 创建

src/api/globalMap/onlinePlotting.ts

@@ -41,6 +41,15 @@ export const createPattern = (data) => {
   });
 };
 
+// 创建协同
+export const createCollaboration = (data) => {
+  return request({
+    url: '/api/pattern/ws/create',
+    method: 'post',
+    data: data
+  });
+};
+
 // 开启协同
 export const startCollaboration = (data) => {
   return request({

src/components/Contact/index.vue

@@ -55,7 +55,7 @@
                 <div class="text2">{{ item.duty }}</div>
               </div>
               <div class="line" style="margin-top: 20px">
-                <div class="text2">{{ item.dept }}</div>
+                <div class="text2">{{ item.deptName }}</div>
               </div>
             </div>
             <div class="close-btn" @click="deleteItem(item)"></div>
@@ -201,12 +201,12 @@ onMounted(() => {
   display: flex;
   margin-top: 12px;
   .left-content {
-    width: 910px;
+    width: 303px;
     padding-right: 10px;
     border-right: 1px solid #2187ff;
   }
   .middle-content {
-    width: 910px;
+    width: 303px;
     padding: 0 10px;
     border-right: 1px solid #2187ff;
     .search-box {
@@ -326,7 +326,7 @@ onMounted(() => {
   }
   .select-box2 {
     margin-left: 30px;
-    width: 910px;
+    width: 303px;
     height: 100%;
     .select-header {
       display: flex;

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

@@ -74,14 +74,14 @@
       </div>
     </div>
     <div v-else-if="menuActive1 === 1" class="tab-content3">
-<!--      <div class="box1">-->
-<!--        <div class="box-item">-->
-<!--          <div class="btn">-->
-<!--            <div class="merge-icon"></div>-->
-<!--            合并-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
+      <!--      <div class="box1">-->
+      <!--        <div class="box-item">-->
+      <!--          <div class="btn">-->
+      <!--            <div class="merge-icon"></div>-->
+      <!--            合并-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
       <div class="params-box">
         <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
           <template #prefix>
@@ -108,11 +108,11 @@
               <div class="edit-icon"></div>
               编辑
             </div>
-<!--            <div class="line2"></div>-->
-<!--            <div class="btn">-->
-<!--              <div class="share-icon"></div>-->
-<!--              分享-->
-<!--            </div>-->
+            <div class="line2"></div>
+            <div class="btn" @click="handleShare('2', item.id)">
+              <div class="share-icon"></div>
+              分享
+            </div>
           </div>
         </div>
         <div class="footer">
@@ -136,13 +136,19 @@
   <!--保存修改弹窗-->
   <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-model="showForm" title="协同标绘" type="xs" @confirm="handleSendForm">
+    <div style="display: flex; align-items: center">
+      <div style="font-size: 36px">预案名称</div>
+      <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
+    </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
 import { nanoid } from 'nanoid';
 import { deepClone } from '@/utils';
 import { useHistory } from '@/hooks/useHistory';
-import { deletePatternById, getPatternInfo, getPatternList, startCollaboration } from '@/api/globalMap/onlinePlotting';
+import { deletePatternById, getPatternInfo, getPatternList, createCollaboration } from '@/api/globalMap/onlinePlotting';
 import TextEdit from '@/views/globalMap/RightMenu/OnlinePlotting/TextEdit.vue';
 import EditDialog from '@/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue';
 import { Search } from '@element-plus/icons-vue';
@@ -488,7 +494,12 @@ 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.image = data.icon;
+      data.image = data.icon;
+      data.imageHover = data.icon;
     } else {
       const path = obj.getPath();
       // 将AMap.LngLat对象数组转换为经纬度数组
@@ -621,6 +632,7 @@ const queryParams = reactive({
   pageSize: 9,
   pattern_name: ''
 });
+
 const patternList = ref([]);
 let total = ref(0);
 let editData = ref({
@@ -665,10 +677,6 @@ const handleEdit = (id) => {
   showEdit.value = true;
 };
 const handleShare = (type, id?: string) => {
-  if (type === '1') {
-    // 创建协同
-    collaboration.value = true;
-  }
   shareState.type = type;
   shareState.id = id;
   shareState.showShare = true;
@@ -680,17 +688,44 @@ const handleCloseShare = () => {
 const handleCloseCollaboration = () => {
   collaboration.value = false;
 };
+let showForm = ref(false);
+let form = ref({
+  pattern_id: '',
+  user_id_list: [],
+  name: '',
+  pattern_name: '',
+  visible: 'false',
+  content: ''
+});
 const handleShareConfirm = (data) => {
   if (shareState.type === '1') {
     // 协同标绘
-    startCollaboration();
-    userWebsocket.init();
+    const userIdList = [];
+    data.forEach((item) => {
+      userIdList.push(item.userId);
+    });
+    let content = currentState.value.length > 0 ? JSON.stringify(currentState.value[currentState.value.length - 1]) : '';
+    form.value = {
+      pattern_id: nanoid(),
+      user_id_list: userIdList,
+      name: '',
+      pattern_name: '',
+      visible: 'false',
+      content: content
+    };
+    showForm.value = true;
   } else {
     // 分享
   }
   shareState.type = '';
   shareState.id = '';
 };
+const handleSendForm = () => {
+  debugger
+  userWebsocket.init();
+  createCollaboration(form.value);
+  collaboration.value = true;
+};
 watch(userWebsocket.webSocketList, (newVal) => {
   console.log('监听数据变化');
   console.log(newVal);
@@ -722,7 +757,7 @@ const handleScreenshot = () => {
       logging: false // 不启动日志调试
     };
     // canvasBox是要截图的元素，options是一些相关配置
-    html2canvas(canvasBox,options).then((canvas) => {
+    html2canvas(canvasBox, options).then((canvas) => {
       // toDataURL 图片格式转成 base64
       dataURL.value = canvas.toDataURL('image/png');
       // 新建一个a标签