开始做用电查询
This commit is contained in:
150
pages/electricQuery/index.js
Normal file
150
pages/electricQuery/index.js
Normal file
@@ -0,0 +1,150 @@
|
||||
// pages/electricQuery/index.js
|
||||
import { getElectricityList } from "../../service/accounting";
|
||||
import { getTenementMeterList } from "../../service/meter";
|
||||
import dayjs from "../../utils/dayjs";
|
||||
import request from '../../utils/request';
|
||||
import * as echarts from '../..//components/echarts/echarts';
|
||||
const { OK } = request;
|
||||
const piedata = [1,2,3,4,5]
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
queryType: 0,
|
||||
timeType: 0,
|
||||
show: false,
|
||||
columns: [],
|
||||
meterList: [],
|
||||
meterCode: "",
|
||||
meterId: "",
|
||||
year: dayjs().format('YYYY'),
|
||||
yearMonth: dayjs().format("YYYY-MM"),
|
||||
yearMonthDay: dayjs().format("YYYY-MM-DD"),
|
||||
header: [
|
||||
{ key: 'address', title: '电表地址', renderBody: (item) => item.meter?.address },
|
||||
{ title: '时间',renderBody: (item) => { return item.time } },
|
||||
{ key: 'number', title: '耗量' },
|
||||
],
|
||||
list: []
|
||||
},
|
||||
changeQueryType(e) {
|
||||
const { type } = e.currentTarget.dataset
|
||||
this.setData({ queryType: type },() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
changeTimeType(e) {
|
||||
const { type } = e.currentTarget.dataset
|
||||
this.setData({ timeType: type }, () => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.init()
|
||||
},
|
||||
async init() {
|
||||
const { queryType, timeType, meterId } = this.data;
|
||||
const { code, message, data } = await getElectricityList({ type: queryType, meter: meterId, time: timeType })
|
||||
console.log('data', data)
|
||||
this.setData({ list: data })
|
||||
},
|
||||
async getMeters() {
|
||||
const { id } = wx.getStorageSync('tenement')
|
||||
const { code, message, data } = await getTenementMeterList(id);
|
||||
// if (code !== OK) {
|
||||
// alertInfo(message)
|
||||
// return;
|
||||
// }
|
||||
|
||||
this.setData({
|
||||
meterList: data || [],
|
||||
})
|
||||
},
|
||||
clickMeter() {
|
||||
this.setData({
|
||||
type: "meter",
|
||||
columns: [{ id: "", name: "全部", code: "" }, ...this.data.meterList.map(item => ({ id: item.id, name: `${item.code}-${item.address}`, code: item.code }))],
|
||||
show: true,
|
||||
title: "表计"
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.setData({
|
||||
type: "meter",
|
||||
columns: [],
|
||||
show: false,
|
||||
title: "",
|
||||
})
|
||||
},
|
||||
onOk(e) {
|
||||
const { type, value = {} } = e.detail;
|
||||
const { id, code } = e;
|
||||
console.log('e', e)
|
||||
const { year } = this.data;
|
||||
// const currentYear = years[Number(e)]
|
||||
this.setData({
|
||||
// year: currentYear,
|
||||
codeId: id,
|
||||
meterCode: code,
|
||||
type: "",
|
||||
show: false,
|
||||
title: ""
|
||||
}, () => {
|
||||
this.init();
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
this.getMeters()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
13
pages/electricQuery/index.json
Normal file
13
pages/electricQuery/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigator": "/components/navigator/index",
|
||||
"van-icon": "@vant/weapp/icon/index",
|
||||
"custom-picker": "/components/picker/index",
|
||||
"van-row": "@vant/weapp/row/index",
|
||||
"van-col": "@vant/weapp/col/index",
|
||||
"van-button": "@vant/weapp/button/index",
|
||||
"table": "/components/table/table",
|
||||
"empty": "/components/empty/index"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
81
pages/electricQuery/index.wxml
Normal file
81
pages/electricQuery/index.wxml
Normal file
@@ -0,0 +1,81 @@
|
||||
<!--pages/electricQuery/index.wxml-->
|
||||
<navigator title="用电查询" canBack="{{true}}" />
|
||||
<view class="wrapper">
|
||||
<view class="queryWrapper">
|
||||
<view class="label">
|
||||
选择电表
|
||||
</view>
|
||||
<view class="select" bind:tap="clickMeter">
|
||||
<view class="selectContent">
|
||||
{{ meterCode === "" ? '全部' : meterCode }}
|
||||
</view>
|
||||
<van-icon name="arrow-down" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="query">
|
||||
<view class="typeQuery">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<view class="typeQueryText" style="color: {{queryType === 0 ? '#0958d9' : '#000'}}" bind:tap="changeQueryType" data-type="{{0}}"> 电量查询 </view>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<view class="typeQueryText" style="color: {{queryType === 1 ? '#0958d9' : '#000'}}" bind:tap="changeQueryType" data-type="{{1}}"> 抄表记录 </view>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<view class="typeQueryText" style="color: {{queryType === 2 ? '#0958d9' : '#000'}}" bind:tap="changeQueryType" data-type="{{2}}"> 账务余额 </view>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
<view class="timeQuery" wx:if="{{queryType === 0}}">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<view class="timeQueryText" style="color: {{timeType === 0 ? '#0958d9' : '#000'}}" bind:tap="changeTimeType" data-type="{{0}}"> 日耗量 </view>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<view class="timeQueryText" style="color: {{timeType === 1 ? '#0958d9' : '#000'}}" bind:tap="changeTimeType" data-type="{{1}}"> 月耗量 </view>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<view class="timeQueryText" style="color: {{timeType === 2 ? '#0958d9' : '#000'}}" bind:tap="changeTimeType" data-type="{{2}}"> 年耗量 </view>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tooltip">
|
||||
不包括线损电量，显示为电表实际消耗电量。仅供参考，实际能耗电量以电费账单为主。如有疑问，请联系客服。
|
||||
</view>
|
||||
<view class="timeChooseWrapper">
|
||||
<view> 选择时间 </view>
|
||||
<view class="time">
|
||||
<view class="timeText"> {{yearMonthDay}} </view>
|
||||
<van-icon name="arrow-down" />
|
||||
</view>
|
||||
<van-button type="info" size="small"> 导出 </van-button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view style="margin: 30rpx;">
|
||||
<table header="{{header}}" list="{{list}}" wx:if="{{list.length}}" />
|
||||
<empty bind:refresh="init" wx:else />
|
||||
</view>
|
||||
<view class="sum">
|
||||
合计：表计数量：10，耗电量100
|
||||
</view>
|
||||
<!-- <echarts
|
||||
style="width:200rpx;height:200rpx;position:relative"
|
||||
id="echarts"
|
||||
class='mychart-bar'
|
||||
canvas-id="mychart-bar"
|
||||
ec="{{ ec }}"
|
||||
>
|
||||
</echarts> -->
|
||||
<custom-picker
|
||||
title="{{title}}"
|
||||
show="{{show}}"
|
||||
valueKey="name"
|
||||
columns="{{columns}}"
|
||||
bind:ok="onOk"
|
||||
bind:cancel="onCancel"
|
||||
type="{{type}}"
|
||||
/>
|
||||
89
pages/electricQuery/index.wxss
Normal file
89
pages/electricQuery/index.wxss
Normal file
@@ -0,0 +1,89 @@
|
||||
/* pages/electricQuery/index.wxss */
|
||||
page {
|
||||
background-color: var(--transparent-green);
|
||||
}
|
||||
|
||||
.queryWrapper {
|
||||
margin: 20rpx 0rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.sum {
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.query {
|
||||
margin: 20rpx 0rpx;
|
||||
}
|
||||
|
||||
.typeQueryText {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
background-color: var(--light-green);
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.select {
|
||||
border: 1rpx solid #ccc;
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.timeQueryText {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
background-color: rgb(242,248,246);
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
margin: 20rpx 0;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.timeChooseWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex: 1;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
display: flex;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.timeText {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mychart-bar::after{
|
||||
content:"";
|
||||
display:block;
|
||||
clear:both
|
||||
}
|
||||
Reference in New Issue
Block a user