协同标绘调整

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: 303px;
+    width: 910px;
     padding-right: 30px;
     border-right: 1px solid #2187ff;
   }
   .middle-content {
-    width: 303px;
+    width: 910px;
     padding: 0 30px;
     border-right: 1px solid #2187ff;
     .search-box {
@@ -328,7 +328,7 @@ onMounted(() => {
   }
   .select-box2 {
     margin-left: 30px;
-    width: 303px;
+    width: 910px;
     height: 100%;
     .select-header {
       display: flex;

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

@@ -136,19 +136,29 @@
   <!--保存修改弹窗-->
   <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 {
+  createCollaboration,
+  deletePatternById,
+  getPatternInfo,
+  getPatternList
+} 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';
 import html2canvas from 'html2canvas';
 import websocketStore from '@/store/modules/websocketStore';
-import { tempData } from './tempData';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userWebsocket = websocketStore();
@@ -701,10 +711,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;
@@ -716,17 +722,43 @@ 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 = () => {
+  userWebsocket.init();
+  createCollaboration(form.value);
+  collaboration.value = true;
+};
 watch(userWebsocket.webSocketList, (newVal) => {
   console.log('监听数据变化');
   console.log(newVal);