保存预案

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

@@ -1,23 +1,73 @@
 <template>
   <div v-show="modelValue" 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" @click="handleSaveCollaboration">保存</div>
+    <div class="btn2" style="margin-left: 10px" @click="handleShowConfirm">保存</div>
   </div>
+  <Dialog
+    v-if="showConfirmDialog"
+    v-model="showConfirmDialog"
+    custom-show
+    title="提示"
+    height="auto"
+    type="xs"
+    @close="handleCancel"
+    @confirm="handleSaveCollaboration"
+  >
+    <div>是否把当前协同数据保存到预案</div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { closeCollaboration } from '@/api/globalMap/onlinePlotting';
+import { createPattern } from '@/api/globalMap/onlinePlotting';
 
 const props = defineProps({
-  modelValue: Boolean
+  modelValue: Boolean,
+  title: String,
+  data: []
 });
+const emits = defineEmits(['closeCollaboration', 'confirm']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+let showConfirmDialog = ref(false);
 const handleCloseCollaboration = () => {
-  closeCollaboration({ pattern_id: patternId.value }).then(() => {
-    collaboration.value = false;
+  emits('closeCollaboration');
+};
+const handleShowConfirm = () => {
+  showConfirmDialog.value = true;
+};
+const handleCancel = () => {
+  showConfirmDialog.value = false;
+};
+// 保存
+const handleSaveCollaboration = () => {
+  showConfirmDialog.value = false;
+  createPattern({
+    pattern_name: props.title,
+    content: props.data
+  }).then(() => {
+    proxy.$modal.msgSuccess('保存成功');
   });
+  emits('confirm');
 };
 </script>
 
 <style lang="scss" scoped>
+.btn2 {
+  width: 278px;
+  height: 78px;
+  background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 32px;
+  color: #edfaff;
+  margin-bottom: -57px;
 
+  .icon1 {
+    width: 42px;
+    height: 42px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
+    margin-right: 12px;
+  }
+}
 </style>

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

@@ -1,7 +1,13 @@
 <template>
   <div class="menu-content">
     <div class="gradient-text title">实时标绘</div>
-    <CollaborativeOperationBar v-model="collaboration" />
+    <CollaborativeOperationBar
+      v-model="collaboration"
+      :title="collaborativeTitle"
+      :data="currentState"
+      @closeCollaboration="handleCloseCollaboration"
+      @confirm="getList"
+    />
     <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)">
@@ -21,17 +27,17 @@
       <div class="box1">
         <div v-show="!showSetting" class="box-item">
           <div class="btn" @click="handleUndo">
-            <div class="revoke-icon"></div>
+            <div class="revoke-icon" />
             撤回
           </div>
           <div class="line2"></div>
           <div class="btn">
-            <div class="delete-icon"></div>
+            <div class="delete-icon" />
             删除
           </div>
           <div class="line2"></div>
           <div class="btn" @click="handleShowDialog">
-            <div class="save-icon"></div>
+            <div class="save-icon" />
             保存
           </div>
         </div>
@@ -216,6 +222,7 @@ import EditClassDialog from './EditClassDialog.vue';
 import TextEdit from './TextEdit.vue';
 import EditDialog from './EditDialog.vue';
 import LayerDetail from './LayerDetail.vue';
+import CollaborativeOperationBar from './CollaborativeOperationBar.vue';
 import { nanoid } from 'nanoid';
 import { deepClone } from '@/utils';
 import { useHistory } from '@/hooks/useHistory';
@@ -223,6 +230,7 @@ import {
   changeVisibleClassification,
   closeCollaboration,
   createCollaboration,
+  createPattern,
   deleteClassificationCreate,
   deletePatternById,
   getPatternInfo,
@@ -237,7 +245,6 @@ import * as turf from '@turf/turf';
 import Style from 'ol/style/Style';
 import Icon from 'ol/style/Icon';
 import useMapStore from '@/store/modules/map';
-import CollaborativeOperationBar from '@/views/globalMap/RightMenu/OnlinePlotting/CollaborativeOperationBar.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const mapStore = useMapStore();
@@ -905,6 +912,7 @@ const handleShowPatternData = () => {
 const handleSaveCollaboration = () => {
 
 };
+const collaborativeTitle = ref('');
 let showForm = ref(false);
 let form = ref({
   pattern_id: '',
@@ -945,7 +953,7 @@ const handleShareConfirm = (data) => {
 const getWebSocketData = (data) => {
   if (data && data.length > 0) {
     const data2 = [];
-    const data3 = deepClone(data);
+    const data3 = [];
     data.forEach((item) => {
       if (!!item.content) {
         const parseContent = JSON.parse(item.content);
@@ -955,6 +963,7 @@ const getWebSocketData = (data) => {
         if (item.visible === '1') {
           data2.push(parseContent);
         }
+        data3.push(parseContent);
       }
     });
     const res = mapUtils.drawData(data2);
@@ -965,9 +974,8 @@ const getWebSocketData = (data) => {
       overlaysData.push(data3[index]);
     });
     commit(deepClone(overlaysData));
-    currentState.value = data;
+    currentState.value = data3;
   }
-
   console.log('接收数据', data);
 };
 
@@ -979,6 +987,7 @@ const handleSendForm = () => {
   // patternId.value = 'MbHKSVA00Y2tQG1Y_u8kL';
   createCollaboration(form.value).then(() => {
     patternId.value = form.value.pattern_id;
+    collaborativeTitle.value = form.value.pattern_name;
     webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
     showForm.value = false;
     collaboration.value = true;

src/views/globalMap/RightMenu/RainMonitor/RainRank.vue

@@ -80,7 +80,6 @@
 import { getRainfallRange2 } from '@/api/globalMap/rainMonitor';
 import { getNextAreaInfo } from '@/api/common';
 import RainChart from '@/views/globalMap/RightMenu/RainMonitor/RainChart.vue';
-import CloseEventDialog from "@/views/routineCommandMap/eventing/CloseEventDialog.vue";
 
 interface Props {
   modelValue: boolean;