mirror of
https://gitee.com/ZhongBangKeJi/crmeb_java.git
synced 2026-04-25 04:28:33 +08:00
我们发布啦
This commit is contained in:
张乐
102
admin/src/views/dashboard/admin/components/BarChart.vue
Normal file
102
admin/src/views/dashboard/admin/components/BarChart.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<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'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
118
admin/src/views/dashboard/admin/components/BoxCard.vue
Normal file
118
admin/src/views/dashboard/admin/components/BoxCard.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-card class="box-card-component" style="margin-left:8px;">
|
||||
<div slot="header" class="box-card-header">
|
||||
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<pan-thumb :image="avatar" class="panThumb" />
|
||||
<mallki class-name="mallki-text" text="vue-element-admin" />
|
||||
<div style="padding-top:35px;" class="progress-item">
|
||||
<span>Vue</span>
|
||||
<el-progress :percentage="70" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>JavaScript</span>
|
||||
<el-progress :percentage="18" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>Css</span>
|
||||
<el-progress :percentage="12" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>ESLint</span>
|
||||
<el-progress :percentage="100" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
import Mallki from '@/components/TextHoverEffect/Mallki'
|
||||
|
||||
export default {
|
||||
components: { PanThumb, Mallki },
|
||||
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card-component{
|
||||
.el-card__header {
|
||||
padding: 0px!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.box-card-component {
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
filter: contrast(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mallki-text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 70px!important;
|
||||
width: 70px!important;
|
||||
position: absolute!important;
|
||||
top: -45px;
|
||||
left: 0px;
|
||||
border: 5px solid #ffffff;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
box-shadow: none!important;
|
||||
/deep/ .pan-info {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
.progress-item {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media only screen and (max-width: 1510px){
|
||||
.mallki-text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
admin/src/views/dashboard/admin/components/LineChart.vue
Normal file
135
admin/src/views/dashboard/admin/components/LineChart.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<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'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
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({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
181
admin/src/views/dashboard/admin/components/PanelGroup.vue
Normal file
181
admin/src/views/dashboard/admin/components/PanelGroup.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<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('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
New Visits
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" 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="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Messages
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :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">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Purchases
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" 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('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Shoppings
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
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: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.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>
|
||||
79
admin/src/views/dashboard/admin/components/PieChart.vue
Normal file
79
admin/src/views/dashboard/admin/components/PieChart.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<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'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
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' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
116
admin/src/views/dashboard/admin/components/RaddarChart.vue
Normal file
116
admin/src/views/dashboard/admin/components/RaddarChart.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<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 = 3000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Technology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
admin/src/views/dashboard/admin/components/TodoList/Todo.vue
Normal file
81
admin/src/views/dashboard/admin/components/TodoList/Todo.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<li :class="{ completed: todo.done, editing: editing }" class="todo">
|
||||
<div class="view">
|
||||
<input
|
||||
:checked="todo.done"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
@change="toggleTodo( todo)"
|
||||
>
|
||||
<label @dblclick="editing = true" v-text="todo.text" />
|
||||
<button class="destroy" @click="deleteTodo( todo )" />
|
||||
</div>
|
||||
<input
|
||||
v-show="editing"
|
||||
v-focus="editing"
|
||||
:value="todo.text"
|
||||
class="edit"
|
||||
@keyup.enter="doneEdit"
|
||||
@keyup.esc="cancelEdit"
|
||||
@blur="doneEdit"
|
||||
>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Todo',
|
||||
directives: {
|
||||
focus(el, { value }, { context }) {
|
||||
if (value) {
|
||||
context.$nextTick(() => {
|
||||
el.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
todo: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteTodo(todo) {
|
||||
this.$emit('deleteTodo', todo)
|
||||
},
|
||||
editTodo({ todo, value }) {
|
||||
this.$emit('editTodo', { todo, value })
|
||||
},
|
||||
toggleTodo(todo) {
|
||||
this.$emit('toggleTodo', todo)
|
||||
},
|
||||
doneEdit(e) {
|
||||
const value = e.target.value.trim()
|
||||
const { todo } = this
|
||||
if (!value) {
|
||||
this.deleteTodo({
|
||||
todo
|
||||
})
|
||||
} else if (this.editing) {
|
||||
this.editTodo({
|
||||
todo,
|
||||
value
|
||||
})
|
||||
this.editing = false
|
||||
}
|
||||
},
|
||||
cancelEdit(e) {
|
||||
e.target.value = this.todo.text
|
||||
this.editing = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
320
admin/src/views/dashboard/admin/components/TodoList/index.scss
Normal file
320
admin/src/views/dashboard/admin/components/TodoList/index.scss
Normal file
@@ -0,0 +1,320 @@
|
||||
.todoapp {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto ;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.new-todo {
|
||||
padding: 10px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.toggle-all {
|
||||
text-align: center;
|
||||
border: none;
|
||||
/* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.toggle-all+label {
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -13px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.toggle-all+label:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
.toggle-all:checked+label:before {
|
||||
color: #737373;
|
||||
}
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: 506px;
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none;
|
||||
/* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
.todo-list li .toggle+label {
|
||||
/*
|
||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: 36px;
|
||||
}
|
||||
.todo-list li .toggle:checked+label {
|
||||
background-size: 36px;
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||
}
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 50px;
|
||||
display: block;
|
||||
line-height: 1.0;
|
||||
font-size: 14px;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
transition: color 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
}
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.footer {
|
||||
color: #777;
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
list-style: none;
|
||||
}
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
127
admin/src/views/dashboard/admin/components/TodoList/index.vue
Normal file
127
admin/src/views/dashboard/admin/components/TodoList/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<section class="todoapp">
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
|
||||
</header>
|
||||
<!-- main section -->
|
||||
<section v-show="todos.length" class="main">
|
||||
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
|
||||
<label for="toggle-all" />
|
||||
<ul class="todo-list">
|
||||
<todo
|
||||
v-for="(todo, index) in filteredTodos"
|
||||
:key="index"
|
||||
:todo="todo"
|
||||
@toggleTodo="toggleTodo"
|
||||
@editTodo="editTodo"
|
||||
@deleteTodo="deleteTodo"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- footer -->
|
||||
<footer v-show="todos.length" class="footer">
|
||||
<span class="todo-count">
|
||||
<strong>{{ remaining }}</strong>
|
||||
{{ remaining | pluralize('item') }} left
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li v-for="(val, key) in filters" :key="key">
|
||||
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
||||
Clear completed
|
||||
</button> -->
|
||||
</footer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Todo from './Todo.vue'
|
||||
|
||||
const STORAGE_KEY = 'todos'
|
||||
const filters = {
|
||||
all: todos => todos,
|
||||
active: todos => todos.filter(todo => !todo.done),
|
||||
completed: todos => todos.filter(todo => todo.done)
|
||||
}
|
||||
const defalutList = [
|
||||
{ text: 'star this repository', done: false },
|
||||
{ text: 'fork this repository', done: false },
|
||||
{ text: 'follow author', done: false },
|
||||
{ text: 'vue-element-admin', done: true },
|
||||
{ text: 'vue', done: true },
|
||||
{ text: 'element-ui', done: true },
|
||||
{ text: 'axios', done: true },
|
||||
{ text: 'webpack', done: true }
|
||||
]
|
||||
export default {
|
||||
components: { Todo },
|
||||
filters: {
|
||||
pluralize: (n, w) => n === 1 ? w : w + 's',
|
||||
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibility: 'all',
|
||||
filters,
|
||||
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
||||
todos: defalutList
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allChecked() {
|
||||
return this.todos.every(todo => todo.done)
|
||||
},
|
||||
filteredTodos() {
|
||||
return filters[this.visibility](this.todos)
|
||||
},
|
||||
remaining() {
|
||||
return this.todos.filter(todo => !todo.done).length
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLocalStorage() {
|
||||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
|
||||
},
|
||||
addTodo(e) {
|
||||
const text = e.target.value
|
||||
if (text.trim()) {
|
||||
this.todos.push({
|
||||
text,
|
||||
done: false
|
||||
})
|
||||
this.setLocalStorage()
|
||||
}
|
||||
e.target.value = ''
|
||||
},
|
||||
toggleTodo(val) {
|
||||
val.done = !val.done
|
||||
this.setLocalStorage()
|
||||
},
|
||||
deleteTodo(todo) {
|
||||
this.todos.splice(this.todos.indexOf(todo), 1)
|
||||
this.setLocalStorage()
|
||||
},
|
||||
editTodo({ todo, value }) {
|
||||
todo.text = value
|
||||
this.setLocalStorage()
|
||||
},
|
||||
clearCompleted() {
|
||||
this.todos = this.todos.filter(todo => !todo.done)
|
||||
this.setLocalStorage()
|
||||
},
|
||||
toggleAll({ done }) {
|
||||
this.todos.forEach(todo => {
|
||||
todo.done = done
|
||||
this.setLocalStorage()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
||||
<el-table-column label="Order_No" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.order_no | orderNoFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Price" width="195" align="center">
|
||||
<template slot-scope="scope">
|
||||
¥{{ scope.row.price | toThousandFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { transactionList } from '@/api/remote-search'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
orderNoFilter(str) {
|
||||
return str.substring(0, 30)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
transactionList().then(response => {
|
||||
this.list = response.data.items.slice(0, 8)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
admin/src/views/dashboard/admin/components/mixins/resize.js
Normal file
55
admin/src/views/dashboard/admin/components/mixins/resize.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
120
admin/src/views/dashboard/admin/index.vue
Normal file
120
admin/src/views/dashboard/admin/index.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<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">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<todo-list />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<box-card />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
72
admin/src/views/dashboard/editor/index.vue
Normal file
72
admin/src/views/dashboard/editor/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb :image="avatar" style="float: left">
|
||||
Your roles:
|
||||
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
|
||||
</pan-thumb>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{ name }}</span>
|
||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="emptyGif" class="emptyGif">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
|
||||
export default {
|
||||
name: 'DashboardEditor',
|
||||
components: { PanThumb },
|
||||
data() {
|
||||
return {
|
||||
emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.emptyGif {
|
||||
display: block;
|
||||
width: 45%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-editor-container {
|
||||
background-color: #e3e3e3;
|
||||
min-height: 100vh;
|
||||
padding: 50px 60px 0px;
|
||||
.pan-info-roles {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
.info-container {
|
||||
position: relative;
|
||||
margin-left: 190px;
|
||||
height: 150px;
|
||||
line-height: 200px;
|
||||
.display_name {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
color: #212121;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
admin/src/views/dashboard/index.vue
Normal file
43
admin/src/views/dashboard/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--头部-->
|
||||
<base-info ref="baseInfo"/>
|
||||
<!--小方块-->
|
||||
<grid-menu class="mb20"/>
|
||||
<!--订单统计-->
|
||||
<visit-chart ref="visitChart"/>
|
||||
<!--用户-->
|
||||
<user-chart ref="userChart" class="mb20"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import adminDashboard from './admin'
|
||||
import editorDashboard from './editor'
|
||||
|
||||
|
||||
import baseInfo from './components/baseInfo';
|
||||
import gridMenu from './components/gridMenu';
|
||||
import visitChart from './components/visitChart';
|
||||
import userChart from './components/userChart';
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: { baseInfo, gridMenu, visitChart, userChart, adminDashboard, editorDashboard },
|
||||
data() {
|
||||
return {
|
||||
currentRole: 'adminDashboard'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
if (!this.roles.includes('admin')) {
|
||||
this.currentRole = 'editorDashboard'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user