实时标绘 修改删除分组

src/api/globalMap/onlinePlotting.ts

@@ -110,3 +110,43 @@ export const getPatternUserList = (params) => {
     params: params
   });
 };
+
+// 删除分组
+export const delGroup = (groupId) => {
+  return request({
+    url: '/api/pattern/ws/delete_group/' + groupId,
+    method: 'delete'
+  });
+};
+
+// 分组详情
+export const getGroupInfo = (groupId) => {
+  return request({
+    url: '/api/pattern/ws/group_info',
+    method: 'get',
+    params: {
+      group_id: groupId
+    }
+  });
+};
+
+// 更新分组
+export const updateGroup = (data) => {
+  return request({
+    url: '/api/pattern/ws/update_group',
+    method: 'put',
+    data: data
+  });
+};
+
+// 更新分组显示状态
+export const updateGroupVisible = (groupId, visible) => {
+  return request({
+    url: '/api/pattern/ws/group_visible',
+    method: 'put',
+    data: {
+      group_id: groupId,
+      visible: visible
+    }
+  });
+};

src/hooks/AMap/useAMap.ts

@@ -69,6 +69,7 @@ export function useAMap(options) {
     map.setZoom(18);
     map.setCenter(item.lnglat);
     addMarker([item], true);
+    clickMarker = item;
     options.onMarkerClick(item);
   };
   // 添加多个点
