906 lines
33 KiB
Vue
906 lines
33 KiB
Vue
<template>
|
||
<ai-list class="list" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||
<ai-title
|
||
slot="title"
|
||
title="商家账单统计"
|
||
isShowBottomBorder>
|
||
<template #rightBtn>
|
||
<div class="title-right">
|
||
<div>
|
||
<label style="width:90px">时间范围：</label>
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
:default-time="['00:00:00', '23:59:59']">
|
||
</el-date-picker>
|
||
</div>
|
||
<el-button type="button" :class="'el-button el-button--primary'" @click="beginStat">开始统计</el-button>
|
||
<el-button type="primary" icon="el-icon-download" @click="downloadPicture">下载图片</el-button>
|
||
<json-excel
|
||
:data="skcList"
|
||
:fields="skcJsonFields"
|
||
name="SKC账单数据.xls"
|
||
worksheet="SKC账单数据">
|
||
<el-button type="primary" icon="el-icon-download">下载SKC统计</el-button>
|
||
</json-excel>
|
||
<json-excel
|
||
:data="skuList"
|
||
:fields="skuJsonFields"
|
||
name="SKC账单数据.xls"
|
||
worksheet="SKC账单数据">
|
||
<el-button type="primary" icon="el-icon-download">下载SKU统计</el-button>
|
||
</json-excel>
|
||
</div>
|
||
</template>
|
||
</ai-title>
|
||
<template slot="content">
|
||
<div id="app-content">
|
||
<ai-card title="数据概览" style="padding-bottom: 40px;">
|
||
<div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="5">
|
||
<div>
|
||
<el-statistic
|
||
title="销售额/单数"
|
||
>
|
||
<template slot="formatter">
|
||
{{ saleAmount }}/{{ saleCount }}
|
||
</template>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>
|
||
<el-statistic
|
||
group-separator=","
|
||
:precision="2"
|
||
:value="deductionAmount"
|
||
title="扣款"
|
||
>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>
|
||
<el-statistic
|
||
group-separator=","
|
||
:precision="2"
|
||
:value="costAmount"
|
||
title="成本"
|
||
></el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<div>
|
||
<el-statistic
|
||
group-separator=","
|
||
:precision="2"
|
||
:value="profitAmount"
|
||
title="利润"
|
||
></el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div>
|
||
<el-statistic
|
||
group-separator=","
|
||
:precision="2"
|
||
:value="profitPercent"
|
||
title="利润率"
|
||
>
|
||
<template slot="suffix">%</template>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</ai-card>
|
||
<ai-card title="趋势分析" style="padding-bottom: 40px;">
|
||
<div>
|
||
<div id="chart1"></div>
|
||
</div>
|
||
</ai-card>
|
||
<div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<ai-card title="SKC销售额TOP10排行">
|
||
<ai-table
|
||
ref="table0"
|
||
:isShowPagination="false"
|
||
:tableData="topSaleAmountSkcList"
|
||
:col-configs="skcColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<ai-card title="SKC利润TOP10排行">
|
||
<ai-table
|
||
ref="table1"
|
||
:isShowPagination="false"
|
||
:tableData="topSaleProfitSkcList"
|
||
:col-configs="skcColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<ai-card title="SKC利润率TOP10排行">
|
||
<ai-table
|
||
ref="table2"
|
||
:isShowPagination="false"
|
||
:tableData="topProfitPercentSkcList"
|
||
:col-configs="skcColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<ai-card title="SKU销售额TOP10排行">
|
||
<ai-table
|
||
ref="table3"
|
||
:isShowPagination="false"
|
||
:tableData="topSaleAmountSkuList"
|
||
:col-configs="skuColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<ai-card title="SKU利润TOP10排行">
|
||
<ai-table
|
||
ref="table4"
|
||
:isShowPagination="false"
|
||
:tableData="topSaleProfitSkuList"
|
||
:col-configs="skuColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<ai-card title="SKU利润率TOP10排行">
|
||
<ai-table
|
||
ref="table5"
|
||
:isShowPagination="false"
|
||
:tableData="topProfitPercentSkuList"
|
||
:col-configs="skuColConfigs"
|
||
style="margin-top: 8px;">
|
||
<el-table-column slot="amount" label="销售额">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitAmount" label="利润">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.profitAmount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="profitPercent" label="利润率">
|
||
<template slot-scope="scope">
|
||
<div style="color: red">{{ scope.row.profitPercent + '%' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</ai-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
</ai-list>
|
||
</template>
|
||
|
||
<script>
|
||
import {sendGeiwohuoAPIMessage} from '@/api/chromeApi'
|
||
import JsonExcel from 'vue-json-excel'
|
||
import { Message } from 'element-ui'
|
||
import html2canvas from 'html2canvas'
|
||
import { DualAxes } from '@antv/g2plot'
|
||
|
||
export default {
|
||
name: 'ExportSaleStatShein',
|
||
|
||
data () {
|
||
return {
|
||
storeCode: '',
|
||
productList: [],
|
||
|
||
dateRange: [],
|
||
|
||
page: 1,
|
||
perPage: 100,
|
||
orderList: [],
|
||
saleAmount: 0.0,
|
||
saleCount: 0,
|
||
costAmount: 0.0,
|
||
profitAmount: 0.0,
|
||
profitPercent: 0.0,
|
||
deductionAmount: 0.0,
|
||
skcList: [],
|
||
skuList: [],
|
||
|
||
leftChartData: [],
|
||
rightChartData: [],
|
||
|
||
isLoading: false,
|
||
|
||
skcColConfigs: [
|
||
{ prop: 'skcCode', label: '货号', width: '180px' },
|
||
{ slot: 'amount', label: '销售额', align: 'center' },
|
||
{ prop: 'quantity', label: '单数', align: 'center' },
|
||
{ prop: 'cost', label: '成本', align: 'center'},
|
||
{ slot: 'profitAmount', label: '利润', align: 'center' },
|
||
{ slot: 'profitPercent', label: '利润率', align: 'center'},
|
||
],
|
||
skcJsonFields: {
|
||
"SKC": "skc",
|
||
"货号": "skcCode",
|
||
"销售额": "amount",
|
||
"单数": "quantity",
|
||
"成本": "cost",
|
||
"利润": "profitAmount",
|
||
"利润率": "profitPercent",
|
||
},
|
||
skuColConfigs: [
|
||
{ prop: 'skuCode', label: '属性集', width: '220px' },
|
||
{ slot: 'amount', label: '销售额', align: 'center' },
|
||
{ prop: 'quantity', label: '单数', align: 'center' },
|
||
{ prop: 'cost', label: '成本', align: 'center'},
|
||
{ slot: 'profitAmount', label: '利润', align: 'center' },
|
||
{ slot: 'profitPercent', label: '利润率', align: 'center'},
|
||
],
|
||
skuJsonFields: {
|
||
"SKC": "skc",
|
||
"SKU": "sku",
|
||
"属性集": "skuCode",
|
||
"销售额": "amount",
|
||
"单数": "quantity",
|
||
"成本": "cost",
|
||
"利润": "profitAmount",
|
||
"利润率": "profitPercent",
|
||
},
|
||
|
||
chartObj: null
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
topSaleAmountSkcList() {
|
||
const list = Object.assign([], this.skcList)
|
||
list.sort((a, b) => b.amount - a.amount)
|
||
return list.slice(0, 10)
|
||
},
|
||
topSaleProfitSkcList() {
|
||
const list = Object.assign([], this.skcList)
|
||
list.sort((a, b) => b.profitAmount - a.profitAmount)
|
||
return list.slice(0, 10)
|
||
},
|
||
topProfitPercentSkcList() {
|
||
const list = Object.assign([], this.skcList)
|
||
list.sort((a, b) => b.profitPercent - a.profitPercent)
|
||
return list.slice(0, 10)
|
||
},
|
||
topSaleAmountSkuList() {
|
||
const list = Object.assign([], this.skuList)
|
||
list.sort((a, b) => b.amount - a.amount)
|
||
return list.slice(0, 10)
|
||
},
|
||
topSaleProfitSkuList() {
|
||
const list = Object.assign([], this.skuList)
|
||
list.sort((a, b) => b.profitAmount - a.profitAmount)
|
||
return list.slice(0, 10)
|
||
},
|
||
topProfitPercentSkuList() {
|
||
const list = Object.assign([], this.skuList)
|
||
list.sort((a, b) => b.profitPercent - a.profitPercent)
|
||
return list.slice(0, 10)
|
||
}
|
||
},
|
||
|
||
components: {
|
||
JsonExcel
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
this.initChart1()
|
||
})
|
||
},
|
||
created () {
|
||
this.$http.post('/api/malluser/info').then(res => {
|
||
if (res.code == 0) {
|
||
this.$store.commit('setUserInfo', res.data)
|
||
if (res.data.flag != 1) {
|
||
Message.error('您的账号未激活或已失效，请激活后使用')
|
||
this.$store.commit('setActiveDlgShow', true)
|
||
return;
|
||
}
|
||
this.getStoreCode()
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
initChart1 () {
|
||
/*const data = [
|
||
{ year: '1991', value: 3, count: 11, type: '销售额' },
|
||
{ year: '1992', value: 4, count: 143, type: '销售额' },
|
||
{ year: '1993', value: 3.5, count: 143, type: '销售额' },
|
||
{ year: '1991', value: 5, count: 11, type: '利润' },
|
||
{ year: '1992', value: 4.9, count: 17, type: '利润' },
|
||
{ year: '1993', value: 6, count: 143, type: '利润' }
|
||
]
|
||
|
||
const data1 = [
|
||
{ year: '1991', value1: 30.1, count: 11, type: '利润率' },
|
||
{ year: '1992', value1: 32.1, count: 143, type: '利润率' },
|
||
{ year: '1993', value1: 44.1, count: 143, type: '利润率' }
|
||
]*/
|
||
|
||
this.chartObj = new DualAxes('chart1', {
|
||
data: [this.leftChartData, this.rightChartData],
|
||
xField: 'day',
|
||
yField: ['value', 'value1'],
|
||
yAxis: {
|
||
value: {
|
||
title: {
|
||
text: '金额'
|
||
},
|
||
label: {
|
||
formatter: (value) => {
|
||
return `${value}元`;
|
||
}
|
||
}
|
||
},
|
||
value1: {
|
||
max: 100,
|
||
title: {
|
||
text: '利润率'
|
||
},
|
||
label: {
|
||
formatter: (value) => {
|
||
return `${value}%`;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
geometryOptions: [
|
||
{
|
||
geometry: 'line',
|
||
color: ['#FF9A49', '#7A8AA1', '#1EEB73', '#C947AE' ],
|
||
isGroup: true,
|
||
smooth: true, // 是否平滑
|
||
seriesField: 'type'
|
||
},
|
||
{
|
||
geometry: 'line',
|
||
color: ['red' ],
|
||
lineStyle: {
|
||
fill: 'red',
|
||
fillOpacity: 0.5,
|
||
stroke: 'red',
|
||
lineWidth: 4,
|
||
strokeOpacity: 0.7,
|
||
shadowColor: 'black',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 5,
|
||
shadowOffsetY: 5,
|
||
cursor: 'pointer'
|
||
},
|
||
isStack: true,
|
||
smooth: true, // 是否平滑
|
||
seriesField: 'type', // 指定使用第二个Y轴字段
|
||
}],
|
||
});
|
||
|
||
this.chartObj.render();
|
||
},
|
||
async beginStat() {
|
||
if (!this.dateRange) {
|
||
Message.error("请选择统计时间范围")
|
||
return
|
||
}
|
||
this.page = 1
|
||
this.isLoading = true
|
||
this.saleAmount = 0.0
|
||
this.saleCount = 0
|
||
this.costAmount = 0.0
|
||
this.profitAmount = 0.0
|
||
this.profitPercent = 0.0
|
||
this.deductionAmount = 0.0
|
||
this.orderList = []
|
||
this.skcList = []
|
||
this.skuList = []
|
||
this.leftChartData = []
|
||
this.rightChartData = []
|
||
this.chartObj.changeData([this.leftChartData, this.rightChartData])
|
||
this.getOrderList()
|
||
},
|
||
async getStoreCode() {
|
||
let res = await sendGeiwohuoAPIMessage({
|
||
url: 'sso-prefix/auth/getUser?uuid=' + Date.now(),
|
||
method: 'GET'
|
||
})
|
||
if (res.code == '0' && res.msg == "OK") {
|
||
this.storeCode = res.info.merchantCode
|
||
this.getPorductList()
|
||
} else if (res.code == 100004 || res.code == 20302) {
|
||
this.isLoading = false
|
||
this.$store.commit("setSheinAlertShow", true)
|
||
}
|
||
},
|
||
getPorductList() {
|
||
this.$http.post(`/api/skuCost/listAll`, null, {
|
||
params: {
|
||
mallId: this.storeCode
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.productList = res.data
|
||
}
|
||
})
|
||
},
|
||
async getOrderList() {
|
||
let res = await sendGeiwohuoAPIMessage({
|
||
url: 'gsfs/finance/reportOrder/dualMode/reportOrderList',
|
||
method: 'POST',
|
||
data: {
|
||
"page": this.page,
|
||
"perPage": this.perPage,
|
||
"addTimeStart": this.dateRange[0],
|
||
"addTimeEnd": this.dateRange[1]
|
||
}
|
||
})
|
||
if (res.code == '0' && res.msg == "OK") {
|
||
for (let i = 0; i < res.info.data.length; i++) {
|
||
this.orderList.push(res.info.data[i])
|
||
}
|
||
if (res.info.data.length == this.perPage && (res.info.meta.count > this.perPage*this.page)) {
|
||
this.page++
|
||
await this.sleepSync(200)
|
||
await this.getOrderList()
|
||
} else {
|
||
this.page = 1
|
||
await this.getDetail()
|
||
// 计算SKC维度利润
|
||
for (let i = 0; i < this.skcList.length; i++) {
|
||
this.skcList[i].amount = Math.round(this.skcList[i].amount * 100)/100
|
||
this.skcList[i].cost = Math.round(this.skcList[i].cost * 100)/100
|
||
this.skcList[i].profitAmount = Math.round((this.skcList[i].amount - this.skcList[i].cost)*100)/100
|
||
this.skcList[i].profitPercent = Math.round((this.skcList[i].profitAmount / this.skcList[i].amount)*10000)/100
|
||
|
||
this.saleAmount += this.skcList[i].amount
|
||
this.costAmount += this.skcList[i].cost
|
||
this.saleCount += this.skcList[i].quantity
|
||
}
|
||
this.saleAmount = Math.round(this.saleAmount*100)/100
|
||
this.profitAmount = this.saleAmount - this.costAmount
|
||
for (let i = 0; i < this.orderList.length; i++) {
|
||
let item = this.orderList[i]
|
||
let saleAmount = 0
|
||
for (let j = 0; j < item.details.length; j++) {
|
||
// this.saleAmount -= (item.details[j].deduction.funds ? item.details[j].deduction.funds: 0)
|
||
this.deductionAmount += (item.details[j].deduction.funds ? item.details[j].deduction.funds: 0)
|
||
saleAmount += item.details[j].income
|
||
}
|
||
this.leftChartData.push({day: item.addTime, value: Math.round(saleAmount*100)/100, type: '销售额'})
|
||
}
|
||
this.profitPercent = Math.round((this.profitAmount / this.saleAmount)*10000)/100
|
||
|
||
// 计算SKU维度利润
|
||
for (let i = 0; i < this.skuList.length; i++) {
|
||
this.skuList[i].amount = Math.round(this.skuList[i].amount * 100)/100
|
||
this.skuList[i].cost = Math.round(this.skuList[i].cost * 100)/100
|
||
this.skuList[i].profitAmount = Math.round((this.skuList[i].amount - this.skuList[i].cost)*100)/100
|
||
this.skuList[i].profitPercent = Math.round(((this.skuList[i].profitAmount / this.skuList[i].amount)*10000))/100
|
||
}
|
||
|
||
// 计算每天利润和利润率
|
||
const tempData = Object.assign([], this.leftChartData)
|
||
for (let i = 0; i < this.orderList.length; i++) {
|
||
for (let j = 0; j < tempData.length; j++) {
|
||
if ((tempData[j].type == '销售额') && (tempData[j].day == this.orderList[i].addTime)) {
|
||
for (let m = 0; m < tempData.length; m++) {
|
||
if ((tempData[m].type == '成本') && (tempData[m].day == this.orderList[i].addTime)) {
|
||
this.leftChartData.push({
|
||
day: this.orderList[i].addTime,
|
||
value: Math.round((tempData[j].value - tempData[m].value)*100)/100,
|
||
type: '利润'
|
||
})
|
||
|
||
this.rightChartData.push({
|
||
day: this.orderList[i].addTime,
|
||
value1: Math.round(((tempData[j].value - tempData[m].value)/tempData[j].value)*10000)/100,
|
||
type: '利润率'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
console.log(this.leftChartData)
|
||
this.chartObj.changeData([this.leftChartData, this.rightChartData])
|
||
this.isLoading = false
|
||
}
|
||
} else if (res.code == 100004 || res.code == 20302) {
|
||
this.isLoading = false
|
||
this.$store.commit("setSheinAlertShow", true)
|
||
}
|
||
},
|
||
async getDetail() {
|
||
for (let i = 0; i < this.orderList.length; i++) {
|
||
let item = this.orderList[i]
|
||
for (let j = 0; j < item.details.length; j++) {
|
||
if (item.details[j].sourceSystem == "GSFS") {
|
||
let currentPage = 1
|
||
while(true) {
|
||
await this.sleepSync(200)
|
||
let res = await sendGeiwohuoAPIMessage({
|
||
url: 'gsfs/finance/reportOrder/dualMode/checkOrderList/item',
|
||
method: 'POST',
|
||
data: {
|
||
"page": currentPage,
|
||
"perPage": this.perPage,
|
||
"reportOrderNo": item.details[j].reportOrderNo,
|
||
"secondOrderTypes": [1,2,41,42]
|
||
}
|
||
})
|
||
if (res.code == '0' && res.msg == "OK") {
|
||
// calc
|
||
this.calculate(res.info.data, item.addTime)
|
||
if (res.info.data.length == this.perPage && (res.info.meta.count > this.perPage*currentPage)) {
|
||
currentPage ++
|
||
} else {
|
||
break
|
||
}
|
||
} else if (res.code == 100004 || res.code == 20302) {
|
||
this.isLoading = false
|
||
this.$store.commit("setSheinAlertShow", true)
|
||
}
|
||
}
|
||
} else if (item.details[j].sourceSystem == "PMS") {
|
||
let currentPage = 1
|
||
while(true) {
|
||
await this.sleepSync(200)
|
||
let res2 = await sendGeiwohuoAPIMessage({
|
||
url: 'gmpj/finance/incomeAndExpensesDetail',
|
||
isWWW: true,
|
||
method: 'POST',
|
||
data: {
|
||
"page": currentPage,
|
||
"perPage": this.perPage,
|
||
"reportOrderNo": item.details[j].reportOrderNo
|
||
}
|
||
})
|
||
|
||
if (res2.code == '0' && res2.msg == "OK") {
|
||
// calc
|
||
this.calculate(res2.info.checkDetailList, item.addTime)
|
||
if (res2.info.checkDetailList.length == this.perPage && (res2.info.count > this.perPage*currentPage)) {
|
||
currentPage ++
|
||
} else {
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
calculate(data, addTime) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
let exist = false
|
||
let cost = this.getCost(data[i].skuCode) * (data[i].goodsCount || data[i].quantity)
|
||
|
||
// 按SKC维度统计
|
||
for (let j = 0; j < this.skcList.length; j++) {
|
||
if (this.skcList[j].skc == (data[i].skc || data[i].skcName)) {
|
||
exist = true
|
||
if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
|
||
this.skcList[j].amount -= data[i].amount || data[i].income
|
||
} else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.skcList[j].quantity += data[i].goodsCount || data[i].quantity
|
||
this.skcList[j].amount += data[i].amount || data[i].income
|
||
this.skcList[j].cost += cost
|
||
}
|
||
break
|
||
}
|
||
}
|
||
if (!exist) {
|
||
if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
|
||
this.skcList.push({
|
||
skc: (data[i].skc || data[i].skcName),
|
||
skcCode: (data[i].goodsSn || data[i].supplierCode),
|
||
amount: -(data[i].amount || data[i].income),
|
||
quantity: 0,
|
||
cost: 0,
|
||
profitPercent: 0.0,
|
||
profitAmount: 0.0
|
||
})
|
||
} else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.skcList.push({
|
||
skc: (data[i].skc || data[i].skcName),
|
||
skcCode: (data[i].goodsSn || data[i].supplierCode),
|
||
amount: data[i].amount || data[i].income,
|
||
quantity: data[i].goodsCount || data[i].quantity,
|
||
cost: cost,
|
||
profitPercent: 0.0,
|
||
profitAmount: 0.0
|
||
})
|
||
}
|
||
}
|
||
|
||
// 按SKU维度统计
|
||
exist = false
|
||
for (let j = 0; j < this.skuList.length; j++) {
|
||
if (this.skuList[j].sku == data[i].skuCode) {
|
||
exist = true
|
||
if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
|
||
this.skuList[j].amount -= data[i].amount || data[i].income
|
||
} else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.skuList[j].quantity += data[i].goodsCount || data[i].quantity
|
||
this.skuList[j].amount += data[i].amount || data[i].income
|
||
this.skuList[j].cost += cost
|
||
}
|
||
break
|
||
}
|
||
}
|
||
if (!exist) {
|
||
if (data[i].incomeAndExpensesTypeName == '支出' || data[i].inAndOutName == '支出') {
|
||
this.skuList.push({
|
||
skc: (data[i].skc || data[i].skcName),
|
||
sku: data[i].skuCode,
|
||
skuCode: (data[i].goodsSn || data[i].supplierCode) + '/' + (data[i].suffix || data[i].suffixZh),
|
||
amount: -(data[i].amount || data[i].income),
|
||
quantity: 0,
|
||
cost: 0,
|
||
profitPercent: 0.0,
|
||
profitAmount: 0.0
|
||
})
|
||
} else if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.skuList.push({
|
||
skc: (data[i].skc || data[i].skcName),
|
||
sku: data[i].skuCode,
|
||
skuCode: (data[i].goodsSn || data[i].supplierCode) + '/' + (data[i].suffix || data[i].suffixZh),
|
||
amount: data[i].amount || data[i].income,
|
||
quantity: data[i].goodsCount || data[i].quantity,
|
||
cost: cost,
|
||
profitPercent: 0.0,
|
||
profitAmount: 0.0
|
||
})
|
||
}
|
||
}
|
||
|
||
// 计算每天的成本
|
||
exist = false
|
||
for (let x = 0; x < this.leftChartData.length; x++) {
|
||
if ((this.leftChartData[x].day == addTime) && (this.leftChartData[x].type == '成本')) {
|
||
exist = true
|
||
if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.leftChartData[x].value = Math.round((this.leftChartData[x].value + cost)*100)/100
|
||
}
|
||
break
|
||
}
|
||
}
|
||
if (!exist) {
|
||
if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.leftChartData.push({
|
||
day: addTime,
|
||
type: '成本',
|
||
value: cost
|
||
})
|
||
}
|
||
}
|
||
|
||
// 计算每天的单数
|
||
exist = false
|
||
for (let x = 0; x < this.leftChartData.length; x++) {
|
||
if ((this.leftChartData[x].day == addTime) && (this.leftChartData[x].type == '单数')) {
|
||
exist = true
|
||
if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.leftChartData[x].value += (data[i].goodsCount || data[i].quantity)
|
||
}
|
||
break
|
||
}
|
||
}
|
||
if (!exist) {
|
||
if (data[i].incomeAndExpensesTypeName == '收入' || data[i].inAndOutName == '收入') {
|
||
this.leftChartData.push({
|
||
day: addTime,
|
||
type: '单数',
|
||
value: (data[i].goodsCount || data[i].quantity)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
getCost(sku) {
|
||
for (let i = 0; i < this.productList.length; i++) {
|
||
if (sku == this.productList[i].sku) {
|
||
return this.productList[i].costPrice
|
||
}
|
||
}
|
||
return 0
|
||
},
|
||
sleepSync(milliseconds) {
|
||
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
||
},
|
||
async downloadPicture() {
|
||
try {
|
||
const element = document.getElementById('app-content');
|
||
const canvas = await html2canvas(element);
|
||
// 创建一个图片元素
|
||
const img = new Image();
|
||
img.src = canvas.toDataURL('image/png');
|
||
// 添加到body中以便下载
|
||
document.body.appendChild(img);
|
||
// 触发下载
|
||
const a = document.createElement('a');
|
||
a.style.display = 'none'
|
||
a.href = img.src;
|
||
a.download = '账单统计(希音).png';
|
||
a.click();
|
||
document.body.removeChild(img);
|
||
} catch (error) {
|
||
console.error('Error saving image:', error);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.list {
|
||
.title-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
& > div:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
::v-deep.ai-list {
|
||
.ai-list__content--right-wrapper {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
padding: 0!important;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
|
||
.item {
|
||
flex: 1;
|
||
margin-right: 20px;
|
||
padding: 16px 24px;
|
||
background: #FFF;
|
||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 4px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:nth-of-type(1) {
|
||
color: #2266ff;
|
||
}
|
||
|
||
&:nth-of-type(2) {
|
||
color: #f8b426;
|
||
}
|
||
&:nth-of-type(3) {
|
||
color: #21aa99;
|
||
}
|
||
&:nth-of-type(4) {
|
||
color: #F46;
|
||
}
|
||
&:nth-of-type(5) {
|
||
color: #11A265;
|
||
}
|
||
h2 {
|
||
margin-bottom: 30px;
|
||
font-size: 16px;
|
||
color: #999;
|
||
}
|
||
|
||
p {
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.like {
|
||
cursor: pointer;
|
||
font-size: 25px;
|
||
display: inline-block;
|
||
}
|
||
</style>
|