<template>
<view class="page" >
<u-navbar :is-back="false" title="统计" :border-bottom="false" :background="bgc" title-color='#fff'
title-size='44' height='48' id="navbar">
</u-navbar>
<view style="padding-top: 30rpx;">
<view class="card">
<view class="xzsj">
<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
</view>
<view class="month" style="display: flex;">
<text @click="btnshow(1)">{{yeartime.year + '年' + yeartime.month + '月' + yeartime.day + '日'}} </text>
<view class="" style="margin: 0 10rpx;">
-
</view>
<view @click="btnshow(2)">{{yeartimes.year + '年' + yeartimes.month + '月' + yeartimes.day + '日'}} <u-icon style="margin-left: 10rpx;margin-top: 6rpx;"name="arrow-down-fill"></u-icon></view>
</view>
<view class="tit">
当前时间段收入{{recharge.toFixed(2)}}（元） 累计收入{{totalRecharge.toFixed(2)}}（元）
</view>
<view class="echarts" >
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
</view>
</view>
<view class="list" style="padding-bottom: 240rpx;">
<view class="card_list" v-for="(item,index) in timelists" :key="index">
<view class="left">
<!-- // {{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}} -->
{{item.key}}
</view>
<view class="right">
{{item.value}}元
</view>
</view>
</view>
</view>
<view v-if="userType=='00'">
<view class="title">
统计
</view>
<view class="card">
<view class="xzsj">
<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
</view>
<view class="month" @click="show = true">
{{yeartime.year + '年' + yeartime.month + '月' + yeartime.day + '日'}}
</view>
<view class="tit">
本月用电量（度）
</view>
<div class="txt">
{{quantity}}
</div>
<view class="echarts" v-if="loging">
</view>
</view>
</view>
<!-- <view class="name">
更多功能
</view>
<view class="gongneng">
<image @click="btndingdan" src="https://api.ccttiot.com/smartmeter/img/static/uabiTqXSZVFrY5ck0MoK" mode=""></image>
<image @click="btnshebie" src="https://api.ccttiot.com/smartmeter/img/static/u5SKuZPtnuFJPdQOYe4u" mode=""></image>
<image @click="btndianpu" src="https://api.ccttiot.com/smartmeter/img/static/ubVQt7h69i4GKsvRK64V" mode=""></image>
<image @click="btngeren" src="https://api.ccttiot.com/smartmeter/img/static/uUnZuUCeUajUb5gD23O4" mode=""></image>
</view> -->
<tab-bar :indexs='1' style=""></tab-bar>
</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
ec: {
lazyLoad: true
},
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
recharge: 0,
bgc: {
backgroundColor: "#8883f0",
},
show: false,
yeartime: {
year: '',
month: '',
day:''
},
yeartimes: {
year: '',
month: '',
day:''
},
timelist: '',
quantity: 0, //电量
chartData: [],
chartday: [],
loging: true,
deviceId: '',
userType: '',
totalRecharge: 0,
dateday:'',
timelists:'',
monthdui:'',
employId:'',
sceneValue:'',
kstime:'',
jstime:'',
num:''
}
},
// 分享到好友（会话）
onShareAppMessage: function () {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
onLoad(option) {
if(option.q){
function getQueryParam(url, paramName) {
let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
let results = regex.exec(url);
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
}
this.sceneValue = option.q
let decodedValue = decodeURIComponent(this.sceneValue);
let id = getQueryParam(decodedValue, 'i')
this.employId = id
let that = this
uni.showModal({
title: '温馨提示',
content: '您确定要成为合伙人吗？',
showCancel: true,
success: function(res) {
if (res.confirm) {
that.$u.put(`/app/storeStaff/bindUser?employId=${that.employId}`).then(res => {
if (res.code == 200) {
uni.showToast({
title:'绑定成功',
icon: 'success',
duration: 2000
})
}else if(res.code == 401){
uni.reLaunch({
url:'/pages/login/login'
})
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
} else if (res.cancel) {
uni.reLaunch({
url:'/pages/shouye/index'
})
}
}
})
}
},
onShow() {
this.timelist = []
setTimeout(() => {
console.log(this.$refs)
this.$refs.canvas.init(this.initChart)
}, 500)
this.recharge = 0
const now = new Date();
this.yeartime = {
year: now.getFullYear(),
month: now.getMonth() + 1, // 月份从0开始，所以需要+1
day: 1 // 设置为月份的第一天
}
this.kstime = this.yeartime.year + '-' + (this.yeartime.month < 10 ? '0' + this.yeartime.month : this.yeartime.month) + '-' + (this.yeartime.day < 10 ? '0' + this.yeartime.day : this.yeartime.day)
this.yeartimes.year = now.getFullYear()
this.yeartimes.month = now.getMonth() + 1
this.yeartimes.day = now.getDate()
this.jstime = this.yeartimes.year + '-' + (this.yeartimes.month < 10 ? '0' + this.yeartimes.month : this.yeartimes.month) + '-' + (this.yeartimes.day < 10 ? '0' + this.yeartimes.day : this.yeartimes.day)
this.gettime()
},
methods: {
// 选择时间
btnshow(num){
this.show = true
this.num = num
},
// 点击跳转到管理店铺
btndianpu(){
uni.navigateTo({
url:'/page_fenbao/statulist/myshop/index?types=' + 11
})
},
// 点击返回首页
btns(){
uni.reLaunch({
url:'/pages/shouye/index'
})
},
// 点击跳转到个人中心
btngeren(){
uni.navigateTo({
url:'/page_fenbao/hehuoren/geren'
})
},
// 点击跳转到订单管理
btndingdan(){
uni.navigateTo({
url:'/page_user/switchs?type=' + 11
})
},
// 点击跳转到设备列表
btnshebie(){
uni.navigateTo({
url:'/page_fenbao/hehuoren/shebeilist'
})
},
// 点击获取时间
confirm(e) {
console.log(e);
this.recharge = 0
if(this.num == 1){
this.yeartime = e
this.kstime = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
}else{
this.yeartimes = e
this.jstime = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
}
this.gettime()
setTimeout(() => {
console.log(this.$refs)
this.$refs.canvas.init(this.initChart)
}, 500)
},
// 进行获取用电量请求
gettime() {
// let data = {
// year: this.yeartime.year,
// month: this.yeartime.month,
// groupBy: 'create_date'
// }
this.loging = false
this.$u.get(`/app/dashboard/bonusDailyAmount?payDateStart=${this.kstime}&payDateEnd=${this.jstime}`).then((res) => {
if (res.code == 200) {
this.timelist = res.data
// if(this.monthdui != this.yeartime.month){
// this.timelists = this.timelist
// this.totalRecharge = res.totalRecharge
this.chartData = this.timelist.map(item => item.value);
this.chartday = this.timelist.map(item => item.key.slice(-2) + '日');
// }else{
// this.timelists = this.timelist.slice(0,this.dateday)
// this.timelists.reverse()
// this.totalRecharge = res.totalRecharge
// this.chartData = this.timelist.slice(0, this.dateday).map(item => item.recharge)
// this.chartday = this.timelist.slice(0, this.dateday).map(item => item.createDay + '日');
// }
this.timelists = this.timelist
this.totalRecharge = res.total
this.loging = true
for (let i = 0; i < this.timelist.length; i++) {
this.recharge += this.timelist[i].value
}
return this.recharge
this.$refs.canvas.init(this.initChart)
}else{
uni.showToast({
title:res.msg,
icon: 'none',
duration:2000
})
}
})
},
gettimes() {
let data = {
deviceId: this.deviceId,
year: this.yeartime.year,
month: this.yeartime.month,
groupBy: 'create_date'
}
this.loging = false
this.$u.get('/app/device/electric/count', data).then((res) => {
if (res.code == 200) {
this.timelist = res.data
this.chartData = this.timelist.map(item => item.usedElectriQuantity);
this.chartday = this.timelist.map(item => item.createDay + '日');
this.loging = true
}
})
},
generateWaveData(length) {
const data = []
for (let i = 0; i < length; i++) {
const y = Math.sin((i / (length - 1)) * Math.PI * 2) // 正弦函数生成波浪形状的y值
data.push((y + 1) * 50) // 映射到0-100的范围
}
return data
},
initChart(canvas, width, height, canvasDpr) {
let that = this
console.log(canvas, width, height, canvasDpr)
const option = {
grid: {
left: 60,
right: 10,
top: 10,
bottom: 30,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 11,
rotate: 0,
},
splitLine: {
show: false,
},
data: that.chartday,
},
yAxis: {
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 11,
formatter: function(value) {
// 保留两位小数，没有小数时显示00
return value + '元'
},
},
splitLine: {
show: false,
},
},
series: [{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#E0DBFF',
width: 4,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#B4B0F7'
}, ]),
},
},
data: that.chartData,
}],
};
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
option.series[0].data = that.chartData
canvas.setChart(chart)
chart.setOption(option)
return chart
},
}
}
</script>
<style lang="scss">
/deep/ .u-title{
padding-bottom: 20rpx;
}
/deep/ .u-icon__icon{
padding-bottom: 20rpx;
}
.uni-ec-canvas {
width: 100%;
height: 320rpx;
display: block;
margin-top: 30rpx;
}
.btnxz {
padding: 0 20rpx;
box-sizing: border-box;
font-size: 28rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
}
page {
background-color: #F7FAFE;
}
.page {
padding: 0 59rpx;
.name{
font-size: 36rpx;
color: #3D3D3D;
margin-top: 20rpx;
}
.gongneng{
margin-top: 40rpx;
width: 632rpx;
height: 150rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 24rpx 24rpx 24rpx 24rpx;
display: flex;
justify-content: space-between;
padding: 26rpx 50rpx;
box-sizing: border-box;
image{
width: 96rpx;
height: 102rpx;
}
}
.title {
margin-top: 120rpx;
font-size: 48rpx;
font-weight: 400;
letter-spacing: 0rpx;
color: rgba(38, 43, 55, 1);
}
.card {
padding-top: 32rpx;
margin-top: 10rpx;
width: 632rpx;
height: 540rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
opacity: 1;
border-radius: 40rpx;
.month {
margin-left: 22rpx;
font-size: 28rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
}
.tit {
margin-top: 18rpx;
margin-left: 22rpx;
font-size: 20rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.txt {
margin-top: 2rpx;
margin-left: 22rpx;
font-size: 36rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 700;
color: #FFFFFF;
}
.echarts {
margin-left: 22rpx;
margin-top: 60rpx;
width: 588rpx;
height: 320rpx;
}
}
.list {
margin-top: 16rpx;
height: 630rpx;
overflow: auto;
.card_list {
width: 632rpx;
height: 88rpx;
background: #FFFFFF;
opacity: 1;
border-radius: 30rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-top: 16rpx;
align-items: center;
.left {
margin-left: 52rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
.right {
margin-right: 20rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
}
}
}
</style>