|
@@ -11,14 +11,25 @@
|
|
|
</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">{{ todayData.userNum ? todayData.userNum:'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 +39,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 +49,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="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:12" :xs="24">
|
|
|
|
|
|
|
+ <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" :xs="24">
|
|
|
|
|
|
|
+ <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,83 +98,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:{},
|
|
|
blueBg,
|
|
blueBg,
|
|
|
baseData:{},
|
|
baseData:{},
|
|
|
option2: {},
|
|
option2: {},
|
|
|
- option: {
|
|
|
|
|
- // title: {
|
|
|
|
|
- // left: 'left',
|
|
|
|
|
- // text: '订单数据',
|
|
|
|
|
- // },
|
|
|
|
|
- // grid: {
|
|
|
|
|
- // top: '80px'
|
|
|
|
|
- // },
|
|
|
|
|
- // tooltip: {
|
|
|
|
|
- // trigger: 'axis'
|
|
|
|
|
- // },
|
|
|
|
|
- // legend: {
|
|
|
|
|
- // x: 'right',
|
|
|
|
|
- // data: ['呼出总数量', '接听总数量', '短信发送总数量', '添加微信总数量']
|
|
|
|
|
- // },
|
|
|
|
|
- // calculable: true,
|
|
|
|
|
- // xAxis: {
|
|
|
|
|
- // type: 'category',
|
|
|
|
|
- // data: ['06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04']
|
|
|
|
|
- // },
|
|
|
|
|
- // yAxis: [{
|
|
|
|
|
- // type: 'value'
|
|
|
|
|
- // }],
|
|
|
|
|
- // // yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 单'}}],
|
|
|
|
|
- // series: [{
|
|
|
|
|
- // name: '呼出总数量',
|
|
|
|
|
- // data: [120, 200, 50, 80, 170, 210, 130,450,244,168],
|
|
|
|
|
- // smooth: true, showBackground: false,
|
|
|
|
|
- // areaStyle: {color: 'rgba(64, 158, 254, 0.6)'},
|
|
|
|
|
- // type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
|
|
- // emphasis:{focus: 'series'},
|
|
|
|
|
- // label: {position: 'top', formatter: '{c}', show: true},
|
|
|
|
|
- // },{
|
|
|
|
|
- // name: '接听总数量',
|
|
|
|
|
- // data: [20, 210, 10, 180, 110, 100, 130,450,244,168],
|
|
|
|
|
- // smooth: true, showBackground: false,
|
|
|
|
|
- // areaStyle: {color: 'rgba(54, 206, 159, 0.6)'},
|
|
|
|
|
- // type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
|
|
- // emphasis:{focus: 'series'},
|
|
|
|
|
- // label: {position: 'top', formatter: '{c}', show: true},
|
|
|
|
|
- // },{
|
|
|
|
|
- // name: '短信发送总数量',
|
|
|
|
|
- // data: [20, 210, 10, 80, 110, 100, 130,450,244,168],
|
|
|
|
|
- // smooth: true, showBackground: false,
|
|
|
|
|
- // areaStyle: {color: 'rgba(245, 110, 106, 0.6)'},
|
|
|
|
|
- // type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
|
|
- // emphasis:{focus: 'series'},
|
|
|
|
|
- // label: {position: 'top', formatter: '{c}', show: true},
|
|
|
|
|
- // },{
|
|
|
|
|
- // name: '添加微信总数量',
|
|
|
|
|
- // data: [20, 210, 110, 180, 110, 100, 130,450,244,268],
|
|
|
|
|
- // smooth: true, showBackground: false,
|
|
|
|
|
- // areaStyle: {color: 'rgba(98, 108, 144, 0.6)'},
|
|
|
|
|
- // type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
|
|
- // emphasis:{focus: 'series'},
|
|
|
|
|
- // label: {position: 'top', formatter: '{c}', show: true},
|
|
|
|
|
- // }]
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ 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.store.get();
|
|
|
|
|
|
|
+ var resp = await this.$API.dash.shop.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['当天日期'];
|
|
@@ -346,6 +308,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;
|
|
@@ -413,7 +381,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;
|
|
@@ -446,6 +414,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%;
|
|
@@ -487,6 +456,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;
|
|
@@ -496,6 +466,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;
|