|
|
@@ -0,0 +1,549 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="扣费记录" title-color="#101010" >
|
|
|
+ <view class="slot" v-if="personInfo.allowInvoice"
|
|
|
+ slot="right" @click="gotoUrl('/pages/invoiceManagement/invoiceManagement')" >
|
|
|
+ 开发票
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="tabs-box" >
|
|
|
+ <view class="tabs1">
|
|
|
+ <u-tabs :list="list1" inactive-color="#777777" active-color="#333333 " bg-color="#fff" :is-scroll="false" :current="current" @change="change1"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-down" color="#777777" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 折线图 -->
|
|
|
+ <view class="chart-box">
|
|
|
+ <view class="infos">
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 1月 共扣费
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ 1000.00<text class="unit">元</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 账户余额
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ 868.00<text class="unit">元</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chart">
|
|
|
+ <view id="pieEcharts" >
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tabs">
|
|
|
+ <u-picker v-model="tabsFrom.show1" mode="selector" :range="tabsFrom.selector1" range-key="label" @confirm="selector1confirm" ></u-picker>
|
|
|
+ <u-picker-select title="日期选择" v-model="tabsFrom.show2"
|
|
|
+ :defaultTime="tabsFrom.show2Index" :endYear="endYear"
|
|
|
+ mode="time" :params="params" @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
|
|
|
+
|
|
|
+ <view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon name="arrow-up"
|
|
|
+ v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
+ <view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon name="arrow-up"
|
|
|
+ v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
+ </view>
|
|
|
+ <!-- 记录 -->
|
|
|
+ <view class="records-item" >
|
|
|
+ <view class="time">
|
|
|
+ {{queryMonth}} 合计扣费 {{jpAmount(sumAmount)}}元
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="details" v-for="(item,i) in list"
|
|
|
+ @click="gotoUrl('/pages/deductionRecord/deductionDetails?id='+item.id)"
|
|
|
+ :key="i" >
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" v-if="item.remark.indexOf('水')>-1" src="@/assets/img/wImage@1x.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.remark.indexOf('房')>-1||item.remark.indexOf('租')>-1" src="@/assets/img/wImage.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.remark.indexOf('保洁')>-1" src="@/assets/img/wImage3.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.remark.indexOf('物业')>-1" src="@/assets/img/wImage4.png" mode=""></image>
|
|
|
+
|
|
|
+ <image class="img" v-else src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="details-title">
|
|
|
+ <view class="name">
|
|
|
+ {{item.remark}}
|
|
|
+ </view>
|
|
|
+ <view class="record-time">
|
|
|
+ {{item.createTime}}
|
|
|
+ </view>
|
|
|
+ <view class="record-time" v-if="item.extraInfo" v-html="extraInfoText(item.extraInfo)" >
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ {{jpAmount(item.amount)}}元
|
|
|
+ <u-icon name="arrow-right" style="margin-left: 10rpx;" size="32" color="#999999"></u-icon>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-divider :isnone="list.length==0" nonetext="没有找到相关内容"
|
|
|
+ border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import * as API from '@/apis/pagejs/deduction.js'
|
|
|
+ import * as API_index from '@/apis/pagejs/index.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ nextDay,
|
|
|
+ nextMonth,
|
|
|
+
|
|
|
+ } from '@/apis/utils'
|
|
|
+ import * as echarts from "echarts";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ personInfo:{},
|
|
|
+ myChart:null,
|
|
|
+ list:[],
|
|
|
+ list1: [{
|
|
|
+ name: '格莱慧'
|
|
|
+ }, {
|
|
|
+ name: '楚之源'
|
|
|
+ }, {
|
|
|
+ name: '杜宝银',
|
|
|
+
|
|
|
+ }, {
|
|
|
+ name: '王玉清',
|
|
|
+
|
|
|
+ }, {
|
|
|
+ name: '荆州万乘',
|
|
|
+
|
|
|
+ }],
|
|
|
+ current:0,
|
|
|
+ formData:{
|
|
|
+ pageIndex:1,
|
|
|
+ pageSize:9999,
|
|
|
+ },
|
|
|
+
|
|
|
+ endYear:'',
|
|
|
+ queryMonth:"",
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: false,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ },
|
|
|
+ tabsFrom: {
|
|
|
+ show1: false,
|
|
|
+ show1Index:0,
|
|
|
+ show2Index:'',
|
|
|
+ show2: false,
|
|
|
+ show1Text: "全部类型",
|
|
|
+ show2Text: "全部时间",
|
|
|
+ selector1:[
|
|
|
+ {
|
|
|
+ label: '全部类型',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线上充值',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '线下充值',
|
|
|
+ value: '2',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.endYear=new Date().getFullYear()
|
|
|
+ var date=new Date()
|
|
|
+ this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
|
|
|
+ this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1) +"月"
|
|
|
+ this.contractItemList()
|
|
|
+ this.deductionRecord();
|
|
|
+
|
|
|
+ this.deductionRecordGraph();
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ this.homePage()
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ sumAmount(){
|
|
|
+ let totalAmount =0
|
|
|
+ if(this.list){
|
|
|
+ var amounts=this.list.map(item=>{
|
|
|
+ return item.amount*-1
|
|
|
+ })
|
|
|
+
|
|
|
+ totalAmount = amounts.reduce((accumulator, currentValue) => {
|
|
|
+ return accumulator + currentValue;
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return totalAmount
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ homePage(){
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: "加载中",
|
|
|
+ // mask: true,
|
|
|
+ // })
|
|
|
+
|
|
|
+ API_index.homePage({
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ //this.submitForm.companyId=response.data.companyInfo.id;
|
|
|
+ //this.carhelp.getPersonInfoPlus().companyInfo.id
|
|
|
+ this.personInfo=response.data.tenantInfo;
|
|
|
+ // this.companyInfo=response.data.companyInfo;
|
|
|
+ // if(this.companyInfo.transferAccountsInfo){
|
|
|
+ // this.transferAccountsInfo=JSON.parse(this.companyInfo.transferAccountsInfo)
|
|
|
+ // }
|
|
|
+
|
|
|
+ // var sz=this.companyInfo.paymentMethod.split(',');
|
|
|
+ // if(sz.length==1){
|
|
|
+ // this.submitType=sz[0]
|
|
|
+ // }
|
|
|
+ }).catch(error => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ extraInfoText(extraInfo){
|
|
|
+ var obj=JSON.parse(extraInfo)
|
|
|
+ return `起止码${obj.startMeter}-${obj.endMeter};<br/>合计${obj.kwh}度`
|
|
|
+
|
|
|
+ },
|
|
|
+ selector2confirm(e){
|
|
|
+
|
|
|
+ this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
|
|
|
+
|
|
|
+ this.tabsFrom.show2Index=e.year+"-"+e.month
|
|
|
+ if(e.day){
|
|
|
+ this.tabsFrom.show2Text+=e.day+"日"
|
|
|
+ this.tabsFrom.show2Index+='-'+e.day
|
|
|
+ }
|
|
|
+ //this.tabsFrom.show2Index=this.tabsFrom.show2Text
|
|
|
+
|
|
|
+
|
|
|
+ if(e.day){
|
|
|
+ this.formData.startDate=e.year+"-"+e.month +"-"+e.day
|
|
|
+
|
|
|
+ this.queryMonth=e.year+"年"+e.month+"月"+e.day+"日"
|
|
|
+ this.formData.endDate=this.formData.startDate
|
|
|
+ //nextDay(e.year,e.month, e.day)
|
|
|
+
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.queryMonth=e.year+"年"+e.month+"月"
|
|
|
+ this.formData.startDate=e.year+"-"+e.month +"-1"
|
|
|
+
|
|
|
+ this.formData.endDate=nextMonth(e.year,e.month, 1,1)
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ this.deductionRecord()
|
|
|
+ },
|
|
|
+ selector2reset(e){
|
|
|
+
|
|
|
+ this.tabsFrom.show2Text='全部时间'
|
|
|
+ this.tabsFrom.show2Index='';
|
|
|
+
|
|
|
+
|
|
|
+ this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
|
|
|
+ this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1)+"月"
|
|
|
+ this.deductionRecord()
|
|
|
+ },
|
|
|
+ selector1confirm(e){
|
|
|
+
|
|
|
+ var index=e[0]
|
|
|
+ this.tabsFrom.show1Index=index
|
|
|
+ this.tabsFrom.show1Text=this.tabsFrom.selector1[index].label
|
|
|
+ this.formData.contractItemId=this.tabsFrom.selector1[index].value
|
|
|
+ this.deductionRecord()
|
|
|
+ },
|
|
|
+ change() {
|
|
|
+ // 更多的细节，如有需要请自行根据业务逻辑进行处理
|
|
|
+ // this.$refs.uDropdown.highlight(xxx);
|
|
|
+ },
|
|
|
+ deductionRecordGraph(){
|
|
|
+
|
|
|
+ API.deductionRecordGraph().then((response) => {
|
|
|
+
|
|
|
+ var list=response.data;
|
|
|
+
|
|
|
+ // uni.getSystemInfo({
|
|
|
+ // success: (res) => {
|
|
|
+ // const screenWidth = res.windowWidth; // 屏幕宽度,单位为px
|
|
|
+ // console.log('屏幕宽度:', screenWidth);
|
|
|
+
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ this.getPle(list)
|
|
|
+ //uni.upx2px(600)
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPle(list){
|
|
|
+
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('pieEcharts'),null,{
|
|
|
+ width:uni.upx2px(700),height:uni.upx2px(280)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.myChart.clear();
|
|
|
+ var data1=list.map(item=>{
|
|
|
+ return item.month.replace("-", "年")+"月"
|
|
|
+ });
|
|
|
+ var data2=list.map(item=>{
|
|
|
+ return item.monthAmount
|
|
|
+ });
|
|
|
+ var headitemby=""
|
|
|
+ var showkey = "";
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '6%',
|
|
|
+ left: '3%',
|
|
|
+ right: '8%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: (value) => {
|
|
|
+ if (headitemby == "") {
|
|
|
+ headitemby = value
|
|
|
+ }
|
|
|
+ var i = 0
|
|
|
+
|
|
|
+ var showvalue = "";
|
|
|
+ var key = value.substring(0, 5);
|
|
|
+
|
|
|
+ if (showkey == "" || value == headitemby) {
|
|
|
+ showkey = key
|
|
|
+
|
|
|
+ showvalue = value
|
|
|
+ showvalue = value.substring(2)
|
|
|
+ } else {
|
|
|
+ if (key != showkey) {
|
|
|
+ showkey = key
|
|
|
+ showvalue = value
|
|
|
+ showvalue = value.substring(2)
|
|
|
+ } else {
|
|
|
+ showvalue = value.substring(5)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return showvalue.replace("年", ".").replace("月", "");
|
|
|
+
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '合计',
|
|
|
+ data: data2,
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ deductionRecord(){
|
|
|
+ uni.showLoading({
|
|
|
+ mask:true,title:'加载中...'
|
|
|
+ })
|
|
|
+ API.deductionRecord(this.formData).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.list=response.data.data;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ contractItemList(){
|
|
|
+ API.contractItemList({
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ var contractItemList=response.data.contractItemList
|
|
|
+ this.tabsFrom.selector1=[{
|
|
|
+ label: "全部类型",
|
|
|
+ value: '',
|
|
|
+ }]
|
|
|
+ contractItemList.forEach(item=>{
|
|
|
+ this.tabsFrom.selector1.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ change1(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .slot{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ }
|
|
|
+ .tabs-box{
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx 16rpx 0;
|
|
|
+ .tabs1{
|
|
|
+ width: 92%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 折线图
|
|
|
+ .chart-box {
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
|
|
+
|
|
|
+ .infos{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item{
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sum {
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ font-size: 64rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 240rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .tabs{
|
|
|
+
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top: 1px solid rgba(241,241,241,1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ }
|
|
|
+ // 记录
|
|
|
+ .records-item{
|
|
|
+ .time{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .details{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(244,244,244,1);
|
|
|
+ .img{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ .details-title{
|
|
|
+ margin-left: 24rpx;
|
|
|
+ .title{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .record-time{
|
|
|
+ color: rgb(153,153,153);
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-left: auto;
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
