实时标绘逻辑调整 用户弹窗

src/api/globalMap/onlinePlotting.ts

@@ -94,3 +94,12 @@ export const addGroup = (data) => {
     data: data
   });
 };
+
+// 协同用户
+export const getPatternUserList = (params) => {
+  return request({
+    url: '/api/pattern/ws/user_list',
+    method: 'get',
+    params: params
+  });
+};

src/components/Contact/index.vue

@@ -30,8 +30,7 @@
                 </div>
                 <div class="td">{{ item.nickName }}</div>
                 <div class="td3">
-                  {{ item.duty }}
-                  <div class="phone-icon"></div>
+                  {{ item.deptName }}
                 </div>
               </div>
             </div>

src/utils/websocket.ts

@@ -1,4 +1,3 @@
-import useUserStore from '@/store/modules/user';
 import { getToken } from '@/utils/auth';
 
 let webSock = null;
@@ -7,14 +6,12 @@ let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存
 let closeFlag = false; // 是否关闭socket
 let global_callback = null;
 
-const port = '9988'; // webSocket连接端口
-const useUser = useUserStore();
-const wsUrl = `${import.meta.env.VITE_APP_BASE_WEBSOCKET}/api/pattern/1/ws`;
-function createWebSocket(callback) {
+const wsUrl = `${import.meta.env.VITE_APP_BASE_WEBSOCKET}/api/pattern/`;
+function createWebSocket(id, callback) {
   if (webSock != null) {
     return;
   }
-  webSock = new WebSocket(wsUrl);
+  webSock = new WebSocket(wsUrl + id + '/ws');
 
   global_callback = callback;
 
@@ -36,6 +33,8 @@ function createWebSocket(callback) {
   webSock.onerror = function () {
     websocketError();
   };
+
+  return webSock;
 }
 
 //心跳设置

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

@@ -0,0 +1,61 @@
+<template>
+  <Dialog custom-show title="协同用户" type="sm" hide-footer @close="handleClose">
+    <div class="common-table">
+      <div class="table-header">
+        <div class="td">
+          <el-checkbox v-model="allChecked" @change="allCheckedChange" />
+        </div>
+        <div class="td">协同用户</div>
+        <div class="td">单位</div>
+        <div class="td">操作</div>
+      </div>
+      <div v-for="(item, index) in dataList" :key="index" class="tr">
+        <div class="td">
+          <el-checkbox v-model="item.checked" />
+        </div>
+        <div class="td">{{ item.nick_name }}</div>
+        <div class="td">{{ item.dept_name }}</div>
+        <div class="td">
+          <div class="btn1">关闭协同</div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="ImportLayer">
+import { getPatternUserList } from '@/api/globalMap/onlinePlotting';
+
+const props = defineProps({
+  modelValue: Boolean,
+  patternId: String
+});
+const emits = defineEmits(['update:modelValue']);
+let allChecked = ref(false);
+let dataList = ref([]);
+
+const allCheckedChange = () => {
+  dataList.value.forEach((item) => {
+    item.checked = allChecked.value;
+  });
+};
+const getList = () => {
+  getPatternUserList({ pattern_id: props.patternId }).then((res) => {
+    dataList.value = res.data;
+  });
+};
+
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.btn1 {
+  color: #38538d;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+  <Dialog custom-show title="导入图层" type="xs" hide-footer @close="handleClose">
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="ImportLayer">
+const props = defineProps({
+  modelValue: Boolean
+});
+const emits = defineEmits(['update:modelValue']);
+
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,11 +1,11 @@
 <template>
-  <Dialog title="预案名称" custom-show hide-footer>
+  <Dialog title="预案名称" custom-show hide-footer @close="handleClose1">
     <div class="btn-box1">
-      <div class="btn1">
+      <div class="btn1" @click="handleShowCooperate">
         <i class="icon1" />
         邀请协同
       </div>
-      <div class="btn1" style="margin-left: 10px">
+      <div class="btn1" style="margin-left: 10px" @click="handleShowUser">
         <i class="icon2" />
         协同用户
       </div>
@@ -22,7 +22,7 @@
           <i class="icon3" />
           显示标注
         </div>
-        <div class="btn1" style="margin-left: 10px">
+        <div class="btn1" style="margin-left: 10px" @click="handleShowImportLayer">
           <i class="icon4" />
           导入图层
         </div>
@@ -53,14 +53,19 @@
     </div>
     <div class="form-action">
       <div class="common-btn-primary" @click="handleAddGroup">保存</div>
-      <div class="common-btn-primary" @click="handleDeleteGroup">删除</div>
-      <div class="common-btn" @click="handleCanle">取消</div>
+      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
+      <div class="common-btn" @click="handleClose2">取消</div>
     </div>
   </Dialog>
+  <Contact v-if="showCooperate" v-model="showCooperate" @close="handleClose3" @confirm="handleConfirm" />
+  <CollaborativeUser v-if="showUser" v-model="showUser" />
+  <ImportLayer v-if="showImportLayer" v-model="showImportLayer" />
 </template>
 
 <script lang="ts" setup name="LayerDetail">
 import { addGroup, getBzList } from '@/api/globalMap/onlinePlotting';
+import ImportLayer from './ImportLayer.vue';
+import CollaborativeUser from './CollaborativeUser.vue';
 const props = defineProps({
   modelValue: Boolean,
   patternId: String
@@ -91,11 +96,40 @@ const handleAddGroup = () => {
   const obj = {
     group_name: groupForm.value.name,
     pattern_id: props.patternId
-  }
-  addGroup(groupForm.value).then((res) => {
+  };
+  addGroup(obj).then((res) => {
     emits('update:modelValue', false);
   });
 };
+const handleClose1 = () => {
+  emits('update:modelValue', false);
+};
+const handleDeleteGroup = () => {
+  showGroup.value = false;
+};
+const handleClose2 = () => {
+  showGroup.value = false;
+};
+let showCooperate = ref(false);
+const handleShowCooperate = () => {
+  showCooperate.value = true;
+};
+const handleClose3 = () => {
+  showCooperate.value = false;
+};
+const handleConfirm = (data) => {
+
+}
+let showUser = ref(false);
+const handleShowUser = () => {
+  showUser.value = true;
+};
+
+let showImportLayer = ref(false);
+const handleShowImportLayer = () => {
+  showImportLayer.value = true;
+};
+
 onMounted(() => {
   getBzList(queryParams).then((res) => {
     dataList.value = res.data;

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

@@ -157,17 +157,16 @@ import {
   getPatternInfo,
   getPatternList,
   createCollaboration,
-  closeCollaboration, startCollaboration
+  closeCollaboration
 } 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 LayerDetail from './LayerDetail.vue';
+import { createWebSocket } from '@/utils/websocket';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const userWebsocket = websocketStore();
 const getDrawTool = inject('getDrawTool');
 const getMap = inject('getMap');
 const getMapUtils = inject('getMapUtils');
@@ -178,7 +177,7 @@ const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/map/rightMenu/onlinePlotting/icon/${name}.png`, import.meta.url).href;
 };
 let drawing = ref(false);
-const mouseToolState = ref<MouseTool>({
+const mouseToolState = ref({
   color: 'rgba(248, 1, 2, 1)',
   lineWidth: '1',
   graphicsType: ''
@@ -734,17 +733,18 @@ const handleShareConfirm = (data) => {
   shareState.type = '';
   shareState.id = '';
 };
+const getWebSocketData = (data) => {
+  console.log('接收数据', data);
+};
 const handleSendForm = () => {
-  userWebsocket.init();
-  // createCollaboration(form.value);
-  startCollaboration()
-  patternId.value = form.value.pattern_id;
+  createWebSocket('v7fUAuygwZUs24Nx3RDnL', getWebSocketData);
+  patternId.value = 'v7fUAuygwZUs24Nx3RDnL';
+  // createCollaboration(form.value).then(() => {
+  //   patternId.value =form.value.pattern_id;
+  //   createWebSocket(form.value.pattern_id, getWebSocketData);
+  // });
   collaboration.value = true;
 };
-watch(userWebsocket.webSocketList, (newVal) => {
-  console.log('监听数据变化');
-  console.log(newVal);
-});
 const handleShowDialog = () => {
   editData.value = {
     id: '',