|
@@ -61,34 +61,19 @@
|
|
|
<a-select-option value="month">按月查询</a-select-option>
|
|
|
<a-select-option value="day">按日查询</a-select-option> </a-select
|
|
|
>
|
|
|
- <el-date-picker
|
|
|
- v-if="search.type === 'month'"
|
|
|
- v-model="search.date_arr"
|
|
|
- type="monthrange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始月份"
|
|
|
- end-placeholder="结束月份"
|
|
|
- @change="getList"
|
|
|
- size="small"
|
|
|
- style="width: 240px"
|
|
|
- value-format="YYYY-MM"
|
|
|
- :clearable="false"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- <el-date-picker
|
|
|
- v-else
|
|
|
- v-model="search.date_arr"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- @change="getList"
|
|
|
- size="small"
|
|
|
- style="width: 240px"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- :clearable="false"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
+ <a-range-picker
|
|
|
+ :placeholder="
|
|
|
+ search.type === 'month'
|
|
|
+ ? ['开始月份', '结束月份']
|
|
|
+ : ['开始日期', '结束日期']
|
|
|
+ "
|
|
|
+ :format="search.type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'"
|
|
|
+ :value="value"
|
|
|
+ :mode="mode2"
|
|
|
+ @panelChange="handlePanelChange2"
|
|
|
+ @change="handleChange"
|
|
|
+ :allowClear="false"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="chart-container" v-if="!loading">
|
|
@@ -124,6 +109,7 @@ import { Line } from "@antv/g2plot";
|
|
|
import usePagination from "@/hooks/usePagination";
|
|
|
import { defineComponent, reactive, toRefs, ref } from "vue";
|
|
|
import { Moment } from "moment";
|
|
|
+import moment from "moment";
|
|
|
import { TableColumnOfStuffDetail } from "../_pageOptions/table_data";
|
|
|
|
|
|
import { ColumnProps } from 'ant-design-vue/es/table/interface';
|
|
@@ -139,6 +125,8 @@ const PerformanceDetial = defineComponent({
|
|
|
components: {},
|
|
|
setup() {
|
|
|
let { meta, tablePageOptions } = usePagination();
|
|
|
+ const value = ref<Moment[]>([]);
|
|
|
+ const mode2 = ref<string[]>(['month', 'month']);
|
|
|
const state = reactive({
|
|
|
search: {
|
|
|
uid: 0,
|
|
@@ -165,7 +153,9 @@ const PerformanceDetial = defineComponent({
|
|
|
...toRefs(state),
|
|
|
tablePageOptions,
|
|
|
meta,
|
|
|
- columns
|
|
|
+ columns,
|
|
|
+ value,
|
|
|
+ mode2
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -179,6 +169,19 @@ const PerformanceDetial = defineComponent({
|
|
|
console.log("ccc", this.$route.query.uid);
|
|
|
},
|
|
|
methods: {
|
|
|
+ handlePanelChange2(val: Moment[], mode: string[]) {
|
|
|
+ this.value = val;
|
|
|
+ if(this.search.type === 'month') {
|
|
|
+ this.search.date_arr = [moment(val[0]).format('YYYY-MM'),moment(val[1]).format('YYYY-MM')]
|
|
|
+ } else {
|
|
|
+ this.search.date_arr = [moment(val[0]).format('YYYY-MM-DD'),moment(val[1]).format('YYYY-MM-DD')]
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleChange(val: Moment[]) {
|
|
|
+ this.value = val;
|
|
|
+ this.handlePanelChange2(val,this.mode2)
|
|
|
+ },
|
|
|
// 获取推广链接数据
|
|
|
async getList(page?: any, filter?: any, sorter?: any) {
|
|
|
console.log("SORT", sorter);
|
|
@@ -209,6 +212,7 @@ const PerformanceDetial = defineComponent({
|
|
|
this.list = data.list;
|
|
|
this.meta = data.meta;
|
|
|
this.customColumns();
|
|
|
+ this.getSum()
|
|
|
},
|
|
|
// 获取绩总览
|
|
|
async getSum() {
|
|
@@ -235,10 +239,14 @@ const PerformanceDetial = defineComponent({
|
|
|
list[0].substring(0, 7),
|
|
|
list[1].substring(0, 7),
|
|
|
];
|
|
|
+ this.mode2 = ['month','month']
|
|
|
+ this.value= [moment(this.search.date_arr[0],'YYYY-MM'),moment(this.search.date_arr[1],'YYYY-MM')]
|
|
|
} else {
|
|
|
this.search.value = "";
|
|
|
var list = this.getDateRange(date, 30, true);
|
|
|
this.search.date_arr = list;
|
|
|
+ this.mode2 = ['date','date']
|
|
|
+ this.value= [moment(this.search.date_arr[0],'YYYY-MM-DD'),moment(this.search.date_arr[1],'YYYY-MM-DD')]
|
|
|
}
|
|
|
this.getList();
|
|
|
},
|
|
@@ -371,7 +379,7 @@ const PerformanceDetial = defineComponent({
|
|
|
customRender: ({ text, record }) => {
|
|
|
return (<div style="color:gray;font-size:13px">
|
|
|
<p style="color:black;font-size:14px">{ text[i].amount }</p>
|
|
|
- <p>累计提现: { text[i].accruing_amount }</p>
|
|
|
+ <p>累计充值: { text[i].accruing_amount }</p>
|
|
|
<p>回本率: { text[i].back_rate }</p>
|
|
|
</div>)
|
|
|
},
|
|
@@ -398,7 +406,7 @@ const PerformanceDetial = defineComponent({
|
|
|
customRender: ({ text, record }) => {
|
|
|
return (<div style="color:gray;font-size:13px">
|
|
|
<p style="color:black;font-size:14px">{ text[i].amount }</p>
|
|
|
- <p>累计提现: { text[i].accruing_amount }</p>
|
|
|
+ <p>累计充值: { text[i].accruing_amount }</p>
|
|
|
<p>回本率: { text[i].back_rate }</p>
|
|
|
</div>)
|
|
|
},
|
|
@@ -422,13 +430,13 @@ const PerformanceDetial = defineComponent({
|
|
|
},
|
|
|
})
|
|
|
this.columns.splice(chargeIndex+(i*2), 0,{
|
|
|
- title: '用户充值(元)M+'+ [0,2,6,14,29][i],
|
|
|
+ title: '用户充值(元)T+'+ [0,2,6,14,29][i],
|
|
|
dataIndex: 'user_charge',
|
|
|
width: 150,
|
|
|
customRender: ({ text, record }) => {
|
|
|
return (<div style="color:gray;font-size:13px">
|
|
|
<p style="color:black;font-size:14px">{ text[i].amount }</p>
|
|
|
- <p>累计提现: { text[i].accruing_amount }</p>
|
|
|
+ <p>累计充值: { text[i].accruing_amount }</p>
|
|
|
<p>回本率: { text[i].back_rate }</p>
|
|
|
</div>)
|
|
|
},
|
|
@@ -437,7 +445,7 @@ const PerformanceDetial = defineComponent({
|
|
|
} else { // 自定义月数
|
|
|
for(let i = 0; i< this.search.value; i++) {
|
|
|
this.columns.splice(withdrawalIndex+(i+1), 0,{
|
|
|
- title: '提现(元)M+'+ i,
|
|
|
+ title: '提现(元)T+'+ i,
|
|
|
dataIndex: 'cash_withdrawal',
|
|
|
width: 150,
|
|
|
customRender: ({ text, record }) => {
|
|
@@ -449,13 +457,13 @@ const PerformanceDetial = defineComponent({
|
|
|
},
|
|
|
})
|
|
|
this.columns.splice(chargeIndex+(i*2), 0,{
|
|
|
- title: '用户充值(元)M+'+ i,
|
|
|
+ title: '用户充值(元)T+'+ i,
|
|
|
dataIndex: 'user_charge',
|
|
|
width: 150,
|
|
|
customRender: ({ text, record }) => {
|
|
|
return (<div style="color:gray;font-size:13px">
|
|
|
<p style="color:black;font-size:14px">{ text[i].amount }</p>
|
|
|
- <p>累计提现: { text[i].accruing_amount }</p>
|
|
|
+ <p>累计充值: { text[i].accruing_amount }</p>
|
|
|
<p>回本率: { text[i].back_rate }</p>
|
|
|
</div>)
|
|
|
},
|