|
|
|
|
@ -1,23 +1,18 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 项目排行榜 -->
|
|
|
|
|
<div class="projectRanking">
|
|
|
|
|
<!-- <el-select v-model="queryForm.storeId" placeholder="请选择门店" @change="">
|
|
|
|
|
<el-option v-for="(item,index) in options" :key="index" :label="item.storeName" :value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<div class="block">
|
|
|
|
|
<span class="demonstration padding-left-xs">选择日</span>
|
|
|
|
|
<el-date-picker v-model="days" :picker-options="pickerOptions" @change="changeMonth" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
-->
|
|
|
|
|
<div class="flex justify-between align-center">
|
|
|
|
|
<div class="block">
|
|
|
|
|
<span class="demonstration padding-left-xs">选择日</span>
|
|
|
|
|
<el-date-picker v-model="days" :picker-options="pickerOptions" @change="changeMonth" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
<!-- :picker-options="pickerOptions" -->
|
|
|
|
|
<el-select ref="select" collapse-tags filterable default-first-option :multiple='true' v-model="storeId" clearable @clear="getData" placeholder="请选择门店" @change="getData">
|
|
|
|
|
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-date-picker v-model="days" :picker-options="pickerOptions" @change="changeMonth" type="daterange" value-format="yyyyMM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- <div>
|
|
|
|
|
<el-dropdown @command="handleCommand" class="el-dropdowns">
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
{{showText}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
@ -27,18 +22,19 @@
|
|
|
|
|
<el-dropdown-item command="月度数据">月度数据</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="projectRanking-main">
|
|
|
|
|
<div style="width: 500px;height:600px;margin: 20px;">
|
|
|
|
|
<div style="width: 100%;text-align: center;margin-bottom: 10px;font-weight: 700;">项目购卡金额排行</div>
|
|
|
|
|
<el-table :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" :data="tableDate1">
|
|
|
|
|
<el-table-column align="center" prop="projectId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectStatisticMoney" label="购卡金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="ratio" label="占比">
|
|
|
|
|
<el-table-column align="center" prop="storeName" :show-overflow-tooltip="true" label="门店名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="countMoney" label="购卡金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="avgMoney" label="占比">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div>{{scope.row.ratio}}</div>
|
|
|
|
|
<div>{{scope.row.avgMoney}}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -46,12 +42,13 @@
|
|
|
|
|
<div style="width: 500px;height:600px;margin: 20px;">
|
|
|
|
|
<div style="width: 100%;text-align: center;margin-bottom: 10px;font-weight: 700;">项目服务金额排行</div>
|
|
|
|
|
<el-table :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" :data="tableDate2">
|
|
|
|
|
<el-table-column align="center" prop="projectId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectStatisticMoney" label="交易金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="ratio" label="占比">
|
|
|
|
|
<el-table-column align="center" prop="storeName" :show-overflow-tooltip="true" label="门店名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="countMoney" label="交易金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="avgMoney" label="占比">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div>{{scope.row.ratio}}</div>
|
|
|
|
|
<div>{{scope.row.avgMoney}}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -59,33 +56,33 @@
|
|
|
|
|
<div style="width: 500px;height:600px;margin: 20px;" v-if="showText=='本日数据'">
|
|
|
|
|
<div style="width: 100%;text-align: center;margin-bottom: 10px;font-weight: 700;">项目结存金额排行</div>
|
|
|
|
|
<el-table :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" :data="tableDate3">
|
|
|
|
|
<el-table-column align="center" prop="projectId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="projectStatisticMoney" label="结存金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="ratio" label="占比">
|
|
|
|
|
<el-table-column align="center" prop="storeName" :show-overflow-tooltip="true" label="门店名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeId" :show-overflow-tooltip="true" label="项目ID"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="tradeName" label="项目名称"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="countMoney" label="结存金额"></el-table-column>
|
|
|
|
|
<el-table-column align="center" prop="avgMoney" label="占比">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div>{{scope.row.ratio}}</div>
|
|
|
|
|
<div>{{scope.row.avgMoney}}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
storeStatisticProjectList,
|
|
|
|
|
projectMonthList,
|
|
|
|
|
projectLists,
|
|
|
|
|
serviceActive,
|
|
|
|
|
balance
|
|
|
|
|
} from "../../../api/statistics.js";
|
|
|
|
|
import { organizations } from "@/api/storeManage.js";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
storeId:[],
|
|
|
|
|
options:[],
|
|
|
|
|
days: [],
|
|
|
|
|
tDate: [],
|
|
|
|
|
options: [],
|
|
|
|
|
@ -96,124 +93,101 @@ export default {
|
|
|
|
|
tableDate1: [],
|
|
|
|
|
tableDate2: [],
|
|
|
|
|
tableDate3: [],
|
|
|
|
|
pickerMinDate: "",//第一次选中的时间
|
|
|
|
|
pickerOptions: {
|
|
|
|
|
onPick: ({ maxDate, minDate }) => {
|
|
|
|
|
this.choiceDate = minDate.getTime();
|
|
|
|
|
if (maxDate) {
|
|
|
|
|
this.choiceDate = "";
|
|
|
|
|
}
|
|
|
|
|
// 限制跨度在365天
|
|
|
|
|
onPick: obj => {
|
|
|
|
|
this.pickerMinDate = new Date(obj.minDate).getTime();
|
|
|
|
|
},
|
|
|
|
|
disabledDate: (time) => {
|
|
|
|
|
const self = this;
|
|
|
|
|
if (!!self.choiceDate) {
|
|
|
|
|
const startDay =
|
|
|
|
|
(new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
|
|
|
|
|
const endDay =
|
|
|
|
|
(new Date(
|
|
|
|
|
new Date(self.choiceDate).getFullYear(),
|
|
|
|
|
new Date(self.choiceDate).getMonth() + 1,
|
|
|
|
|
0
|
|
|
|
|
).getDate() -
|
|
|
|
|
new Date(self.choiceDate).getDate()) *
|
|
|
|
|
24 *
|
|
|
|
|
3600 *
|
|
|
|
|
1000;
|
|
|
|
|
let minTime = self.choiceDate - startDay;
|
|
|
|
|
let maxTime = self.choiceDate + endDay;
|
|
|
|
|
return time.getTime() < minTime || time.getTime() > maxTime;
|
|
|
|
|
disabledDate: time => {
|
|
|
|
|
if (this.pickerMinDate) {
|
|
|
|
|
const day1 = 366 * 24 * 3600 * 1000;
|
|
|
|
|
let maxTime = this.pickerMinDate + day1;
|
|
|
|
|
let minTime = this.pickerMinDate - day1;
|
|
|
|
|
return time.getTime() > maxTime || time.getTime() < minTime;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// pickerOptions: {
|
|
|
|
|
// // onPick: ({ maxDate, minDate }) => {
|
|
|
|
|
// // this.choiceDate = minDate.getTime();
|
|
|
|
|
// // if (maxDate) {
|
|
|
|
|
// // this.choiceDate = "";
|
|
|
|
|
// // }
|
|
|
|
|
// // },
|
|
|
|
|
// // disabledDate: (time) => {
|
|
|
|
|
// // const self = this;
|
|
|
|
|
// // if (!!self.choiceDate) {
|
|
|
|
|
// // const startDay =
|
|
|
|
|
// // (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
|
|
|
|
|
// // const endDay =
|
|
|
|
|
// // (new Date(
|
|
|
|
|
// // new Date(self.choiceDate).getFullYear(),
|
|
|
|
|
// // new Date(self.choiceDate).getMonth() + 1,
|
|
|
|
|
// // 0
|
|
|
|
|
// // ).getDate() -
|
|
|
|
|
// // new Date(self.choiceDate).getDate()) *
|
|
|
|
|
// // 24 *
|
|
|
|
|
// // 3600 *
|
|
|
|
|
// // 1000;
|
|
|
|
|
// // let minTime = self.choiceDate - startDay;
|
|
|
|
|
// // let maxTime = self.choiceDate + endDay;
|
|
|
|
|
// // return time.getTime() < minTime || time.getTime() > maxTime;
|
|
|
|
|
// // }
|
|
|
|
|
// // },
|
|
|
|
|
// },
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeMonth(res) {
|
|
|
|
|
console.log(res);
|
|
|
|
|
let date = this.formatTime(res[1], "YYYY-MM-DD 23:59:59");
|
|
|
|
|
var form = { startDate: res[0], endDate: date };
|
|
|
|
|
},
|
|
|
|
|
change(res) {
|
|
|
|
|
this.queryForm.startDates = res[0];
|
|
|
|
|
this.queryForm.stopDates = res[1];
|
|
|
|
|
init(){
|
|
|
|
|
let params = {
|
|
|
|
|
storeId:this.storeId,
|
|
|
|
|
date:this.days
|
|
|
|
|
}
|
|
|
|
|
this.cardR
|
|
|
|
|
this.cardRanking(Object.assign(params,{type:1}))
|
|
|
|
|
this.serveRanking(Object.assign(params,{type:2}))
|
|
|
|
|
this.balanceRanking(Object.assign(params,{type:3}))
|
|
|
|
|
},
|
|
|
|
|
changeMonth(res) {
|
|
|
|
|
this.month = this.formatTime(res, "YYYY-MM");
|
|
|
|
|
this.handleClick();
|
|
|
|
|
// 项目购卡金额排行
|
|
|
|
|
cardRanking(params){
|
|
|
|
|
projectLists(params).then(res=>{
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.avgMoney = (element.avgMoney * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate1 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleCommand(command) {
|
|
|
|
|
this.showText = command;
|
|
|
|
|
this.activeName = "购卡";
|
|
|
|
|
this.handleClick();
|
|
|
|
|
// 项目服务金额排行
|
|
|
|
|
serveRanking(params){
|
|
|
|
|
serviceActive(params).then(res=>{
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.avgMoney = (element.avgMoney * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate2 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleClick() {
|
|
|
|
|
if (this.showText == "月度数据") {
|
|
|
|
|
projectMonthList({
|
|
|
|
|
type: 1,
|
|
|
|
|
date: this.month,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
//console.log(res);
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate1 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
storeStatisticProjectList({
|
|
|
|
|
type: 1,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
//console.log(res);
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate1 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.showText == "月度数据") {
|
|
|
|
|
projectMonthList({
|
|
|
|
|
type: 2,
|
|
|
|
|
date: this.month,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate2 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
storeStatisticProjectList({
|
|
|
|
|
type: 2,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
//console.log(res);
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate2 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
storeStatisticProjectList({
|
|
|
|
|
type: 3,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
//console.log(res);
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate3 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 项目结存金额排行
|
|
|
|
|
balanceRanking(params){
|
|
|
|
|
balance(params).then(res=>{
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.avgMoney = (element.avgMoney * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate3 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//获取数据
|
|
|
|
|
async getData() {
|
|
|
|
|
organizations({ pageSize: 99 }).then((res) => {
|
|
|
|
|
getStoreInit(){
|
|
|
|
|
organizations({ pageSize: 999 }).then((res) => {
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((item) => {
|
|
|
|
|
item.label = item.storeNum + "-" + item.storeName;
|
|
|
|
|
});
|
|
|
|
|
this.options = res.rows;
|
|
|
|
|
} else {
|
|
|
|
|
this.$alert(res.message, "提示", {
|
|
|
|
|
@ -224,26 +198,20 @@ export default {
|
|
|
|
|
callback: (action) => {},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
storeStatisticProjectList() {
|
|
|
|
|
storeStatisticProjectList({
|
|
|
|
|
type: 1,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
//console.log(res);
|
|
|
|
|
if (res.code == "000000") {
|
|
|
|
|
res.rows.forEach((element) => {
|
|
|
|
|
element.ratio = (element.ratio * 100).toFixed(2) + "%";
|
|
|
|
|
});
|
|
|
|
|
this.tableDate1 = res.rows;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
changeMonth(res) {
|
|
|
|
|
if(!res)this.days = []
|
|
|
|
|
this.init()
|
|
|
|
|
},
|
|
|
|
|
//获取数据
|
|
|
|
|
getData() {
|
|
|
|
|
this.init()
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.month = this.formatTime(new Date(), "YYYY-MM");
|
|
|
|
|
this.handleClick();
|
|
|
|
|
// this.storeStatisticProjectList();
|
|
|
|
|
this.init()
|
|
|
|
|
this.getStoreInit()
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
Wangxubin
3 years ago