|
|
@@ -3,7 +3,6 @@
|
|
|
import * as echarts from 'echarts'
|
|
|
import { useThemeStore } from '@/stores/modules/theme'
|
|
|
import { onMounted, ref, reactive, watch, computed } from 'vue'
|
|
|
-import updateIcon from '../image/xiazai.png'
|
|
|
import * as XLSX from 'xlsx'
|
|
|
import { formatNumber } from '@/utils/tools'
|
|
|
|
|
|
@@ -82,6 +81,84 @@ const isShowTooltips = computed(() => {
|
|
|
return bar_data.value?.isShowTooltips
|
|
|
})
|
|
|
|
|
|
+const downloadName = computed(() => {
|
|
|
+ return bar_data.value?.download_name
|
|
|
+})
|
|
|
+const exportData = ({ filename }: any) => {
|
|
|
+ $api
|
|
|
+ .RevenueDownload({
|
|
|
+ date_start: props.RevenueStartDate,
|
|
|
+ date_end: props.RevenueEndDate
|
|
|
+ })
|
|
|
+ .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({
|
|
|
//标题
|
|
|
@@ -215,16 +292,27 @@ const initOption = reactive({
|
|
|
top: 6,
|
|
|
right: 8,
|
|
|
feature: {
|
|
|
- saveAsImage: { show: true, name: 'Revenue Spent', type: 'png', backgroundColor: '#fff' }
|
|
|
- // myTool1: {
|
|
|
- // show: true,
|
|
|
- // title: 'update',
|
|
|
- // icon: 'image://' + updateIcon,
|
|
|
- // onclick: function () {
|
|
|
- // let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[barName.value.length - 1]
|
|
|
- // exportData({ filename: filename })
|
|
|
- // }
|
|
|
- // }
|
|
|
+ saveAsImage: {
|
|
|
+ icon: 'path://M588.8 821.44H179.52a38.4 38.4 0 0 1-38.4-38.4v-105.088l202.432-115.584 112.96 64.576c7.872 4.48 17.6 4.48 25.472 0l400.768-228.8-0.32-0.512h0.64v-156.8a89.6 89.6 0 0 0-89.6-89.6H179.456a89.6 89.6 0 0 0-89.6 89.6v542.208a89.6 89.6 0 0 0 89.6 89.6H588.8v-51.2zM141.184 240.896a38.4 38.4 0 0 1 38.4-38.4h613.824a38.4 38.4 0 0 1 38.4 38.4v127.36L469.248 575.104 356.288 510.72a25.6 25.6 0 0 0-19.2-2.496l-6.144 2.56-189.76 108.288V240.896z m168.448 226.432c44.416 0 80.96-33.792 85.376-76.992l0.384-8.768c0-44.416-33.728-80.96-76.992-85.376l-8.768-0.448c-47.36 0-85.824 38.4-85.824 85.76l0.448 8.832c4.096 40.32 36.16 72.448 76.544 76.544l8.832 0.448z m0-51.2a34.624 34.624 0 1 1 0-69.312 34.624 34.624 0 0 1 0 69.312z m445.888 449.024a25.6 25.6 0 0 0 36.224-0.064l138.368-138.368-36.224-36.224-94.592 94.656V545.536h-51.2v239.616l-94.72-94.656-36.224 36.224 138.368 138.432z',
|
|
|
+ show: true,
|
|
|
+ name: 'Revenue Spent',
|
|
|
+ pixelRatio: 2
|
|
|
+ },
|
|
|
+ myTool1: {
|
|
|
+ show: true,
|
|
|
+ title: 'update',
|
|
|
+ icon:
|
|
|
+ 'path://' +
|
|
|
+ 'M571.648 956.864v-51.2H230.144a38.4 38.4 0 0 1-38.4-38.4V195.2a38.4 38.4 0 0 1 38.4-38.4h306.368v167.488c0 49.472 40.128 89.6 89.6 89.6h167.552v88.768h51.264V384h-0.448a25.472 25.472 0 0 0-7.04-13.76L580.224 113.088a25.6 25.6 0 0 0-19.84-7.424h-330.24c-49.408 0-89.6 40.128-89.6 89.6v672c0 49.472 40.128 89.6 89.6 89.6h341.504z m54.464-594.112a38.4 38.4 0 0 1-38.4-38.4V193.088l169.728 169.664H626.112z m-224.896 346.24a20.48 20.48 0 0 0 8.576-1.92 19.008 19.008 0 0 0 7.232-6.592l52.032-82.368a22.912 22.912 0 0 0 1.408-1.92c0.448-0.64 0.896-1.28 1.28-2.048l34.816 86.4a18.176 18.176 0 0 0 4.16 5.76c1.92 1.728 4.672 2.624 8.064 2.624h47.168l-56.512-128L587.52 473.6h-55.232a11.84 11.84 0 0 0-6.272 1.664 18.048 18.048 0 0 0-5.056 5.12l-41.28 67.2a59.392 59.392 0 0 0-3.84 6.272l-31.04-74.24a9.6 9.6 0 0 0-3.776-4.544c-1.408-0.96-3.84-1.472-7.232-1.472h-47.808l51.072 109.632-88.512 125.696h52.608z m357.824 240.384a25.6 25.6 0 0 0 36.224 0l147.072-147.2-36.16-36.16-103.424 103.488V610.56h-51.264v258.752l-103.36-103.36-36.288 36.224 147.2 147.136z',
|
|
|
+ onclick: function () {
|
|
|
+ let filename =
|
|
|
+ 'Revenue Spent Details ' +
|
|
|
+ barName.value[0] +
|
|
|
+ '-' +
|
|
|
+ barName.value[barName.value.length - 1]
|
|
|
+ exportData({ filename: filename })
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
showTitle: false
|
|
|
}
|
|
|
@@ -323,7 +411,7 @@ const initChart = () => {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="com-container">
|
|
|
+ <div class="com-container" :class="{ 'dark-theme': themeStore.theme === 'dark' }">
|
|
|
<div ref="bar_ref" id="bar_chart" :style="props.barHeight"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -334,6 +422,30 @@ const initChart = () => {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
+ // 默认（亮色）
|
|
|
+ :deep(.echarts-toolbox) {
|
|
|
+ .icon {
|
|
|
+ path {
|
|
|
+ stroke: #2b2f36 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon:hover path {
|
|
|
+ stroke: #ff7500 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 暗黑模式
|
|
|
+ &.dark-theme {
|
|
|
+ :deep(.echarts-toolbox) {
|
|
|
+ .icon {
|
|
|
+ path {
|
|
|
+ stroke: #f0f1f3 !important; // 暗色下的默认色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon:hover path {
|
|
|
+ stroke: #ff7500 !important; // hover 保持橙色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
#bar_chart {
|
|
|
width: 100%;
|
