|
|
@@ -11,210 +11,180 @@
|
|
|
</div>
|
|
|
<el-main>
|
|
|
<div class="card-news mt0">
|
|
|
- <div class="news-title">{{ $t('manage.dashboard.orderTitle') }}</div>
|
|
|
+ <div class="news-title">经营数据</div>
|
|
|
<div class="total-panel">
|
|
|
- <div class="panel-item">
|
|
|
+ <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="left">
|
|
|
- <div class="title">代理数量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</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="panel-item">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">门店数量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</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="panel-item">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">洗衣地址数量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</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="panel-item">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">订单数</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
+ <div class="title">今日营业额(元)</div>
|
|
|
+ <div class="number">{{ todayData.order_money ? todayData.order_money:'0' }}</div>
|
|
|
+ <div class="desc">来客订单金额</div>
|
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-1-icon.png" /></div>
|
|
|
</div>
|
|
|
<div class="item-wave"><img src="@/assets/image/wave-1.png" /></div>
|
|
|
</div>
|
|
|
- <div class="panel-item">
|
|
|
+ <div :class="this.$store.state.global.ismobile?'panel-item m':'panel-item'" style="background-color: rgb(240, 235, 255);">
|
|
|
<div class="item-warp">
|
|
|
<div class="left">
|
|
|
- <div class="title">新增客户</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
+ <div class="title">今日订单数(单)</div>
|
|
|
+ <div class="number">{{ todayData.order_num ? todayData.order_num:'0' }}</div>
|
|
|
+ <div class="desc">来客订单</div>
|
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-2-icon.png" /></div>
|
|
|
</div>
|
|
|
<div class="item-wave"><img src="@/assets/image/wave-2.png" /></div>
|
|
|
</div>
|
|
|
- <div class="panel-item">
|
|
|
+ <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="left">
|
|
|
- <div class="title">收衣数</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
+ <div class="title">今日核销(单)</div>
|
|
|
+ <div class="number">{{ todayData.order_done ? todayData.order_done:'0' }}</div>
|
|
|
+ <div class="desc">已完成核销</div>
|
|
|
</div>
|
|
|
<div class="right"><img src="@/assets/image/wave-3-icon.png" /></div>
|
|
|
</div>
|
|
|
<div class="item-wave"><img src="@/assets/image/wave-3.png" /></div>
|
|
|
</div>
|
|
|
- <div class="panel-item">
|
|
|
+ <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">{{ dataInfo.customer ? dataInfo.customer:'0' }}</div>
|
|
|
- <div class="desc">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
+ <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>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:24" :xs="24">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
<div class="card-news mt10">
|
|
|
- <div class="news-title">门店监控</div>
|
|
|
- <div class="total-panel-sub">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:12" :xs="24">
|
|
|
- <div class="sub-card mt10">
|
|
|
- <div class="title">今日数据</div>
|
|
|
- <div class="sub-content">
|
|
|
- <div class="sub-box">
|
|
|
- <div class="row1"><img src="@/assets/image/store1.png" /><span>今日收衣件数</span></div>
|
|
|
- <div class="row2">0</div>
|
|
|
- <div class="row3">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
- </div>
|
|
|
- <div class="sub-box">
|
|
|
- <div class="row1"><img src="@/assets/image/store2.png" /><span>今日已支付(元)</span></div>
|
|
|
- <div class="row2">0</div>
|
|
|
- <div class="row3">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
- </div>
|
|
|
- <div class="sub-box">
|
|
|
- <div class="row1"><img src="@/assets/image/store3.png" /><span>今日订单数</span></div>
|
|
|
- <div class="row2">0</div>
|
|
|
- <div class="row3">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="this.$store.state.global.ismobile?24:12" :xs="24">
|
|
|
- <div class="sub-card mt10">
|
|
|
- <div class="title">过往数据</div>
|
|
|
- <div class="sub-content">
|
|
|
- <div class="sub-box" style="width: calc(50% - 12px);">
|
|
|
- <div class="row1"><img src="@/assets/image/store4.png" /><span>本月订单数</span></div>
|
|
|
- <div class="row2">0</div>
|
|
|
- <div class="row3">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
- </div>
|
|
|
- <div class="sub-box" style="width: calc(50% - 12px);">
|
|
|
- <div class="row1"><img src="@/assets/image/store5.png" /><span>累计订单数</span></div>
|
|
|
- <div class="row2">0</div>
|
|
|
- <div class="row3">{{ $t('store.dashboard.yestoday') }} 0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <scEcharts height="500px" :option="option2"></scEcharts>
|
|
|
</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="this.$store.state.global.ismobile?24:12">
|
|
|
<div class="card-news mt10">
|
|
|
- <div class="news-title">洗衣地址监控</div>
|
|
|
- <div class="total-panel">
|
|
|
- <div class="panel-item bg-gray" :style="{backgroundImage:'url('+blueBg+')'}">
|
|
|
- <div class="item-warp img">
|
|
|
- <div class="left">
|
|
|
- <div class="title">今日入库</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}<span>单</span></div>
|
|
|
- <div class="desc">总件数:0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-item bg-gray">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">在库量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}<span>单</span></div>
|
|
|
- <div class="desc">总件数:0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-item bg-gray">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">近一个月待入库量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}<span>单</span></div>
|
|
|
- <div class="desc">总件数:0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-item bg-gray">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">待预检量</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}<span>单</span></div>
|
|
|
- <div class="desc">总件数:0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-item bg-gray">
|
|
|
- <div class="item-warp">
|
|
|
- <div class="left">
|
|
|
- <div class="title">今日出库</div>
|
|
|
- <div class="number">{{ dataInfo.customer ? dataInfo.customer:'0' }}<span>单</span></div>
|
|
|
- <div class="desc">总件数:0</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- -->
|
|
|
+ <scEcharts height="500px" :option="option"></scEcharts>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
</el-main>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import blueBg from "@/assets/image/blue_bg.png";
|
|
|
+import scEcharts from '@/components/scEcharts';
|
|
|
export default {
|
|
|
name: "dashboard",
|
|
|
+ components: {
|
|
|
+ scEcharts
|
|
|
+ },
|
|
|
data(){
|
|
|
return {
|
|
|
pageLoading: false,
|
|
|
dashboard: '0',
|
|
|
+ todayData:{},
|
|
|
dataInfo:{},
|
|
|
blueBg,
|
|
|
- baseData:{}
|
|
|
+ baseData:{},
|
|
|
+ option: {},
|
|
|
+ option2: {},
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
var baseData = this.$TOOL.data.get("AGENT_SERVICE");
|
|
|
this.baseData = baseData;
|
|
|
+ // this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData(){
|
|
|
+ var loading = this.$loading();
|
|
|
+ var resp = await this.$API.dash.manage.get();
|
|
|
+ loading.close();
|
|
|
+ this.todayData = resp.data.today;
|
|
|
+ let data = resp.data.moneys;
|
|
|
+ let moneyDay = data.map(function (item) {
|
|
|
+ return item['当天日期'];
|
|
|
+ });
|
|
|
+ let data2 = resp.data.orders;
|
|
|
+ let orderDay = data2.map(function (item) {
|
|
|
+ return item['当天日期'];
|
|
|
+ });
|
|
|
+ this.option = {
|
|
|
+ title: {
|
|
|
+ left: 'left',
|
|
|
+ text: '近15天订单数据',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '80px'
|
|
|
+ },
|
|
|
+ tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
|
|
|
+ xAxis: [{data: orderDay, gridIndex: 0}],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
|
|
|
+ formatter: '{value} 单'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true, showBackground: true,
|
|
|
+ areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
|
+ type: 'bar', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
|
|
|
+ data: data2.map(function (item) {
|
|
|
+ return item['订单数量'];
|
|
|
+ }),
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.option2 = {
|
|
|
+ title: {
|
|
|
+ left: 'left',
|
|
|
+ text: '近15天订单金额',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '80px'
|
|
|
+ },
|
|
|
+ tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
|
|
|
+ xAxis: [{data: moneyDay, gridIndex: 0}],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
|
|
|
+ formatter: '{value} 元'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: [{left: '5%', right: '3%', top: '15%', bottom: '5%'}],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true, showBackground: true,
|
|
|
+ areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
|
|
|
+ type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
|
|
|
+ label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
|
|
|
+ data: data.map(function (item) {
|
|
|
+ return item['订单金额'];
|
|
|
+ }),
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -231,12 +201,15 @@ export default {
|
|
|
}
|
|
|
.service-item {
|
|
|
border: 1px solid #EAE9F0;
|
|
|
- padding: 12px 24px;
|
|
|
+ padding: 12px 14px;
|
|
|
border-radius: 6px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex: 1;
|
|
|
}
|
|
|
+.service-item .item-sub{
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
.service-item .right-btn {
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
@@ -255,10 +228,15 @@ export default {
|
|
|
color: #333333d9;
|
|
|
}
|
|
|
.service-item .value{
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 18px;
|
|
|
color: #f64945;
|
|
|
font-weight: 700;
|
|
|
- margin-left: 26px;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+.service-item .value span {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #666;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
.service-tel {
|
|
|
display: flex;
|
|
|
@@ -371,17 +349,19 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
margin-top: 16px;
|
|
|
- gap: 10px;
|
|
|
+}
|
|
|
+.total-panel .panel-item.m{
|
|
|
+ width: calc(100% - 9.6px);
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
.total-panel .panel-item{
|
|
|
- width: calc((100% - 18px)/6);
|
|
|
+ width: calc(20% - 9.6px);
|
|
|
height: 130px;
|
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 8px;
|
|
|
position: relative;
|
|
|
border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
- background-color: rgba(166, 166, 166, 0.5);
|
|
|
}
|
|
|
.total-panel .panel-item .item-warp .left {
|
|
|
padding:16px 0px 0px 23px;
|
|
|
@@ -482,13 +462,4 @@ export default {
|
|
|
margin-left: auto;
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
-@media (max-width: 992px){
|
|
|
- .total-panel {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .total-panel .panel-item{
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|