Commit e22d7ad7fe9d7d021a65cb6e856c28b3638a75a2
1 parent
ed7a1f3e
最新
Showing
4 changed files
with
302 additions
and
248 deletions
admin-web-master/src/api/cereBusinessInfo.js
| @@ -52,3 +52,12 @@ export function getInvestmentStatistics(data) { | @@ -52,3 +52,12 @@ export function getInvestmentStatistics(data) { | ||
| 52 | }) | 52 | }) |
| 53 | } | 53 | } |
| 54 | 54 | ||
| 55 | +// 招商方案统计 | ||
| 56 | +export function getInvestmentPlanStatistics(data) { | ||
| 57 | + return request({ | ||
| 58 | + url: '/attractInvestmentStatisticsController/getInvestmentPlanStatistics', | ||
| 59 | + method: 'post', | ||
| 60 | + data | ||
| 61 | + }) | ||
| 62 | +} | ||
| 63 | + |
admin-web-master/src/views/rent/InvestmentAnalysis/index.vue
admin-web-master/src/views/scheme/statistics.vue
| @@ -7,14 +7,14 @@ | @@ -7,14 +7,14 @@ | ||
| 7 | </div> | 7 | </div> |
| 8 | <div class="toolbar"> | 8 | <div class="toolbar"> |
| 9 | <el-form :inline="true" :model="pageindex"> | 9 | <el-form :inline="true" :model="pageindex"> |
| 10 | - <el-form-item label="资源类型"> | 10 | + <!-- <el-form-item label="资源类型"> |
| 11 | <el-select placeholder="全部" v-model="pageindex.leaseType" | 11 | <el-select placeholder="全部" v-model="pageindex.leaseType" |
| 12 | style="width: 120px;margin-right: 15px"> | 12 | style="width: 120px;margin-right: 15px"> |
| 13 | <el-option label="商铺" value="商铺" /> | 13 | <el-option label="商铺" value="商铺" /> |
| 14 | <el-option label="场地" value="场地" /> | 14 | <el-option label="场地" value="场地" /> |
| 15 | <el-option label="广告位" value="广告位" /> | 15 | <el-option label="广告位" value="广告位" /> |
| 16 | </el-select> | 16 | </el-select> |
| 17 | - </el-form-item> | 17 | + </el-form-item> --> |
| 18 | <el-form-item label="日期"> | 18 | <el-form-item label="日期"> |
| 19 | <el-date-picker | 19 | <el-date-picker |
| 20 | v-model="pageindex.list" | 20 | v-model="pageindex.list" |
| @@ -75,7 +75,7 @@ | @@ -75,7 +75,7 @@ | ||
| 75 | 75 | ||
| 76 | <script> | 76 | <script> |
| 77 | import { | 77 | import { |
| 78 | - getInvestmentStatistics | 78 | + getInvestmentPlanStatistics |
| 79 | } from '@/api/cereBusinessInfo' | 79 | } from '@/api/cereBusinessInfo' |
| 80 | import * as echarts from 'echarts' | 80 | import * as echarts from 'echarts' |
| 81 | export default { | 81 | export default { |
| @@ -129,56 +129,42 @@ | @@ -129,56 +129,42 @@ | ||
| 129 | const chartDom = this.$refs.shop2TJ | 129 | const chartDom = this.$refs.shop2TJ |
| 130 | // 初始化 ECharts 实例 | 130 | // 初始化 ECharts 实例 |
| 131 | const myChart = echarts.init(chartDom); | 131 | const myChart = echarts.init(chartDom); |
| 132 | - // 模拟数据 | ||
| 133 | - const shopCount = 50; | ||
| 134 | - const adCount = 30; | ||
| 135 | - const venueCount = 20; | ||
| 136 | - const totalCount = shopCount + adCount + venueCount; | 132 | + |
| 137 | 133 | ||
| 138 | const option = { | 134 | const option = { |
| 139 | tooltip: { | 135 | tooltip: { |
| 140 | trigger: 'item', | 136 | trigger: 'item', |
| 141 | - formatter: '{a} <br/>{b}: {c} ({d}%)' | 137 | + formatter: function (params) { |
| 138 | + const dataItem = val.find(item => item.businessPurpose === params.name); | ||
| 139 | + return `${params.name}<br/>数量: ${dataItem.num}<br/>占比: ${dataItem.proportion}%`; | ||
| 140 | + } | ||
| 142 | }, | 141 | }, |
| 143 | legend: { | 142 | legend: { |
| 144 | orient: 'horizontal', // 横向展示 | 143 | orient: 'horizontal', // 横向展示 |
| 145 | left: 'center', // 居中显示 | 144 | left: 'center', // 居中显示 |
| 146 | - data: ['商铺', '广告位', '场地'] | 145 | + data: val.map(item => item.businessPurpose) |
| 147 | }, | 146 | }, |
| 148 | series: [ | 147 | series: [ |
| 149 | { | 148 | { |
| 149 | + color: ['#4A90E2', '#37c954','#ff94e8', '#7a69d8','#aaffe7', '#8cd89b','#feff89', '#d8d6d5'], | ||
| 150 | name: '资源分布', | 150 | name: '资源分布', |
| 151 | type: 'pie', | 151 | type: 'pie', |
| 152 | - radius: ['50%', '70%'], | 152 | + radius: ['0%', '60%'], |
| 153 | avoidLabelOverlap: false, | 153 | avoidLabelOverlap: false, |
| 154 | label: { | 154 | label: { |
| 155 | show: true, | 155 | show: true, |
| 156 | position: 'outside', | 156 | position: 'outside', |
| 157 | - formatter: '{b}: {c}' | 157 | + formatter: '{b}: {c}%' |
| 158 | }, | 158 | }, |
| 159 | labelLine: { | 159 | labelLine: { |
| 160 | show: true | 160 | show: true |
| 161 | }, | 161 | }, |
| 162 | - data: [ | ||
| 163 | - { value: shopCount, name: '商铺' }, | ||
| 164 | - { value: adCount, name: '广告位' }, | ||
| 165 | - { value: venueCount, name: '场地' } | ||
| 166 | - ] | 162 | + data: val.map(item => ({ |
| 163 | + value: item.proportion, | ||
| 164 | + name: item.businessPurpose | ||
| 165 | + })) | ||
| 167 | }, | 166 | }, |
| 168 | - { | ||
| 169 | - name: '总量', | ||
| 170 | - type: 'pie', | ||
| 171 | - radius: ['0%', '0%'], // 不显示圆形 | ||
| 172 | - label: { | ||
| 173 | - show: true, | ||
| 174 | - position: 'center', | ||
| 175 | - formatter: `总量: ${totalCount}`, | ||
| 176 | - fontSize: 20 | ||
| 177 | - }, | ||
| 178 | - data: [ | ||
| 179 | - { value: totalCount, name: '总量' } | ||
| 180 | - ] | ||
| 181 | - } | 167 | + |
| 182 | ] | 168 | ] |
| 183 | }; | 169 | }; |
| 184 | // 使用刚指定的配置项和数据显示图表 | 170 | // 使用刚指定的配置项和数据显示图表 |
| @@ -191,25 +177,38 @@ | @@ -191,25 +177,38 @@ | ||
| 191 | 177 | ||
| 192 | const chartDom = this.$refs.shop1ZX; | 178 | const chartDom = this.$refs.shop1ZX; |
| 193 | const myChart = echarts.init(chartDom) | 179 | const myChart = echarts.init(chartDom) |
| 194 | - | ||
| 195 | - // 模拟数据 | ||
| 196 | - const shopCount = 50; | ||
| 197 | - const adCount = 30; | ||
| 198 | - const venueCount = 20; | ||
| 199 | - const totalCount = shopCount + adCount + venueCount; | 180 | + let shopCount = 0; |
| 181 | + let adCount = 0; | ||
| 182 | + let venueCount = 0; | ||
| 183 | + let totalCount = 0; | ||
| 184 | + val.forEach(item => { | ||
| 185 | + totalCount += item.num; | ||
| 186 | + if (item.businessPurpose === '商铺合同') { | ||
| 187 | + shopCount = item.proportion; | ||
| 188 | + } else if (item.businessPurpose === '场地合同') { | ||
| 189 | + venueCount = item.proportion; | ||
| 190 | + } else if (item.businessPurpose === '广告位合同') { | ||
| 191 | + adCount = item.proportion; | ||
| 192 | + } | ||
| 193 | + }); | ||
| 200 | 194 | ||
| 201 | const option = { | 195 | const option = { |
| 202 | tooltip: { | 196 | tooltip: { |
| 203 | trigger: 'item', | 197 | trigger: 'item', |
| 204 | - formatter: '{a} <br/>{b}: {c} ({d}%)' | 198 | + formatter: function (params) { |
| 199 | + const dataItem = val.find(item => item.businessPurpose === params.name); | ||
| 200 | + return `${params.name}<br/>数量: ${dataItem.num}<br/>占比: ${dataItem.proportion}%`; | ||
| 201 | + } | ||
| 205 | }, | 202 | }, |
| 206 | legend: { | 203 | legend: { |
| 207 | - orient: 'horizontal', // 横向展示 | ||
| 208 | - left: 'center', // 居中显示 | ||
| 209 | - data: ['商铺', '广告位', '场地'] | 204 | + orient: 'horizontal', |
| 205 | + left: 'center', | ||
| 206 | + data: val.map(item => item.businessPurpose) | ||
| 210 | }, | 207 | }, |
| 211 | series: [ | 208 | series: [ |
| 209 | + | ||
| 212 | { | 210 | { |
| 211 | + color: ['#4A90E2', '#37c954','#ff94e8', '#7a69d8','#aaffe7', '#8cd89b','#feff89', '#d8d6d5'], | ||
| 213 | name: '资源分布', | 212 | name: '资源分布', |
| 214 | type: 'pie', | 213 | type: 'pie', |
| 215 | radius: ['50%', '70%'], | 214 | radius: ['50%', '70%'], |
| @@ -217,30 +216,27 @@ | @@ -217,30 +216,27 @@ | ||
| 217 | label: { | 216 | label: { |
| 218 | show: true, | 217 | show: true, |
| 219 | position: 'outside', | 218 | position: 'outside', |
| 220 | - formatter: '{b}: {c}' | 219 | + formatter: '{b}: {c}%' |
| 221 | }, | 220 | }, |
| 222 | labelLine: { | 221 | labelLine: { |
| 223 | show: true | 222 | show: true |
| 224 | }, | 223 | }, |
| 225 | - data: [ | ||
| 226 | - { value: shopCount, name: '商铺' }, | ||
| 227 | - { value: adCount, name: '广告位' }, | ||
| 228 | - { value: venueCount, name: '场地' } | ||
| 229 | - ] | 224 | + data: val.map(item => ({ |
| 225 | + value: item.proportion, | ||
| 226 | + name: item.businessPurpose | ||
| 227 | + })) | ||
| 230 | }, | 228 | }, |
| 231 | { | 229 | { |
| 232 | - name: '总量', | ||
| 233 | - type: 'pie', | ||
| 234 | - radius: ['0%', '0%'], // 不显示圆形 | ||
| 235 | - label: { | ||
| 236 | - show: true, | ||
| 237 | - position: 'center', | ||
| 238 | - formatter: `总量: ${totalCount}`, | ||
| 239 | - fontSize: 20 | ||
| 240 | - }, | ||
| 241 | - data: [ | ||
| 242 | - { value: totalCount, name: '总量' } | ||
| 243 | - ] | 230 | + name: '总数', |
| 231 | + type: 'pie', | ||
| 232 | + radius: ['0%', '0%'], | ||
| 233 | + label: { | ||
| 234 | + show: true, | ||
| 235 | + position: 'center', | ||
| 236 | + formatter: `总数: ${totalCount}`, | ||
| 237 | + fontSize: 20 | ||
| 238 | + }, | ||
| 239 | + data: [{ value: totalCount, name: '总数' }] | ||
| 244 | } | 240 | } |
| 245 | ] | 241 | ] |
| 246 | }; | 242 | }; |
| @@ -251,15 +247,21 @@ | @@ -251,15 +247,21 @@ | ||
| 251 | charDam3(val) { | 247 | charDam3(val) { |
| 252 | let Dom = this.$refs.shop1TJ | 248 | let Dom = this.$refs.shop1TJ |
| 253 | let myChart = echarts.init(Dom) | 249 | let myChart = echarts.init(Dom) |
| 254 | - // val.sort((a, b) => { | ||
| 255 | - // return new Date(a.mouth) - new Date(b.mouth); | ||
| 256 | - // }); | ||
| 257 | - // const months = val.map(item => item.mouth); | ||
| 258 | - // const intentMerchants = val.map(item => item.intention); | ||
| 259 | - // const signedMerchants = val.map(item => item.signContract); | ||
| 260 | - // 模拟月度签约数据 | ||
| 261 | - const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; | ||
| 262 | - const contractCounts = [12, 15, 20, 18, 22, 25, 28, 30, 26, 24, 21, 23]; | 250 | + // 处理数据 |
| 251 | + const months = Object.keys(val).reverse(); // 反转月份顺序，最新月份在前 | ||
| 252 | + const shopData = []; | ||
| 253 | + const venueData = []; | ||
| 254 | + const adData = []; | ||
| 255 | + | ||
| 256 | + months.forEach(month => { | ||
| 257 | + const monthData = val[month]; | ||
| 258 | + const shop = monthData.find(item => item.contractType === '商铺合同')?.contractCount || 0; | ||
| 259 | + const venue = monthData.find(item => item.contractType === '场地合同')?.contractCount || 0; | ||
| 260 | + const ad = monthData.find(item => item.contractType === '广告位合同')?.contractCount || 0; | ||
| 261 | + shopData.push(shop); | ||
| 262 | + venueData.push(venue); | ||
| 263 | + adData.push(ad); | ||
| 264 | + }); | ||
| 263 | 265 | ||
| 264 | const option = { | 266 | const option = { |
| 265 | tooltip: { | 267 | tooltip: { |
| @@ -272,33 +274,37 @@ | @@ -272,33 +274,37 @@ | ||
| 272 | }, | 274 | }, |
| 273 | yAxis: { | 275 | yAxis: { |
| 274 | type: 'value', | 276 | type: 'value', |
| 275 | - name: '签约数' | 277 | + name: '合同数量' |
| 276 | }, | 278 | }, |
| 277 | series: [ | 279 | series: [ |
| 278 | { | 280 | { |
| 279 | - name: '签约数', | 281 | + name: '商铺合同', |
| 280 | type: 'line', | 282 | type: 'line', |
| 281 | - data: contractCounts, | 283 | + data: shopData, |
| 282 | symbol: 'circle', | 284 | symbol: 'circle', |
| 283 | - lineStyle: { | ||
| 284 | - color: '#4A90E2' | ||
| 285 | - }, | ||
| 286 | - itemStyle: { | ||
| 287 | - color: '#4A90E2' | ||
| 288 | - }, | ||
| 289 | - areaStyle: { | ||
| 290 | - color: new echarts.graphic.LinearGradient( | ||
| 291 | - 0, 0, 0, 1, | ||
| 292 | - [ | ||
| 293 | - { offset: 0, color: 'rgba(74, 144, 226, 0.3)' }, | ||
| 294 | - { offset: 1, color: 'rgba(74, 144, 226, 0.1)' } | ||
| 295 | - ] | ||
| 296 | - ) | ||
| 297 | - } | 285 | + lineStyle: { color: '#4A90E2' }, |
| 286 | + itemStyle: { color: '#4A90E2' } | ||
| 287 | + }, | ||
| 288 | + { | ||
| 289 | + name: '场地合同', | ||
| 290 | + type: 'line', | ||
| 291 | + data: venueData, | ||
| 292 | + symbol: 'square', | ||
| 293 | + lineStyle: { color: '#52C41A' }, | ||
| 294 | + itemStyle: { color: '#52C41A' } | ||
| 295 | + }, | ||
| 296 | + { | ||
| 297 | + name: '广告位合同', | ||
| 298 | + type: 'line', | ||
| 299 | + data: adData, | ||
| 300 | + symbol: 'triangle', | ||
| 301 | + lineStyle: { color: '#FF7800' }, | ||
| 302 | + itemStyle: { color: '#FF7800' } | ||
| 298 | } | 303 | } |
| 299 | ] | 304 | ] |
| 300 | }; | 305 | }; |
| 301 | 306 | ||
| 307 | + | ||
| 302 | option && myChart.setOption(option); | 308 | option && myChart.setOption(option); |
| 303 | window.addEventListener('resize', function() { | 309 | window.addEventListener('resize', function() { |
| 304 | myChart.resize(); | 310 | myChart.resize(); |
| @@ -313,48 +319,72 @@ | @@ -313,48 +319,72 @@ | ||
| 313 | const myChart = echarts.init(chartDom); | 319 | const myChart = echarts.init(chartDom); |
| 314 | 320 | ||
| 315 | 321 | ||
| 316 | - // 模拟租金价格数据，这里假设是按月份统计 | ||
| 317 | - const months = ['1月', '2月', '3月', '4月', '5月', '6月']; | ||
| 318 | - const rentPrices = [50, 52, 55, 53, 56, 58]; | ||
| 319 | - | ||
| 320 | - const option = { | ||
| 321 | - tooltip: { | ||
| 322 | - trigger: 'axis' | ||
| 323 | - }, | ||
| 324 | - xAxis: { | ||
| 325 | - type: 'category', | ||
| 326 | - data: months, | ||
| 327 | - boundaryGap: false | ||
| 328 | - }, | ||
| 329 | - yAxis: { | ||
| 330 | - type: 'value', | ||
| 331 | - name: '租金价格（元/m²）' | ||
| 332 | - }, | ||
| 333 | - series: [ | ||
| 334 | - { | 322 | + const allDates = []; |
| 323 | + const leaseTerms = ['季', '年', '日', '月']; | ||
| 324 | + const seriesData = { | ||
| 325 | + '季': [], | ||
| 326 | + '年': [], | ||
| 327 | + '日': [], | ||
| 328 | + '月': [] | ||
| 329 | + }; | ||
| 330 | + | ||
| 331 | + // 收集所有日期 | ||
| 332 | + leaseTerms.forEach(term => { | ||
| 333 | + val[term].forEach(item => { | ||
| 334 | + if (!allDates.includes(item.createDay)) { | ||
| 335 | + allDates.push(item.createDay); | ||
| 336 | + } | ||
| 337 | + }); | ||
| 338 | + }); | ||
| 339 | + | ||
| 340 | + // 按日期排序 | ||
| 341 | + allDates.sort(); | ||
| 342 | + | ||
| 343 | + // 填充各租赁期限的数据 | ||
| 344 | + leaseTerms.forEach(term => { | ||
| 345 | + allDates.forEach(date => { | ||
| 346 | + const found = val[term].find(item => item.createDay === date); | ||
| 347 | + seriesData[term].push(found ? found.rentalPrice : null); | ||
| 348 | + }); | ||
| 349 | + }); | ||
| 350 | + | ||
| 351 | + const option = { | ||
| 352 | + tooltip: { | ||
| 353 | + trigger: 'axis', | ||
| 354 | + axisPointer: { | ||
| 355 | + type: 'cross', | ||
| 356 | + crossStyle: { | ||
| 357 | + color: '#999' | ||
| 358 | + } | ||
| 359 | + } | ||
| 360 | + }, | ||
| 361 | + legend: { | ||
| 362 | + data: leaseTerms | ||
| 363 | + }, | ||
| 364 | + xAxis: { | ||
| 365 | + type: 'category', | ||
| 366 | + data: allDates | ||
| 367 | + }, | ||
| 368 | + yAxis: { | ||
| 369 | + type: 'value', | ||
| 335 | name: '租金价格', | 370 | name: '租金价格', |
| 371 | + axisLabel: { | ||
| 372 | + formatter: '{value}' | ||
| 373 | + } | ||
| 374 | + }, | ||
| 375 | + series: leaseTerms.map(term => ({ | ||
| 376 | + name: term, | ||
| 336 | type: 'line', | 377 | type: 'line', |
| 337 | - data: rentPrices, | 378 | + data: seriesData[term], |
| 338 | symbol: 'circle', | 379 | symbol: 'circle', |
| 339 | - lineStyle: { | ||
| 340 | - color: '#4A90E2' | 380 | + label: { |
| 381 | + show: false | ||
| 341 | }, | 382 | }, |
| 342 | - itemStyle: { | ||
| 343 | - color: '#4A90E2' | ||
| 344 | - }, | ||
| 345 | - areaStyle: { | ||
| 346 | - color: new echarts.graphic.LinearGradient( | ||
| 347 | - 0, 0, 0, 1, | ||
| 348 | - [ | ||
| 349 | - { offset: 0, color: 'rgba(74, 144, 226, 0.3)' }, | ||
| 350 | - { offset: 1, color: 'rgba(74, 144, 226, 0.1)' } | ||
| 351 | - ] | ||
| 352 | - ) | 383 | + lineStyle: { |
| 384 | + width: 2 | ||
| 353 | } | 385 | } |
| 354 | - } | ||
| 355 | - ] | ||
| 356 | - }; | ||
| 357 | - | 386 | + })) |
| 387 | + }; | ||
| 358 | // 使用刚指定的配置项和数据显示图表 | 388 | // 使用刚指定的配置项和数据显示图表 |
| 359 | option && myChart.setOption(option) | 389 | option && myChart.setOption(option) |
| 360 | window.addEventListener('resize', function() { | 390 | window.addEventListener('resize', function() { |
| @@ -364,11 +394,11 @@ | @@ -364,11 +394,11 @@ | ||
| 364 | }, | 394 | }, |
| 365 | 395 | ||
| 366 | async getAll() { | 396 | async getAll() { |
| 367 | - const res = await getInvestmentStatistics(this.pageindex) | ||
| 368 | - this.charDam3() | ||
| 369 | - this.charDam1() | ||
| 370 | - this.charDam() | ||
| 371 | - this.charDam5() | 397 | + const res = await getInvestmentPlanStatistics(this.pageindex) |
| 398 | + this.charDam3(res.data.monthlyContractVOList) | ||
| 399 | + this.charDam1(res.data.resourceUsageRatioVOList) | ||
| 400 | + this.charDam(res.data.businessTypeProportionList) | ||
| 401 | + this.charDam5(res.data.rentTrendMap) | ||
| 372 | 402 | ||
| 373 | }, | 403 | }, |
| 374 | 404 |
lvdao-miniapp/pagesA/rentPay/rentPayDetails.vue
| @@ -5,18 +5,27 @@ | @@ -5,18 +5,27 @@ | ||
| 5 | <view @click="show = true">{{pageIndex.time}}年<u-icon name="arrow-down"></u-icon></view> | 5 | <view @click="show = true">{{pageIndex.time}}年<u-icon name="arrow-down"></u-icon></view> |
| 6 | <u-picker v-model="show" mode="time" :params="{year: true}" @confirm="confirm"></u-picker> | 6 | <u-picker v-model="show" mode="time" :params="{year: true}" @confirm="confirm"></u-picker> |
| 7 | </div> | 7 | </div> |
| 8 | - <div class="right"><view class="price" style="font-size: 40rpx;"><u-icon name="rmb" style="font-size: 24rpx;" />{{allPay}}</view></div> | 8 | + <div class="right"> |
| 9 | + <view class="price" style="font-size: 40rpx;"><u-icon name="rmb" style="font-size: 24rpx;" />{{allPay}} | ||
| 10 | + </view> | ||
| 11 | + </div> | ||
| 9 | </view> | 12 | </view> |
| 10 | <view class="record-list"> | 13 | <view class="record-list"> |
| 11 | - <view class="record-item" v-for="(item, index) in dataList" :key="index" > | 14 | + <view class="record-item" v-for="(item, index) in dataList" :key="index"> |
| 12 | <view class="info-title"> | 15 | <view class="info-title"> |
| 13 | <!-- <view class="title">{{formatDate(item.tenementOrderDate)}}</view> --> | 16 | <!-- <view class="title">{{formatDate(item.tenementOrderDate)}}</view> --> |
| 14 | - <view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.dingPay}}</view></view> | 17 | + <view class="right"> |
| 18 | + <view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.dingPay}}</view> | ||
| 19 | + </view> | ||
| 15 | </view> | 20 | </view> |
| 16 | <view class="info-items" v-for="(value, ids) in item.ziList"> | 21 | <view class="info-items" v-for="(value, ids) in item.ziList"> |
| 17 | <view class="info-item"> | 22 | <view class="info-item"> |
| 18 | - <view class="left title">{{value.tenementOrderParent==''?value.tenementOrder:value.tenementOrderParent}}</view> | ||
| 19 | - <view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{value.paymentAmount}}</view></view> | 23 | + <view class="left title"> |
| 24 | + {{value.tenementOrderParent==''?value.tenementOrder:value.tenementOrderParent}}</view> | ||
| 25 | + <view class="right"> | ||
| 26 | + <view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{value.paymentAmount}} | ||
| 27 | + </view> | ||
| 28 | + </view> | ||
| 20 | </view> | 29 | </view> |
| 21 | <view class="info-item"> | 30 | <view class="info-item"> |
| 22 | <view class="left" style="color: #0FBB59;">{{value.payState==1?'支付成功':''}}</view> | 31 | <view class="left" style="color: #0FBB59;">{{value.payState==1?'支付成功':''}}</view> |
| @@ -37,141 +46,146 @@ | @@ -37,141 +46,146 @@ | ||
| 37 | return { | 46 | return { |
| 38 | show: false, | 47 | show: false, |
| 39 | dataList: [], | 48 | dataList: [], |
| 40 | - allPay:0, | ||
| 41 | - pageIndex:{ | ||
| 42 | - time:'' | 49 | + allPay: 0, |
| 50 | + pageIndex: { | ||
| 51 | + time: '' | ||
| 43 | }, | 52 | }, |
| 44 | - merchants:'' | 53 | + merchants: '' |
| 45 | } | 54 | } |
| 46 | }, | 55 | }, |
| 47 | - onShow(){ | 56 | + onShow() { |
| 48 | this.pageIndex.time = this.getCurrentYear() | 57 | this.pageIndex.time = this.getCurrentYear() |
| 49 | - }, | ||
| 50 | - onLoad(options) { | ||
| 51 | - if(options.msg && options.merchants){ | ||
| 52 | - this.allPay = 0 | ||
| 53 | - let receivedMsg = JSON.parse(options.msg) | ||
| 54 | - this.merchants = options.merchants | ||
| 55 | - this.getAll(receivedMsg.list) | ||
| 56 | - } | ||
| 57 | - }, | 58 | + }, |
| 59 | + onLoad(options) { | ||
| 60 | + if (options.msg && options.merchants) { | ||
| 61 | + this.allPay = 0 | ||
| 62 | + let receivedMsg = JSON.parse(options.msg) | ||
| 63 | + this.merchants = options.merchants | ||
| 64 | + this.getAll(receivedMsg.list) | ||
| 65 | + } | ||
| 66 | + }, | ||
| 58 | methods: { | 67 | methods: { |
| 59 | - getAll(receivedMsg){ | ||
| 60 | - let totalPay= 0 | ||
| 61 | - const redList = [] | ||
| 62 | - // 用于存储 tenementOrderParent 相同的项 | ||
| 63 | - const groupedItems = {}; | ||
| 64 | - // 遍历 receivedMsg.list 数组 | ||
| 65 | - receivedMsg.forEach(item => { | ||
| 66 | - if(item.payState ==1){ | ||
| 67 | - totalPay += item.paymentAmount | ||
| 68 | - if (item.tenementOrderParent === '') { | ||
| 69 | - // 如果 tenementOrderParent 为空，添加 dingPay 字段并添加到 redList | ||
| 70 | - let newItem = { ...item,ziList:[], dingPay: item.paymentAmount }; | ||
| 71 | - newItem.ziList.push(item) | ||
| 72 | - redList.push(newItem); | ||
| 73 | - } else { | ||
| 74 | - // 如果 tenementOrderParent 不为空，将相同 tenementOrderParent 的项分组 | ||
| 75 | - if (!groupedItems[item.tenementOrderParent]) { | ||
| 76 | - groupedItems[item.tenementOrderParent] = { | ||
| 77 | - ziList: [], | ||
| 78 | - dingPay: 0 | ||
| 79 | - }; | ||
| 80 | - } | ||
| 81 | - groupedItems[item.tenementOrderParent].ziList.push(item); | ||
| 82 | - groupedItems[item.tenementOrderParent].dingPay += item.paymentAmount; | ||
| 83 | - groupedItems[item.tenementOrderParent].paymentTime = item.paymentTime; | ||
| 84 | - groupedItems[item.tenementOrderParent].payDay = item.payDay; | ||
| 85 | - groupedItems[item.tenementOrderParent].payState = item.payState; | ||
| 86 | - } | ||
| 87 | - } | ||
| 88 | - | ||
| 89 | - }); | ||
| 90 | - // 将分组后的对象添加到 redList | ||
| 91 | - for (const key in groupedItems) { | ||
| 92 | - redList.push({ | ||
| 93 | - tenementOrderParent: key, | ||
| 94 | - ...groupedItems[key] | ||
| 95 | - }); | ||
| 96 | - } | ||
| 97 | - | ||
| 98 | - // receivedMsg.list.map(item=>{ | ||
| 99 | - // let obj ={ | ||
| 100 | - // ...item, | ||
| 101 | - // dingPay:0, | ||
| 102 | - // ziList:[] | ||
| 103 | - // } | ||
| 104 | - // if (item.payState == 1) { | ||
| 105 | - // obj.ziList.push(item) | ||
| 106 | - // if(item.tenementOrderParent ){ | ||
| 107 | - | ||
| 108 | - // } | ||
| 109 | - // obj.dingPay +=item.paymentAmount | ||
| 110 | - // this.orderPay+=item.paymentAmount | ||
| 111 | - // this.allPay+=item.paymentAmount | ||
| 112 | - // redList.push(obj) | ||
| 113 | - // } | ||
| 114 | - | ||
| 115 | - // }) | ||
| 116 | - this.allPay = totalPay; | ||
| 117 | - this.dataList = redList | ||
| 118 | - | 68 | + getAll(receivedMsg) { |
| 69 | + let totalPay = 0 | ||
| 70 | + const redList = [] | ||
| 71 | + // 用于存储 tenementOrderParent 相同的项 | ||
| 72 | + const groupedItems = {}; | ||
| 73 | + // 遍历 receivedMsg.list 数组 | ||
| 74 | + receivedMsg.forEach(item => { | ||
| 75 | + if (item.payState == 1) { | ||
| 76 | + totalPay += item.paymentAmount | ||
| 77 | + if (item.tenementOrderParent === '') { | ||
| 78 | + // 如果 tenementOrderParent 为空，添加 dingPay 字段并添加到 redList | ||
| 79 | + let newItem = { | ||
| 80 | + ...item, | ||
| 81 | + ziList: [], | ||
| 82 | + dingPay: item.paymentAmount | ||
| 83 | + }; | ||
| 84 | + newItem.ziList.push(item) | ||
| 85 | + redList.push(newItem); | ||
| 86 | + } else { | ||
| 87 | + // 如果 tenementOrderParent 不为空，将相同 tenementOrderParent 的项分组 | ||
| 88 | + if (!groupedItems[item.tenementOrderParent]) { | ||
| 89 | + groupedItems[item.tenementOrderParent] = { | ||
| 90 | + ziList: [], | ||
| 91 | + dingPay: 0 | ||
| 92 | + }; | ||
| 93 | + } | ||
| 94 | + groupedItems[item.tenementOrderParent].ziList.push(item); | ||
| 95 | + groupedItems[item.tenementOrderParent].dingPay += item.paymentAmount; | ||
| 96 | + groupedItems[item.tenementOrderParent].paymentTime = item.paymentTime; | ||
| 97 | + groupedItems[item.tenementOrderParent].payDay = item.payDay; | ||
| 98 | + groupedItems[item.tenementOrderParent].payState = item.payState; | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + }); | ||
| 103 | + // 将分组后的对象添加到 redList | ||
| 104 | + for (const key in groupedItems) { | ||
| 105 | + redList.push({ | ||
| 106 | + tenementOrderParent: key, | ||
| 107 | + ...groupedItems[key] | ||
| 108 | + }); | ||
| 109 | + } | ||
| 110 | + | ||
| 111 | + // receivedMsg.list.map(item=>{ | ||
| 112 | + // let obj ={ | ||
| 113 | + // ...item, | ||
| 114 | + // dingPay:0, | ||
| 115 | + // ziList:[] | ||
| 116 | + // } | ||
| 117 | + // if (item.payState == 1) { | ||
| 118 | + // obj.ziList.push(item) | ||
| 119 | + // if(item.tenementOrderParent ){ | ||
| 120 | + | ||
| 121 | + // } | ||
| 122 | + // obj.dingPay +=item.paymentAmount | ||
| 123 | + // this.orderPay+=item.paymentAmount | ||
| 124 | + // this.allPay+=item.paymentAmount | ||
| 125 | + // redList.push(obj) | ||
| 126 | + // } | ||
| 127 | + | ||
| 128 | + // }) | ||
| 129 | + this.allPay = totalPay; | ||
| 130 | + this.dataList = redList | ||
| 131 | + | ||
| 119 | }, | 132 | }, |
| 120 | getCurrentYear() { | 133 | getCurrentYear() { |
| 121 | - const year = new Date().getFullYear(); | ||
| 122 | - return `${year}`; | 134 | + const year = new Date().getFullYear(); |
| 135 | + return `${year}`; | ||
| 123 | }, | 136 | }, |
| 124 | - confirm(e){ | ||
| 125 | - this.pageIndex.time = e.year | ||
| 126 | - | ||
| 127 | - const { firstDay, lastDay } = this.getYearFirstAndLastDay(e.year) | 137 | + confirm(e) { |
| 138 | + this.pageIndex.time = e.year | ||
| 139 | + const { | ||
| 140 | + firstDay, | ||
| 141 | + lastDay | ||
| 142 | + } = this.getYearFirstAndLastDay(e.year) | ||
| 128 | this.$http.sendRequest('/cerePropertyOrder/queryByName', 'POST', { | 143 | this.$http.sendRequest('/cerePropertyOrder/queryByName', 'POST', { |
| 129 | - relatedMerchants:this.merchants, | ||
| 130 | - paymentTimeStart:firstDay, | ||
| 131 | - paymentTimeEnd:lastDay | 144 | + relatedMerchants: this.merchants, |
| 145 | + paymentTimeStart: firstDay, | ||
| 146 | + paymentTimeEnd: lastDay | ||
| 132 | }, 1).then(res => { | 147 | }, 1).then(res => { |
| 133 | if (res.data.data.length > 0) { | 148 | if (res.data.data.length > 0) { |
| 134 | - | ||
| 135 | this.getAll(res.data.data[0].cerePropertyOrderList) | 149 | this.getAll(res.data.data[0].cerePropertyOrderList) |
| 136 | - }else{ | ||
| 137 | - this.dataList=[] | 150 | + } else { |
| 151 | + this.dataList = [] | ||
| 138 | this.allPay = 0 | 152 | this.allPay = 0 |
| 139 | } | 153 | } |
| 140 | - }) | 154 | + }) |
| 141 | }, | 155 | }, |
| 142 | getYearFirstAndLastDay(year) { | 156 | getYearFirstAndLastDay(year) { |
| 143 | console.log(year) | 157 | console.log(year) |
| 144 | - const firstDay = new Date(year, 0, 1); | ||
| 145 | - const lastDay = new Date(year, 11, 31); | ||
| 146 | - console.log(firstDay.toISOString().split('T')) | ||
| 147 | - return { | ||
| 148 | - firstDay: firstDay.toISOString().split('T')[0], | ||
| 149 | - lastDay: lastDay.toISOString().split('T')[0] | ||
| 150 | - } | 158 | + const firstDay = new Date(year, 0, 1); |
| 159 | + const lastDay = new Date(year, 11, 31); | ||
| 160 | + console.log(firstDay.toISOString().split('T')) | ||
| 161 | + return { | ||
| 162 | + firstDay: firstDay.toISOString().split('T')[0], | ||
| 163 | + lastDay: lastDay.toISOString().split('T')[0] | ||
| 164 | + } | ||
| 151 | }, | 165 | }, |
| 152 | formatDateTime(dateTimeStr) { | 166 | formatDateTime(dateTimeStr) { |
| 153 | - // 创建 Date 对象 | ||
| 154 | - const date = new Date(dateTimeStr); | ||
| 155 | - // 获取月份，由于 getMonth() 返回值从 0 开始，所以要加 1，并确保为两位数字 | ||
| 156 | - const month = String(date.getMonth() + 1).padStart(2, '0'); | ||
| 157 | - // 获取日期，并确保为两位数字 | ||
| 158 | - const day = String(date.getDate()).padStart(2, '0'); | ||
| 159 | - // 获取小时，并确保为两位数字 | ||
| 160 | - const hours = String(date.getHours()).padStart(2, '0'); | ||
| 161 | - // 获取分钟，并确保为两位数字 | ||
| 162 | - const minutes = String(date.getMinutes()).padStart(2, '0'); | ||
| 163 | - | ||
| 164 | - // 按照所需格式拼接并返回结果 | ||
| 165 | - return `${month}.${day} ${hours}:${minutes}`; | 167 | + // 创建 Date 对象 |
| 168 | + const date = new Date(dateTimeStr); | ||
| 169 | + // 获取月份，由于 getMonth() 返回值从 0 开始，所以要加 1，并确保为两位数字 | ||
| 170 | + const month = String(date.getMonth() + 1).padStart(2, '0'); | ||
| 171 | + // 获取日期，并确保为两位数字 | ||
| 172 | + const day = String(date.getDate()).padStart(2, '0'); | ||
| 173 | + // 获取小时，并确保为两位数字 | ||
| 174 | + const hours = String(date.getHours()).padStart(2, '0'); | ||
| 175 | + // 获取分钟，并确保为两位数字 | ||
| 176 | + const minutes = String(date.getMinutes()).padStart(2, '0'); | ||
| 177 | + | ||
| 178 | + // 按照所需格式拼接并返回结果 | ||
| 179 | + return `${month}.${day} ${hours}:${minutes}`; | ||
| 166 | }, | 180 | }, |
| 167 | formatDate(dateStr) { | 181 | formatDate(dateStr) { |
| 168 | - // 使用 split 方法将日期字符串按 - 分割成数组 | ||
| 169 | - const [year, month, day] = dateStr.split('-'); | ||
| 170 | - // 将 month 和 day 转换为数字，去除可能存在的前导零 | ||
| 171 | - const formattedMonth = parseInt(month, 10); | ||
| 172 | - const formattedDay = parseInt(day, 10); | ||
| 173 | - // 按照目标格式拼接字符串 | ||
| 174 | - return `${formattedMonth}月${formattedDay}号`; | 182 | + // 使用 split 方法将日期字符串按 - 分割成数组 |
| 183 | + const [year, month, day] = dateStr.split('-'); | ||
| 184 | + // 将 month 和 day 转换为数字，去除可能存在的前导零 | ||
| 185 | + const formattedMonth = parseInt(month, 10); | ||
| 186 | + const formattedDay = parseInt(day, 10); | ||
| 187 | + // 按照目标格式拼接字符串 | ||
| 188 | + return `${formattedMonth}月${formattedDay}号`; | ||
| 175 | }, | 189 | }, |
| 176 | } | 190 | } |
| 177 | } | 191 | } |
| @@ -179,4 +193,4 @@ | @@ -179,4 +193,4 @@ | ||
| 179 | 193 | ||
| 180 | <style scoped lang="scss"> | 194 | <style scoped lang="scss"> |
| 181 | @import 'rentPayDetails.scss'; | 195 | @import 'rentPayDetails.scss'; |
| 182 | -</style> | ||
| 183 | \ No newline at end of file | 196 | \ No newline at end of file |
| 197 | +</style> | ||
| 184 | \ No newline at end of file | 198 | \ No newline at end of file |