You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
13 KiB
Vue
447 lines
13 KiB
Vue
8 months ago
|
<template>
|
||
|
|
<div class="g_pt_10">
|
||
|
|
<div class="g_bg_f">
|
||
|
|
<!-- <u-tabs bg-color="transparent" from="index" :list="tabInfo.list" :is-scroll="true" :current="tabInfo.active" bar-width="120" item-width="50vw" active-color="#3578f6" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs> -->
|
||
|
|
</div>
|
||
|
|
<div class="g_flex_row_between g_pt_10 g_pb_10 g_pr_12">
|
||
|
|
<div class="g_flex_row_start g_pl_12 g_pr_10">
|
||
|
|
<div @click="setOutDate(6)" :class="dateVal == 6 ? 'g_c_main' : ''" class="g_cursor_pointer g_mr_20">今日</div>
|
||
|
|
<div @click="setOutDate(2)" :class="dateVal == 2 ? 'g_c_main' : ''" class="g_cursor_pointer g_mr_20">本周</div>
|
||
|
|
<div @click="setOutDate(4)" :class="dateVal == 4 ? 'g_c_main' : ''" class="g_cursor_pointer g_mr_20">本月</div>
|
||
|
|
<quickConfirm :dropdownShow.sync="dropdownShow">
|
||
|
|
<template v-slot:title>
|
||
|
|
<div :class="dateType ? 'g_c_main' : ''" @click="showDroundown">{{ dateType || "更多" }}</div>
|
||
|
|
</template>
|
||
|
|
<template v-slot:content>
|
||
|
|
<div :class="dateType == item.name ? 'ysd-base-color' : ''" class="g_border_b_d g_pt_10 g_pb_10 g_text_c" v-for="(item, index) in dateList" :key="index" @click="setDate(item)">{{ item.name }}</div>
|
||
|
|
</template>
|
||
|
|
</quickConfirm>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<quickConfirm :dropdownShow.sync="customDateShow" width="calc(100vw - 48rpx)">
|
||
|
|
<template v-slot:title>
|
||
|
|
<div :class="!notCustom ? 'g_c_main' : ''" @click="customDateShow = true">自定义</div>
|
||
|
|
</template>
|
||
|
|
<template v-slot:content>
|
||
|
|
<div class="g_flex_row_between flex_center dateSelect" hover-class="none" hover-stop-propagation="false">
|
||
|
|
<div class="g_flex_row_start">
|
||
|
|
<picker mode="date" :value="startTime" :end="notAllowTime" @change="changeDateTime($event, 'start')" style="color: #333">{{ !!startTime ? startTime : "----" }}</picker>
|
||
|
|
<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
|
||
|
|
</div>
|
||
|
|
-
|
||
|
|
<div class="afterDate g_flex_row_start">
|
||
|
|
<picker mode="date" :value="endTime" :end="notAllowTime" @change="changeDateTime($event, 'end')" style="color: #333">{{ !!endTime ? endTime : "----" }}</picker>
|
||
|
|
<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</quickConfirm>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="g_bg_f g_ml_10 g_mr_10 g_radius_8" v-if="dataList.length > 0">
|
||
|
|
<div class="tableTitle g_fw_600 g_fs_12">
|
||
|
|
<div class="show_all" style="width: 80px">姓名</div>
|
||
|
|
<div class="g_flex_1 g_flex_row_between">
|
||
|
|
<div class="dataNum">用户</div>
|
||
|
|
<div class="dataNum">活跃</div>
|
||
|
|
<div class="dataNum">报名</div>
|
||
|
|
<div class="dataNum">约面</div>
|
||
|
|
<div class="dataNum">到面</div>
|
||
|
|
<div class="dataNum">通过</div>
|
||
|
|
<div class="dataNum">入职</div>
|
||
|
|
<div class="dataNum">
|
||
|
|
在职
|
||
|
|
<!-- <i class="t-icon t-icon-zhuyi f14" @click="showToast"></i> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tableSub g_fw_600 g_fs_12">
|
||
|
|
<div class="show_all g_pl_10" style="box-sizing: border-box">其他</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.userNum || 0 }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.activeUserNum || 0 }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.applyClueNum || 0 }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.signUps || '-' }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.arrived || '-' }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.passed || '-' }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.entry || '-' }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.obJob || 0 }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="tableSub g_fs_12" v-for="(item, index) in dataList" :key="index">
|
||
|
|
<div class="g_text_l show_all" style>{{ index * 1 + 1 + " " }}{{ item.aliasName || item.agencyTeamName }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.userNum }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.activeUserNum }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.applyClueNum }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.signUps }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 20)">{{ item.arrived }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 30)">{{ item.passed }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 40)">{{ item.entry }}</div>
|
||
|
|
<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 50)">{{ item.obJob }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tableSub g_fw_600 g_fs_12">
|
||
|
|
<div class="show_all g_pl_12" style="width: 80px; box-sizing: border-box">总计</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.userNum + totalObj.userNum }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.activeUserNum + totalObj.activeUserNum }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ globalData.applyClueNum + totalObj.applyClueNum }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ totalObj.signUps }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ totalObj.arrived }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ totalObj.passed }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ totalObj.entry }}</div>
|
||
|
|
<div class="g_text_c g_flex_1">{{ totalObj.obJob }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import quickConfirm from "@/components/quickConfirm.vue";
|
||
|
|
import moment from "moment";
|
||
|
|
export default {
|
||
|
|
onLoad() {
|
||
|
|
this.getGroupList();
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dateVal: 6,
|
||
|
|
globalData:{},
|
||
|
|
dateType: "",
|
||
|
|
dropdownShow: false,
|
||
|
|
customDateShow: false,
|
||
|
|
startTime: moment(new Date()).format("YYYY-MM-DD"),
|
||
|
|
endTime: moment(new Date()).format("YYYY-MM-DD"),
|
||
|
|
notAllowTime: moment(new Date()).format("YYYY-MM-DD"),
|
||
|
|
sortType: 0,
|
||
|
|
notCustom: true, // 是否自定义时间
|
||
|
|
groupDataList: [], // 团队原始数据
|
||
|
|
dataList: [], // 数据列表
|
||
|
|
totalObj: {}, // 数据总计
|
||
|
|
dateList: [
|
||
|
|
{
|
||
|
|
name: "昨日",
|
||
|
|
value: 7,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "上周",
|
||
|
|
value: 3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "上月",
|
||
|
|
value: 5,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "近7日",
|
||
|
|
value: 0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "近30日",
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tabInfo: {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
name: "全部成员",
|
||
|
|
num: 0,
|
||
|
|
tip: 0,
|
||
|
|
classify: 2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "团队排序",
|
||
|
|
num: 0,
|
||
|
|
tip: 1,
|
||
|
|
classify: 3,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
active: 0,
|
||
|
|
},
|
||
|
|
dateList: [
|
||
|
|
{
|
||
|
|
name: "昨日",
|
||
|
|
value: 7,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "上周",
|
||
|
|
value: 3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "上月",
|
||
|
|
value: 5,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "近7日",
|
||
|
|
value: 0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "近30日",
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
quickConfirm,
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
watch: {
|
||
|
|
dropdownShow(nval, oval) {
|
||
|
|
console.log(nval, oval);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleUpdateTab(e) {
|
||
|
|
console.log(e);
|
||
|
|
this.tabInfo.active = e;
|
||
|
|
this.sortType = e;
|
||
|
|
this.getGroupList("all");
|
||
|
|
},
|
||
|
|
showDroundown() {
|
||
|
|
uni.vibrateShort({
|
||
|
|
type: "heavy",
|
||
|
|
success: function (e) {
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
this.dropdownShow = !this.dropdownShow;
|
||
|
|
},
|
||
|
|
setDate(e) {
|
||
|
|
let that = this;
|
||
|
|
console.log(e);
|
||
|
|
uni.vibrateShort({
|
||
|
|
type: "heavy",
|
||
|
|
success: function (e) {
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
that.dateList.forEach((item) => {
|
||
|
|
if (item.value == e.value) {
|
||
|
|
console.log(item.value);
|
||
|
|
that.dateType = item.name;
|
||
|
|
that.dateVal = item.value;
|
||
|
|
that.dropdownShow = false;
|
||
|
|
that.notCustom = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
that.formatDate(that.dateVal);
|
||
|
|
},
|
||
|
|
setOutDate(e) {
|
||
|
|
console.log(e);
|
||
|
|
uni.vibrateShort({
|
||
|
|
type: "heavy",
|
||
|
|
success: function (e) {
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
this.dateType = "";
|
||
|
|
this.dateVal = e;
|
||
|
|
this.notCustom = true;
|
||
|
|
this.formatDate(this.dateVal);
|
||
|
|
},
|
||
|
|
changeDateTime(e, type) {
|
||
|
|
console.log(e);
|
||
|
|
if (type == "start") {
|
||
|
|
this.startTime = e.detail.value;
|
||
|
|
} else if (type == "end") {
|
||
|
|
this.endTime = e.detail.value;
|
||
|
|
}
|
||
|
|
let time1 = new Date(this.startTime).getTime();
|
||
|
|
let time2 = new Date(this.endTime).getTime();
|
||
|
|
console.log(time1);
|
||
|
|
console.log(time2);
|
||
|
|
if (time1 > time2) {
|
||
|
|
uni.showToast({
|
||
|
|
duration: 2000,
|
||
|
|
title: "结束时间不能早于开始时间",
|
||
|
|
mask: true,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.dateVal = -1;
|
||
|
|
this.notCustom = false;
|
||
|
|
this.getGroupList();
|
||
|
|
// this.getDataList();
|
||
|
|
},
|
||
|
|
formatDate(tag) {
|
||
|
|
let start, end;
|
||
|
|
console.log(tag);
|
||
|
|
if (tag == 0) {
|
||
|
|
start = moment().add(-6, "d").format("YYYY-MM-DD");
|
||
|
|
end = moment().format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 1) {
|
||
|
|
start = moment().add(-29, "d").format("YYYY-MM-DD");
|
||
|
|
end = moment().format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 2) {
|
||
|
|
start = moment().startOf("week").format("YYYY-MM-DD");
|
||
|
|
end = moment().format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 3) {
|
||
|
|
start = moment()
|
||
|
|
.week(moment().week() - 1)
|
||
|
|
.weekday(0)
|
||
|
|
.format("YYYY-MM-DD");
|
||
|
|
end = moment()
|
||
|
|
.week(moment().week() - 1)
|
||
|
|
.weekday(6)
|
||
|
|
.format("YYYY-MM-DD");
|
||
|
|
console.log(start);
|
||
|
|
console.log(end);
|
||
|
|
// return
|
||
|
|
} else if (tag == 4) {
|
||
|
|
start = moment().startOf("month").format("YYYY-MM-DD");
|
||
|
|
end = moment().format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 5) {
|
||
|
|
start = moment().subtract("month", 1).format("YYYY-MM") + "-01";
|
||
|
|
end = moment().subtract(1, "month").endOf("month").format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 6) {
|
||
|
|
start = moment().add(-0, "d").format("YYYY-MM-DD");
|
||
|
|
end = moment().format("YYYY-MM-DD");
|
||
|
|
} else if (tag == 7) {
|
||
|
|
start = moment().add(-1, "d").format("YYYY-MM-DD");
|
||
|
|
end = moment().add(-1, "d").format("YYYY-MM-DD");
|
||
|
|
}
|
||
|
|
this.startTime = start;
|
||
|
|
this.endTime = end;
|
||
|
|
console.log(start);
|
||
|
|
console.log(end);
|
||
|
|
this.getGroupList();
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 获取团队列表
|
||
|
|
*/
|
||
|
|
getGroupList() {
|
||
|
|
let that = this;
|
||
|
|
that.G.Post(that.api.merchantManagement_userGlobalData, { start: this.startTime, end: this.endTime }, (res) => {
|
||
|
|
console.log(res);
|
||
|
|
that.globalData = res.data;
|
||
|
|
});
|
||
|
|
that.G.Post(that.api.merchantManagement_todayData, { start: this.startTime, end: this.endTime }, (res) => {
|
||
|
|
let list = [];
|
||
|
|
res.list.forEach((item) => {
|
||
|
|
list = list.concat(item.users);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(list);
|
||
|
|
let totalObj = {
|
||
|
|
arrived: 0,
|
||
|
|
entry: 0,
|
||
|
|
obJob: 0,
|
||
|
|
passed: 0,
|
||
|
|
signUps: 0,
|
||
|
|
userNum: 0,
|
||
|
|
applyClueNum: 0,
|
||
|
|
activeUserNum: 0,
|
||
|
|
finshedGPA: 0,
|
||
|
|
entryGPA: 0,
|
||
|
|
};
|
||
|
|
list.forEach((item, index) => {
|
||
|
|
console.log(item);
|
||
|
|
totalObj.arrived += item.arrived;
|
||
|
|
totalObj.entry += item.entry;
|
||
|
|
totalObj.obJob += item.obJob;
|
||
|
|
totalObj.passed += item.passed;
|
||
|
|
totalObj.signUps += item.signUps;
|
||
|
|
totalObj.userNum = totalObj.userNum + Number(item.userNum) || 0;
|
||
|
|
totalObj.applyClueNum = totalObj.applyClueNum + Number(item.applyClueNum) || 0;
|
||
|
|
totalObj.activeUserNum = totalObj.activeUserNum + Number(item.activeUserNum) || 0;
|
||
|
|
totalObj.finshedGPA += item.finshedGPA;
|
||
|
|
totalObj.entryGPA += item.entryGPA;
|
||
|
|
totalObj.index = index + 2;
|
||
|
|
});
|
||
|
|
that.totalObj = totalObj;
|
||
|
|
console.log("totalObj", totalObj);
|
||
|
|
let newList = [];
|
||
|
|
// list.forEach((item, index) => {
|
||
|
|
// newList = newList.concat(item.users);
|
||
|
|
// console.log(item);
|
||
|
|
// console.log(index);
|
||
|
|
// });
|
||
|
|
console.log(newList);
|
||
|
|
// if (that.sortType != 0) {
|
||
|
|
that.dataList = that.G.fullCopy(list);
|
||
|
|
if (that.currentGroup) {
|
||
|
|
that.selectGroup(that.currentGroup);
|
||
|
|
}
|
||
|
|
// } else {
|
||
|
|
// list.sort((a, b) => b.funnel - a.funnel);
|
||
|
|
// that.dataList = that.G.fullCopy(list);
|
||
|
|
// }
|
||
|
|
console.log("that.dataList", that.dataList);
|
||
|
|
that.groupDataList = that.G.fullCopy(list);
|
||
|
|
|
||
|
|
// that.isspinning = false
|
||
|
|
|
||
|
|
that.groupDataList.forEach((item) => {
|
||
|
|
console.log(item);
|
||
|
|
item.title = item.agencyTeamName;
|
||
|
|
});
|
||
|
|
that.groupDataList.unshift({
|
||
|
|
title: "全部部门",
|
||
|
|
agencyTeamId: 12,
|
||
|
|
agencyTeamIdx: 2,
|
||
|
|
arrived: 3,
|
||
|
|
entry: 1,
|
||
|
|
entryGPA: 0.03,
|
||
|
|
finshedGPA: 1.86,
|
||
|
|
funnel: 3.2,
|
||
|
|
obJob: 71,
|
||
|
|
packageIdx: 138,
|
||
|
|
passed: 2,
|
||
|
|
signUps: 8,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
toDataDetail() {},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
page {
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
.dateSelect {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 10px 20px;
|
||
|
|
}
|
||
|
|
.dateSelect > div {
|
||
|
|
width: 147px;
|
||
|
|
height: 30px;
|
||
|
|
border: 1px solid #cccccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.tableTitle {
|
||
|
|
display: flex;
|
||
|
|
text-align: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 12px 20px;
|
||
|
|
// padding-right: 24px;
|
||
|
|
}
|
||
|
|
.tableSub {
|
||
|
|
display: flex;
|
||
|
|
text-align: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 12px;
|
||
|
|
border-top: 1px solid #f5f5f5;
|
||
|
|
/* overflow: hidden; */
|
||
|
|
.dataNum {
|
||
|
|
/* padding-left: 8px; */
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
// color: #576b95;
|
||
|
|
// text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.show_all {
|
||
|
|
width: 80px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
</style>
|