You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
17 KiB
431 lines
17 KiB
1 month ago
|
<template>
|
||
|
|
<div class="main-content12 expense-wrap">
|
||
|
|
<h3 class="pagetitle">收支统计</h3>
|
||
|
|
<div class="flex-common">
|
||
|
|
<div class="flex-between">
|
||
|
|
<el-tabs v-model="totalType" @tab-click="handleClick">
|
||
|
|
<el-tab-pane label="月统计列表" name="1"></el-tab-pane>
|
||
|
|
<el-tab-pane label="各站点统计列表" name="2"></el-tab-pane>
|
||
|
|
<el-tab-pane label="各服务统计列表" name="3"></el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="flex">
|
||
|
|
<GuipSelect label="服务类型" v-if="totalType == '3'" :options="[{label:'asd',value:'9'}]"></GuipSelect>
|
||
|
|
<GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="totalType == '1'" class="mt24 monthTotal-wrap flex">
|
||
|
|
<div class="total-item loss">
|
||
|
|
<div class="flex-between total-top">
|
||
|
|
<div class="top-left">
|
||
|
|
<img src="" alt="">
|
||
|
|
<b>月利润</b>
|
||
|
|
</div>
|
||
|
|
<span class="loss-tip">亏损</span>
|
||
|
|
</div>
|
||
|
|
<div class="price">
|
||
|
|
<b>8900</b>
|
||
|
|
元
|
||
|
|
</div>
|
||
|
|
<div class="gap24 flex-between total-bottom">
|
||
|
|
<div class="left column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>微信：200.89元</span>
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
<div class="right column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>支付宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="flex-between total-top">
|
||
|
|
<div class="top-left">
|
||
|
|
<img src="" alt="">
|
||
|
|
<b>月利润</b>
|
||
|
|
</div>
|
||
|
|
<span class="loss-tip">亏损</span>
|
||
|
|
</div>
|
||
|
|
<div class="price">
|
||
|
|
<b>8900</b>
|
||
|
|
元
|
||
|
|
</div>
|
||
|
|
<div class="gap24 flex-between total-bottom">
|
||
|
|
<div class="left column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>微信：200.89元</span>
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
<div class="right column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>支付宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="flex-between total-top">
|
||
|
|
<div class="top-left">
|
||
|
|
<img src="" alt="">
|
||
|
|
<b>月利润</b>
|
||
|
|
</div>
|
||
|
|
<span class="loss-tip">亏损</span>
|
||
|
|
</div>
|
||
|
|
<div class="price">
|
||
|
|
<b>8900</b>
|
||
|
|
元
|
||
|
|
</div>
|
||
|
|
<div class="gap24 flex-between total-bottom">
|
||
|
|
<div class="left column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>微信：200.89元</span>
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
<div class="right column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>支付宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="total-item">
|
||
|
|
<div class="flex-between total-top">
|
||
|
|
<div class="top-left">
|
||
|
|
<img src="" alt="">
|
||
|
|
<b>月利润</b>
|
||
|
|
</div>
|
||
|
|
<span class="loss-tip">亏损</span>
|
||
|
|
</div>
|
||
|
|
<div class="price">
|
||
|
|
<b>8900</b>
|
||
|
|
元
|
||
|
|
</div>
|
||
|
|
<div class="gap24 flex-between total-bottom">
|
||
|
|
<div class="left column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>微信：200.89元</span>
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
<div class="right column gap8">
|
||
|
|
<span>淘宝：200.89元</span>
|
||
|
|
<span>支付宝：200.89元</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-form class="mt24">
|
||
|
|
<GuipTable :tableData="monthTotalList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"
|
||
|
|
:show-summary="totalType === '1'"
|
||
|
|
:summary-method="totalType === '1' ? getSummaries : null">
|
||
|
|
<el-table-column prop="date" label="日期" min-width="130px" v-if="totalType == '1'"></el-table-column>
|
||
|
|
<el-table-column prop="date1" label="站点名称" min-width="130px" v-if="totalType == '2'"></el-table-column>
|
||
|
|
<el-table-column prop="date2" label="服务名称" min-width="130px" v-if="totalType == '3'"></el-table-column>
|
||
|
|
<el-table-column prop="profit" label="利润" min-width="110px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
{{ scope.row.profit }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="income" label="收入" min-width="110px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
{{ scope.row.income ? scope.row.income : '-' }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="expenditure" label="支出" min-width="110px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
{{ scope.row.expenditure ? scope.row.expenditure : '-' }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="orderVolume" label="单量" min-width="110px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
{{ scope.row.orderVolume ? scope.row.orderVolume : '-' }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="profit1" label="淘宝收/支/单量" min-width="160px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
{{ scope.row.profit ? scope.row.profit : '-' }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column v-if="totalType == '3'"
|
||
|
|
key="top" prop="top" label="站点排行（利润）" width="250">
|
||
|
|
<template v-slot="{ row }">
|
||
|
|
<span v-if="true" slot="reference" class="flex">
|
||
|
|
NO.1 万方本科版
|
||
|
|
<svg-icon :size="14" @click="handleClick2(row.id,1,0)"
|
||
|
|
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
|
||
|
|
:hoverColor="'#006AFF'" />
|
||
|
|
</span>
|
||
|
|
<span v-else slot="reference">暂无排行</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column v-if="totalType == '2'"
|
||
|
|
key="top" prop="top" label="服务排行（利润）" width="250">
|
||
|
|
<template v-slot="{ row }">
|
||
|
|
<span v-if="true" slot="reference" class="flex">
|
||
|
|
NO.1 万方本科版
|
||
|
|
<svg-icon :size="14" @click="handleClick2(row.id,1,0)"
|
||
|
|
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
|
||
|
|
:hoverColor="'#006AFF'" />
|
||
|
|
</span>
|
||
|
|
<span v-else slot="reference">暂无排行</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column label="操作" fixed="right" v-if="totalType != '1'">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<GuipButton type="text" class="mr-16" @click="handleClick2(scope.row.id,0,1)">详情</GuipButton>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import GuipButton from '@/components/GuipButton.vue';
|
||
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
||
|
|
import GuipTable from '@/components/GuipTable.vue';
|
||
|
|
import SvgIcon from '@/components/SvgIcon.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GuipTable,
|
||
|
|
GuipButton,
|
||
|
|
GuipSelect,
|
||
|
|
SvgIcon
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
total_type: {
|
||
|
|
type: String,
|
||
|
|
default: '1'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
totalType:'1',
|
||
|
|
tableLoading:false,
|
||
|
|
monthTotalList:[
|
||
|
|
{
|
||
|
|
date:'2025-08-26',
|
||
|
|
profit:19,
|
||
|
|
income:29,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
profit:-87.9,
|
||
|
|
date:'2025-08-26',
|
||
|
|
income:7.9,
|
||
|
|
expenditure:40,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
profit:619.46,
|
||
|
|
date:'2025-08-26',
|
||
|
|
income:79
|
||
|
|
},
|
||
|
|
],
|
||
|
|
top_list:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const {total_type} = this.$route.query
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.totalType = this.total_type;
|
||
|
|
if(total_type)this.totalType = total_type;
|
||
|
|
})
|
||
|
|
console.log(this.total_type,total_type,'total_type===');
|
||
|
|
// this.getExpenseList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick2(id,rankFlag,detailFlag){
|
||
|
|
this.$router.push(`/agent/serviceRank?totalType=${this.totalType}&rankFlag=${rankFlag}&detailFlag=${detailFlag}`)
|
||
|
|
},
|
||
|
|
handleClick(tab, event){
|
||
|
|
console.log(tab, event,'=====tab, event');
|
||
|
|
this.getExpenseList()
|
||
|
|
|
||
|
|
},
|
||
|
|
getSummaries(param) {
|
||
|
|
if(this.totalType != '1')return []
|
||
|
|
const { columns, data } = param;
|
||
|
|
const sums = [];
|
||
|
|
let obj = {
|
||
|
|
1:'profit',
|
||
|
|
2:'income',
|
||
|
|
3:'expenditure',
|
||
|
|
4:'orderVolume'
|
||
|
|
}
|
||
|
|
console.log(obj,'==');
|
||
|
|
columns.forEach((column, index) => {
|
||
|
|
// console.log(data,column, index,'====');
|
||
|
|
|
||
|
|
// const values = data.map(item => {
|
||
|
|
// item[column.property] = Number(item[column.property]) || 0
|
||
|
|
// return {...item}
|
||
|
|
// });
|
||
|
|
// console.log(values,'values===');
|
||
|
|
// for(let i = 1;i<4;i++){
|
||
|
|
// const incomeSum = this.getColumnReduce(data,obj[i]);
|
||
|
|
// sums[i] = incomeSum;
|
||
|
|
// console.log(sums[i],'sums[i]====sums[i]');
|
||
|
|
// }
|
||
|
|
|
||
|
|
const numericColumns = ['profit', 'income', 'expenditure', 'orderVolume'];
|
||
|
|
if (numericColumns.includes(column.property)) {
|
||
|
|
const values = data.map(item => Number(item[column.property]) || 0);
|
||
|
|
if (!values.every(value => isNaN(value))) {
|
||
|
|
sums[index] = values.reduce((prev, curr) => {
|
||
|
|
const value = Number(curr);
|
||
|
|
return !isNaN(value) ? prev + value : prev;
|
||
|
|
}, 0);
|
||
|
|
// 添加单位
|
||
|
|
if (['profit', 'income', 'expenditure'].includes(column.property)) {
|
||
|
|
sums[index] = sums[index].toFixed(2) + ' 元';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
sums[index] = 'N/A';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
sums[index] = 'N/A';
|
||
|
|
}
|
||
|
|
if (index === 0) {
|
||
|
|
sums[index] = `2025年8月利润小计`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查字段是否存在或值为空
|
||
|
|
// if (!data[0]?.hasOwnProperty(column.property) ||
|
||
|
|
// data.some(item => item[column.property] === null || item[column.property] === '')) {
|
||
|
|
// sums[index] = 'N/A';
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
// 数值求和逻辑
|
||
|
|
// sums[index] = values.reduce((prev, curr) => prev + curr, 0);
|
||
|
|
});
|
||
|
|
return sums;
|
||
|
|
},
|
||
|
|
getColumnReduce(data,key){
|
||
|
|
const incomeSum = data.reduce((sum, item) => sum + Number(item[key]), 0);
|
||
|
|
return incomeSum.toFixed(2)
|
||
|
|
},
|
||
|
|
getExpenseList() {
|
||
|
|
// 具体接口要修改
|
||
|
|
|
||
|
|
// this.tableLoading = true
|
||
|
|
// try {
|
||
|
|
// const requestParams = {
|
||
|
|
// date:'2025-08',
|
||
|
|
// totalType:this.totalType
|
||
|
|
// }
|
||
|
|
// this.$http('POST', '/agentnew/ajax_get_check_order_list', requestParams).then(response => {
|
||
|
|
// this.tableLoading = false
|
||
|
|
// console.log(response,'====');
|
||
|
|
// // this.$nextTick(() => {
|
||
|
|
// // this.monthTotalList = response.data.list
|
||
|
|
// // })
|
||
|
|
// }).catch(error => {
|
||
|
|
// console.error(error, 'error')
|
||
|
|
// })
|
||
|
|
// } catch (error) {
|
||
|
|
// console.error('数据加载失败:', error)
|
||
|
|
// } finally {
|
||
|
|
// this.tableLoading = false
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
|
||
|
|
background-color: #E8F0FE; /* 背景色 */
|
||
|
|
color: #006AFF; /* 文字颜色 */
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loss-profit{
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
.expense-wrap{
|
||
|
|
.pagetitle {
|
||
|
|
text-align: left;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: normal;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
.monthTotal-wrap{
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 12px;
|
||
|
|
grid-template-columns: repeat(auto-fit, 287px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loss-tip{
|
||
|
|
width: 50px;
|
||
|
|
height: 24px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #FFF1F0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid #FFA39E;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 20px;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
.total-item{
|
||
|
|
padding: 14px 16px;
|
||
|
|
font-size: 12px;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
color: #23242B;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #F2F7FF;
|
||
|
|
.price{
|
||
|
|
text-align: left;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 15px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin: 14px 0;
|
||
|
|
b{
|
||
|
|
font-size: 22px;
|
||
|
|
line-height: 20px;
|
||
|
|
letter-spacing: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.total-bottom{
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.loss{
|
||
|
|
background: #FFF1F0;
|
||
|
|
.top-left b{
|
||
|
|
color: #FF4D4F;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.gain{
|
||
|
|
background: #EFFFE0;
|
||
|
|
.top-left b{
|
||
|
|
color: #00C261;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|