修复BUG
This commit is contained in:
parent
213bb4076d
commit
0460c3157c
|
|
@ -20,7 +20,7 @@ import java.util.Map;
|
|||
|
||||
@AllArgsConstructor
|
||||
@RestController
|
||||
@RequestMapping("/api/oms-api/report")
|
||||
@RequestMapping("/report")
|
||||
public class ReportController extends BaseController {
|
||||
private final OOrderService orderService;
|
||||
private final OOrderItemService orderItemService;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 首页今日销售统计
|
||||
export function todayDaily(query) {
|
||||
return request({
|
||||
url: '/api/oms-api/report/todayDaily',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 销售统计
|
||||
export function salesDaily(query) {
|
||||
return request({
|
||||
url: '/api/oms-api/report/salesDaily',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function salesTopSku(query) {
|
||||
return request({
|
||||
url: '/api/oms-api/report/salesTopSku',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
|
@ -61,10 +61,11 @@ export default {
|
|||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
setOptions({date,salesVolume,salesOrder } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: date,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
|
|
@ -90,10 +91,11 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
data: [ '销售额','订单统计']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
series: [
|
||||
{
|
||||
name: '销售额', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
|
|
@ -104,12 +106,12 @@ export default {
|
|||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
data: salesVolume,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
name: '订单统计',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
|
|
@ -124,7 +126,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
data: salesOrder,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
|
|
|
|||
|
|
@ -1,19 +1,5 @@
|
|||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="stock" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
库存
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="1212" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
|
|
@ -21,9 +7,9 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
销售额
|
||||
今日销售额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="chartData.salesVolume" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -34,12 +20,26 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单
|
||||
今日订单量
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="chartData.orderCount" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="stock" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
当前库存
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="chartData.inventory" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
|
|
@ -47,9 +47,9 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
服务客户
|
||||
店铺
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="chartData.shopCount" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -58,12 +58,28 @@
|
|||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取统计
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
|
||||
},
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@ export default {
|
|||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -28,6 +32,14 @@ export default {
|
|||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
|
|
@ -43,7 +55,9 @@ export default {
|
|||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({date} = {}) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
|
@ -52,22 +66,16 @@ export default {
|
|||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
// data: this.chartData.name
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
name: '周销量占比',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
data: this.chartData.data,
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,48 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
<panel-group :chart-data="report" @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
|
||||
<!-- <line-chart :chart-data="lineChartData" />-->
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-table-->
|
||||
<!-- :data="tableData"-->
|
||||
<!-- style="width: 100%">-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="date"-->
|
||||
<!-- label="日期"-->
|
||||
<!-- width="180">-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="name"-->
|
||||
<!-- label="姓名"-->
|
||||
<!-- width="180">-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- prop="address"-->
|
||||
<!-- label="地址">-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
<!-- <el-row :gutter="32">-->
|
||||
<el-row :gutter="32">
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <raddar-chart />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <pie-chart />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="8">-->
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart :chart-data="skuTopData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="24" :lg="12">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <bar-chart />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -35,23 +54,28 @@ import LineChart from './dashboard/LineChart'
|
|||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
|
||||
import { todayDaily,salesDaily,salesTopSku } from "@/api/report/report";
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
// newVisitis: {
|
||||
// expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
// actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
// },
|
||||
// messages: {
|
||||
// expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
// actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
// },
|
||||
// purchases: {
|
||||
// expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
// actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
// },
|
||||
// shoppings: {
|
||||
// expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
// actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
// }
|
||||
salesDaily: {
|
||||
date:['09-15','09-16','09-17','09-18','09-19','09-20','09-21'],
|
||||
salesVolume: [130, 140, 141, 142, 145, 150, 160],
|
||||
salesOrder: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,12 +90,53 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
lineChartData: {
|
||||
date:[],
|
||||
salesVolume:[],
|
||||
salesOrder:[]
|
||||
},
|
||||
skuTopData:{
|
||||
data:[
|
||||
// { value: 320, name: 'AAA' },
|
||||
// { value: 240, name: 'BBB' },
|
||||
// { value: 149, name: 'CC' },
|
||||
// { value: 100, name: 'DD' },
|
||||
// { value: 59, name: 'DEEE' }
|
||||
]
|
||||
},
|
||||
report:{
|
||||
inventory:50,
|
||||
salesVolume:5989.98,
|
||||
orderCount:302,
|
||||
shopCount:8
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 加载统计
|
||||
todayDaily().then(resp=>{
|
||||
|
||||
this.report = resp.data
|
||||
})
|
||||
salesDaily().then(resp=>{
|
||||
|
||||
this.lineChartData.date=[]
|
||||
this.lineChartData.salesVolume =[]
|
||||
this.lineChartData.salesOrder =[]
|
||||
resp.data.forEach(x=>{
|
||||
this.lineChartData.date.push(x.date)
|
||||
this.lineChartData.salesVolume.push(x.amount)
|
||||
this.lineChartData.salesOrder.push(x.count)
|
||||
})
|
||||
})
|
||||
salesTopSku().then(resp=>{
|
||||
console.log("=====",resp.data)
|
||||
this.skuTopData.data= resp.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
// this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue