|
@@ -1,160 +1,424 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar title="平台收入统计" title-color="#101010"></u-navbar>
|
|
|
- <!-- 标签 -->
|
|
|
- <view class="tabs">
|
|
|
- <u-picker v-model="tabShow1" mode="selector" :default-selector="[0]" :range="selector"></u-picker>
|
|
|
- <u-picker v-model="tabShow2" mode="time"></u-picker>
|
|
|
- <view class="tabsItem" @click="tabShow1=!tabShow1" >荆鹏软件园 <u-icon
|
|
|
- name="arrow-up" v-if="tabShow1" ></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
- <view class="tabsItem" @click="tabShow2=!tabShow2" >2024-06 <u-icon
|
|
|
- name="arrow-up" v-if="tabShow2"> 2024-06</u-icon><u-icon v-else name="arrow-down"></u-icon></view>
|
|
|
- </view>
|
|
|
- <!-- 统计 -->
|
|
|
- <view class="statistics">
|
|
|
- <view class="statistics-total">
|
|
|
- <view class="total-title">
|
|
|
- 6月预计收入
|
|
|
- </view>
|
|
|
- <view class="total-number">
|
|
|
- 324.75元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="平台收入统计" title-color="#101010"></u-navbar>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tabs">
|
|
|
+ <u-picker v-model="tabsFrom.show1" :default-selector="[tabsFrom.show1Index]" 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"
|
|
|
+ :noselect="false" 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="statistics">
|
|
|
+ <view class="statistics-total">
|
|
|
+ <view class="total-title">
|
|
|
+ {{monthQuery}}月预计收入
|
|
|
+ </view>
|
|
|
+ <view class="total-number">
|
|
|
+ {{info.totalFee}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics-group">
|
|
|
+ <view @click="gotoInfo(2)"
|
|
|
+ class="statistics-item">
|
|
|
+ <view class="content">
|
|
|
+ <!-- 收入 -->
|
|
|
+ <view class="income">
|
|
|
+ <view class="income-title">
|
|
|
+ 线损电费收入({{info.ratio}}%)
|
|
|
+ </view>
|
|
|
+ <view class="income-number">
|
|
|
+ {{info.lineLossFee}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 电量 -->
|
|
|
+ <view class="electric-quantity">
|
|
|
+ <view class="electric-quantity-title">
|
|
|
+ 线损电量
|
|
|
+ </view>
|
|
|
+ <view class="electric-quantity-number">
|
|
|
+ {{info.lineLossKwh}}度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="gotoInfo(1)" class="statistics-item">
|
|
|
+ <view class="content">
|
|
|
+ <!-- 收入 -->
|
|
|
+ <view class="income">
|
|
|
+ <view class="income-title">
|
|
|
+ 分摊电费收入({{info.ratio}}%)
|
|
|
+ </view>
|
|
|
+ <view class="income-number">
|
|
|
+ {{info.sharedFee}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 电量 -->
|
|
|
+ <view class="electric-quantity">
|
|
|
+ <view class="electric-quantity-title">
|
|
|
+ 分摊电量
|
|
|
+ </view>
|
|
|
+ <view class="electric-quantity-number">
|
|
|
+ {{info.sharedKwh}}度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="gotoInfo(3)" class="statistics-item">
|
|
|
+ <view class="content">
|
|
|
+ <!-- 收入 -->
|
|
|
+ <view class="income">
|
|
|
+ <view class="income-title">
|
|
|
+ 节约电费收入({{info.ratio}}%)
|
|
|
+ </view>
|
|
|
+ <view class="income-number">
|
|
|
+ {{info.switchFee}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 电量 -->
|
|
|
+ <view class="electric-quantity">
|
|
|
+ <view class="electric-quantity-title">
|
|
|
+ 节约电量
|
|
|
+ </view>
|
|
|
+ <view class="electric-quantity-number">
|
|
|
+ {{info.switchKwh}}度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 图表 -->
|
|
|
+
|
|
|
+ <view class="chart">
|
|
|
+ <view id="pieEcharts" >
|
|
|
|
|
|
- <view class="statistics-group">
|
|
|
- <view class="statistics-item" v-for="item in 3" >
|
|
|
- <view class="content">
|
|
|
- <!-- 收入 -->
|
|
|
- <view class="income">
|
|
|
- <view class="income-title">
|
|
|
- 线损电费收入
|
|
|
- </view>
|
|
|
- <view class="income-number">
|
|
|
- 108.25元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 电量 -->
|
|
|
- <view class="electric-quantity">
|
|
|
- <view class="electric-quantity-title">
|
|
|
- 线损电量
|
|
|
- </view>
|
|
|
- <view class="electric-quantity-number">
|
|
|
- 125.33度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="icon">
|
|
|
- <u-icon name="arrow-right" color="#acacac" size="24" ></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 图表 -->
|
|
|
- <view class="chart">
|
|
|
- <img src="@/assets/img/incomeChart1@3x.png" alt="" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabShow1:false,
|
|
|
- tabShow2:false,
|
|
|
- selector: [1, 2, 3],
|
|
|
- }
|
|
|
- },
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/revenue.js'
|
|
|
+ import * as echarts from "echarts";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabShow1: false,
|
|
|
+ tabShow2: false,
|
|
|
+ selector: [1, 2, 3],
|
|
|
+ id: "",
|
|
|
+ info: {},
|
|
|
+ list: [],
|
|
|
+ queryDate: "",
|
|
|
+ queryMonth: "",
|
|
|
+ monthQuery: "",
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ endYear: "",
|
|
|
+ myChart: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ this.endYear = new Date().getFullYear()
|
|
|
+ this.id = op.id
|
|
|
+ var date = new Date()
|
|
|
+ this.queryDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+ this.queryMonth = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
|
|
|
+ this.tabsFrom.show2Text = this.queryMonth
|
|
|
+ this.monthQuery = (date.getMonth() + 1)
|
|
|
+ this.getInfo()
|
|
|
+ this.getCompanyList()
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- page{
|
|
|
- padding-bottom: 100px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- // 标签
|
|
|
- .tabs {
|
|
|
-
|
|
|
- height: 96rpx;
|
|
|
- line-height: 96rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-top: 1px solid rgba(241, 241, 241, 1);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 统计
|
|
|
- .statistics{
|
|
|
- .statistics-total{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 36rpx 32rpx;
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- font-size:40rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .statistics-group{
|
|
|
- .statistics-item{
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
-
|
|
|
- .content{
|
|
|
- flex: 0.99;
|
|
|
- // 收入
|
|
|
- .income{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- .income-title{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
-
|
|
|
- }
|
|
|
- .income-number{
|
|
|
- color: rgba(22,119,255,1);
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- // 电量
|
|
|
- .electric-quantity{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 24rpx;
|
|
|
- color: rgba(119,119,119,1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 图表
|
|
|
- .chart{
|
|
|
- margin-top: 40rpx;
|
|
|
- padding: 0 15rpx;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+ gotoInfo(i){
|
|
|
+ var url="/pages/platformRevenueStatistics/saveUtilityIncome?id="+this.id+"&type="+i+"&query="+this.queryDate
|
|
|
+ uni.navigateTo({
|
|
|
+ url:url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selector2confirm(e) {
|
|
|
+
|
|
|
+ this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
|
|
|
+
|
|
|
+ this.tabsFrom.show2Index = e.year + "-" + e.month
|
|
|
+ this.queryMonth = e.year + "年" + e.month + "月"
|
|
|
+ this.queryDate = e.year + "-" + e.month + "-1"
|
|
|
+
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ selector1confirm(e, b) {
|
|
|
+
|
|
|
+ var index = e[0]
|
|
|
+ this.tabsFrom.show1Index = index
|
|
|
+ this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
|
|
|
+ this.id = this.tabsFrom.selector1[index].value;
|
|
|
+
|
|
|
+ if (!b) {
|
|
|
+ this.getInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.platformRevenue({
|
|
|
+ companyId: this.id,
|
|
|
+ queryDate: this.queryDate
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ var list = response.data.incomeList
|
|
|
+ if (list.length) {
|
|
|
+ this.info = list[0]
|
|
|
+ this.getPle()
|
|
|
+ } else {
|
|
|
+ this.info = {}
|
|
|
+ if (this.myChart) {
|
|
|
+ this.myChart.clear()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPle(list) {
|
|
|
+
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('pieEcharts'), null, {
|
|
|
+ width: uni.upx2px(700),
|
|
|
+ height: uni.upx2px(480)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.myChart.clear();
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 30,
|
|
|
+ left: 20,
|
|
|
+ right: 30,
|
|
|
+ bottom: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+
|
|
|
+ formatter: '{b}\n\t{c}元'
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ data: [{
|
|
|
+ value: this.info.lineLossFee,
|
|
|
+ name: '线损电费',
|
|
|
+ itemStyle:{
|
|
|
+ color:"#ef8132"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.info.sharedFee,
|
|
|
+ name: '分摊电费',
|
|
|
+ itemStyle:{
|
|
|
+ color:"#99bd3a"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.info.switchFee,
|
|
|
+ name: '节约电费',
|
|
|
+ itemStyle:{
|
|
|
+ color:"#53b56b"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ getCompanyList() {
|
|
|
+
|
|
|
+ API.platformCompanyList({
|
|
|
+ //companyId:this.id
|
|
|
+ }).then((response) => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ var list = response.data.companyInfoList;
|
|
|
+ var i = 0;
|
|
|
+ var k = 0
|
|
|
+ this.tabsFrom.selector1 = list.map((item) => {
|
|
|
+
|
|
|
+ if (item.id == this.id) {
|
|
|
+ k = i
|
|
|
+ }
|
|
|
+ i++;
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.selector1confirm([k], true)
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 标签
|
|
|
+ .tabs {
|
|
|
+
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top: 1px solid rgba(241, 241, 241, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统计
|
|
|
+ .statistics {
|
|
|
+ .statistics-total {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 36rpx 32rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics-group {
|
|
|
+ .statistics-item {
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 0.99;
|
|
|
+
|
|
|
+ // 收入
|
|
|
+ .income {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .income-title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-number {
|
|
|
+ color: rgba(22, 119, 255, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 电量
|
|
|
+ .electric-quantity {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表
|
|
|
+ .chart {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 0 15rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|