wangyifang
/
yunyubang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent b2c8c8ed9e
commit 5b9c934b29
6 changed files with 1018 additions and 29 deletions
Show Stats Download Patch File Download Diff File

27
src/api/dashboard.js
Unescape View File

@ -1,16 +1,33 @@
import request from '@/utils/request'
export function getCounts() {
export function getcustomerData(params) {
return request({
url: '/api/admin/get-counts',
method: 'get'
url: '/api/admin/home/customer',
method: 'get',
params: params
})
}
export function getorderData(params) {
return request({
url: '/api/admin/home/order',
method: 'get',
params: params
})
}
export function getChartsData(params) {
export function getcustomeritemData(params) {
return request({
url: '/api/admin/home/customer-item',
method: 'get',
params: params
})
}
export function getorderitemData(params) {
return request({
url: '/api/admin/get-charts-data',
url: '/api/admin/home/order-item',
method: 'get',
params: params
})

146
src/views/dashboard/components/BarChart.vue
Unescape View File

@ -0,0 +1,146 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '500px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
{
startValue: 0,
endValue: 6, // 显示条数
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 50, //左边的距离
right: 40, //右边的距离
bottom: 26, //右边的距离
handleColor: '#EFEFEF', //h滑动图标的颜色
handleStyle: {
borderColor: '#409EFF',
borderWidth: '1',
shadowBlur: 2,
background: '#EFEFEF',
shadowColor: '#EFEFEF'
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#409EFF'
},
{
offset: 1,
color: '#409EFF'
}
]),
backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter'
}
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisTick: {
show: false
}
}],
series: [{
name: '数据',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

143
src/views/dashboard/components/LineChart.vue
Unescape View File

@ -0,0 +1,143 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
// {
// startValue: 0,
// endValue: 6, // 显示条数
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// // handleSize: 0, //滑动条的 左右2个滑动条的大小
// height: 8, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 26, //右边的距离
// handleColor: '#EFEFEF', //h滑动图标的颜色
// handleStyle: {
// borderColor: '#409EFF',
// borderWidth: '1',
// shadowBlur: 2,
// background: '#EFEFEF',
// shadowColor: '#EFEFEF'
// },
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#409EFF'
// },
// {
// offset: 1,
// color: '#409EFF'
// }
// ]),
// backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// filterMode: 'filter'
// }
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
legendArr:[],
legend: {
orient: 'horizontal',
bottom: '3%',
data:chartdata.legendArr
},
tooltip: {
trigger: 'axis'
},
backgroundColor:"#fff",
grid: {
top: '3%',
left: '2%',
right: '2%',
bottom: '12%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
}],
yAxis: [{
type: 'value',
minInterval: 1,
}],
series: chartdata.series
})
}
}
}
</script>

396
src/views/dashboard/components/PanelGroup.vue
Unescape View File

