zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

收支统计渲染

zq-0828-newMenu
pengda 1 month ago
parent
d67a87dc9a
commit
1f0dfd0b00
4 changed files with 484 additions and 249 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/super/DateSelect.vue
  2. 13
      src/router/index.js
  3. 392
      src/views/agent/expenseStatistics.vue
  4. 296
      src/views/agent/statisticalDetails.vue

6
src/components/super/DateSelect.vue
View File

@ -11,7 +11,7 @@
</div>
<div class="controls">
<button v-if="!onlyYear" @click="toggleView('month')" :class="{ active: view !== 'year' }">月度</button>
<button @click="toggleView('year')" :class="{ active: view === 'year' }">年度</button>
<button v-if="!onlyMonth" @click="toggleView('year')" :class="{ active: view === 'year' }">年度</button>
</div>
</div>
@ -62,6 +62,10 @@
onlyYear:{
type:Boolean,
default:false
},
onlyMonth:{
type:Boolean,
default:false
}
},
data() {

13
src/router/index.js
View File

@ -10,7 +10,7 @@ const whiteSecondSider = [
const blackSliderList = [
'/franchise', '/agreement', '/customizeDoc', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
'/agent/domainList','/agent/siteAddChooseService'
, '/agent/noticeList'
, '/agent/noticeList' , '/agent/statisticalDetails', '/agent/siteRank', '/agent/serviceRank'
];
// 一级路由
let first_child_router = []
@ -326,7 +326,6 @@ const routes = [{
name: '收支统计',
component: () => import( /* webpackChunkName: "expenseStatistics" */ '../views/agent/expenseStatistics.vue'),
meta: {
title:'各站点统计列表',
hideBreadcrumb: true // 一级页面不显示面包屑
}
},
@ -342,16 +341,22 @@ const routes = [{
path: '/agent/siteRank',
name: '站点排行',
component: () => import( /* webpackChunkName: "statisticalDetails" */ '../views/agent/statisticalDetails.vue'),
props: {
rankFlag: 'site'
},
meta: {
breadcrumbParent: '各站点统计列表' // 手动指定父级
breadcrumbParent: '收支统计' // 手动指定父级
}
},
{
path: '/agent/serviceRank',
name: '服务排行',
component: () => import( /* webpackChunkName: "statisticalDetails" */ '../views/agent/statisticalDetails.vue'),
props: {
rankFlag: 'chktype'
},
meta: {
breadcrumbParent: '各站点统计列表' // 手动指定父级
breadcrumbParent: '收支统计' // 手动指定父级
}
},

392
src/views/agent/expenseStatistics.vue
View File

@ -5,127 +5,138 @@
<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 v-if="siteNum>1" 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>
<!-- <GuipSelect label="服务类型" v-if="totalType == '3'" :options="[{label:'asd',value:'9'}]"></GuipSelect>-->
<!-- <GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>-->
<CustomDropdown ref="dropdownRef" :placeholder="date" width="280px">
<DateSelect slot="normal" view="month" :onlyMonth="true" @change="handleDateChange"/>
</CustomDropdown>
</div>
</div>
<div v-if="totalType == '1'" class="mt24 monthTotal-wrap flex">
<div class="total-item loss">
<div v-if="totalType == '1' && Object.keys(monthTotal).length>0" class="mt24 monthTotal-wrap flex">
<div class="total-item" :class="monthTotal.profit<0?'loss':''">
<div class="flex-between total-top">
<div class="top-left">
<img src="" alt="">
<b>月利润</b>
</div>
<span class="loss-tip">亏损</span>
<span v-if="monthTotal.profit<0" class="loss-tip">亏损</span>
</div>
<div class="price">
<b>8900</b>
元
<b>{{monthTotal.profit}}</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>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span>
</template>
</div>
<div class="right column gap8">
<span>淘宝：200.89元</span>
<span>支付宝：200.89元</span>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].profit }}元</span>
</template>
</div>
</div>
</div>
<div class="total-item">
<div class="flex-between total-top">
<div class="top-left">
<img src="" alt="">
<b>月利润</b>
<b>月收入</b>
</div>
<span class="loss-tip">亏损</span>
<span class="loss-tip-empty"></span>
</div>
<div class="price">
<b>8900</b>
元
<b>{{this.monthTotal.income}}</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>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span>
</template>
</div>
<div class="right column gap8">
<span>淘宝：200.89元</span>
<span>支付宝：200.89元</span>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].income }}元</span>
</template>
</div>
</div>
</div>
<div class="total-item">
<div class="flex-between total-top">
<div class="top-left">
<img src="" alt="">
<b>月利润</b>
<b>月支出</b>
</div>
<span class="loss-tip">亏损</span>
<span class="loss-tip-empty"></span>
</div>
<div class="price">
<b>8900</b>
元
<b>{{this.monthTotal.cost}}</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>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span>
</template>
</div>
<div class="right column gap8">
<span>淘宝：200.89元</span>
<span>支付宝：200.89元</span>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].cost }}元</span>
</template>
</div>
</div>
</div>
<div class="total-item">
<div class="flex-between total-top">
<div class="top-left">
<img src="" alt="">
<b>月利润</b>
<b>月单量</b>
</div>
<span class="loss-tip">亏损</span>
<span class="loss-tip-empty"></span>
</div>
<div class="price">
<b>8900</b>
元
<b>{{this.monthTotal.check_num}}</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>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 1" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span>
</template>
</div>
<div class="right column gap8">
<span>淘宝：200.89元</span>
<span>支付宝：200.89元</span>
<template v-for="(col, index) in payList">
<span v-if="index % 2 === 0" :key="index">{{ col.name }}：{{ monthTotal.pay_type[col.id].check_num }}单</span>
</template>
</div>
</div>
</div>
</div>
<el-form class="mt24">
<GuipTable :tableData="monthTotalList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"
<GuipTable :tableData="monthList" :key="tableKey" 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="date1" label="站点名称" min-width="130px" v-if="totalType == '2'">
<template slot-scope="scope">
<div class="flex">
{{ nameList[scope.row.id] }}
</div>
</template>
</el-table-column>
<el-table-column prop="date2" label="服务名称" min-width="130px" v-if="totalType == '3'">
<template slot-scope="scope">
<div class="flex">
{{ nameList[scope.row.id] }}
</div>
</template>
</el-table-column>
<el-table-column prop="profit" label="利润" min-width="110px">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit }}
{{ scope.row.profit ? scope.row.profit : '-' }}
</div>
</template>
</el-table-column>
@ -139,43 +150,48 @@
<el-table-column prop="expenditure" label="支出" min-width="110px">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.expenditure ? scope.row.expenditure : '-' }}
{{ scope.row.cost ? scope.row.cost : '-' }}
</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 : '-' }}
{{ scope.row.check_num ? scope.row.check_num : '-' }}
</div>
</template>
</el-table-column>
<el-table-column prop="profit1" label="淘宝收/支/单量" min-width="160px">
<el-table-column v-for="(col, index) in payList" :key="index" :label="col.name+'收/支/单量'" min-width="160px">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit ? scope.row.profit : '-' }}
<div class="flex" v-if="scope.row.pay_type[col.id]">
{{ scope.row.pay_type[col.id].income }}/
{{ scope.row.pay_type[col.id].cost }}/
{{ scope.row.pay_type[col.id].check_num }}
</div>
<div v-else>-</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)"
key="top1" prop="top1" label="站点排行（利润）" width="250">
<template slot-scope="scope">
<span v-if="topList[scope.row.id]" slot="reference" class="flex">
NO.1 {{topList[scope.row.id]}}
<svg-icon :size="14" @click="handleClicksiteRank(scope.row.id)"
: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)"
key="top2" prop="top2" label="服务排行（利润）" width="250">
<template slot-scope="scope">
<span v-if="topList[scope.row.id]" slot="reference" class="flex">
NO.1 {{topList[scope.row.id]}}
<svg-icon :size="14" @click="handleClickserviceRank(scope.row.id)"
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</span>
@ -185,7 +201,7 @@
<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>
<GuipButton type="text" class="mr-16" @click="handleClickDetail(scope.row.id)">详情</GuipButton>
</template>
</el-table-column>
</GuipTable>
@ -195,15 +211,18 @@
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';
import GuipSelect from '@/components/GuipSelect.vue';
// import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import DateSelect from "@/components/super/DateSelect.vue";
import CustomDropdown from "@/components/CustomDropdown.vue";
export default {
components: {
CustomDropdown, DateSelect,
GuipTable,
GuipButton,
GuipSelect,
// GuipSelect,
SvgIcon
},
props: {
@ -215,131 +234,158 @@ export default {
data() {
return {
totalType:'1',
date: this.getNow(),
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:[]
siteNum: 1,
tableKey: '',
monthList:[],
monthTotal:[],
payList:[],
nameList:[],
topList:[],
}
},
mounted() {
const {total_type} = this.$route.query
const {total_type, date} = this.$route.query
this.$nextTick(()=>{
this.totalType = this.total_type;
if(total_type)this.totalType = total_type;
if(date) this.date = date;
this.getSiteNum()
this.handleClick()
})
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}`)
getNow() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
return `${year}-${month}`
},
getDate(dateStr) {
const date = new Date(dateStr);
const year = date.getFullYear(); // 2025
const month = date.getMonth() + 1; // 3 (表示3月)
return `${year}-${month}`
},
handleClick(tab, event){
console.log(tab, event,'=====tab, event');
this.getExpenseList()
handleDateChange(date) {
this.date = this.getDate(date)
localStorage.setItem('date', JSON.stringify(date))
this.$refs.dropdownRef.closeDropdown();
this.handleClick()
},
handleClickDetail(id){
if(this.totalType == 2) this.$router.push(`/agent/statisticalDetails?uid=${id}&total_type=${this.totalType}&date=${this.date}`)
if(this.totalType == 3) this.$router.push(`/agent/statisticalDetails?chktype=${id}&total_type=${this.totalType}&date=${this.date}`)
},
handleClicksiteRank(id){
this.$router.push(`/agent/siteRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
},
getSummaries(param) {
handleClickserviceRank(id){
this.$router.push(`/agent/serviceRank?id=${id}&total_type=${this.totalType}&date=`+this.date)
},
handleClick(){
this.monthList = []
this.payList = []
this.monthTotal = []
this.nameList = []
this.topList = []
this.tableKey = Math.random();
if(this.totalType == 1) this.getDayStats()
if(this.totalType == 2) this.getSiteStats()
if(this.totalType == 3) this.getChktypeStats()
},
getSummaries() {
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]');
// }
let index = 0
sums[index] = `小计`
sums[++index] = this.monthTotal.profit
sums[++index] = this.monthTotal.income
sums[++index] = this.monthTotal.cost
sums[++index] = this.monthTotal.check_num
this.payList.forEach(column =>{
sums[++index] = this.monthTotal.pay_type[column.id].income + '/' + this.monthTotal.pay_type[column.id].cost + '/' + this.monthTotal.pay_type[column.id].check_num
})
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';
return sums;
},
getSiteNum() {
try {
this.$http('POST', '/agentnew/ajax_get_agent_sitenum', {date: this.date}).then(response => {
this.$nextTick(() => {
this.siteNum = response.data
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
}
if (index === 0) {
sums[index] = `2025年8月利润小计`;
},
getDayStats() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_day_stats', {date: this.date}).then(response => {
this.$nextTick(() => {
this.monthList = response.data.list
this.payList = response.data.pay_list
this.monthTotal = response.data.total
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
// 检查字段是否存在或值为空
// 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)
getSiteStats() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_site_stats', {date: this.date}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
this.monthList = response.data.list
this.payList = response.data.pay_list
this.monthTotal = response.data.total
this.nameList = response.data.name_list
this.topList = response.data.top_list
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
},
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
// }
getChktypeStats() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_chktype_stats', {date: this.date}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
this.monthList = response.data.list
this.payList = response.data.pay_list
this.monthTotal = response.data.total
this.nameList = response.data.name_list
this.topList = response.data.top_list
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
},
}
}
@ -389,6 +435,11 @@ export default {
letter-spacing: 0.08em;
color: #FF4D4F;
}
.loss-tip-empty{
width: 50px;
height: 24px;
display: flex;
}
.total-item{
padding: 14px 16px;
font-size: 12px;
@ -397,6 +448,7 @@ export default {
box-sizing: border-box;
border-radius: 4px;
background: #F2F7FF;
min-height: 153px;
.price{
text-align: left;
font-size: 12px;

296
src/views/agent/statisticalDetails.vue
View File

@ -1,124 +1,295 @@
<template>
<div class="main-content12 expense-wrap">
<div class="flex-common">
<el-form>
<div class="flex-between mb24">
<div class=" flex gap12">
<b>{{ }}turnitin中文站月详情</b>
<div class="flex gap12">
<span :class="['ver-anchor-point',]" v-for="item in serviceRanking" :key="item">{{ item }}</span>
<b>{{ name }} 月详情</b>
<div class="flex gap12" v-if="id">
<span @click="sort(index)" :class="sortIndex === index ? ['ver-anchor-point','ver-anchor-point-active'] : ['ver-anchor-point']" v-for="(item, index) in serviceRanking" :key="item">{{ item }}</span>
</div>
</div>
<GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>
<CustomDropdown ref="dropdownRef" :placeholder="date" width="280px">
<DateSelect slot="normal" view="month" v-model="date" :onlyMonth="true" @change="handleDateChange"/>
</CustomDropdown>
</div>
<el-form>
<!-- show-summary -->
<GuipTable :tableData="monthTotalList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
<el-table-column prop="sort" label="排行" min-width="130px" v-if="rankFlag == 1"></el-table-column>
<el-table-column prop="date" label="日期" min-width="130px" v-if="detailFlag ==1"></el-table-column>
<el-table-column prop="date" label="站点排行" min-width="130px" v-if="totalType == '3' && detailFlag != 1"></el-table-column>
<el-table-column prop="date" label="服务排行" min-width="130px" v-if="totalType == '2' && detailFlag != 1"></el-table-column>
<el-table-column prop="profit" label="利润" min-width="110px">
<GuipTable :tableData="monthList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1"
:show-summary="true" :summary-method="getSummaries" @sort-change="sortChange">
<el-table-column prop="date" label="日期" v-if="!id"></el-table-column>
<template v-else>
<el-table-column type="index" label="排行" width="80px"></el-table-column>
<el-table-column prop="date2" label="服务排行" v-if="rankFlag === 'chktype'">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit }}
{{ nameList[scope.row.id] }}
</div>
</template>
</el-table-column>
<el-table-column prop="income" label="收入" min-width="110px">
<el-table-column prop="date1" label="站点排行" v-else>
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit ? scope.row.profit : '-' }}
{{ nameList[scope.row.id] }}
</div>
</template>
</el-table-column>
<el-table-column prop="expenditure" label="支出" min-width="110px">
</template>
<el-table-column prop="1" label="利润" :sortable="sortIndex === '1' ? 'custom' : false">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit ? scope.row.profit : '-' }}
</div>
</template>
</el-table-column>
<el-table-column prop="orderVolume" label="单量" min-width="110px">
<el-table-column prop="2" label="收入" :sortable="sortIndex === '2' ? 'custom' : false">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit ? scope.row.profit : '-' }}
{{ scope.row.income ? scope.row.income : '-' }}
</div>
</template>
</el-table-column>
<!-- 这个可能进行循环渲染 -->
<el-table-column prop="profit" label="淘宝收/支/单量" v-if="detailFlag" min-width="160px">
<el-table-column prop="3" label="支出" :sortable="sortIndex === '3' ? 'custom' : false">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.profit ? scope.row.profit : '-' }}
{{ scope.row.cost ? scope.row.cost : '-' }}
</div>
</template>
</el-table-column>
<el-table-column prop="4" label="单量" :sortable="sortIndex === '4' ? 'custom' : false">
<template slot-scope="scope">
<div class="flex">
{{ scope.row.check_num ? scope.row.check_num : '-' }}
</div>
</template>
</el-table-column>
<el-table-column v-for="(col, index) in payList" :key="index" :label="col.name+'收/支/单量'">
<template slot-scope="scope">
<div class="flex" v-if="scope.row.pay_type[col.id]">
{{ scope.row.pay_type[col.id].income }}/
{{ scope.row.pay_type[col.id].cost }}/
{{ scope.row.pay_type[col.id].check_num }}
</div>
<div v-else>-</div>
</template>
</el-table-column>
</GuipTable>
</el-form>
</div>
</div>
</template>
<script>
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import DateSelect from "@/components/super/DateSelect.vue";
import CustomDropdown from "@/components/CustomDropdown.vue";
export default {
components: {
CustomDropdown, DateSelect,
GuipTable,
GuipSelect,
},
props: {
rankFlag: {
type: String,
default: ''
},
},
data() {
return {
totalType:'1',
detailFlag:true,//是否是详情
rankFlag:false,//是否展示排行
date:'',
uid:0,
chktype:0,
id: 0,
name:'',
monthList:[],
monthTotal:[],
payList:[],
nameList:[],
tableLoading:false,
monthTotalList:[
{'sort':1,'profit':20,income:304,expenditure:280,orderVolume:47},
{'sort':2,'profit':30,income:127,expenditure:89,orderVolume:36},
],
tableKey: '',
sortIndex:'1',
sortOrder:'asc',
serviceRanking:{
'1':'利润排行',
'2':'收入排行',
'3':'支出排行',
'4':'检测量排行',
}
},
sortField: {
'1':'profit',
'2':'income',
'3':'cost',
'4':'check_num',
},
}
},
mounted() {
const {totalType,detailFlag,rankFlag} = this.$route.query
this.totalType = totalType;
this.detailFlag = detailFlag;
this.rankFlag = rankFlag;
this.getDetailList()
if(!this.$route.query.date) {
this.$message.error('非法请求');
this.$router.push('/agent/expenseStatistics')
}
this.date = this.$route.query.date
if(this.$route.query.id) this.id = this.$route.query.id
if(this.$route.query.uid) this.uid = this.$route.query.uid
if(this.$route.query.chktype) this.chktype = this.$route.query.chktype
this.getStats()
},
methods: {
getDetailList() {
console.log('调用了---');
// 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(() => {
// // if (this.intervalId && response.data.maxid && this.orderListPrevMaxId && response.data.maxid > this.orderListPrevMaxId) {
// // console.log('有新订单了');
// // this.playSound();
// // }
// // this.monthTotalList = response.data.list
// // })
// }).catch(error => {
// console.error(error, 'error')
// })
// } catch (error) {
// console.error('数据加载失败:', error)
// } finally {
// this.tableLoading = false
// }
getDate(dateStr) {
const date = new Date(dateStr);
const year = date.getFullYear(); // 2025
const month = date.getMonth() + 1; // 3 (表示3月)
return `${year}-${month}`
},
handleDateChange(date) {
this.date = this.getDate(date)
localStorage.setItem('date', JSON.stringify(date))
this.$refs.dropdownRef.closeDropdown();
this.getStats()
},
sort(index){
this.sortIndex = index
this.sortList()
},
sortChange({prop, order}){
this.sortIndex = prop
this.sortOrder = 'asc'
if (order === 'descending') this.sortOrder = 'desc'
this.sortList()
},
sortList(){
const field = this.sortField[this.sortIndex]
return this.monthList.sort((a, b) => {
const valA = a[field];
const valB = b[field];
// 处理字符串和数字类型的比较
if (typeof valA === 'string') {
return this.sortOrder === 'asc'
? valA.localeCompare(valB)
: valB.localeCompare(valA);
} else {
return this.sortOrder === 'asc'
? valA - valB
: valB - valA;
}
});
},
getStats(){
this.monthList=[]
this.monthTotal=[]
this.payList=[]
this.nameList=[]
this.tableKey = Math.random();
if(this.id){
if(this.rankFlag == 'chktype') {
this.getChktypeStatsRank()
return true
}
this.getSiteStatsRank()
return true
}
this.getDayStats();
},
getSummaries() {
const sums = [];
let index = -1
if(this.id) sums[++index] = '-'
sums[++index] = `小计`
sums[++index] = this.monthTotal.profit
sums[++index] = this.monthTotal.income
sums[++index] = this.monthTotal.cost
sums[++index] = this.monthTotal.check_num
this.payList.forEach(column =>{
sums[++index] = this.monthTotal.pay_type[column.id].income + '/' + this.monthTotal.pay_type[column.id].cost + '/' + this.monthTotal.pay_type[column.id].check_num
})
return sums;
},
getDayStats() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_day_stats', {
date: this.date,
uid: this.uid,
type: this.chktype,
}).then(response => {
this.$nextTick(() => {
this.name = response.data.name
this.monthList = response.data.list
this.payList = response.data.pay_list
this.monthTotal = response.data.total
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
},
getSiteStatsRank() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_site_stats_rank', {
date: this.date,
type: this.id,
}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
this.name = response.data.name
this.monthList = response.data.list
this.monthTotal = response.data.total
this.nameList = response.data.name_list
this.sortList()
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
},
getChktypeStatsRank() {
this.tableLoading = true
try {
this.$http('POST', '/agentnew/ajax_get_chktype_stats_rank', {
date: this.date,
uid: this.id,
}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
this.name = response.data.name
this.monthList = response.data.list
this.monthTotal = response.data.total
this.nameList = response.data.name_list
this.sortList()
})
}).catch(error => {
console.error(error, 'error')
})
} catch (error) {
console.error('数据加载失败:', error)
} finally {
this.tableLoading = false
}
},
}
}
@ -151,6 +322,9 @@ export default {
color: #006AFF;
background: #F2F3F5;
}
.ver-anchor-point-active{
color: #006AFF;
}
.pagetitle {
text-align: left;
font-size: 16px;

Write Preview
Loading…
Cancel
Save