Merge branch 'dev_g' of United_Software/k_online_ui into dev

package.json

@@ -44,7 +44,8 @@
     "vxe-pc-ui": "^4.1.7",
     "vxe-table": "^4.7.70",
     "vxe-table-plugin-export-xlsx": "^4.0.5",
-    "xe-clipboard": "^1.10.2"
+    "xe-clipboard": "^1.10.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

src/api/module/common.ts

@@ -203,6 +203,19 @@ export const GetTop10ODEcharts = (params: any, config: any) => {
     config
   )
 }
+/**
+ * Revenue Spent
+ */
+export const GetRevenueEcharts = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'main_report_revenue',
+      ...params
+    },
+    config
+  )
+}
 /**
  * Save Layout
  */

src/views/Dashboard/src/DashboardView.vue

@@ -51,6 +51,7 @@ const ContainerefaultData = ref()
 const Top10DefaultData = ref()
 const Co2OriginDefaultData = ref()
 const Co2DestinationDefaultData = ref()
+const RevenueDefaultData = ref()
 // 获取首页数据
 let dashboardObj: any = {}
 const GetDashboardData = () => {
@@ -75,6 +76,8 @@ const GetDashboardData = () => {
         dashboardObj.OriginCo2Top10faultData = res.data.OriginCo2Top10faultData
         Co2DestinationDefaultData.value = res.data.DestinationCo2Top10faultData
         dashboardObj.DestinationCo2Top10faultData = res.data.DestinationCo2Top10faultData
+        RevenueDefaultData.value = res.data.RevenueDefaultData
+        dashboardObj.RevenueDefaultData = res.data.RevenueDefaultData
       }
     })
     .finally(() => {
@@ -87,6 +90,7 @@ const GetDashboardData = () => {
         GetTop10ODEcharts(Top10DefaultData.value)
         GetCo2EmissionEcharts(Co2OriginDefaultData.value)
         GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
+        GetRevenueEcharts(RevenueDefaultData.value)
       })
     })
 }
@@ -375,6 +379,112 @@ const GetCo2DestinationEcharts = (val: any) => {
       DestinationLoading.value = false
     })
 }
+//获取Revenue Spent
+
+const RevenueObj = reactive({
+  bar_title: 'Total: 0',
+  barList: [
+    'DEC,23',
+    'JAN,24',
+    'FEB,24',
+    'MAR,24',
+    'APR,24',
+    'MAY,24',
+    'JUN,24',
+    'JUL,24',
+    'AUG,24',
+    'SEP,24',
+    'OCT,24',
+    'NOV,24'
+  ],
+  barSeries: [
+    {
+      name: 'USD',
+      type: 'bar',
+      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+      emphasis: {
+        disabled: true,
+        focus: 'none'
+      },
+      itemStyle: {
+        color: '#FF7500',
+        borderRadius: 6
+      },
+      label: {
+        show: false,
+        color: '#646A73',
+        position: 'top',
+        fontFamily: 'Lato-Light',
+        hideWhenMouseLeave: false // 鼠标离开时不隐藏标签
+      }
+    },
+    {
+      name: 'THB',
+      type: 'bar',
+      data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
+      emphasis: {
+        disabled: true,
+        focus: 'none'
+      },
+      itemStyle: {
+        color: '#FFAC66',
+        borderRadius: 6
+      },
+      label: {
+        show: false,
+        color: '#646A73',
+        position: 'top',
+        fontFamily: 'Lato-Light',
+        hideWhenMouseLeave: false // 鼠标离开时不隐藏标签
+      }
+    },
+    {
+      name: 'SGD',
+      type: 'bar',
+      data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
+      emphasis: {
+        disabled: true,
+        focus: 'none'
+      },
+      itemStyle: {
+        color: '#FFE3CC',
+        borderRadius: 6
+      },
+      label: {
+        show: false,
+        color: '#646A73',
+        position: 'top',
+        fontFamily: 'Lato-Light',
+        hideWhenMouseLeave: false // 鼠标离开时不隐藏标签
+      }
+    }
+  ],
+  Max: 5,
+  interval: 1,
+  download_name: 'Rvenue',
+  isShowTooltips: true
+})
+const RevenueLoading = ref(true)
+const GetRevenueEcharts = (val: any) => {
+  dashboardObj.RevenueDefaultData = val
+  $api
+    .GetRevenueEcharts({
+      ...val
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        RevenueObj.bar_title = res.data.bar_title
+        RevenueObj.barList = res.data.barList
+        RevenueObj.barSeries = res.data.barSeries
+        RevenueObj.Max = res.data.Max
+        RevenueObj.interval = res.data.interval
+        RevenueObj.download_name = res.data.download_name
+      }
+    })
+    .finally(() => {
+      RevenueLoading.value = false
+    })
+}
 onMounted(() => {
   GetDashboardData()
 })
