|
|
@ -21,7 +21,7 @@ const searchTime = ref([]); |
|
|
|
|
|
|
|
// 月份柱状图 |
|
|
|
const getMiddleBarObj = ref({ |
|
|
|
updateType: "充值" |
|
|
|
updateType: "充值", |
|
|
|
}); |
|
|
|
const getMiddleBarData = ref({}); |
|
|
|
const middleTotalRecharge = ref(0); |
|
|
@ -32,7 +32,6 @@ const middleRecharge = ref([]); |
|
|
|
const middleFree = ref([]); |
|
|
|
const middleTask = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
// 地区排名 |
|
|
|
const getAreaRankObj = ref({ |
|
|
|
updateType: "充值", |
|
|
@ -138,7 +137,6 @@ const get = async function () { |
|
|
|
console.log("getDayConsumeCoin", getDayConsumeCoin.value); |
|
|
|
console.log("platformData", platformData.value); |
|
|
|
|
|
|
|
|
|
|
|
option3Data.value = [ |
|
|
|
{ |
|
|
|
value: Math.abs(statistics.value.rechargeSumCoin), |
|
|
@ -548,7 +546,7 @@ const getMiddleBar = async function () { |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
consume.setOption(option); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取门店排名 |
|
|
|
const getAreaRank = async function () { |
|
|
@ -628,13 +626,21 @@ const handleChange = function () { |
|
|
|
// 时间范围控制 |
|
|
|
const disabledDate = function (date) { |
|
|
|
const currentDate = new Date(); |
|
|
|
const startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1); |
|
|
|
const endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); |
|
|
|
const startDate = new Date( |
|
|
|
currentDate.getFullYear(), |
|
|
|
currentDate.getMonth() - 1, |
|
|
|
1 |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
currentDate.getFullYear(), |
|
|
|
currentDate.getMonth() + 1, |
|
|
|
0 |
|
|
|
); |
|
|
|
if (date >= startDate && date <= endDate) { |
|
|
|
return false; |
|
|
|
} |
|
|
|
return true; |
|
|
|
} |
|
|
|
}; |
|
|
|
// 本日 |
|
|
|
const today = function () { |
|
|
|
const current = new Date(); |
|
|
@ -651,7 +657,6 @@ const today = function () { |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
search(); |
|
|
|
// console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
|
|
|
|
|
}; |
|
|
|
// 本周 |
|
|
|
const thisWeek = function () { |
|
|
@ -667,16 +672,8 @@ const thisWeek = function () { |
|
|
|
// 本月 |
|
|
|
const thisMonth = function () { |
|
|
|
const current = new Date(); |
|
|
|
const startDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth(), |
|
|
|
1 |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth() + 1, |
|
|
|
0 |
|
|
|
); |
|
|
|
const startDate = new Date(current.getFullYear(), current.getMonth(), 1); |
|
|
|
const endDate = new Date(current.getFullYear(), current.getMonth() + 1, 0); |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
search(); |
|
|
|
// console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
@ -684,16 +681,8 @@ const thisMonth = function () { |
|
|
|
// 本年 |
|
|
|
const thisYear = function () { |
|
|
|
const current = new Date(); |
|
|
|
const startDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
0, |
|
|
|
1 |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear() + 1, |
|
|
|
0, |
|
|
|
0 |
|
|
|
); |
|
|
|
const startDate = new Date(current.getFullYear(), 0, 1); |
|
|
|
const endDate = new Date(current.getFullYear() + 1, 0, 0); |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
search(); |
|
|
|
// console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
@ -701,13 +690,22 @@ const thisYear = function () { |
|
|
|
const allTime = function () { |
|
|
|
searchTime.value = ["", ""]; |
|
|
|
search(); |
|
|
|
} |
|
|
|
}; |
|
|
|
// 根据时间搜索 |
|
|
|
const search = function () { |
|
|
|
console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")); |
|
|
|
console.log( |
|
|
|
"searchTime", |
|
|
|
moment(searchTime.value[0]).format("YYYY-MM-DD") + |
|
|
|
"至" + |
|
|
|
moment(searchTime.value[1]).format("YYYY-MM-DD") |
|
|
|
); |
|
|
|
|
|
|
|
getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD"); |
|
|
|
getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD"); |
|
|
|
getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format( |
|
|
|
"YYYY-MM-DD" |
|
|
|
); |
|
|
|
getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format( |
|
|
|
"YYYY-MM-DD" |
|
|
|
); |
|
|
|
if (getMiddleBarObj.value.searchStartTime == "Invalid date") { |
|
|
|
delete getMiddleBarObj.value.searchStartTime; |
|
|
|
} |
|
|
@ -716,8 +714,12 @@ const search = function () { |
|
|
|
} |
|
|
|
console.log("getMiddleBarObj", getMiddleBarObj.value); |
|
|
|
|
|
|
|
getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD"); |
|
|
|
getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD"); |
|
|
|
getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format( |
|
|
|
"YYYY-MM-DD" |
|
|
|
); |
|
|
|
getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format( |
|
|
|
"YYYY-MM-DD" |
|
|
|
); |
|
|
|
if (getAreaRankObj.value.searchStartTime == "Invalid date") { |
|
|
|
delete getAreaRankObj.value.searchStartTime; |
|
|
|
} |
|
|
@ -728,8 +730,7 @@ const search = function () { |
|
|
|
|
|
|
|
getMiddleBar(); |
|
|
|
getAreaRank(); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
// 切换平台 |
|
|
|
const changePlatform = function () { |
|
|
@ -1066,26 +1067,37 @@ onMounted(async function () { |
|
|
|
<span v-if="getSumCoin.coinDifference > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="getSumCoin.coinDifference < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="getSumCoin.coinDifference == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ |
|
|
|
<template #footer |
|
|
|
>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ |
|
|
|
formatNum(getSumCoin.todayFree) |
|
|
|
}} |
|
|
|
任务{{ formatNum(getSumCoin.todayTask) }}</template> |
|
|
|
任务{{ formatNum(getSumCoin.todayTask) }}</template |
|
|
|
> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
@ -1097,7 +1109,8 @@ onMounted(async function () { |
|
|
|
<p> |
|
|
|
折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }} |
|
|
|
</p> |
|
|
|
<template #footer>昨日新增 |
|
|
|
<template #footer |
|
|
|
>昨日新增 |
|
|
|
{{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }} |
|
|
|
,其中充值 |
|
|
|
{{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }} |
|
|
@ -1114,10 +1127,12 @@ onMounted(async function () { |
|
|
|
消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }}; |
|
|
|
退款 {{ formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin)) }} |
|
|
|
</p> |
|
|
|
<template #footer>昨日新增消耗 |
|
|
|
<template #footer |
|
|
|
>昨日新增消耗 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款 |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template> |
|
|
|
{{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template |
|
|
|
> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
@ -1130,46 +1145,66 @@ onMounted(async function () { |
|
|
|
<span v-if="statistics.weekOverWeekRate > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.weekOverWeekRate < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.weekOverWeekRate == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>周同比 {{ statistics.weekOverWeekRate }}%</span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span> </span> |
|
|
|
<span v-if="statistics.dayOverDayRate > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="red-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.dayOverDayRate < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="green-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="statistics.dayOverDayRate == 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span> 日环比{{ statistics.dayOverDayRate }}%</span> |
|
|
|
<span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span> |
|
|
|
<span |
|
|
|
class="grey-triangle" |
|
|
|
style="margin: 6px 0px 0px 7px" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<template #footer>昨日充值人数 |
|
|
|
<template #footer |
|
|
|
>昨日充值人数 |
|
|
|
{{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }} |
|
|
|
,其中首充 |
|
|
|
{{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }} |
|
|
|
人</template> |
|
|
|
人</template |
|
|
|
> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
@ -1182,11 +1217,23 @@ onMounted(async function () { |
|
|
|
<el-button text @click="thisWeek()">本周</el-button> |
|
|
|
<el-button text @click="thisMonth()">本月</el-button> |
|
|
|
<el-button text @click="thisYear()">本年</el-button> |
|
|
|
<el-date-picker v-model="searchTime" type="daterange" range-separator="→" start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" style="width: 200px;" :disabled-date="disabledDate" @change="search" /> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchTime" |
|
|
|
type="daterange" |
|
|
|
range-separator="→" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
style="width: 200px" |
|
|
|
:disabled-date="disabledDate" |
|
|
|
@change="search" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange"> |
|
|
|
<el-tabs |
|
|
|
v-model="activeName" |
|
|
|
class="demo-tabs" |
|
|
|
@tab-change="handleChange" |
|
|
|
> |
|
|
|
<el-tab-pane label="金币充值" name="recharge"> |
|
|
|
<div> |
|
|
|
合计:充值金币: |
|
|
@ -1194,13 +1241,17 @@ onMounted(async function () { |
|
|
|
formatNum(middleTotalRecharge) |
|
|
|
}}</span> |
|
|
|
,免费金币: |
|
|
|
<span class="mid-head-font">{{ formatNum(middleTotalFree) }}</span> |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(middleTotalFree) |
|
|
|
}}</span> |
|
|
|
,任务金币: |
|
|
|
<span class="mid-head-font">{{ formatNum(middleTotalTask) }}</span> |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(middleTotalTask) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<el-scrollbar style="width: 1150px;"> |
|
|
|
<div id="recharge" style="width: 100%; height: 400px;"></div> |
|
|
|
<el-scrollbar style="width: 1150px"> |
|
|
|
<div id="recharge" style="width: 100%; height: 400px"></div> |
|
|
|
</el-scrollbar> |
|
|
|
|
|
|
|
<div style="width: 100px"> |
|
|
@ -1219,15 +1270,31 @@ onMounted(async function () { |
|
|
|
</div> |
|
|
|
<div style="width: 310px"> |
|
|
|
<div class="ranking-header"> |
|
|
|
<span style="margin-right: 90px; width: 150px">门店金币充值排名</span> |
|
|
|
<el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px" |
|
|
|
@change="changeGoldType"> |
|
|
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
<span style="margin-right: 90px; width: 150px" |
|
|
|
>门店金币充值排名</span |
|
|
|
> |
|
|
|
<el-select |
|
|
|
v-model="goldType" |
|
|
|
placeholder="请选择金币类型" |
|
|
|
size="small" |
|
|
|
style="width: 90px" |
|
|
|
@change="changeGoldType" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in gold" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-scrollbar height="360px"> |
|
|
|
<div v-for="(item, index) in areaRank" :key="item" class="ranking-item"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in areaRank" |
|
|
|
:key="item" |
|
|
|
class="ranking-item" |
|
|
|
> |
|
|
|
<!-- <component :is="findBsComponent(index)" /> --> |
|
|
|
<span style="width: 15px; text-align: center">{{ |
|
|
|
index + 1 |
|
|
@ -1258,8 +1325,8 @@ onMounted(async function () { |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<el-scrollbar style="width: 1150px;"> |
|
|
|
<div id="consume" style="width: 100%; height: 400px;"></div> |
|
|
|
<el-scrollbar style="width: 1150px"> |
|
|
|
<div id="consume" style="width: 100%; height: 400px"></div> |
|
|
|
</el-scrollbar> |
|
|
|
|
|
|
|
<div style="width: 100px"> |
|
|
@ -1278,15 +1345,31 @@ onMounted(async function () { |
|
|
|
</div> |
|
|
|
<div style="width: 310px"> |
|
|
|
<div class="ranking-header"> |
|
|
|
<span style="margin-right: 90px; width: 150px">门店金币消费排名</span> |
|
|
|
<el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px" |
|
|
|
@change="changeGoldType"> |
|
|
|
<el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
<span style="margin-right: 90px; width: 150px" |
|
|
|
>门店金币消费排名</span |
|
|
|
> |
|
|
|
<el-select |
|
|
|
v-model="goldType" |
|
|
|
placeholder="请选择金币类型" |
|
|
|
size="small" |
|
|
|
style="width: 90px" |
|
|
|
@change="changeGoldType" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in gold" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-scrollbar height="360px"> |
|
|
|
<div v-for="(item, index) in areaRank" :key="item" class="ranking-item"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in areaRank" |
|
|
|
:key="item" |
|
|
|
class="ranking-item" |
|
|
|
> |
|
|
|
<!-- <component :is="findBsComponent(index)" /> --> |
|
|
|
<span style="width: 15px; text-align: center">{{ |
|
|
|
index + 1 |
|
|
@ -1325,8 +1408,14 @@ onMounted(async function () { |
|
|
|
<template #header> |
|
|
|
<div class="card-header" style="display: flex"> |
|
|
|
<span class="tail-head">四大学科类别占比</span> |
|
|
|
<el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small" |
|
|
|
@change="changePlatform" style="margin-left: auto"> |
|
|
|
<el-radio-group |
|
|
|
v-model="platform" |
|
|
|
fill="#ffffff" |
|
|
|
text-color="#409eff" |
|
|
|
size="small" |
|
|
|
@change="changePlatform" |
|
|
|
style="margin-left: auto" |
|
|
|
> |
|
|
|
<el-radio-button label="全部平台" value="全部平台" /> |
|
|
|
<el-radio-button label="ERP" value="ERP" /> |
|
|
|
<el-radio-button label="HC" value="HC" /> |
|
|
|