|
@@ -0,0 +1,389 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <view class="line"></view>
|
|
|
|
|
+ <view class="picker-box">
|
|
|
|
|
+ <picker @change="bindYearPickerChange" :value="selYearIndex" :range="years" class="picker-input">
|
|
|
|
|
+ <view class="txt-picker">
|
|
|
|
|
+ <view>{{years[selYearIndex]}}</view>
|
|
|
|
|
+ <uni-icons type="bottom" size="22"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ <picker @change="bindMonthPickerChange" :value="selMonthindex" :range="months" class="picker-input">
|
|
|
|
|
+ <view class="txt-picker">
|
|
|
|
|
+ <view>{{months[selMonthindex]}}</view>
|
|
|
|
|
+ <uni-icons type="bottom" size="22"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="line"></view>
|
|
|
|
|
+ <view class="show-charts">
|
|
|
|
|
+ <view class="show-label">
|
|
|
|
|
+ <image class="show-logo-left" src="../static/images/dt.png"></image>
|
|
|
|
|
+ <view class="show-txt-label">消费走势图</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="charts-box">
|
|
|
|
|
+ <qiun-data-charts type="line" :chartData="chartData" :opts="chartOpts" :ontouch="true"
|
|
|
|
|
+ tooltipFormat="tooltipDemo1" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="line"></view>
|
|
|
|
|
+ <view class="xfjl">
|
|
|
|
|
+ <view class="xfjl-title">
|
|
|
|
|
+ <image class="show-logo-left" src="../static/images/xfjl.png"></image>
|
|
|
|
|
+ <view class="show-txt-label">消费记录</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <scroll-view scroll-y="true" :style="{height: screenHeight}" @scrolltoupper="scroll_to_upper"
|
|
|
|
|
+ @scrolltolower="scroll_to_lower">
|
|
|
|
|
+ <view class="items" v-for="(item, index) in consumeRecords" :key="index">
|
|
|
|
|
+ <view class="item">
|
|
|
|
|
+ <view class="item-left">
|
|
|
|
|
+ <image src="../static/images/item-icon.png" mode=""></image>
|
|
|
|
|
+ <view class="item-desc">
|
|
|
|
|
+ <view class="item-title">{{item.loudong}}</view>
|
|
|
|
|
+ <view class="item-time">开始时间:{{item.startTime}}</view>
|
|
|
|
|
+ <view class="item-time">结束时间:{{item.endTime}}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="item-right">{{item.amount.toFixed(2)}}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ screenHeight: 0,
|
|
|
|
|
+ ceshi: 'code',
|
|
|
|
|
+ years: ['2021年', '2022年'], // 候选年份
|
|
|
|
|
+ months: ['全部', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 候选月份
|
|
|
|
|
+ selYearIndex: 0, // 选择的年份
|
|
|
|
|
+ selMonthindex: 0, // 选择的月份
|
|
|
|
|
+ chartData: {
|
|
|
|
|
+ categories: [],
|
|
|
|
|
+ series: []
|
|
|
|
|
+ },
|
|
|
|
|
+ chartOpts: {
|
|
|
|
|
+ color: ["#1890FF", "#91CB74", "#FAC858"],
|
|
|
|
|
+ padding: [15, 10, 0, 15],
|
|
|
|
|
+ legend: {},
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ disableGrid: true
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ data: [{
|
|
|
|
|
+ max: 0
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ extra: {
|
|
|
|
|
+ line: {
|
|
|
|
|
+ type: "curve",
|
|
|
|
|
+ width: 2
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ consumeRecords: [{
|
|
|
|
|
+ loudong: '科技楼-5F-101',
|
|
|
|
|
+ startTime: '2022-03-12 12:12:15',
|
|
|
|
|
+ endTime: '2022-03-12 13:12:15',
|
|
|
|
|
+ amount: -20.0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ loudong: '科技楼-5F-101',
|
|
|
|
|
+ startTime: '2022-03-12 12:12:15',
|
|
|
|
|
+ endTime: '2022-03-12 13:12:15',
|
|
|
|
|
+ amount: -20.0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ loudong: '科技楼-5F-101',
|
|
|
|
|
+ startTime: '2022-03-12 12:12:15',
|
|
|
|
|
+ endTime: '2022-03-12 13:12:15',
|
|
|
|
|
+ amount: -20.0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ loudong: '科技楼-5F-101',
|
|
|
|
|
+ startTime: '2022-03-12 12:12:15',
|
|
|
|
|
+ endTime: '2022-03-12 13:12:15',
|
|
|
|
|
+ amount: -20.0
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ loudong: '科技楼-5F-101',
|
|
|
|
|
+ startTime: '2022-03-12 12:12:15',
|
|
|
|
|
+ endTime: '2022-03-12 13:12:15',
|
|
|
|
|
+ amount: -20.0
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ this.get_xiaofiezoushi()
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow() {
|
|
|
|
|
+ // 从新计算高度
|
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
|
+ this.calc_screen_height()
|
|
|
|
|
+ // }, 1500)
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 滚动到顶部提示
|
|
|
|
|
+ */
|
|
|
|
|
+ scroll_to_upper() {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '到顶了!',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 500
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 滚动到底部提示
|
|
|
|
|
+ */
|
|
|
|
|
+ scroll_to_lower() {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '到底了!',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 500
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 选择年份
|
|
|
|
|
+ * @param {Object} e
|
|
|
|
|
+ */
|
|
|
|
|
+ bindYearPickerChange(e) {
|
|
|
|
|
+ // console.log(e);
|
|
|
|
|
+ this.selYearIndex = e.target.value
|
|
|
|
|
+ console.log(this.years[this.selYearIndex]);
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 选择月份
|
|
|
|
|
+ * @param {Object} e
|
|
|
|
|
+ */
|
|
|
|
|
+ bindMonthPickerChange(e) {
|
|
|
|
|
+ // console.log(e);
|
|
|
|
|
+ this.selMonthindex = e.target.value
|
|
|
|
|
+ console.log(this.months[this.selMonthindex]);
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 按月、年获取消费记录
|
|
|
|
|
+ */
|
|
|
|
|
+ async get_xiaofiezoushi() {
|
|
|
|
|
+ // console.log(this.roomSelect);
|
|
|
|
|
+ var reg = /[\u4e00-\u9fa5]/g;
|
|
|
|
|
+ var str = '墨轩湖校区1-302';
|
|
|
|
|
+ var dom = str.replace(reg, "");
|
|
|
|
|
+ if (dom != '' && typeof(dom) != 'undefined') {
|
|
|
|
|
+ let res = null;
|
|
|
|
|
+ res = await this.$myRequest({
|
|
|
|
|
+ host: this.ceshi,
|
|
|
|
|
+ // url: '/HotWaters/elqueryDayPower.action',
|
|
|
|
|
+ url: '/HotWaters/elMonthlist.action',
|
|
|
|
|
+ method: 'POST',
|
|
|
|
|
+ header: {
|
|
|
|
|
+ 'content-type': 'application/x-www-form-urlencoded'
|
|
|
|
|
+ },
|
|
|
|
|
+ data: {
|
|
|
|
|
+ 'dom': dom,
|
|
|
|
|
+ 'page': 1,
|
|
|
|
|
+ 'rows': 12
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // console.log(res.data.rows);
|
|
|
|
|
+ // console.log(res.data);
|
|
|
|
|
+ if (res.data.rows.length == 0) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (typeof res.data.rows === 'undefined') {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '加载数据异常',
|
|
|
|
|
+ duration: 1500
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ let chrt_data = {
|
|
|
|
|
+ categories: [],
|
|
|
|
|
+ series: [],
|
|
|
|
|
+ }
|
|
|
|
|
+ let elc_max = -1.0
|
|
|
|
|
+ let dt = ''
|
|
|
|
|
+ let temp = 0
|
|
|
|
|
+ let data = []
|
|
|
|
|
+ for (var i = 0; i < res.data.rows.length; i++) {
|
|
|
|
|
+ dt = res.data.rows[i].dataTime
|
|
|
|
|
+ chrt_data.categories.push(parseInt(dt.substr(dt.indexOf('-') + 1, dt.length)) + '月')
|
|
|
|
|
+ temp = res.data.rows[i].totalMoney
|
|
|
|
|
+ temp = temp.toFixed(2)
|
|
|
|
|
+ data.push(temp)
|
|
|
|
|
+ if (parseFloat(temp) > parseFloat(elc_max)) {
|
|
|
|
|
+ elc_max = temp
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ let items = {
|
|
|
|
|
+ name: '金额',
|
|
|
|
|
+ data: data
|
|
|
|
|
+ }
|
|
|
|
|
+ chrt_data.series.push(items)
|
|
|
|
|
+ let m = parseFloat(Math.abs(elc_max))
|
|
|
|
|
+ // console.log(chrt_data);
|
|
|
|
|
+ if (elc_max == 0.0) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.chartOpts.yAxis.data[0].max = parseInt(10)
|
|
|
|
|
+ this.chartData = chrt_data;
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.chartOpts.yAxis.data[0].max = parseInt(m + 5)
|
|
|
|
|
+ this.chartData = chrt_data;
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '宿舍号为空',
|
|
|
|
|
+ icon: 'success'
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 计算屏幕的高度
|
|
|
|
|
+ */
|
|
|
|
|
+ calc_screen_height() {
|
|
|
|
|
+ uni.getSystemInfo({
|
|
|
|
|
+ success: res => {
|
|
|
|
|
+ let h = ((res.screenHeight * (750 / res.windowWidth)) - 820) //将px 转换rpx
|
|
|
|
|
+ this.screenHeight = Math.floor(h) + 'rpx'
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ .container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-family: "Microsoft YaHei-3970(82674968)";
|
|
|
|
|
+ width: 730rpx;
|
|
|
|
|
+ padding: 10rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .line {
|
|
|
|
|
+ height: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .picker-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ width: 375rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .picker-input {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border: 2rpx solid #CCCCCC;
|
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .txt-picker {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 175rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .show-charts {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ .show-label {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
|
|
+ margin: 0 10rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .show-txt-label {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .xfjl {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ .xfjl-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
|
|
+ margin: 0 10rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .show-txt-label {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .items {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ .item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 120rpx;
|
|
|
|
|
+ margin: 10rpx;
|
|
|
|
|
+ padding: 15rpx 0;
|
|
|
|
|
+ border-bottom: 1px solid #CCCCCC;
|
|
|
|
|
+
|
|
|
|
|
+ .item-left {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 90rpx;
|
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
+ margin: 0 20rpx 0 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-desc {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .item-title {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-time {
|
|
|
|
|
+ font-size: 24upx;
|
|
|
|
|
+ color: #c8cdd8;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-right {
|
|
|
|
|
+ font-size: 36upx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #4456fb;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|