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