|
|
@@ -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,86 @@ 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
|
|
|
})
|
|
|
- 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为自定义的文件名
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ let header: any = []
|
|
|
+ let data: any = []
|
|
|
+ let sheetname: any = []
|
|
|
+ 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))
|
|
|
+ }
|
|
|
+ // 将表头插入数据数组中
|
|
|
+ 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') // 导出文件
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {})
|
|
|
}
|
|
|
|
|
|
// 数额
|
|
|
const initOption = reactive({
|
|
|
//标题
|
|
|
title: {
|
|
|
- text: bar_title.value || '', //主标题
|
|
|
+ text: bar_title.value || 'Total:', //主标题
|
|
|
left: 19,
|
|
|
top: 9.5,
|
|
|
textStyle: {
|
|
|
@@ -313,7 +272,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 +300,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 +318,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({
|
zhouyuhao
