消息提示、历史预案分页

src/api/globalMap/onlinePlotting.ts

@@ -175,7 +175,7 @@ export const updateClassificationInfo = (id, data) => {
   });
 };
 // 数据创建
-export const getClassificationCreate = (data) => {
+export const createClassification = (data) => {
   return request({
     url: '/api/pattern/classification/create',
     method: 'post',

src/assets/styles/element-ui.scss

@@ -1,4 +1,3 @@
-
 .el-collapse {
   .collapse__title {
     font-weight: 600;
@@ -431,6 +430,12 @@
 }
 
 .el-form {
+  .el-form-item--default {
+    margin-bottom: 40px !important;
+    .el-form-item__error {
+      font-size: 38px !important;
+    }
+  }
   .el-form-item__label {
     color: #fff;
     font-size: 38px;
@@ -606,3 +611,5 @@
   height: 88px !important;
   line-height: 88px !important;
 }
+
+

src/utils/notification.ts

@@ -7,6 +7,11 @@ const notificationStyle = {
     borderColor: '#f0f9eb',
     backgroundColor: '#f0f9eb'
   },
+  warning: {
+    color: '#e6a23c',
+    borderColor: '#fdf6ec',
+    backgroundColor: '#fdf6ec'
+  },
   error: {
     color: '#f56c6c',
     borderColor: '#fef0f0',
@@ -43,7 +48,11 @@ const createNotificationElement = (type: string, msg: string) => {
   }
   html += `<div>${msg}</div>`;
   div.innerHTML = html;
-  document.getElementsByClassName('bg')[0].appendChild(div);
+  let obj = document.getElementsByClassName('bg')[0];
+  if (!obj) {
+    obj = document.getElementById('app');
+  }
+  obj.appendChild(div);
   div.style.opacity = '1';
   return div;
 };
@@ -70,9 +79,16 @@ export const showErrorMsg: any = (msg: string, duration?: number) => {
   removeNotificationElement(duration);
 };
 
-// 创建错误信息提示
+// 创建成功信息提示
 export const showSuccessMsg: any = (msg: string, duration?: number) => {
   if (!!toastElement) return;
   toastElement = createNotificationElement('success', msg);
   removeNotificationElement(duration);
 };
+
+// 创建警告信息提示
+export const showWarningMsg: any = (msg: string, duration?: number) => {
+  if (!!toastElement) return;
+  toastElement = createNotificationElement('warning', msg);
+  removeNotificationElement(duration);
+};

src/utils/request.ts

@@ -10,6 +10,7 @@ import FileSaver from 'file-saver';
 import { getLanguage } from '@/lang';
 import { encryptBase64, encryptWithAes, generateAesKey, decryptWithAes, decryptBase64 } from '@/utils/crypto';
 import { encrypt, decrypt } from '@/utils/jsencrypt';
+import { showErrorMsg, showWarningMsg } from '@/utils/notification';
 
 const encryptHeader = 'encrypt-key';
 let downloadLoadingInstance: LoadingInstance;
@@ -142,13 +143,13 @@ service.interceptors.response.use(
       }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
     } else if (code === HttpStatus.SERVER_ERROR) {
-      ElMessage({ message: msg, type: 'error' });
+      showErrorMsg(msg);
       return Promise.reject(new Error(msg));
     } else if (code === HttpStatus.WARN) {
-      ElMessage({ message: msg, type: 'warning' });
+      showWarningMsg(msg);
       return Promise.reject(new Error(msg));
     } else if (code !== HttpStatus.SUCCESS) {
-      ElNotification.error({ title: msg });
+      showErrorMsg(msg);
       return Promise.reject('error');
     } else {
       return Promise.resolve(res.data);
@@ -163,7 +164,7 @@ service.interceptors.response.use(
     } else if (message.includes('Request failed with status code')) {
       message = '系统接口' + message.substr(message.length - 3) + '异常';
     }
-    ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
+    showErrorMsg(message, 5 * 1000);
     return Promise.reject(error);
   }
 );
@@ -188,12 +189,12 @@ export function download(url: string, params: any, fileName: string) {
         const resText = await resp.data.text();
         const rspObj = JSON.parse(resText);
         const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
-        ElMessage.error(errMsg);
+        showErrorMsg(errMsg);
       }
       downloadLoadingInstance.close();
     }).catch((r: any) => {
       console.error(r);
-      ElMessage.error('下载文件出现错误，请联系管理员！');
+      showErrorMsg('下载文件出现错误，请联系管理员！');
       downloadLoadingInstance.close();
     });
 }
@@ -211,13 +212,13 @@ export function download2(url: string, fileName: string) {
         const resText = await resp.data.text();
         const rspObj = JSON.parse(resText);
         const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
-        ElMessage.error(errMsg);
+        showErrorMsg('errMsg');
       }
       downloadLoadingInstance.close();
     })
     .catch((r: any) => {
       console.error(r);
-      ElMessage.error('下载文件出现错误，请联系管理员！');
+      showErrorMsg('下载文件出现错误，请联系管理员！');
       downloadLoadingInstance.close();
     });
 }

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

