|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
- <div style="overflow: hidden;max-width: 100%;">
|
|
|
+ <div style="max-width: 100%;">
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col :md="18" :xs="24" :sm="24">
|
|
|
+ <el-col :md="24" :xs="24" :sm="24">
|
|
|
<div class="card-container">
|
|
|
<el-card shadow="always" body-style="padding-bottom:10px;">
|
|
|
<el-row>
|
|
|
@@ -44,131 +44,82 @@
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
- <div class="card-container">
|
|
|
- <el-card shadow="always">
|
|
|
- <template #header>
|
|
|
- <div class="header">
|
|
|
- <div class="title"><i class="fa fa-caret-right"></i>折线图</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="chart1" id="chart1"></div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div class="card-container">
|
|
|
- <el-card shadow="always">
|
|
|
- <template #header>
|
|
|
- <div class="header">
|
|
|
- <div class="title"><i class="fa fa-caret-right"></i>表格</div>
|
|
|
- <div class="right-filter">
|
|
|
- <el-button-group>
|
|
|
- <el-button @click="changeForm('all')" size="small" :type="(filterForm.table=='all')?'primary':''">全部</el-button>
|
|
|
- <el-button @click="changeForm('today')" size="small" :type="(filterForm.table=='today')?'primary':''">今日</el-button>
|
|
|
- <el-button @click="changeForm('week')" size="small" :type="(filterForm.table=='week')?'primary':''">本周</el-button>
|
|
|
- <el-button @click="changeForm('month')" size="small" :type="(filterForm.table=='month')?'primary':''">当月</el-button>
|
|
|
- </el-button-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-table :data="table">
|
|
|
- <el-table-column label="排名" prop="sort"></el-table-column>
|
|
|
- <el-table-column label="会员" prop="name"></el-table-column>
|
|
|
- <el-table-column label="下单">
|
|
|
- <template #default="{row}">{{row.total}}笔</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="金额">
|
|
|
- <template #default="{row}">¥{{row.money}}</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div class="card-container">
|
|
|
- <el-card shadow="always">
|
|
|
- <template #header>
|
|
|
- <div class="header">
|
|
|
- <div class="title"><i class="fa fa-caret-right"></i>柱状图</div>
|
|
|
- <div class="right-filter">
|
|
|
- <el-form :model="filterForm">
|
|
|
- <el-form-item label="统计时间" style="margin-bottom: 0;">
|
|
|
- <el-select v-model="filterForm.select" style="margin-right: 10px;width: 150px;" @change="changeForm(0)">
|
|
|
- <el-option label="第一项" value="one"></el-option>
|
|
|
- <el-option label="第二项" value="two"></el-option>
|
|
|
- <el-option label="第三项" value="three"></el-option>
|
|
|
- </el-select>
|
|
|
- <el-date-picker @change="changeForm(0)" v-model="filterForm.datepicker" style="width: 250px;" type="daterange" range-separator="到"></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="chart3" id="chart3"></div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :md="6" :xs="24" :sm="24">
|
|
|
- <div class="card-container left">
|
|
|
- <el-card shadow="always">
|
|
|
- <div style="font-weight: bold;margin-bottom: 10px;">😀欢迎您,{:$auth->nickname}!</div>
|
|
|
- <el-alert type="success" :closable="false">行到水穷处,坐看云起时。在线乞讨公司,贵阳云起信息科技,跪求打赏😭</el-alert>
|
|
|
- <div class="pay">
|
|
|
- <img src="{:request()->domain()}/assets/img/pay.png">
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div class="card-container left">
|
|
|
- <el-card shadow="always">
|
|
|
- <template #header>
|
|
|
- <div class="header">
|
|
|
- <div class="title"><i class="fa fa-caret-right"></i>进度框样式</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <div class="style-2">
|
|
|
- <div class="box">
|
|
|
- <el-progress type="circle" :percentage="order.percentage[0]"></el-progress>
|
|
|
- <div class="box-title">销售目标</div>
|
|
|
- <div class="box-number">{{order.count}}单/{{order.total}}单</div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="card-container left">
|
|
|
+ <el-card shadow="always">
|
|
|
+ <template #header>
|
|
|
+ <div class="header">
|
|
|
+ <div class="title"><i class="fa fa-caret-right"></i>红薯品种</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <div class="style-3">
|
|
|
- <div class="box">
|
|
|
- <div class="box-title">今日销售额</div>
|
|
|
- <div class="box-content">
|
|
|
- <div class="box-content-left">
|
|
|
- <div class="box-number-top">¥{{order.today}}</div>
|
|
|
- <div class="box-number-bottom">昨日销售额:¥{{order.yestoday}}</div>
|
|
|
+ </template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="style-3">
|
|
|
+ <div class="box">
|
|
|
+
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-content-right" v-for="item in list">
|
|
|
+ <div class="box-number-top">{{item.name}}</div>
|
|
|
+ <div class="box-number-bottom">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="icon bkcolor3" v-if="order.percentage[1]<50">
|
|
|
- <i class="fa fa-arrow-down"></i>
|
|
|
- </div>
|
|
|
- <div class="icon bkcolor2" v-if="order.percentage[1]>=50 && order.percentage[1]<100">
|
|
|
- <i class="fa fa-arrow-down"></i>
|
|
|
- </div>
|
|
|
- <div class="icon bkcolor4" v-if="order.percentage[1]>=100">
|
|
|
- <i class="fa fa-arrow-up"></i>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="card-container left">
|
|
|
+ <el-card shadow="always">
|
|
|
+ <template #header>
|
|
|
+ <div class="header">
|
|
|
+ <div class="title"><i class="fa fa-caret-right"></i>包装箱</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="style-3">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-content-right" v-for="item in box">
|
|
|
+ <div class="box-number-top">{{item.name}}</div>
|
|
|
+ <div class="box-number-bottom">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-progress v-if="order.percentage[1]<50" :percentage="order.percentage[1]" color="#F56C6C"></el-progress>
|
|
|
- <el-progress v-if="order.percentage[1]>=50 && order.percentage[1]<100" :percentage="order.percentage[1]" color="#E6A23C"></el-progress>
|
|
|
- <el-progress v-if="order.percentage[1]>=100" :percentage="order.percentage[1]" color="#45991b"></el-progress>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-container left">
|
|
|
+ <el-card shadow="always">
|
|
|
+ <template #header>
|
|
|
+ <div class="header">
|
|
|
+ <div class="title"><i class="fa fa-caret-right"></i>耗材</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div class="card-container left">
|
|
|
- <el-card shadow="always">
|
|
|
- <template #header>
|
|
|
- <div class="header">
|
|
|
- <div class="title"><i class="fa fa-caret-right"></i>饼状图</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="chart2" id="chart2"></div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="style-3">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-content-right" v-for="item in material">
|
|
|
+ <div class="box-number-top">{{item.name}}</div>
|
|
|
+ <div class="box-number-bottom">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -178,25 +129,10 @@
|
|
|
data:{
|
|
|
echarts:'',
|
|
|
panel:[],
|
|
|
- line:{
|
|
|
- date:[],
|
|
|
- data:[]
|
|
|
- },
|
|
|
- table:[],
|
|
|
- bar:{
|
|
|
- date:[],
|
|
|
- name:[],
|
|
|
- data:[]
|
|
|
- },
|
|
|
- pie:[],
|
|
|
- order:{
|
|
|
- percentage:[0,0]
|
|
|
- },
|
|
|
- filterForm:{
|
|
|
- table:'all',
|
|
|
- select:'one',
|
|
|
- datepicker:['2023-01-01','2023-02-01'],
|
|
|
- }
|
|
|
+ list:[],
|
|
|
+ box:[],
|
|
|
+ material:[]
|
|
|
+
|
|
|
},
|
|
|
onLoad:function (){
|
|
|
Yunqi.use('/assets/js/echarts.min.js').then(res=>{
|
|
|
@@ -208,130 +144,11 @@
|
|
|
parseData:function (){
|
|
|
Yunqi.ajax.get('dashboard/index',{}).then(res=>{
|
|
|
this.panel=res.panel;
|
|
|
- this.line=res.line;
|
|
|
- this.table=res.table;
|
|
|
- this.bar=res.bar;
|
|
|
- this.pie=res.pie;
|
|
|
- this.order=res.order;
|
|
|
- this.chart1();
|
|
|
- this.chart2();
|
|
|
- this.chart3();
|
|
|
+ this.list=res.variety;
|
|
|
+ this.box=res.box;
|
|
|
+ this.material=res.material;
|
|
|
});
|
|
|
},
|
|
|
- chart1:function () {
|
|
|
- let mychart = this.echarts.init(document.getElementById('chart1'), 'walden');
|
|
|
- mychart.setOption({
|
|
|
- title: {text: '每日新增用户数',left: 'center'},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show: false,
|
|
|
- feature: {
|
|
|
- magicType: {show: true, type: ['stack', 'tiled']},
|
|
|
- saveAsImage: {show: true}
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: this.line.date
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- grid: [{
|
|
|
- left: 40,
|
|
|
- top: 40,
|
|
|
- right: 0,
|
|
|
- bottom:30
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: '注册用户',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- areaStyle: {
|
|
|
- normal: {}
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 1.5
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.line.data
|
|
|
- }]
|
|
|
- });
|
|
|
- window.addEventListener('resize',()=>{
|
|
|
- mychart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- chart2:function (){
|
|
|
- let mychart = this.echarts.init(document.getElementById('chart2'))
|
|
|
- mychart.setOption({
|
|
|
- title: {text: '消费比例图',left: 'center'},
|
|
|
- legend: {
|
|
|
- orient: 'horizontal',
|
|
|
- bottom: 0,
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- data:this.pie,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- formatter: "¥{c}",
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- });
|
|
|
- window.addEventListener('resize',()=>{
|
|
|
- mychart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- chart3:function (){
|
|
|
- let mychart = this.echarts.init(document.getElementById('chart3'))
|
|
|
- mychart.setOption({
|
|
|
- title: {text: '消费日历图',left: 'center'},
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'left',
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- xAxis: {
|
|
|
- data: this.bar.date
|
|
|
- },
|
|
|
- grid: [{
|
|
|
- left: 100,
|
|
|
- top: 40,
|
|
|
- right: 40,
|
|
|
- bottom:20
|
|
|
- }],
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- name:this.bar.name[0],
|
|
|
- data: this.bar.data[0]
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- name:this.bar.name[1],
|
|
|
- data: this.bar.data[1]
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- name:this.bar.name[2],
|
|
|
- data: this.bar.data[2]
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
- window.addEventListener('resize',()=>{
|
|
|
- mychart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- changeForm:function (type){
|
|
|
- if(type){
|
|
|
- this.filterForm.table=type;
|
|
|
- }
|
|
|
- this.parseData();
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -396,7 +213,6 @@
|
|
|
}
|
|
|
.style-3{
|
|
|
padding: 10px;
|
|
|
- width: 87%;
|
|
|
margin:0 auto;
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -404,7 +220,6 @@
|
|
|
text-align: left;
|
|
|
}
|
|
|
.style-3 .box{
|
|
|
- height: 190px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
@@ -413,15 +228,22 @@
|
|
|
text-align: left;
|
|
|
}
|
|
|
.style-3 .box-number-top{
|
|
|
- font-size: 26px;
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
.style-3 .box-number-bottom{
|
|
|
- color: darkgrey;
|
|
|
+ font-size: 24px;
|
|
|
+ color: blueviolet;
|
|
|
}
|
|
|
.style-3 .box-content{
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ /* justify-content: space-between; */
|
|
|
align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.box-content .box-content-right{
|
|
|
+ min-width: 150px;
|
|
|
+ padding-bottom: 16px;
|
|
|
}
|
|
|
.style-3 .icon{
|
|
|
color: #fff;
|