1299 lines
38 KiB
Vue
1299 lines
38 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<el-card class="order-card-todo" shadow="hover">
|
||
<template #header>
|
||
<vab-icon icon="todo-line" />
|
||
{{ __('待办事项') }}
|
||
</template>
|
||
<el-row
|
||
class="order-card-todo-content"
|
||
style="padding-left: 20px"
|
||
:gutter="24"
|
||
>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon one1">
|
||
<vab-icon icon="file-list-2-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="
|
||
goToPath('/order/onlineOrder', { order_state_id: 2030 })
|
||
"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.wait_shipping_num || 0"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('待发货') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon two1">
|
||
<vab-icon icon="refresh-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="
|
||
goToPath('/order/productOrder', { return_state_id: 3105 })
|
||
"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.review_num"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('待审核退货') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon four1">
|
||
<vab-icon icon="product-hunt-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="
|
||
goToPath('/product/productManagement/productList', {
|
||
product_state_id: 1000,
|
||
})
|
||
"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.off_num"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('违规商品') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon three1">
|
||
<vab-icon icon="product-hunt-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="
|
||
goToPath('/product/productManagement/productList', {
|
||
product_state_id: 1002,
|
||
})
|
||
"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.product_warning_num"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('待补货') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon five1">
|
||
<vab-icon icon="reply-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="goToPath('/SellerComment', { comment_is_reply: 0 })"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.wait_reply_num"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('待回复') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :lg="4" :md="4" :sm="8" :xl="4" :xs="12">
|
||
<el-row align="middle" type="flex">
|
||
<el-col class="xe-icon one1">
|
||
<vab-icon icon="bill-line" />
|
||
</el-col>
|
||
<el-col class="xe-info">
|
||
<el-link
|
||
:underline="false"
|
||
@click="goToPath('/order/invoice', { invoice_status: 0 })"
|
||
>
|
||
<ms-count
|
||
class="xe-num"
|
||
:duration="form.duration"
|
||
:end-val="data.invoice_wait_num"
|
||
:separator="form.separator"
|
||
:start-val="form.startVal"
|
||
/>
|
||
<div class="xe-name">{{ __('待开票') }}</div>
|
||
</el-link>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<el-row :gutter="20">
|
||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
||
<top-card
|
||
background="white"
|
||
:bottom-text="t('本月销售额')"
|
||
:count-config="saleConfig"
|
||
icon="money-cny-circle-line"
|
||
:title="t('销售额')"
|
||
:unit-text="t('元')"
|
||
/>
|
||
</el-col>
|
||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
||
<top-card
|
||
background="white"
|
||
:bottom-text="t('本月订单量')"
|
||
:count-config="orderNumConfig"
|
||
icon="file-list-2-line"
|
||
:title="t('订单量')"
|
||
:unit-text="t('单')"
|
||
/>
|
||
</el-col>
|
||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
||
<top-card
|
||
background="white"
|
||
:bottom-text="t('本月使用优惠券')"
|
||
:count-config="voucherNumConfig"
|
||
icon="file-paper-2-line"
|
||
:title="t('使用优惠券')"
|
||
:unit-text="t('张')"
|
||
/>
|
||
</el-col>
|
||
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
|
||
<top-card
|
||
background="white"
|
||
:bottom-text="t('本月退货单数')"
|
||
:count-config="refundNumConfig"
|
||
icon="refresh-line"
|
||
:title="t('退货单数')"
|
||
:unit-text="t('个')"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card class="order-card1" shadow="hover">
|
||
<template #header>
|
||
<vab-icon icon="shopping-bag-2-line" />
|
||
店铺
|
||
</template>
|
||
<el-row class="order-card1-content">
|
||
<el-col :span="6">
|
||
<p>店铺状态</p>
|
||
<h1
|
||
style="font-size: 22px; margin: 1em 0"
|
||
:style="{
|
||
color:
|
||
pram.store_info.store_is_open === 0 ? 'red' : 'green',
|
||
}"
|
||
>
|
||
{{ formatOpen(pram.store_info.store_is_open) }}
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>商品总数</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.product.total_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>上架数量</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.product.normal_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>等待审核</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.product.verify_waiting_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card class="order-card1" shadow="hover">
|
||
<template #header>
|
||
<vab-icon icon="file-list-2-line" />
|
||
订单
|
||
</template>
|
||
<el-row class="order-card1-content">
|
||
<el-col :span="6">
|
||
<p>订单总数</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.order.total_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>等待付款</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.order.wait_pay_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>已完成</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.order.fin_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<p>待评价</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.order.eva_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card class="order-card1" shadow="hover">
|
||
<template #header>
|
||
<vab-icon icon="refund-line" />
|
||
售后
|
||
</template>
|
||
<el-row class="order-card1-content">
|
||
<el-col :span="8">
|
||
<p>已完成</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.return.fin_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>待审核</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.return.review_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<p>未完成</p>
|
||
<h1>
|
||
<ms-count
|
||
:decimals="countConfig.decimals"
|
||
:duration="countConfig.duration"
|
||
:end-val="pram.return.un_fin_num"
|
||
:prefix="countConfig.prefix"
|
||
:separator="countConfig.separator"
|
||
:start-val="countConfig.startVal"
|
||
:suffix="countConfig.suffix"
|
||
/>
|
||
</h1>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24" v-if="false">
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<el-card v-loading="polylineLoading" class="box-card">
|
||
<el-row :gutter="24">
|
||
<el-col :span="24">
|
||
<div class="grid-content bg-purple">
|
||
<i class="el-icon-paperclip" style="font-size: 50px">
|
||
{{ pram.order.order_day_percentage_complete }}
|
||
</i>
|
||
<br />
|
||
<br />
|
||
<span>{{ __('今日订单完成率') }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<el-card v-loading="polylineLoading" class="box-card">
|
||
<el-row :gutter="24">
|
||
<el-col :span="24">
|
||
<div class="grid-content bg-purple">
|
||
<i class="el-icon-sell" style="font-size: 50px">
|
||
{{ pram.order.order_percentage_complete }}
|
||
</i>
|
||
<br />
|
||
<br />
|
||
<span>{{ __('订单完成率') }}:</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24" v-if="false">
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card
|
||
v-if="rid != 3"
|
||
v-loading="polylineLoading"
|
||
class="box-card"
|
||
style="height: 500px"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col align="right" :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<i class="el-icon-goods" style="font-size: 50px"></i>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<h2>{{ __('店铺及商品提示') }}</h2>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider />
|
||
<span>
|
||
<h4>
|
||
{{ __('店铺状态') }}:
|
||
{{ formatOpen(pram.store_info.store_is_open) }}
|
||
</h4>
|
||
</span>
|
||
<el-divider />
|
||
<span>{{ __('商品总数') }}： {{ pram.product.total_num }}</span>
|
||
<el-divider />
|
||
<span>
|
||
{{ __('已审核商品') }}：{{ pram.product.verify_passed_off_num }}
|
||
</span>
|
||
<el-divider />
|
||
<span>
|
||
{{ __('等待审核') }}：{{ pram.product.verify_waiting_num }}
|
||
</span>
|
||
<el-divider />
|
||
<span>{{ __('已下架') }}：{{ pram.product.illegal_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('售卖中') }}：{{ pram.product.normal_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('违禁') }}：{{ pram.product.off_num }}</span>
|
||
<el-divider />
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card
|
||
v-loading="polylineLoading"
|
||
class="box-card"
|
||
style="height: 500px"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col align="right" :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<i class="el-icon-chat-dot-round" style="font-size: 50px"></i>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<h2 v-if="rid != 3">{{ __('订单') }}</h2>
|
||
<h2 v-else>{{ __('门店订单') }}</h2>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-divider />
|
||
<span>{{ __('今日订单总数') }}：{{ pram.order.day_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('订单总数') }}：{{ pram.order.total_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('已发货') }}：{{ pram.order.ship_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('等待付款') }}：{{ pram.order.wait_pay_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('待评价') }}：{{ pram.order.eva_num }}</span>
|
||
<el-divider />
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="grid-content bg-purple">
|
||
<el-card
|
||
v-if="rid != 3"
|
||
v-loading="polylineLoading"
|
||
class="box-card"
|
||
style="height: 500px"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col align="right" :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<i class="el-icon-chat-dot-round" style="font-size: 50px"></i>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<h2>{{ __('退单') }}</h2>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-divider />
|
||
<span align="center">
|
||
{{ __('退单总数') }}： {{ pram.return.total_num }}
|
||
</span>
|
||
<el-divider />
|
||
<span>{{ __('已完成') }} ：{{ pram.return.fin_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('待审核') }}：{{ pram.return.review_num }}</span>
|
||
<el-divider />
|
||
<span>{{ __('未完成') }}：{{ pram.return.un_fin_num }}</span>
|
||
<el-divider />
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-card v-loading="polylineLoading" class="box-card">
|
||
<div slot="header">
|
||
<vab-icon icon="file-chart-line" />
|
||
{{ __('订单销售趋势图') }}
|
||
<el-radio-group
|
||
v-model="timeChoice"
|
||
class="radio-inline"
|
||
size="small"
|
||
style="float: right"
|
||
@change="statisticCountEvt"
|
||
>
|
||
<el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
|
||
<el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
|
||
<el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
|
||
<el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<vab-chart
|
||
:init-options="initOptions"
|
||
:option="polylineOption"
|
||
style="width: 100%"
|
||
theme="vab-echarts-theme"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card v-if="rid != 3" v-loading="polylineLoading" class="box-card">
|
||
<div slot="header">
|
||
<vab-icon icon="refresh-line" />
|
||
{{ __('退单销售趋势图') }}
|
||
<el-radio-group
|
||
v-model="timeChoice"
|
||
class="radio-inline"
|
||
size="small"
|
||
style="float: right"
|
||
@change="statisticCountReturnReturnEvt"
|
||
>
|
||
<el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
|
||
<el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
|
||
<el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
|
||
<el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<vab-chart
|
||
:init-options="initOptions"
|
||
:option="polylineOptionReturn"
|
||
style="width: 100%"
|
||
theme="vab-echarts-theme"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<el-card v-loading="loading" class="box-card">
|
||
<div slot="header">
|
||
<vab-icon icon="money-dollar-box-line" />
|
||
{{ __('订单销售金额对比图') }}
|
||
<el-radio-group
|
||
v-model="timeChoice"
|
||
class="radio-inline"
|
||
size="small"
|
||
style="float: right"
|
||
@change="statisticAmountEvt"
|
||
>
|
||
<el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
|
||
<el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
|
||
<el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
|
||
<el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<vab-chart
|
||
:init-options="initOptions"
|
||
:option="polylineOptionMake"
|
||
style="width: 100%"
|
||
theme="vab-echarts-theme"
|
||
/>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">
|
||
<el-card v-loading="loading" class="box-card">
|
||
<div slot="header">
|
||
<vab-icon icon="user-6-line" />
|
||
{{ __('客户统计') }}
|
||
<el-radio-group
|
||
v-model="timeChoice"
|
||
class="radio-inline"
|
||
size="small"
|
||
style="float: right"
|
||
@change="getCustomerTimelineEvt"
|
||
>
|
||
<el-radio-button :label="7">{{ t('7天') }}</el-radio-button>
|
||
<el-radio-button :label="30">{{ t('30天') }}</el-radio-button>
|
||
<el-radio-button :label="90">{{ t('3个月') }}</el-radio-button>
|
||
<el-radio-button :label="180">{{ t('半年') }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<vab-chart
|
||
:init-options="initOptions"
|
||
:option="polylineOptionMakeLine"
|
||
style="width: 100%"
|
||
theme="vab-echarts-theme"
|
||
/>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { translateTitle as __ } from '@/utils/i18n'
|
||
import {
|
||
getCustomerTimeline,
|
||
statisticAmount,
|
||
statisticCount,
|
||
statisticState,
|
||
} from '@/api/order/base'
|
||
import { dashboard } from '@/api/order/info'
|
||
import {
|
||
statisticCount as statisticCountReturn,
|
||
statisticState as statisticStateReturn,
|
||
} from '@/api/order/return'
|
||
import VabChart from '@/extra/VabChart'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
import MsChart from '@/extra/VabChart'
|
||
import TopCard from '@/components/MsWidget/TopCard'
|
||
/*
|
||
import MsDateRangePicker from "@/components/MsDateRangePicker";
|
||
import NavList from "@/views/index/components/IconList";
|
||
*/
|
||
import MsCount from '@/components/MsCount'
|
||
import { getSalesAmount } from '@/api/analytics/trade'
|
||
import {
|
||
getOrderNumToday,
|
||
getVoucherActiveNumToday,
|
||
} from '@/api/analytics/order'
|
||
import { getReturnNumToday } from '@/api/analytics/return'
|
||
|
||
export default {
|
||
name: 'OverviewOrder',
|
||
components: {
|
||
VabChart,
|
||
MsChart,
|
||
TopCard,
|
||
/*MsDateRangePicker, NavList,*/ MsCount,
|
||
},
|
||
data() {
|
||
return {
|
||
data: {},
|
||
|
||
form: {
|
||
startVal: 0,
|
||
decimals: 0,
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 5000,
|
||
},
|
||
timeChoice: 7,
|
||
saleConfig: {
|
||
startVal: 0,
|
||
endVal: 0,
|
||
/*decimals: 2,*/
|
||
prefix: '￥',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
|
||
today: 0,
|
||
yestoday: 0,
|
||
daym2m: 0,
|
||
},
|
||
orderNumConfig: {
|
||
startVal: 0,
|
||
endVal: 0,
|
||
/*decimals: 0,*/
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
|
||
today: 0,
|
||
yestoday: 0,
|
||
daym2m: 0,
|
||
},
|
||
refundNumConfig: {
|
||
startVal: 0,
|
||
endVal: 0,
|
||
/*decimals: 0,*/
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
|
||
today: 0,
|
||
yestoday: 0,
|
||
daym2m: 0,
|
||
},
|
||
voucherNumConfig: {
|
||
startVal: 0,
|
||
endVal: 0,
|
||
/*decimals: 0,*/
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
|
||
today: 0,
|
||
yestoday: 0,
|
||
daym2m: 0,
|
||
},
|
||
|
||
countConfig: {
|
||
startVal: 0,
|
||
endVal: _.random(1000, 6000),
|
||
decimals: 0,
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 5000,
|
||
},
|
||
|
||
polylineOptionMakeLine: {
|
||
title: {
|
||
left: 'center',
|
||
text: this.__('最近7天的消费客户数量'),
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: this.__('客户数量'),
|
||
type: 'line',
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
polylineOptionMake: {
|
||
title: {
|
||
left: 'center',
|
||
text: this.__('最近7天的订单成交金额趋势图'),
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: this.__('消费金额'),
|
||
type: 'line',
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
columnOptionsReturn: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
extraCssText: 'z-index:1',
|
||
},
|
||
grid: {
|
||
top: '5%',
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: [],
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
barWidth: '60%',
|
||
data: [10, 52, 20, 33, 39, 33, 22],
|
||
itemStyle: {
|
||
borderRadius: [2, 2, 0, 0],
|
||
color: new VabChart.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
['#88D1FF', '#1890FF'].map((color, offset) => ({
|
||
color,
|
||
offset,
|
||
}))
|
||
),
|
||
},
|
||
},
|
||
],
|
||
},
|
||
polylineOptionReturn: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: this.__('退单数'),
|
||
type: 'line',
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
columnLoading: true,
|
||
polylineLoading: true,
|
||
loading: false,
|
||
initOptions: {
|
||
renderer: 'svg',
|
||
},
|
||
pram: {
|
||
order: {
|
||
order_day_percentage_complete: '0%',
|
||
order_percentage_complete: '0%',
|
||
day_num: 0,
|
||
total_num: 0,
|
||
ship_num: 0,
|
||
wait_pay_num: 0,
|
||
eva_num: 0,
|
||
},
|
||
return: {
|
||
total_num: 0,
|
||
fin_num: 0,
|
||
review_num: 0,
|
||
un_fin_num: 0,
|
||
},
|
||
data: {},
|
||
notice: [],
|
||
product: {
|
||
total_num: 0,
|
||
verify_refused_num: 0,
|
||
verify_passed_off_num: 0,
|
||
illegal_num: 0,
|
||
normal_num: 0,
|
||
off_num: 0,
|
||
},
|
||
store_info: {
|
||
store_is_open: undefined,
|
||
},
|
||
},
|
||
columnOptions: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
extraCssText: 'z-index:1',
|
||
},
|
||
grid: {
|
||
top: '5%',
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: [],
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
barWidth: '60%',
|
||
data: [10, 52, 20, 33, 39, 33, 22],
|
||
itemStyle: {
|
||
borderRadius: [2, 2, 0, 0],
|
||
color: new VabChart.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
['#88D1FF', '#1890FF'].map((color, offset) => ({
|
||
color,
|
||
offset,
|
||
}))
|
||
),
|
||
},
|
||
},
|
||
],
|
||
},
|
||
polylineOption: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
data: [],
|
||
},
|
||
grid: {
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: this.__('有效订单'),
|
||
type: 'line',
|
||
data: [],
|
||
},
|
||
{
|
||
name: this.__('取消订单'),
|
||
type: 'line',
|
||
data: [],
|
||
},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
rid: 'user/rid',
|
||
}),
|
||
},
|
||
created() {
|
||
this.dashboard()
|
||
this.fetchData()
|
||
},
|
||
methods: {
|
||
__,
|
||
t: __,
|
||
goToPath(path, query) {
|
||
this.$router.push({ path: path, query: query })
|
||
},
|
||
|
||
// 商家端-销售额
|
||
async getSalesAmountFun() {
|
||
const { data } = await getSalesAmount()
|
||
this.topData = data
|
||
this.saleConfig = Object.assign(this.saleConfig, data)
|
||
},
|
||
// 商家端-订单量
|
||
async getOrderNumFun() {
|
||
const { data } = await getOrderNumToday()
|
||
this.topData = data
|
||
this.orderNumConfig = Object.assign(this.orderNumConfig, data)
|
||
},
|
||
// 商家端-退货单数
|
||
async getReturnNumFun() {
|
||
const { data } = await getReturnNumToday()
|
||
this.refundNumConfig = Object.assign(this.refundNumConfig, data)
|
||
},
|
||
// 商家端-使用优惠卷数量
|
||
async getVoucherNumFun() {
|
||
const { data } = await getVoucherActiveNumToday()
|
||
this.voucherNumConfig = Object.assign(this.voucherNumConfig, data)
|
||
},
|
||
|
||
formatOpen(row) {
|
||
return row === 0 ? this.__('关闭') : this.__('运营中')
|
||
},
|
||
async statisticStateReturn(days) {
|
||
this.columnLoading = true
|
||
await statisticStateReturn(days)
|
||
this.columnLoading = false
|
||
},
|
||
// 退单销售趋势图
|
||
async statisticCountReturnReturnEvt() {
|
||
this.statisticCountReturnReturn(parseInt(this.timeChoice))
|
||
},
|
||
async statisticCountReturnReturn(days) {
|
||
this.polylineLoading = true
|
||
const { data } = await statisticCountReturn({ days: days })
|
||
this.polylineOptionReturn.xAxis.data = data.map((item) => item.curr_date)
|
||
this.polylineOptionReturn.series[0].data = data.map(
|
||
(item) => item.record_count
|
||
)
|
||
this.polylineLoading = false
|
||
},
|
||
queryData() {
|
||
this.fetchData()
|
||
},
|
||
async fetchData() {
|
||
this.getSalesAmountFun()
|
||
this.getOrderNumFun()
|
||
|
||
this.getReturnNumFun()
|
||
this.getVoucherNumFun()
|
||
|
||
// 订单返回静止状态
|
||
await this.statisticStateReturn()
|
||
// 退单销售趋势图
|
||
await this.statisticCountReturnReturn(parseInt(this.timeChoice))
|
||
// 订单基础状态
|
||
await this.statisticState()
|
||
// 订单销售趋势图
|
||
await this.statisticCount(parseInt(this.timeChoice))
|
||
// 客户统计趋势图
|
||
await this.getCustomerTimeline(parseInt(this.timeChoice))
|
||
// 订单成交金额趋势图
|
||
await this.statisticAmount(parseInt(this.timeChoice))
|
||
},
|
||
async statisticState(days) {
|
||
this.columnLoading = true
|
||
await statisticState(days)
|
||
this.columnLoading = false
|
||
},
|
||
async dashboard() {
|
||
const { data } = await dashboard()
|
||
if (data != null) {
|
||
this.pram = data
|
||
// 代发货
|
||
this.data.wait_shipping_num = data.order.wait_shipping_num
|
||
// 待审核退货
|
||
this.data.review_num = data.return.review_num
|
||
// 违规商品
|
||
this.data.off_num = data.product.off_num
|
||
// 待补货 (缺少字段)
|
||
this.data.product_warning_num = data.product.product_warning_num
|
||
// 待回复
|
||
this.data.wait_reply_num = data.product.wait_reply_num
|
||
// 待开票
|
||
this.data.invoice_wait_num = data.order.invoice_wait_num
|
||
}
|
||
},
|
||
async statisticAmountEvt() {
|
||
this.statisticAmount(parseInt(this.timeChoice))
|
||
},
|
||
//订单成交金额趋势图
|
||
async statisticAmount(days) {
|
||
this.loading = true
|
||
const { data } = await statisticAmount({ days: days })
|
||
this.polylineOptionMake.title.text = this.sprintf(
|
||
this.__('最近 %s 天的订单成交金额趋势图'),
|
||
days
|
||
)
|
||
this.polylineOptionMake.xAxis.data = data.map((item) => item.curr_date)
|
||
this.polylineOptionMake.series[0].data = data.map((item) => item.amount)
|
||
this.loading = false
|
||
},
|
||
async getCustomerTimelineEvt() {
|
||
this.getCustomerTimeline(parseInt(this.timeChoice))
|
||
},
|
||
//客户统计趋势图
|
||
async getCustomerTimeline(days) {
|
||
const { data } = await getCustomerTimeline({ days: days })
|
||
this.polylineOptionMakeLine.title.text = this.sprintf(
|
||
this.__('最近 %s 天的消费客户数量'),
|
||
days
|
||
)
|
||
this.polylineOptionMakeLine.xAxis.data = data.map((item) => item.time)
|
||
this.polylineOptionMakeLine.series[0].data = data.map((item) => item.num)
|
||
},
|
||
async statisticCountEvt() {
|
||
this.statisticCount(parseInt(this.timeChoice))
|
||
},
|
||
// 订单销售趋势图
|
||
async statisticCount(days) {
|
||
this.polylineLoading = true
|
||
const { data } = await statisticCount({ days: days })
|
||
if (!data) return
|
||
this.polylineOption.xAxis.data = data.map((item) => item.curr_date)
|
||
this.polylineOption.series[0].data = data.map(
|
||
(item) => item.effective_count
|
||
)
|
||
this.polylineOption.series[1].data = data.map((item) => item.cancel_count)
|
||
this.polylineLoading = false
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.dashboard-container {
|
||
padding: 0 !important;
|
||
background: $base-color-background !important;
|
||
|
||
:deep() {
|
||
.el-card {
|
||
[class*='-echart'] {
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.is-align-middle {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.xe-icon {
|
||
width: 80px;
|
||
padding: 10px;
|
||
|
||
.i-wh-workbench {
|
||
display: block;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 25px;
|
||
line-height: 50px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background-clip: padding-box;
|
||
}
|
||
}
|
||
|
||
.xe-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.xe-icon i {
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.xe-info {
|
||
padding-left: 10px;
|
||
text-align: left;
|
||
}
|
||
.xe-name {
|
||
font-size: 12px;
|
||
color: #98a9bc;
|
||
}
|
||
|
||
.xe-num {
|
||
display: block;
|
||
font-size: 24px;
|
||
|
||
text-align: left;
|
||
}
|
||
|
||
.xe-label {
|
||
text-align: left;
|
||
display: block;
|
||
font-style: normal;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
color: #979898;
|
||
}
|
||
|
||
.xe-todo {
|
||
text-align: right;
|
||
display: block;
|
||
font-style: normal;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
color: #979898;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.order {
|
||
&-card1 {
|
||
//background: linear-gradient(to right, #60b2fb, #6485f6);
|
||
//color: $base-color-white !important;
|
||
|
||
&-content {
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep {
|
||
.el-card {
|
||
&__header,
|
||
&__body {
|
||
//color: $base-color-white !important;
|
||
|
||
p {
|
||
display: block;
|
||
margin-block-start: 1em;
|
||
margin-block-end: 1em;
|
||
margin-inline-start: 0px;
|
||
margin-inline-end: 0px;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0.67em 0;
|
||
font-size: 2em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
margin-bottom: $base-margin;
|
||
}
|
||
</style>
|