@ -0,0 +1,396 @@
<template>
<div>
<div class="boxlist">
<div class="box box1">
<div class="boxtitle">
订单统计
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">当日下单/取消</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_date.total"
:duration="3600" />
</div>
<div class="boxcontentitem-small">支付：
{{totaldata.order.order_list.total.order_date.paid}}
</div>
</div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_date.canceled"
:duration="3600" />
</div>
<div class="boxcontentitem-small">退款：
{{totaldata.order.order_list.total.order_date.refunded}}
</div>
</div>
</div>
<div class="boxcline"></div>
<div class="boxcontentsubtitle">当月下单/取消</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_month.total"
:duration="3600" />
</div>
<div class="boxcontentitem-small">支付：
{{totaldata.order.order_list.total.order_month.paid}}
</div>
</div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.order.order_list.total.order_month.canceled"
:duration="3600" />
</div>
<div class="boxcontentitem-small">退款：
{{totaldata.order.order_list.total.order_month.refunded}}
</div>
</div>
</div>
</div>
<div class="box box2">
<div class="boxtitle">
客户数量
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">总注册数 / 总手机号授权</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.customer.customer_list.total.all_customer.total"
:duration="3600" />
</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0" :end-val="totaldata.customer.customer_list.total.all_customer.phone"
:duration="3600" />
</div>
</div>
</div>
<div class="boxcline"></div>
<div class="boxcontentsubtitle">今日注册 / 手机号授权</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0"
:end-val="totaldata.customer.customer_list.total.customer_date.total" :duration="3600" />
</div>
</div>
<div class="boxline"></div>
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<count-to separator="" :start-val="0"
:end-val="totaldata.customer.customer_list.total.customer_date.phone" :duration="3600" />
</div>
</div>
</div>
<div class="boxfooter"></div>
</div>
</div>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
props: {
totaldata: {
type: Object
}
},
components: {
CountTo
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.boxlist {
display: flex;
}
.index_icon {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 3.5625rem;
}
.index_bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.box {
position: relative;
width: 49%;
margin-left: 0.5%;
margin-right: 0.5%;
margin-bottom: 2.375rem;
box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
border-radius: 8px;
box-sizing: border-box;
opacity: 0.8;
padding: 1.25rem 0;
.boxcontentsubtitle {
color: #FFFFFF;
text-align: center;
display: flex;
justify-content: center;
font-size: 1.0625rem;
margin-top: 1.25rem;
}
.boxfooter {
font-size: 1.0625rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
}
.boxtitle {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
padding: 0 1.25rem;
}
.boxcontent {
display: flex;
//justify-content: space-around;
align-items: center;
.boxline {
width: 1px;
height: 4.0625rem;
background: #FFFFFF00;
opacity: 0.3;
margin-left: 2.0625rem;
margin-right: 2.0625rem;
}
.boxcontentitem {
display: flex;
flex-direction: column;
font-size: 19px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
text-align: center;
min-width: 40%;
.boxcontentitem-big {
font-size: 2.625rem;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.box1 {
background: linear-gradient(134deg, #D1AC7B, #DFC69C);
.boxcline {
width: 100%;
background: #DFC69C;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.bline {
background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
height: 0.25rem;
width: 100%;
margin-top: 1.25rem;
}
.box2 {
background: linear-gradient(134deg, #9193BC, #B7B9D4);
.boxcline {
width: 100%;
background: #B7B9D4;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.box3 {
background: linear-gradient(-55deg, #F6A868, #F4C59E);
.boxcline {
width: 100%;
background: #F4C59E;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.box4 {
background: linear-gradient(-55deg, #64A48E, #9ECABB);
.boxcline {
width: 100%;
background: #9ECABB;
height: 0.125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.panel-group {
// margin-top: 18px;
margin-left: -2% !important;
margin-right: -3% !important;
.card-panel-col {
margin: 0 2%;
margin-bottom: 32px;
}
.card-panel {
height: 130px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
text-align: center;
// background: #fff;
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
// border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
// .icon-people {
// background: #40c9c6;
// }
// .icon-message {
// background: #36a3f7;
// }
// .icon-money {
// background: #f4516c;
// }
// .icon-shopping {
// background: #34bfa3
// }
}
.icon-people {
color: #fff;
}
.icon-message {
color: #fff;
}
.icon-money {
color: #fff;
}
.icon-shopping {
color: #fff
}
.card-panel-icon-wrapper {
float: right;
margin: 22px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 42px;
}
.card-panel-description {
// float: right;
font-weight: bold;
margin: 16px 12px;
.card-panel-text {
line-height: 25px;
color: rgb(255, 255, 255);
font-size: 26px;
margin-bottom: 20px;
width: 70%;
text-align: left;
}
p {
text-align: left;
font-size: 19px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width:550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>

163
src/views/dashboard/components/PieChart.vue
Unescape View File

@ -0,0 +1,163 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
// {
// startValue: 0,
// endValue: 6, // 显示条数
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// // handleSize: 0, //滑动条的 左右2个滑动条的大小
// height: 8, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 26, //右边的距离
// handleColor: '#EFEFEF', //h滑动图标的颜色
// handleStyle: {
// borderColor: '#409EFF',
// borderWidth: '1',
// shadowBlur: 2,
// background: '#EFEFEF',
// shadowColor: '#EFEFEF'
// },
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#409EFF'
// },
// {
// offset: 1,
// color: '#409EFF'
// }
// ]),
// backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// filterMode: 'filter'
// }
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
legend: {
orient: 'horizontal',
bottom: '4%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
grid: {
top: 0,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
radiusArr:[],
series: [{
name: '数据',
type: 'pie',
stack: 'vistors',
barWidth: '60%',
radius: chartdata.radiusArr,
center: ['50%', '45%'],
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

124
src/views/dashboard/index.vue
Unescape View File

@ -1,14 +1,115 @@
<template>
<div class="dashboard-editor-container">
<panel-group :totaldata="totaldata" />
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/exception">客户与订单</router-link>
</div>
<line-chart :chartData="lineArr" />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './components/PanelGroup'
// import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
import {
getcustomerData,
getorderData,
getcustomeritemData,
getorderitemData
} from "../../api/dashboard.js"
export default {
name: 'DashboardAdmin',
components: {
PanelGroup,
PieChart,
LineChart
},
data() {
return {
totaldata: {
customer: {},
order: {}
},
lineArr: {
xArr: [],
legendArr: ["客户", "订单", "成交额"],
series: [{
name: '客户',
type: 'line',
stack: 'Total',
data: []
},
{
name: '订单',
type: 'line',
stack: 'Total',
data: []
},
{
name: '成交额',
type: 'line',
stack: 'Total',
data: []
}
]
}
}
},
created: function() {},
mounted() {
this.$nextTick(() => {
this.load();
this.loadItemData();
})
},
methods: {
async load() {
var that = this;
await getcustomerData().then(res => {
that.totaldata.customer = res;
})
await getorderData().then(res => {
that.totaldata.order = res;
})
},
loadItemData() {
var that = this;
getcustomeritemData().then((res) => {
for (var m of res) {
that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
that.lineArr.series[0].data.push(m.customer_total);
}
}).catch((res) => {})
getorderitemData().then((res) => {
for (var m of res) {
that.lineArr.series[1].data.push(m.order_total);
that.lineArr.series[2].data.push(m.paid_money_total);
}
}).catch((res) => {})
}
}
}
</script>
@ -18,7 +119,30 @@
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
.chart-title {
font-size: 16px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>

Write Preview
Loading…
Cancel
Save