hupeng
5 years ago
12 changed files with 522 additions and 144 deletions
@ -0,0 +1,112 @@
|
||||
<template> |
||||
<div :class="className" :style="{height:height,width:width}"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
import { debounce } from '@/utils' |
||||
import { chart } from '@/api/visits' |
||||
|
||||
const animationDuration = 6000 |
||||
|
||||
export default { |
||||
props: { |
||||
className: { |
||||
type: String, |
||||
default: 'chart' |
||||
}, |
||||
width: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
height: { |
||||
type: String, |
||||
default: '300px' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
chart: null, |
||||
day: [],num: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.initChart() |
||||
this.__resizeHandler = debounce(() => { |
||||
if (this.chart) { |
||||
this.chart.resize() |
||||
} |
||||
}, 100) |
||||
window.addEventListener('resize', this.__resizeHandler) |
||||
}, |
||||
beforeDestroy() { |
||||
if (!this.chart) { |
||||
return |
||||
} |
||||
window.removeEventListener('resize', this.__resizeHandler) |
||||
this.chart.dispose() |
||||
this.chart = null |
||||
}, |
||||
methods: { |
||||
initChart() { |
||||
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
||||
chart().then(res => { |
||||
var _info = res.chartT, |
||||
day = [], |
||||
num = []; |
||||
_info.forEach(function(item) { |
||||
day.push(item.time); |
||||
num.push(item.num); |
||||
}); |
||||
|
||||
console.log(day,num) |
||||
|
||||
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: day, |
||||
axisTick: { |
||||
alignWithLabel: true |
||||
} |
||||
}], |
||||
yAxis: [{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false |
||||
} |
||||
}], |
||||
series: [{ |
||||
name: 'pageA', |
||||
type: 'line', |
||||
stack: 'vistors', |
||||
barWidth: '60%', |
||||
data: num, |
||||
animationDuration |
||||
}] |
||||
}) |
||||
|
||||
}) |
||||
|
||||
console.log('day:'+this.day) |
||||
|
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,133 @@
|
||||
<template> |
||||
<el-row :gutter="40" class="panel-group"> |
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> |
||||
<div class="card-panel"> |
||||
<div class="card-panel-icon-wrapper icon-people"> |
||||
<i class="el-icon-s-order card-panel-icon"></i> |
||||
</div> |
||||
<div class="card-panel-description"> |
||||
<div class="card-panel-text">今日订单数</div> |
||||
<count-to :start-val="0" :end-val="count.todayCount" :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"> |
||||
<div class="card-panel-icon-wrapper icon-message"> |
||||
<i class="el-icon-s-order card-panel-icon"></i> |
||||
</div> |
||||
<div class="card-panel-description"> |
||||
<div class="card-panel-text">昨日订单数</div> |
||||
<count-to :start-val="0" :end-val="count.proCount" :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"> |
||||
<div class="card-panel-icon-wrapper icon-money"> |
||||
<i class="el-icon-s-order card-panel-icon"></i> |
||||
</div> |
||||
<div class="card-panel-description"> |
||||
<div class="card-panel-text">上周订单数</div> |
||||
<count-to :start-val="0" :end-val="count.lastWeekCount" :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"> |
||||
<div class="card-panel-icon-wrapper icon-shopping"> |
||||
<i class="el-icon-s-order card-panel-icon"></i> |
||||
</div> |
||||
<div class="card-panel-description"> |
||||
<div class="card-panel-text">本月订单数</div> |
||||
<count-to :start-val="0" :end-val="count.monthCount" :duration="3600" class="card-panel-num"/> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
<script> |
||||
import CountTo from 'vue-count-to' |
||||
import { get,gett } from '@/api/visits' |
||||
export default { |
||||
components: { |
||||
CountTo |
||||
}, |
||||
data() { |
||||
return { |
||||
count: { todayPrice: 0, todayCount: 0, proPrice: 0, proCount: 0, |
||||
monthPrice: 0, monthCount: 0, lastWeekCount: 0, lastWeekPrice: 0 } |
||||
} |
||||
}, |
||||
mounted() { |
||||
gett().then(res => { |
||||
this.count.todayPrice = res.todayPrice |
||||
this.count.todayCount = res.todayCount |
||||
this.count.proCount = res.proCount |
||||
this.count.proPrice = res.proPrice |
||||
|
||||
this.count.monthPrice = res.monthPrice |
||||
this.count.monthCount = res.monthCount |
||||
this.count.lastWeekCount = res.lastWeekCount |
||||
this.count.lastWeekPrice = res.lastWeekPrice |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
.panel-group { |
||||
margin-top: 18px; |
||||
.card-panel-col{ |
||||
margin-bottom: 32px; |
||||
} |
||||
.card-panel { |
||||
height: 108px; |
||||
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); |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,73 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px"> |
||||
<el-form-item label="AppID" > |
||||
<el-input v-model="form.wxpay_appId" style="width: 370px;"/> |
||||
</el-form-item> |
||||
<el-form-item label="商户id" > |
||||
<el-input v-model="form.wxpay_mchId" style="width: 370px;" type="password" /> |
||||
</el-form-item> |
||||
<el-form-item label="商户密钥" > |
||||
<el-input v-model="form.wxpay_mchKey" style="width: 370px;" type="password" /> |
||||
</el-form-item> |
||||
<el-form-item label="" > |
||||
<el-button type="primary" @click="doSubmit">提交</el-button> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import checkPermission from '@/utils/permission' |
||||
import initData from '@/mixins/initData' |
||||
import { del, add, get } from '@/api/yxSystemConfig' |
||||
import eForm from './form' |
||||
import picUpload from '@/components/pic-upload' |
||||
import { Message } from 'element-ui' |
||||
export default { |
||||
components: { eForm, picUpload }, |
||||
mixins: [initData], |
||||
data() { |
||||
return { |
||||
delLoading: false, |
||||
form: { |
||||
wxpay_appId: '', |
||||
wxpay_mchId: '', |
||||
wxpay_mchKey: '' |
||||
}, |
||||
rules: { |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
get().then(rese=>{ |
||||
let newObj = {} |
||||
rese.content.map(function (key,value) { |
||||
let keyName = key.menuName; |
||||
newObj[keyName] = key.value |
||||
}) |
||||
|
||||
this.form = newObj |
||||
}) |
||||
}, |
||||
methods: { |
||||
checkPermission, |
||||
doSubmit() { |
||||
add(this.form).then(res => { |
||||
Message({message: '设置成功',type: 'success'}) |
||||
}).catch(err => { |
||||
//this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,69 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px"> |
||||
<el-form-item label="AppID" > |
||||
<el-input v-model="form.wxapp_appId" style="width: 370px;"/> |
||||
</el-form-item> |
||||
<el-form-item label="小程序密钥" > |
||||
<el-input v-model="form.wxapp_secret" style="width: 370px;" type="password" /> |
||||
</el-form-item> |
||||
<el-form-item label="" > |
||||
<el-button type="primary" @click="doSubmit">提交</el-button> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import checkPermission from '@/utils/permission' |
||||
import initData from '@/mixins/initData' |
||||
import { del, add, get } from '@/api/yxSystemConfig' |
||||
import eForm from './form' |
||||
import picUpload from '@/components/pic-upload' |
||||
import { Message } from 'element-ui' |
||||
export default { |
||||
components: { eForm, picUpload }, |
||||
mixins: [initData], |
||||
data() { |
||||
return { |
||||
delLoading: false, |
||||
form: { |
||||
wxapp_appId: '', |
||||
wxapp_secret: '' |
||||
}, |
||||
rules: { |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
get().then(rese=>{ |
||||
let newObj = {} |
||||
rese.content.map(function (key,value) { |
||||
let keyName = key.menuName; |
||||
newObj[keyName] = key.value |
||||
}) |
||||
|
||||
this.form = newObj |
||||
}) |
||||
}, |
||||
methods: { |
||||
checkPermission, |
||||
doSubmit() { |
||||
add(this.form).then(res => { |
||||
Message({message: '设置成功',type: 'success'}) |
||||
}).catch(err => { |
||||
//this.loading = false |
||||
console.log(err.response.data.message) |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue