Merge branch 'dev_g' of United_Software/k_online_ui into dev

src/components/AddRules/src/AddRules.vue

@@ -6,7 +6,7 @@ import DelayedType from './components/DelayedType.vue'
 import ETDShipments from './components/ETDShipments.vue'
 import NotiFrequency from './components/NotiFrequency.vue'
 import NotiMethods from './components/NotiMethods.vue'
-import submitsucessful from './images/submit_successful.png'
+import submitsucessful from './images/icon_success_big@2x.png'
 interface CheckboxItem {
   value: string
   label: string
@@ -951,7 +951,7 @@ defineExpose({
     </el-dialog>
     <!-- 保存成功 -->
     <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-      <div style="text-align: center"><el-image :src="submitsucessful" /></div>
+      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
       <div style="text-align: center; margin-top: 20px">Saved successfully</div>
     </el-dialog>
   </div>
@@ -1003,6 +1003,11 @@ defineExpose({
   border: none !important;
   padding: 0 !important;
 }
+.Ocean_collapse {
+  :deep(.el-collapse-item__header) {
+    margin: 4px 0 0 0 !important;
+  }
+}
 :deep(.el-collapse-item__header):hover {
   background-color: var(--color-system-color-bg) !important;
   border: none !important;

src/components/AddRules/src/components/AddedrluesTag.vue

@@ -22,7 +22,7 @@ const handleClose = (tag: any) => {
 
 <template>
   <div>
-    <el-card class="Rules_Card">
+    <el-card class="Rules_Card" shadow="never">
       <div class="Card_Title">{{ props.Title }}</div>
       <div class="right_flex">
         <el-tag

src/components/AddRules/src/components/DelayedType.vue

@@ -117,6 +117,10 @@ const CheckChange = (val: any) => {
   emit('ChangeCheckRules', DepartureList.value)
 }
 const changedeparture = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    DepartureSelect.value = 'Day(s)'
+    ArrivalSelect.value = 'Day(s)'
+  }
   if (val == 'Departure') {
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
       Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
@@ -197,13 +201,14 @@ defineExpose({
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
             <el-checkbox class="delayedType" value="Departure Delayed">
               <div>Departure Delayed (ATD-ETD)</div>
-              <div v-if="isDeparture" style="margin-top: 16px">
+              <div v-if="isDeparture" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
                 <span class="delayedIcon">></span>
                 <el-input
                   v-model="clampedValue"
                   class="input-with-select"
                   @input="changedeparture('Departure')"
+                  v-if="props.Title == 'Air shipments'" 
                 >
                   <template #append>
                     <el-select
@@ -212,21 +217,31 @@ defineExpose({
                       @change="changedeparture('Departure')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
-                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
+                      <el-option label="Hour(s)" value="Hour(s)" />
                     </el-select>
                   </template>
                 </el-input>
+                <el-input
+                  v-else
+                  v-model="clampedValue"
+                  @input="changedeparture('Departure')"
+                  class="input-with-select1"
+                >
+                </el-input>
+                <div
+                v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
             <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
               <div>Arrival Delayed (ATA-ETA)</div>
-              <div v-if="isArrival" style="margin-top: 16px">
+              <div v-if="isArrival" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
                 <span class="delayedIcon">></span>
                 <el-input
                   v-model="clampedArrivalValue"
                   @input="changedeparture('Arrival')"
                   class="input-with-select"
+                  v-if="props.Title == 'Air shipments'"
                 >
                   <template #append>
                     <el-select
@@ -235,10 +250,18 @@ defineExpose({
                       @change="changedeparture('Arrival')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
-                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
+                      <el-option  label="Hour(s)" value="Hour(s)" />
                     </el-select>
                   </template>
                 </el-input>
+                <el-input
+                  v-else
+                  v-model="clampedArrivalValue"
+                  @input="changedeparture('Arrival')"
+                  class="input-with-select1"
+                >
+                </el-input>
+                <div v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
           </el-checkbox-group>
@@ -276,8 +299,13 @@ defineExpose({
 .input-with-select {
   width: 180px;
 }
+.input-with-select1 {
+  width: 84px;
+  border-radius: 0;
+}
 :deep(.el-input__wrapper) {
   width: 50%;
+  border-radius: 6px 0 0 6px;
 }
 :deep(.el-input-group__append) {
   width: 50%;
@@ -304,4 +332,20 @@ defineExpose({
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
+.Days {
+  width: 84px;
+  border: 1px solid var(--color-system-border);
+  border-radius: 0 6px 6px 0;
+  background-color: var(--color-system-body-bg);
+  border-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  height: 30px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/AddRules/src/components/ETDShipments.vue

@@ -63,12 +63,16 @@ const ETDETAList = ref({
 let ETDstr: any = ''
 let ETAstr: any = ''
 const CheckChange = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETASelect.value = 'Day(s)'
+    ETDSelect.value = 'Day(s)'
+  }
   if (val.includes('ETD')) {
     isETD.value = true
     if(ETDstr.includes('all changes')) {
       ETDETAList.value.ETD = ETDstr
     } else {
-      if (ETDSelect.value != ''  && clampedValue.value!= '') {
+      if (ETDSelect.value != ''  && clampedValue.value!= '' && clampedValue.value!= undefined) {
         ETDETAList.value.ETD = ETDstr
       } else {
         ETDETAList.value.ETD = ''
@@ -79,7 +83,7 @@ const CheckChange = (val: any) => {
       if(ETAstr.includes('all changes')) {
         ETDETAList.value.ETA = ETAstr
       } else {
-        if (ETASelect.value != ''  && clampedETAValue.value!= '') {
+        if (ETASelect.value != ''  && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
           ETDETAList.value.ETA = ETAstr
         } else {
           ETDETAList.value.ETA = ''
@@ -97,7 +101,7 @@ const CheckChange = (val: any) => {
       if(ETAstr.includes('all changes')) {
         ETDETAList.value.ETA = ETAstr
       } else {
-        if (ETASelect.value != ''  && clampedETAValue.value!= '') {
+        if (ETASelect.value != ''  && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
           ETDETAList.value.ETA = ETAstr
         } else {
           ETDETAList.value.ETA = ''
@@ -111,12 +115,15 @@ const CheckChange = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETDRadio = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETDSelect.value = 'Day(s)'
+  }
   if (val == 1) {
     ETDstr = 'ETD: Notify for all changes'
     ETDETAList.value.ETD = ETDstr
   } else if (val == 2) {
     ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
-    if (ETDSelect.value != '' && clampedValue.value!= '') {
+    if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined) {
       ETDETAList.value.ETD = ETDstr
     } else {
       ETDETAList.value.ETD = ''
@@ -125,12 +132,15 @@ const changeETDRadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETARadio = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETASelect.value = 'Day(s)'
+  }
   if (val == 1) {
     ETAstr = 'ETA: Notify for all changes'
     ETDETAList.value.ETA = ETAstr
   } else if (val == 2) {
     ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-    if (ETASelect.value != '' && clampedValue.value!= '') {
+    if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
       ETDETAList.value.ETA = ETAstr
     } else {
       ETDETAList.value.ETA = ''
@@ -139,12 +149,17 @@ const changeETARadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changedeparture = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETDSelect.value = 'Day(s)'
+    ETASelect.value = 'Day(s)'
+  }
   if (val == 'ETD') {
     if(ETDstr.includes('all changes')) {
       ETDETAList.value.ETD = ETDstr
     } else {
       ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
-      if (ETDSelect.value != '' && clampedValue.value!= '') {
+      if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined) {
+        ETDRadio.value = '2'
         ETDETAList.value.ETD = ETDstr
       } else {
         ETDETAList.value.ETD = ''
@@ -155,7 +170,8 @@ const changedeparture = (val: any) => {
         ETDETAList.value.ETA = ETAstr
       } else {
         ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-        if (ETASelect.value != '' && clampedETAValue.value!= '') {
+        if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
+          ETARadio.value = '2'
           ETDETAList.value.ETA = ETAstr
         } else {
           ETDETAList.value.ETA = ''
@@ -164,15 +180,16 @@ const changedeparture = (val: any) => {
     }
   } else {
     if(ETAstr.includes('all changes')) {
+      ETDETAList.value.ETA = ETAstr
+    } else {
+      ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
+      if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
+        ETARadio.value = '2'
         ETDETAList.value.ETA = ETAstr
       } else {
-        ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-        if (ETASelect.value != '' && clampedETAValue.value!= '') {
-          ETDETAList.value.ETA = ETAstr
-        } else {
-          ETDETAList.value.ETA = ''
-        }
+        ETDETAList.value.ETA = ''
       }
+    }
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
@@ -251,25 +268,38 @@ const clampedETAValue = computed({
               <div v-if="isETD" style="margin-top: 16px">
                 <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
                   <el-radio value="1">Notify for all changes</el-radio>
-                  <el-radio value="2"
-                    >Notify only when time difference
-                    <span class="delayedIcon">≥</span>
-                    <el-input
-                      v-model="clampedValue"
-                      class="input-with-select"
-                      @input="changedeparture('ETD')"
-                    >
-                      <template #append>
-                        <el-select
-                          v-model="ETDSelect"
-                          placeholder="Select"
-                          @change="changedeparture('ETD')"
-                        >
-                          <el-option label="Day(s)" value="Day(s)" />
-                          <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
-                        </el-select>
-                      </template> </el-input
-                  ></el-radio>
+                  <el-radio value="2">
+                    <div class="flex">
+                      Notify only when time difference
+                      <span class="delayedIcon">≥</span>
+                      <el-input
+                      v-if="props.Title == 'Air shipments'"
+                        v-model="clampedValue"
+                        class="input-with-select"
+                        @input="changedeparture('ETD')"
+                      >
+                        <template #append>
+                          <el-select
+                            v-model="ETDSelect"
+                            placeholder="Select"
+                            @change="changedeparture('ETD')"
+                          >
+                            <el-option label="Day(s)" value="Day(s)" />
+                            <el-option label="Hour(s)" value="Hour(s)" />
+                          </el-select>
+                        </template>
+                      </el-input>
+                      <el-input
+                        v-else
+                        v-model="clampedValue"
+                        @input="changedeparture('ETD')"
+                        class="input-with-select1"
+                      >
+                      </el-input>
+                      <div
+                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                    </div>
+                  </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
@@ -278,25 +308,38 @@ const clampedETAValue = computed({
               <div v-if="isETA" style="margin-top: 16px">
                 <el-radio-group v-model="ETARadio" @change="changeETARadio">
                   <el-radio value="1">Notify for all changes</el-radio>
-                  <el-radio value="2"
-                    >Notify only when time difference
-                    <span class="delayedIcon">≥</span>
-                    <el-input
-                      v-model="clampedETAValue"
-                      class="input-with-select"
-                      @input="changedeparture('ETA')"
-                    >
-                      <template #append>
-                        <el-select
-                          v-model="ETASelect"
-                          placeholder="Select"
-                          @change="changedeparture('ETA')"
-                        >
-                          <el-option label="Day(s)" value="Day(s)" />
-                          <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
-                        </el-select>
-                      </template> </el-input
-                  ></el-radio>
+                  <el-radio value="2">
+                    <div class="flex">
+                      Notify only when time difference
+                      <span class="delayedIcon">≥</span>
+                      <el-input
+                      v-if="props.Title == 'Air shipments'"
+                        v-model="clampedETAValue"
+                        class="input-with-select"
+                        @input="changedeparture('ETA')"
+                      >
+                        <template #append>
+                          <el-select
+                            v-model="ETASelect"
+                            placeholder="Select"
+                            @change="changedeparture('ETA')"
+                          >
+                            <el-option label="Day(s)" value="Day(s)" />
+                            <el-option label="Hour(s)" value="Hour(s)" />
+                          </el-select>
+                        </template>
+                      </el-input>
+                      <el-input
+                        v-else
+                        v-model="clampedETAValue"
+                        @input="changedeparture('ETA')"
+                        class="input-with-select1"
+                      >
+                      </el-input>
+                      <div
+                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                    </div>
+                  </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
@@ -341,8 +384,13 @@ const clampedETAValue = computed({
 .input-with-select {
   width: 180px;
 }
+.input-with-select1 {
+  width: 84px;
+  border-radius: 0;
+}
 :deep(.el-input__wrapper) {
   width: 50%;
+  border-radius: 6px 0 0 6px;
 }
 :deep(.el-input-group__append) {
   width: 50%;
@@ -384,4 +432,20 @@ const clampedETAValue = computed({
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
+.Days {
+  width: 84px;
+  border: 1px solid var(--color-system-border);
+  border-radius: 0 6px 6px 0;
+  background-color: var(--color-system-body-bg);
+  border-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  height: 30px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -7,7 +7,7 @@ import ETDShipments from './components/ETDShipments.vue'
 import NotiFrequency from './components/NotiFrequency.vue'
 import ShipmentRange from './components/ShipmentRange.vue'
 import NotiMethods from './components/NotiMethods.vue'
-import submitsucessful from './images/submit_successful.png'
+import submitsucessful from './images/icon_success_big@2x.png'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -1245,7 +1245,7 @@ defineExpose({
   </el-dialog>
   <!-- 保存成功 -->
   <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-    <div style="text-align: center"><el-image :src="submitsucessful" /></div>
+    <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
     <div style="text-align: center; margin-top: 20px">Saved successfully</div>
   </el-dialog>
   <!-- 保存失败 -->
@@ -1355,6 +1355,11 @@ defineExpose({
   border: none !important;
   padding: 0 !important;
 }
+.Ocean_collapse {
+  :deep(.el-collapse-item__header) {
+    margin: 4px 0 0 0 !important;
+  }
+}
 :deep(.el-collapse-item__header):hover {
   background-color: var(--color-system-color-bg) !important;
   border: none !important;

src/components/CreateAddRules/src/components/AddedrluesTag.vue

@@ -22,7 +22,7 @@ const handleClose = (tag: any) => {
 
 <template>
   <div>
-    <el-card class="Rules_Card">
+    <el-card class="Rules_Card" shadow="never">
       <div class="Card_Title">{{ props.Title }}</div>
       <div class="right_flex">
         <el-tag

src/components/CreateAddRules/src/components/DelayedType.vue

@@ -117,6 +117,10 @@ const CheckChange = (val: any) => {
   emit('ChangeCheckRules', DepartureList.value)
 }
 const changedeparture = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    DepartureSelect.value = 'Day(s)'
+    ArrivalSelect.value = 'Day(s)'
+  }
   if (val == 'Departure') {
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
       Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
@@ -197,13 +201,14 @@ defineExpose({
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
             <el-checkbox class="delayedType" value="Departure Delayed">
               <div>Departure Delayed (ATD-ETD)</div>
-              <div v-if="isDeparture" style="margin-top: 16px">
+              <div v-if="isDeparture" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
                 <span class="delayedIcon">></span>
                 <el-input
                   v-model="clampedValue"
                   class="input-with-select"
                   @input="changedeparture('Departure')"
+                  v-if="props.Title == 'Air shipments'" 
                 >
                   <template #append>
                     <el-select
@@ -212,21 +217,31 @@ defineExpose({
                       @change="changedeparture('Departure')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
-                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
+                      <el-option label="Hour(s)" value="Hour(s)" />
                     </el-select>
                   </template>
                 </el-input>
+                <el-input
+                  v-else
+                  v-model="clampedValue"
+                  @input="changedeparture('Departure')"
+                  class="input-with-select1"
+                >
+                </el-input>
+                <div
+                v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
             <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
               <div>Arrival Delayed (ATA-ETA)</div>
-              <div v-if="isArrival" style="margin-top: 16px">
+              <div v-if="isArrival" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
                 <span class="delayedIcon">></span>
                 <el-input
                   v-model="clampedArrivalValue"
                   @input="changedeparture('Arrival')"
                   class="input-with-select"
+                  v-if="props.Title == 'Air shipments'"
                 >
                   <template #append>
                     <el-select
@@ -235,10 +250,18 @@ defineExpose({
                       @change="changedeparture('Arrival')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
-                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
+                      <el-option  label="Hour(s)" value="Hour(s)" />
                     </el-select>
                   </template>
                 </el-input>
+                <el-input
+                  v-else
+                  v-model="clampedArrivalValue"
+                  @input="changedeparture('Arrival')"
+                  class="input-with-select1"
+                >
+                </el-input>
+                <div v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
           </el-checkbox-group>
@@ -276,8 +299,13 @@ defineExpose({
 .input-with-select {
   width: 180px;
 }
+.input-with-select1 {
+  width: 84px;
+  border-radius: 0;
+}
 :deep(.el-input__wrapper) {
   width: 50%;
+  border-radius: 6px 0 0 6px;
 }
 :deep(.el-input-group__append) {
   width: 50%;
@@ -307,4 +335,20 @@ defineExpose({
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
+.Days {
+  width: 84px;
+  border: 1px solid var(--color-system-border);
+  border-radius: 0 6px 6px 0;
+  background-color: var(--color-system-body-bg);
+  border-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  height: 30px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/CreateAddRules/src/components/ETDShipments.vue

@@ -63,16 +63,20 @@ const ETDETAList = ref({
 let ETDstr: any = ''
 let ETAstr: any = ''
 const CheckChange = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETASelect.value = 'Day(s)'
+    ETDSelect.value = 'Day(s)'
+  }
   if (val.includes('ETD')) {
     isETD.value = true
-    if (ETDSelect.value != ''  && clampedValue.value!= '') {
+    if (ETDSelect.value != ''  && clampedValue.value!= '' && clampedValue.value!= undefined) {
       ETDETAList.value.ETD = ETDstr
     } else {
       ETDETAList.value.ETD = ''
     }
     if (val.includes('ETA')) {
       isETA.value = true
-      if (ETASelect.value != ''  && clampedETAValue.value!= '') {
+      if (ETASelect.value != ''  && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
         ETDETAList.value.ETA = ETAstr
       } else {
         ETDETAList.value.ETA = ''
@@ -86,7 +90,7 @@ const CheckChange = (val: any) => {
     ETDETAList.value.ETD = ''
     if (val.includes('ETA')) {
       isETA.value = true
-      if (ETASelect.value != ''  && clampedETAValue.value!= '') {
+      if (ETASelect.value != ''  && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
         ETDETAList.value.ETA = ETAstr
       } else {
         ETDETAList.value.ETA = ''
@@ -99,12 +103,15 @@ const CheckChange = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETDRadio = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETDSelect.value = 'Day(s)'
+  }
   if (val == 1) {
     ETDstr = 'ETD: Notify for all changes'
     ETDETAList.value.ETD = ETDstr
   } else if (val == 2) {
     ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
-    if (ETDSelect.value != '' && clampedValue.value!= '') {
+    if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined) {
       ETDETAList.value.ETD = ETDstr
     } else {
       ETDETAList.value.ETD = ''
@@ -113,12 +120,15 @@ const changeETDRadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETARadio = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETASelect.value = 'Day(s)'
+  }
   if (val == 1) {
     ETAstr = 'ETA: Notify for all changes'
     ETDETAList.value.ETA = ETAstr
   } else if (val == 2) {
     ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-    if (ETASelect.value != '' && clampedValue.value!= '') {
+    if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
       ETDETAList.value.ETA = ETAstr
     } else {
       ETDETAList.value.ETA = ''
@@ -127,12 +137,17 @@ const changeETARadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changedeparture = (val: any) => {
+  if(props.Title != 'Air shipments') {
+    ETDSelect.value = 'Day(s)'
+    ETASelect.value = 'Day(s)'
+  }
   if (val == 'ETD') {
     if(ETDstr.includes('all changes')) {
       ETDETAList.value.ETD = ETDstr
     } else {
       ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
-      if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined ) {
+      if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined) {
+        ETDRadio.value = '2'
         ETDETAList.value.ETD = ETDstr
       } else {
         ETDETAList.value.ETD = ''
@@ -143,7 +158,8 @@ const changedeparture = (val: any) => {
         ETDETAList.value.ETA = ETAstr
       } else {
         ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-        if (ETASelect.value != '' && clampedETAValue.value!= '') {
+        if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
+          ETARadio.value = '2'
           ETDETAList.value.ETA = ETAstr
         } else {
           ETDETAList.value.ETA = ''
@@ -152,15 +168,16 @@ const changedeparture = (val: any) => {
     }
   } else {
     if(ETAstr.includes('all changes')) {
+      ETDETAList.value.ETA = ETAstr
+    } else {
+      ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
+      if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
+        ETARadio.value = '2'
         ETDETAList.value.ETA = ETAstr
       } else {
-        ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
-        if (ETASelect.value != '' && clampedETAValue.value!= '') {
-          ETDETAList.value.ETA = ETAstr
-        } else {
-          ETDETAList.value.ETA = ''
-        }
+        ETDETAList.value.ETA = ''
       }
+    }
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
@@ -239,25 +256,38 @@ const clampedETAValue = computed({
               <div v-if="isETD" style="margin-top: 16px">
                 <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
                   <el-radio value="1">Notify for all changes</el-radio>
-                  <el-radio value="2"
-                    >Notify only when time difference
-                    <span class="delayedIcon">≥</span>
-                    <el-input
-                      v-model="clampedValue"
-                      class="input-with-select"
-                      @input="changedeparture('ETD')"
-                    >
-                      <template #append>
-                        <el-select
-                          v-model="ETDSelect"
-                          placeholder="Select"
-                          @change="changedeparture('ETD')"
-                        >
-                          <el-option label="Day(s)" value="Day(s)" />
-                          <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
-                        </el-select>
-                      </template> </el-input
-                  ></el-radio>
+                  <el-radio value="2">
+                    <div class="flex">
+                      Notify only when time difference
+                      <span class="delayedIcon">≥</span>
+                      <el-input
+                      v-if="props.Title == 'Air shipments'"
+                        v-model="clampedValue"
+                        class="input-with-select"
+                        @input="changedeparture('ETD')"
+                      >
+                        <template #append>
+                          <el-select
+                            v-model="ETDSelect"
+                            placeholder="Select"
+                            @change="changedeparture('ETD')"
+                          >
+                            <el-option label="Day(s)" value="Day(s)" />
+                            <el-option label="Hour(s)" value="Hour(s)" />
+                          </el-select>
+                        </template>
+                      </el-input>
+                      <el-input
+                        v-else
+                        v-model="clampedValue"
+                        @input="changedeparture('ETD')"
+                        class="input-with-select1"
+                      >
+                      </el-input>
+                      <div
+                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                    </div>
+                  </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
@@ -266,25 +296,38 @@ const clampedETAValue = computed({
               <div v-if="isETA" style="margin-top: 16px">
                 <el-radio-group v-model="ETARadio" @change="changeETARadio">
                   <el-radio value="1">Notify for all changes</el-radio>
-                  <el-radio value="2"
-                    >Notify only when time difference
-                    <span class="delayedIcon">≥</span>
-                    <el-input
-                      v-model="clampedETAValue"
-                      class="input-with-select"
-                      @input="changedeparture('ETA')"
-                    >
-                      <template #append>
-                        <el-select
-                          v-model="ETASelect"
-                          placeholder="Select"
-                          @change="changedeparture('ETA')"
-                        >
-                          <el-option label="Day(s)" value="Day(s)" />
-                          <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
-                        </el-select>
-                      </template> </el-input
-                  ></el-radio>
+                  <el-radio value="2">
+                    <div class="flex">
+                      Notify only when time difference
+                      <span class="delayedIcon">≥</span>
+                      <el-input
+                      v-if="props.Title == 'Air shipments'"
+                        v-model="clampedETAValue"
+                        class="input-with-select"
+                        @input="changedeparture('ETA')"
+                      >
+                        <template #append>
+                          <el-select
+                            v-model="ETASelect"
+                            placeholder="Select"
+                            @change="changedeparture('ETA')"
+                          >
+                            <el-option label="Day(s)" value="Day(s)" />
+                            <el-option label="Hour(s)" value="Hour(s)" />
+                          </el-select>
+                        </template>
+                      </el-input>
+                      <el-input
+                        v-else
+                        v-model="clampedETAValue"
+                        @input="changedeparture('ETA')"
+                        class="input-with-select1"
+                      >
+                      </el-input>
+                      <div
+                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                    </div>
+                  </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
@@ -329,8 +372,13 @@ const clampedETAValue = computed({
 .input-with-select {
   width: 180px;
 }
+.input-with-select1 {
+  width: 84px;
+  border-radius: 0;
+}
 :deep(.el-input__wrapper) {
   width: 50%;
+  border-radius: 6px 0 0 6px;
 }
 :deep(.el-input-group__append) {
   width: 50%;
@@ -372,4 +420,20 @@ const clampedETAValue = computed({
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
+.Days {
+  width: 84px;
+  border: 1px solid var(--color-system-border);
+  border-radius: 0 6px 6px 0;
+  background-color: var(--color-system-body-bg);
+  border-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  height: 30px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/CreateAddRules/src/components/NotiMethods.vue

@@ -27,7 +27,6 @@ watch(
 const emits = defineEmits(['ChangeMethodsAdd'])
 // 初始设置Methods
 const MethodsInit = () => {
-  console.log(methods_data.value)
   if (methods_data.value?.method_display != undefined) {
     if (methods_data.value?.method_display.indexOf('Email') != -1) {
       checkMethodList.value.push('By Email')

src/components/CreateAddRules/src/components/ShipmentRange.vue

@@ -277,7 +277,7 @@ defineExpose({
           <el-radio-group v-model="TimeChecked" @change="changeTime">
             <el-radio :value="1">
               <div>ETD</div>
-              <div v-if="isETDVisible">
+              <div v-if="isETDVisible" class="oceanCheckbox2">
                 <el-radio-group v-model="defaultradio" @change="changedefaultradio">
                   <el-radio-button label="Next 30 days" value="Next 30 days" />
                   <el-radio-button label="Next 60 days" value="Next 60 days" />
@@ -285,8 +285,8 @@ defineExpose({
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div class="flex" style="align-items: end;margin-bottom: 8.5px;">
-                  <div>
+                <div class="flex" style="align-items: end;margin: 0 8px 8px 0;">
+                  <div class="date_flex">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
                       <div class="currentTime">Current time minus</div>
@@ -300,7 +300,7 @@ defineExpose({
                     </div>
                   </div>
                   <div class="To">To</div>
-                  <div>
+                  <div class="date_flex">
                     <div class="time_title">End Date</div>
                     <div class="flex">
                       <div class="currentTime">Current time plus</div>
@@ -318,7 +318,7 @@ defineExpose({
             </el-radio>
             <el-radio :value="2">
               <div>ETA</div>
-              <div v-if="isETAVisible">
+              <div v-if="isETAVisible" class="oceanCheckbox2">
                 <el-radio-group v-model="defaultradio2" @change="changedefaultradioETA">
                   <el-radio-button label="Next 30 days" value="Next 30 days" />
                   <el-radio-button label="Next 60 days" value="Next 60 days" />
@@ -391,26 +391,27 @@ defineExpose({
 .currentTime {
   background-color: var(--el-disabled-bg-color);
   border-radius: 6px 0 0 6px;
-  padding: 0 8px;
-  height: 28px;
-  line-height: 28px;
+  padding: 0 20px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid var(--color-system-border);
 }
 .input-with-select {
-  width: 84px;
   border-radius: 0;
 }
 :deep(.el-input__wrapper) {
   border-radius: 0;
   opacity: 0.8;
-  height: 28px;
+  height: 32px;
 }
 .flex {
   display: flex;
   align-items: center;
 }
 .Days {
-  width: 47px;
+  width: 250px;
   border: 1px solid var(--color-system-border);
   border-radius: 0 6px 6px 0;
   background-color: var(--color-system-body-bg);
@@ -419,7 +420,7 @@ defineExpose({
   align-items: center;
   justify-content: center;
   opacity: 0.8;
-  height: 28px;
+  height: 32px;
 }
 .time_title {
   color: var(--color-neutral-2);
@@ -429,12 +430,19 @@ defineExpose({
 .To {
   color: var(--color-neutral-2);
   font-size: 12px;
-  margin: 0 6px;
+  margin: 0 20px;
   line-height: 24px;
 }
 :deep(.el-radio-group) {
   display: block;
 }
+.oceanCheckbox2 {
+  :deep(.el-radio-group) {
+    display: flex;
+    flex-direction: row;
+    margin-right: 8px;
+}
+}
 :deep(.el-radio) {
   display: flex;
   min-height: 32px;
@@ -448,6 +456,21 @@ defineExpose({
   line-height: 32px;
   align-items:  start;
 }
+.oceanCheckbox2 {
+  :deep(.el-radio-button) {
+    flex: 1;
+    border: 1px solid var(--color-system-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.el-radio-button:first-child) {
+    border-radius: 6px 0 0 6px;
+  }
+  :deep(.el-radio-button:last-child) {
+    border-radius: 0 6px 6px 0;
+  }
+}
 :deep( .el-radio__inner) {
   border: 1px solid var(--color-system-checkbox-border);
 }
@@ -464,12 +487,16 @@ defineExpose({
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
 :deep(.el-radio-button__inner) {
-  border: 1px solid var(--color-system-border);
+  border: none;
+  height: 32px;
 }
 :deep(.el-radio-button:first-child .el-radio-button__inner) {
-  border-left:1px solid var(--color-system-border);
+  border-left: none;
 }
 .stars_red {
   color: var(--color-danger);
 }
+.date_flex {
+  flex: 1;
+}
 </style>

src/components/TableEmpty/TableEmpty.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import lightPng from './image/default_notification_setting.png'
-import darkPng from './image/default_notification_setting.png'
+import lightPng from './image/default_notification_setting@2x.png'
+import darkPng from './image/default_notification_setting@2x.png'
 import { useThemeStore } from '@/stores/modules/theme'
 
 const themeStore = useThemeStore()
@@ -18,7 +18,7 @@ const props = defineProps({
 <template>
   <div class="v-empty">
     <div class="empty-img">
-      <img :src="emptyImg" alt="" />
+      <img :src="emptyImg" alt="" style="width: 100px;" />
     </div>
     <p class="title">
       <slot name="title">{{ props.EmptyTitle }}</slot>

src/components/VBreadcrumb/src/VBreadcrumb.vue

@@ -6,6 +6,7 @@ import { useThemeStore } from '@/stores/modules/theme'
 const router = useRouter()
 const breadCrumb = useBreadCrumb()
 const themeStore = useThemeStore()
+const CancelRulesVisible = ref(false)
 
 const handleGoBack = () => {
   const routeData = breadCrumb.getUpperRoute()
@@ -14,12 +15,25 @@ const handleGoBack = () => {
     query: routeData.query
   })
 }
+let monitoringQuery = ref()
 const jumpLink = (label: string, query: any) => {
-  label &&
-    router.push({
-      name: label,
-      query: query
-    })
+    if(label == 'Monitoring Settings') {
+      CancelRulesVisible.value = true
+      monitoringQuery.value = query
+    } else {
+      label &&
+      router.push({
+        name: label,
+        query: query
+      })
+    }
+}
+const jumpLinkMonitoring = () => {
+  CancelRulesVisible.value = false
+  router.push({
+    name: 'Monitoring Settings',
+    query: monitoringQuery.value
+  })
 }
 </script>
 
@@ -41,6 +55,31 @@ const jumpLink = (label: string, query: any) => {
     </template>
   </div>
   <div v-else></div>
+    <!-- 取消保存 -->
+    <el-dialog v-model="CancelRulesVisible" width="480">
+      <div style="font-weight: 400">You have unsaved changes.</div>
+      <div style="font-weight: 400">Are you sure you want to leave this page?</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="default" @click="CancelRulesVisible = false" style="width: 100px"
+            >Cancel</el-button
+          >
+          <el-button class="el-button--warning" @click="jumpLinkMonitoring" style="width: 100px">
+            OK
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon iconfont_warning">
+            <svg class="iconfont icon_warning" aria-hidden="true">
+              <use xlink:href="#icon-icon_tipsfilled_b"></use>
+            </svg>
+          </span>
+          Unsaved Changes
+        </div>
+      </template>
+    </el-dialog>
 </template>
 
 <style lang="scss" scoped>
@@ -72,4 +111,21 @@ const jumpLink = (label: string, query: any) => {
     }
   }
 }
+.cancel_header {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-neutral-1);
+  display: flex;
+  align-items: center;
+}
+.icon_warning {
+  width: 22px;
+  height: 22px;
+  margin-right: 0;
+  fill: var(--color-btn-warning-bg);
+}
+.iconfont_warning {
+  display: flex;
+  align-items: center;
+}
 </style>

src/stores/modules/breadCrumb.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'
 
 interface Route {
   label: string

src/styles/theme-g.scss

@@ -72,7 +72,7 @@
 
   --color-system-color-bg:#3f434a;
   --color-system-border: #3f434a;
-  --color-system-checkbox-border: #3f434a;
+  --color-system-checkbox-border: #656f7d;
   --color-system-body-bg:#30353c;
   --color-system-notification-bg:#343a43;
   --color-system-card-bg:#2B2F36;

src/views/SystemSettings/src/SystemSettings.vue

@@ -377,7 +377,6 @@ onMounted(() => {
   border: none;
   width: 100%;
   border-radius: 6px;
-  margin: 8px 0;
 }
 :deep(.el-collapse-item__header) {
   border: 1px solid var(--color-select-border);
@@ -456,7 +455,6 @@ onMounted(() => {
 .el-button--main {
   margin-bottom: 4px;
 }
-
 .demo-tabs {
   height: calc(100% - 68px);
   :deep(.el-tabs__content) {

src/views/SystemSettings/src/components/CreateNewrule/src/CreateNewrule.vue

@@ -179,7 +179,7 @@ onMounted(() => {
 .contetnt {
   padding: 0 24px;
   margin-top: 16px;
-  margin-bottom: 14px;
+  padding-bottom: 48px;
 }
 .notification {
   border: 1px solid var(--color-border);
@@ -195,7 +195,7 @@ onMounted(() => {
   margin-top: 8px;
   border: 1px solid var(--color-border);
   border-radius: 12px;
-  min-height: 741px;
+  min-height: 690px;
 }
 .setting_header {
   font-size: 18px;
@@ -224,7 +224,6 @@ onMounted(() => {
   border: none;
   width: 100%;
   border-radius: 6px;
-  margin: 8px 0;
 }
 :deep(.el-collapse-item__header) {
   border: 1px solid var(--color-select-border);

src/views/SystemSettings/src/components/MonitoringTable/src/MonitoringTable.vue

@@ -45,8 +45,8 @@ const datatest = ref([])
 const tableData = ref<VxeGridProps<any>>({
   border: true,
   round: true,
-  minHeight: 700,
-  maxHeight: 700,
+  minHeight: 660,
+  maxHeight: 660,
   columns: [],
   data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
@@ -280,4 +280,8 @@ onMounted(() => {
 :deep(.el-icon svg) {
   width: 1em !important;
 }
+
+:deep(.vxe-table--empty-placeholder) {
+  height: 500px !important;
+}
 </style>

src/views/SystemSettings/src/components/SettingTable/src/SettingTable.vue

@@ -24,7 +24,7 @@ const columnstest = ref(props.ColumnsList)
 const tableData = ref<VxeGridProps<any>>({
   border: true,
   round: true,
-  minHeight: 70,
+  minHeight: 132,
   maxHeight: 500,
   columns: [],
   data: [],