@@ -175,7 +176,7 @@ export function useAMap(options) {
           index++;
           data = addPoints[i];
         } else if (!!clickMarker) {
-          const extData2 = clickMarker.getExtData();
+          const extData2 = clickMarker.getExtData ? clickMarker.getExtData() : clickMarker;
           if (addPoints[i].id === extData2.id) {
             addPoints[i].icon = addPoints[i].image;
             index2++;
@@ -220,7 +221,7 @@ export function useAMap(options) {
     if (!!infoWindow) {
       infoWindow.close();
       if (!!clickMarker && e) {
-        const extData = clickMarker.getExtData();
+        const extData = clickMarker.getExtData ? clickMarker.getExtData() : clickMarker;
         for (let i = 0; i < addPoints.length; i++) {
           if (addPoints[i].id === extData.id) {
             addPoints[i].icon = addPoints[i].image;

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

@@ -1,36 +1,40 @@
 <template>
-  <Dialog custom-show :title="groupForm.groupId ? '编辑分组' : '添加分组'" type="xs" height="auto" hide-footer @close="handleClose">
+  <Dialog custom-show :title="groupForm.group_id ? '编辑分组' : '添加分组'" type="xs" height="auto" hide-footer @close="handleClose">
     <div class="form-item">
       <div class="text1">分组名称</div>
-      <el-input v-model="groupForm.name" class="custom-input" placeholder="请输入" />
+      <el-input v-model="groupForm.group_name" class="custom-input" placeholder="请输入" />
     </div>
     <div class="form-action">
-      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleAddGroup">保存</div>
-      <div v-else class="common-btn-primary" @click="handleUpdateGroup">删除</div>
-      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
+      <div v-if="!groupForm.group_id" class="common-btn-primary" @click="handleAddGroup">保存</div>
+      <div v-else class="common-btn-primary" @click="handleUpdateGroup">保存</div>
+      <div v-if="groupForm.group_id" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
       <div class="common-btn" @click="handleClose">取消</div>
     </div>
   </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { addGroup } from '@/api/globalMap/onlinePlotting';
+import { addGroup, delGroup, getGroupInfo, updateGroup } from '@/api/globalMap/onlinePlotting';
 
 const props = defineProps({
   modelValue: Boolean,
   patternId: String,
   groupId: String
 });
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['update:modelValue', 'change']);
 let groupForm = ref({
-  groupId: '',
-  name: ''
+  group_id: '',
+  group_name: ''
 });
 watch(
   () => props.groupId,
   () => {
     if (!!props.groupId) {
       // 获取详情
+      getGroupInfo(props.groupId).then((res) => {
+        groupForm.value = res.data;
+      });
     }
   },
   {
@@ -40,25 +44,35 @@ watch(
 // 新增分组
 const handleAddGroup = () => {
   const obj = {
-    group_name: groupForm.value.name,
+    group_name: groupForm.value.group_name,
     pattern_id: props.patternId
   };
-  addGroup(obj).then((res) => {
-    emits('update:modelValue', false);
-    emits('change', false);
+  addGroup(obj).then(() => {
+    emits('change');
+    proxy?.$modal.msgSuccess('新增成功');
+    handleClose();
   });
 };
 // 修改分组
 const handleUpdateGroup = () => {
-
-}
+  updateGroup(groupForm.value).then(() => {
+    emits('change');
+    proxy?.$modal.msgSuccess('修改成功');
+    handleClose();
+  });
+};
 // 关闭弹窗
 const handleClose = () => {
   emits('update:modelValue', false);
 };
 // 删除分组
-const handleDeleteGroup = () => {
-  handleClose();
+const handleDeleteGroup = async () => {
+  await proxy?.$modal.confirm('您确定要删除该分组?');
+  delGroup(groupForm.value.group_id).then(() => {
+    proxy?.$modal.msgSuccess('删除成功');
+    emits('change');
+    handleClose();
+  });
 };
 </script>
 

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

@@ -26,7 +26,7 @@
           <i class="icon4" />
           导入图层
         </div>
-        <div class="btn1" style="margin-left: 10px" @click="handleShowGroup">
+        <div class="btn1" style="margin-left: 10px" @click="handleShowGroup('')">
           <i class="icon5" />
           添加分组
         </div>
@@ -48,9 +48,9 @@
           <div class="td" :title="item.dept_name">{{ item.dept_name }}</div>
           <div class="td" :title="item.create_time">{{ item.create_time }}</div>
           <div class="td" style="display: flex; align-items: center; justify-content: center">
-            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleDeleteGroup">删除</div>
+            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleDeleteGroup(item.group_id)">删除</div>
             <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleShowGroup(item.group_id)">编辑</div>
-            <div class="btn-text">{{ item.visible !== '0' ? '隐藏' : '显示' }}</div>
+            <div class="btn-text" @click="handleVisible(item)">{{ item.visible !== '0' ? '隐藏' : '显示' }}</div>
           </div>
         </div>
         <div v-for="(item2, index2) in item.bz_list" :key="index2" class="tr">
@@ -59,7 +59,7 @@
           <div class="td" :title="item.dept_name">{{ item2.dept_name }}</div>
           <div class="td" :title="item.create_time">{{ item2.create_time }}</div>
           <div class="td">
-            <div class="btn-text" @click="handleVisible(item2)">{{ item2.visible === '1' ? '隐藏' : '显示' }}</div>
+            <div class="btn-text" @click="handleVisible2(item2)">{{ item2.visible === '1' ? '隐藏' : '显示' }}</div>
           </div>
         </div>
       </div>
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts" setup name="LayerDetail">
-import { addWsUser, getBzList } from '@/api/globalMap/onlinePlotting';
+import { addWsUser, delGroup, getBzList, updateGroupVisible } from '@/api/globalMap/onlinePlotting';
 import ImportLayer from './ImportLayer.vue';
 import CollaborativeUser from './CollaborativeUser.vue';
 import EditGroup from './EditGroup.vue';
@@ -80,7 +80,7 @@ const props = defineProps({
   modelValue: Boolean,
   patternId: String
 });
-const emits = defineEmits(['update:modelValue', 'handleSendData']);
+const emits = defineEmits(['update:modelValue', 'handleSendData', 'change']);
 let type = ref('');
 let typeOptions = ref([
   { label: '全部', value: '' },
@@ -106,8 +106,11 @@ const handleShowGroup = (id) => {
 const handleClose1 = () => {
   emits('update:modelValue', false);
 };
-const handleDeleteGroup = () => {
-  showGroup.value = false;
+const handleDeleteGroup = (groupId) => {
+  delGroup(groupId).then(() => {
+    getList();
+    showGroup.value = false;
+  });
 };
 
 let showCooperate = ref(false);
@@ -143,6 +146,11 @@ const getList = () => {
   });
 };
 const handleVisible = (item) => {
+  updateGroupVisible(item.group_id, item.visible === '1' ? '0' : '1').then(() => {
+    getList();
+  });
+};
+const handleVisible2 = (item) => {
   item.visible = item.visible === '1' ? '0' : '1';
   emits('handleSendData', { type: 'update', content: item });
 };