@@ -37,10 +37,11 @@
 </template>
 
 <script lang="ts" setup name="EditClassDialog">
-import { getClassificationCreate, getClassificationInfo, updateClassificationInfo } from '@/api/globalMap/onlinePlotting';
+import { createClassification, getClassificationInfo, updateClassificationInfo } from '@/api/globalMap/onlinePlotting';
 import { FormInstance } from 'element-plus';
 import { deepClone } from '@/utils';
 import { toRefs } from 'vue';
+import { showSuccessMsg } from '@/utils/notification';
 
 const props = defineProps({
   modelValue: String,
@@ -89,11 +90,13 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       }
       if (!!props.id) {
         updateClassificationInfo(props.id, data).then(() => {
+          showSuccessMsg('修改成功');
           emits('updateData');
           emits('update:modelValue');
         });
       } else {
-        getClassificationCreate(data).then(() => {
+        createClassification(data).then(() => {
+          showSuccessMsg('新增成功');
           emits('updateData');
           emits('update:modelValue');
         });

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

@@ -18,6 +18,7 @@
 
 <script lang="ts" setup name="EditDialog">
 import { createPattern, updatePatternInfo } from '@/api/globalMap/onlinePlotting';
+import { showSuccessMsg } from '@/utils/notification';
 
 interface Props {
   modelValue: boolean;
@@ -37,7 +38,7 @@ const submitForm = () => {
   const method = flag ? updatePatternInfo : createPattern;
   method(props.editData)
     .then(() => {
-      proxy.$modal.msgSuccess(flag ? '更新成功' : '保存成功');
+      showSuccessMsg(flag ? '更新成功' : '保存成功');
       emits('submit', false);
     })
     .finally(() => {

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

@@ -15,6 +15,7 @@
 
 <script lang="ts" setup>
 import { addGroup, delGroup, getGroupInfo, updateGroup } from '@/api/globalMap/onlinePlotting';
+import { showSuccessMsg } from '@/utils/notification';
 
 const props = defineProps({
   modelValue: Boolean,
@@ -49,7 +50,7 @@ const handleAddGroup = () => {
   };
   addGroup(obj).then(() => {
     emits('change');
-    proxy?.$modal.msgSuccess('新增成功');
+    showSuccessMsg('新增成功');
     handleClose();
   });
 };
@@ -57,7 +58,7 @@ const handleAddGroup = () => {
 const handleUpdateGroup = () => {
   updateGroup(groupForm.value).then(() => {
     emits('change');
-    proxy?.$modal.msgSuccess('修改成功');
+    showSuccessMsg('修改成功');
     handleClose();
   });
 };
@@ -69,7 +70,7 @@ const handleClose = () => {
 const handleDeleteGroup = async () => {
   await proxy?.$modal.confirm('您确定要删除该分组?');
   delGroup(groupForm.value.group_id).then(() => {
-    proxy?.$modal.msgSuccess('删除成功');
+    showSuccessMsg('删除成功');
     emits('change');
     handleClose();
   });

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

@@ -38,6 +38,7 @@
 //   lnglat: [];
 // }
 import { deepClone } from '@/utils';
+import { showSuccessMsg } from '@/utils/notification';
 
 interface Props {
   modelValue: boolean;
@@ -62,6 +63,7 @@ const cancelEdit = () => {
 const addText = () => {
   const data = deepClone(textEditState);
   textEditState.text = '';
+  showSuccessMsg('新增成功');
   emits('addText', data);
 };
 </script>

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

@@ -157,12 +157,12 @@
         </div>
         <div class="footer">
           <el-pagination
+            v-model:current-page="queryParams.page"
+            v-model:page-size="queryParams.pageSize"
             background
             :hide-on-single-page="true"
             layout="total, prev, pager, next"
             :total="total"
-            :page-size="queryParams.pageSize"
-            :current-page="queryParams.page"
             @current-change="getList"
           />
         </div>
@@ -186,7 +186,7 @@
   <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>
+      <div style="font-size: 36px">预案名称：</div>
       <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
     </div>
   </Dialog>
@@ -214,6 +214,7 @@ import { Search } from '@element-plus/icons-vue';
 import html2canvas from 'html2canvas';
 import LayerDetail from './LayerDetail.vue';
 import { createWebSocket } from '@/utils/websocket';
+import { showSuccessMsg } from '@/utils/notification';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const getMapUtils = inject('getMapUtils');
@@ -295,7 +296,7 @@ const tipTitle = computed(() => {
 
 // 获取模板分类树
 const getTemplateTreeData = () => {
-  getTemplateTree({ visible: showSetting.value ? '' : '1'}).then((res) => {
+  getTemplateTree({ visible: showSetting.value ? '' : '1' }).then((res) => {
     menu.value[0].children = res.data;
   });
 };
@@ -316,13 +317,16 @@ const handleShowSwitch = (item) => {
 };
 const handleMenuItemHide = (item) => {
   item.showSetting = false;
-  changeVisibleClassification({ classification_id: item.classification_id, visible: item.visible === '0' ? '1' : '0' }).then(() => {
+  const newVisible = item.visible === '0' ? '1' : '0';
+  changeVisibleClassification({ classification_id: item.classification_id, visible: newVisible }).then(() => {
+    showSuccessMsg(newVisible === '0' ? '隐藏成功' : '显示成功');
     getTemplateTreeData();
   });
 };
 const handleMenuItemDelete = (item) => {
   item.showSetting = false;
   deleteClassificationCreate(item.classification_id).then(() => {
+    showSuccessMsg('删除成功');
     getTemplateTreeData();
   });
 };
@@ -806,13 +810,14 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  // webSock = createWebSocket('ZEaBf-NZ4Fi29kSYGdNeJ', getWebSocketData);
-  // patternId.value = 'ZEaBf-NZ4Fi29kSYGdNeJ';
+  // webSock = createWebSocket('NgIip9fMfoAknntOY-hXR', getWebSocketData);
+  // patternId.value = 'NgIip9fMfoAknntOY-hXR';
   createCollaboration(form.value).then(() => {
     patternId.value = form.value.pattern_id;
     webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
     showForm.value = false;
     collaboration.value = true;
+    proxy?.$modal.msgSuccess('开启协同标绘成功');
   });
 };
 const handleShowDialog = () => {

src/views/routineCommandMap/RightSection/EventReport/EventManage.vue

@@ -64,7 +64,7 @@
                   clearable
                 >
                   <el-option label="全部" value=""></el-option>
-                  <el-option v-for="item in region" :key="item.value" :label="item.lable" :value="item.value"></el-option>
+                  <el-option v-for="item in region" :key="item.value" :label="item.label" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>