|
@@ -1,82 +1,91 @@
|
|
|
<template>
|
|
|
<div class="modelBlock">
|
|
|
- <div class="model-title">
|
|
|
- <div class="model-title-text">收款率分析</div>
|
|
|
- <div class="model-title-right">
|
|
|
- <el-date-picker
|
|
|
- value-format="yyyy-MM"
|
|
|
- v-model="date"
|
|
|
- type="month"
|
|
|
- placeholder="选择月"
|
|
|
- class="saveColumn-select saveColumn-select-time"
|
|
|
- @change="changeTime"
|
|
|
- :clearable="false"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- <div>
|
|
|
- <el-select
|
|
|
- v-model="mixins_query.communityId"
|
|
|
- placeholder="所有社区"
|
|
|
- clearable
|
|
|
- class="saveColumn-select"
|
|
|
- @change="getData"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in communityList"
|
|
|
- :label="item.communityName"
|
|
|
- :value="item.id"
|
|
|
- :key="index"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="mixins_query.chargeType"
|
|
|
- placeholder="所有费用"
|
|
|
- clearable
|
|
|
- class="saveColumn-select"
|
|
|
- @change="getData"
|
|
|
+ <template v-if="permissionFiltering">
|
|
|
+ <div class="model-title">
|
|
|
+ <div class="model-title-text">收款率分析</div>
|
|
|
+ <div class="model-title-right">
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ v-model="date"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月"
|
|
|
+ class="saveColumn-select saveColumn-select-time"
|
|
|
+ @change="changeTime"
|
|
|
+ :clearable="false"
|
|
|
>
|
|
|
- <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
|
|
|
- </el-select>
|
|
|
+ </el-date-picker>
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
+ v-model="mixins_query.communityId"
|
|
|
+ placeholder="所有社区"
|
|
|
+ clearable
|
|
|
+ class="saveColumn-select"
|
|
|
+ @change="getData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in communityList"
|
|
|
+ :label="item.communityName"
|
|
|
+ :value="item.id"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="mixins_query.chargeType"
|
|
|
+ placeholder="所有费用"
|
|
|
+ clearable
|
|
|
+ class="saveColumn-select"
|
|
|
+ @change="getData"
|
|
|
+ >
|
|
|
+ <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="model-content">
|
|
|
- <process-circle
|
|
|
- class="item"
|
|
|
- :strokeWidth="strokeWidth"
|
|
|
- :strokeColor="strokeColor"
|
|
|
- :trailWidth="trailWidth"
|
|
|
- :trailColor="trailColor"
|
|
|
- :percent="dataObj.receivedAmount"
|
|
|
- >
|
|
|
- <span class="ashText" style="font-size: 14px">收款率</span>
|
|
|
- <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
|
|
|
- </process-circle>
|
|
|
- <div class="textAmount">
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">应收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.receivableAmount }}</div>
|
|
|
- </div>
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">已收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.receivedAmount }}</div>
|
|
|
- </div>
|
|
|
- <div class="listAmount">
|
|
|
- <div class="listText">未收金额</div>
|
|
|
- <div class="listNumber">{{ dataObj.uncollected }}</div>
|
|
|
+ <div class="model-content">
|
|
|
+ <process-circle
|
|
|
+ class="item"
|
|
|
+ :strokeWidth="strokeWidth"
|
|
|
+ :strokeColor="strokeColor"
|
|
|
+ :trailWidth="trailWidth"
|
|
|
+ :trailColor="trailColor"
|
|
|
+ :percent="dataObj.receivedAmount"
|
|
|
+ >
|
|
|
+ <span class="ashText" style="font-size: 14px">收款率</span>
|
|
|
+ <span> {{ parseInt((dataObj.receivedAmount / dataObj.receivableAmount || 0).toFixed(2) * 100) }}%</span>
|
|
|
+ </process-circle>
|
|
|
+ <div class="textAmount">
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">应收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.receivableAmount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">已收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.receivedAmount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="listAmount">
|
|
|
+ <div class="listText">未收金额</div>
|
|
|
+ <div class="listNumber">{{ dataObj.uncollected }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <no-permission v-else tipsText="收款率分析"></no-permission>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import processCircle from './circle'; // 环形进度条
|
|
|
+import permissionComponent from './permissionComponent';
|
|
|
export default {
|
|
|
+ mixins: [permissionComponent],
|
|
|
components: {
|
|
|
processCircle
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: '14',
|
|
|
+ titleName: '收费管理'
|
|
|
+ },
|
|
|
strokeWidth: 15, // 线条宽度
|
|
|
trailWidth: 15, // 背景线条宽度
|
|
|
trailColor: '#2C3345', // 背景线条宽度
|