加载历史预案

src/components/LineWidthSelect/index.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts" setup name="LineWidthSelect">
 interface Props {
-  modelValue: boolean;
+  modelValue: string;
   options: object[];
 }
 const props = withDefaults(defineProps<Props>(), {});

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

@@ -44,7 +44,7 @@ import { toRefs } from 'vue';
 import { showSuccessMsg } from '@/utils/notification';
 
 const props = defineProps({
-  modelValue: String,
+  modelValue: Boolean,
   id: String,
   templateId: String
 });

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

@@ -79,7 +79,8 @@
               <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha />
             </div>
           </div>
-          <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]" class="tab-list">
+          <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]"
+               class="tab-list">
             <div
               v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
               :key="index"
@@ -107,7 +108,9 @@
               </div>
             </div>
             <div v-if="showSetting" class="tab" @click="handleShowAddClass">
-              <el-icon color="#7495b4" :size="80"><Plus /></el-icon>
+              <el-icon color="#7495b4" :size="80">
+                <Plus />
+              </el-icon>
             </div>
           </div>
         </div>
@@ -125,7 +128,9 @@
       <div class="params-box">
         <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
           <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
+            <el-icon class="el-input__icon">
+              <search />
+            </el-icon>
           </template>
         </el-input>
       </div>
@@ -134,24 +139,26 @@
           <div class="th">预案名称</div>
           <div class="th">操作</div>
         </div>
-        <div v-for="(item, index) in patternList" :key="index" class="tr">
-          <div class="td">
-            <div>{{ item.pattern_name }}</div>
-          </div>
-          <div class="td td2">
-            <div class="btn" @click="handleDelete(item.id)">
-              <div class="delete-icon"></div>
-              删除
-            </div>
-            <div class="line2"></div>
-            <div class="btn" @click="handleEdit(item.id)">
-              <div class="edit-icon"></div>
-              编辑
+        <div class="table-content">
+          <div v-for="(item, index) in patternList" :key="index" class="tr" @click="handleShowConfirm(item)">
+            <div class="td">
+              <div>{{ item.pattern_name }}</div>
             </div>
-            <div class="line2"></div>
-            <div class="btn" @click="handleShare('2', item.id)">
-              <div class="share-icon"></div>
-              分享
+            <div class="td td2">
+              <div class="btn" @click.stop="handleDelete(item.id)">
+                <div class="delete-icon"></div>
+                删除
+              </div>
+              <div class="line2"></div>
+              <div class="btn" @click.stop="handleEdit(item.id)">
+                <div class="edit-icon"></div>
+                编辑
+              </div>
+              <div class="line2"></div>
+              <div class="btn" @click.stop="handleShare('2', item.id)">
+                <div class="share-icon"></div>
+                分享
+              </div>
             </div>
           </div>
         </div>
@@ -183,13 +190,29 @@
   <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
   <!--保存修改弹窗-->
   <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
-  <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
-  <Dialog v-if="showForm" v-model="showForm" custom-show title="协同标绘" height="auto" type="xs" @close="showForm = false" @confirm="handleSendForm">
+  <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare"
+           @confirm="handleShareConfirm" />
+  <!--修改预案-->
+  <Dialog v-if="showForm" v-model="showForm" custom-show title="协同标绘" height="auto" type="xs"
+          @close="showForm = false" @confirm="handleSendForm">
     <div style="display: flex; align-items: center">
       <div style="font-size: 36px">预案名称：</div>
       <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
     </div>
   </Dialog>
+  <!--加载预案确认-->
+  <Dialog
+    v-if="showConfirmDialog"
+    v-model="showConfirmDialog"
+    custom-show
+    title="提示"
+    height="auto"
+    type="xs"
+    @close="handleCancel"
+    @confirm="handleShowPatternData"
+  >
+    <div>是否确定加载该预案到地图上？</div>
+  </Dialog>
   <LayerDetail v-if="showLayer" v-model="showLayer" :pattern-id="patternId" @handle-send-data="handleSendData" />
 </template>
 
