mirror of
https://gitee.com/ZhongBangKeJi/crmeb_java.git
synced 2026-04-30 14:11:24 +08:00
我们发布啦
This commit is contained in:
张乐
176
admin/src/views/dashboard/components/baseInfo.vue
Normal file
176
admin/src/views/dashboard/components/baseInfo.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="24" class="baseInfo">
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false" dis-hover :padding="12">
|
||||
<div slot="header" class="acea-row row-between-wrapper">
|
||||
<span>销售额</span>
|
||||
<el-tag type="success">昨日</el-tag>
|
||||
</div>
|
||||
<div class="content" v-if="sales">
|
||||
<span class="content-number spBlock mb15">{{ sales.count }}</span>
|
||||
<div>
|
||||
<span class="content-time mr20">日同比：<i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
<span class="content-time">周同比：<i class="content-is" :class="Number(sales.weekRate)>=0?'up':'down'">{{ sales.weekRate }}</i><i :class="Number(sales.weekRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<span class="content-time">总销售额</span>
|
||||
<span>{{sales.total}} 元</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false" dis-hover :padding="12">
|
||||
<div slot="header" class="acea-row row-between-wrapper">
|
||||
<span>用户量访问</span>
|
||||
<el-tag type="success">昨日</el-tag>
|
||||
</div>
|
||||
<div class="content" v-if="views">
|
||||
<span class="content-number spBlock mb15">{{ views.count }}</span>
|
||||
<div>
|
||||
<span class="content-time mr20">日同比：<i class="content-is" :class="Number(views.dayRate)>=0?'up':'down'">{{ views.dayRate }}</i><i :class="Number(views.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
<span class="content-time">周同比：<i class="content-is" :class="Number(views.weekRate)>=0?'up':'down'">{{ views.weekRate }}</i><i :class="Number(views.weekRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<span class="content-time">总访问量</span>
|
||||
<span>{{ views.total }} Pv</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false" dis-hover :padding="12">
|
||||
<div slot="header" class="acea-row row-between-wrapper">
|
||||
<span>订单量</span>
|
||||
<el-tag type="success">昨日</el-tag>
|
||||
</div>
|
||||
<div class="content" v-if="order">
|
||||
<span class="content-number spBlock mb15">{{ order.count }}</span>
|
||||
<div>
|
||||
<span class="content-time mr20">日同比：<i class="content-is" :class="Number(order.dayRate)>=0?'up':'down'">{{ order.dayRate }}</i><i :class="Number(order.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
<span class="content-time">周同比：<i class="content-is" :class="Number(order.weekRate)>=0?'up':'down'">{{ order.weekRate }}</i><i :class="Number(order.weekRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<span class="content-time">总订单量</span>
|
||||
<span>{{ order.total }} 单</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false" dis-hover :padding="12">
|
||||
<div slot="header" class="acea-row row-between-wrapper">
|
||||
<span>新增用户</span>
|
||||
<el-tag type="success">昨日</el-tag>
|
||||
</div>
|
||||
<div class="content" v-if="user">
|
||||
<span class="content-number spBlock mb15">{{ user.count }}</span>
|
||||
<div>
|
||||
<span class="content-time mr20">日同比：<i class="content-is" :class="Number(user.dayRate)>=0?'up':'down'">{{ user.dayRate }}</i><i :class="Number(user.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
<span class="content-time">周同比：<i class="content-is" :class="Number(user.weekRate)>=0?'up':'down'">{{ user.weekRate }}</i><i :class="Number(user.weekRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" /></span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<span class="content-time">总用户</span>
|
||||
<span>{{ user.total }} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {statisticsOrderApi, statisticsSalesApi, statisticsUserApi, statisticsViewsApi} from '@/api/dashboard'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
infoList: [],
|
||||
grid: {
|
||||
xl: 6,
|
||||
lg: 6,
|
||||
md: 12,
|
||||
sm: 12,
|
||||
xs: 24
|
||||
},
|
||||
excessStyle: {
|
||||
color: '#f56a00',
|
||||
backgroundColor: '#fde3cf'
|
||||
},
|
||||
avatarList: [],
|
||||
sales: null,
|
||||
order: null,
|
||||
user: null,
|
||||
views: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 订单量
|
||||
statisticsOrder() {
|
||||
statisticsOrderApi().then(async res => {
|
||||
this.order = res
|
||||
})
|
||||
},
|
||||
// 销售额
|
||||
statisticsSales() {
|
||||
statisticsSalesApi().then(async res => {
|
||||
this.sales = res
|
||||
})
|
||||
},
|
||||
// 新增用户
|
||||
statisticsUser() {
|
||||
statisticsUserApi().then(async res => {
|
||||
this.user = res
|
||||
})
|
||||
},
|
||||
// 用户访问量
|
||||
statisticsViews() {
|
||||
statisticsViewsApi().then(async res => {
|
||||
this.views = res
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.statisticsOrder();
|
||||
this.statisticsSales();
|
||||
this.statisticsUser();
|
||||
this.statisticsViews();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.ivu-mb{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.up, .el-icon-caret-top {
|
||||
color: #F5222D;
|
||||
font-size: 12px;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.down, .el-icon-caret-bottom {
|
||||
color: #39C15B;
|
||||
font-size: 12px;
|
||||
opacity: 100% !important;
|
||||
}
|
||||
|
||||
.baseInfo {
|
||||
/deep/ .el-card__header {
|
||||
padding: 15px 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
&-number {
|
||||
font-size: 30px;
|
||||
}
|
||||
&-time{
|
||||
font-size:14px;
|
||||
/*color: #8C8C8C;*/
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
admin/src/views/dashboard/components/gridMenu.vue
Normal file
110
admin/src/views/dashboard/components/gridMenu.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="24" class="dashboard-console-grid">
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/user/index'}">
|
||||
<i class="el-icon-user" style="color:#69c0ff" />
|
||||
<p>会员管理</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/operation/setting'}">
|
||||
<i class="el-icon-setting" style="color:#95de64" />
|
||||
<p>系统设置</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/store/index'}">
|
||||
<i class="el-icon-goods" style="color:#ff9c6e" />
|
||||
<p>商品</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/order/index'}">
|
||||
<i class="el-icon-s-order" style="color:#b37feb" />
|
||||
<p>订单管理</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/operation/systemSms/config'}">
|
||||
<i class="el-icon-message" style="color:#ffd666" />
|
||||
<p>短信配置</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/content/articleManager'}">
|
||||
<i class="el-icon-notebook-1" style="color:#5cdbd3" />
|
||||
<p>文章管理</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/distribution/index'}">
|
||||
<i class="el-icon-s-finance" style="color:#ff85c0" />
|
||||
<p>分销管理</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-bind="grid" class="ivu-mb">
|
||||
<el-card :bordered="false">
|
||||
<router-link :to="{path:'/marketing/coupon/list'}">
|
||||
<i class="el-icon-s-ticket" style="color:#ffc069" />
|
||||
<p>优惠券</p>
|
||||
</router-link>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
grid: {
|
||||
xl: 3,
|
||||
lg: 6,
|
||||
md: 6,
|
||||
sm: 8,
|
||||
xs: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ivu-mb{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.divBox {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
.dashboard-console-grid {
|
||||
text-align: center;
|
||||
.ivu-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
i {
|
||||
font-size: 32px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
admin/src/views/dashboard/components/userChart.vue
Normal file
187
admin/src/views/dashboard/components/userChart.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xl="16" :lg="12" :md="24" :sm="24" :xs="24" class="ivu-mb mb10 dashboard-console-visit">
|
||||
<el-card :bordered="false" dis-hover>
|
||||
<div slot="header">
|
||||
<div class="acea-row row-middle">
|
||||
<el-avatar icon="el-icon-s-operation" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px"/>
|
||||
<span class="ivu-pl-8">用户</span>
|
||||
</div>
|
||||
</div>
|
||||
<echarts-from ref="userChart" :echartsTitle="line" :xAxis="xAxis" :series="series" v-if="infoList"></echarts-from>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<el-card :bordered="false" dis-hover class="dashboard-console-visit">
|
||||
<div slot="header">
|
||||
<div class="acea-row row-middle">
|
||||
<el-avatar icon="el-icon-picture-outline-round" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
|
||||
<span class="ivu-pl-8">购买用户统计</span>
|
||||
</div>
|
||||
</div>
|
||||
<echarts-from ref="visitChart" :echartsTitle="circle" :legendData="legendData"
|
||||
:series="seriesUser" v-if="chartBuy"></echarts-from>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {chartUserApi, chartBuyApi} from '@/api/dashboard';
|
||||
import echartsFrom from '@/components/echarts/index';
|
||||
|
||||
export default {
|
||||
name: 'user-chart',
|
||||
components: {echartsFrom},
|
||||
data() {
|
||||
return {
|
||||
line: 'line',
|
||||
circle: 'circle',
|
||||
xAxis: [],
|
||||
infoList: {},
|
||||
series: [],
|
||||
xData: [],
|
||||
y1Data: [],
|
||||
y2Data: [],
|
||||
lists: [],
|
||||
bing_data: [],
|
||||
bing_xdata: [],
|
||||
|
||||
legendData: [],
|
||||
seriesUser: [],
|
||||
chartBuy: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 统计
|
||||
getStatistics() {
|
||||
chartUserApi().then(async res => {
|
||||
this.infoList = res
|
||||
let data = []
|
||||
for (let key in res) {
|
||||
data.push(res[key])
|
||||
this.xAxis.push(key)
|
||||
}
|
||||
this.series = [
|
||||
{
|
||||
data: data,
|
||||
name: '人数（人）',
|
||||
type: 'line',
|
||||
tooltip: true,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
// this.bing_data = res.bing_data;
|
||||
// this.bing_xdata = res.bing_xdata;
|
||||
})
|
||||
},
|
||||
// 用户购买统计
|
||||
getRank() {
|
||||
chartBuyApi().then(async res => {
|
||||
this.chartBuy = res
|
||||
this.legendData = ["未消费用户", "消费一次用户", "留存客户", "回流客户"]
|
||||
this.seriesUser = [{
|
||||
"name": "未消费用户",
|
||||
"value": res.zero,
|
||||
"itemStyle": {
|
||||
"color": "#5cadff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "消费一次用户",
|
||||
"value": res.one,
|
||||
"itemStyle": {
|
||||
"color": "#b37feb"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "留存客户",
|
||||
"value": res.history,
|
||||
"itemStyle": {
|
||||
"color": "#19be6b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "回流客户",
|
||||
"value": res.back,
|
||||
"itemStyle": {
|
||||
"color": "#ff9900"
|
||||
}
|
||||
}]
|
||||
})
|
||||
},
|
||||
// 监听页面宽度变化，刷新表格
|
||||
handleResize() {
|
||||
if (this.infoList && this.series.length !== 0) this.$refs.userChart.handleResize();
|
||||
if (this.infoList) this.$refs.visitChart.handleResize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getStatistics();
|
||||
this.getRank();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.visitChart) {
|
||||
this.visitChart.dispose();
|
||||
this.visitChart = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.acea-row{
|
||||
/deep/.el-avatar--small {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.ivu-pl-8{
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard-console-visit {
|
||||
/deep/.el-card__header{
|
||||
padding: 14px 20px !important;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trees-coadd {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.scollhide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.scollhide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.names {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 84%;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
</style>
|
||||
594
admin/src/views/dashboard/components/visitChart.vue
Normal file
594
admin/src/views/dashboard/components/visitChart.vue
Normal file
@@ -0,0 +1,594 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col san="24" class="ivu-mb">
|
||||
<el-card :bordered="false" class="dashboard-console-visit">
|
||||
<div slot="header">
|
||||
<div class="acea-row row-between-wrapper">
|
||||
<div class="acea-row row-middle">
|
||||
<el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
|
||||
<span class="ivu-pl-8">订单</span>
|
||||
</div>
|
||||
<div class="checkTime">
|
||||
<el-radio-group v-model="visitDate" class="ivu-mr-8">
|
||||
<el-radio label="last30" @change="handleChangeVisitType">30天</el-radio>
|
||||
<el-radio label="week" @change="handleChangeWeek">周</el-radio>
|
||||
<el-radio label="month" @change="handleChangeMonth">月</el-radio>
|
||||
<el-radio label="year" @change="handleChangeYear">年</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>订单量趋势</h4>
|
||||
<echarts-from ref="visitChart" :series="series" :xAxis="xAxis" v-if="info"></echarts-from>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { chartOrder30Api, chartOrderWeekApi, chartOrderMonthApi, chartOrderYearApi } from '@/api/dashboard';
|
||||
import echartsFrom from '@/components/echarts/index';
|
||||
|
||||
export default {
|
||||
components: {echartsFrom},
|
||||
data() {
|
||||
return {
|
||||
infoList: null,
|
||||
visitDate: 'last30',
|
||||
series: [],
|
||||
xAxis: [],
|
||||
info: {},
|
||||
legendData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 时间改变
|
||||
handleChangeVisitType() {
|
||||
this.xAxis = []
|
||||
this.legendData = []
|
||||
chartOrder30Api().then(async res => {
|
||||
this.info = res
|
||||
let pices = []
|
||||
let qualitys = []
|
||||
for (let key in res.price) {
|
||||
pices.push(Number(res.price[key]))
|
||||
this.xAxis.push(key)
|
||||
}
|
||||
for (let key in res.quality) {
|
||||
qualitys.push(Number(res.quality[key]))
|
||||
}
|
||||
this.series = [{
|
||||
"name":"订单金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": pices
|
||||
},
|
||||
{
|
||||
"name":"订单数",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": qualitys
|
||||
}]
|
||||
})
|
||||
},
|
||||
handleChangeWeek() {
|
||||
this.xAxis = []
|
||||
this.legendData = []
|
||||
chartOrderWeekApi().then(async res => {
|
||||
this.info = res
|
||||
this.legendData = ["上周金额", "本周金额", "上周订单数", "本周订单数"]
|
||||
let prePrice = []
|
||||
let price = []
|
||||
let qualitys = []
|
||||
let preQuality = []
|
||||
for (let key in res.prePrice) {
|
||||
prePrice.push(Number(res.prePrice[key]))
|
||||
this.xAxis.push(key)
|
||||
}
|
||||
for (let key in res.price) {
|
||||
price.push(Number(res.price[key]))
|
||||
}
|
||||
for (let key in res.preQuality) {
|
||||
preQuality.push(Number(res.preQuality[key]))
|
||||
}
|
||||
for (let key in res.quality) {
|
||||
qualitys.push(Number(res.quality[key]))
|
||||
}
|
||||
this.series = [
|
||||
{
|
||||
"name":"上周金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": prePrice
|
||||
},
|
||||
{
|
||||
"name":"本周金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": price
|
||||
},
|
||||
{
|
||||
"name":"上周订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": preQuality
|
||||
},
|
||||
{
|
||||
"name":"本周订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": qualitys
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
handleChangeMonth() {
|
||||
this.xAxis = []
|
||||
this.legendData = []
|
||||
chartOrderMonthApi().then(async res => {
|
||||
this.info = res
|
||||
this.legendData = ["上月金额", "本月金额", "上月订单数", "本月订单数"]
|
||||
let prePrice = []
|
||||
let price = []
|
||||
let qualitys = []
|
||||
let preQuality = []
|
||||
for (let key in res.prePrice) {
|
||||
prePrice.push(Number(res.prePrice[key]))
|
||||
this.xAxis.push(key)
|
||||
}
|
||||
for (let key in res.price) {
|
||||
price.push(Number(res.price[key]))
|
||||
}
|
||||
for (let key in res.preQuality) {
|
||||
preQuality.push(Number(res.preQuality[key]))
|
||||
}
|
||||
for (let key in res.quality) {
|
||||
qualitys.push(Number(res.quality[key]))
|
||||
}
|
||||
this.series = [
|
||||
{
|
||||
"name":"上月金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": prePrice
|
||||
},
|
||||
{
|
||||
"name":"本月金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": price
|
||||
},
|
||||
{
|
||||
"name":"上月订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": preQuality
|
||||
},
|
||||
{
|
||||
"name":"本月订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": qualitys
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
handleChangeYear() {
|
||||
this.xAxis = []
|
||||
this.legendData = []
|
||||
chartOrderYearApi().then(async res => {
|
||||
this.info = res
|
||||
this.legendData = ["去年金额", "今年金额", "去年订单数", "今年订单数"]
|
||||
let prePrice = []
|
||||
let price = []
|
||||
let qualitys = []
|
||||
let preQuality = []
|
||||
for (let key in res.prePrice) {
|
||||
prePrice.push(Number(res.prePrice[key]))
|
||||
this.xAxis.push(key)
|
||||
}
|
||||
for (let key in res.price) {
|
||||
price.push(Number(res.price[key]))
|
||||
}
|
||||
for (let key in res.preQuality) {
|
||||
preQuality.push(Number(res.preQuality[key]))
|
||||
}
|
||||
for (let key in res.quality) {
|
||||
qualitys.push(Number(res.quality[key]))
|
||||
}
|
||||
this.series = [
|
||||
{
|
||||
"name":"去年金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": prePrice
|
||||
},
|
||||
{
|
||||
"name":"今年金额",
|
||||
"type":"bar",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#69cdff"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#3eb3f7"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#1495eb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": price
|
||||
},
|
||||
{
|
||||
"name":"去年订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": preQuality
|
||||
},
|
||||
{
|
||||
"name":"今年订单数",
|
||||
"type":"line",
|
||||
"itemStyle":{
|
||||
"normal":{
|
||||
"color":{
|
||||
"x":0,
|
||||
"y":0,
|
||||
"x2":0,
|
||||
"y2":1,
|
||||
"colorStops":[
|
||||
{
|
||||
"offset":0,
|
||||
"color":"#6fdeab"
|
||||
},
|
||||
{
|
||||
"offset":0.5,
|
||||
"color":"#44d693"
|
||||
},
|
||||
{
|
||||
"offset":1,
|
||||
"color":"#2cc981"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": qualitys
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
// 监听页面宽度变化，刷新表格
|
||||
handleResize() {
|
||||
if (this.infoList) this.$refs.visitChart.handleResize();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.handleChangeVisitType();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.acea-row{
|
||||
/deep/.el-avatar--small {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.checkTime{
|
||||
/deep/.el-radio__input{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ivu-pl-8{
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.divBox {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
.dashboard-console-visit {
|
||||
/deep/.el-card__header{
|
||||
padding: 14px 20px !important;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-mb{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user