|
@@ -11,14 +11,26 @@
|
|
|
</div>
|
|
</div>
|
|
|
<el-main>
|
|
<el-main>
|
|
|
<div class="card-news mt0">
|
|
<div class="card-news mt0">
|
|
|
- <div class="news-title">经营数据</div>
|
|
|
|
|
|
|
+ <div class="news-title">经营数据
|
|
|
|
|
+ <div class="title-open">
|
|
|
|
|
+ <div class="name">显示数据</div>
|
|
|
|
|
+ <el-switch
|
|
|
|
|
+ v-model="hideState"
|
|
|
|
|
+ :active-value="1"
|
|
|
|
|
+ :inactive-value="0"
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ @change="getHide"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<div class="total-panel">
|
|
<div class="total-panel">
|
|
|
<div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(235, 241, 255);">
|
|
<div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(235, 241, 255);">
|
|
|
<div class="item-warp">
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
<div class="title">今日营业额(元)</div>
|
|
<div class="title">今日营业额(元)</div>
|
|
|
- <div class="number">{{ todayData.order_money ? todayData.order_money:'0' }}</div>
|
|
|
|
|
- <div class="desc">来客订单金额</div>
|
|
|
|
|
|
|
+ <div class="number" v-if="hideState==1">{{ $TOOL.money(todayData.userNum) }}</div>
|
|
|
|
|
+ <div class="number" v-else>0.00</div>
|
|
|
|
|
+ <div class="desc"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-1-icon.png" /></div>
|
|
<div class="right"><img src="@/assets/image/wave-1-icon.png" /></div>
|
|
|
</div>
|
|
</div>
|
|
@@ -28,8 +40,8 @@
|
|
|
<div class="item-warp">
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
<div class="title">今日订单数(单)</div>
|
|
<div class="title">今日订单数(单)</div>
|
|
|
- <div class="number">{{ todayData.order_num ? todayData.order_num:'0' }}</div>
|
|
|
|
|
- <div class="desc">来客订单</div>
|
|
|
|
|
|
|
+ <div class="number">{{ todayData.rechargeNum ? todayData.rechargeNum:'0.00' }}</div>
|
|
|
|
|
+ <div class="desc"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-2-icon.png" /></div>
|
|
<div class="right"><img src="@/assets/image/wave-2-icon.png" /></div>
|
|
|
</div>
|
|
</div>
|
|
@@ -38,46 +50,38 @@
|
|
|
<div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(255, 241, 214);">
|
|
<div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(255, 241, 214);">
|
|
|
<div class="item-warp">
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
- <div class="title">今日核销(单)</div>
|
|
|
|
|
- <div class="number">{{ todayData.order_done ? todayData.order_done:'0' }}</div>
|
|
|
|
|
- <div class="desc">已完成核销</div>
|
|
|
|
|
|
|
+ <div class="title">手机自助打印待处理(单)</div>
|
|
|
|
|
+ <div class="number">{{ todayData.rechargeMoney ? todayData.rechargeMoney:'0.00' }}</div>
|
|
|
|
|
+ <div class="desc"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-3-icon.png" /></div>
|
|
<div class="right"><img src="@/assets/image/wave-3-icon.png" /></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="item-wave"><img src="@/assets/image/wave-3.png" /></div>
|
|
<div class="item-wave"><img src="@/assets/image/wave-3.png" /></div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(250, 230, 244);">
|
|
|
|
|
- <div class="item-warp">
|
|
|
|
|
- <div class="left">
|
|
|
|
|
- <div class="title">今日待发货(单)</div>
|
|
|
|
|
- <div class="number">{{ todayData.order_send ? todayData.order_send:'0' }}</div>
|
|
|
|
|
- <div class="desc">待发快递</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="right"><img src="@/assets/image/wave-4-icon.png" /></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="item-wave"><img src="@/assets/image/wave-4.png" /></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(235, 255, 248);">
|
|
|
|
|
- <div class="item-warp">
|
|
|
|
|
- <div class="left">
|
|
|
|
|
- <div class="title">店铺数量</div>
|
|
|
|
|
- <div class="number">{{ todayData.store_num ? todayData.store_num:'0' }}</div>
|
|
|
|
|
- <div class="desc">开通绑定店铺数量</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="right"><img src="@/assets/image/wave-5-icon.png" /></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="item-wave"><img src="@/assets/image/wave-5.png" /></div>
|
|
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-row :gutter="10">
|
|
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:24" :xs="24">
|
|
|
<div class="card-news mt10">
|
|
<div class="card-news mt10">
|
|
|
|
|
+ <div class="date-check">
|
|
|
|
|
+ <el-radio-group v-model="moneyDate" size="large" @change="getmoneyDate">
|
|
|
|
|
+ <el-radio-button v-for="(city,indx) in dateData" :key="indx" :label="city.key">
|
|
|
|
|
+ {{ city.name }}
|
|
|
|
|
+ </el-radio-button>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </div>
|
|
|
<scEcharts height="500px" :option="option2"></scEcharts>
|
|
<scEcharts height="500px" :option="option2"></scEcharts>
|
|
|
</div>
|
|
</div>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
|
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:24" :xs="24">
|
|
|
<div class="card-news mt10">
|
|
<div class="card-news mt10">
|
|
|
|
|
+ <div class="date-check">
|
|
|
|
|
+ <el-radio-group v-model="orderDate" size="large" @change="getorderDate">
|
|
|
|
|
+ <el-radio-button v-for="(city,indx) in dateData" :key="indx" :label="city.key">
|
|
|
|
|
+ {{ city.name }}
|
|
|
|
|
+ </el-radio-button>
|
|
|
|
|
+ </el-radio-group>
|
|
|
|
|
+ </div>
|
|
|
<scEcharts height="500px" :option="option"></scEcharts>
|
|
<scEcharts height="500px" :option="option"></scEcharts>
|
|
|
</div>
|
|
</div>
|
|
|
</el-col>
|
|
</el-col>
|
|
@@ -95,27 +99,42 @@ export default {
|
|
|
},
|
|
},
|
|
|
data(){
|
|
data(){
|
|
|
return {
|
|
return {
|
|
|
|
|
+ dateData:[{"name":"近7天","key":7},{"name":"近14天","key":14},{"name":"近30天","key":30}],
|
|
|
|
|
+ orderDate:7,
|
|
|
|
|
+ moneyDate:7,
|
|
|
|
|
+ hideState:0,
|
|
|
pageLoading: false,
|
|
pageLoading: false,
|
|
|
dashboard: '0',
|
|
dashboard: '0',
|
|
|
todayData:{},
|
|
todayData:{},
|
|
|
- dataInfo:{},
|
|
|
|
|
blueBg,
|
|
blueBg,
|
|
|
baseData:{},
|
|
baseData:{},
|
|
|
- option: {},
|
|
|
|
|
option2: {},
|
|
option2: {},
|
|
|
|
|
+ option: {},
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created(){
|
|
created(){
|
|
|
var baseData = this.$TOOL.data.get("SERVICE");
|
|
var baseData = this.$TOOL.data.get("SERVICE");
|
|
|
this.baseData = baseData;
|
|
this.baseData = baseData;
|
|
|
- // this.getData()
|
|
|
|
|
|
|
+ this.getData()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ getmoneyDate(data){
|
|
|
|
|
+ this.moneyDate = data;
|
|
|
|
|
+ this.getData()
|
|
|
|
|
+ },
|
|
|
|
|
+ getorderDate(data){
|
|
|
|
|
+ this.orderDate = data;
|
|
|
|
|
+ this.getData()
|
|
|
|
|
+ },
|
|
|
|
|
+ getHide(data){
|
|
|
|
|
+ this.hideState = (data==1?1:0)
|
|
|
|
|
+ this.getData()
|
|
|
|
|
+ },
|
|
|
async getData(){
|
|
async getData(){
|
|
|
var loading = this.$loading();
|
|
var loading = this.$loading();
|
|
|
- var resp = await this.$API.dash.manage.get();
|
|
|
|
|
|
|
+ var resp = await this.$API.dash.manage.get({"hide":this.hideState,"money":this.moneyDate,"order":this.orderDate});
|
|
|
loading.close();
|
|
loading.close();
|
|
|
- this.todayData = resp.data.today;
|
|
|
|
|
|
|
+ this.todayData = resp.data.data;
|
|
|
let data = resp.data.moneys;
|
|
let data = resp.data.moneys;
|
|
|
let moneyDay = data.map(function (item) {
|
|
let moneyDay = data.map(function (item) {
|
|
|
return item['当天日期'];
|
|
return item['当天日期'];
|
|
@@ -177,7 +196,7 @@ export default {
|
|
|
smooth: true, showBackground: true,
|
|
smooth: true, showBackground: true,
|
|
|
areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
|
type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
- label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
|
|
|
|
|
|
|
+ label: {normal: {position: 'top', formatter: '¥ {c} 元', show: true}},
|
|
|
data: data.map(function (item) {
|
|
data: data.map(function (item) {
|
|
|
return item['订单金额'];
|
|
return item['订单金额'];
|
|
|
}),
|
|
}),
|
|
@@ -290,6 +309,12 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
}
|
|
}
|
|
|
|
|
+.card-news .date-check{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 10px;
|
|
|
|
|
+ right: 10px;
|
|
|
|
|
+ z-index: 99;
|
|
|
|
|
+}
|
|
|
.total-panel-sub .sub-card .title.red::before{
|
|
.total-panel-sub .sub-card .title.red::before{
|
|
|
content: "";
|
|
content: "";
|
|
|
display: block;
|
|
display: block;
|
|
@@ -357,7 +382,7 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
|
}
|
|
}
|
|
|
.total-panel .panel-item{
|
|
.total-panel .panel-item{
|
|
|
- width: calc(20% - 9.6px);
|
|
|
|
|
|
|
+ width: calc(33.333333% - 9.6px);
|
|
|
height: 130px;
|
|
height: 130px;
|
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 8px;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 8px;
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -390,6 +415,7 @@ export default {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: auto;
|
|
height: auto;
|
|
|
z-index: 9;
|
|
z-index: 9;
|
|
|
|
|
+ top: 0;
|
|
|
}
|
|
}
|
|
|
.total-panel .panel-item .item-wave img {
|
|
.total-panel .panel-item .item-wave img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -431,6 +457,7 @@ export default {
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
|
|
|
+ position: relative;
|
|
|
}
|
|
}
|
|
|
.news-title{
|
|
.news-title{
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
@@ -440,6 +467,18 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
}
|
|
}
|
|
|
|
|
+.news-title .title-open{
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+.news-title .title-open .name{
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+}
|
|
|
.news-title::before{
|
|
.news-title::before{
|
|
|
content: "";
|
|
content: "";
|
|
|
width: 4px;
|
|
width: 4px;
|