Skip to content

L
loveisland
Commit 4e29464a authored by 刘小敏's avatar 刘小敏
Browse files
Options

原来的总览改名字备份

parent 44def18e
Hide whitespace changes
Inline Side-by-side
Showing with 1176 additions and 0 deletions
application/admin/controller/shopro/Overview.php 0 → 100644
View file @ 4e29464a
<?php
namespace app\admin\controller\shopro;
use app\admin\model\shopro\order\Order;
use app\admin\model\shopro\order\OrderItem;
use app\admin\model\shopro\goods\Goods;
use app\admin\model\shopro\user\User;
use app\admin\model\shopro\Share;
use addons\shopro\service\SearchHistory;
class Overview extends Common
{
public function index()
{
$cardList = [
[
'name' => 'total',
'card' => 'shopro/dashboard/total',
'status' => $this->auth->check('shopro/dashboard/total')
],
[
'name' => 'chart',
'card' => 'shopro/dashboard/chart',
'status' => $this->auth->check('shopro/dashboard/chart')
],
[
'name' => 'ranking',
'card' => 'shopro/dashboard/ranking',
'status' => $this->auth->check('shopro/dashboard/ranking')
],
];
$this->assignconfig('cardList', $cardList);
return $this->view->fetch();
}
public function total()
{
// 用户数据
$userData = [
'total' => User::count(),
'today' => User::whereTime('createtime', 'today')->count(),
'week' => User::whereTime('createtime', 'week')->count(),
'array' => collection(User::field('id,createtime')->whereTime('createtime', 'today')->select())->each(function ($user) {
$user->counter = 1;
$user->createtime_unix = $user->getData('createtime') * 1000;
})
];
// -- commission code start --
$agentData = [
'total' => \app\admin\model\shopro\commission\Agent::count(),
'today' => \app\admin\model\shopro\commission\Agent::whereTime('createtime', 'today')->count(),
'week' => \app\admin\model\shopro\commission\Agent::whereTime('createtime', 'week')->count(),
'array' => collection(\app\admin\model\shopro\commission\Agent::field('user_id,createtime')->whereTime('createtime', 'today')->select())->each(function ($agent) {
$agent->counter = 1;
$agent->createtime_unix = $agent->getData('createtime') * 1000;
})
];
// -- commission code end --
// 分享数据
$shareData = [
'total' => Share::count(),
'today' => Share::whereTime('createtime', 'today')->count(),
'week' => Share::whereTime('createtime', 'week')->count(),
'array' => collection(Share::field('id,createtime')->whereTime('createtime', 'today')->select())->each(function ($share) {
$share->counter = 1;
$share->createtime_unix = $share->getData('createtime') * 1000;
})
];
$this->success('获取成功', null, [
'user_data' => $userData,
'agent_data' => $agentData ?? null,
'share_data' => $shareData
]);
}
public function chart()
{
$date = $this->request->param('date', '');
$date = array_values(array_filter(explode(' - ', $date)));
$orders = Order::with(['items'])->whereTime('createtime', 'between', $date)
->order('id', 'asc')->select();
// 订单数
$data['orderNum'] = count($orders);
$data['orderArr'] = [];
// 支付订单(包含退款的订单, 不包含货到付款还未收货(未支付)订单)
$data['payOrderNum'] = 0;
$data['payOrderArr'] = [];
//支付金额(包含退款的订单, 不包含货到付款还未收货(未支付)订单)
$data['payAmountNum'] = 0;
$data['payAmountArr'] = [];
// 支付用户（一个人不管下多少单，都算一个，包含退款的订单, 不包含货到付款还未收货(未支付)订单）
$userIds = [];
$data['payUserNum'] = 0;
$data['payUserArr'] = [];
// 代发货(包含货到付款)
$data['noSendNum'] = 0;
$data['noSendArr'] = [];
//售后维权
$data['aftersaleNum'] = 0;
$data['aftersaleArr'] = [];
//退款订单
$data['refundNum'] = 0;
$data['refundArr'] = [];
foreach ($orders as $key => $order) {
$data['orderArr'][] = [
'counter' => 1,
'createtime' => $order->getData('createtime') * 1000,
'user_id' => $order->user_id
];
// 已支付的，不包含，货到付款未支付的
if (in_array($order->status, [Order::STATUS_PAID, Order::STATUS_COMPLETED])) {
// 支付订单数
$data['payOrderNum']++;
$data['payOrderArr'][] = [
'counter' => 1,
'createtime' => $order->getData('createtime') * 1000,
'user_id' => $order->user_id
];
// 支付金额
$data['payAmountNum'] = bcadd((string)$data['payAmountNum'], $order->pay_fee, 2);
$data['payAmountArr'][] = [
'counter' => $order->pay_fee,
'createtime' => $order->getData('createtime') * 1000,
];
// 下单用户
if (!in_array($order->user_id, $userIds)) {
$data['payUserNum']++;
$data['payUserArr'][] = [
'counter' => 1,
'createtime' => $order->getData('createtime') * 1000,
'user_id' => $order->user_id
];
}
}
// 已支付的，和 货到付款未支付的
if (in_array($order->status, [Order::STATUS_PAID, Order::STATUS_COMPLETED]) || $order->isOffline($order)) {
$flagnoSend = false;
$flagaftersale = false;
$flagrefund = false;
$aftersaleIng = false;
foreach ($order->items as $k => $item) {
if (
!$flagnoSend
&& $item->dispatch_status == OrderItem::DISPATCH_STATUS_NOSEND
&& $item->refund_status == OrderItem::REFUND_STATUS_NOREFUND
&& in_array($order->apply_refund_status, [
Order::APPLY_REFUND_STATUS_NOAPPLY,
Order::APPLY_REFUND_STATUS_REFUSE
])
) {
$flagnoSend = true;
}
if (
$item->aftersale_status == OrderItem::AFTERSALE_STATUS_ING
&& $item->dispatch_status == OrderItem::DISPATCH_STATUS_NOSEND
&& $item->refund_status == OrderItem::REFUND_STATUS_NOREFUND
) {
$aftersaleIng = true;
}
if (!$flagaftersale && $item->aftersale_status != OrderItem::AFTERSALE_STATUS_NOAFTER) {
$data['aftersaleNum']++;
// $data['aftersaleArr'][] = [
// 'counter' => 1,
// 'createtime' => $order->getData('createtime') * 1000,
// ];
$flagaftersale = true;
}
if (!$flagrefund && $item->refund_status > OrderItem::REFUND_STATUS_NOREFUND) {
$data['refundNum']++;
// $data['refundArr'][] = [
// 'counter' => 1,
// 'createtime' => $order->getData('createtime') * 1000,
// ];
$flagrefund = true;
}
}
if (!$aftersaleIng && $flagnoSend) {
// 存在正在售后中的订单，不算待发货（和订单列表保持一直）
$data['noSendNum']++;
// $data['noSendArr'][] = [
// 'counter' => 1,
// 'createtime' => $order->getData('createtime') * 1000,
// ];
}
}
}
$this->success('获取成功', null, $data);
}
public function ranking()
{
$goods = Goods::limit(5)->order('sales', 'desc')->select();
foreach ($goods as $key => $gd) {
$gd->append(['real_sales']);
$result = OrderItem::field('sum(goods_num * goods_price) as sale_total_money')->where('goods_id', $gd['id'])
->whereExists(function ($query) use ($gd) {
$order_table_name = (new Order())->getQuery()->getTable();
$table_name = (new OrderItem())->getQuery()->getTable();
$query->table($order_table_name)->where($table_name . '.order_id=' . $order_table_name . '.id')
->whereIn('status', [Order::STATUS_PAID, Order::STATUS_COMPLETED]); // 已支付的订单
})->find();
$gd['sale_total_money'] = $result['sale_total_money'] ?: 0;
}
$searchHistory = new SearchHistory();
$this->success('获取成功', null, [
'goods' => $goods,
'hot_search' => $searchHistory->hotSearch()
]);
}
}
application/admin/view/shopro/overview/index.html 0 → 100644
View file @ 4e29464a
{include file="/shopro/common/script" /}
<script src="__CDN__/assets/addons/shopro/libs/echarts.min.js?v={$site.version|htmlentities}"></script>
<style>
.dashboard-index .panel-block {
/* background: #f1f4f6; */
}
.dashboard-index .dashboard-index-main {
--el-main-padding: 0;
}
.dashboard-index .el-scrollbar__wrap {
overflow-x: hidden;
}
.dashboard-index .el-scrollbar__bar.is-horizontal {
display: none;
}
.dashboard-index #userTotal,
.dashboard-index #agentTotal,
.dashboard-index #shareTotal {
width: 100%;
height: 66px;
}
.dashboard-index .card {
line-height: 1;
background: var(--sa-background-assist);
border-radius: 8px;
border: 1px solid var(--sa-space);
box-shadow: 0 2px 6px rgb(140 140 140 / 12%);
padding: 12px;
font-size: 12px;
color: var(--sa-font);
margin-bottom: 20px;
}
.dashboard-index .card:hover {
transition: all .2s;
}
@media screen and (min-width: 1200px) {
.dashboard-index .scale-card:hover {
transform: scale(1.05);
}
}
.dashboard-index .card .card-title .left {
font-size: 14px;
color: var(--sa-subtitle);
}
.dashboard-index .card .card-title .left .num {
font-size: 16px;
}
.dashboard-index .card .card-footer {
margin-top: 12px;
}
.dashboard-index .card .card-footer .left {
margin-right: 8px;
}
.dashboard-index .card .card-footer .dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
.dashboard-index .bar-card {
min-height: 358px;
}
.dashboard-index #chartContent {
width: 100%;
height: 296px;
}
.dashboard-index .tab-item {
height: 32px;
line-height: 32px;
margin-right: 20px;
font-size: 14px;
color: var(--sa-subfont);
cursor: pointer;
}
.dashboard-index .tab-item:last-of-type {
margin-right: 0;
}
.dashboard-index .tab-item.is-active {
color: var(--sa-subtitle);
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.dashboard-index .date-time .el-date-editor {
--el-date-editor-datetimerange-width: 320px;
}
}
.dashboard-index .chart-card {
height: 106px;
color: var(--sa-subfont);
}
.dashboard-index .chart-card .card-icon {
width: 24px;
height: 24px;
}
.dashboard-index .chart-card .num {
font-size: 24px;
color: var(--sa-subtitle);
}
.dashboard-index .chart-card .warning {
color: var(--el-color-warning);
}
.dashboard-index .goods-card,
.dashboard-index .hot-search-card {
height: 326px;
}
.dashboard-index .goods-card .header,
.dashboard-index .hot-search-card .header {
line-height: 16px;
font-size: 14px;
color: var(--sa-subtitle);
margin-bottom: 16px;
}
.dashboard-index .top {
width: 18px;
height: 20px;
}
.dashboard-index #rankingContent {
width: 192px;
height: 192px;
}
</style>
<div id="index" class="dashboard-index panel panel-default panel-intro" v-cloak>
<el-container class="panel-block">
<el-main class="dashboard-index-main">
<el-scrollbar height="100%">
{if $auth->check('shopro/dashboard/total')}
<el-row :gutter="20">
<!-- -- commission code start -- -->
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div class="scale-card card ">
<div class="card-title sa-flex sa-row-between">
<div class="left">{{state.total.user.title}} <span
class="num">{{state.total.user.data.total}}</span> </div>
<div>{{state.total.user.tip}} <span>{{state.total.user.data.today}}</span> </div>
</div>
<div id="userTotal"></div>
<div class="card-footer sa-flex">
<span class="left sa-flex">
<span class="dot" :style="{ background: state.total.user.color }"></span>
<span>{{ state.total.user.footer }}</span>
</span>
<span>{{ state.total.user.data.week }}</span>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div class="scale-card card ">
<div class="card-title sa-flex sa-row-between">
<div class="left">{{state.total.agent.title}} <span
class="num">{{state.total.agent.data.total}}</span> </div>
<div>{{state.total.agent.tip}} <span>{{state.total.agent.data.today}}</span> </div>
</div>
<div id="agentTotal"></div>
<div class="card-footer sa-flex">
<span class="left sa-flex">
<span class="dot" :style="{ background: state.total.agent.color }"></span>
<span>{{ state.total.agent.footer }}</span>
</span>
<span>{{ state.total.agent.data.week }}</span>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div class="scale-card card ">
<div class="card-title sa-flex sa-row-between">
<div class="left">{{state.total.share.title}} <span
class="num">{{state.total.share.data.total}}</span> </div>
<div>{{state.total.share.tip}} <span>{{state.total.share.data.today}}</span> </div>
</div>
<div id="shareTotal"></div>
<div class="card-footer sa-flex">
<span class="left sa-flex">
<span class="dot" :style="{ background: state.total.share.color }"></span>
<span>{{ state.total.share.footer }}</span>
</span>
<span>{{ state.total.share.data.week }}</span>
</div>
</div>
</el-col>
<!-- -- commission code end -- -->
<!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<div class="scale-card card ">
<div class="card-title sa-flex sa-row-between">
<div class="left">{{state.total.user.title}} <span
class="num">{{state.total.user.data.total}}</span> </div>
<div>{{state.total.user.tip}} <span>{{state.total.user.data.today}}</span> </div>
</div>
<div id="userTotal"></div>
<div class="card-footer sa-flex">
<span class="left sa-flex">
<span class="dot" :style="{ background: state.total.user.color }"></span>
<span>{{ state.total.user.footer }}</span>
</span>
<span>{{ state.total.user.data.week }}</span>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<div class="scale-card card ">
<div class="card-title sa-flex sa-row-between">
<div class="left">{{state.total.share.title}} <span
class="num">{{state.total.share.data.total}}</span> </div>
<div>{{state.total.share.tip}} <span>{{state.total.share.data.today}}</span> </div>
</div>
<div id="shareTotal"></div>
<div class="card-footer sa-flex">
<span class="left sa-flex">
<span class="dot" :style="{ background: state.total.share.color }"></span>
<span>{{ state.total.share.footer }}</span>
</span>
<span>{{ state.total.share.data.week }}</span>
</div>
</div>
</el-col> -->
</el-row>
{/if}
{if $auth->check('shopro/dashboard/chart')}
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
<div class="bar-card card">
<div class="sa-flex sa-row-between sa-flex-wrap">
<div class="sa-flex">
<div class="tab-item" :class="chart.tabActive == key ? 'is-active' : ''"
v-for="(value, key) in chart.tabsData" :key="key"
@click="onChangeTabActive(key)">
{{ value }}
</div>
</div>
<div class="date-time">
<el-date-picker v-model="chart.dateTime" type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
:shortcuts="chart.shortcuts" @change="onChangeDateTime" :editable="false">
</el-date-picker>
</div>
</div>
<div id="chartContent"></div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
<el-row :gutter="20">
<el-col :xs="12" :sm="8" :md="12" :lg="12" :xl="12" v-for="(value, key) in statistics"
:key="key">
<div class="chart-card scale-card card">
<div class="sa-flex sa-row-between mb-2">
<img class="card-icon"
:src="`/assets/addons/shopro/img/dashboard/${key}.png`" />
<div class="sa-flex" @click="onOpen(value.status)">
<el-button type="info" link size="small">详情
<el-icon class="ml-1">
<arrow-right />
</el-icon>
</el-button>
</div>
</div>
<div class="num mb-1">{{ value.num }}</div>
<div class="sa-flex sa-row-between">
<span>{{ value.text }}</span>
<el-popover popper-class="sa-popper" placement="top" trigger="hover"
:content="value.tip">
<template #reference>
<el-icon class="warning">
<Warning />
</el-icon>
</template>
</el-popover>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
{/if}
{if $auth->check('shopro/dashboard/ranking')}
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="goods-card card">
<div class="header">
<span>销量榜</span>
</div>
<el-table class="sa-table" :data="ranking.goods" stripe>
<el-table-column label="排名" width="60" align="center">
<template #default="scope">
<img class="top"
:src="`/assets/addons/shopro/img/dashboard/top${scope.$index + 1}.png`" />
</template>
</el-table-column>
<el-table-column label="名称" min-width="200">
<template #default="scope">
<div class="sa-flex">
<sa-image :url="scope.row.image" size="20"></sa-image>
<div class="ml-2 sa-table-line-1">
{{ scope.row.title || '-' }}
</div>
</div>
</template>
</el-table-column>
<el-table-column label="销量" width="100">
<template #default="scope">
<div class="sa-table-line-1">
{{ scope.row.real_sales || '-' }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="hot-search-card card">
<div class="header">
<span>热搜榜</span>
</div>
<el-row :gutter="16">
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
<el-table class="sa-table" :data="ranking.hot_search" stripe>
<el-table-column label="排名" width="60" align="center">
<template #default="scope">
<img class="top"
:src="`/assets/addons/shopro/img/dashboard/top${scope.$index + 1}.png`" />
</template>
</el-table-column>
<el-table-column label="名称" min-width="200">
<template #default="scope">
<div class="sa-table-line-1">
{{ scope.row.keyword || '-' }}
</div>
</template>
</el-table-column>
<el-table-column label="搜索量(次)" width="100">
<template #default="scope">
<div class="sa-table-line-1">
{{ scope.row.num }}
</div>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div class="sa-flex sa-row-center">
<div id="rankingContent"></div>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
{/if}
</el-scrollbar>
</el-main>
</el-container>
</div>
\ No newline at end of file
public/assets/js/backend/shopro/overview.js 0 → 100644
View file @ 4e29464a
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/overview/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/overview/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/overview/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;
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment