mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
zmj 2024-07-06 11:45:54 +08:00
parent 57fe95a96e
commit a3bb69ef63
8 changed files with 221 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.rar Normal file
View File

Binary file not shown.

88
src/views/statistic_cw/index.vue
View File

@ -90,92 +90,7 @@ const visitorOption: any = reactive({
// 颜色 // 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1'] const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率 // 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([ const basicList = reactive([])
// {
// name: '访客数',
// type: 'people',
// icon: 'RectangleCopy',
// num: 0,
// percent: 0
// },
// {
// name: '浏览量',
// type: 'browse',
// icon: 'RectangleCopy49',
// num: 0,
// percent: 0
// },
// {
// name: '新增用户数',
// type: 'newUser',
// icon: 'RectangleCopy53',
// num: 0,
// percent: 0
// },
// {
// name: '成交用户数',
// type: 'payPeople',
// icon: 'RectangleCopy5',
// num: 0,
// percent: 0
// },
// {
// name: '访客-支付转换率',
// type: 'payPercent',
// icon: 'RectangleCopy4',
// num: 0,
// percent: 0
// },
// {
// name: '激活付费会员数',
// type: 'payUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '充值用户数',
// type: 'rechargePeople',
// icon: 'RectangleCopy59',
// num: 0,
// percent: 0
// },
// {
// name: '客单价',
// type: 'payPrice',
// icon: 'RectangleCopy15',
// num: 0,
// percent: 0
// },
// {
// name: '累计用户',
// type: 'cumulativeUser',
// icon: 'RectangleCopy54',
// num: 0,
// percent: 0
// },
// {
// name: '累计付费会员数',
// type: 'cumulativePayUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '累计充值用户数',
// type: 'cumulativeRechargePeople',
// icon: 'RectangleCopy6',
// num: 0,
// percent: 0
// },
// {
// name: '累计成交用户数',
// type: 'cumulativePayPeople',
// icon: 'RectangleCopy9',
// num: 0,
// percent: 0
// }
])
@ -235,6 +150,7 @@ const getData2 = () => {
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

2
src/views/statistic_gc/index.vue
View File

@ -253,6 +253,8 @@ const getData2 = () => {
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

2
src/views/statistic_sc/index.vue
View File

@ -235,6 +235,8 @@ const getData2 = () => {
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

2
src/views/statistic_xm/index.vue
View File

@ -258,6 +258,8 @@ const getData2 = () => {
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

92
src/views/statistic_zj/index.vue
View File

@ -67,7 +67,7 @@ const visitorOption: any = reactive({
containLabel: true containLabel: true
}, },
legend: { legend: {
data: ['访问量'] data: []
}, },
itemStyle: { itemStyle: {
// 点的颜色。 // 点的颜色。
@ -76,6 +76,8 @@ const visitorOption: any = reactive({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
series: [ series: [
{ {
name: '访问量', name: '访问量',
@ -89,92 +91,7 @@ const visitorOption: any = reactive({
// 颜色 // 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1'] const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率 // 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([ const basicList = reactive([])
// {
// name: '访客数',
// type: 'people',
// icon: 'RectangleCopy',
// num: 0,
// percent: 0
// },
// {
// name: '浏览量',
// type: 'browse',
// icon: 'RectangleCopy49',
// num: 0,
// percent: 0
// },
// {
// name: '新增用户数',
// type: 'newUser',
// icon: 'RectangleCopy53',
// num: 0,
// percent: 0
// },
// {
// name: '成交用户数',
// type: 'payPeople',
// icon: 'RectangleCopy5',
// num: 0,
// percent: 0
// },
// {
// name: '访客-支付转换率',
// type: 'payPercent',
// icon: 'RectangleCopy4',
// num: 0,
// percent: 0
// },
// {
// name: '激活付费会员数',
// type: 'payUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '充值用户数',
// type: 'rechargePeople',
// icon: 'RectangleCopy59',
// num: 0,
// percent: 0
// },
// {
// name: '客单价',
// type: 'payPrice',
// icon: 'RectangleCopy15',
// num: 0,
// percent: 0
// },
// {
// name: '累计用户',
// type: 'cumulativeUser',
// icon: 'RectangleCopy54',
// num: 0,
// percent: 0
// },
// {
// name: '累计付费会员数',
// type: 'cumulativePayUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '累计充值用户数',
// type: 'cumulativeRechargePeople',
// icon: 'RectangleCopy6',
// num: 0,
// percent: 0
// },
// {
// name: '累计成交用户数',
// type: 'cumulativePayPeople',
// icon: 'RectangleCopy9',
// num: 0,
// percent: 0
// }
])
function getLastMonthRange() { function getLastMonthRange() {
// 获取今天的日期 // 获取今天的日期
let today = new Date(); let today = new Date();
@ -230,6 +147,7 @@ const getData2 = () => {
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

1
src/views/statistic_zx/index.vue
View File

@ -231,6 +231,7 @@ const getData2 = () => {
icon: 'RectangleCopy14', icon: 'RectangleCopy14',
num: item.total_money, num: item.total_money,
} }
visitorOption.legend.data.push(item.title)
}) })
}) })
} }

328
src/views/workbench/index.vue
View File

@ -1,152 +1,61 @@
<template> <template>
<div class="workbench"> <div class="workbench">
<div class="lg:flex"> <el-card shadow="never" class=" !border-none">
<el-card class="!border-none mb-4 lg:mr-4 lg:w-[350px]" shadow="never">
<template #header>
<span class="card-title">版本信息</span>
</template>
<div>
<div class="flex leading-9">
<div class="w-20">当前版本</div>
<span> {{ workbenchData.version.version }}</span>
</div>
<div class="flex leading-9">
<div class="w-20">基于框架</div>
<span> {{ workbenchData.version.based }}</span>
</div>
<div class="flex leading-9">
<div class="w-20">获取渠道</div>
<div>
<a :href="workbenchData.version.channel.website" target="_blank">
<el-button type="success" size="small">官网</el-button>
</a>
<a class="ml-3" :href="workbenchData.version.channel.gitee" target="_blank">
<el-button type="danger" size="small">Gitee</el-button>
</a>
</div>
</div>
</div>
</el-card>
<el-card class="!border-none mb-4 flex-1" shadow="never">
<template #header>
<div>
<span class="card-title">今日数据</span>
<span class="text-tx-secondary text-xs ml-4">
更新时间：{{ workbenchData.today.time }}
</span>
</div>
</template>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-1/2 md:w-1/4"> <div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
<div class="leading-10">访问量(人)</div> <div class="mr-2">
<div class="text-6xl">{{ workbenchData.today.today_visitor }}</div> <div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
<div class="text-tx-secondary text-xs"> <iconfont :iconName="item.icon" white className="text-6xl" />
总访问量：{{ workbenchData.today.total_visitor }}
</div> </div>
</div> </div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">销售额(元)</div>
<div class="text-6xl">{{ workbenchData.today.today_sales }}</div>
<div class="text-tx-secondary text-xs">
总销售额：{{ workbenchData.today.total_sales }}
</div>
</div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">订单量(笔)</div>
<div class="text-6xl">{{ workbenchData.today.order_num }}</div>
<div class="text-tx-secondary text-xs">
总订单量：{{ workbenchData.today.order_sum }}
</div>
</div>
<div class="w-1/2 md:w-1/4">
<div class="leading-10">新增用户</div>
<div class="text-6xl">{{ workbenchData.today.today_new_user }}</div>
<div class="text-tx-secondary text-xs">
总访用户：{{ workbenchData.today.total_new_user }}
</div>
</div>
</div>
</el-card>
</div>
<div class="function mb-4">
<el-card class="flex-1 !border-none" shadow="never">
<template #header>
<span>常用功能</span>
</template>
<div class="flex flex-wrap">
<div v-for="item in workbenchData.menu" class="md:w-[12.5%] w-1/4 flex flex-col items-center"
:key="item">
<router-link :to="item.url" class="mb-3 flex flex-col items-center">
<image-contain width="40px" height="40px" :src="item?.image" />
<div class="mt-2">{{ item.name }}</div>
</router-link>
</div>
</div>
</el-card>
</div>
<div class="md:flex">
<el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
<template #header>
<span>访问量趋势图</span>
</template>
<div> <div>
<v-charts style="height: 350px" :option="workbenchData.visitorOption" :autoresize="true" /> <div class="text-info">{{ item.name }}</div>
<div class="text-6xl">{{ item.num }}</div>
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
item.percent }}%</span></div> -->
</div>
</div>
</div> </div>
</el-card> </el-card>
<el-card class="!border-none mb-4" shadow="never"> <el-card shadow="never" class="mt-4 !border-none">
<template #header>
<span>服务支持</span>
</template>
<div> <div>
<div v-for="(item, index) in workbenchData.support" :key="index"> <div class="mb-6 flex justify-between items-center">
<div class="flex items-center pb-10 pt-10" :class="{ <span class="text-2xl">趋势</span>
'border-b border-br': index == 0
}">
<image-contain :width="120" :height="120" class="flex-none" :src="item.image" />
<div class="ml-2">
<div>{{ item.title }}</div>
<div class="text-tx-regular text-xs mt-4">{{ item.desc }}</div>
</div>
</div>
</div> </div>
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
</div> </div>
</el-card> </el-card>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup name="workbench"> <script lang="ts" setup name="statistics_user">
import { getWorkbench } from '@/api/app' import { getWorkbench } from '@/api/app'
import moment from 'moment'
import vCharts from 'vue-echarts' import vCharts from 'vue-echarts'
// 表单数据
const workbenchData: any = reactive({
version: {
version: '', // 版本号
website: '', // 官网
based: '',
channel: {
gitee: '',
website: ''
}
},
support: [],
today: {}, // 今日数据
menu: [], // 常用功能
visitor: [], // 访问量
article: [], // 文章阅读量
visitorOption: { // 表单数据
const visitorOption: any = reactive({
xAxis: { xAxis: {
type: 'category', type: 'category',
data: [0] data: [0],
axisLabel: {
rotate: 45,
color: '#333'
}
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
position: 'left',
axisLabel: {
formatter: '{value}'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
legend: { legend: {
data: ['访问量'] data: ['访问量']
@ -166,36 +75,159 @@ const workbenchData: any = reactive({
smooth: true smooth: true
} }
] ]
})
// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([
// {
// name: '访客数',
// type: 'people',
// icon: 'RectangleCopy',
// num: 0,
// percent: 0
// },
// {
// name: '浏览量',
// type: 'browse',
// icon: 'RectangleCopy49',
// num: 0,
// percent: 0
// },
// {
// name: '新增用户数',
// type: 'newUser',
// icon: 'RectangleCopy53',
// num: 0,
// percent: 0
// },
// {
// name: '成交用户数',
// type: 'payPeople',
// icon: 'RectangleCopy5',
// num: 0,
// percent: 0
// },
// {
// name: '访客-支付转换率',
// type: 'payPercent',
// icon: 'RectangleCopy4',
// num: 0,
// percent: 0
// },
// {
// name: '激活付费会员数',
// type: 'payUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '充值用户数',
// type: 'rechargePeople',
// icon: 'RectangleCopy59',
// num: 0,
// percent: 0
// },
// {
// name: '客单价',
// type: 'payPrice',
// icon: 'RectangleCopy15',
// num: 0,
// percent: 0
// },
// {
// name: '累计用户',
// type: 'cumulativeUser',
// icon: 'RectangleCopy54',
// num: 0,
// percent: 0
// },
// {
// name: '累计付费会员数',
// type: 'cumulativePayUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '累计充值用户数',
// type: 'cumulativeRechargePeople',
// icon: 'RectangleCopy6',
// num: 0,
// percent: 0
// },
// {
// name: '累计成交用户数',
// type: 'cumulativePayPeople',
// icon: 'RectangleCopy9',
// num: 0,
// percent: 0
// }
])
function getLastMonthRange() {
// 获取今天的日期
let today = new Date();
// 获取上个月的日期
let lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
// 格式化日期为 "年-月-日"
let formatDateString = (date) => {
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且补0
let day = String(date.getDate()).padStart(2, '0'); // 补0
return `${year}-${month}-${day}`;
};
// 格式化上个月和今天的日期
let lastMonthFormatted = formatDateString(lastMonth);
let todayFormatted = formatDateString(today);
// 返回结果数组
return [lastMonthFormatted, todayFormatted];
} }
})
// 获取工作台主页数据
const getData = () => {
getWorkbench()
.then((res: any) => {
workbenchData.version = res.version
workbenchData.today = res.today
workbenchData.menu = res.menu
workbenchData.visitor = res.visitor
workbenchData.support = res.support
const startEndTime = ref([new Date(), new Date()]);
const startEndTime2 = ref(getLastMonthRange());
const getData2 = () => {
let date = '';
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
getWorkbench({
date: date
}).then(res => {
// 清空echarts 数据 // 清空echarts 数据
workbenchData.visitorOption.xAxis.data = [] visitorOption.xAxis.data = []
workbenchData.visitorOption.series[0].data = [] visitorOption.series = []
console.log(res)
visitorOption.xAxis.data = Object.keys(res[0].value)
// 写入从后台拿来的数据 res.forEach((item, index) => {
res.visitor.date.reverse().forEach((item: any) => { visitorOption.series[index] = {
workbenchData.visitorOption.xAxis.data.push(item) type: 'line',
smooth: true,
data: Object.values(item.value),
name: item.title
}
basicList[index] = {
name: item.title,
type: 'payPrice',
icon: 'RectangleCopy14',
num: item.total_money,
}
visitorOption.legend.data.push(item.title)
}) })
res.visitor.list[0].data.forEach((item: any) => {
workbenchData.visitorOption.series[0].data.push(item)
})
})
.catch((err: any) => {
}) })
} }
onMounted(() => { onMounted(() => {
getData() getData2()
}) })
</script> </script>
<style lang="scss" scoped></style>