feat: 调整report细节样式

src/styles/elementui.scss

@@ -915,5 +915,5 @@ div .manage-footer-class {
   box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15) !important;
 }
 div .schedule-popper {
-  max-width: 320px;
+  max-width: 328px;
 }

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

@@ -58,7 +58,7 @@ const getMenuList = () => {
     {
       index: '4',
       label: 'Report',
-      icon: 'icon_edoc_b',
+      icon: 'icon_report__fill_b',
       path: '/report'
     },
     {

src/views/Report/src/components/ReportDetail/src/ReportDetail.vue

@@ -16,46 +16,46 @@ const ServiceValue = ref('')
 const Statusoptions = [
   {
     value: 'Option1',
-    label: 'Option1',
+    label: 'Option1'
   },
   {
     value: 'Option2',
-    label: 'Option2',
+    label: 'Option2'
   },
   {
     value: 'Option3',
-    label: 'Option3',
+    label: 'Option3'
   },
   {
     value: 'Option4',
-    label: 'Option4',
+    label: 'Option4'
   },
   {
     value: 'Option5',
-    label: 'Option5',
-  },
+    label: 'Option5'
+  }
 ]
 const Serviceoptions = [
   {
     value: 'Option1',
-    label: 'Option1',
+    label: 'Option1'
   },
   {
     value: 'Option2',
-    label: 'Option2',
+    label: 'Option2'
   },
   {
     value: 'Option3',
-    label: 'Option3',
+    label: 'Option3'
   },
   {
     value: 'Option4',
-    label: 'Option4',
+    label: 'Option4'
   },
   {
     value: 'Option5',
-    label: 'Option5',
-  },
+    label: 'Option5'
+  }
 ]
 const getManageCoulumns = (column: any) => {
   ManageCoulumns.value = column
@@ -91,45 +91,57 @@ const handleClickDownload = (val: string) => {
 const ApplyNewColumn = (column: any) => {
   downloadCoulumn.value = column
 }
-
-
 </script>
 <template>
-  <div
-  >
+  <div>
     <div class="Title">
       <span>Shipment Status Report</span>
       <div>
-        <el-popover
-          placement="bottom"
-          width="195"
-          :visible="DownloadVisible">
-            <p class="download-item" @click="handleClickDownload('xlsx')">Excel(.xlsx)</p>
-            <p class="download-item" @click="handleClickDownload('csv')">CSV(.csv)</p>
+        <el-popover placement="bottom" width="195" :visible="DownloadVisible">
+          <p class="download-item" @click="handleClickDownload('xlsx')">Excel(.xlsx)</p>
+          <p class="download-item" @click="handleClickDownload('csv')">CSV(.csv)</p>
           <template #reference>
-            <el-button 
+            <el-button
               @blur="DownloadVisible = false"
-              @click="DownloadVisible = !DownloadVisible" class="el-button--main download_button"
+              @click="DownloadVisible = !DownloadVisible"
+              class="el-button--main download_button"
             >
-              <span class="font_family icon-icon_download_b"></span><span style="margin: 0 4px;">Download Report</span><span class="font_family icon-icon_dropdown_b"></span>
+              <span class="font_family icon-icon_download_b"></span
+              ><span style="margin: 0 4px">Download Report</span
+              ><span class="font_family icon-icon_dropdown_b"></span>
             </el-button>
           </template>
         </el-popover>
         <el-button type="default" @click="handleClickManageFields">
           <span class="font_family icon-icon_set_b"></span>Manage Fields
         </el-button>
-        <ManageReportFields ref="ManageReportFieldsRef" @ApplyNewColumn="ApplyNewColumn"></ManageReportFields>
+        <ManageReportFields
+          ref="ManageReportFieldsRef"
+          @ApplyNewColumn="ApplyNewColumn"
+        ></ManageReportFields>
       </div>
     </div>
-    <div class="filters" :class="{'fold-filter' : isFolded}">
+    <div class="filters" :class="{ 'fold-filter': isFolded }">
       <div class="filers-flex">
         <div class="filters-title">
-          <span class="font_family icon-icon_dropdown_b" :class="{'fold-class' : isFolded}" @click="isFolded = !isFolded"></span>
+          <span
+            class="font_family icon-icon_dropdown_b"
+            :class="{ 'fold-class': isFolded }"
+            @click="isFolded = !isFolded"
+          ></span>
           Filters
         </div>
         <div>
-          <el-button @click="handleClickReset" style="height: 32px;width: 80px;" type="default"><span class="font_family icon-icon_reset_b" style="margin-right: 8px;"></span>Reset</el-button>
-          <el-button style="height: 32px;width: 80px;" class="el-button--dark" @click="handelSearchFilters">Search</el-button>
+          <el-button @click="handleClickReset" style="height: 32px; width: 80px" type="default"
+            ><span class="font_family icon-icon_reset_b" style="margin-right: 8px"></span
+            >Reset</el-button
+          >
+          <el-button
+            style="height: 32px; width: 80px"
+            class="el-button--dark"
+            @click="handelSearchFilters"
+            >Search</el-button
+          >
         </div>
       </div>
       <div class="filter-search">
@@ -223,12 +235,16 @@ const ApplyNewColumn = (column: any) => {
     }
   }
   .filter-search {
-    display: flex;
-    flex-wrap: wrap;
+    // display: flex;
+    // flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
+    grid-auto-rows: auto;
+    gap: 8px;
     .filters-input {
-      width: 24.5%;
-      margin-right: 8px;
-      margin-bottom: 8px;
+      // width: 24.5%;
+      // margin-right: 8px;
+      // margin-bottom: 8px;
       .filters-input-title {
         font-size: 12px;
         font-weight: 400;
@@ -236,13 +252,13 @@ const ApplyNewColumn = (column: any) => {
         margin-bottom: 4px;
       }
     }
-    .filters-input:nth-child(4n){
-      margin-right: 0;
-    }
+    // .filters-input:nth-child(4n){
+    //   margin-right: 0;
+    // }
   }
 }
 .fold-filter {
   height: 48px;
   overflow: hidden;
 }
-</style>
+</style>

src/views/Report/src/components/ReportSchedule/src/components/TimeRange.vue

@@ -11,23 +11,20 @@ const RollingValueeEnd = ref()
 const radio = ref(0)
 const fixedRangeRadio = ref('')
 const rollingRangeRadio = ref('')
-const DataTimeoptions = ref(
-  [
-    {
-      value: 'ETD',
-      label: 'ETD'
-    },
-    {
-      value: 'ETA',
-      label: 'ETA'
-    }
-  ]
-)
+const DataTimeoptions = ref([
+  {
+    value: 'ETD',
+    label: 'ETD'
+  },
+  {
+    value: 'ETA',
+    label: 'ETA'
+  }
+])
 
 const isshowRolling = computed(() => radio.value === 1)
 const isShowFixed = computed(() => radio.value === 2)
 
-
 const clampedValueStart = computed({
   get: () => RollingValueStart.value,
   set: (newVal) => {
@@ -66,10 +63,7 @@ const changeTime = (val: any) => {
   if (val == 1) {
     startDate.value = ''
     endDate.value = ''
-    if (
-      typeof clampedValueStart.value == 'number' &&
-      typeof clampedValueEnd.value == 'number'
-    ) {
+    if (typeof clampedValueStart.value == 'number' && typeof clampedValueEnd.value == 'number') {
       if (clampedValueStart.value == 0 && clampedValueEnd.value == 30) {
         rollingRangeRadio.value = 'Next 30 days'
       } else if (clampedValueStart.value == 0 && clampedValueEnd.value == 60) {
@@ -94,32 +88,74 @@ const changeTime = (val: any) => {
     } else {
       RollingRangeTimeStr = ''
     }
-    emits('handleSubmitRolling', {rollingStartDate: clampedValueStart.value, rollingEndDate: clampedValueEnd.value, DataTimeSelection: DataTimeSelection.value})
-  } else if(val == 2) {
+    emits('handleSubmitRolling', {
+      rollingStartDate: clampedValueStart.value,
+      rollingEndDate: clampedValueEnd.value,
+      DataTimeSelection: DataTimeSelection.value
+    })
+  } else if (val == 2) {
     clampedValueStart.value = 0
     clampedValueEnd.value = 0
-    if (startDate.value == dayjs().startOf('month').format('YYYY.MM.DD') && endDate.value == dayjs().endOf('month').format('YYYY.MM.DD')) {
+    if (
+      startDate.value == dayjs().startOf('month').format('YYYY.MM.DD') &&
+      endDate.value == dayjs().endOf('month').format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'This Month'
-    } else if (startDate.value == dayjs().subtract(1, 'month').startOf('month').format('YYYY.MM.DD') && endDate.value == dayjs().subtract(1, 'month').endOf('month').format('YYYY.MM.DD')) {
+    } else if (
+      startDate.value == dayjs().subtract(1, 'month').startOf('month').format('YYYY.MM.DD') &&
+      endDate.value == dayjs().subtract(1, 'month').endOf('month').format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'Last Month'
-    } else if (startDate.value == dayjs().month(Math.floor(dayjs().month() / 3) * 3).startOf('month').format('YYYY.MM.DD') && endDate.value == dayjs().month(Math.floor(dayjs().month() / 3) * 3 + 2).endOf('month').format('YYYY.MM.DD')) {
+    } else if (
+      startDate.value ==
+        dayjs()
+          .month(Math.floor(dayjs().month() / 3) * 3)
+          .startOf('month')
+          .format('YYYY.MM.DD') &&
+      endDate.value ==
+        dayjs()
+          .month(Math.floor(dayjs().month() / 3) * 3 + 2)
+          .endOf('month')
+          .format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'This Quarter'
-    } else if (startDate.value == dayjs().month(Math.floor(dayjs().month() / 3) * 3 - 3).startOf('month').format('YYYY.MM.DD') && endDate.value == dayjs().month(Math.floor(dayjs().month() / 3) * 3 - 1).endOf('month').format('YYYY.MM.DD')) {
+    } else if (
+      startDate.value ==
+        dayjs()
+          .month(Math.floor(dayjs().month() / 3) * 3 - 3)
+          .startOf('month')
+          .format('YYYY.MM.DD') &&
+      endDate.value ==
+        dayjs()
+          .month(Math.floor(dayjs().month() / 3) * 3 - 1)
+          .endOf('month')
+          .format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'Last Quarter'
-    } else if (startDate.value == dayjs().startOf('year').format('YYYY.MM.DD') && endDate.value == dayjs().endOf('year').format('YYYY.MM.DD')) {
+    } else if (
+      startDate.value == dayjs().startOf('year').format('YYYY.MM.DD') &&
+      endDate.value == dayjs().endOf('year').format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'This Year'
-    } else if (startDate.value == dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD') && endDate.value == dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')) {
+    } else if (
+      startDate.value == dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD') &&
+      endDate.value == dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')
+    ) {
       fixedRangeRadio.value = 'Last Year'
     } else {
       fixedRangeRadio.value = 'Customize'
     }
-    emits('handleSubmitRolling', {rollingStartDate: startDate.value, rollingEndDate: endDate.value, DataTimeSelection: DataTimeSelection.value})
+    emits('handleSubmitRolling', {
+      rollingStartDate: startDate.value,
+      rollingEndDate: endDate.value,
+      DataTimeSelection: DataTimeSelection.value
+    })
   } else {
     RollingRangeTimeStr = ''
   }
 }
 // 选择Dynamic Rolling Range默认值
-const ChangeRollingRangeRadio = (val: any) => { 
+const ChangeRollingRangeRadio = (val: any) => {
   if (val == 'Next 30 days') {
     clampedValueStart.value = 0
     clampedValueEnd.value = 30
@@ -146,35 +182,55 @@ const ChangeRollingRangeRadio = (val: any) => {
       clampedValueEnd.value +
       ' Day(s)'
   }
-  emits('handleSubmitRolling', {rollingStartDate: clampedValueStart.value, rollingEndDate: clampedValueEnd.value, DataTimeSelection: DataTimeSelection.value})
+  emits('handleSubmitRolling', {
+    rollingStartDate: clampedValueStart.value,
+    rollingEndDate: clampedValueEnd.value,
+    DataTimeSelection: DataTimeSelection.value
+  })
 }
 
 // 选择fixed range默认值
 const changeFixedRange = (val: any) => {
-  if(val == 'This Month') {
+  if (val == 'This Month') {
     startDate.value = dayjs().startOf('month').format('YYYY.MM.DD')
     endDate.value = dayjs().endOf('month').format('YYYY.MM.DD')
-  } else if(val == 'Last Month') {
+  } else if (val == 'Last Month') {
     startDate.value = dayjs().subtract(1, 'month').startOf('month').format('YYYY.MM.DD')
     endDate.value = dayjs().subtract(1, 'month').endOf('month').format('YYYY.MM.DD')
-  } else if(val == 'This Quarter') {
-    startDate.value = dayjs().month(Math.floor(dayjs().month() / 3) * 3).startOf('month').format('YYYY.MM.DD')
-    endDate.value = dayjs().month(Math.floor(dayjs().month() / 3) * 3 + 2).endOf('month').format('YYYY.MM.DD')
-  } else if(val == 'Last Quarter') {
-    startDate.value = dayjs().month(Math.floor(dayjs().month() / 3) * 3 - 3).startOf('month').format('YYYY.MM.DD')
-    endDate.value = dayjs().month(Math.floor(dayjs().month() / 3) * 3 - 1).endOf('month').format('YYYY.MM.DD')
-  } else if(val == 'This Year') {
+  } else if (val == 'This Quarter') {
+    startDate.value = dayjs()
+      .month(Math.floor(dayjs().month() / 3) * 3)
+      .startOf('month')
+      .format('YYYY.MM.DD')
+    endDate.value = dayjs()
+      .month(Math.floor(dayjs().month() / 3) * 3 + 2)
+      .endOf('month')
+      .format('YYYY.MM.DD')
+  } else if (val == 'Last Quarter') {
+    startDate.value = dayjs()
+      .month(Math.floor(dayjs().month() / 3) * 3 - 3)
+      .startOf('month')
+      .format('YYYY.MM.DD')
+    endDate.value = dayjs()
+      .month(Math.floor(dayjs().month() / 3) * 3 - 1)
+      .endOf('month')
+      .format('YYYY.MM.DD')
+  } else if (val == 'This Year') {
     startDate.value = dayjs().startOf('year').format('YYYY.MM.DD')
     endDate.value = dayjs().endOf('year').format('YYYY.MM.DD')
-  } else if(val == 'Last Year') {
+  } else if (val == 'Last Year') {
     startDate.value = dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD')
     endDate.value = dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')
   }
-  emits('handleSubmitRolling', {rollingStartDate: startDate.value, rollingEndDate: endDate.value, DataTimeSelection: DataTimeSelection.value})
+  emits('handleSubmitRolling', {
+    rollingStartDate: startDate.value,
+    rollingEndDate: endDate.value,
+    DataTimeSelection: DataTimeSelection.value
+  })
 }
 </script>
 <template>
-  <div style="padding: 8px 16px 16px 16px;">
+  <div style="padding: 8px 16px 16px 16px">
     <div class="title">
       <span class="stars_red">*</span>
       Data Time Reference Field Selection
@@ -196,17 +252,19 @@ const changeFixedRange = (val: any) => {
         <el-radio-group v-model="radio" @change="changeTime">
           <el-radio :value="1">
             <div class="radio_custom">
-              <div style="height: 38px;">
+              <div style="height: 38px">
                 Dynamic Rolling Range
                 <el-tooltip
                   popper-class="schedule-popper"
                   effect="dark"
+                  :show-arrow="false"
                   placement="right"
                 >
                   <template #content>
-                    Configuration: Past X days to Future Y days, always dynamically calculated based on current date when generating reports.<br/>
-                    Usage: For example, setting 5 days to 3 days means the data range differs each time it's automatically generated.
-                    Used for short-cycle operational monitoring.
+                    Configuration: Past X days to Future Y days, always dynamically calculated based
+                    on current date when generating reports.<br />
+                    Usage: For example, setting 5 days to 3 days means the data range differs each
+                    time it's automatically generated. Used for short-cycle operational monitoring.
                   </template>
                   <span class="font_family icon-icon_info_b"></span>
                 </el-tooltip>
@@ -223,7 +281,7 @@ const changeFixedRange = (val: any) => {
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
                 <div class="flex" style="align-items: end; margin: 0 8px 8px 0; flex-wrap: wrap">
-                  <div class="date_flex" style="margin-right: 10px;">
+                  <div class="date_flex" style="margin-right: 10px">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
                       <div class="currentTime">Past</div>
@@ -255,15 +313,17 @@ const changeFixedRange = (val: any) => {
           </el-radio>
           <el-radio :value="2">
             <div class="radio_custom">
-              <div style="height: 38px;">
+              <div style="height: 38px">
                 Fixed Range
                 <el-tooltip
+                  :show-arrow="false"
                   popper-class="schedule-popper"
                   effect="dark"
                   placement="right"
                 >
                   <template #content>
-                    Configuration: Specific start and end dates, always query this range when automatically generating reports.<br />
+                    Configuration: Specific start and end dates, always query this range when
+                    automatically generating reports.<br />
                     Example: Start date [2025-01-01], End date [2025-12-31]
                   </template>
                   <span class="font_family icon-icon_info_b"></span>
@@ -271,40 +331,46 @@ const changeFixedRange = (val: any) => {
               </div>
               <div v-if="isShowFixed">
                 <div class="oceanCheckbox2">
-                  <el-radio-group v-model="fixedRangeRadio" @change="changeFixedRange" class="oceanCheckbox2">
+                  <el-radio-group
+                    v-model="fixedRangeRadio"
+                    @change="changeFixedRange"
+                    class="oceanCheckbox2"
+                  >
                     <el-radio-button label="This Month" value="This Month" />
                     <el-radio-button label="Last Month" value="Last Month" />
-                    <el-radio-button label="This Quarter" value="This Quarter"/>
+                    <el-radio-button label="This Quarter" value="This Quarter" />
                     <el-radio-button label="Last Quarter" value="Last Quarter" />
-                    <el-radio-button label="This Year" value="This Year"/>
+                    <el-radio-button label="This Year" value="This Year" />
                     <el-radio-button label="Last Year" value="Last Year" />
                     <el-radio-button label="Customize" value="Customize" />
                   </el-radio-group>
                 </div>
-                <div style="display: flex;">
-                  <div style="margin-right: 9px;width: 50%;">
-                  <div class="date_text">Start Date</div>
-                  <a-date-picker
-                    :format="userStore.dateFormat"
-                    valueFormat="YYYY.MM.DD"
-                    :showToday="false"
-                    @change="changeTime('2')"
-                    style="width: 100%;"
-                    v-model:value="startDate">
-                    <template #suffixIcon>
-                      <span class="font_family icon-icon_date_b"></span>
-                    </template>
-                  </a-date-picker>
+                <div style="display: flex">
+                  <div style="margin-right: 9px; width: 50%">
+                    <div class="date_text">Start Date</div>
+                    <a-date-picker
+                      :format="userStore.dateFormat"
+                      valueFormat="YYYY.MM.DD"
+                      :showToday="false"
+                      @change="changeTime('2')"
+                      style="width: 100%"
+                      v-model:value="startDate"
+                    >
+                      <template #suffixIcon>
+                        <span class="font_family icon-icon_date_b"></span>
+                      </template>
+                    </a-date-picker>
                   </div>
-                  <div style="width: 50%;">
+                  <div style="width: 50%">
                     <div class="date_text">End Date</div>
                     <a-date-picker
                       :format="userStore.dateFormat"
                       valueFormat="YYYY.MM.DD"
                       :showToday="false"
                       @change="changeTime('2')"
-                      style="width: 100%;"
-                      v-model:value="endDate">
+                      style="width: 100%"
+                      v-model:value="endDate"
+                    >
                       <template #suffixIcon>
                         <span class="font_family icon-icon_date_b"></span>
                       </template>
@@ -466,4 +532,4 @@ const changeFixedRange = (val: any) => {
 .date_flex {
   flex: 1;
 }
-</style>
+</style>

src/views/Report/src/components/ReportSchedule/src/components/ValidityPeriod.vue

@@ -11,24 +11,29 @@ const isShowEffective = computed(() => {
 })
 const emit = defineEmits(['handleSubmitValidity'])
 // 选择Validity Period部分
-const ChangeValidity = (val:any) => {
-  if(val == 2) {
-    emit('handleSubmitValidity', {type: 'Custom Period', startDate: startDate.value? startDate.value : '', endDate: endDate.value? endDate.value : ''})
-  } else if(val == 1) {
-    emit('handleSubmitValidity', {type: 'Permanent Valid'})
+const ChangeValidity = (val: any) => {
+  if (val == 2) {
+    emit('handleSubmitValidity', {
+      type: 'Custom Period',
+      startDate: startDate.value ? startDate.value : '',
+      endDate: endDate.value ? endDate.value : ''
+    })
+  } else if (val == 1) {
+    emit('handleSubmitValidity', { type: 'Permanent Valid' })
     startDate.value = ''
     endDate.value = ''
   }
 }
 </script>
 <template>
-  <div style="padding: 8px 16px 16px 16px;">
+  <div style="padding: 8px 16px 16px 16px">
     <el-radio-group v-model="radio" @change="ChangeValidity">
       <el-radio :value="1">
         Permanent Valid
         <el-tooltip
           popper-class="schedule-popper"
           effect="dark"
+          :show-arrow="false"
           content="Active continuously once enabled, until manually disabled or deleted."
           placement="right"
         >
@@ -37,27 +42,29 @@ const ChangeValidity = (val:any) => {
       </el-radio>
       <el-radio :value="2">
         <div class="radio_custom">
-          <div style="height: 38px;">
+          <div style="height: 38px">
             Custom Period
             <el-tooltip
               popper-class="schedule-popper"
               effect="dark"
+              :show-arrow="false"
               content="Only automatically execute during specified time period."
               placement="right"
             >
               <span class="font_family icon-icon_info_b"></span>
             </el-tooltip>
           </div>
-          <div v-if="isShowEffective" style="display: flex;">
-            <div style="margin-right: 9px;">
+          <div v-if="isShowEffective" style="display: flex">
+            <div style="margin-right: 9px">
               <div class="date_text">Effective Start Date</div>
               <a-date-picker
                 :format="userStore.dateFormat"
                 valueFormat="YYYY.MM.DD"
                 :showToday="false"
-                style="width: 320px;"
+                style="width: 320px"
                 @change="ChangeValidity(2)"
-                v-model:value="startDate">
+                v-model:value="startDate"
+              >
                 <template #suffixIcon>
                   <span class="font_family icon-icon_date_b"></span>
                 </template>
@@ -70,8 +77,9 @@ const ChangeValidity = (val:any) => {
                 valueFormat="YYYY.MM.DD"
                 :showToday="false"
                 @change="ChangeValidity(2)"
-                style="width: 320px;"
-                v-model:value="endDate">
+                style="width: 320px"
+                v-model:value="endDate"
+              >
                 <template #suffixIcon>
                   <span class="font_family icon-icon_date_b"></span>
                 </template>
@@ -123,4 +131,4 @@ const ChangeValidity = (val:any) => {
   font-size: 12px;
   font-weight: 400;
 }
-</style>
+</style>