|
|
@@ -1,50 +1,405 @@
|
|
|
<template>
|
|
|
- <el-card>
|
|
|
- <el-form ref="form" :model="formData" label-width="120px">
|
|
|
- <el-form-item label="商户号：">
|
|
|
- {{formData.admin_id}}
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="账号姓名：">
|
|
|
- {{formData.name}}
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-form ref="member" :model="member" label-width="120px">
|
|
|
- <el-form-item label="可用余额：">
|
|
|
- {{member.available_predeposit}}
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
+ <div class="box">
|
|
|
+ <!-- <div class="header"> -->
|
|
|
+ <div class="head">
|
|
|
+ <div class="headLeft">
|
|
|
+ <div class="title">
|
|
|
+ 您好，欢迎登陆椰子充值后台管理系统！
|
|
|
+ </div>
|
|
|
+ <div class="merchants">
|
|
|
+ <span>商户名称: {{merchantData.name}}</span>
|
|
|
+ <span>商户号： {{merchantData.mchid}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headCenter">
|
|
|
+ <img src="../../assets/userBalance@2x.png" alt="">
|
|
|
+ <div class="userBalance">
|
|
|
+ <span>用户余额</span>
|
|
|
+ <span style="color: #BB1A1A">{{merchantData.available_predeposit}}元</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="recharge" @click="$router.push('/balance')">我要充值</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headCenter">
|
|
|
+ <img src="../../assets/rechargeAmount@2x.png" alt="">
|
|
|
+ <div class="userBalance">
|
|
|
+ <span>今日充值金额</span>
|
|
|
+ <span style="color: #333">{{todayOrder.amountCount}}元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <div class="centerLeft">
|
|
|
+ <div class="todayOrder">
|
|
|
+ <div>今日订单累计（个）</div>
|
|
|
+ <div class="count" >{{todayOrder.count}}</div>
|
|
|
+ <div class="orders">
|
|
|
+ <div class="orderIcon">
|
|
|
+ <img src="../../assets/todayOrder_01@2x.png" alt="">
|
|
|
+ <div>订单总数</div>
|
|
|
+ <div>{{todayOrder.count}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="orderIcon">
|
|
|
+ <img src="../../assets/todayOrder_02@2x.png" alt="">
|
|
|
+ <div>成功订单数</div>
|
|
|
+ <div>{{todayOrder.successCount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="orderIcon">
|
|
|
+ <img src="../../assets/todayOrder_03@2x.png" alt="">
|
|
|
+ <div>失败订单数</div>
|
|
|
+ <div>{{todayOrder.errorCount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="orderIcon">
|
|
|
+ <img src="../../assets/todayOrder_04@2x.png" alt="">
|
|
|
+ <div>处理中订单数</div>
|
|
|
+ <div>{{todayOrder.otherCount}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rechargeType" >
|
|
|
+ <div class="rechargeCar" @click="$router.push('/oilCard')">
|
|
|
+ <img src="../../assets/oilCard@2x.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p style="color: #333;">油卡充值</p>
|
|
|
+ <p style="color: #999999;">中石油、中石化</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rechargeCar" @click="$router.push('/mobileCard')" >
|
|
|
+ <img src="../../assets/mobilePhone@2x.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p style="color: #333;">话费充值</p>
|
|
|
+ <p style="color: #999999;">中石油、中石化</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="main" class="centerRight"></div>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getUserInfo } from '@/api'
|
|
|
+import { getHomeData } from '@/api'
|
|
|
+// 引入 ECharts 主模块
|
|
|
+var echarts = require('echarts/lib/echarts');
|
|
|
+// 引入柱状图
|
|
|
+require('echarts/lib/chart/bar');
|
|
|
+// 引入提示框和标题组件
|
|
|
+require('echarts/lib/component/tooltip');
|
|
|
+require('echarts/lib/component/title');
|
|
|
export default {
|
|
|
- name: 'home',
|
|
|
+ name: 'homeMain',
|
|
|
data() {
|
|
|
return {
|
|
|
- // 表单数据
|
|
|
- formData: {},
|
|
|
- member: {}
|
|
|
- // available_predeposit
|
|
|
+ // 商户信息
|
|
|
+ merchantData: {
|
|
|
+ name: '',
|
|
|
+ mchid: '',
|
|
|
+ available_predeposit: ''
|
|
|
+ },
|
|
|
+ // 今日订单
|
|
|
+ todayOrder: {
|
|
|
+ count: '',
|
|
|
+ errorCount: '',
|
|
|
+ otherCount: '',
|
|
|
+ successCount: '',
|
|
|
+ // 今日充值金额
|
|
|
+ amountCount: ''
|
|
|
+ },
|
|
|
+ // 一周订单总数
|
|
|
+ weekOrderCount: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getUserInfo()
|
|
|
+ this.getHomeData()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getEcharts()
|
|
|
},
|
|
|
methods: {
|
|
|
- async getUserInfo() {
|
|
|
- const res = await getUserInfo()
|
|
|
- console.log('个人中心', res);
|
|
|
+ async getEcharts() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById('main'));
|
|
|
+ // 绘制图表
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: '近一周订单累计：'
|
|
|
+ },
|
|
|
+ color: ['#3398DB'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {show:true},
|
|
|
+ axisTick: {show:true},
|
|
|
+ min: 0,
|
|
|
+ max: +200,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '订单累计',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '60%',
|
|
|
+ data: [10, 52, 30, 30, 39, 160, 190]
|
|
|
+ // data: this.weekOrderCount || []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ // x轴时间
|
|
|
+ let dateArr = []
|
|
|
+ let myDate = new Date()
|
|
|
+ myDate.setDate(myDate.getDate() -6)
|
|
|
+ let dateTemp
|
|
|
+ let flag = 1
|
|
|
+ for (let i = 0; i <7; i++) {
|
|
|
+ dateTemp = myDate.getMonth()+1 + '月' + myDate.getDate()+ '日'
|
|
|
+ dateArr.push(dateTemp)
|
|
|
+ myDate.setDate(myDate.getDate() + flag)
|
|
|
+ }
|
|
|
+ console.log('dateArr', dateArr);
|
|
|
+ option.xAxis[0].data = dateArr
|
|
|
+ const res = await getHomeData()
|
|
|
+ console.log('首页', res);
|
|
|
if (res && res.code == 200) {
|
|
|
- this.formData = res.datas
|
|
|
- this.member = res.datas.member
|
|
|
+ let weekOrderCount = res.datas.weeksStatistics
|
|
|
+ weekOrderCount.forEach(item => this.weekOrderCount.push(item.count))
|
|
|
+ option.series[0].data = this.weekOrderCount
|
|
|
+ myChart.setOption(option)
|
|
|
+ setTimeout(function (){
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ }
|
|
|
+ },50)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ async getHomeData() {
|
|
|
+ const res = await getHomeData()
|
|
|
+ console.log('首页', res);
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.merchantData = res.datas.merchant_info
|
|
|
+ this.todayOrder = res.datas.todayStatistics
|
|
|
+ let weekOrderCount = res.datas.weeksStatistics
|
|
|
+ weekOrderCount.forEach(item => this.weekOrderCount.push(item.count))
|
|
|
+ console.log('weekOrderCount', weekOrderCount);
|
|
|
}
|
|
|
- // this.available_predeposit = res.datas.member.available_predeposit
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
+<style scoped>
|
|
|
+.box {
|
|
|
+ background-color: #F0F3F9;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30px 0px;
|
|
|
+ padding-left: 60px;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: hidden;
|
|
|
+ overflow-x: hidden;
|
|
|
+ margin: -20px;
|
|
|
+}
|
|
|
+.head {
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: space-around; */
|
|
|
+ /* text-align: center; */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.headLeft {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px 10px 10px 40px;
|
|
|
+ height: 236px;
|
|
|
+ width: 600px;
|
|
|
+ line-height: 118px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 30px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.merchants {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3D638A;
|
|
|
+}
|
|
|
+.merchants span {
|
|
|
+ margin: 0 20px;
|
|
|
+}
|
|
|
+.headCenter {
|
|
|
+ margin-right: 30px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 455px;
|
|
|
+ height: 236px;
|
|
|
+ padding: 72px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.headCenter:last-child {
|
|
|
+ width: 370px;
|
|
|
+ margin-right: 0px;
|
|
|
+ border-radius: 10px 40px 40px 10px;
|
|
|
+}
|
|
|
+.headCenter img {
|
|
|
+ width: 92px;
|
|
|
+}
|
|
|
+.headCenter div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 11px 0;
|
|
|
+}
|
|
|
+.headCenter .userBalance {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.headCenter .userBalance span:last-child {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.recharge {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3D638A;
|
|
|
+ margin-top: 55px;
|
|
|
+}
|
|
|
+.center {
|
|
|
+ margin-top:20px;
|
|
|
+ height: 508px;
|
|
|
+}
|
|
|
+.centerLeft {
|
|
|
+ display: inline-block;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 30px;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+.todayOrder {
|
|
|
+ width: 600px;
|
|
|
+ height: 340px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 40px 10px 10px 10px;
|
|
|
+ padding: 42px 59px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.orders {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.count {
|
|
|
+ font-size:32px
|
|
|
+}
|
|
|
+.orderIcon {
|
|
|
+ /* float: left; */
|
|
|
+ /* margin: 44px 48px 0px 0; */
|
|
|
+ /* text-align: center; */
|
|
|
+ margin-top: 44px;
|
|
|
+}
|
|
|
+.orderIcon:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.orderIcon img {
|
|
|
+ width: 58px;
|
|
|
+ height: 56px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+}
|
|
|
+.orderIcon div {
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.orderIcon div:last-child {
|
|
|
+ font-size: 26px;
|
|
|
+}
|
|
|
+.rechargeType {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 600px;
|
|
|
+ height: 149px;
|
|
|
+}
|
|
|
+.rechargeCar {
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px 10px 10px 30px;
|
|
|
+ width: 287px;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 26px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.rechargeCar img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 28px;
|
|
|
+}
|
|
|
+.rechargeCar div {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.rechargeCar:last-child {
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.rechargeCar p {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.rechargeCar p:last-child {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.centerRight {
|
|
|
+ width: 855px;
|
|
|
+ height: 508px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40px;
|
|
|
+ display: inline-block;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px 40px 40px 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style>
|
|
|
-
|
|
|
+.el-main {
|
|
|
+ /* padding: 0; */
|
|
|
+}
|
|
|
+.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
|
|
|
+ border-color: #ccc;
|
|
|
+}
|
|
|
+.el-table--border::after, .el-table--group::after, .el-table::before{
|
|
|
+ background-color: #ccc;
|
|
|
+}
|
|
|
+.el-table td, .el-table th.is-leaf {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+}
|
|
|
+.el-table thead {
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
</style>
|
