查看图层

src/api/globalMap/onlinePlotting.ts

@@ -50,7 +50,6 @@ export const createCollaboration = (data) => {
   });
 };
 
-// 开启协同
 export const startCollaboration = (data) => {
   return request({
     url: '/api/pattern/ws/add_user',
@@ -58,3 +57,39 @@ export const startCollaboration = (data) => {
     data: data
   });
 };
+
+// 关闭协同
+export const endCollaboration = (data) => {
+  return request({
+    url: '/api/pattern/ws/delete_user',
+    method: 'post',
+    data: data
+  });
+};
+
+// 关闭协同
+export const closeCollaboration = (data) => {
+  return request({
+    url: '/api/pattern/ws/bz_add',
+    method: 'put',
+    data: data
+  });
+};
+
+// 标注列表
+export const getBzList = (params) => {
+  return request({
+    url: '/api/pattern/ws/bz_list',
+    method: 'get',
+    params: params
+  });
+};
+
+// 添加分组
+export const addGroup = (params) => {
+  return request({
+    url: '/api/pattern/ws/add_group',
+    method: 'get',
+    params: params
+  });
+};

src/hooks/AMap/useAMap.ts

@@ -277,10 +277,14 @@ export function useAMap(options) {
     movePolyline?.remove();
     movePassedPolyline?.remove();
     moveMarker?.remove();
+    const icon = new AMap.Icon({
+      size: new AMap.Size(26, 52),
+      image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png'
+    });
     moveMarker = new AMap.Marker({
       map: map,
       position: [116.478935, 39.997761],
-      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
+      icon: icon,
       offset: new AMap.Pixel(-13, -26)
     });
     // 绘制轨迹
@@ -310,7 +314,7 @@ export function useAMap(options) {
         movePolyline.remove();
         movePassedPolyline.remove();
         moveMarker.remove();
-      }, 2000);
+      }, 5000);
     });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -413,7 +413,7 @@ const deleteItem = (item) => {
     .select-box2 {
       margin-left: 10px;
       width: 579px;
-      height: 421px;
+      height: 450px;
       background: url('@/assets/images/emergencyCommandMap/communication/peopleBg.png') no-repeat;
       background-size: 100% 100%;
       .select-header {
@@ -439,7 +439,7 @@ const deleteItem = (item) => {
         }
       }
       .select-content {
-        height: 305px;
+        height: 360px;
         overflow-y: auto;
         .box-item {
           border-bottom: 1px solid #247dff;

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

@@ -0,0 +1,186 @@
+<template>
+  <Dialog title="预案名称" custom-show hide-footer>
+    <div class="btn-box1">
+      <div class="btn1">
+        <i class="icon1" />
+        邀请协同
+      </div>
+      <div class="btn1" style="margin-left: 10px">
+        <i class="icon2" />
+        协同用户
+      </div>
+    </div>
+    <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-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="box-right">
+        <div class="btn1">
+          <i class="icon3" />
+          显示标注
+        </div>
+        <div class="btn1" style="margin-left: 10px">
+          <i class="icon4" />
+          导入图层
+        </div>
+        <div class="btn1" style="margin-left: 10px" @click="handleShowGroup">
+          <i class="icon5" />
+          添加分组
+        </div>
+      </div>
+    </div>
+    <div class="common-table">
+      <div class="table-header">
+        <div class="td" style="width: 40px"></div>
+        <div class="td">标注名称</div>
+        <div class="td">用户</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" :title="item.event_title">{{ item.event_title }}</div>
+      </div>
+    </div>
+  </Dialog>
+  <Dialog v-model="showGroup" :title="groupForm.groupId ? '编辑分组' : '添加分组'" type="xs" hide-footer>
+    <div class="form-item">
+      <div class="text1">分组名称</div>
+      <el-input v-model="groupForm.name" class="custom-input" placeholder="请输入" />
+    </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>
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="LayerDetail">
+import { addGroup, getBzList } from '@/api/globalMap/onlinePlotting';
+const props = defineProps({
+  modelValue: Boolean,
+  patternId: String
+});
+const emits = defineEmits(['update:modelValue']);
+let type = ref('');
+let typeOptions = ref([
+  { label: '全部', value: '' },
+  { label: '点', value: '1' },
+  { label: '线', value: '2' },
+  { label: '面', value: '3' },
+  { label: '其他', value: '4' }
+]);
+let queryParams = reactive({
+  pattern_id: props.patternId
+});
+let dataList = ref([]);
+
+let showGroup = ref(false);
+let groupForm = ref({
+  groupId: '',
+  name: ''
+});
+const handleShowGroup = () => {
+  showGroup.value = true;
+};
+const handleAddGroup = () => {
+  addGroup(groupForm.value).then((res) => {
+    emits('update:modelValue', false);
+  });
+};
+onMounted(() => {
+  getBzList(queryParams).then((res) => {
+    dataList.value = res.data;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.btn-box1 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  top: 30px;
+  right: 22px;
+}
+.btn-box2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  .box-left {
+    display: flex;
+    align-items: center;
+    .text1 {
+      font-size: 14px;
+      margin-right: 5px;
+    }
+  }
+  .box-right {
+    display: flex;
+    align-items: center;
+  }
+}
+.btn1 {
+  width: 104px;
+  height: 29px;
+  background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .icon1 {
+    width: 28px;
+    height: 25px;
+    background: url('@/assets/images/map/rightMenu/layerDetail/icon1.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .icon2 {
+    width: 23px;
+    height: 24px;
+    background: url('@/assets/images/map/rightMenu/layerDetail/icon2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .icon3 {
+    width: 22px;
+    height: 22px;
+    background: url('@/assets/images/map/rightMenu/layerDetail/icon3.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .icon4 {
+    width: 26px;
+    height: 26px;
+    background: url('@/assets/images/map/rightMenu/layerDetail/icon4.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .icon5 {
+    width: 23px;
+    height: 23px;
+    background: url('@/assets/images/map/rightMenu/layerDetail/icon5.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.form-item {
+  display: flex;
+  align-items: center;
+  .text1 {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+  .custom-input {
+    flex: 1;
+  }
+}
+.form-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

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

@@ -1,6 +1,10 @@
 <template>
   <div class="menu-content">
     <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>
     <div class="line">
       <div class="tabs1">
         <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
@@ -8,16 +12,15 @@
         </div>
       </div>
       <div class="btn-box">
-        <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>
-        <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
-        <div v-show="collaboration" class="btn2" style="margin-left: 20px" @click="handleCloseCollaboration">关闭协同</div>
-        <div v-show="collaboration" class="btn2" style="margin-left: 20px">保存</div>
+        <div class="btn1" @click="handleScreenshot">
+          <div class="icon1"></div>
+          当前地图截图导出
+        </div>
+<!--        <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>-->
+<!--        v-show="collaboration"-->
+        <div class="btn2" @click="handleShowLayer">查看图层</div>
       </div>
     </div>
-    <div class="btn1" @click="handleScreenshot">
-      <div class="icon1"></div>
-      当前地图截图导出
-    </div>
     <div v-if="menuActive1 === 0" class="content">
       <div class="box1">
         <div class="box-item">
@@ -143,23 +146,20 @@
       <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
     </div>
   </Dialog>
+  <LayerDetail v-if="showLayer" v-model="showLayer" :patternId="patternId" />
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
 import { nanoid } from 'nanoid';
 import { deepClone } from '@/utils';
 import { useHistory } from '@/hooks/useHistory';
-import {
-  createCollaboration,
-  deletePatternById,
-  getPatternInfo,
-  getPatternList
-} 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 LayerDetail from './LayerDetail.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userWebsocket = websocketStore();
@@ -380,6 +380,7 @@ let shareState = reactive({
   showShare: false,
   id: ''
 });
+let patternId = ref('');
 let shareId = ref('');
 const overlays = [];
 const overlaysData = [];
@@ -721,7 +722,9 @@ const handleCloseShare = () => {
   shareState.id = '';
 };
 const handleCloseCollaboration = () => {
-  collaboration.value = false;
+  closeCollaboration({pattern_id: patternId.value}).then(() => {
+    collaboration.value = false;
+  });
 };
 let showForm = ref(false);
 let form = ref({
@@ -868,15 +871,16 @@ onMounted(() => {
 }
 .btn1 {
   width: 440px;
-  height: 120px;
+  height: 150px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/btn1.png') no-repeat;
+  background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   font-size: 32px;
   color: #edfaff;
-  margin-bottom: -25px;
+  margin-bottom: -55px;
   .icon1 {
     width: 42px;
     height: 42px;
@@ -978,7 +982,7 @@ onMounted(() => {
 .tabs2 {
   width: 300px;
   min-width: 300px;
-  height: 1340px;
+  height: 1240px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/tabBg.png') no-repeat;
   background-size: 300px 1188px;
   overflow-y: auto;