实时标绘 保存弹窗样式

src/assets/styles/element-ui.scss

@@ -352,6 +352,44 @@
   }
 }
 
+.custom-input2 {
+  position: relative;
+  .el-input__wrapper {
+    box-shadow: none;
+    background-color: #0d2f5d;
+    border: 1px solid #0a59a8;
+  }
+  .el-input__inner {
+    font-size: 32px;
+    color: #a8b9cd;
+    font-family: PingFang SC;
+    height: 55px;
+    line-height: 55px;
+    &::placeholder {
+      color: #a8b9cd;
+    }
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon1.png') no-repeat;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon2.png') no-repeat;
+  }
+}
 .custom-textarea {
   position: relative;
 

src/components/NearbyVideos/index.vue

@@ -144,6 +144,8 @@ const handleClose = () => {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
+  overflow: hidden;
+  margin-bottom: 75px;
 }
 .title {
   font-size: 84px;

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="edit-dialog">
+    <div class="close-btn" @click="cancel"></div>
+    <div class="gradient-text">保存提示</div>
+    <div class="line">
+      <div class="tip-icon"></div>
+      <div class="tip-item">
+        <div class="tip-text">是否保存当前预案？如果是，请输入预案名称：</div>
+        <el-input class="custom-input2" v-model="editData.pattern_name" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn" @click="cancel">取消</div>
+      <div class="btn2" @click="submitForm">确定</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="EditDialog">
+import { createPattern, updatePatternInfo } from '@/api/globalMap/onlinePlotting';
+
+interface Props {
+  modelValue: boolean;
+  editData: object[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:modelValue', 'submit']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+let buttonLoading = ref(false);
+const cancel = () => {
+  buttonLoading.value = false;
+  emits('update:modelValue', false);
+};
+const submitForm = () => {
+  buttonLoading.value = true;
+  const flag = !!props.editData.id;
+  const method = flag ? updatePatternInfo : createPattern;
+  method(props.editData)
+    .then(() => {
+      proxy.$modal.msgSuccess(flag ? '更新成功' : '保存成功');
+      emits('submit', false);
+    })
+    .finally(() => {
+      buttonLoading.value = false;
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.edit-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1568px;
+  height: 500px;
+  background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog3.png') no-repeat;
+  padding: 190px 40px 20px 50px;
+  font-size: 38px;
+  color: #ffffff;
+  .gradient-text {
+    position: absolute;
+    top: 30px;
+    left: 70px;
+    font-size: 84px;
+  }
+  .line {
+    display: flex;
+    align-items: center;
+    .tip-icon {
+      width: 173px;
+      height: 188px;
+      background: url('@/assets/images/map/rightMenu/onlinePlotting/tip.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .tip-item {
+      margin-left: 45px;
+      flex: 1;
+      .tip-text {
+        margin-bottom: 30px;
+      }
+    }
+  }
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 56px;
+  .btn {
+    width: 140px;
+    height: 56px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/btn2.png') no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-left: 20px;
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  .btn2 {
+    width: 204px;
+    height: 120px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/btn3.png') no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-left: 20px;
+    color: #ffffff;
+    font-size: 32px;
+  }
+}
+.close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 75px;
+  height: 70px;
+  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+</style>

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

@@ -106,21 +106,17 @@
   <TextEdit v-model="showTextEdit" @addText="addText" />
   <!--绘制提示信息-->
   <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
-  <Dialog v-model="showEdit" title="预案管理" width="450px" height="200px" style="position: absolute; top: 1280px">
-    <el-input v-model="editData.pattern_name" />
-    <div class="footer">
-      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
-      <el-button @click="cancel">取消</el-button>
-    </div>
-  </Dialog>
+  <!--保存修改弹窗-->
+  <EditDialog v-if="showEdit" v-model="showEdit" :editData="editData" @submit="handleSubmit" />
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
 import { nanoid } from 'nanoid';
 import { deepClone } from '@/utils';
 import { useHistory } from '@/hooks/useHistory';
-import { createPattern, deletePatternById, getPatternInfo, getPatternList, updatePatternInfo } from '@/api/globalMap/onlinePlotting';
+import { 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';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const getDrawTool = inject('getDrawTool');
@@ -508,7 +504,15 @@ let editData = ref({
   content: {}
 });
 let showEdit = ref(false);
-let buttonLoading = ref(false);
+const handleSubmit = () => {
+  showEdit.value = false;
+  editData.value = {
+    id: '',
+    pattern_name: '',
+    content: {}
+  };
+  getList();
+}
 const handleQuery = () => {
   queryParams.page = 1;
   getList();
@@ -535,30 +539,6 @@ const handleEdit = (id) => {
   });
   showEdit.value = true;
 };
-const submitForm = () => {
-  buttonLoading.value = true;
-  const flag = !!editData.value.id;
-  const method = flag ? updatePatternInfo : createPattern;
-  method(editData.value)
-    .then(() => {
-      proxy.$modal.msgSuccess(flag ? '更新成功' : '保存成功');
-      showEdit.value = false;
-      editData.value = {
-        id: '',
-        pattern_name: '',
-        content: {}
-      };
-      getList();
-    })
-    .finally(() => {
-      buttonLoading.value = false;
-    });
-};
-
-const cancel = () => {
-  buttonLoading.value = false;
-  showEdit.value = false;
-};
 const handleShowDialog = () => {
   editData.value = {
     id: '',
@@ -842,11 +822,7 @@ onMounted(() => {
     }
   }
 }
-.footer {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
+
 .color-container {
   width: 80px;
   height: 50px;
@@ -879,4 +855,5 @@ onMounted(() => {
     background: url('@/assets/images/inputIcon2.png') no-repeat;
   }
 }
+
 </style>