feat: 修改setting页面中personal profile

src/api/module/notificationMessage.ts

@@ -22,10 +22,6 @@ export const saveUserInfo = (params: any) => {
 /**
  * 获取milestone消息列表
  * @param save_model profile 代表基本信息的save, no_profile 代表格式信息的save
- * @param user_name
- * @param email
- * @param date_fromat
- * @param numbers_format
  */
 export const getNotificationList = (params: any) => {
   return HttpAxios.get(`${baseUrl}`, {
@@ -37,11 +33,6 @@ export const getNotificationList = (params: any) => {
 
 /**
  * 获取notification消息的see all详情
- * @param save_model profile 代表基本信息的save, no_profile 代表格式信息的save
- * @param user_name
- * @param email
- * @param date_fromat
- * @param numbers_format
  */
 export const getNotificationDetails = (params: any) => {
   return HttpAxios.post(`${baseUrl}`, {

src/views/Layout/src/components/Header/HeaderView.vue

@@ -206,7 +206,7 @@ const notificationDrawer = ref(false)
           class="font_family icon-icon_notice_b"
           style="font-size: 18px"
         ></span> -->
-
+        <span class="unread-tip-icon"></span>
         <el-button
           style="height: 40px; width: 40px; margin-right: 0px"
           class="el-button--text"
@@ -405,11 +405,21 @@ const notificationDrawer = ref(false)
   }
 
   .notice-icon {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 2px;
     cursor: pointer;
+    .unread-tip-icon {
+      position: absolute;
+      top: 9px;
+      right: 8px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: var(--color-theme);
+    }
   }
 }
 </style>

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -8,32 +8,15 @@ const loading = ref(false)
 const drawerModel = defineModel('drawerModel', { type: Boolean, default: false })
 
 const notificationType = ref('all')
-const notificationTypeList = ref([
-  {
-    label: 'All Notifications',
-    value: 'all'
-  },
-  {
-    label: 'Milestone Update',
-    value: 'feature1'
-  },
-  {
-    label: 'Container Status Update',
-    value: 'all2'
-  },
-  {
-    label: 'Departure/Arrival Delay',
-    value: 'feature3'
-  },
-  {
-    label: 'ETD/ETA Change',
-    value: 'all4'
-  },
-  {
-    label: 'Feature Update',
-    value: 'feature5'
-  }
-])
+const notificationTypeList = ref({
+  all: 'All Notifications',
+  Milestone_Update: 'Milestone Update',
+  Container_Status_Update: 'Container Status Update',
+  Container_Arrival: 'Container Arrival',
+  'Departure/Arrival_Delay': 'Departure/Arrival Delay',
+  'ETD/ETA_Change': 'ETD/ETA Change',
+  Feature_Update: 'Feature Update'
+})
 
 const notificationList = ref<any[]>([])
 // const notificationList = [
@@ -148,10 +131,10 @@ const clearData = () => {
     <template #header>
       <el-select size="large" v-model="notificationType" class="notification-type">
         <el-option
-          v-for="item in notificationTypeList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+          v-for="(label, value) in notificationTypeList"
+          :key="value"
+          :label="label"
+          :value="value"
         />
       </el-select>
     </template>

src/views/Layout/src/components/Menu/MenuView.vue

@@ -17,49 +17,54 @@ watch(
   }
 )
 const getMenuList = () => {
-  // $api.getMenuList().then((res) => {
-  //   if (res.code === 200) {
-  //     menuList.value = res.data
-  //   }
-  // })
-  menuList.value = [
-    {
-      index: '1',
-      label: 'Dashboard',
-      icon: 'icon_data_fill_b',
-      path: '/dashboard'
-    },
-    {
-      index: 2,
-      label: 'Booking',
-      icon: 'icon_booking__fill_b',
-      path: '/booking'
-    },
-    {
-      index: 3,
-      label: 'Tracking',
-      icon: 'icon_tracking__fill_b',
-      path: '/tracking'
-    },
-    {
-      index: 4,
-      label: 'System Management',
-      icon: 'icon_system__management_fill_b',
-      type: 'list',
-      children: [
-        {
-          index: '4-1',
-          label: 'Operation Log',
-          path: '/Operationlog'
-        },
-        {
-          index: '4-2',
-          label: 'System Message',
-          path: '/system-message'
-        }
-      ]
+  $api.getMenuList().then((res) => {
+    if (res.code === 200) {
+      menuList.value = res.data
     }
-  ]
+  })
+  // menuList.value = [
+  //   {
+  //     index: '1',
+  //     label: 'Dashboard',
+  //     icon: 'icon_data_fill_b',
+  //     path: '/dashboard'
+  //   },
+  //   {
+  //     index: 2,
+  //     label: 'Booking',
+  //     icon: 'icon_booking__fill_b',
+  //     path: '/booking'
+  //   },
+  //   {
+  //     index: 3,
+  //     label: 'Tracking',
+  //     icon: 'icon_tracking__fill_b',
+  //     path: '/tracking'
+  //   },
+  //   {
+  //     index: 4,
+  //     label: 'System Management',
+  //     icon: 'icon_system__management_fill_b',
+  //     type: 'list',
+  //     children: [
+  //       {
+  //         index: '4-1',
+  //         label: 'System Message',
+  //         path: '/system-message'
+  //       },
+  //       {
+  //         index: '4-2',
+  //         label: 'System Settings',
+  //         path: '/SystemSettings'
+  //       },
+  //       {
+  //         index: '4-3',
+  //         label: 'Operation Log',
+  //         path: '/Operationlog'
+  //       }
+  //     ]
+  //   }
+  // ]
 }
 getMenuList()
 //监听窗口大小

src/views/SystemMessage/src/SystemMessage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import EventCard from '@/components/NotificationMessageCard/src/components/EventCard.vue'
-import PersonalProfile from './components/PersonalProfile.vue'
 
 const collapseVModel = ref<string[]>(['1'])
 
@@ -93,6 +92,70 @@ const notificationList = [
       arrivalDelayNum: 8
     }
   },
+  {
+    type: 'container',
+    isRead: false,
+    mode: '',
+    no: 'SHJN2301234',
+    tag: 'Unloaded From Vessel',
+    location: 'Hong Kong',
+    timeLabel: 'ATA: ',
+    time: '2510-12-1 14:30 UTC+8',
+    timezone: 'Asia/Shanghai',
+    previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+  },
+  {
+    type: 'delay',
+    numericRecords: 0,
+    isRead: false,
+    title: 'Delay Daily Summary (Jan 10, 2025)',
+    mode: 'Air Freight',
+    no: 'SHJN2301234',
+    tag: 'Departure Delay',
+    location: 'Hong Kong',
+    timeLabel: 'ATA: ',
+    time: '2510-12-1 14:30 UTC+8',
+    timezone: 'Asia/Shanghai',
+    info: {
+      timeLabel: 'ATA: ',
+      time: '2510-12-1 14:30 UTC+8',
+      timezone: 'Asia/Shanghai',
+      departureDelayNum: 10,
+      arrivalDelayNum: 8
+    }
+  },
+  {
+    type: 'container',
+    isRead: false,
+    mode: '',
+    no: 'SHJN2301234',
+    tag: 'Unloaded From Vessel',
+    location: 'Hong Kong',
+    timeLabel: 'ATA: ',
+    time: '2510-12-1 14:30 UTC+8',
+    timezone: 'Asia/Shanghai',
+    previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+  },
+  {
+    type: 'delay',
+    numericRecords: 0,
+    isRead: false,
+    title: 'Delay Daily Summary (Jan 10, 2025)',
+    mode: 'Air Freight',
+    no: 'SHJN2301234',
+    tag: 'Departure Delay',
+    location: 'Hong Kong',
+    timeLabel: 'ATA: ',
+    time: '2510-12-1 14:30 UTC+8',
+    timezone: 'Asia/Shanghai',
+    info: {
+      timeLabel: 'ATA: ',
+      time: '2510-12-1 14:30 UTC+8',
+      timezone: 'Asia/Shanghai',
+      departureDelayNum: 10,
+      arrivalDelayNum: 8
+    }
+  },
   {
     type: 'change',
     numericRecords: 0,
@@ -172,7 +235,6 @@ const notificationList = [
               <span>33</span>
             </div>
           </template>
-          <PersonalProfile />
         </el-tab-pane>
         <el-tab-pane label="Read" name="third">Role</el-tab-pane>
       </el-tabs>
@@ -279,7 +341,7 @@ const notificationList = [
     }
   }
   :deep(.el-tabs) {
-    height: calc(100% - 40px);
+    height: calc(100%);
     .el-tabs__content {
       overflow-y: auto;
     }

src/views/SystemMessage/src/components/notificationType.ts

@@ -1,7 +0,0 @@
-export const notificationType = {
-  Milestone_Update: 'Milestone Update',
-  Container_Status_Update: 'Container Status Update',
-  Container_Arrival: 'Container Arrival',
-  'Departure/Arrival_Delay': 'Departure/Arrival Delay',
-  'ETD/ETA_Change': 'ETD/ETA Change'
-}

src/views/SystemSettings/src/SystemSettings.vue

@@ -3,10 +3,11 @@ import { ref, onMounted } from 'vue'
 import AddRSettingTableules from './components/SettingTable'
 import MonitoringTable from './components/MonitoringTable'
 import { useRouter } from 'vue-router'
+import PersonalProfile from './components/PersonalProfile.vue'
 
 const router = useRouter()
 
-const TabActive = ref('Subscribe Notifications')
+const TabActive = ref('Personal Profile')
 const isMilestoneChecked = ref(false)
 const isContainerChecked = ref(false)
 const isDepartureChecked = ref(false)
@@ -212,7 +213,7 @@ onMounted(() => {
 <template>
   <div class="Title">System Settings</div>
   <el-tabs v-model="TabActive" class="demo-tabs">
-    <el-tab-pane label="Personal Profile" name="Personal Profile"> Personal Profile </el-tab-pane>
+    <el-tab-pane label="Personal Profile" name="Personal Profile"><PersonalProfile /></el-tab-pane>
     <el-tab-pane label="Subscribe Notifications" name="Subscribe Notifications">
       <div class="subscribedTitle">Notification Events for Subscribed Shipments</div>
       <div class="SubscribeCollapse">
@@ -455,4 +456,11 @@ onMounted(() => {
 .el-button--main {
   margin-bottom: 4px;
 }
-</style>
+
+.demo-tabs {
+  height: calc(100% - 68px);
+  :deep(.el-tabs__content) {
+    overflow-y: auto;
+  }
+}
+</style>

src/views/SystemMessage/src/components/PersonalProfile.vue → src/views/SystemSettings/src/components/PersonalProfile.vue

@@ -93,8 +93,8 @@ const saveConfig = (model: string) => {
   } else {
     params = {
       save_model: 'no_profile',
-      date_fromat: monthFormat.value,
-      number_format: numbersFormat.value
+      date_format: monthFormat.value,
+      numbers_format: numbersFormat.value
     }
   }
   console.log(params, 'value')
@@ -278,6 +278,8 @@ const saveConfig = (model: string) => {
 
 <style scoped lang="scss">
 .personal-profile {
+  padding: 24px;
+  padding-top: 9px;
   .basic-information,
   .personal-preferences {
     border: 1px solid var(--color-border);