fix:修改样式和bug

src/components/DateRange/src/DateRange.vue

@@ -162,7 +162,7 @@ const clearDaterangeObj = () => {
           </div>
         </div>
         <div class="MoreType" @click="AddType" v-if="AddDateType.length != DateTypeoptions.length">
-          + More Date Type
+          <el-button class="el-button--noborder moretype">+ More Date Type</el-button>
         </div>
         <div class="daterange_bottom">
           <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
@@ -297,4 +297,9 @@ const clearDaterangeObj = () => {
     width: 336px;
   }
 }
+.moretype {
+  background-color: transparent;
+  padding: 0 4px;
+  height: 24px;
+}
 </style>

src/components/FliterTags/src/FilterTags.vue

@@ -94,7 +94,6 @@ const checkedBox = (i: any, name: any, checked: any) => {
   flex-wrap: wrap;
 }
 .list {
-  margin-right: 16px;
   min-width: 93px;
   padding: 5.42px 16px;
   color: var(--color-neutral-2);
@@ -106,7 +105,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
   border-radius: var(--border-radius-12);
 }
 .v-tag {
-  min-width: 36px;
+  min-width: 18px;
   font-size: var(--font-size-2);
   margin-left: 6px;
   border-radius: 6px;
@@ -115,8 +114,8 @@ const checkedBox = (i: any, name: any, checked: any) => {
 }
 .v-tag__all {
   font-weight: 400;
-  background-color: var(--color-tag-all-bg);
-  color: var(--color-tag-all);
+  background-color: #feecf3;
+  color: #e26394;
 }
 .v-tag__created {
   font-weight: 400;

src/components/MoreFilters/src/MoreFilters.vue

@@ -8,22 +8,22 @@ import SelectTable from '@/components/SelectTable/src/SelectTable.vue'
 
 onMounted(() => {
   emitter.on('clearTag', (tag: any) => {
-    if (tag.includes('shippername')) {
-      clearname(InputForm.value, 'parties', 'shippername')
-    } else if (tag.includes('consigneename')) {
-      clearname(InputForm.value, 'parties', 'consigneename')
+    if (tag.includes('Shippername')) {
+      clearname(InputForm.value, 'parties', 'Shippername')
+    } else if (tag.includes('Consigneename')) {
+      clearname(InputForm.value, 'parties', 'Consigneename')
     } else if (tag.includes('Incoterms')) {
       clearname(InputForm.value, 'General', 'Incoterms')
     } else if (tag.includes('Service')) {
       clearname(InputForm.value, 'General', 'Service')
-    } else if (tag.includes('vessel')) {
-      clearname(InputForm.value, 'transportation', 'vessel')
-    } else if (tag.includes('voyage')) {
-      clearname(InputForm.value, 'transportation', 'voyage')
-    } else if (tag.includes('origin')) {
-      clearname(InputForm.value, 'palces', 'origin')
-    } else if (tag.includes('destination')) {
-      clearname(InputForm.value, 'palces', 'destination')
+    } else if (tag.includes('Vessel')) {
+      clearname(InputForm.value, 'transportation', 'Vessel')
+    } else if (tag.includes('Voyage')) {
+      clearname(InputForm.value, 'transportation', 'Voyage')
+    } else if (tag.includes('Origin')) {
+      clearname(InputForm.value, 'palces', 'Origin')
+    } else if (tag.includes('Destination')) {
+      clearname(InputForm.value, 'palces', 'Destination')
     } else if (tag.includes('Origin Agent')) {
       AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Origin Agent')
       delete MoreFiltersObj['Origin Agent']
@@ -226,16 +226,16 @@ selectedPlacesTypeIndex.value = []
 
 const InputForm = ref({
   parties: {
-    shippername: [],
-    consigneename: []
+    Shippername: [],
+    Consigneename: []
   },
   transportation: {
-    vessel: [],
-    voyage: []
+    Vessel: [],
+    Voyage: []
   },
   palces: {
-    origin: [],
-    destination: []
+    Origin: [],
+    Destination: []
   },
   General: {
     Incoterms: '',
@@ -343,18 +343,18 @@ const changeAutoSelect = (Array: any, val: any, value: any, arraykey1: any, arra
   }
 }
 const changeAutoSelectshippername = (val: any) => {
-  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'shippername')
+  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'Shippername')
 }
 const changeAutoSelectconsigneename = (val: any) => {
-  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'consigneename')
+  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'Consigneename')
 }
 const changeAutoSelectvessel = (val: any) => {
-  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'vessel')
+  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'Vessel')
 }
 const changeAutoSelectvoyage = (val: any) => {
-  // changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'voyage')
-  MoreFiltersObj.voyage = val
-  MoreFiltersObj2.voyage = val
+  // changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'Voyage')
+  MoreFiltersObj.Voyage = val
+  MoreFiltersObj2.Voyage = val
 }
 const check = (row: any, value: any, key1: any, key2: any) => {
   value[key1][key2] = row
@@ -363,12 +363,12 @@ const check = (row: any, value: any, key1: any, key2: any) => {
 //选择origin
 const checkorigin = (row: any) => {
   if (row) {
-    check(row, InputForm.value, 'palces', 'origin')
+    check(row, InputForm.value, 'palces', 'Origin')
   }
 }
 const checkdestination = (row: any) => {
   if (row) {
-    check(row, InputForm.value, 'palces', 'destination')
+    check(row, InputForm.value, 'palces', 'Destination')
   }
 }
 const delSelect = (i: any, val: any) => {
@@ -502,16 +502,16 @@ const clearrest = () => {
   emit('clearMoreFiltersTags')
   InputForm.value = {
     parties: {
-      shippername: [],
-      consigneename: []
+      Shippername: [],
+      Consigneename: []
     },
     transportation: {
-      vessel: [],
-      voyage: []
+      Vessel: [],
+      Voyage: []
     },
     palces: {
-      origin: [],
-      destination: []
+      Origin: [],
+      Destination: []
     },
     General: {
       Incoterms: 'Please Select Date Range',
@@ -636,7 +636,7 @@ const ServiceSearch = (val: any, value: any) => {
             <AutoSelect
               ASType="contanct"
               @changeAutoSelect="changeAutoSelectshippername"
-              :ASValue="InputForm.parties.shippername"
+              :ASValue="InputForm.parties.Shippername"
               ASPlaceholder="Please input shipper name"
             >
             </AutoSelect>
@@ -646,7 +646,7 @@ const ServiceSearch = (val: any, value: any) => {
             <AutoSelect
               ASType="contanct"
               @changeAutoSelect="changeAutoSelectconsigneename"
-              :ASValue="InputForm.parties.consigneename"
+              :ASValue="InputForm.parties.Consigneename"
               ASPlaceholder="Please input consignee name"
             >
             </AutoSelect>
@@ -667,7 +667,7 @@ const ServiceSearch = (val: any, value: any) => {
             @click="AddType('party')"
             v-if="AddDateType.length != PartyTypeoptions.length"
           >
-            + More Party Type
+            <el-button class="el-button--noborder moretype">+ More Party Type</el-button>
           </div>
         </el-collapse-item>
         <!-- Places -->
@@ -678,11 +678,11 @@ const ServiceSearch = (val: any, value: any) => {
           ></template>
           <div class="ETD">
             <div class="ETD_title">Origin</div>
-            <SelectTable :searchInput="InputForm.palces.origin" @check="checkorigin" />
+            <SelectTable :searchInput="InputForm.palces.Origin" @check="checkorigin" />
           </div>
           <div class="ETA">
             <div class="ETD_title">Destination</div>
-            <SelectTable :searchInput="InputForm.palces.destination" @check="checkdestination" />
+            <SelectTable :searchInput="InputForm.palces.Destination" @check="checkdestination" />
           </div>
           <SelectTableSelect
             ref="placeSelectTableSelectRef"
@@ -701,7 +701,7 @@ const ServiceSearch = (val: any, value: any) => {
             @click="AddType('place')"
             v-if="AddDatePlaceType.length != PlaceTypeoptions.length"
           >
-            + More Place Type
+            <el-button class="el-button--noborder moretype">+ More Place Type</el-button>
           </div>
         </el-collapse-item>
         <!-- Transportation -->
@@ -716,7 +716,7 @@ const ServiceSearch = (val: any, value: any) => {
             <AutoSelect
               ASType="vessel"
               @changeAutoSelect="changeAutoSelectvessel"
-              :ASValue="InputForm.transportation.vessel"
+              :ASValue="InputForm.transportation.Vessel"
               ASPlaceholder="Please input vessel name or code"
             >
             </AutoSelect>
@@ -725,14 +725,14 @@ const ServiceSearch = (val: any, value: any) => {
             <div class="ETD_title">Voyage/Flight</div>
             <el-input
               placeholder="Please input voyage or flight no."
-              @change="changeAutoSelectvoyage(InputForm.transportation.voyage)"
-              v-model="InputForm.transportation.voyage"
+              @change="changeAutoSelectvoyage(InputForm.transportation.Voyage)"
+              v-model="InputForm.transportation.Voyage"
             ></el-input>
             <!-- <AutoSelect
-              ASType="vessel"
+              ASType="voyage"
               @changeAutoSelect="changeAutoSelectvoyage"
-              :ASValue="InputForm.transportation.voyage"
-              ASPlaceholder="Please input voyage or flight no."
+              :ASValue="InputForm.transportation.Voyage"
+              ASPlaceholder="Please input Voyage or flight no."
             ></AutoSelect> -->
           </div>
         </el-collapse-item>
@@ -915,4 +915,9 @@ const ServiceSearch = (val: any, value: any) => {
 :deep(.el-drawer__close-btn) {
   margin-right: 0;
 }
+.moretype {
+  background-color: transparent;
+  padding: 0 4px;
+  height: 24px;
+}
 </style>

src/components/ScoringGrade/src/ScoringGrade.vue

@@ -13,8 +13,9 @@ import hhhPng2 from '../image/hhh_2.png'
 import happyPng from '../image/score_happy.png'
 import happyPng2 from '../image/happy_2.png'
 import normalPng from '../image/score_normal.png'
+import submitsucessful from '../image/submit_successful.png'
 
-const isShow = ref(true)
+// const isShow = ref(true)
 const visible = ref(false)
 const isLoaded = ref(false)
 const isShowAngry = ref(false)
@@ -27,6 +28,7 @@ const isshowDetails_submit = ref(false)
 const isshowDetails = ref(true)
 interface AvaterItem {
   src: string
+  src1: string
   itemsrc: string
   itemtext: string
   expression: string
@@ -41,6 +43,7 @@ const clickSrc = ref(normalPng)
 avater.value = [
   {
     src: angryPng,
+    src1: angryPng,
     itemsrc: angryPng2,
     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
     expression: 'angry',
@@ -48,6 +51,7 @@ avater.value = [
   },
   {
     src: sadPng,
+    src1: sadPng,
     itemsrc: sadPng2,
     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
     expression: 'sad',
@@ -55,6 +59,7 @@ avater.value = [
   },
   {
     src: smilePng,
+    src1: smilePng,
     itemsrc: smilePng2,
     itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
     expression: 'smile',
@@ -62,6 +67,7 @@ avater.value = [
   },
   {
     src: hhhPng,
+    src1: hhhPng,
     itemsrc: hhhPng2,
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
     expression: 'hhh',
@@ -69,6 +75,7 @@ avater.value = [
   },
   {
     src: happyPng,
+    src1: happyPng,
     itemsrc: happyPng2,
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
     expression: 'happy',
@@ -78,16 +85,16 @@ avater.value = [
 const dialogVisible = ref(false)
 
 // 控制表情normal的显隐
-const showPopver = () => {
-  isShow.value = false
-}
+// const showPopver = () => {
+//   isShow.value = false
+// }
 // 控制popover的显隐
 const checkexpression = ref()
 const showScore = (item: any) => {
   visible.value = false
   dialogVisible.value = true
   clickSrc.value = item.itemsrc
-  isShow.value = true
+  // isShow.value = true
   colorfulSrc.value = item.itemsrc
   setTimeout(() => {
     isLoaded.value = true
@@ -97,52 +104,52 @@ const showScore = (item: any) => {
       setTimeout(() => {
         isShowAngry.value = true
         angryproposal.value = item.proposal
-      }, 1500)
+      }, 1000)
     } else if (item.expression == 'sad') {
       checkexpression.value = 'sad'
       setTimeout(() => {
         isShowAngry.value = true
         angryproposal.value = item.proposal
-      }, 1500)
+      }, 1000)
     } else if (item.expression == 'smile') {
       checkexpression.value = 'smile'
       setTimeout(() => {
         isShowSmile.value = true
         smileproposal.value = item.proposal
-      }, 1500)
+      }, 1000)
     } else if (item.expression == 'hhh') {
       checkexpression.value = 'hhh'
       setTimeout(() => {
         isShowHappy.value = true
         angryproposal.value = item.proposal
-      }, 1500)
+      }, 1000)
     } else if (item.expression == 'happy') {
       checkexpression.value = 'happy'
       setTimeout(() => {
         isShowHappy.value = true
         angryproposal.value = item.proposal
-      }, 1500)
+      }, 1000)
     }
   }, 1000)
 }
 const avatarClick = () => {
-  visible.value = true
+  visible.value = !visible.value
   isshowDetails.value = true
 }
 //关闭对话框后，隐藏有动画的对话框
 const closeDialog = () => {
-  isLoaded.value = false
-  isLoaded.value = false
-  isLoaded_share.value = false
-  isShowAngry.value = false
-  isShowHappy.value = false
-  isshowDetails.value = false
-  isShowSmile.value = false
-  isshowexpression_details.value = false
-  isshowDetails_submit.value = false
-  smileCheckbox.value = {}
-  angryCheckbox.value = []
-  happyCheckbox.value = []
+  setTimeout(() => {
+    isLoaded.value = false
+    isLoaded_share.value = false
+    isShowAngry.value = false
+    isShowHappy.value = false
+    isShowSmile.value = false
+    isshowexpression_details.value = false
+    isshowDetails_submit.value = false
+    smileCheckbox.value = {}
+    angryCheckbox.value = []
+    happyCheckbox.value = []
+  }, 1500)
 }
 //生气表情，选择建议后显示对话
 const angryCheckbox = ref([])
@@ -154,8 +161,8 @@ const changeAngryDetails = (val: any) => {
     isLoaded_share.value = true
     setTimeout(() => {
       isshowexpression_details.value = true
-    }, 1500)
-  }, 1500)
+    }, 500)
+  }, 500)
 }
 //开心表情，选择建议后显示对话
 const changeHappybuttonbox = (val: any) => {
@@ -164,8 +171,8 @@ const changeHappybuttonbox = (val: any) => {
     isLoaded_share.value = true
     setTimeout(() => {
       isshowexpression_details.value = true
-    }, 1500)
-  }, 1500)
+    }, 500)
+  }, 500)
 }
 // smile提交后显示对话
 const changeSmileRadio = (val: any) => {
@@ -175,8 +182,8 @@ const changeSmileRadio = (val: any) => {
       isLoaded_share.value = true
       setTimeout(() => {
         isshowexpression_details.value = true
-      }, 1500)
-    }, 1500)
+      }, 500)
+    }, 500)
   }
 }
 // 提交details
