chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d403e8fb9d
smartmeter-app/pages/tj.vue

511 lines
11 KiB
Vue
Raw Normal View History

新建分支提交
2023-12-05 16:45:28 +08:00
<template>
11
2024-01-24 11:55:35 +08:00
<view class="page">
111
2024-04-27 17:20:50 +08:00
<u-navbar :is-back="false" title="统计" :border-bottom="false" :background="bgc" title-color='#2E4975'
title-size='44' height='44' id="navbar">
</u-navbar>
<view v-if="userType=='01'">
<!-- <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 + '月'}}
</view>
<view class="tit">
本月收入{{totalRecharge}}（元）
</view>
<div class="txt">
{{quantity}}
</div>
<view class="echarts" v-if="loging">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<l-echart ref="chart" @finished="initChart"></l-echart>
</view>
11
2024-01-24 11:55:35 +08:00
</view>
111
2024-04-27 17:20:50 +08:00
<view class="list" style="padding-bottom: 120rpx;">
<view class="card_list" v-for="(item,index) in timelist" :key="index">
<view class="left">
{{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}}
</view>
<view class="right">
{{item.recharge}}元
</view>
</view>
11
2024-01-24 11:55:35 +08:00
</view>
111
2024-04-27 17:20:50 +08:00
</view>
<view v-if="userType=='00'">
<view class="title">
统计
11
2024-01-24 11:55:35 +08:00
</view>
111
2024-04-27 17:20:50 +08:00
<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 + '月'}}
页面更新
2024-01-27 16:37:52 +08:00
</view>
111
2024-04-27 17:20:50 +08:00
<view class="tit">
本月用电量（度）
</view>
<div class="txt">
{{quantity}}
</div>
<view class="echarts" v-if="loging">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<l-echart ref="charts" @finished="initCharts"></l-echart>
</view>
</view>
<view class="list" style="padding-bottom: 120rpx;">
<view class="card_list" v-for="(item,index) in timelist" :key="index">
<view class="left">
{{yeartime.year + '年' + yeartime.month + '月' + item.createDay + '日'}}
</view>
<view class="right">
{{item.usedElectriQuantity}}度
</view>
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
</view>
11
2024-01-24 11:55:35 +08:00
<tab-bar :indexs='1'></tab-bar>
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
</template>
<script>
11
2024-01-24 11:55:35 +08:00
import * as echarts from 'echarts'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
新建分支提交
2023-12-05 16:45:28 +08:00
export default {
11
2024-01-24 11:55:35 +08:00
components: {
LEchart
},
新建分支提交
2023-12-05 16:45:28 +08:00
data() {
return {
11
2024-03-25 19:46:07 +08:00
params: {
year: true,
month: true,
day: false,
hour: false,
minute: false,
second: false
},
111
2024-04-27 17:20:50 +08:00
bgc: {
backgroundColor: "#F7FAFE",
},
11
2024-03-25 19:46:07 +08:00
show: false,
yeartime: {
year: '',
month: ''
},
timelist: '',
quantity: 0, //电量
chartData: [],
111
2024-04-27 17:20:50 +08:00
chartday:[],
loging:true,
deviceId:'',
userType:'',
totalRecharge:0,
11
2024-01-23 19:15:52 +08:00
}
},
11
2024-01-24 11:55:35 +08:00
onLoad() {
// setTimeout(() => {
页面更新
2024-01-27 16:37:52 +08:00
11
2024-01-24 11:55:35 +08:00
// this.initChart()
// }, 300);
// this.initChart()
11
2024-03-25 19:46:07 +08:00
// 首次加载页面给现在的时间
111
2024-04-27 17:20:50 +08:00
11
2024-03-25 19:46:07 +08:00
},
onShow() {
111
2024-04-27 17:20:50 +08:00
this.deviceId= uni.getStorageSync('deviceId')
this.userType = uni.getStorageSync('userType')
const now = new Date();
this.yeartime.year = now.getFullYear()
this.yeartime.month = now.getMonth() + 1
if( this.userType=='00'){
this.gettimes()
}else if ( this.userType=='01'){
this.gettime()
}
11
2024-01-24 11:55:35 +08:00
},
11
2024-01-23 19:15:52 +08:00
methods: {
11
2024-03-25 19:46:07 +08:00
// 点击获取时间
confirm(e) {
this.yeartime = e
this.gettime()
},
// 进行获取用电量请求
gettime() {
let data = {
111
2024-04-27 17:20:50 +08:00
11
2024-03-25 19:46:07 +08:00
year: this.yeartime.year,
month: this.yeartime.month,
groupBy: 'create_day'
}
111
2024-04-27 17:20:50 +08:00
this.loging=false
11
2024-03-25 19:46:07 +08:00
this.$u.get('app/bill/landlordCount', data).then((res) => {
if (res.code == 200) {
this.timelist = res.data
111
2024-04-27 17:20:50 +08:00
this.totalRecharge=res.totalRecharge
this.chartData = this.timelist.map(item => item.recharge);
this.chartday = this.timelist.map(item => item.createDay + '日');
// console.log('用电', this.chartData, '时间', this.chartday);
this.loging=true
11
2024-03-25 19:46:07 +08:00
// 求用电总度数
111
2024-04-27 17:20:50 +08:00
// this.quantity = 0
// for (let i = 0; i < this.timelist.length; i++) {
// this.quantity += this.timelist[i].recharge / 0.5
// }
// return this.quantity
11
2024-03-25 19:46:07 +08:00
}
})
},
111
2024-04-27 17:20:50 +08:00
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 + '日');
// console.log('用电', this.chartData, '时间', this.chartday);
this.loging=true
// 求用电总度数
// this.quantity = 0
// for (let i = 0; i < this.timelist.length; i++) {
// this.quantity += this.timelist[i].recharge / 0.5
// }
// return this.quantity
}
})
},
11
2024-01-24 11:55:35 +08:00
generateWaveData(length) {
11
2024-03-25 19:46:07 +08:00
const data = []
页面更新
2024-01-27 16:37:52 +08:00
for (let i = 0; i < length; i++) {
11
2024-03-25 19:46:07 +08:00
const y = Math.sin((i / (length - 1)) * Math.PI * 2) // 正弦函数生成波浪形状的y值
data.push((y + 1) * 50) // 映射到0-100的范围
页面更新
2024-01-27 16:37:52 +08:00
}
11
2024-03-25 19:46:07 +08:00
return data
页面更新
2024-01-27 16:37:52 +08:00
},
11
2024-03-25 19:46:07 +08:00
11
2024-01-24 11:55:35 +08:00
async initChart() {
console.log('111111');
111
2024-04-27 17:20:50 +08:00
let that =this
11
2024-01-24 11:55:35 +08:00
// let _this = this
11
2024-03-25 19:46:07 +08:00
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,
},
111
2024-04-27 17:20:50 +08:00
data:that.chartday,
11
2024-03-25 19:46:07 +08:00
},
yAxis: {
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 11,
formatter: function(value) {
// 保留两位小数，没有小数时显示00
111
2024-04-27 17:20:50 +08:00
return value + '.00' + '元'
11
2024-03-25 19:46:07 +08:00
},
},
splitLine: {
show: false,
},
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)',
},
{
gt: 5,
lt: 7,
color: 'rgba(0, 0, 180, 0.4)',
},
],
},
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'
}, ]),
},
},
111
2024-04-27 17:20:50 +08:00
data:that.chartData,
11
2024-03-25 19:46:07 +08:00
}],
};
111
2024-04-27 17:20:50 +08:00
const chart = await that.$refs.chart.init(echarts)
11
2024-03-25 19:46:07 +08:00
console.log(option,'111');
// 给折线图赋值
111
2024-04-27 17:20:50 +08:00
// option.series[0].data = that.chartData
option.xAxis.data = that.chartday
chart.setOption(option)
return chart
},
async initCharts() {
console.log('111111');
let that =this
// let _this = this
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,
},
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)',
},
{
gt: 5,
lt: 7,
color: 'rgba(0, 0, 180, 0.4)',
},
],
},
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,
}],
};
const chart = await that.$refs.charts.init(echarts)
console.log(option,'111');
// 给折线图赋值
// option.series[0].data = that.chartData
option.xAxis.data = that.chartday
11
2024-01-24 11:55:35 +08:00
chart.setOption(option)
11
2024-03-25 19:46:07 +08:00
return chart
},
11
2024-01-23 19:15:52 +08:00
}
}
新建分支提交
2023-12-05 16:45:28 +08:00
</script>
11
2024-01-24 11:55:35 +08:00
<style lang="scss">
11
2024-03-25 19:46:07 +08:00
.btnxz {
padding: 0 20rpx;
box-sizing: border-box;
font-size: 28rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
}
11
2024-01-24 11:55:35 +08:00
page {
background-color: #F7FAFE;
11
2024-03-25 19:46:07 +08:00
// padding-bottom: 240rpx;
// box-sizing: border-box;
11
2024-01-24 11:55:35 +08:00
}
.page {
padding: 0 59rpx;
.title {
11
2024-03-25 19:46:07 +08:00
margin-top: 120rpx;
11
2024-01-24 11:55:35 +08:00
font-size: 48rpx;
font-weight: 400;
letter-spacing: 0rpx;
color: rgba(38, 43, 55, 1);
}
11
2024-01-23 19:15:52 +08:00
11
2024-01-24 11:55:35 +08:00
.card {
padding-top: 32rpx;
11
2024-03-25 19:46:07 +08:00
margin-top: 46rpx;
11
2024-01-24 11:55:35 +08:00
width: 632rpx;
height: 586rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
opacity: 1;
// filter: blur(0px);
border-radius: 40rpx;
.month {
页面更新
2024-01-27 16:37:52 +08:00
11
2024-01-24 11:55:35 +08:00
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;
}
页面更新
2024-01-27 16:37:52 +08:00
11
2024-01-24 11:55:35 +08:00
.echarts {
margin-left: 22rpx;
margin-top: 60rpx;
// width: 100%;
// height: 80%;
width: 588rpx;
height: 320rpx;
}
}
页面更新
2024-01-27 16:37:52 +08:00
.list {
margin-top: 16rpx;
11
2024-03-25 19:46:07 +08:00
// height:280rpx;
// overflow-y: scroll;
页面更新
2024-01-27 16:37:52 +08:00
.card_list {
width: 632rpx;
height: 88rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
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;
}
}
}
11
2024-01-24 11:55:35 +08:00
}
</style>
Reference in New Issue Copy Permalink