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

src/api/globalMap/onlinePlotting.ts

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

src/components/Contact/index.vue

@@ -21,7 +21,7 @@
                 <div :class="getCheckedClass()" @click="handleChecked"></div>
               </div>
               <div class="td">姓名</div>
-              <div class="td3">职务</div>
+              <div class="td3">部门</div>
             </div>
             <div class="table-content">
               <div v-for="(item, index) in userList" :key="index" class="tr2">
@@ -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,59 @@
+<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"></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,16 @@
+<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>
@@ -13,7 +13,7 @@
     <div class="btn-box2">
       <div class="box-left">
         <div class="text1">分类</div>
-        <el-select v-model="type" :teleported="false" class="custom-select" popper-class="custom-select-popper" style="width: 140px">
+        <el-select v-model="type" :teleported="false" class="custom-select" popper-class="custom-select-popper" style="width: 460px">
           <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
@@ -22,7 +22,7 @@
           <i class="icon3" />
           显示标注
         </div>
-        <div class="btn1" style="margin-left: 10px">
+        <div class="btn1" style="margin-left: 10px" @click="showImportLayer">
           <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" :patternId="patternId" />
+  <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
@@ -88,10 +93,43 @@ const handleShowGroup = () => {
   showGroup.value = true;
 };
 const handleAddGroup = () => {
-  addGroup(groupForm.value).then((res) => {
+  const obj = {
+    group_name: groupForm.value.name,
+    pattern_id: props.patternId
+  };
+  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;
@@ -105,8 +143,8 @@ onMounted(() => {
   justify-content: flex-end;
   align-items: center;
   position: absolute;
-  top: 30px;
-  right: 22px;
+  top: 95px;
+  right: 41px;
 }
 .btn-box2 {
   display: flex;
@@ -118,8 +156,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     .text1 {
-      font-size: 14px;
-      margin-right: 5px;
+      font-size: 38px;
+      margin-right: 15px;
     }
   }
   .box-right {
@@ -128,8 +166,8 @@ onMounted(() => {
   }
 }
 .btn1 {
-  width: 104px;
-  height: 29px;
+  width: 278px;
+  height: 78px;
   background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
   background-size: 100% 100%;
   padding: 0 5px;
@@ -137,32 +175,32 @@ onMounted(() => {
   align-items: center;
   cursor: pointer;
   .icon1 {
-    width: 28px;
-    height: 25px;
+    width: 58px;
+    height: 50px;
     background: url('@/assets/images/map/rightMenu/layerDetail/icon1.png') no-repeat;
     background-size: 100% 100%;
   }
   .icon2 {
-    width: 23px;
-    height: 24px;
+    width: 47px;
+    height: 49px;
     background: url('@/assets/images/map/rightMenu/layerDetail/icon2.png') no-repeat;
     background-size: 100% 100%;
   }
   .icon3 {
-    width: 22px;
-    height: 22px;
+    width: 42px;
+    height: 42px;
     background: url('@/assets/images/map/rightMenu/layerDetail/icon3.png') no-repeat;
     background-size: 100% 100%;
   }
   .icon4 {
-    width: 26px;
-    height: 26px;
+    width: 52px;
+    height: 52px;
     background: url('@/assets/images/map/rightMenu/layerDetail/icon4.png') no-repeat;
     background-size: 100% 100%;
   }
   .icon5 {
-    width: 23px;
-    height: 23px;
+    width: 47px;
+    height: 43px;
     background: url('@/assets/images/map/rightMenu/layerDetail/icon5.png') no-repeat;
     background-size: 100% 100%;
   }

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

@@ -3,7 +3,7 @@
     <div class="gradient-text title">实时标绘</div>
     <div v-show="collaboration" style="display: flex; align-items: center; justify-content: flex-end; height: 90px">
       <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" @click="handleSaveCollaboration">保存</div>
     </div>
     <div class="line">
       <div class="tabs1">
@@ -157,11 +157,10 @@ 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');
@@ -724,6 +723,9 @@ const handleCloseCollaboration = () => {
   closeCollaboration({ pattern_id: patternId.value }).then(() => {
     collaboration.value = false;
   });
+};
+const handleSaveCollaboration = () => {
+
 };
 let showForm = ref(false);
 let form = ref({
@@ -757,15 +759,18 @@ const handleShareConfirm = (data) => {
   shareState.type = '';
   shareState.id = '';
 };
+const getWebSocketData = (data) => {
+  console.log('接收数据', data);
+};
 const handleSendForm = () => {
-  userWebsocket.init();
-  createCollaboration(form.value);
+  // 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: '',