|
@@ -44,16 +44,81 @@
|
|
|
<view class="project-title">
|
|
|
<view class="title-line"></view>
|
|
|
<view class="title-label">费用管理</view>
|
|
|
+ <view class="title-tab">
|
|
|
+ <uv-subsection :list="list" :current="current" activeColor="#08979c"
|
|
|
+ custom-style="border-radius: 16rpx;" custom-item-style="border-radius: 12rpx;" @change="change">
|
|
|
+ </uv-subsection>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="project-content">
|
|
|
- <view class="bill-subsection">
|
|
|
- <uv-subsection :list="list" :current="current" custom-style="height: 60rpx;border-radius: 30rpx;"
|
|
|
- custom-item-style="border-radius: 30rpx;" @change="change">
|
|
|
- </uv-subsection>
|
|
|
+ <view class="bill-title">房租</view>
|
|
|
+ <view class="bill-content">
|
|
|
+ <view class="air-item">
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">应收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">已收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">逾期(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bill-title">物业</view>
|
|
|
+ <view class="bill-content">
|
|
|
+ <view class="air-item">
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">应收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">已收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">逾期(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="bill-charts">
|
|
|
+ <view class="bill-title">水电</view>
|
|
|
+ <view class="bill-content">
|
|
|
+ <view class="air-item">
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">应收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">已收(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="test-item">
|
|
|
+ <view class="name">逾期(元)</view>
|
|
|
+ <view class="number">120</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="project-item">
|
|
|
+ <view class="project-title">
|
|
|
+ <view class="title-line"></view>
|
|
|
+ <view class="title-label">提醒管理</view>
|
|
|
+ </view>
|
|
|
+ <view class="project-content">
|
|
|
+ <view class="remind-chart">
|
|
|
<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true"
|
|
|
- canvasId="charts1">
|
|
|
+ canvasId="bmaEHARrUHkgUsKxeQaXEEonSPXpGtUP">
|
|
|
</qiun-data-charts>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -65,6 +130,8 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ list: ['当月', '当年', '累计'],
|
|
|
+ current: 0,
|
|
|
chartData: {},
|
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
|
|
|
opts: {
|
|
@@ -81,12 +148,11 @@
|
|
|
labelWidth: 15,
|
|
|
border: true,
|
|
|
borderWidth: 3,
|
|
|
- borderColor: "#FFFFFF"
|
|
|
+ borderColor: "#FFFFFF",
|
|
|
+ linearType: "custom"
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- list: ['房租', '物业', '水电'],
|
|
|
- current: 0
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
@@ -100,16 +166,20 @@
|
|
|
let res = {
|
|
|
series: [{
|
|
|
data: [{
|
|
|
- "name": "应收",
|
|
|
- "value": 50,
|
|
|
+ "name": "重要",
|
|
|
+ "value": 3,
|
|
|
+ "labelShow": false
|
|
|
+ }, {
|
|
|
+ "name": "会议",
|
|
|
+ "value": 1,
|
|
|
"labelShow": false
|
|
|
}, {
|
|
|
- "name": "已收",
|
|
|
- "value": 30,
|
|
|
+ "name": "看房",
|
|
|
+ "value": 1,
|
|
|
"labelShow": false
|
|
|
}, {
|
|
|
- "name": "逾期",
|
|
|
- "value": 20,
|
|
|
+ "name": "日常",
|
|
|
+ "value": 1,
|
|
|
"labelShow": false
|
|
|
}]
|
|
|
}]
|
|
@@ -128,11 +198,18 @@
|
|
|
.project-container {
|
|
|
padding: 30rpx;
|
|
|
|
|
|
- .bill-subsection {
|
|
|
- margin-top: 30rpx;
|
|
|
+ .bill-title {
|
|
|
+ padding: 10rpx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- .bill-charts {
|
|
|
+ .bill-content {
|
|
|
+ background: $uni-background-color;
|
|
|
+ padding: 6rpx 0 10rpx 0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remind-chart {
|
|
|
height: 400rpx;
|
|
|
}
|
|
|
|
|
@@ -158,6 +235,12 @@
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
margin-left: 20rpx;
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-tab {
|
|
|
+ width: 320rpx;
|
|
|
}
|
|
|
|
|
|
.air-item {
|