Merge branch 'dev_g' of United_Software/k_online_ui into dev

src/api/module/common.ts

@@ -255,3 +255,17 @@ export const getDashboardFilters = (config: any) => {
     config
   )
 }
+
+/**
+ * 获取首页筛选条件
+ */
+export const RevenueDownload = (config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'revenue'
+    },
+    config
+  )
+}

src/views/Dashboard/src/DashboardView.vue

@@ -90,7 +90,7 @@ const GetDashboardData = () => {
         GetTop10ODEcharts(Top10DefaultData.value)
         GetCo2EmissionEcharts(Co2OriginDefaultData.value)
         GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
-        // GetRevenueEcharts(RevenueDefaultData.value)
+        GetRevenueEcharts(RevenueDefaultData.value)
       })
     })
 }
@@ -1006,6 +1006,7 @@ const ClickParams = (val: any) => {
                   :BarData="containerObj"
                   v-vloading="containerLoading"
                   style="height: 300px"
+                  :isRevenue="true"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
@@ -1093,6 +1094,7 @@ const ClickParams = (val: any) => {
                   @clickParams="ClickParams(item.title)"
                   v-vloading="EmissionLoading"
                   style="height: 250px"
+                  :isRevenue="true"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
@@ -1119,13 +1121,13 @@ const ClickParams = (val: any) => {
                   :BarData="DestinationObj"
                   v-vloading="DestinationLoading"
                   style="height: 250px"
+                  :isRevenue="true"
                   @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
           </div>
-          <!-- Revenue -->
           <!-- <div
             v-else-if="item.title === 'Revenue' && item.switchValue"
             class="KPI_Pending"
@@ -1166,7 +1168,8 @@ const ClickParams = (val: any) => {
               </template>
             </VBox_Dashboard>
           </div>
-          <!-- <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
+          <!-- Revenue -->
+          <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">
@@ -1181,15 +1184,17 @@ const ClickParams = (val: any) => {
               </template>
               <template #content>
                 <BarChart
-                  ref="seller_chart_CO2_destination"
                   :BarData="RevenueObj"
+                  :isRevenue="false"
                   v-vloading="RevenueLoading"
+                  :RevenueStartDate="dashboardObj.RevenueDefaultData.date_start"
+                  :RevenueEndDate="dashboardObj.RevenueDefaultData.date_end"
                   style="height: 300px"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
-          </div> -->
+          </div>
         </template>
       </VueDraggable>
     </div>

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

@@ -6,7 +6,10 @@ import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
 const props = defineProps({
   BarData: Object,
-  barHeight: Object
+  barHeight: Object,
+  isRevenue: Boolean,
+  RevenueStartDate: String,
+  RevenueEndDate: String
 })
 const bar_data = ref(props.BarData)
 const bar_ref = ref()
@@ -14,7 +17,6 @@ watch(
   () => props.BarData,
   (current) => {
     bar_data.value = current
-    initOption.title.text = bar_title.value
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
     initOption.legend.data = Name.value
@@ -23,6 +25,9 @@ watch(
     initOption.toolbox.feature.saveAsImage.name = downloadName.value
     initOption.toolbox.show = isShowTooltips.value
     initChart()
+    if (props.isRevenue) {
+      initOption.title.text = bar_title.value
+    }
   },
   {
     deep: true
@@ -64,132 +69,87 @@ const downloadName = computed(() => {
 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
-      })
+const exportData = ({ filename }: any) => {
+  $api
+    .RevenueDownload({
+      date_start: props.RevenueStartDate,
+      date_end: props.RevenueEndDate
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        let filterA = res.data.r2_cloumn.map((el: any) => {
+          return el.dataIndex
+        })
+        let titleA = res.data.r2_cloumn.map((el: any) => {
+          return el.title
+        })
+        let filterB = res.data.r3_cloumn.map((el: any) => {
+          return el.dataIndex
+        })
+        let titleB = res.data.r3_cloumn.map((el: any) => {
+          return el.title
+        })
+        let result: any = [
+          {
+            tHeader: titleA,
+            filterVal: filterA,
+            tableDatas: res.data.r2,
+            sheetName: res.data.r2_title
+          },
+          {
+            tHeader: titleB,
+            filterVal: filterB,
+            tableDatas: res.data.r3,
+            sheetName: res.data.r3_title
+          }
+        ]
+        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))
+        }
+      }
+    })
+    .finally(() => {
+      // 将表头插入数据数组中
+      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') // 导出文件
     })
-    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({
   //标题
   title: {
-    text: bar_title.value || '', //主标题
+    text: bar_title.value || 'Total:', //主标题
     left: 19,
     top: 9.5,
     textStyle: {
@@ -313,7 +273,7 @@ const initOption = reactive({
         icon: 'image://' + updateIcon,
         onclick: function () {
           let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[1]
-          exportData({ header, data, sheetname, filename: filename })
+          exportData({ filename: filename })
         }
       }
     },
@@ -341,7 +301,6 @@ const clickParams = () => {
 }
 const initChart = () => {
   const bar_chart = echarts.init(bar_ref.value)
-  bar_chart.setOption(initOption)
   //图表响应式
   window.addEventListener('resize', () => {
     bar_chart.resize()
@@ -360,14 +319,17 @@ const initChart = () => {
       initOption.series.forEach((item: any, index: any) => {
         if (item.name == Object.keys(trueObj)) {
           initOption.series[index].label.show = true
+          initOption.title.text = `Total: ${initOption.series[index].total}`
         }
       })
     } else {
       initOption.series.forEach((item: any, index: any) => {
         initOption.series[index].label.show = false
+        initOption.title.text = `Total: `
       })
     }
   })
+  bar_chart.setOption(initOption)
 }
 
 defineExpose({

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

@@ -384,4 +384,9 @@ const DateRangeSearch = () => {
   display: flex;
   align-items: center;
 }
+:deep(.el-radio-button__inner) {
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
 </style>