@@ -1089,6 +1199,11 @@ const ClickParams = (val: any) => {
               </template>
             </VBox_Dashboard>
           </div>
+          <!-- Revenue -->
+          <!-- <div
+            v-else-if="item.title === 'Revenue' && item.switchValue"
+            class="KPI_Pending"
+          > -->
           <div
             v-else-if="
               item.title === 'Recent Status' && item.switchValue && RecentStatusList.length != 0
@@ -1125,6 +1240,30 @@ const ClickParams = (val: any) => {
               </template>
             </VBox_Dashboard>
           </div>
+          <!-- <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
+            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
+              <template #header>
+                <div class="Title_flex">
+                  Revenue Spent
+                  <DashFilters
+                    :defaultData="RevenueDefaultData"
+                    @FilterSearch="GetRevenueEcharts"
+                    :isRevenue="true"
+                    :isContainer="true"
+                  ></DashFilters>
+                </div>
+              </template>
+              <template #content>
+                <BarChart
+                  ref="seller_chart_CO2_destination"
+                  :BarData="RevenueObj"
+                  v-vloading="RevenueLoading"
+                  style="height: 300px"
+                  :barHeight="{ height: '300px' }"
+                ></BarChart>
+              </template>
+            </VBox_Dashboard>
+          </div> -->
         </template>
       </VueDraggable>
     </div>

src/views/Dashboard/src/components/BarChart.vue

@@ -2,6 +2,8 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+import updateIcon from '../image/xiazai.png'
+import * as XLSX from 'xlsx'
 const props = defineProps({
   BarData: Object,
   barHeight: Object
@@ -19,6 +21,7 @@ watch(
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
     initOption.toolbox.feature.saveAsImage.name = downloadName.value
+    initOption.toolbox.show = isShowTooltips.value
     initChart()
   },
   {
@@ -58,6 +61,129 @@ const Name = computed(() => {
 const downloadName = computed(() => {
   return bar_data.value?.download_name
 })
+const isShowTooltips = computed(() => {
+  return bar_data.value?.isShowTooltips
+})
+const columns1 = [
+  {
+    title: 'Currency',
+    dataIndex: 'Currency'
+  },
+  {
+    title: 'Total Amount',
+    dataIndex: 'Total Amount'
+  },
+  {
+    title: 'Month',
+    dataIndex: 'Month'
+  }
+]
+const columns2 = [
+  {
+    title: 'Invoice Issue Date',
+    dataIndex: 'Invoice Issue Date'
+  },
+  {
+    title: 'Invoice Number',
+    dataIndex: 'Invoice Number'
+  },
+  {
+    title: 'HBL Number',
+    dataIndex: 'HBL Number'
+  },
+  {
+    title: 'Amount',
+    dataIndex: 'Amount'
+  },
+  {
+    title: 'Currency',
+    dataIndex: 'Currency'
+  }
+]
+const tableData = [
+  {
+    Currency: 'ust',
+    ['Total Amount']: '1,985',
+    Month: 'JAN,2024'
+  }
+]
+const tableData2 = [
+  {
+    ['Invoice Issue Date']: '11/12/2024',
+    ['Invoice Number']: 'H907657653',
+    ['HBL Number']: 'SXTYOA201733',
+    Amount: 580,
+    Currency: 'USD'
+  }
+]
+let filterA = columns1.map((el: any) => {
+  return el.dataIndex
+})
+let titleA = columns1.map((el: any) => {
+  return el.title
+})
+let filterB = columns2.map((el: any) => {
+  return el.dataIndex
+})
+let titleB = columns2.map((el: any) => {
+  return el.title
+})
+let result: any = [
+  {
+    tHeader: titleA,
+    filterVal: filterA,
+    tableDatas: tableData,
+    sheetName: 'Monthly Summary Data'
+  },
+  {
+    tHeader: titleB,
+    filterVal: filterB,
+    tableDatas: tableData2,
+    sheetName: 'Invoice Detailed Data'
+  }
+]
+let header: any = []
+let data: any = []
+let sheetname: any = []
+let formatJson = (filterVal: any, jsonData: any) => {
+  return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
+}
+for (var i in result) {
+  header.push(result[i].tHeader)
+  sheetname.push(result[i].sheetName)
+  data.push(formatJson(result[i].filterVal, result[i].tableDatas))
+}
+const exportData = ({ header, data, sheetname, filename }: any) => {
+  // 将表头插入数据数组中
+  for (let i = 0; i < header.length; i++) {
+    data[i].unshift(header[i])
+  }
+  let ws_name = sheetname
+  // 创建工作簿对象
+  let wb = XLSX.utils.book_new()
+  let ws: any = []
+  // 创建每个工作表并设置列宽
+  for (let j = 0; j < header.length; j++) {
+    ws.push(XLSX.utils.aoa_to_sheet(data[j]))
+    let arr: any = []
+    header[j].forEach((val: any) => {
+      arr.push({
+        wpx: 120
+      })
+    })
+    ws[j]['!cols'] = arr
+  }
+  // 将工作表对象添加到工作簿中
+  for (let k = 0; k < header.length; k++) {
+    wb.SheetNames.push(ws_name[k])
+    wb.Sheets[ws_name[k]] = ws[k]
+  }
+  XLSX.writeFile(wb, filename + '.xlsx') // 导出文件
+  // const data = XLSX.utils.json_to_sheet(tableData) //此处tableData.value为表格的数据
+  // const wb = XLSX.utils.book_new()
+  // XLSX.utils.book_append_sheet(wb, data, 'test-data') //test-data为自定义的sheet表名
+  // XLSX.writeFile(wb, 'test.xlsx') //test.xlsx为自定义的文件名
+}
 
 // 数额
 const initOption = reactive({
@@ -77,7 +203,7 @@ const initOption = reactive({
   grid: {
     top: '18%',
     left: '1%',
-    right: '6%',
+    right: '2%',
     bottom: '5%',
     containLabel: true // 距离包含坐标轴上的文字
   },
@@ -177,10 +303,19 @@ const initOption = reactive({
         borderColor: '#ff7500'
       } // hover上去时的颜色
     },
-    show: false, // 显示工具箱
+    itemSize: 25,
+    show: isShowTooltips.value, // 显示工具箱
     feature: {
-      restore: { show: true },
-      saveAsImage: { show: true, name: downloadName.value }
+      saveAsImage: { show: false, name: downloadName.value },
+      myTool1: {
+        show: true,
+        title: 'update',
+        icon: 'image://' + updateIcon,
+        onclick: function () {
+          let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[1]
+          exportData({ header, data, sheetname, filename: filename })
+        }
+      }
     },
     showTitle: false
   }
@@ -211,7 +346,30 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     bar_chart.resize()
   })
+  bar_chart.on('legendselectchanged', function (event) {
+    const selected = event.selected
+    let trueCount = 0
+    let trueObj: any = {}
+    for (var key in selected) {
+      if (selected[key]) {
+        trueCount++
+        trueObj[key] = selected[key]
+      }
+    }
+    if (trueCount == 1) {
+      initOption.series.forEach((item: any, index: any) => {
+        if (item.name == Object.keys(trueObj)) {
+          initOption.series[index].label.show = true
+        }
+      })
+    } else {
+      initOption.series.forEach((item: any, index: any) => {
+        initOption.series[index].label.show = false
+      })
+    }
+  })
 }
+
 defineExpose({
   paramsdata
 })

src/views/Dashboard/src/components/DashFiters.vue

@@ -22,6 +22,10 @@ const props = defineProps({
   isContainer: {
     type: Boolean,
     default: false
+  },
+  isRevenue: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -35,9 +39,11 @@ watch(
 const isDisabled = ref(false)
 const checkboxGroup1 = ref(['All'])
 const CheckboxGroup2 = ref('ETD')
+const CheckboxGroup3 = ref('invoice Issue Date')
 const filters_visible = ref(false)
 const shipper = ref(['All', 'Air', 'Sea', 'Road'])
 const shipper_two = ref(['ETD', 'ETA'])
+const shipper_three = ref(['invoice Issue Date'])
 const DashDate = ref()
 DashDate.value = []
 const startDate = ref()
@@ -202,7 +208,13 @@ const DateRangeSearch = () => {
         </div>
       </div>
       <div class="dash_flex">
-        <div class="filter_filter">
+        <div class="filter_filter" v-if="props.isRevenue">
+          <el-radio-group v-model="CheckboxGroup3">
+            <el-radio-button v-for="item in shipper_three" :key="item" :value="item" :label="item">
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="filter_filter" v-else>
           <el-radio-group
             v-model="CheckboxGroup2"
             @change="changeCheckboxGroup2"
@@ -212,10 +224,10 @@ const DateRangeSearch = () => {
             </el-radio-button>
           </el-radio-group>
         </div>
-        <div class="filter_filter" style="margin-left: 8px">
+        <div class="filter_filter" style="margin-left: 4px">
           <div v-if="props.isContainer">
             <el-date-picker
-              style="width: 120px; height: 40px"
+              :style="{ width: props.isRevenue ? '110px' : '120px', height: '40px' }"
               v-model="startDate"
               format="MMM-YYYY"
               type="month"
@@ -225,7 +237,11 @@ const DateRangeSearch = () => {
               placement="bottom"
             />
             <el-date-picker
-              style="width: 120px; margin-left: 8px; height: 40px"
+              :style="{
+                width: props.isRevenue ? '110px' : '120px',
+                height: '40px',
+                marginLeft: '8px'
+              }"
               v-model="EndDate"
               format="MMM-YYYY"
               type="month"
@@ -354,4 +370,18 @@ const DateRangeSearch = () => {
   display: flex;
   align-items: center;
 }
+:deep(
+    .el-radio-button.is-active
+      .el-radio-button__original-radio:not(:disabled)
+      + .el-radio-button__inner
+  ) {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+:deep(.el-radio-button:first-child .el-radio-button__inner) {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/OperationLog/src/OperationLog.vue

@@ -158,9 +158,7 @@ const handleOperationChange = (val: any) => {
   Search('operation', val)
 }
 const Search = (tag: any, value: any) => {
-  if (OperationSearch.value) {
-    searchLogData.user_name = OperationSearch.value
-  }
+  searchLogData.user_name = OperationSearch.value
   searchLogData[tag] = value
   BookingTable_ref.value.SearchOperationLog(searchLogData)
 }

src/views/Tracking/src/TrackingView.vue

@@ -639,10 +639,7 @@ const SearchInput = () => {
     <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
     <div class="heaer_top">
       <div class="search">
-        <el-input
-          placeholder="Search booking No./HBL No./PO No./Carrier Booking No."
-          v-model="TrackingSearch"
-        >
+        <el-input placeholder="Search shipment No./reference No...." v-model="TrackingSearch">
           <template #prefix>
             <span class="iconfont_icon">
               <svg class="iconfont" aria-hidden="true">