cloud
/
cloud_admin
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11.13 首页假数据

Browse Source
master
zz 2 weeks ago
parent a410656e26
commit 9c397ddcf2
4 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File

13
src/views/mall/home/components/MemberStatisticsCard.vue
Unescape View File

@ -5,7 +5,8 @@
<CardTitle title="换电车辆统计" />
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
<el-radio-group v-model="timeRangeType">
<!-- <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange"> -->
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }}
</el-radio-button>
@ -90,7 +91,7 @@ const eChartOptions = reactive<EChartsOption>({
{
type: 'category',
// prettier-ignore
data: []
data: ['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站',]
}
],
yAxis: [
@ -102,7 +103,7 @@ const eChartOptions = reactive<EChartsOption>({
{
name: '换电车辆',
type: 'bar',
data: []
data: [70,266,210,35,112,98,91]
}
]
}) as EChartsOption
@ -275,8 +276,8 @@ const convertToTimestamp = (timeString) => {
/** 初始化 **/
onMounted(() => {
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
getlist()
// queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
// queryparams.value.endTime = getCurrentDateTime()
// getlist()
})
</script>

45
src/views/mall/home/components/TradeTrendCard.vue
Unescape View File

@ -2,10 +2,11 @@
<el-card shadow="never">
<template #header>
<div class="flex flex-row items-center justify-between">
<CardTitle title="换电站信息统计" />
<CardTitle title="充换电站信息统计" />
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
<el-radio-group v-model="timeRangeType">
<!-- <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange"> -->
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }}
</el-radio-button>
@ -49,6 +50,9 @@ const timeRange = new Map()
.set(TimeRangeTypeEnum.WEEK, {
name: '周',
series: [
// { name: '充换电营收', type: 'bar', smooth: true, data: [ 29792.40,18646.14,15153.60,14488.05,7735.55,6667.58,7035.60] },
// { name: '充换电量', type: 'line', smooth: true, data: [ 35636.84,18949.33,18126.32,16062.14,9609.38,7620.10,7680.79] }
// ]
{ name: '上周', type: 'bar', smooth: true, data: [] },
{ name: '本周', type: 'bar', smooth: true, data: [] },
{ name: '上周', type: 'line', smooth: true, data: [] },
@ -86,15 +90,15 @@ const eChartOptions = reactive<EChartsOption>({
trigger: 'axis'
},
legend: {
// data: ['换电营收', '换电量', '换电次数']
data: ['换电营收', '换电量']
// data: ['充换电营收', '充换电量', '换电次数']
data: ['充换电营收', '充换电量']
},
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: []
data: ['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站' ]
}
],
yAxis: [
@ -104,13 +108,13 @@ const eChartOptions = reactive<EChartsOption>({
],
series: [
{
name: '换电营收',
name: '充换电营收',
type: 'bar',
data: [],
data: [ 29792.40, 18646.14, 15153.60,14488.05,7735.55,6667.58,7035.60],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
// { type: 'max', name: 'Max' },
// { type: 'min', name: 'Min' }
]
},
markLine: {
@ -118,13 +122,13 @@ const eChartOptions = reactive<EChartsOption>({
}
},
{
name: '换电量',
name: '充换电量',
type: 'bar',
data: [],
data: [ 35636.84,18949.33,18126.32,16062.14,9609.38,7620.10,7680.79],
markPoint: {
data: [
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
// { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
// { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
@ -137,8 +141,8 @@ const eChartOptions = reactive<EChartsOption>({
data: [],
markPoint: {
data: [
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
// { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
// { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
@ -192,10 +196,11 @@ const getlist = async () => {
queryparams.value.endTime = convertToTimestamp(queryparams.value.endTime)
// 查询数据
const response = await MemberStatisticsApi.getHomeSwapInfo(queryparams.value)
console.log(response,"shuju")
let x_data = []
// 换电营收
// 充换电营收
let y_data_1 = []
// 换电量
// 充换电量
let y_data_2 = []
// 换电次数
// let y_data_3 = []
@ -326,8 +331,8 @@ const getCurrentDateTime = () => {
/** 初始化 **/
onMounted(() => {
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
getlist()
// queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
// queryparams.value.endTime = getCurrentDateTime()
// getlist()
})
</script>

29
src/views/mall/statistics/member/components/MemberFunnelCard.vue
Unescape View File

@ -2,7 +2,7 @@
<el-card shadow="never">
<template #header>
<div class="my--1.5 flex flex-row items-center justify-between">
<CardTitle title="换电站收入排行(元)" />
<CardTitle title="充换电收入排行" />
<!-- 查询条件 -->
<!-- <ShortcutDateRangePicker @change="handleTimeRangeChange" /> -->
</div>
@ -11,14 +11,14 @@
<div class="relative h-24 flex" v-if="analyseData.length > 0">
<div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-col justify-center">
<div class="font-bold">
<div class="font-bold">
{{ analyseData[0].stationName }}: {{ analyseData[0].actualPay / 100 || 0 }}
</div>
</div>
</div>
<div
class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
>
>
<span class="text-6 font-bold">￥{{ analyseData[0].actualPay / 100 || 0 }}</span>
<span>Number One</span>
</div>
@ -26,14 +26,14 @@
<div class="relative h-24 flex" v-if="analyseData.length > 1">
<div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-col justify-center">
<div class="font-bold">
<div class="font-bold">
{{ analyseData[1].stationName }}: {{ analyseData[1].actualPay / 100 || 0 }}
</div>
</div>
</div>
<div
class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
>
>
<span class="text-6 font-bold">￥{{ analyseData[1].actualPay / 100 || 0 }}</span>
<span>Number Two</span>
</div>
@ -42,7 +42,7 @@
<div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-row gap-x-16">
<div class="flex flex-col justify-center">
<div class="font-bold">
<div class="font-bold">
{{ analyseData[2].stationName }}: {{ analyseData[2].actualPay / 100 || 0 }}
</div>
</div>
@ -51,7 +51,7 @@
<div
class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
>
<span class="text-6 font-bold">￥{{ analyseData[2].actualPay / 100 || 0 }}</span>
<span class="text-6 font-bold">￥{{ analyseData[2].actualPay / 100 || 0 }}</span>
<span>Number Three</span>
</div>
</div>
@ -69,19 +69,28 @@ import { CardTitle } from '@/components/Card'
defineOptions({ name: 'MemberFunnelCard' })
const loading = ref(false) // 加载中
const analyseData = ref([]) // 会员分析数据
const analyseData = ref([
{actualPay:408115,stationName:"平泽仓储站"},
{actualPay:274208,stationName:"长沙站"},
{actualPay:21648,stationName:"合肥站"},
{actualPay:204057,stationName:"前兴石材厂站"},
{actualPay:115456,stationName:"南京站"},
{actualPay:101024,stationName:"海口站"},
{actualPay:93808,stationName:"石家庄站"},
]) // 会员分析数据
/** 查询会员概览数据列表 */
const handleTimeRangeChange = async () => {
loading.value = true
// 查询数据
analyseData.value = await MemberStatisticsApi.getMemberAnalyse()
// console.log(analyseData.value)
// console.log(analyseData.value,"llllll")
loading.value = false
}
onMounted(async () => {
handleTimeRangeChange()
// handleTimeRangeChange()
})
</script>
<style lang="scss" scoped>

16
src/views/mall/statistics/member/components/MemberTerminalCard.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<el-card shadow="never" v-loading="loading">
<template #header>
<CardTitle title="换电站收入占比" />
<CardTitle title="充换电收入占比" />
</template>
<Echart :height="300" :options="terminalChartOptions" />
</el-card>
@ -38,11 +38,13 @@ const terminalChartOptions = reactive<EChartsOption>({
show: true
},
data: [
// { value: 943.58, name: '合肥站' },
// { value: 504.22, name: '长沙站' },
// { value: 186.2, name: '南京站' },
// { value: 0, name: '海口站' },
// { value: 0, name: '石家庄站' }
{value:4081.15,name:"平泽仓储站"},
{value:2742.08,name:"长沙站"},
{value:2164.8,name:"合肥站"},
{value:2040.57,name:"前兴石材厂站"},
{value:1154.56,name:"南京站"},
{value:1010.24,name:"海口站"},
{value:938.08,name:"石家庄站"},
]
}
]
@ -73,6 +75,6 @@ const getMemberTerminalStatisticsList = async () => {
/** 初始化 **/
onMounted(() => {
getMemberTerminalStatisticsList()
// getMemberTerminalStatisticsList()
})
</script>

Write Preview
Loading…
Cancel
Save