428 行
16 KiB
HTML
可执行文件
428 行
16 KiB
HTML
可执行文件
<!--[1.9.20]-->
|
|
<style>
|
|
.home_title {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.home_content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.hc_inner {
|
|
height: 12vw;
|
|
}
|
|
|
|
.hip_line {
|
|
height: 3.5vw;
|
|
}
|
|
|
|
.hip_num {
|
|
margin-left: 1vw;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hc_inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.home_title_inner {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.home_title_other {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.home_quant {
|
|
padding: 0;
|
|
}
|
|
|
|
.today-all {
|
|
color: orangered;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.fixed-content {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
background-color: #232b42;
|
|
color: white;
|
|
box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.fixed-content-title {
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.fixed-content-title-text {
|
|
color: #333333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.fixed-content-box {
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.fixed-content-box i.less {
|
|
color: orangered;
|
|
}
|
|
|
|
.fixed-content-box i.more {
|
|
color: orange;
|
|
}
|
|
|
|
.fixed-content-box i.shelf {
|
|
color: yellow;
|
|
}
|
|
</style>
|
|
|
|
<div id="storeIndex" v-cloak class="homeBox">
|
|
<div class="home_title">
|
|
<div class="home_title_inner">
|
|
<span>门店零售收银占比图</span>
|
|
<div class="home_title_other">
|
|
今日总金额: <span class="today-all">{{(dataInfo.allMoney - dataInfo.refundMoney).toFixed(2)}}</span>元。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="home_content">
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售现金</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailCashMoney}}元</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailCashMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售支付宝</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailAliMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailAliMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">零售微信</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailWxMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailWxMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="!mecPayType">
|
|
<div class="hc_inner_sort">零售小程序商城微信</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.retailAppletMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.retailAppletMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="!mecPayType">
|
|
<div class="hc_inner_sort">会员卡支付</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.vipCardMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.vipCardMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">其他支付(商家自己的支付方式)</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.otherPayMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.otherPayMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner" v-if="mecPayType">
|
|
<div class="hc_inner_sort">德育币支付</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.MecMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.MecMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日待退款金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.toRefundMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.toRefundMoney*100/(dataInfo.allMoney==0?1:dataInfo.allMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日退款金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.refundMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="refundMoney"></el-progress>
|
|
</div>
|
|
</div>
|
|
<template v-if="dataInfo.credit">
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日赊账金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.creditArrMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="dataInfo.creditArrMoney>0?100:0"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="hc_inner">
|
|
<div class="hc_inner_sort">
|
|
今日赊账待还金额
|
|
</div>
|
|
<div class="hc_inner_percent">
|
|
<div class="hip_line"></div>
|
|
<div class="hip_num">{{dataInfo.creditRepayMoney}}</div>
|
|
<el-progress type="circle" :width="percentageWidth" :stroke-width="5" :color="percentageColor"
|
|
:percentage="(dataInfo.creditRepayMoney*100/(dataInfo.creditArrMoney==0?1:dataInfo.creditArrMoney)).toFixed(2)*1"></el-progress>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
<template v-if="!mecPayType">
|
|
<div class="home_title">
|
|
<div class="home_title_inner">
|
|
会员数据
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home_quant">
|
|
<div class="hq_inner">
|
|
<div class="hq_inner_left">
|
|
<img src="__PUBLIC__/Retail/images/s11.png"/>
|
|
<span>会员</span>
|
|
</div>
|
|
<div class="hq_inner_right">
|
|
<div>今日新增会员：{{dataInfo.vipIncNum}}</div>
|
|
<div>今日会员充值：{{dataInfo.vipRechargeMoney}}元</div>
|
|
<div>今日会员获得余额：{{dataInfo.vipGainMoney}}元</div>
|
|
</div>
|
|
</div>
|
|
<div class="hq_inner">
|
|
<div class="hq_inner_left">
|
|
<img src="__PUBLIC__/Retail/images/s12.png"/>
|
|
<span>商品</span>
|
|
</div>
|
|
<div class="hq_inner_right">
|
|
<div class="">
|
|
商品总数：{{dataInfo.goodsCount}}个
|
|
</div>
|
|
<div class="">
|
|
上架商品数：{{dataInfo.vipIncNum}}个
|
|
</div>
|
|
<div class="">
|
|
滞销商品数：{{dataInfo.vipIncNum}}个
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hq_inner">
|
|
<div class="hq_inner_left">
|
|
<img src="__PUBLIC__/Retail/images/s13.png"/>
|
|
<span>库存</span>
|
|
</div>
|
|
<div class="hq_inner_right">
|
|
<div class="">
|
|
库存数量：{{dataInfo.allGoodsNum}}
|
|
</div>
|
|
<div class="">
|
|
库存不足商品数：{{dataInfo.lessGoods}}个
|
|
</div>
|
|
<div class="">
|
|
库存超量商品数：{{dataInfo.moreGoods}}个
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="showStockTip" class="fixed-content">
|
|
<div class="fixed-content-title">
|
|
<div class="fixed-content-title-text">库存提示</div>
|
|
<el-button type="text" style="color: #666666;" @click="showStockTip=false"><i class="el-icon-close"></i>
|
|
</el-button>
|
|
</div>
|
|
<div class="fixed-content-box">
|
|
<div @click="seeStock(1)">
|
|
库存不足商品数：<i class="less">{{dataInfo.lessGoods}}</i>个
|
|
</div>
|
|
<div @click="seeStock(2)">
|
|
库存超量商品数：<i class="more">{{dataInfo.moreGoods}}</i>个
|
|
</div>
|
|
<div @click="seeStock(3)">
|
|
将(已)过期商品数：<i class="shelf">{{dataInfo.shelfGoods}}</i>个
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var storeIndex = new Vue({
|
|
el: '#storeIndex',
|
|
data() {
|
|
return {
|
|
mecPayType: false,
|
|
dataInfo: {
|
|
allMoney: 0,
|
|
retailCashMoney: 0,
|
|
retailAliMoney: 0,
|
|
retailWxMoney: 0,
|
|
retailAppletMoney: 0,
|
|
vipCardMoney: 0,
|
|
otherPayMoney: 0,
|
|
MecMoney: 0,
|
|
toRefundMoney: 0,
|
|
refundMoney: 0,
|
|
creditArrMoney: 0,
|
|
creditRepayMoney: 0,
|
|
vipIncNum: 0,
|
|
vipRechargeMoney: 0,
|
|
vipGainMoney: 0,
|
|
|
|
goodsCount: 0,
|
|
goodInfo: 0,
|
|
sjGoodsCount: 0,
|
|
shelfGoods: 0,
|
|
allGoodsNum: 0,
|
|
moreGoods: 0,
|
|
lessGoods: 0,
|
|
|
|
credit: false,
|
|
},
|
|
percentageColor: [
|
|
{color: '#76f1bc', percentage: 5},
|
|
{color: '#4de4ff', percentage: 25},
|
|
{color: '#42ab1d', percentage: 45},
|
|
{color: '#f0c550', percentage: 65},
|
|
{color: '#fe755f', percentage: 85},
|
|
{color: '#bf5aff', percentage: 10},
|
|
],
|
|
windowWidth: 100,
|
|
showStockTip: false,
|
|
}
|
|
},
|
|
computed: {
|
|
percentageWidth() {
|
|
return ((this.windowWidth * 0.07).toFixed(2)) * 1;
|
|
},
|
|
refundMoney() {
|
|
let a = (this.dataInfo.allMoney + this.dataInfo.refundMoney).toFixed(2) * 1;
|
|
return (this.dataInfo.refundMoney * 100 / (a == 0 ? 1 : a)).toFixed(2) * 1;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.setWindowWidth();
|
|
window.onresize = () => {
|
|
this.setWindowWidth();
|
|
}
|
|
},
|
|
methods: {
|
|
getStatistics() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Statistics/getStoreStatisticsList',
|
|
type: 'post',
|
|
data: {},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.dataInfo = res.data;
|
|
if (res.data.lessGoods > 0 || res.data.moreGoods > 0 || res.data.shelfGoods > 0) {
|
|
this.showStockTip = true;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
seeStock(type) {
|
|
switch (type) {
|
|
case 1:
|
|
MenuApp.pathData.push({
|
|
name: '库存不足商品',
|
|
path: "/index.php/Retail/SSaleMGoods/index.html?stock_status=1",
|
|
onClose: () => {
|
|
this.getStatistics();
|
|
}
|
|
});
|
|
break;
|
|
case 2:
|
|
MenuApp.pathData.push({
|
|
name: '库存超量商品',
|
|
path: "/index.php/Retail/SSaleMGoods/index.html?stock_status=2",
|
|
onClose: () => {
|
|
this.getStatistics();
|
|
}
|
|
});
|
|
break;
|
|
case 3:
|
|
MenuApp.pathData.push({
|
|
name: '将(已)过期商品',
|
|
path: "/index.php/Retail/Past/index.html",
|
|
onClose: () => {
|
|
this.getStatistics();
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
|
|
},
|
|
setWindowWidth() {
|
|
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
},
|
|
//德育币插件 true使用 false不使用
|
|
getPlatformType() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Mgoods/getPlatformType',
|
|
type: "post",
|
|
data: {},
|
|
success: (res) => {
|
|
this.mecPayType = res.moral_education_coin;
|
|
}
|
|
})
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.getStatistics();
|
|
this.getPlatformType();
|
|
}
|
|
});
|
|
</script> |