@@ -228,11 +235,16 @@ const submitDetails = (val: any) => {
       })
   }
 }
+const mouseenter = (item: any) => {
+  item.src = item.itemsrc
+}
+const mouseout = (item: any) => {
+  item.src = item.src1
+}
 </script>
 <template>
-  <div class="scoring" :style="[{ display: isShow ? 'flex' : 'none' }]">
+  <div class="scoring">
     <el-popover
-      @show="showPopver"
       :visible="visible"
       placement="left"
       trigger="click"
@@ -240,26 +252,28 @@ const submitDetails = (val: any) => {
       popper-class="popver_class"
     >
       <template #reference>
-        <el-avatar
-          @click="avatarClick"
-          :style="[{ display: isShow ? 'block' : 'none' }]"
-          :size="46"
-          shape="square"
-          :src="clickSrc"
-        />
+        <el-avatar @click="avatarClick" :size="46" shape="square" :src="clickSrc" />
       </template>
       <div class="flex">
         <el-popover
           placement="top"
-          :width="260"
+          :width="276"
           trigger="hover"
           v-for="(item, index) in avater"
           :key="index"
+          popper-class="avater_popver"
           content="How satisfied are you with this system?"
         >
           <template #reference>
             <div class="score">
-              <el-avatar @click="showScore(item)" :size="40" shape="square" :src="item.src" />
+              <el-avatar
+                @mouseenter="mouseenter(item)"
+                @mouseout="mouseout(item)"
+                @click="showScore(item)"
+                :size="40"
+                shape="square"
+                :src="item.src"
+              />
             </div>
           </template>
         </el-popover>
@@ -277,7 +291,7 @@ const submitDetails = (val: any) => {
       custom-class="my-dialog"
       :close-on-click-modal="false"
     >
-      <div v-if="isshowDetails">
+      <div v-if="isshowDetails" style="margin-top: 16px">
         <DialogUe content="How satisfied are you with this system ?" dialogWidth="298px"></DialogUe>
         <DialogColorful
           :colorfulSrc="colorfulSrc"
@@ -330,7 +344,7 @@ const submitDetails = (val: any) => {
         title="Submit Successful"
       >
         <template #icon>
-          <el-image src="../image/submit_successful.png" />
+          <el-image :src="submitsucessful" />
         </template>
         <template #sub-title>
           <div class="sub_title_text">Apologize once again for your experience.</div>
@@ -350,6 +364,7 @@ const submitDetails = (val: any) => {
   border-radius: 12px 0 0 12px;
   background-color: #fff;
   position: absolute;
+  box-shadow: -2px 2px 12px rgba(0, 0, 0, 15%);
   z-index: 2013;
   right: 0;
   bottom: 168px;
@@ -365,6 +380,11 @@ const submitDetails = (val: any) => {
   display: flex;
   height: 64px;
   align-items: center;
+  position: absolute;
+  right: 64px;
+  top: -30px;
+  background-color: white;
+  border-radius: 12px 0 0 12px;
 }
 .score {
   margin: 0 16px;
@@ -379,11 +399,13 @@ const submitDetails = (val: any) => {
   position: absolute;
   margin-bottom: 0;
   right: 0;
-  bottom: 168px;
+  bottom: 60px;
+  max-height: 640px;
+  overflow-y: scroll;
 }
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 3s;
+  transition: opacity 1s;
 }
 .fade-enter-from,
 .fade-leave-to {
@@ -395,4 +417,8 @@ const submitDetails = (val: any) => {
 .result {
   height: 578px;
 }
+.avater_popver {
+  padding-left: 8px !important;
+  color: var(--color-neutral-1) !important;
+}
 </style>

src/components/VBox_Dashboard/src/VBox_Dashboard.vue

@@ -45,25 +45,6 @@ const vBoxPopoverRef = ref()
     <div class="header">
       <slot name="header">Title</slot>
       <div class="option">
-        <!-- <el-popover
-          ref="vBoxPopoverRef"
-          popper-class="v-box-options"
-          :width="172"
-          placement="bottom"
-          trigger="click"
-        >
-          <div class="options">
-            <div
-              class="move-item"
-              @click="handleDraggable(item.name)"
-              v-for="item in optionList"
-              :key="item.name"
-            >
-              <span class="font_family" :class="[`icon-${item.icon}`]"></span>
-              <span>{{ item.name }}</span>
-            </div>
-          </div>
-          <template #reference> -->
         <el-button type="text" class="sort handle-draggable">
           <span class="iconfont_icon">
             <svg class="iconfont" aria-hidden="true">
@@ -71,11 +52,9 @@ const vBoxPopoverRef = ref()
             </svg>
           </span>
         </el-button>
-        <!-- </template>
-        </el-popover> -->
       </div>
       <div class="cancel" @click="changeCancel">
-        <span class="iconfont_icon">
+        <span class="iconfont_icon iconfont_cancel">
           <svg class="iconfont" aria-hidden="true">
             <use xlink:href="#icon-icon_reject_b"></use>
           </svg>
@@ -92,6 +71,20 @@ const vBoxPopoverRef = ref()
 </template>
 
 <style lang="scss" scoped>
+.iconfont_icon {
+  margin-right: 0;
+}
+.cancel {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 .v-box {
   border: 1px solid var(--color-border);
   overflow: hidden;
@@ -112,16 +105,16 @@ const vBoxPopoverRef = ref()
       display: flex;
       align-items: center;
     }
-    .cancel {
-      position: absolute;
-      right: 26px;
-      cursor: pointer;
-      top: 0;
+    .cancel:hover {
+      background-color: var(--color-btn-default-bg-hover);
+      border-radius: 6px;
     }
     .sort {
       position: absolute;
       top: 50%;
-      right: -40px;
+      width: 24px;
+      height: 24px;
+      left: 12px;
       transform: translateY(-50%);
       display: flex;
       align-items: center;

src/components/VTag/src/VTag.vue

@@ -9,6 +9,7 @@ interface internalProps {
     | 'Departure'
     | 'Arrived'
     | 'Completed'
+    | 'Departed'
   large?: boolean
 }
 
@@ -20,7 +21,8 @@ const mappingTable = new Map([
   ['Cargo Received', 'cargo-received'],
   ['Departure', 'departure'],
   ['Arrived', 'arrived'],
-  ['Completed', 'completed']
+  ['Completed', 'completed'],
+  ['Departed', 'Departed']
 ])
 defineProps<internalProps>()
 </script>
@@ -113,6 +115,13 @@ defineProps<internalProps>()
       background-color: var(--color-tag-completed);
     }
   }
+  &.v-tag__Departed {
+    background-color: var(--color-tag-Departed-bg);
+    color: var(--color-tag-Departed);
+    .dot {
+      background-color: var(--color-tag-Departed);
+    }
+  }
   & + .v-tag {
     margin-left: 8px;
   }

src/styles/Antdui.scss

@@ -1,5 +1,5 @@
 .ant-picker-range {
-  height: 40px;
+  height: 32px;
   border: 1px solid var(--color-border-1);
 }
 .ant-picker:hover, .ant-picker-focused {
@@ -66,4 +66,7 @@
   }
   .ant-picker-dropdown .ant-picker-panel-container .ant-picker-presets ul li:hover {
     background: var(--color-orange-6);
-  }
+  }
+ .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {
+  color: var(--color-neutral-3);
+ }

src/styles/elementui.scss

@@ -33,6 +33,7 @@ button.el-button.el-button--text {
   background-color: var(--color-white);
   color: var(--color-neutral-1);
   border: 1px solid var(--color-border);
+  margin-left: 8px !important;
   &:hover {
     border: 1px solid var(--color-btn-default-bg-hover);
     background-color: var(--color-btn-default-bg-hover);
@@ -212,7 +213,7 @@ footer.el-dialog__footer {
   border-top: 1px solid var(--color-border);
 }
 div.el-dialog__body {
-  padding: 16px;
+  padding: 0 16px;
 }
 
 // radio
@@ -639,6 +640,7 @@ div
   background-color: var(--color-theme);
   border-color: var(--color-theme);
   box-shadow: none;
+  font-weight: 700;
 }
 div .el-radio-button__inner:hover {
   color: var(--color-theme);
@@ -646,4 +648,12 @@ div .el-radio-button__inner:hover {
 div .el-space {
   flex-wrap: wrap;
   margin: 3px 0 0 0;
+}
+div .el-loading-spinner .path {
+  stroke: var(--color-theme);
+}
+div .el-popper.is-light, .el-popper.is-light > .el-popper__arrow:before {
+  height: 0;
+  background: transparent ;
+  border: none ;
 }

src/styles/theme.scss

@@ -56,6 +56,7 @@
   --color-tag-departure: #40a6e5;
   --color-tag-arrived: #01b7a1;
   --color-tag-completed: #5bb462;
+  --color-tag-Departed: #D9edfa;
 
   --color-tag-confirmed-bg: #e8fbe4;
   --color-tag-cancelled-bg: #ebeef1;
@@ -66,6 +67,7 @@
   --color-tag-departure-bg: #ecf7ff;
   --color-tag-arrived-bg: #e7faf8;
   --color-tag-completed-bg: #e8fbe4;
+  --color-tag-Departed-bg: #0090e9;
 
   --color-border: #eaebed;
   --color-border-1: #E8EAEE;

src/views/Booking/src/BookingView.vue

@@ -34,9 +34,9 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Creation')) {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
-  } else if (tag.includes('shippername')) {
+  } else if (tag.includes('Shippername')) {
     delete searchTableQeury.shipper
-  } else if (tag.includes('consigneename')) {
+  } else if (tag.includes('Consigneename')) {
     delete searchTableQeury.consignee
   } else if (tag.includes('Origin Agent')) {
     delete searchTableQeury.origin
@@ -44,9 +44,9 @@ const handleClose = (tag: any) => {
     delete searchTableQeury.agent
   } else if (tag.includes('Sales')) {
     delete searchTableQeury.sales_rep
-  } else if (tag.includes('origin')) {
+  } else if (tag.includes('Origin')) {
     delete searchTableQeury.from_station
-  } else if (tag.includes('destination')) {
+  } else if (tag.includes('Destination')) {
     delete searchTableQeury['final_desination/final_desination_exp']
   } else if (tag.includes('Place of Receipt')) {
     delete searchTableQeury.place_of_receipt
@@ -54,9 +54,9 @@ const handleClose = (tag: any) => {
     delete searchTableQeury['fport_of_loading/fport_of_loading_exp']
   } else if (tag.includes('Place of delivery')) {
     delete searchTableQeury['place_of_delivery/place_of_delivery_exp']
-  } else if (tag.includes('vessel')) {
-    delete searchTableQeury.vessel
-  } else if (tag.includes('voyage')) {
+  } else if (tag.includes('Vessel')) {
+    delete searchTableQeury['f_vessel/m_vessel']
+  } else if (tag.includes('Voyage')) {
     delete searchTableQeury['f_voyage/m_voyage']
   }
   BookingTable_ref.value.searchTableData(searchTableQeury)
@@ -107,9 +107,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
   for (const key in val) {
     let str = `${key}:${val[key]}`
     filterData.morefiltersData.push(str)
-    if (key == 'shippername') {
+    if (key == 'Shippername') {
       searchTableQeury.shipper = value[key]
-    } else if (key == 'consigneename') {
+    } else if (key == 'Consigneename') {
       searchTableQeury.consignee = value[key]
     } else if (key == 'Origin Agent') {
       searchTableQeury.origin = value[key]
@@ -117,9 +117,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury.agent = value[key]
     } else if (key == 'Sales') {
       searchTableQeury.sales_rep = value[key]
-    } else if (key == 'origin') {
+    } else if (key == 'Origin') {
       searchTableQeury.shipper_city = val[key]
-    } else if (key == 'destination') {
+    } else if (key == 'Destination') {
       searchTableQeury.consignee_city = val[key]
     } else if (key == 'Place of Receipt') {
       searchTableQeury.place_of_receipt = val[key]
@@ -127,9 +127,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury['fport_of_loading/fport_of_loading_exp'] = val[key]
     } else if (key == 'Port of delivery') {
       searchTableQeury['place_of_delivery/place_of_delivery_exp'] = val[key]
-    } else if (key == 'vessel') {
+    } else if (key == 'Vessel') {
       searchTableQeury['f_vessel/m_vessel'] = value[key]
-    } else if (key == 'voyage') {
+    } else if (key == 'Voyage') {
       searchTableQeury['f_voyage/m_voyage'] = value[key]
     }
   }
@@ -147,18 +147,18 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'ETD')
   emitter.emit('clearTag', 'ETA')
   emitter.emit('clearTag', 'Creation Time')
-  emitter.emit('clearTag', 'shippername')
-  emitter.emit('clearTag', 'consigneename')
+  emitter.emit('clearTag', 'Shippername')
+  emitter.emit('clearTag', 'Consigneename')
   emitter.emit('clearTag', 'Origin Agent')
   emitter.emit('clearTag', 'Destination Agent')
   emitter.emit('clearTag', 'Sales')
-  emitter.emit('clearTag', 'origin')
-  emitter.emit('clearTag', 'destination')
+  emitter.emit('clearTag', 'Origin')
+  emitter.emit('clearTag', 'Destination')
   emitter.emit('clearTag', 'Place of Receipt')
   emitter.emit('clearTag', 'Port of Loading')
   emitter.emit('clearTag', 'Port of delivery')
-  emitter.emit('clearTag', 'vessel')
-  emitter.emit('clearTag', 'voyage')
+  emitter.emit('clearTag', 'Vessel')
+  emitter.emit('clearTag', 'Voyage')
   searchTableQeury = {}
   BookingTable_ref.value.searchTableData(searchTableQeury)
   getbookingdata()
@@ -332,18 +332,17 @@ const propsPlaceTypeoptions = ref([
   border-bottom: 1px solid var(--color-border);
   font-size: var(--font-size-6);
   font-weight: 700;
-  padding-left: 23.32px;
+  padding: 0 24px;
   align-items: center;
 }
 .display {
   border: 1px solid var(--color-border);
   border-width: 0 0 1px 0;
-  padding-left: 23.52px;
+  padding: 0 24px;
 }
 .heaer_top {
   margin-top: 6.57px;
   margin-bottom: 8px;
-  padding-right: 8px;
   display: flex;
 }
 .search {

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -350,7 +350,7 @@ defineExpose({
 </script>
 
 <template>
-  <div style="padding: 0px 20px" class="booking-table">
+  <div style="padding: 0px 24px" class="booking-table">
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">

src/views/Dashboard/src/DashboardView.vue

@@ -278,15 +278,19 @@ const Top1OInterval = reactive({
   Max: 0,
   interval: 0
 })
-const MapData = ref()
+const Top1OInterval_dest = reactive({
+  Max: 0,
+  interval: 0
+})
 const GetTop10ODEcharts = () => {
   $api.GetTop10ODEcharts({}).then((res: any) => {
     if (res.code === 200) {
       Top10Obj.DestinationData = res.data.seller_data_list_destination
-      MapData.value = res.data.toporiginMap
       Top10Obj.OriginData = res.data.seller_data_list_origin
       Top1OInterval.Max = res.data.Max
       Top1OInterval.interval = res.data.interval
+      Top1OInterval_dest.Max = res.data.dest_Max
+      Top1OInterval_dest.interval = res.data.dest_interval
     }
   })
 }
@@ -647,9 +651,14 @@ const ClickParams = (val: any) => {
     </div>
     <!-- 筛选 -->
     <div class="filters">
-      <div style="display: flex">
+      <div style="display: flex; align-items: center">
         <div class="tips_filter">
-          <el-checkbox-group @change="changeCheckboxGroup1" v-model="checkboxGroup1" size="large">
+          <el-checkbox-group
+            @change="changeCheckboxGroup1"
+            v-model="checkboxGroup1"
+            size="large"
+            style="height: 32px"
+          >
             <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
               {{ item }}
             </el-checkbox-button>
@@ -680,7 +689,7 @@ const ClickParams = (val: any) => {
     <!-- 图表 -->
     <div class="echarts">
       <VueDraggable
-        style="display: flex; flex-wrap: wrap; gap: 16px"
+        style="display: flex; flex-wrap: wrap; justify-content: space-between"
         ref="infoContentRef"
         ghost-class="ghost-class"
         :forceFallback="true"
@@ -696,8 +705,8 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex">
                   {{ item.title }}
                   <el-tooltip
-                    class="box-item"
                     effect="dark"
+                    :offset="6"
                     :content="item.text"
                     placement="bottom-start"
                   >
@@ -740,12 +749,7 @@ const ClickParams = (val: any) => {
               <template #header>
                 <div class="Title_flex">
                   {{ item.title }}
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="item.text"
-                    placement="bottom"
-                  >
+                  <el-tooltip :offset="6" effect="dark" :content="item.text" placement="bottom">
                     <span class="iconfont_icon iconfont_icon_tip">
                       <svg class="iconfont" aria-hidden="true">
                         <use xlink:href="#icon-icon_info_b"></use>
@@ -788,7 +792,7 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex">
                   {{ item.title }}
                   <el-tooltip
-                    class="box-item"
+                    :offset="6"
                     effect="dark"
                     :content="item.text"
                     placement="bottom-start"
@@ -829,7 +833,7 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex">
                   {{ item.title }}
                   <el-tooltip
-                    class="box-item"
+                    :offset="6"
                     effect="dark"
                     :content="item.text"
                     placement="bottom-start"
@@ -863,7 +867,7 @@ const ClickParams = (val: any) => {
                   <div class="Title_flex">
                     {{ item.title }}
                     <el-tooltip
-                      class="box-item"
+                      :offset="6"
                       effect="dark"
                       :content="item.text"
                       placement="bottom-start"
@@ -907,6 +911,7 @@ const ClickParams = (val: any) => {
           <div
             v-else-if="item.title === 'Top 10 Origin/Destination' && item.switchValue"
             class="KPI_Pending"
+            style="margin-bottom: 8px"
           >
             <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
               <template #header>
@@ -916,7 +921,7 @@ const ClickParams = (val: any) => {
                     <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
                   </el-tabs>
                   <el-tooltip
-                    class="box-item"
+                    :offset="6"
                     effect="dark"
                     :content="item.text"
                     placement="bottom-start"
@@ -940,7 +945,7 @@ const ClickParams = (val: any) => {
                     ></SellerChart>
                   </div>
                   <div class="map">
-                    <TopMap :MapData="MapData"></TopMap>
+                    <TopMap></TopMap>
                   </div>
                 </div>
               </template>
@@ -951,12 +956,12 @@ const ClickParams = (val: any) => {
                       ref="seller_chart_top10_destination"
                       @clickParams="ClickParams(item.title2)"
                       :SellerData="Top10Obj.DestinationData"
-                      :Interval="Top1OInterval"
+                      :Interval="Top1OInterval_dest"
                       style="height: 272px"
                     ></SellerChart>
                   </div>
                   <div class="map" style="height: 272px">
-                    <TopMap :MapData="MapData"></TopMap>
+                    <TopMap></TopMap>
                   </div>
                 </div>
               </template>
@@ -972,7 +977,7 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex">
                   {{ item.title }}
                   <el-tooltip
-                    class="box-item"
+                    :offset="6"
                     effect="dark"
                     :content="item.text"
                     placement="bottom-start"
@@ -1006,7 +1011,7 @@ const ClickParams = (val: any) => {
                 <div class="Title_flex">
                   {{ item.title }}
                   <el-tooltip
-                    class="box-item"
+                    :offset="6"
                     effect="dark"
                     :content="item.text"
                     placement="bottom-start"
@@ -1041,7 +1046,7 @@ const ClickParams = (val: any) => {
   height: 68px;
   font-size: var(--font-size-6);
   font-weight: 700;
-  padding: 0 23.32px;
+  padding: 0 24px;
   align-items: center;
   justify-content: space-between;
 }
@@ -1081,6 +1086,8 @@ const ClickParams = (val: any) => {
 }
 .content_text {
   color: var(--color-neutral-2);
+  font-size: var(--font-size-2);
+  line-height: 16px;
 }
 .tips {
   display: flex;
@@ -1101,7 +1108,7 @@ const ClickParams = (val: any) => {
   justify-content: center;
   height: 40px;
   font-size: var(--font-size-3);
-  widows: 126px;
+  width: 126px;
   margin: 8px 0;
   cursor: pointer;
 }
@@ -1161,8 +1168,10 @@ const ClickParams = (val: any) => {
 }
 .filters {
   display: flex;
-  padding: 0 23.32px;
+  padding: 0 24px;
+  height: 32px;
   align-items: center;
+  margin-bottom: 8px;
   justify-content: space-between;
 }
 .KPI_Pending {
@@ -1170,8 +1179,12 @@ const ClickParams = (val: any) => {
   width: 100%;
 }
 .filters_left {
-  width: 49%;
   border-radius: var(--border-radius-6);
+  margin-bottom: 8px;
+  flex: 1 48%;
+}
+.filters_left:nth-child(odd) {
+  margin-right: 8px;
 }
 .KPI_title {
   border-bottom: 1px solid var(--color-border);
@@ -1186,6 +1199,7 @@ const ClickParams = (val: any) => {
 }
 .tips_filter {
   margin-right: 8px;
+  height: 32px;
 }
 .filters_right {
   width: 251px;
@@ -1199,7 +1213,7 @@ const ClickParams = (val: any) => {
   height: 32px;
 }
 .echarts {
-  padding: 0 23.32px;
+  padding: 0 24px;
 }
 .kpi {
   width: 50%;
@@ -1243,11 +1257,15 @@ const ClickParams = (val: any) => {
 }
 .iconfont_icon_tip {
   margin-left: 8px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
 }
 .dashboard {
   z-index: 2014;
   position: relative;
   background-color: white;
-  padding-bottom: 20px;
+  padding-bottom: 40px;
 }
 </style>

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -492,7 +492,8 @@ const submitDetails = (val: any) => {
 .buttom {
   display: flex;
   width: 540px;
-  align-items: end;
+  align-items: center;
+  margin-top: 8px;
   justify-content: space-between;
 }
 .submit_button {
@@ -500,7 +501,6 @@ const submitDetails = (val: any) => {
   height: 40px;
 }
 .button_submit {
-  margin-top: 9.51px;
   display: flex;
   justify-content: end;
 }

src/views/Dashboard/src/components/TopMap.vue

@@ -1,16 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import L from 'leaflet'
-// const props = defineProps({
-//   MapData: Array
-// })
-// const MapDataList = ref(props.MapData)
-// watch(
-//   () => props.MapData,
-//   (current) => {
-//     MapDataList.value = current
-//   }
-// )
 const MapDataList = ref()
 const init = () => {
   const map = L.map('map').setView([51.505, -0.09], 3)
@@ -24,40 +14,17 @@ const init = () => {
     autoClose: false, // 禁止点击其他地方自动关闭
     closeOnClick: false // 禁止点击地图时自动关闭
   }
-  // var markers = [
-  //   {
-  //     qandL: [151.5, -0.09],
-  //     divIcon: { iconSize: 0 },
-  //     name: 'CNSGH1',
-  //     color: '#FF7500',
-  //     value: 1,
-  //     textcolor: '#FFF'
-  //   },
-  //   {
-  //     qandL: [85.7128, 22.006],
-  //     divIcon: { iconSize: 0 },
-  //     name: 'CNSGH2',
-  //     color: '#ff9033',
-  //     value: 1,
-  //     textcolor: '#FFF'
-  //   },
-  //   {
-  //     qandL: [81.5, 27.6298],
-  //     divIcon: { iconSize: 0 },
-  //     name: 'CNSGH3',
-  //     color: '#ff9e4d',
-  //     value: 1,
-  //     textcolor: '#FFF'
-  //   }
-  //   // 添加更多点...
-  // ]
-  if (MapDataList.value) {
-    MapDataList.value.forEach((item: any) => {
-      const marker = L.marker(item.qandl, { icon: L.divIcon(item.divIcon) }).addTo(map)
-      // 绑定弹出框并立即展示
-      marker
-        .bindPopup(
-          `
+
+  $api.GetTop10ODEcharts({}).then((res: any) => {
+    if (res.code === 200) {
+      MapDataList.value = res.data.toporiginMap
+
+      MapDataList.value.forEach((item: any) => {
+        const marker = L.marker(item.qandl, { icon: L.divIcon(item.divIcon) }).addTo(map)
+        // 绑定弹出框并立即展示
+        marker
+          .bindPopup(
+            `
     <div class="popup-content" style="background-color:${item.color}">
       <div class="popup-content-text">
         <p class="popup-label" style="color:${item.textcolor}">${item.name}</p>
@@ -65,22 +32,15 @@ const init = () => {
       </div>
     </div>
   `,
-          popupOptions
-        )
-        .openPopup()
-    })
-  }
-}
-const GetTop10ODEcharts = () => {
-  $api.GetTop10ODEcharts({}).then((res: any) => {
-    if (res.code === 200) {
-      MapDataList.value = res.data.toporiginMap
+            popupOptions
+          )
+          .openPopup()
+      })
     }
   })
 }
 onMounted(() => {
   init()
-  GetTop10ODEcharts()
 })
 </script>
 <template>

src/views/Tracking/src/TrackingView.vue

@@ -38,9 +38,9 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Creation')) {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
-  } else if (tag.includes('shippername')) {
+  } else if (tag.includes('Shippername')) {
     delete searchTableQeury.shipper
-  } else if (tag.includes('consigneename')) {
+  } else if (tag.includes('Consigneename')) {
     delete searchTableQeury.consignee
   } else if (tag.includes('Service')) {
     delete searchTableQeury.service
@@ -58,9 +58,9 @@ const handleClose = (tag: any) => {
     delete searchTableQeury.dest_op
   } else if (tag.includes('Sales')) {
     delete searchTableQeury.sales_rep
-  } else if (tag.includes('origin')) {
+  } else if (tag.includes('Origin')) {
     delete searchTableQeury.from_station
-  } else if (tag.includes('destination')) {
+  } else if (tag.includes('Destination')) {
     delete searchTableQeury.final_desination
   } else if (tag.includes('Place of Receipt')) {
     delete searchTableQeury.place_of_receipt_exp
@@ -70,9 +70,9 @@ const handleClose = (tag: any) => {
     delete searchTableQeury.place_of_delivery_exp
   } else if (tag.includes('Place of Discharge')) {
     delete searchTableQeury.port_of_discharge
-  } else if (tag.includes('vessel')) {
+  } else if (tag.includes('Vessel')) {
     delete searchTableQeury['f_vessel/vessel']
-  } else if (tag.includes('voyage')) {
+  } else if (tag.includes('Voyage')) {
     delete searchTableQeury['f_voyage/voyage']
   } else {
     delete searchTableQeury._reportRef
@@ -130,9 +130,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
   for (const key in val) {
     let str = `${key}:${val[key]}`
     filterData.morefiltersData.push(str)
-    if (key == 'shippername') {
+    if (key == 'Shippername') {
       searchTableQeury.shipper = value[key]
-    } else if (key == 'consigneename') {
+    } else if (key == 'Consigneename') {
       searchTableQeury.consignee = value[key]
     } else if (key == 'Service') {
       searchTableQeury.service = value[key]
@@ -150,11 +150,11 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury.dest_op = value[key]
     } else if (key == 'Sales') {
       searchTableQeury.sales_rep = value[key]
-    } else if (key == 'destination') {
+    } else if (key == 'Destination') {
       searchTableQeury.final_desination = val[key]
     } else if (key == 'Place of Receipt') {
       searchTableQeury.place_of_receipt_exp = val[key]
-    } else if (key == 'origin') {
+    } else if (key == 'Origin') {
       searchTableQeury['shipper_city/consignee_city'] = val[key]
     } else if (key == 'Port of Loading') {
       searchTableQeury.port_of_loading = val[key]
@@ -162,9 +162,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury.place_of_delivery_exp = val[key]
     } else if (key == 'Port of Discharge') {
       searchTableQeury.port_of_discharge = val[key]
-    } else if (key == 'vessel') {
+    } else if (key == 'Vessel') {
       searchTableQeury['f_vessel/vessel'] = value[key]
-    } else if (key == 'voyage') {
+    } else if (key == 'Voyage') {
       searchTableQeury['f_voyage/voyage'] = value[key]
     }
   }
@@ -182,8 +182,8 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'ETD')
   emitter.emit('clearTag', 'ETA')
   emitter.emit('clearTag', 'Creation Time')
-  emitter.emit('clearTag', 'shippername')
-  emitter.emit('clearTag', 'consigneename')
+  emitter.emit('clearTag', 'Shippername')
+  emitter.emit('clearTag', 'Consigneename')
   emitter.emit('clearTag', 'Service')
   emitter.emit('clearTag', 'Incoterms')
   emitter.emit('clearTag', 'Notify Party')
@@ -192,14 +192,14 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'Destination Agent')
   emitter.emit('clearTag', 'Destination Operator')
   emitter.emit('clearTag', 'Sales')
-  emitter.emit('clearTag', 'origin')
-  emitter.emit('clearTag', 'destination')
+  emitter.emit('clearTag', 'Origin')
+  emitter.emit('clearTag', 'Destination')
   emitter.emit('clearTag', 'Place of Receipt')
   emitter.emit('clearTag', 'Port of Loading')
   emitter.emit('clearTag', 'Port of delivery')
   emitter.emit('clearTag', 'Port of Discharge')
-  emitter.emit('clearTag', 'vessel')
-  emitter.emit('clearTag', 'voyage')
+  emitter.emit('clearTag', 'Vessel')
+  emitter.emit('clearTag', 'Voyage')
   searchTableQeury = {}
   TrackingTable_ref.value.searchTableData(searchTableQeury)
   Gettrackingdata()