@@ -684,7 +707,7 @@ const handleRightClick = (event) => {
     // 右键删除按钮
     contextMenu.addItem(
       '删除',
-      function () {
+      function() {
         contextMenu.close();
         deleteGraphics();
       },
@@ -802,6 +825,8 @@ let editData = ref({
   content: {}
 });
 let showEdit = ref(false);
+let showConfirmDialog = ref(false);
+let confirmData = ref([]);
 const handleSubmit = () => {
   showEdit.value = false;
   editData.value = {
@@ -827,6 +852,7 @@ const getList = () => {
 const handleDelete = (id: number) => {
   proxy?.$modal.confirm('是否确认删除选择的数据项？').then(() => {
     deletePatternById(id).then(() => {
+      showSuccessMsg('删除成功');
       getList();
     });
   });
@@ -852,7 +878,36 @@ const handleCloseCollaboration = () => {
     collaboration.value = false;
   });
 };
-const handleSaveCollaboration = () => {};
+const handleShowConfirm = (data) => {
+  confirmData.value = data.content;
+  showConfirmDialog.value = true;
+};
+const handleCancel = () => {
+  showConfirmDialog.value = false;
+  confirmData.value = [];
+};
+// 加载预案图层
+const handleShowPatternData = () => {
+  showConfirmDialog.value = false;
+  const data = [];
+  confirmData.value.forEach((item) => {
+    overlaysData.push(deepClone(item));
+    if (item.type === 'marker') {
+      item.icon = getImageUrl(item.icon);
+      item.image = getImageUrl(item.image);
+      item.imageHover = getImageUrl(item.imageHover);
+    }
+    data.push(item);
+  });
+  const res = mapUtils.drawData(data);
+  res.forEach((item) => {
+    overlays.push(item);
+  });
+  commit(deepClone(overlaysData));
+  confirmData.value = [];
+};
+const handleSaveCollaboration = () => {
+};
 let showForm = ref(false);
 let form = ref({
   pattern_id: '',
@@ -1013,10 +1068,21 @@ let showLayer = ref(false);
 let handleShowLayer = () => {
   showLayer.value = true;
 };
+const clearData = () => {
+  overlays.forEach((item) => {
+    item.setMap(null);
+    item.destroy();
+  });
+  overlays = [];
+  overlaysData = [];
+};
 onMounted(() => {
   getTemplateTreeData();
   getList();
 });
+onUnmounted(() => {
+  clearData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -1029,6 +1095,7 @@ onMounted(() => {
   position: relative;
   color: #ffffff;
 }
+
 .title {
   font-size: 60px;
   position: absolute;
@@ -1039,14 +1106,17 @@ onMounted(() => {
 :deep(.el-color-dropdown__link-btn) {
   display: none;
 }
+
 .line {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .tabs1 {
   margin-top: 45px;
   display: flex;
+
   .tab {
     width: 316px;
     height: 77px;
@@ -1057,6 +1127,7 @@ onMounted(() => {
     color: #b7c1d5;
     font-family: YouSheBiaoTiHei;
     padding-left: 60px;
+
     &:hover {
       width: 317px;
       height: 83px;
@@ -1064,6 +1135,7 @@ onMounted(() => {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
     }
   }
+
   .tab_active {
     width: 317px;
     height: 83px;
@@ -1071,6 +1143,7 @@ onMounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
   }
 }
+
 .btn1 {
   width: 440px;
   height: 150px;
@@ -1083,6 +1156,7 @@ onMounted(() => {
   font-size: 32px;
   color: #edfaff;
   margin-bottom: -55px;
+
   .icon1 {
     width: 42px;
     height: 42px;
@@ -1090,6 +1164,7 @@ onMounted(() => {
     margin-right: 12px;
   }
 }
+
 .btn2 {
   width: 278px;
   height: 78px;
@@ -1101,6 +1176,7 @@ onMounted(() => {
   font-size: 32px;
   color: #edfaff;
   margin-bottom: -57px;
+
   .icon1 {
     width: 42px;
     height: 42px;
@@ -1108,6 +1184,7 @@ onMounted(() => {
     margin-right: 12px;
   }
 }
+
 .box1 {
   margin-top: 20px;
   display: flex;
@@ -1117,57 +1194,67 @@ onMounted(() => {
   height: 96px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/box1.png') no-repeat;
   padding: 25px 30px;
+
   .box-item {
     display: flex;
     align-items: center;
   }
 }
+
 .btn {
   display: flex;
   align-items: center;
   cursor: pointer;
+
   .revoke-icon {
     width: 48px;
     height: 50px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
   }
+
   .delete-icon {
     width: 50px;
     height: 50px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
   }
+
   .edit-icon {
     width: 46px;
     height: 46px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
   }
+
   .cancel-icon {
     width: 50px;
     height: 50px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
   }
+
   .save-icon {
     width: 46px;
     height: 46px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
   }
+
   .share-icon {
     width: 46px;
     height: 48px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
   }
+
   .setting-icon {
     width: 48px;
     height: 50px;
     margin-right: 10px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
   }
+
   .template-icon {
     width: 41px;
     height: 44px;
@@ -1175,6 +1262,7 @@ onMounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/template.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .categoryImport-icon {
     width: 39px;
     height: 43px;
@@ -1182,6 +1270,7 @@ onMounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/categoryImport.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .merge-icon {
     width: 52px;
     height: 52px;
@@ -1189,12 +1278,14 @@ onMounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/merge.png') no-repeat;
   }
 }
+
 .line2 {
   width: 3px;
   height: 24px;
   background-color: #a7ccdf;
   margin: 0 38px;
 }
+
 .tabs2 {
   width: 300px;
   min-width: 300px;
@@ -1203,6 +1294,7 @@ onMounted(() => {
   background-size: 300px 1188px;
   overflow-y: auto;
   padding: 30px 0;
+
   .tab {
     width: 100%;
     height: 99px;
@@ -1212,27 +1304,34 @@ onMounted(() => {
     padding: 0 60px;
     display: flex;
     align-items: center;
+
     &:hover {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
     }
   }
+
   .tab_active {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
   }
 }
+
 .tab-content {
   display: flex;
   margin-top: 20px;
+
   .tab-content2 {
     padding: 20px 45px;
     display: flex;
     flex-direction: column;
+
     .line {
       height: 100px;
     }
+
     .line3 {
       display: flex;
     }
+
     .tab-list {
       width: 100%;
       flex: 1;
@@ -1241,16 +1340,19 @@ onMounted(() => {
       display: flex;
       flex-wrap: wrap;
       align-content: baseline;
+
       .icon {
         width: 160px;
         height: 88px;
         margin-bottom: 20px;
       }
+
       .tab {
         &:nth-child(3n-1) {
           margin: 40px 46px 0;
         }
       }
+
       .setting-btn {
         position: absolute;
         bottom: 18px;
@@ -1261,6 +1363,7 @@ onMounted(() => {
         background-size: 100% 100%;
         cursor: pointer;
       }
+
       .setting-menu {
         position: absolute;
         bottom: -310px;
@@ -1272,6 +1375,7 @@ onMounted(() => {
         background-color: #091432;
         //box-shadow: inset 0 0 60px #596891;
         padding: 30px 5px;
+
         &::after {
           content: '';
           width: 40px;
@@ -1286,6 +1390,7 @@ onMounted(() => {
           transform: rotate(45deg);
           background-color: #091432;
         }
+
         .menu-item {
           width: 100%;
           display: flex;
@@ -1295,6 +1400,7 @@ onMounted(() => {
           font-size: 32px;
           height: 72px;
           cursor: pointer;
+
           .icon-switch {
             display: inline-block;
             width: 36px;
@@ -1303,6 +1409,7 @@ onMounted(() => {
             background-size: 100% 100%;
             margin-right: 16px;
           }
+
           .icon-eye {
             display: inline-block;
             width: 36px;
@@ -1311,6 +1418,7 @@ onMounted(() => {
             background-size: 100% 100%;
             margin-right: 16px;
           }
+
           .icon-eye2 {
             display: inline-block;
             width: 36px;
@@ -1319,6 +1427,7 @@ onMounted(() => {
             background-size: 100% 100%;
             margin-right: 16px;
           }
+
           .icon-delete {
             display: inline-block;
             width: 32px;
@@ -1327,21 +1436,26 @@ onMounted(() => {
             background-size: 100% 100%;
             margin-right: 16px;
           }
+
           &:hover {
             color: #00fde7;
             background: #1e3b77;
+
             .icon-switch {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/switch2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-eye {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/show2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-eye2 {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/hide2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-delete {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/delete2.png') no-repeat;
               background-size: 100% 100%;
@@ -1350,6 +1464,7 @@ onMounted(() => {
         }
       }
     }
+
     .tab {
       width: 333px;
       height: 235px;
@@ -1364,9 +1479,11 @@ onMounted(() => {
       justify-content: center;
       align-items: center;
       margin-top: 40px;
+
       &:hover {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/boxHover2.png') no-repeat;
       }
+
       .checked1 {
         position: absolute;
         top: 30px;
@@ -1375,6 +1492,7 @@ onMounted(() => {
         height: 32px;
         background: url('@/assets/images/map/rightMenu/onlinePlotting/checked1.png') no-repeat;
       }
+
       .checked2 {
         position: absolute;
         top: 30px;
@@ -1384,6 +1502,7 @@ onMounted(() => {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/checked2.png') no-repeat;
       }
     }
+
     .tab_active {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/boxActive2.png') no-repeat;
     }
@@ -1401,44 +1520,61 @@ onMounted(() => {
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 10px;
 }
+
 .tab-content3 {
   .custom-table {
     width: 100%;
     color: #000;
+
     .table-header {
       display: flex;
       font-size: 38px;
       width: 100%;
       background-color: #194ba0;
+
       .th {
         padding: 25px 30px;
         flex: 1;
         color: #edfaff;
+
         &:last-child {
           flex: unset;
           width: 620px;
         }
       }
     }
+
+    .table-content {
+      max-height: 1125px;
+      overflow: auto;
+    }
+
     .tr {
       display: flex;
+      align-items: center;
       font-size: 38px;
-      width: 1487px;
+      min-height: 88px;
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tr.png') no-repeat;
       background-size: 100% 100%;
       margin-top: 10px;
+      cursor: pointer;
+
       &:hover {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
+        background-size: 100% 100%;
       }
+
       .td {
         padding: 25px 30px;
         color: #edfaff;
         flex: 1;
+
         .icon {
           margin: 0 10px;
           cursor: pointer;
         }
       }
+
       .td2 {
         flex: unset;
         width: 620px;
@@ -1460,9 +1596,11 @@ onMounted(() => {
   background-color: #0d3980;
   border: 4px solid #0b5fbb;
   margin-left: 20px;
+
   :deep(.el-color-picker) {
-    height: 60px !important;
+    height: 72px !important;
   }
+
   &::before {
     content: '';
     position: absolute;
@@ -1471,7 +1609,9 @@ onMounted(() => {
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
+
   &::after {
     content: '';
     position: absolute;
@@ -1480,16 +1620,20 @@ onMounted(() => {
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
+
 .params-box {
   margin: 30px 0;
 }
+
 .footer {
   display: flex;
   justify-content: flex-end;
   margin-top: 30px;
   padding-right: 40px;
+
   :deep(.el-pagination__total) {
     color: #a7ccdf;
     font-size: 32px;
@@ -1500,11 +1644,13 @@ onMounted(() => {
     .btn-prev {
       background-color: transparent;
       border: none;
+
       .el-icon {
         font-size: 22px;
         color: #a7ccdf;
       }
     }
+
     .el-pager li {
       width: 64px;
       height: 64px;
@@ -1515,17 +1661,20 @@ onMounted(() => {
       background-color: #0e3064;
       border: 1px solid #0c57a7;
       margin: 0 6px;
+
       &:hover {
         background-color: #038dff;
         border: 1px solid #038dff;
       }
     }
+
     .el-pager li.is-active {
       background-color: #038dff;
       border: 1px solid #038dff;
     }
   }
 }
+
 .btn-box {
   display: flex;
   align-items: center;