init
- 框架初始化 - 安装插件 - 修复PHP8.4报错
This commit is contained in:
552
public/assets/js/backend/shopro/dashboard.js
Normal file
552
public/assets/js/backend/shopro/dashboard.js
Normal file
@@ -0,0 +1,552 @@
|
||||
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'moment'], function ($, undefined, Backend, Table, Form, Moment) {
|
||||
|
||||
var Controller = {
|
||||
index: () => {
|
||||
const { reactive, onMounted } = Vue
|
||||
const index = {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
total: {
|
||||
user: {
|
||||
data: {},
|
||||
color: '#806AF6',
|
||||
color1: 'rgba(128, 106, 246, 0.4)',
|
||||
color2: 'rgba(128, 106, 246, 0)',
|
||||
title: '用户数量',
|
||||
tip: '今日新增用户',
|
||||
footer: '本周新增用户人数',
|
||||
},
|
||||
agent: {
|
||||
data: {},
|
||||
color: '#409EFF',
|
||||
color1: 'rgba(64, 158, 255, 0.4)',
|
||||
color2: ' rgba(64, 158, 255, 0)',
|
||||
title: '分销商数量',
|
||||
tip: '今日新增人数',
|
||||
footer: '本周新增分销商人数',
|
||||
},
|
||||
share: {
|
||||
data: {},
|
||||
color: '#21C732',
|
||||
color1: 'rgba(33, 199, 50, 0.4)',
|
||||
color2: 'rgba(33, 199, 50, 0)',
|
||||
title: '分享次数',
|
||||
tip: '今日分享次数',
|
||||
footer: '本周新增分享次数',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
function getTotal() {
|
||||
Fast.api.ajax({
|
||||
url: 'shopro/dashboard/total',
|
||||
type: 'GET',
|
||||
}, function (ret, res) {
|
||||
state.total.agent.data = res.data.agent_data;
|
||||
state.total.share.data = res.data.share_data;
|
||||
state.total.user.data = res.data.user_data;
|
||||
for (var key in state.total) {
|
||||
if (state.total[key].data) {
|
||||
initChartTotal(key)
|
||||
}
|
||||
}
|
||||
return false
|
||||
}, function (ret, res) { })
|
||||
}
|
||||
function initChartTotal(key) {
|
||||
var myChart = echarts.init(document.getElementById(`${key}Total`));
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
var option = {
|
||||
grid: {
|
||||
left: 6,
|
||||
top: 6,
|
||||
right: 6,
|
||||
bottom: 6,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['分', 20, 36, 10, 10, 20],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
// name: state.total.user.title,
|
||||
data: [5, 20, 36, 10, 10, 20], // [5, 20, 36, 10, 10, 20]
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: state.total[key].color,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: state.total[key].color1,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: state.total[key].color2,
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
}]
|
||||
};
|
||||
|
||||
initIntervalTotal(24, 'hours', option, key)
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
function initIntervalTotal(interval, kld, option, key) {
|
||||
let dateTime = `${Moment().format('YYYY-MM-DD')} 00:00:00`;
|
||||
let x = [];
|
||||
let y = [];
|
||||
let timeStamp = [];
|
||||
for (let i = 0; i <= interval; i++) {
|
||||
x.push(Moment(dateTime).add(i, kld).format('HH:mm'));
|
||||
y.push(0);
|
||||
timeStamp.push(Moment(dateTime).add(i, kld).valueOf());
|
||||
}
|
||||
|
||||
x.forEach((item, index) => {
|
||||
state.total[key].data.array.forEach((item) => {
|
||||
if (
|
||||
timeStamp[index + 1] &&
|
||||
item.createtime_unix > timeStamp[index] &&
|
||||
item.createtime_unix <= timeStamp[index + 1]
|
||||
) {
|
||||
y[index]++;
|
||||
}
|
||||
});
|
||||
});
|
||||
option.xAxis.data = x;
|
||||
option.series[0].data = y;
|
||||
}
|
||||
|
||||
const chart = reactive({
|
||||
tabsData: {
|
||||
order: '订单数',
|
||||
payOrder: '支付订单',
|
||||
payAmount: '支付金额',
|
||||
},
|
||||
tabActive: 'order',
|
||||
dateTime: getTimeSlot(),
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
value: getTimeSlot(),
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
value: () => {
|
||||
return getTimeSlot('yesterday');
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近一周',
|
||||
value: () => {
|
||||
return getTimeSlot('week');
|
||||
},
|
||||
},
|
||||
],
|
||||
data: {
|
||||
payAmountArr: [], // 销售额
|
||||
payOrderArr: [], // 订单
|
||||
orderArr: [], //订单数
|
||||
},
|
||||
});
|
||||
|
||||
function onChangeTabActive(type) {
|
||||
chart.tabActive = type;
|
||||
chartOption.series[0].name = chart.tabsData[chart.tabActive];
|
||||
initChart();
|
||||
}
|
||||
|
||||
function onChangeDateTime(e) {
|
||||
// 时间date必选
|
||||
e && getChart();
|
||||
}
|
||||
|
||||
const statistics = reactive({
|
||||
order: {
|
||||
num: 0,
|
||||
text: '订单数',
|
||||
path: '',
|
||||
tip: '时间区间内总的下单数量(包含未支付订单)',
|
||||
status: 'all',
|
||||
},
|
||||
payAmount: {
|
||||
num: 0,
|
||||
text: '支付金额',
|
||||
path: '',
|
||||
tip: '时间区间内支付订单的支付总金额(包含退款订单)',
|
||||
status: 'paid',
|
||||
},
|
||||
payOrder: {
|
||||
num: 0,
|
||||
text: '支付订单',
|
||||
path: '',
|
||||
tip: '时间区间内支付的订单数量(包含退款订单)',
|
||||
status: 'paid',
|
||||
},
|
||||
noSend: {
|
||||
num: 0,
|
||||
text: '待发货订单',
|
||||
path: '',
|
||||
tip: '时间区间内待发货订单数量',
|
||||
status: 'nosend',
|
||||
},
|
||||
aftersale: {
|
||||
num: 0,
|
||||
text: '售后维权',
|
||||
path: '',
|
||||
tip: '时间区间内申请售后维权的订单数量',
|
||||
status: 'aftersale',
|
||||
},
|
||||
refund: {
|
||||
num: 0,
|
||||
text: '退款订单',
|
||||
path: '',
|
||||
tip: '时间区间内退款的订单数量',
|
||||
status: 'refund',
|
||||
},
|
||||
});
|
||||
|
||||
async function getChart() {
|
||||
Fast.api.ajax({
|
||||
url: 'shopro/dashboard/chart',
|
||||
type: 'GET',
|
||||
data: {
|
||||
date: chart.dateTime.join(' - '),
|
||||
}
|
||||
}, function (ret, res) {
|
||||
for (let key in statistics) {
|
||||
statistics[key].num = res.data[`${key}Num`];
|
||||
}
|
||||
|
||||
chart.data.payAmountArr = res.data.payAmountArr; // 销售额
|
||||
chart.data.payOrderArr = res.data.payOrderArr; // 订单
|
||||
chart.data.orderArr = res.data.orderArr; //订单数
|
||||
|
||||
initChart();
|
||||
return false
|
||||
}, function (ret, res) { })
|
||||
}
|
||||
|
||||
// 柱状图参数
|
||||
const chartOption = reactive({
|
||||
grid: {
|
||||
left: '10px',
|
||||
top: '20px',
|
||||
bottom: '20px',
|
||||
right: '20px',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
offset: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
offset: 5,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
show: true,
|
||||
status: 'shadow',
|
||||
z: -1,
|
||||
shadowStyle: {
|
||||
color: 'rgba(191, 191, 191, 0.24)',
|
||||
},
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: chart.tabsData[chart.tabActive],
|
||||
type: 'bar',
|
||||
data: [],
|
||||
zlevel: 1,
|
||||
z: 1,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#806af6',
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(191, 191, 191, 0.24)',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 获取时间刻度
|
||||
function initChart() {
|
||||
if (chart.dateTime) {
|
||||
let time =
|
||||
(new Date(chart.dateTime[1].replace(/-/g, '/')).getTime() -
|
||||
new Date(chart.dateTime[0].replace(/-/g, '/')).getTime()) /
|
||||
1000 +
|
||||
1;
|
||||
let kld = '';
|
||||
let interval = 0;
|
||||
if (time <= 60 * 60) {
|
||||
interval = parseInt(time / 60);
|
||||
|
||||
kld = 'minutes';
|
||||
} else if (time <= 60 * 60 * 24) {
|
||||
interval = parseInt(time / (60 * 60));
|
||||
|
||||
kld = 'hours';
|
||||
} else if (time <= 60 * 60 * 24 * 30 * 1.5) {
|
||||
interval = parseInt(time / (60 * 60 * 24));
|
||||
|
||||
kld = 'days';
|
||||
} else if (time < 60 * 60 * 24 * 30 * 24) {
|
||||
interval = parseInt(time / (60 * 60 * 24 * 30));
|
||||
|
||||
kld = 'months';
|
||||
} else if (time >= 60 * 60 * 24 * 30 * 24) {
|
||||
interval = parseInt(time / (60 * 60 * 24 * 30 * 12));
|
||||
|
||||
kld = 'years';
|
||||
}
|
||||
drawX(interval, kld);
|
||||
console.log(chartOption, 'chartOption')
|
||||
var myChart2 = echarts.init(document.getElementById(`chartContent`));
|
||||
window.onresize = () => {
|
||||
myChart2.resize()
|
||||
}
|
||||
|
||||
|
||||
myChart2.setOption(chartOption);
|
||||
|
||||
} else {
|
||||
chartOption.xAxis.data = [];
|
||||
chartOption.series[0].data = [];
|
||||
}
|
||||
}
|
||||
// 给柱状图数据赋值
|
||||
function drawX(interval, kld) {
|
||||
let x = [];
|
||||
let y = [];
|
||||
let timeStamp = [];
|
||||
for (let i = 0; i <= interval - 1; i++) {
|
||||
if (kld == 'minutes' || kld == 'hours') {
|
||||
x.push(Moment(chart.dateTime[0]).add(i, kld).format('DD HH:mm'));
|
||||
y.push(0);
|
||||
} else if (kld == 'days') {
|
||||
x.push(Moment(chart.dateTime[0]).add(i, kld).format('YYYY-MM-DD'));
|
||||
y.push(0);
|
||||
} else if (kld == 'months') {
|
||||
x.push(Moment(chart.dateTime[0]).add(i, kld).format('YYYY-MM'));
|
||||
y.push(0);
|
||||
} else {
|
||||
x.push(Moment(chart.dateTime[0]).add(i, kld).format('YYYY'));
|
||||
y.push(0);
|
||||
}
|
||||
}
|
||||
for (let i = 1; i <= interval; i++) {
|
||||
timeStamp.push(Moment(chart.dateTime[0]).add(i, kld).valueOf());
|
||||
}
|
||||
x.forEach((item, index) => {
|
||||
chart.data[`${chart.tabActive}Arr`].forEach((item) => {
|
||||
if (
|
||||
item.createtime > (index - 1 >= 0 ? timeStamp[index - 1] : 0) &&
|
||||
item.createtime <= timeStamp[index]
|
||||
) {
|
||||
if (chart.tabActive == 'payAmount') {
|
||||
y[index] = (Number(y[index]) + Number(item.counter)).toFixed(2);
|
||||
} else {
|
||||
y[index]++;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
chartOption.xAxis.data = x;
|
||||
chartOption.series[0].data = y;
|
||||
}
|
||||
// 默认获取当天的时间赋值
|
||||
function getTimeSlot(e) {
|
||||
let beginTime = Moment(new Date()).format('YYYY-MM-DD');
|
||||
let endTime = Moment(new Date()).format('YYYY-MM-DD');
|
||||
switch (e) {
|
||||
case 'yesterday':
|
||||
endTime = Moment().subtract(1, 'days').format('YYYY-MM-DD');
|
||||
beginTime = endTime;
|
||||
break;
|
||||
case 'week':
|
||||
beginTime = Moment().subtract(1, 'weeks').format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'month':
|
||||
beginTime = Moment().subtract(1, 'months').format('YYYY-MM-DD');
|
||||
}
|
||||
let timeSlot = [beginTime + ' 00:00:00', endTime + ' 23:59:59'];
|
||||
return timeSlot;
|
||||
}
|
||||
|
||||
const ranking = reactive({
|
||||
goods: [],
|
||||
hot_search: []
|
||||
})
|
||||
const pieOption = reactive({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '热搜榜',
|
||||
type: 'pie',
|
||||
radius: ['52%', '90%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
zlevel: 1,
|
||||
z: 1,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '16',
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
function getRanking() {
|
||||
Fast.api.ajax({
|
||||
url: 'shopro/dashboard/ranking',
|
||||
type: 'GET',
|
||||
}, function (ret, res) {
|
||||
ranking.goods = res.data.goods
|
||||
ranking.hot_search = res.data.hot_search
|
||||
pieOption.series[0].data = []
|
||||
ranking.hot_search.forEach(item => {
|
||||
pieOption.series[0].data.push({
|
||||
name: item.keyword,
|
||||
value: item.num,
|
||||
});
|
||||
})
|
||||
|
||||
var myChart3 = echarts.init(document.getElementById(`rankingContent`));
|
||||
window.onresize = () => {
|
||||
myChart3.resize()
|
||||
}
|
||||
|
||||
myChart3.setOption(pieOption);
|
||||
|
||||
return false
|
||||
}, function (ret, res) { })
|
||||
}
|
||||
|
||||
function onOpen(status) {
|
||||
Fast.api.open(`shopro/order/order/index?status=${status}&createtime=${encodeURI(JSON.stringify(chart.dateTime))}`, "订单", {
|
||||
callback() {
|
||||
getChart()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
Config.cardList.forEach(item => {
|
||||
if (item.name == 'total' && item.status) {
|
||||
getTotal()
|
||||
}
|
||||
if (item.name == 'chart' && item.status) {
|
||||
getChart()
|
||||
}
|
||||
if (item.name == 'ranking' && item.status) {
|
||||
getRanking()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
state,
|
||||
getTotal,
|
||||
chart,
|
||||
onChangeTabActive,
|
||||
onChangeDateTime,
|
||||
statistics,
|
||||
getChart,
|
||||
chartOption,
|
||||
initChart,
|
||||
drawX,
|
||||
getTimeSlot,
|
||||
ranking,
|
||||
onOpen,
|
||||
}
|
||||
}
|
||||
}
|
||||
createApp('index', index);
|
||||
},
|
||||
};
|
||||
return Controller;
|
||||
});
|
||||
Reference in New Issue
Block a user