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

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

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

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

@ -2,7 +2,7 @@
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="my--1.5 flex flex-row items-center justify-between"> <div class="my--1.5 flex flex-row items-center justify-between">
<CardTitle title="换电站收入排行(元)" /> <CardTitle title="充换电收入排行" />
<!-- 查询条件 --> <!-- 查询条件 -->
<!-- <ShortcutDateRangePicker @change="handleTimeRangeChange" /> --> <!-- <ShortcutDateRangePicker @change="handleTimeRangeChange" /> -->
</div> </div>
@ -11,14 +11,14 @@
<div class="relative h-24 flex" v-if="analyseData.length > 0"> <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="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="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 }} {{ analyseData[0].stationName }}: {{ analyseData[0].actualPay / 100 || 0 }}
</div> </div>
</div> </div>
</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" 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 class="text-6 font-bold">￥{{ analyseData[0].actualPay / 100 || 0 }}</span>
<span>Number One</span> <span>Number One</span>
</div> </div>
@ -26,14 +26,14 @@
<div class="relative h-24 flex" v-if="analyseData.length > 1"> <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="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="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 }} {{ analyseData[1].stationName }}: {{ analyseData[1].actualPay / 100 || 0 }}
</div> </div>
</div> </div>
</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" 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 class="text-6 font-bold">￥{{ analyseData[1].actualPay / 100 || 0 }}</span>
<span>Number Two</span> <span>Number Two</span>
</div> </div>
@ -42,7 +42,7 @@
<div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%"> <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="ml-15 h-full flex flex-row gap-x-16">
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<div class="font-bold"> <div class="font-bold">
{{ analyseData[2].stationName }}: {{ analyseData[2].actualPay / 100 || 0 }} {{ analyseData[2].stationName }}: {{ analyseData[2].actualPay / 100 || 0 }}
</div> </div>
</div> </div>
@ -51,7 +51,7 @@
<div <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" 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> <span>Number Three</span>
</div> </div>
</div> </div>
@ -69,19 +69,28 @@ import { CardTitle } from '@/components/Card'
defineOptions({ name: 'MemberFunnelCard' }) defineOptions({ name: 'MemberFunnelCard' })
const loading = ref(false) // 加载中 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 () => { const handleTimeRangeChange = async () => {
loading.value = true loading.value = true
// 查询数据 // 查询数据
analyseData.value = await MemberStatisticsApi.getMemberAnalyse() analyseData.value = await MemberStatisticsApi.getMemberAnalyse()
// console.log(analyseData.value) // console.log(analyseData.value,"llllll")
loading.value = false loading.value = false
} }
onMounted(async () => { onMounted(async () => {
handleTimeRangeChange() // handleTimeRangeChange()
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

Write Preview
Loading…
Cancel
Save