626 lines
14 KiB
Vue
626 lines
14 KiB
Vue
<template>
|
|
<view class="page">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uo5KnRUd2Lbmx6kqLD8y" class="bj" mode=""></image>
|
|
|
|
<!--自定义tab -->
|
|
<view class="tab_list">
|
|
<view class="tab_list_item" @click="btntab(1)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uiw8EIRhLgNUXRFEhdVQ" mode=""></image>
|
|
<text>工作台</text>
|
|
</view>
|
|
<view class="tab_list_item" @click="btntab(2)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uXSetDhzDeNupNaZ26BY" mode=""></image>
|
|
<text style="color: #FF8998;">运营</text>
|
|
</view>
|
|
<view class="tab_list_item" @click="btntab(3)">
|
|
<image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uCQPWug03c3oJuoOqNFu" mode=""></image>
|
|
<text>订单</text>
|
|
</view>
|
|
</view>
|
|
<view class="bj"></view>
|
|
<view class="tabs">
|
|
<view @click="btntabs(0)" :class="index == 0 ? 'active' : ''">
|
|
营收类
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100%;height: 20rpx;"></view>
|
|
<!-- 营收类 -->
|
|
<view class="" style="height: 80vh;overflow: scroll;" v-if="index == 0">
|
|
<view class="leiji">
|
|
<view class="li">
|
|
<view class="top">
|
|
{{qbobj.orderUserCount == null ? '0人' : qbobj.orderUserCount + '人'}}
|
|
</view>
|
|
<view class="bot">
|
|
累计用户
|
|
</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="top">
|
|
{{qbobj.orderActualTotalAmount == null ? '￥0.00' : '￥' + qbobj.orderActualTotalAmount}}
|
|
</view>
|
|
<view class="bot">
|
|
订单金额
|
|
</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="top">
|
|
{{qbobj.orderCount == null ? '0' : qbobj.orderCount}}笔
|
|
</view>
|
|
<view class="bot">
|
|
订单数量
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
<view class="timewz">
|
|
时间范围
|
|
</view>
|
|
<view class="inptime">
|
|
<view class="" @click="showTimePicker('start')">
|
|
{{kstime}}
|
|
</view>
|
|
--
|
|
<view class="" @click="showTimePicker('end')">
|
|
{{jstime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
|
|
<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
|
|
<view class="riqi">
|
|
<view :class="riqiindex == 0 ? 'actives' : ''" @click="btnriqi(0)">
|
|
今日
|
|
</view>
|
|
<view :class="riqiindex == 1 ? 'actives' : ''" @click="btnriqi(1)">
|
|
昨日
|
|
</view>
|
|
<view :class="riqiindex == 2 ? 'actives' : ''" @click="btnriqi(2)">
|
|
本月
|
|
</view>
|
|
<view :class="riqiindex == 3 ? 'actives' : ''" @click="btnriqi(3)">
|
|
上月
|
|
</view>
|
|
</view>
|
|
<view class="yinshouqk">
|
|
<view class="name">
|
|
营收情况
|
|
</view>
|
|
<view class="zongfy">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uUt2MilwDZwt5NT1ozev" mode=""></image>
|
|
<view class="top">
|
|
<view class="topwz">
|
|
{{yunyingobj.orderCount == null ? '0' : yunyingobj.orderCount}}笔
|
|
</view>
|
|
<view class="botwz">
|
|
订单数量
|
|
</view>
|
|
</view>
|
|
<view class="top">
|
|
<view class="topwz">
|
|
￥{{yunyingobj.orderActualTotalAmount == null ? '0.00' : yunyingobj.orderActualTotalAmount.toFixed(2)}}
|
|
</view>
|
|
<view class="botwz">
|
|
订单金额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="zongfy">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uX4hHpjlNCkb7HsxMVAb" mode=""></image>
|
|
<view class="top">
|
|
<view class="topwz">
|
|
￥{{yunyingobj.orderActualAmount == null ? '0.00' : yunyingobj.orderActualAmount.toFixed(2)}}
|
|
</view>
|
|
<view class="botwz">
|
|
实收金额
|
|
</view>
|
|
</view>
|
|
<view class="top">
|
|
<view class="topwz">
|
|
￥{{yunyingobj.orderRefundAmount == null ? '0.00' : yunyingobj.orderRefundAmount.toFixed(2)}}
|
|
</view>
|
|
<view class="botwz">
|
|
退款金额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
index:0,
|
|
successAmount:'',
|
|
riqiindex:0,
|
|
oneparams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
oneshow: false,
|
|
twoparams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
},
|
|
twoshow: false,
|
|
kstime:'',
|
|
jstime:'',
|
|
yunyingobj:{},
|
|
qbobj:{},
|
|
infoobj:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getCurrentDate(this.riqiindex)
|
|
this.getqb()
|
|
this.gettongji()
|
|
},
|
|
methods: {
|
|
// 自定义tab跳转
|
|
btntab(num){
|
|
if(num == 1){
|
|
uni.reLaunch({
|
|
url:'/page_shanghu/index'
|
|
})
|
|
}else if(num == 2){
|
|
// uni.reLaunch({
|
|
// url:'/page_shanghu/yuying'
|
|
// })
|
|
}else if(num == 3){
|
|
uni.reLaunch({
|
|
url:'/page_shanghu/orderlist'
|
|
})
|
|
}
|
|
},
|
|
// 请求全部运营统计数据
|
|
getqb() {
|
|
let keys = 'order_user_count,order_count,order_actual_total_amount,store_count,device_count,device_status_count,device_online_status_count'
|
|
this.$u.get(`/dashboard/revenueStat?keys=${keys}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.qbobj = res.data
|
|
}
|
|
})
|
|
},
|
|
// 请求筛选运营统计数据
|
|
gettongji() {
|
|
let keys = 'order_user_count,order_count,order_actual_total_amount,store_count,device_count,device_status_count,device_online_status_count'
|
|
this.$u.get(`/dashboard/revenueStat?dateRange=${this.kstime + ',' + this.jstime}&keys=${keys}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.yunyingobj = res.data
|
|
}
|
|
})
|
|
},
|
|
// 一开始就获取当前年月日
|
|
getCurrentDate(num) {
|
|
const currentDate = new Date()
|
|
const year = currentDate.getFullYear()
|
|
const month = currentDate.getMonth() + 1
|
|
const day = currentDate.getDate()
|
|
const formatDate = (year, month, day) => {
|
|
const formattedMonth = month < 10 ? `0${month}` : month
|
|
const formattedDay = day < 10 ? `0${day}` : day
|
|
return `${year}-${formattedMonth}-${formattedDay}`
|
|
}
|
|
const getFirstDayOfMonth = (year, month) => {
|
|
return new Date(year, month - 1, 1)
|
|
}
|
|
const getLastDayOfMonth = (year, month) => {
|
|
return new Date(year, month, 0)
|
|
}
|
|
switch (num) {
|
|
case 0:
|
|
this.kstime = formatDate(year, month, day)
|
|
this.jstime = formatDate(year, month, day)
|
|
break
|
|
case 1:
|
|
const yesterday = new Date(currentDate)
|
|
yesterday.setDate(currentDate.getDate() - 1)
|
|
this.kstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
|
|
this.jstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
|
|
break
|
|
case 2:
|
|
const firstDayOfMonth = getFirstDayOfMonth(year, month)
|
|
this.kstime = formatDate(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, firstDayOfMonth.getDate())
|
|
this.jstime = formatDate(year, month, day)
|
|
break
|
|
case 3:
|
|
const lastMonthFirstDay = getFirstDayOfMonth(year, month - 1)
|
|
const lastMonthLastDay = getLastDayOfMonth(year, month - 1)
|
|
this.kstime = formatDate(lastMonthFirstDay.getFullYear(), lastMonthFirstDay.getMonth() + 1, lastMonthFirstDay.getDate())
|
|
this.jstime = formatDate(lastMonthLastDay.getFullYear(), lastMonthLastDay.getMonth() + 1, lastMonthLastDay.getDate())
|
|
break
|
|
default:
|
|
this.kstime = formatDate(year, month, day)
|
|
this.jstime = formatDate(year, month, day)
|
|
break
|
|
}
|
|
},
|
|
// 选择开始时间
|
|
confirmone(e){
|
|
this.kstime = e.year + '-' + e.month + '-' + e.day
|
|
this.riqiindex = -1
|
|
this.gettongji()
|
|
},
|
|
// 选择结束时间
|
|
confirmtwo(e){
|
|
this.jstime = e.year + '-' + e.month + '-' + e.day
|
|
this.riqiindex = -1
|
|
this.gettongji()
|
|
},
|
|
// 点击跳转到提现
|
|
btntx(){
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/device/tixian'
|
|
})
|
|
},
|
|
// 点击切换日期
|
|
btnriqi(num){
|
|
this.riqiindex = num
|
|
this.getCurrentDate(this.riqiindex)
|
|
this.gettongji()
|
|
},
|
|
// 点击切换tab
|
|
btntabs(num){
|
|
this.index = num
|
|
},
|
|
showTimePicker(type) {
|
|
if(type === 'start') {
|
|
this.oneshow = true
|
|
} else {
|
|
this.twoshow = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
// background: '';
|
|
}
|
|
.actives{
|
|
border: 1px solid #FF8998 !important;
|
|
color: #FF8998 !important;
|
|
background: #322C2D !important;
|
|
}
|
|
.bj{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
.tab_list{
|
|
width: 750rpx;
|
|
height: 176rpx;
|
|
background: #0B0B0B;
|
|
box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
.tab_list_item{
|
|
width: 33%;
|
|
text-align: center;
|
|
text{
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
}
|
|
image{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
.clzb{
|
|
width: 696rpx;
|
|
height: 496rpx;
|
|
background: #000000;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
padding: 44rpx 34rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.ul{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.li{
|
|
width: 25%;
|
|
text-align: center;
|
|
margin-top: 28rpx;
|
|
.shu{
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: #4297F3;
|
|
}
|
|
.zi{
|
|
font-size: 28rpx;
|
|
color: #AFAFAF;
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cheliang{
|
|
width: 696rpx;
|
|
height: 254rpx;
|
|
background: #000000;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx 34rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.dabox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.li{
|
|
margin-top: 46rpx;
|
|
text-align: center;
|
|
.bfb{
|
|
font-weight: 800;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.cl{
|
|
font-size: 28rpx;
|
|
color: #AFAFAF;
|
|
margin-top: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.zupibox{
|
|
width: 630rpx;
|
|
height: 360rpx;
|
|
background: #000000;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
margin: auto;
|
|
margin-top: 44rpx;
|
|
padding: 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
.zupi{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.one{
|
|
.onewz{
|
|
font-size: 28rpx;
|
|
color: #4297F3;
|
|
margin-top: 10rpx;
|
|
}
|
|
.twowz{
|
|
font-size: 28rpx;
|
|
color: #7C7C7C;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yinshouqk{
|
|
width: 696rpx;
|
|
max-height: 768rpx;
|
|
background: #000;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
padding: 30rpx 34rpx;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
.zongfy{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 54rpx;
|
|
padding: 0 18rpx;
|
|
box-sizing: border-box;
|
|
.top{
|
|
text-align: center;
|
|
.topwz{
|
|
font-weight: 800;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
}
|
|
.botwz{
|
|
font-size: 28rpx;
|
|
color: #AFAFAF;
|
|
}
|
|
}
|
|
image{
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
}
|
|
}
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.riqi{
|
|
view{
|
|
width: 162rpx;
|
|
height: 64rpx;
|
|
background: #000000;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 64rpx;
|
|
border: 1px solid #000000;
|
|
}
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.time{
|
|
width: 696rpx;
|
|
height: 96rpx;
|
|
background: #000000;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 22rpx 34rpx;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
.timewz{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
.inptime{
|
|
display: flex;
|
|
align-items: center;
|
|
color: #979797;
|
|
view{
|
|
margin-left: 10rpx;
|
|
margin-right: 10rpx;
|
|
width: 196rpx;
|
|
height: 52rpx;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
border: 1rpx solid #808080;
|
|
text-align: center;
|
|
line-height: 52rpx;
|
|
font-size: 28rpx;
|
|
color: #979797;
|
|
}
|
|
}
|
|
}
|
|
.leiji{
|
|
width: 696rpx;
|
|
height: 178rpx;
|
|
background: #000000;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 38rpx 44rpx;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
margin-top: 34rpx;
|
|
.li{
|
|
text-align: center;
|
|
.top{
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: #FF8998;
|
|
margin-top: 12rpx;
|
|
}
|
|
.bot{
|
|
margin-top: 12rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #AFAFAF;
|
|
}
|
|
}
|
|
}
|
|
.yinshoubox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 56rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 22rpx;
|
|
.rt{
|
|
.tx{
|
|
width: 162rpx;
|
|
height: 58rpx;
|
|
background: #322C2D;
|
|
box-shadow: 4rpx 4rpx 2rpx 0rpx rgba(0,0,0,0.3);
|
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
|
text-align: center;
|
|
line-height: 58rpx;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #FF8998;
|
|
margin-top: 50rpx;
|
|
}
|
|
.txjl{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 44rpx;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.lt{
|
|
.zhye{
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
.price{
|
|
font-weight: 600;
|
|
font-size: 50rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 8rpx;
|
|
}
|
|
.ljtx{
|
|
margin-top: 40rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
}
|
|
}
|
|
.active{
|
|
color: #fff !important;
|
|
text{
|
|
display: block;
|
|
width: 54rpx;
|
|
height: 8rpx;
|
|
background: #fff;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
margin: auto;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
.tabs{
|
|
display: flex;
|
|
padding-top: 108rpx;
|
|
padding-left: 56rpx;
|
|
box-sizing: border-box;
|
|
view{
|
|
margin-right: 72rpx;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
}
|
|
</style>
|
|
|