Compare commits
12 Commits
5138937dd4
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 2e3fcadc14 | |||
| 30237639c7 | |||
| 301b3a2582 | |||
| b5f280b02f | |||
| 44124b6931 | |||
| f51dfda073 | |||
| 6d5bea10a4 | |||
| bba73fdc7c | |||
| f027838715 | |||
| 34f862bd4d | |||
| 688e2503fa | |||
| cc9fc9adde |
262
package-lock.json
generated
262
package-lock.json
generated
@@ -30,6 +30,27 @@
|
||||
"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
|
||||
"dev": true
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"dev": true
|
||||
},
|
||||
"string-width": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://r.cnpmjs.org/string-width/-/string-width-5.1.2.tgz",
|
||||
@@ -41,6 +62,40 @@
|
||||
"strip-ansi": "^7.0.1"
|
||||
}
|
||||
},
|
||||
"string-width-cjs": {
|
||||
"version": "npm:string-width@4.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://r.cnpmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
|
||||
@@ -50,6 +105,23 @@
|
||||
"ansi-regex": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi-cjs": {
|
||||
"version": "npm:strip-ansi@6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://r.cnpmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
|
||||
@@ -60,6 +132,60 @@
|
||||
"string-width": "^5.0.1",
|
||||
"strip-ansi": "^7.0.1"
|
||||
}
|
||||
},
|
||||
"wrap-ansi-cjs": {
|
||||
"version": "npm:wrap-ansi@7.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -18986,7 +19112,6 @@
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"bindings": "^1.5.0",
|
||||
"nan": "^2.12.1",
|
||||
"node-pre-gyp": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -20588,8 +20713,7 @@
|
||||
"nan": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/nan/-/nan-2.5.1.tgz",
|
||||
"integrity": "sha512-Mvo2RwemW12NRql4qU21+Sdtu8CAfn2RaCp8+p6N+4oQQvAM1DfO9R/ZyJOJaLdsMLHw84WJEo2AKZar4KANXA==",
|
||||
"optional": true
|
||||
"integrity": "sha512-Mvo2RwemW12NRql4qU21+Sdtu8CAfn2RaCp8+p6N+4oQQvAM1DfO9R/ZyJOJaLdsMLHw84WJEo2AKZar4KANXA=="
|
||||
},
|
||||
"natural-compare": {
|
||||
"version": "1.4.0",
|
||||
@@ -23305,46 +23429,6 @@
|
||||
"strip-ansi": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"string-width-cjs": {
|
||||
"version": "npm:string-width@4.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"string.prototype.trim": {
|
||||
"version": "1.2.9",
|
||||
"resolved": "https://r.cnpmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
|
||||
@@ -23392,23 +23476,6 @@
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi-cjs": {
|
||||
"version": "npm:strip-ansi@6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"strip-bom": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://r2.cnpmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
|
||||
@@ -25835,81 +25902,6 @@
|
||||
"strip-ansi": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"wrap-ansi-cjs": {
|
||||
"version": "npm:wrap-ansi@7.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"dev": true
|
||||
},
|
||||
"string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://r2.cnpmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
|
||||
@@ -92,7 +92,10 @@ const mainRoutes = {
|
||||
{ path: '/reportList-trainingCourseClassList', component: _import('modules/reportList/trainingCourseClassList'), name: 'reportList-trainingCourseClassList', meta: { title: '培训班报表', isTab: true } },
|
||||
{ path: '/reportList-courseList', component: _import('modules/reportList/courseList'), name: 'reportList-courseList', meta: { title: '课程报表', isTab: true } },
|
||||
{ path: '/reportList-lingshuFullYear', component: _import('modules/reportList/lingshuFullYear'), name: 'reportList-lingshuFullYear', meta: { title: '灵枢年度报表', isTab: true } },
|
||||
{ path: '/content-psychologicalForum', component: _import('modules/content/psychologicalForum'), name: 'content-psychologicalForum', meta: { title: '心理论坛', isTab: true } }
|
||||
{ path: '/content-psychologicalForum', component: _import('modules/content/psychologicalForum'), name: 'content-psychologicalForum', meta: { title: '心理论坛', isTab: true } },
|
||||
{ path: '/statisticsBusiness-courseStatistics', component: _import('modules/statisticsBusiness/courseStatistics/index'), name: 'statisticsBusiness-courseStatistics', meta: { title: '课程统计', isTab: true } },
|
||||
{ path: '/statisticsBusiness-vipStatistics', component: _import('modules/statisticsBusiness/vipStatistics/index'), name: 'statisticsBusiness-vipStatistics', meta: { title: 'VIP统计', isTab: true } },
|
||||
{ path: '/statisticsBusiness-userStatistics', component: _import('modules/statisticsBusiness/userStatistics/index'), name: 'statisticsBusiness-userStatistics', meta: { title: '用户统计', isTab: true } },
|
||||
],
|
||||
beforeEnter (to, from, next) {
|
||||
let token = Vue.cookie.get('token')
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<el-dialog :visible.sync="addOrUpdateVisible" :close-on-click-modal="false" :append-to-body="true" :title="titlesub"
|
||||
width="50%" @close="cancleClose">
|
||||
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule">
|
||||
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule" label-width="100px">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input style="width:500px" v-model="addForm.name"></el-input>
|
||||
@@ -76,17 +76,39 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="url" prop="url" label-width="48px">
|
||||
<el-form-item label="关联用户" prop="tel">
|
||||
<el-autocomplete
|
||||
size="large"
|
||||
style="width: 500px;"
|
||||
v-model="addForm.tel"
|
||||
:debounce="500"
|
||||
:fetch-suggestions="loadAll"
|
||||
placeholder="请输入手机号/邮箱"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="custom-item">
|
||||
<span>{{ item.tel ? item.tel : item.email }}</span>
|
||||
<span style="color: gray; margin-left: 10px;" v-if="item.name"
|
||||
>({{ item.name }})</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="url" prop="url">
|
||||
<el-input style="width:500px" v-model="addForm.url"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="内容" prop="content" label-width="48px">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input style="width:500px" v-model="addForm.content" :rows="5" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="地址" prop="cityId" label-width="48px">
|
||||
<el-form-item label="地址" prop="cityId">
|
||||
<el-select v-model="addForm.provId" placeholder="请选择省份" style="width:249px" @change="provinceChange">
|
||||
<el-option v-for="item in provinceEntity" :key="item.provId" :label="item.provName" :value="item.provId">
|
||||
</el-option>
|
||||
@@ -98,17 +120,19 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="图片" prop="img" label-width="48px">
|
||||
<el-upload class="el-uploadfeng " ref="files"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
|
||||
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-form-item label="图片" prop="img">
|
||||
<div style="width: 500px;">
|
||||
<el-upload class="el-uploadfeng " ref="files"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
|
||||
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="排序" label-width="48px">
|
||||
<el-form-item label="排序">
|
||||
<el-input style="width:500px" v-model="addForm.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
@@ -131,6 +155,7 @@
|
||||
cityEntity: [],
|
||||
provinceEntity: [], //省地址
|
||||
typeList: [], //类型列表
|
||||
userList: [], //用户列表
|
||||
booknameList: [],
|
||||
dataForm: {
|
||||
dictType: '', //分类
|
||||
@@ -145,6 +170,8 @@
|
||||
content: '',
|
||||
cityId: '',
|
||||
provId: '',
|
||||
userId: '', //关联用户id
|
||||
tel: '',
|
||||
sort: 0
|
||||
},
|
||||
editId: '',
|
||||
@@ -153,6 +180,10 @@
|
||||
required: true,
|
||||
message: "请选择分类"
|
||||
}],
|
||||
tel: [{
|
||||
required: true,
|
||||
message: "请选择关联用户"
|
||||
}],
|
||||
name: [{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
@@ -239,6 +270,33 @@
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
loadAll(queryString, cb) {
|
||||
console.log('queryString', queryString);
|
||||
if (queryString == "") {
|
||||
return false;
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/user/getUserList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: queryString
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
var arr = data.user.records;
|
||||
cb(arr);
|
||||
} else {
|
||||
cb([]);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelect(data) {
|
||||
console.log("data at line 161:", data);
|
||||
this.addForm.userId = data.id;
|
||||
this.addForm.tel = data.tel ? data.tel : data.email;
|
||||
},
|
||||
provinceChange() {
|
||||
this.addForm.cityId = ''
|
||||
this.cityEntity = []
|
||||
@@ -281,6 +339,8 @@
|
||||
this.addForm.content = row.content
|
||||
this.addForm.typeId = row.type.toString()
|
||||
this.addForm.sort = row.sort
|
||||
this.addForm.tel = row.tel
|
||||
this.addForm.userId = row.userId ? row.userId : ''
|
||||
this.fileList = row.imgList
|
||||
for (var i = 0; i < this.provinceEntity.length; i++) {
|
||||
for (var j = 0; j < this.provinceEntity[i].cityList.length; j++) {
|
||||
@@ -311,6 +371,8 @@
|
||||
content: '',
|
||||
cityId: '',
|
||||
provId: '',
|
||||
userId: '',
|
||||
tel: '',
|
||||
sort: 0
|
||||
}
|
||||
this.fileList = []
|
||||
@@ -382,7 +444,9 @@
|
||||
"content": this.addForm.content,
|
||||
"type": this.addForm.typeId,
|
||||
"cityId": this.addForm.cityId,
|
||||
"sort": this.addForm.sort
|
||||
"sort": this.addForm.sort,
|
||||
"userId": this.addForm.userId,
|
||||
"tel": this.addForm.tel
|
||||
})
|
||||
}).then(({
|
||||
data
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="course-statistics-container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="currentYear"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
value-format="yyyy"
|
||||
:picker-options="pickerOptions"
|
||||
placeholder="选择年份"
|
||||
@change="handleYearChange"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleYearChange"
|
||||
>刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column prop="time" label="月份" min-width="120" />
|
||||
<el-table-column prop="sales" label="销售量" min-width="100" />
|
||||
<el-table-column label="月销售额（微信+支付宝+银行+天医币）" min-width="280">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.salesFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="月销售额（微信+支付宝+银行）" min-width="250">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cashFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="wx" label="微信支付" min-width="120" />
|
||||
<el-table-column prop="zfb" label="支付宝支付" min-width="120" />
|
||||
<el-table-column prop="bank" label="银行支付" min-width="120" />
|
||||
<el-table-column prop="point" label="天医币支付" min-width="120" />
|
||||
<el-table-column prop="jf" label="积分支付" min-width="120" />
|
||||
<el-table-column label="明细" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openDetail(scope.row.time)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
top="10vh"
|
||||
title="销售详情"
|
||||
width="90%"
|
||||
>
|
||||
<div style="margin-bottom: 10px; text-align: right;">
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportDetailData"
|
||||
>下载详情报表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="detailDataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:max-height="dialogTableHeight"
|
||||
>
|
||||
<el-table-column prop="time" label="日" min-width="100" />
|
||||
<el-table-column prop="sales" label="销售量" min-width="100" />
|
||||
<el-table-column label="日销售额（微信+支付宝+银行+天医币）" min-width="280">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.salesFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日销售额（微信+支付宝+银行）" min-width="250">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cashFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="wx" label="微信支付" min-width="120" />
|
||||
<el-table-column prop="zfb" label="支付宝支付" min-width="120" />
|
||||
<el-table-column prop="bank" label="银行支付" min-width="120" />
|
||||
<el-table-column prop="point" label="天医币支付" min-width="120" />
|
||||
<el-table-column prop="jf" label="积分支付" min-width="120" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentYear: '',
|
||||
dataForm: {},
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getFullYear() > new Date().getFullYear()
|
||||
}
|
||||
},
|
||||
dataList: [],
|
||||
detailDataList: [],
|
||||
dialogVisible: false,
|
||||
currentDetailDate: '',
|
||||
tableHeight: null,
|
||||
dialogTableHeight: ''
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.currentYear = new Date().getFullYear().toString()
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleYearChange() {
|
||||
this.getDataList()
|
||||
},
|
||||
getDataList() {
|
||||
this.getListData(this.currentYear, 'dataList')
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
getDetailData() {
|
||||
this.getListData(this.currentDetailDate, 'detailDataList')
|
||||
},
|
||||
getListData(date, dataKey) {
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByTime'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: date
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this[dataKey] = data.courseSaleInfo || []
|
||||
}
|
||||
})
|
||||
},
|
||||
openDetail(date) {
|
||||
this.currentDetailDate = date
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
const windowHeight = window.innerHeight
|
||||
this.dialogTableHeight = windowHeight * 0.8 - 140
|
||||
})
|
||||
this.getDetailData()
|
||||
},
|
||||
exportData() {
|
||||
this.exportReport(this.currentYear)
|
||||
},
|
||||
exportDetailData() {
|
||||
this.exportReport(this.currentDetailDate)
|
||||
},
|
||||
exportReport(date) {
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/exportCourseSaleInfoByTime'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: date
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const fileName = `课程统计报表_按金额_${date}.xlsx`
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-statistics-container {
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.sb-form-item-ten();
|
||||
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div class="course-statistics-container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="timeType" size="small" @change="handleTimeTypeChange">
|
||||
<el-radio-button label="year">按年份</el-radio-button>
|
||||
<el-radio-button label="month">按月份</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-show="timeType === 'year'"
|
||||
v-model="currentDate"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
placeholder="选择年份"
|
||||
popper-append-to-body
|
||||
@change="getDataList"
|
||||
size="small"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-show="timeType === 'month'"
|
||||
v-model="currentDate"
|
||||
type="month"
|
||||
format="yyyy-MM"
|
||||
placeholder="选择月份"
|
||||
popper-append-to-body
|
||||
@change="getDataList"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="getDataList"
|
||||
>刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table-container" ref="tableContainer">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column prop="courseTitle" label="课程名称" min-width="150" />
|
||||
<el-table-column prop="catalogueTitle" label="目录名" min-width="150" />
|
||||
<el-table-column prop="courseLabel" label="分类" min-width="120" />
|
||||
<el-table-column
|
||||
:label="timeType === 'year' ? '年销量' : '月销量'"
|
||||
prop="sales"
|
||||
min-width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
:label="timeType === 'year' ? '年销售额（微信+支付宝+银行+天医币）' : '月销售额（微信+支付宝+银行+天医币）'"
|
||||
min-width="280"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.salesFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="timeType === 'year' ? '年销售额（微信+支付宝+银行）' : '月销售额（微信+支付宝+银行）'"
|
||||
min-width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cashFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="详情"
|
||||
fixed="right"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="showDetail(scope.row)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="margin-top: 15px; text-align: right;"
|
||||
/>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="yearDetailDialogVisible"
|
||||
top="10vh"
|
||||
title="课程年份明细"
|
||||
width="90%"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title">{{ yearDialogTitle }}</span>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportDetailData(currentYearDetailDate, true)"
|
||||
>下载详情报表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="yearDetailDataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:height="yearDetailTableHeight"
|
||||
>
|
||||
<el-table-column prop="monthTime" label="月份" min-width="100" />
|
||||
<el-table-column prop="sales" label="销量" min-width="100" />
|
||||
<el-table-column
|
||||
label="月销售额（微信+支付宝+银行+天医币）"
|
||||
min-width="280"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.salesFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="月销售额（微信+支付宝+银行）"
|
||||
min-width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cashFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="wx" label="微信支付" min-width="120" />
|
||||
<el-table-column prop="zfb" label="支付宝支付" min-width="120" />
|
||||
<el-table-column prop="bank" label="银行支付" min-width="120" />
|
||||
<el-table-column prop="point" label="天医币支付" min-width="120" />
|
||||
<el-table-column prop="jf" label="积分支付" min-width="120" />
|
||||
<el-table-column prop="relearnCount" label="复读人数" min-width="100" />
|
||||
<el-table-column
|
||||
label="复读占比（按销量）"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sales > 0 ? ((scope.row.relearnCount / scope.row.sales * 100).toFixed(2) + '%') : '0%' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="miaoshaCount" label="秒杀人数" min-width="100" />
|
||||
<el-table-column
|
||||
label="秒杀占比（按销量）"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sales > 0 ? ((scope.row.miaoshaCount / scope.row.sales * 100).toFixed(2) + '%') : '0%' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="monthDetailDialogVisible"
|
||||
top="10vh"
|
||||
title="课程月份明细"
|
||||
width="90%"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title">{{ monthDialogTitle }}</span>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportDetailData(currentMonthDetailDate, false)"
|
||||
>下载详情报表</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="monthDetailDataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:height="monthDetailTableHeight"
|
||||
>
|
||||
<el-table-column prop="time" label="时间" min-width="160" />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="tel" label="注册电话" min-width="120" />
|
||||
<el-table-column
|
||||
label="课程时长（1个月/3个月半年期/一年期）"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.days }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="是否复读"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.orderType === '是' ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeType: 'year',
|
||||
currentDate: new Date(),
|
||||
dataForm: {},
|
||||
dataList: [],
|
||||
yearDetailDataList: [],
|
||||
monthDetailDataList: [],
|
||||
yearDetailDialogVisible: false,
|
||||
monthDetailDialogVisible: false,
|
||||
yearDialogTitle: '',
|
||||
monthDialogTitle: '',
|
||||
currentYearDetailDate: '',
|
||||
currentMonthDetailDate: '',
|
||||
currentCatalogueId: '',
|
||||
yearDetailTableHeight: '',
|
||||
monthDetailTableHeight: '',
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
tableHeight: null
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
const now = new Date()
|
||||
if (this.timeType === 'year') {
|
||||
this.currentDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else {
|
||||
this.currentDate = now
|
||||
}
|
||||
this.getDataList()
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
handleTimeTypeChange() {
|
||||
if (this.timeType === 'year') {
|
||||
const now = new Date()
|
||||
this.currentDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else {
|
||||
this.currentDate = new Date()
|
||||
}
|
||||
this.getDataList()
|
||||
},
|
||||
getDataList() {
|
||||
const dateStr = this.timeType === 'year'
|
||||
? this.currentDate.getFullYear().toString()
|
||||
: `${this.currentDate.getFullYear()}-${String(this.currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByCourse'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.courseSaleInfo || []
|
||||
this.total = data.totalSize || 0
|
||||
this.calculateTableHeight()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val
|
||||
this.getDataList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val
|
||||
this.getDataList()
|
||||
},
|
||||
exportData() {
|
||||
const dateStr = this.timeType === 'year'
|
||||
? this.currentDate.getFullYear().toString()
|
||||
: `${this.currentDate.getFullYear()}-${String(this.currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/exportCourseSaleInfoByCourse'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const fileName = `课程统计报表_按课程_${dateStr}.xlsx`
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
})
|
||||
},
|
||||
showDetail(row) {
|
||||
this.currentCatalogueId = row.catalogueId
|
||||
const dateStr = this.timeType === 'year'
|
||||
? this.currentDate.getFullYear().toString()
|
||||
: `${this.currentDate.getFullYear()}-${String(this.currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
|
||||
const dialogTitle = `${row.courseTitle} - ${row.catalogueTitle}`
|
||||
const isYear = this.timeType === 'year'
|
||||
|
||||
if (isYear) {
|
||||
this.currentYearDetailDate = dateStr
|
||||
this.yearDialogTitle = dialogTitle
|
||||
this.yearDetailDialogVisible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
const windowHeight = window.innerHeight
|
||||
this.yearDetailTableHeight = windowHeight * 0.8 - 140
|
||||
})
|
||||
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/getCourseYearInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr,
|
||||
catalogueId: row.catalogueId
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.yearDetailDataList = data.courseSaleInfo || []
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.currentMonthDetailDate = dateStr
|
||||
this.monthDialogTitle = dialogTitle
|
||||
this.monthDetailDialogVisible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
const windowHeight = window.innerHeight
|
||||
this.monthDetailTableHeight = windowHeight * 0.8 - 140
|
||||
})
|
||||
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/getCourseMonthInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr,
|
||||
catalogueId: row.catalogueId
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.monthDetailDataList = data.courseSaleInfo || []
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
exportDetailData(date, isYear) {
|
||||
const exportUrl = isYear
|
||||
? '/master/statisticsBusiness/exportCourseYearInfo'
|
||||
: '/master/statisticsBusiness/exportCourseMonthInfo'
|
||||
const fileName = isYear
|
||||
? `课程年份明细报表_${this.yearDialogTitle}_${date}.xlsx`
|
||||
: `课程月份明细报表_${this.monthDialogTitle}_${date}.xlsx`
|
||||
|
||||
http({
|
||||
url: http.adornUrl(exportUrl),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: date,
|
||||
catalogueId: this.currentCatalogueId
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-statistics-container {
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sb-form-item-ten();
|
||||
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tab-pane label="按金额统计" name="amount" />
|
||||
<el-tab-pane label="按课程统计" name="course" />
|
||||
<el-tab-pane label="按分类统计" name="label" />
|
||||
</el-tabs>
|
||||
<keep-alive>
|
||||
<component :is="currentComponent" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import amountStatistics from './amountStatistics'
|
||||
import courseStatistics from './courseStatistics'
|
||||
import labelStatistics from './labelStatistics'
|
||||
|
||||
export default {
|
||||
components: { amountStatistics, courseStatistics, labelStatistics },
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'amount'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentComponent() {
|
||||
return `${this.activeTab}Statistics`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="course-label-statistics-container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="timeType" size="small" @change="handleTimeTypeChange">
|
||||
<el-radio-button label="year">按年份</el-radio-button>
|
||||
<el-radio-button label="month">按月份</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-show="timeType === 'year'"
|
||||
v-model="currentDate"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
placeholder="选择年份"
|
||||
popper-append-to-body
|
||||
@change="getDataList"
|
||||
size="small"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-show="timeType === 'month'"
|
||||
v-model="currentDate"
|
||||
type="month"
|
||||
format="yyyy-MM"
|
||||
placeholder="选择月份"
|
||||
popper-append-to-body
|
||||
@change="getDataList"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="getDataList"
|
||||
>刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table-container" ref="tableContainer">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column prop="courseLabel" label="分类" min-width="150" />
|
||||
<el-table-column prop="courseCount" label="总销售门数" min-width="120" />
|
||||
<el-table-column prop="sales" label="总销量" min-width="100" />
|
||||
<el-table-column
|
||||
:label="timeType === 'year' ? '年销售额（微信+支付宝+银行+天医币）' : '月销售额（微信+支付宝+银行+天医币）'"
|
||||
min-width="280"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.salesFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="timeType === 'year' ? '年销售额（微信+支付宝+银行）' : '月销售额（微信+支付宝+银行）'"
|
||||
min-width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.cashFee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeType: 'year',
|
||||
currentDate: new Date(),
|
||||
dataForm: {},
|
||||
dataList: [],
|
||||
tableHeight: null
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
const now = new Date()
|
||||
if (this.timeType === 'year') {
|
||||
this.currentDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else {
|
||||
this.currentDate = now
|
||||
}
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
handleTimeTypeChange() {
|
||||
if (this.timeType === 'year') {
|
||||
const now = new Date()
|
||||
this.currentDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else {
|
||||
this.currentDate = new Date()
|
||||
}
|
||||
this.getDataList()
|
||||
},
|
||||
getDataList() {
|
||||
const dateStr = this.timeType === 'year'
|
||||
? this.currentDate.getFullYear().toString()
|
||||
: `${this.currentDate.getFullYear()}-${String(this.currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByCourseLabel'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.courseSaleInfo || []
|
||||
}
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
const dateStr = this.timeType === 'year'
|
||||
? this.currentDate.getFullYear().toString()
|
||||
: `${this.currentDate.getFullYear()}-${String(this.currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusiness/exportCourseSaleInfoByCourseLabel'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: dateStr
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const fileName = `按分类统计报表_${dateStr}.xlsx`
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-label-statistics-container {
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
.sb-form-item-zero() {
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-form-item-ten() {
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-table-compact() {
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-statistics-table-min() {
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-page-height-with-table() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-dialog-body-no-top-padding() {
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-white-panel(@padding: 8px) {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
.sb-flex-column-fill() {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-detail-header(@mb: 16px) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: @mb;
|
||||
}
|
||||
|
||||
.sb-title-16() {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sb-summary-card-text() {
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-summary-section-flex(@gap: 12px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-shell(
|
||||
@basis: 180px,
|
||||
@width: 180px,
|
||||
@minHeight: 180px,
|
||||
@padding: 16px,
|
||||
@bg: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
|
||||
) {
|
||||
display: flex;
|
||||
flex: 1 1 @basis;
|
||||
width: @width;
|
||||
flex-direction: column;
|
||||
min-height: @minHeight;
|
||||
padding: @padding;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: @bg;
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.sb-summary-card-two-columns(@basis: 280px, @width: 280px) {
|
||||
flex-basis: @basis;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.sb-summary-card-title(@mb: 14px) {
|
||||
margin-bottom: @mb;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-body(@gap: 10px) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-body-two-columns(@rowGap: 10px, @colGap: 30px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: @rowGap @colGap;
|
||||
}
|
||||
|
||||
.sb-summary-line(@gap: 12px) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: @gap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sb-summary-line-label() {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.sb-summary-line-value() {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="null" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="day" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tab-pane label="当日" name="dayUser" />
|
||||
<el-tab-pane label="月度" name="monthUser" />
|
||||
<el-tab-pane label="年度" name="yearUser" />
|
||||
<el-tab-pane label="全部" name="allUser" />
|
||||
<el-tab-pane label="留存率" name="retainUser" />
|
||||
</el-tabs>
|
||||
<keep-alive>
|
||||
<component :is="activeTab" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import allUser from './allUser'
|
||||
import dayUser from './dayUser'
|
||||
import monthUser from './monthUser'
|
||||
import yearUser from './yearUser'
|
||||
import retainUser from './retainUser'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
dayUser,
|
||||
monthUser,
|
||||
yearUser,
|
||||
allUser,
|
||||
retainUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'dayUser'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="month" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="retain-statistics-container" v-loading="loading">
|
||||
<div class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item label="统计月份">
|
||||
<el-date-picker
|
||||
v-model="currentMonth"
|
||||
type="month"
|
||||
format="yyyy-MM"
|
||||
value-format="yyyy-MM"
|
||||
placeholder="请选择月份"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="getDataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>
|
||||
下载报表
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:max-height="tableHeight"
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
>
|
||||
<el-table-column prop="dayTime" label="日期" min-width="120" />
|
||||
<el-table-column prop="count" label="新增用户数" min-width="110" />
|
||||
<el-table-column prop="nextDay" label="次日留存用户数" min-width="130" />
|
||||
<el-table-column prop="nextRate" label="次日留存率" min-width="110" />
|
||||
<el-table-column prop="day7" label="7日留存用户数" min-width="120" />
|
||||
<el-table-column prop="rate7" label="7日留存率" min-width="100" />
|
||||
<el-table-column prop="day30" label="30日留存用户数" min-width="130" />
|
||||
<el-table-column prop="rate30" label="30日留存率" min-width="110" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
function formatMonth(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
return `${y}-${m}`
|
||||
}
|
||||
|
||||
function normalizeNumber(value) {
|
||||
if (value === null || value === undefined || value === '') return 0
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function formatRate(value) {
|
||||
if (value === null || value === undefined || value === '') return '0%'
|
||||
if (typeof value === 'string') {
|
||||
const text = value.trim()
|
||||
if (!text) return '0%'
|
||||
if (text.includes('%')) return text
|
||||
const num = Number(text)
|
||||
if (Number.isNaN(num)) return '0%'
|
||||
if (num <= 1) return `${(num * 100).toFixed(0)}%`
|
||||
return `${num.toFixed(0)}%`
|
||||
}
|
||||
const num = Number(value)
|
||||
if (Number.isNaN(num)) return '0%'
|
||||
if (num <= 1) return `${(num * 100).toFixed(0)}%`
|
||||
return `${num.toFixed(0)}%`
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentMonth: '',
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getTime() > now.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
normalizeRows(userList = []) {
|
||||
return userList.map((item) => ({
|
||||
dayTime: item.dayTime || '--',
|
||||
count: normalizeNumber(item.count),
|
||||
nextDay: normalizeNumber(item.nextDay),
|
||||
nextRate: formatRate(item.nextRate),
|
||||
day7: normalizeNumber(item['7Day']),
|
||||
rate7: formatRate(item['7Rate']),
|
||||
day30: normalizeNumber(item['30Day']),
|
||||
rate30: formatRate(item['30Rate'])
|
||||
}))
|
||||
},
|
||||
getDataList() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/getUserRegisterStayInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentMonth
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.tableData = this.normalizeRows(data.userList || [])
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/exportUserRegisterStayInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentMonth
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `留存率统计报表-${this.currentMonth}.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败，请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.retain-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.table-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.table-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-form-item-zero();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-table-compact();
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="user-statistics-page" v-loading="loading">
|
||||
<div v-if="mode !== 'null'" class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item :label="queryLabel">
|
||||
<el-date-picker
|
||||
v-model="currentDate"
|
||||
:type="pickerType"
|
||||
:format="displayFormat"
|
||||
:value-format="valueFormat"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="handleQueryChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="refreshData">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">{{ timePrefix }}登录人数</div>
|
||||
<div class="summary-card__value">{{ summary.loginCount }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">{{ timePrefix }}注册人数</div>
|
||||
<div class="summary-card__value">{{ summary.createCount }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">截止今日 近30天内活跃人数</div>
|
||||
<div class="summary-card__value">{{ summary.userCountFor30Day }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="table-title">用户统计明细（{{ total }}）</div>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:height="mode !== 'null' ? 470 : 520"
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" :index="indexMethod" />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="tel" label="电话" min-width="130" />
|
||||
<el-table-column prop="createTime" label="注册时间" min-width="120" />
|
||||
<el-table-column prop="loginCity" label="城市" min-width="100" />
|
||||
<el-table-column prop="come" label="注册来源" min-width="110" />
|
||||
<el-table-column prop="socialIdentity" label="社会身份" min-width="120" />
|
||||
<el-table-column prop="identity" label="app用户身份" min-width="120" />
|
||||
<el-table-column prop="jf" label="天医币" min-width="90" />
|
||||
<el-table-column prop="point" label="积分" min-width="90" />
|
||||
<el-table-column prop="beforVip" label="曾vip" min-width="100" />
|
||||
<el-table-column prop="nowVip" label="现vip" min-width="100" />
|
||||
<el-table-column prop="ubo" label="是否买过课程" min-width="110" />
|
||||
<el-table-column prop="ucbl" label="是否复购" min-width="90" />
|
||||
<el-table-column prop="ucerCount" label="课程证几张" min-width="100" />
|
||||
<el-table-column prop="loginTime" label="上次登录时间" min-width="160" />
|
||||
<el-table-column prop="loginMachine" label="设备" min-width="90" />
|
||||
<el-table-column prop="sex" label="性别" min-width="80" />
|
||||
<el-table-column prop="nowWatch" label="当日学习时长" min-width="110" />
|
||||
<el-table-column prop="watch7" label="近七天学习时间" min-width="120" />
|
||||
<el-table-column prop="totalWatch" label="总学习时长" min-width="100" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="margin-top: 15px; text-align: right;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
function formatDate(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
const d = `${date.getDate()}`.padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function formatMonth(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
return `${y}-${m}`
|
||||
}
|
||||
|
||||
function formatYear(date) {
|
||||
return `${date.getFullYear()}`
|
||||
}
|
||||
|
||||
function normalizeText(value) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '--'
|
||||
}
|
||||
const text = String(value).trim()
|
||||
return text || '--'
|
||||
}
|
||||
|
||||
function normalizeNumber(value) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return 0
|
||||
}
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentDate: '',
|
||||
summary: {
|
||||
loginCount: 0,
|
||||
createCount: 0,
|
||||
userCountFor30Day: 0
|
||||
},
|
||||
tableData: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
queryLabel() {
|
||||
if (this.mode === 'day') return '统计日期'
|
||||
if (this.mode === 'month') return '统计月份'
|
||||
return '统计年份'
|
||||
},
|
||||
pickerType() {
|
||||
if (this.mode === 'day') return 'date'
|
||||
if (this.mode === 'month') return 'month'
|
||||
if (this.mode === 'year') return 'year'
|
||||
return ''
|
||||
},
|
||||
displayFormat() {
|
||||
if (this.mode === 'day') return 'yyyy-MM-dd'
|
||||
if (this.mode === 'month') return 'yyyy-MM'
|
||||
if (this.mode === 'year') return 'yyyy'
|
||||
return ''
|
||||
},
|
||||
valueFormat() {
|
||||
return this.displayFormat
|
||||
},
|
||||
timePrefix() {
|
||||
// if (this.mode === 'day') return '当日'
|
||||
// if (this.mode === 'month') return '当月'
|
||||
// if (this.mode === 'year') return '当年'
|
||||
return '当日'
|
||||
},
|
||||
pickerOptions() {
|
||||
return {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getTime() > now.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
indexMethod(index) {
|
||||
return (this.page - 1) * this.limit + index + 1
|
||||
},
|
||||
handleQueryChange() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
refreshData() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val
|
||||
this.getDataList()
|
||||
},
|
||||
getDefaultDate() {
|
||||
const now = new Date()
|
||||
if (this.mode === 'day') return formatDate(now)
|
||||
if (this.mode === 'month') return formatMonth(now)
|
||||
if (this.mode === 'year') return formatYear(now)
|
||||
return null
|
||||
},
|
||||
normalizeRows(userList = []) {
|
||||
return userList.map((item) => ({
|
||||
name: normalizeText(item.name),
|
||||
tel: normalizeText(item.tel),
|
||||
createTime: normalizeText(item.createTime),
|
||||
loginCity: normalizeText(item.loginCity),
|
||||
come: normalizeText(item.come),
|
||||
socialIdentity: normalizeText(item.socialIdentity),
|
||||
identity: normalizeText(item.identity),
|
||||
jf: normalizeNumber(item.jf),
|
||||
point: normalizeNumber(item.point),
|
||||
beforVip: normalizeText(item.beforVip),
|
||||
nowVip: normalizeText(item.nowVip),
|
||||
ubo: normalizeText(item.ubo),
|
||||
ucbl: normalizeText(item.ucbl),
|
||||
ucerCount: normalizeNumber(item.ucerCount),
|
||||
loginTime: normalizeText(item.loginTime),
|
||||
loginMachine: normalizeText(item.loginMachine),
|
||||
sex: normalizeText(item.sex),
|
||||
nowWatch: normalizeNumber(item.nowWatch),
|
||||
watch7: normalizeNumber(item['7Watch']),
|
||||
totalWatch: normalizeNumber(item.totalWatch)
|
||||
}))
|
||||
},
|
||||
getDataList() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/getUserStatistics'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentDate,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.summary = {
|
||||
loginCount: normalizeNumber(data.loginCount),
|
||||
createCount: normalizeNumber(data.createCount),
|
||||
userCountFor30Day: normalizeNumber(data.userCountFor30Day)
|
||||
}
|
||||
this.tableData = this.normalizeRows(data.userList || [])
|
||||
this.total = normalizeNumber(data.totalSize)
|
||||
} else {
|
||||
this.summary = { loginCount: 0, createCount: 0, userCountFor30Day: 0 }
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/exportUserStatistics'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentDate
|
||||
}),
|
||||
responseType: 'blob',
|
||||
timeout: 0
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `用户统计报表-${this.currentDate || '全部'}.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败，请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.user-statistics-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
.sb-white-panel(8px);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(180px, auto, auto);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-section {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="year" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
304
src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
Normal file
304
src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div class="all-vip-statistics" v-loading="loading">
|
||||
<div class="summary-section">
|
||||
<div class="summary-block">
|
||||
<div class="summary-block__title">截止至今到期统计</div>
|
||||
<div class="summary-grid">
|
||||
<div
|
||||
v-for="item in expiredSummaryCards"
|
||||
:key="`expired-${item.key}`"
|
||||
class="summary-card summary-card--expired"
|
||||
>
|
||||
<div class="summary-card__label">{{ item.label }}</div>
|
||||
<div class="summary-card__value">{{ item.value }}人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-block">
|
||||
<div class="summary-block__title">截止至今在期统计</div>
|
||||
<div class="summary-grid">
|
||||
<div
|
||||
v-for="item in activeSummaryCards"
|
||||
:key="`active-${item.key}`"
|
||||
class="summary-card summary-card--active"
|
||||
>
|
||||
<div class="summary-card__label">{{ item.label }}</div>
|
||||
<div class="summary-card__value">{{ item.value }}人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-header">
|
||||
<div class="detail-title">全部VIP明细（{{ dataList.length }}）</div>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</div>
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column prop="time" label="办理时间" min-width="140" />
|
||||
<el-table-column prop="name" label="姓名" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatText(scope.row.name) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tel" label="注册电话" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
{{ formatText(scope.row.tel) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="vipType" label="VIP类型" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
{{ formatText(scope.row.vipType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="year" label="年限" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatYear(scope.row.year) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="缴费金额" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatAmount(scope.row.price) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="到期时间" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
{{ formatText(scope.row.endTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
function createEmptySummary() {
|
||||
return {
|
||||
total: 0,
|
||||
zyCount: 0,
|
||||
zjCount: 0,
|
||||
zxhtCount: 0,
|
||||
zlCount: 0,
|
||||
xlCount: 0,
|
||||
yxSuperCount: 0,
|
||||
gxSuperCount: 0
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
tableHeight: null,
|
||||
dataList: [],
|
||||
expiredSummary: createEmptySummary(),
|
||||
activeSummary: createEmptySummary()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
expiredSummaryCards() {
|
||||
return this.buildSummaryCards(this.expiredSummary)
|
||||
},
|
||||
activeSummaryCards() {
|
||||
return this.buildSummaryCards(this.activeSummary)
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
buildSummaryCards(summary) {
|
||||
return [
|
||||
{ key: 'total', label: '总人数', value: summary.total },
|
||||
{ key: 'zyCount', label: '中医学', value: summary.zyCount },
|
||||
{ key: 'zjCount', label: '针灸学', value: summary.zjCount },
|
||||
{ key: 'zxhtCount', label: '中西汇通学', value: summary.zxhtCount },
|
||||
{ key: 'zlCount', label: '肿瘤学', value: summary.zlCount },
|
||||
{ key: 'xlCount', label: '心理学', value: summary.xlCount },
|
||||
{ key: 'yxSuperCount', label: '医学超级', value: summary.yxSuperCount },
|
||||
{ key: 'gxSuperCount', label: '国学心理学超级', value: summary.gxSuperCount }
|
||||
]
|
||||
},
|
||||
normalizeSummary(total, counts = {}) {
|
||||
return {
|
||||
total: total || 0,
|
||||
zyCount: counts.zyCount || 0,
|
||||
zjCount: counts.zjCount || counts.zjcount || 0,
|
||||
zxhtCount: counts.zxhtCount || 0,
|
||||
zlCount: counts.zlCount || counts.zlcount || 0,
|
||||
xlCount: counts.xlCount || 0,
|
||||
yxSuperCount: counts.yxSuperCount || 0,
|
||||
gxSuperCount: counts.gxSuperCount || 0
|
||||
}
|
||||
},
|
||||
getDataList() {
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/getUserVipByState'),
|
||||
method: 'post',
|
||||
data: http.adornData({})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.resultList || []
|
||||
this.expiredSummary = this.normalizeSummary(data.state1Total, data.state1Counts)
|
||||
this.activeSummary = this.normalizeSummary(data.state0Total, data.state0Counts)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/exportUserVipByState'),
|
||||
method: 'post',
|
||||
data: http.adornData({}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = '全部VIP统计报表.xlsx'
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败，请确认导出接口是否已提供')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
},
|
||||
formatText(value) {
|
||||
if (value === '' || value === null || value === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return String(value).trim() || '--'
|
||||
},
|
||||
formatYear(year) {
|
||||
if (year === '' || year === null || year === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return year + '年'
|
||||
},
|
||||
formatAmount(amount) {
|
||||
if (amount === '' || amount === null || amount === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return Number(amount).toFixed(2).replace(/\.00$/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.all-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.summary-block__title {
|
||||
margin-bottom: 16px;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(120px, 120px, auto);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.summary-card--expired {
|
||||
background: linear-gradient(180deg, #fff7f5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.summary-card--active {
|
||||
background: linear-gradient(180deg, #f3fbf5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<expires-statistics-base
|
||||
title="近半年临到期"
|
||||
:month="6"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import expiresStatisticsBase from './expiresStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: { expiresStatisticsBase }
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="vip-expires-statistics" v-loading="loading">
|
||||
<div class="summary-section">
|
||||
<div class="section-title">汇总统计</div>
|
||||
<div class="summary-grid">
|
||||
<div
|
||||
v-for="item in summaryCards"
|
||||
:key="item.key"
|
||||
class="summary-card"
|
||||
>
|
||||
<div class="summary-card__label">{{ item.label }}</div>
|
||||
<div class="summary-card__value">{{ item.value }}人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-header">
|
||||
<div class="detail-title">{{ detailTitle }}</div>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</div>
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column prop="time" label="办理时间" min-width="140" />
|
||||
<el-table-column prop="name" label="姓名" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tel" label="注册电话" min-width="140" />
|
||||
<el-table-column prop="vipType" label="VIP类型" min-width="160" />
|
||||
<el-table-column prop="year" label="年限" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ formatYear(scope.row.year) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="缴费金额" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatAmount(scope.row.price) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="到期时间" min-width="140" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
month: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
tableHeight: null,
|
||||
dataList: [],
|
||||
summaryData: {
|
||||
total: 0,
|
||||
zyCount: 0,
|
||||
zjcount: 0,
|
||||
zxhtCount: 0,
|
||||
zlcount: 0,
|
||||
xlCount: 0,
|
||||
yxSuperCount: 0,
|
||||
gxSuperCount: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailTitle() {
|
||||
return `${this.title}明细（${this.summaryData.total || 0}）`
|
||||
},
|
||||
summaryCards() {
|
||||
return [
|
||||
{ key: 'total', label: '总人数', value: this.summaryData.total },
|
||||
{ key: 'zyCount', label: '中医学', value: this.summaryData.zyCount },
|
||||
{ key: 'zjcount', label: '针灸学', value: this.summaryData.zjcount },
|
||||
{ key: 'zxhtCount', label: '中西汇通学', value: this.summaryData.zxhtCount },
|
||||
{ key: 'zlcount', label: '肿瘤学', value: this.summaryData.zlcount },
|
||||
{ key: 'xlCount', label: '心理学', value: this.summaryData.xlCount },
|
||||
{ key: 'yxSuperCount', label: '医学超级', value: this.summaryData.yxSuperCount },
|
||||
{ key: 'gxSuperCount', label: '国学心理学超级', value: this.summaryData.gxSuperCount }
|
||||
]
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
getRequestData() {
|
||||
return {
|
||||
month: String(this.month)
|
||||
}
|
||||
},
|
||||
getDataList() {
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/getExpiresByMonth'),
|
||||
method: 'post',
|
||||
data: http.adornData(this.getRequestData())
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
const countData = data.count || {}
|
||||
this.dataList = data.resultList || []
|
||||
this.summaryData = {
|
||||
total: data.total || 0,
|
||||
zyCount: countData.zyCount || 0,
|
||||
zjcount: countData.zjCount || countData.zjcount || 0,
|
||||
zxhtCount: countData.zxhtCount || 0,
|
||||
zlcount: countData.zlCount || countData.zlcount || 0,
|
||||
xlCount: countData.xlCount || 0,
|
||||
yxSuperCount: countData.yxSuperCount || 0,
|
||||
gxSuperCount: countData.gxSuperCount || 0
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/exportExpiresByMonth'),
|
||||
method: 'post',
|
||||
data: http.adornData(this.getRequestData()),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${this.title}VIP统计报表.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
},
|
||||
formatYear(year) {
|
||||
if (year === '' || year === null || year === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return `${year}年`
|
||||
},
|
||||
formatAmount(amount) {
|
||||
if (amount === '' || amount === null || amount === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return Number(amount).toFixed(2).replace(/\.00$/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.vip-expires-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(
|
||||
120px,
|
||||
120px,
|
||||
auto,
|
||||
16px,
|
||||
linear-gradient(180deg, #f7fbff 0%, #ffffff 100%)
|
||||
);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<expires-statistics-base
|
||||
title="近3个月临到期"
|
||||
:month="3"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import expiresStatisticsBase from './expiresStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: { expiresStatisticsBase }
|
||||
}
|
||||
</script>
|
||||
48
src/views/modules/statisticsBusiness/vipStatistics/index.vue
Normal file
48
src/views/modules/statisticsBusiness/vipStatistics/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tab-pane label="近3个月临到期" name="expiresThreeMonths" />
|
||||
<el-tab-pane label="近半年临到期" name="expiresSixMonths" />
|
||||
<el-tab-pane label="全部" name="allVip" />
|
||||
<el-tab-pane label="年" name="yearVip" />
|
||||
<el-tab-pane label="月" name="monthVip" />
|
||||
</el-tabs>
|
||||
<keep-alive>
|
||||
<component :is="currentComponent" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import expiresThreeMonths from './expiresThreeMonths'
|
||||
import expiresSixMonths from './expiresSixMonths'
|
||||
import allVip from './allVip'
|
||||
import yearVip from './yearVip'
|
||||
import monthVip from './monthVip'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
expiresThreeMonths,
|
||||
expiresSixMonths,
|
||||
allVip,
|
||||
yearVip,
|
||||
monthVip
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'expiresThreeMonths'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentComponent() {
|
||||
return this.activeTab
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
319
src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue
Normal file
319
src/views/modules/statisticsBusiness/vipStatistics/monthVip.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="month-vip-statistics" v-loading="loading">
|
||||
<div class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item label="统计月份">
|
||||
<el-date-picker
|
||||
v-model="currentMonth"
|
||||
type="month"
|
||||
format="yyyy-MM"
|
||||
value-format="yyyy-MM"
|
||||
placeholder="选择月份"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="getDataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div
|
||||
v-for="(card, index) in summaryCards"
|
||||
:key="card.title + index"
|
||||
:class="[
|
||||
'summary-card',
|
||||
{
|
||||
'summary-card--two-columns': isTwoColumnCard(card)
|
||||
}
|
||||
]"
|
||||
>
|
||||
<div class="summary-card__title">{{ card.title }}</div>
|
||||
<div class="summary-card__body">
|
||||
<div
|
||||
v-for="line in card.lines"
|
||||
:key="card.title + line.label"
|
||||
class="summary-line"
|
||||
>
|
||||
<span class="summary-line__label">{{ line.label }}</span>
|
||||
<span class="summary-line__value">{{ line.value }}{{ line.unit || '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-header">
|
||||
<div class="detail-title">月度VIP明细（{{ dataList.length }}）</div>
|
||||
</div>
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column prop="time" label="时间" min-width="120" />
|
||||
<el-table-column prop="name" label="姓名" min-width="120" />
|
||||
<el-table-column prop="tel" label="电话" min-width="140" />
|
||||
<el-table-column prop="vipType" label="VIP类型" min-width="150" />
|
||||
<el-table-column prop="isYan" label="是否延期" min-width="110" />
|
||||
<el-table-column prop="currentYear" label="本次年限" min-width="110" />
|
||||
<el-table-column prop="currentAmount" label="本次金额" min-width="130">
|
||||
<template slot-scope="scope">
|
||||
{{ formatAmountCell(scope.row.currentAmount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="currentStartTime" label="本次开始时间" min-width="140" />
|
||||
<el-table-column prop="currentEndTime" label="本次结束时间" min-width="140" />
|
||||
<el-table-column prop="endTime" label="到期时间" min-width="140" />
|
||||
<el-table-column prop="isReBuy" label="是否为复购" min-width="110" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
import {
|
||||
buildMonthVipViewData,
|
||||
getCurrentMonthValue,
|
||||
getPreviousMonthValue,
|
||||
normalizeMonthValue
|
||||
} from './monthVipDataHelper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentMonth: getCurrentMonthValue(),
|
||||
summaryCards: [],
|
||||
dataList: [],
|
||||
tableHeight: null,
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getTime() > new Date(now.getFullYear(), now.getMonth(), 1).getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
fetchMonthData(date) {
|
||||
const normalizedDate = normalizeMonthValue(date)
|
||||
return http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/getUserVipByMonth'),
|
||||
method: 'post',
|
||||
data: http.adornData({ date: normalizedDate })
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
return data
|
||||
}
|
||||
return {}
|
||||
}).catch(() => ({}))
|
||||
},
|
||||
getDataList() {
|
||||
if (!this.currentMonth) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
const currentMonth = normalizeMonthValue(this.currentMonth)
|
||||
const previousMonth = getPreviousMonthValue(currentMonth)
|
||||
this.currentMonth = currentMonth
|
||||
|
||||
Promise.all([
|
||||
this.fetchMonthData(currentMonth),
|
||||
this.fetchMonthData(previousMonth)
|
||||
]).then(([currentData, previousData]) => {
|
||||
const viewData = buildMonthVipViewData(currentData, previousData)
|
||||
this.summaryCards = viewData.cards
|
||||
this.dataList = viewData.tableRows
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
const currentMonth = normalizeMonthValue(this.currentMonth)
|
||||
this.currentMonth = currentMonth
|
||||
this.exportLoading = true
|
||||
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/exportUserVipByMonth'),
|
||||
method: 'post',
|
||||
data: http.adornData({ date: currentMonth }),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${currentMonth}月VIP统计报表.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败，请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
},
|
||||
formatAmountCell(value) {
|
||||
if (value === '--') {
|
||||
return value
|
||||
}
|
||||
return value + '元'
|
||||
},
|
||||
isTwoColumnCard(card) {
|
||||
return ['办理统计', '续费率'].includes(card.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.month-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(180px, 180px, 190px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1680px) {
|
||||
.summary-card {
|
||||
flex-basis: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-card,
|
||||
.summary-card--two-columns {
|
||||
flex-basis: calc(50% - 6px);
|
||||
width: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.summary-card,
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
function toNumber(value) {
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function getAmount(value) {
|
||||
return toNumber(value).toFixed(2).replace(/\.00$/, '')
|
||||
}
|
||||
|
||||
function formatRate(current, previous) {
|
||||
const currentValue = toNumber(current)
|
||||
const previousValue = toNumber(previous)
|
||||
|
||||
if (previousValue === 0) {
|
||||
return currentValue === 0 ? '0.00%' : '--'
|
||||
}
|
||||
|
||||
return (((currentValue - previousValue) / previousValue) * 100).toFixed(2) + '%'
|
||||
}
|
||||
|
||||
function formatYear(year) {
|
||||
if (year === '' || year === null || year === undefined) {
|
||||
return '--'
|
||||
}
|
||||
return year + '年'
|
||||
}
|
||||
|
||||
function formatText(value) {
|
||||
if (value === '' || value === null || value === undefined) {
|
||||
return '--'
|
||||
}
|
||||
|
||||
const text = String(value).trim()
|
||||
return text || '--'
|
||||
}
|
||||
|
||||
function getDynamicKeys(...sources) {
|
||||
const keys = []
|
||||
|
||||
sources.forEach((source) => {
|
||||
Object.keys(source || {}).forEach((key) => {
|
||||
const text = formatText(key)
|
||||
if (text !== '--' && !keys.includes(text)) {
|
||||
keys.push(text)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return keys
|
||||
}
|
||||
|
||||
function buildCountLines(totalLabel, totalValue, counts) {
|
||||
const dynamicLines = getDynamicKeys(counts).map((key) => ({
|
||||
label: key,
|
||||
value: toNumber(counts[key]),
|
||||
unit: '人'
|
||||
}))
|
||||
|
||||
return [{ label: totalLabel, value: toNumber(totalValue), unit: '人' }].concat(dynamicLines)
|
||||
}
|
||||
|
||||
function buildRenewalLines(currentData) {
|
||||
const dynamicKeys = getDynamicKeys(currentData.banCounts, currentData.yanCounts)
|
||||
|
||||
return dynamicKeys.map((key) => ({
|
||||
label: key,
|
||||
value: '开发中',
|
||||
unit: ''
|
||||
}))
|
||||
}
|
||||
|
||||
function buildGrowthLines(currentData, previousData) {
|
||||
return [
|
||||
{
|
||||
label: '办理总人数环比增长率',
|
||||
value: formatRate(currentData.banTotalCount, previousData.banTotalCount)
|
||||
},
|
||||
{
|
||||
label: '延期总人数环比增长率',
|
||||
value: formatRate(currentData.yanTotalCount, previousData.yanTotalCount)
|
||||
},
|
||||
{
|
||||
label: '办理金额环比增长率',
|
||||
value: formatRate(currentData.banTotalPrice, previousData.banTotalPrice)
|
||||
},
|
||||
{
|
||||
label: '延期金额环比增长率',
|
||||
value: formatRate(currentData.yanTotalPrice, previousData.yanTotalPrice)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function buildCards(currentData, previousData) {
|
||||
return [
|
||||
{
|
||||
title: '办理统计',
|
||||
lines: buildCountLines('办理总人数', currentData.banTotalCount, currentData.banCounts)
|
||||
},
|
||||
{
|
||||
title: '延期统计',
|
||||
lines: buildCountLines('延期总人数', currentData.yanTotalCount, currentData.yanCounts)
|
||||
},
|
||||
{
|
||||
title: '金额统计',
|
||||
lines: [
|
||||
{ label: '总办理金额', value: getAmount(currentData.banTotalPrice), unit: '元' },
|
||||
{ label: '总延期金额', value: getAmount(currentData.yanTotalPrice), unit: '元' },
|
||||
{
|
||||
label: '合计总金额',
|
||||
value: getAmount(toNumber(currentData.banTotalPrice) + toNumber(currentData.yanTotalPrice)),
|
||||
unit: '元'
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: '续费率',
|
||||
// lines: buildRenewalLines(currentData)
|
||||
// },
|
||||
{
|
||||
title: '环比增长率',
|
||||
lines: buildGrowthLines(currentData, previousData)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function buildTableRows(list) {
|
||||
return (list || []).map((item) => {
|
||||
return {
|
||||
time: formatText(item.payTime),
|
||||
name: formatText(item.name),
|
||||
tel: formatText(item.tel),
|
||||
vipType: formatText(item.vipType),
|
||||
isYan: formatText(item.isYan),
|
||||
currentYear: formatYear(item.year),
|
||||
currentAmount: getAmount(item.price),
|
||||
currentStartTime: formatText(item.uvlStartTime || item.startTime),
|
||||
currentEndTime: formatText(item.uvlEndTime || item.endTime),
|
||||
endTime: formatText(item.endTime || item.uvlEndTime),
|
||||
isReBuy: formatText(item.isReBuy)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getCurrentMonthValue() {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
return `${year}-${month}`
|
||||
}
|
||||
|
||||
export function normalizeMonthValue(value) {
|
||||
if (!value) {
|
||||
return getCurrentMonthValue()
|
||||
}
|
||||
|
||||
if (Object.prototype.toString.call(value) === '[object Date]' && !Number.isNaN(value.getTime())) {
|
||||
const year = value.getFullYear()
|
||||
const month = String(value.getMonth() + 1).padStart(2, '0')
|
||||
return `${year}-${month}`
|
||||
}
|
||||
|
||||
const text = String(value).trim()
|
||||
const matched = text.match(/^(\d{4})-(\d{1,2})/)
|
||||
if (matched) {
|
||||
return `${matched[1]}-${String(matched[2]).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
return getCurrentMonthValue()
|
||||
}
|
||||
|
||||
export function getPreviousMonthValue(monthValue) {
|
||||
const normalizedMonthValue = normalizeMonthValue(monthValue)
|
||||
const parts = normalizedMonthValue.split('-')
|
||||
if (parts.length !== 2) {
|
||||
return getCurrentMonthValue()
|
||||
}
|
||||
|
||||
const year = Number(parts[0])
|
||||
const month = Number(parts[1])
|
||||
const date = new Date(year, month - 2, 1)
|
||||
const prevYear = date.getFullYear()
|
||||
const prevMonth = String(date.getMonth() + 1).padStart(2, '0')
|
||||
return `${prevYear}-${prevMonth}`
|
||||
}
|
||||
|
||||
export function buildMonthVipViewData(currentData = {}, previousData = {}) {
|
||||
return {
|
||||
cards: buildCards(currentData, previousData),
|
||||
tableRows: buildTableRows(currentData.allResultList)
|
||||
}
|
||||
}
|
||||
317
src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue
Normal file
317
src/views/modules/statisticsBusiness/vipStatistics/yearVip.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="year-vip-statistics" v-loading="loading">
|
||||
<div class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item label="统计年份">
|
||||
<el-date-picker
|
||||
v-model="currentYear"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
value-format="yyyy"
|
||||
placeholder="选择年份"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="getDataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div
|
||||
v-for="(card, index) in summaryCards"
|
||||
:key="card.title + index"
|
||||
:class="[
|
||||
'summary-card',
|
||||
{
|
||||
'summary-card--two-columns': isTwoColumnCard(card)
|
||||
}
|
||||
]"
|
||||
>
|
||||
<div class="summary-card__title">{{ card.title }}</div>
|
||||
<div class="summary-card__body">
|
||||
<div
|
||||
v-for="line in card.lines"
|
||||
:key="card.title + line.label"
|
||||
class="summary-line"
|
||||
>
|
||||
<span class="summary-line__label">{{ line.label }}</span>
|
||||
<span class="summary-line__value">{{ line.value }}{{ line.unit || '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section table-section--orange">
|
||||
<div class="table-title">VIP办理情况统计</div>
|
||||
<el-table
|
||||
:data="handleTableRows"
|
||||
border
|
||||
:header-cell-style="orangeTableHeaderStyle"
|
||||
:cell-style="orangeTableCellStyle"
|
||||
>
|
||||
<el-table-column prop="typeName" label="" min-width="140" />
|
||||
<el-table-column prop="ban3" label="首次办理三年" min-width="120" />
|
||||
<el-table-column prop="ban4" label="首次办理四年" min-width="120" />
|
||||
<el-table-column prop="banOther" label="首次办理其他" min-width="120" />
|
||||
<el-table-column prop="yan1" label="延期一年" min-width="110" />
|
||||
<el-table-column prop="yan3" label="延期三年" min-width="110" />
|
||||
<el-table-column prop="yan4" label="延期四年" min-width="110" />
|
||||
<el-table-column prop="yanOther" label="延期办理其他" min-width="120" />
|
||||
<el-table-column prop="total" label="合计" min-width="110" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="table-section table-section--yellow">
|
||||
<div class="table-title">VIP分类年度办理人数占比</div>
|
||||
<el-table
|
||||
:data="ratioTableRows"
|
||||
border
|
||||
:header-cell-style="yellowTableHeaderStyle"
|
||||
:cell-style="yellowTableCellStyle"
|
||||
>
|
||||
<el-table-column prop="typeName" label="分类" min-width="180" />
|
||||
<el-table-column prop="ratio" label="年度办理人数占比" min-width="180" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="table-section table-section--blue">
|
||||
<div class="table-title">每月明细</div>
|
||||
<el-table
|
||||
:data="monthTableRows"
|
||||
border
|
||||
:header-cell-style="blueTableHeaderStyle"
|
||||
:cell-style="blueTableCellStyle"
|
||||
>
|
||||
<el-table-column prop="monthLabel" label="办理时间" min-width="140" />
|
||||
<el-table-column prop="banCount" label="办理人数" min-width="140" />
|
||||
<el-table-column prop="yanCount" label="延期人数" min-width="140" />
|
||||
<el-table-column prop="amount" label="缴费金额" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.amount }}元
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
import {
|
||||
buildYearVipViewData,
|
||||
getCurrentYearValue,
|
||||
getPreviousYearValue,
|
||||
normalizeYearValue
|
||||
} from './yearVipDataHelper'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentYear: getCurrentYearValue(),
|
||||
summaryCards: [],
|
||||
handleTableRows: [],
|
||||
ratioTableRows: [],
|
||||
monthTableRows: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getFullYear() > now.getFullYear()
|
||||
}
|
||||
},
|
||||
orangeTableHeaderStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
},
|
||||
orangeTableCellStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
},
|
||||
yellowTableHeaderStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
},
|
||||
yellowTableCellStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
},
|
||||
blueTableHeaderStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
},
|
||||
blueTableCellStyle: {
|
||||
textAlign: 'center',
|
||||
color: '#333333',
|
||||
padding: '6px 0'
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
fetchYearData(year) {
|
||||
const normalizedYear = normalizeYearValue(year)
|
||||
return http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/getUserVipByYear'),
|
||||
method: 'post',
|
||||
data: http.adornData({ year: normalizedYear })
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
return data
|
||||
}
|
||||
return {}
|
||||
}).catch(() => ({}))
|
||||
},
|
||||
getDataList() {
|
||||
const currentYear = normalizeYearValue(this.currentYear)
|
||||
const previousYear = getPreviousYearValue(currentYear)
|
||||
this.currentYear = currentYear
|
||||
this.loading = true
|
||||
|
||||
Promise.all([
|
||||
this.fetchYearData(currentYear),
|
||||
this.fetchYearData(previousYear)
|
||||
]).then(([currentData, previousData]) => {
|
||||
const viewData = buildYearVipViewData(currentData, previousData)
|
||||
this.summaryCards = viewData.summaryCards
|
||||
this.handleTableRows = viewData.handleTableRows
|
||||
this.ratioTableRows = viewData.ratioTableRows
|
||||
this.monthTableRows = viewData.monthTableRows
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
const year = normalizeYearValue(this.currentYear)
|
||||
this.currentYear = year
|
||||
this.exportLoading = true
|
||||
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessVip/exportUserVipByYear'),
|
||||
method: 'post',
|
||||
data: http.adornData({ year }),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${year}年VIP统计报表.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败，请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
},
|
||||
isTwoColumnCard(card) {
|
||||
return ['办理统计', '延期统计'].includes(card.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.year-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(180px, 180px, 180px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.table-title {
|
||||
margin-bottom: 12px;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-card,
|
||||
.summary-card--two-columns {
|
||||
flex-basis: calc(50% - 6px);
|
||||
width: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.summary-card,
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
const TYPE_ORDER = [
|
||||
'中医学',
|
||||
'中西汇通学',
|
||||
'肿瘤学',
|
||||
'针灸学',
|
||||
'心理学',
|
||||
'国学',
|
||||
'医学超级',
|
||||
'心理国学超级'
|
||||
]
|
||||
|
||||
const TYPE_ALIAS_MAP = {
|
||||
国学心理学超级: '心理国学超级'
|
||||
}
|
||||
|
||||
function toNumber(value) {
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function formatAmount(value) {
|
||||
return toNumber(value).toFixed(2).replace(/\.00$/, '')
|
||||
}
|
||||
|
||||
function normalizeTypeName(name) {
|
||||
return TYPE_ALIAS_MAP[name] || name
|
||||
}
|
||||
|
||||
function getCurrentYearValue() {
|
||||
return String(new Date().getFullYear())
|
||||
}
|
||||
|
||||
function normalizeYearValue(value) {
|
||||
if (!value) {
|
||||
return getCurrentYearValue()
|
||||
}
|
||||
|
||||
if (Object.prototype.toString.call(value) === '[object Date]' && !Number.isNaN(value.getTime())) {
|
||||
return String(value.getFullYear())
|
||||
}
|
||||
|
||||
const matched = String(value).trim().match(/^(\d{4})/)
|
||||
if (matched) {
|
||||
return matched[1]
|
||||
}
|
||||
|
||||
return getCurrentYearValue()
|
||||
}
|
||||
|
||||
function getPreviousYearValue(yearValue) {
|
||||
return String(Number(normalizeYearValue(yearValue)) - 1)
|
||||
}
|
||||
|
||||
function getDynamicTypeKeys(...sources) {
|
||||
const keys = []
|
||||
|
||||
sources.forEach((source) => {
|
||||
Object.keys(source || {}).forEach((key) => {
|
||||
const normalizedKey = normalizeTypeName(key)
|
||||
if (!keys.includes(normalizedKey)) {
|
||||
keys.push(normalizedKey)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const orderedKeys = TYPE_ORDER.filter((key) => keys.includes(key))
|
||||
const restKeys = keys.filter((key) => !TYPE_ORDER.includes(key))
|
||||
return orderedKeys.concat(restKeys)
|
||||
}
|
||||
|
||||
function getMappedCount(source, typeName, yearKey) {
|
||||
const originalKey = Object.keys(source || {}).find((key) => normalizeTypeName(key) === typeName)
|
||||
if (!originalKey) {
|
||||
return 0
|
||||
}
|
||||
return toNumber(((source || {})[originalKey] || {})[yearKey])
|
||||
}
|
||||
|
||||
function getMappedValue(source, typeName) {
|
||||
const originalKey = Object.keys(source || {}).find((key) => normalizeTypeName(key) === typeName)
|
||||
if (!originalKey) {
|
||||
return 0
|
||||
}
|
||||
return toNumber((source || {})[originalKey])
|
||||
}
|
||||
|
||||
function buildCountLines(totalLabel, totalValue, counts) {
|
||||
return [{ label: totalLabel, value: toNumber(totalValue), unit: '人' }].concat(
|
||||
getDynamicTypeKeys(counts).map((typeName) => ({
|
||||
label: typeName,
|
||||
value: getMappedValue(counts, typeName),
|
||||
unit: '人'
|
||||
}))
|
||||
)
|
||||
}
|
||||
|
||||
function formatYearRate(current, previous) {
|
||||
const currentValue = toNumber(current)
|
||||
const previousValue = toNumber(previous)
|
||||
|
||||
if (currentValue === 0) {
|
||||
return '0.00%'
|
||||
}
|
||||
|
||||
return `${(((currentValue - previousValue) / currentValue) * 100).toFixed(2)}%`
|
||||
}
|
||||
|
||||
function buildSummaryCards(currentData, previousData) {
|
||||
return [
|
||||
{
|
||||
title: '办理统计',
|
||||
lines: buildCountLines('办理总人数', currentData.banTotalCount, currentData.banTypeTotalCounts)
|
||||
},
|
||||
{
|
||||
title: '延期统计',
|
||||
lines: buildCountLines('延期总人数', currentData.yanTotalCount, currentData.yanTypeTotalCounts)
|
||||
},
|
||||
{
|
||||
title: '金额统计',
|
||||
lines: [
|
||||
{ label: '总办理金额', value: formatAmount(currentData.banTotalPrice), unit: '元' },
|
||||
{ label: '总延期金额', value: formatAmount(currentData.yanTotalPrice), unit: '元' },
|
||||
{
|
||||
label: '合计总金额',
|
||||
value: formatAmount(toNumber(currentData.banTotalPrice) + toNumber(currentData.yanTotalPrice)),
|
||||
unit: '元'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '同比增长率',
|
||||
lines: [
|
||||
{
|
||||
label: '办理总人数同比增长率',
|
||||
value: formatYearRate(currentData.banTotalCount, previousData.banTotalCount)
|
||||
},
|
||||
{
|
||||
label: '延期总人数同比增长率',
|
||||
value: formatYearRate(currentData.yanTotalCount, previousData.yanTotalCount)
|
||||
},
|
||||
{
|
||||
label: '办理金额同比增长率',
|
||||
value: formatYearRate(currentData.banTotalPrice, previousData.banTotalPrice)
|
||||
},
|
||||
{
|
||||
label: '延期金额同比增长率',
|
||||
value: formatYearRate(currentData.yanTotalPrice, previousData.yanTotalPrice)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function buildHandleTableRows(currentData) {
|
||||
const typeKeys = getDynamicTypeKeys(currentData.banCounts, currentData.yanCounts)
|
||||
const rows = typeKeys.map((typeName) => {
|
||||
const ban3 = getMappedCount(currentData.banCounts, typeName, '3')
|
||||
const ban4 = getMappedCount(currentData.banCounts, typeName, '4')
|
||||
const banOther = getMappedCount(currentData.banCounts, typeName, '其他')
|
||||
const yan1 = getMappedCount(currentData.yanCounts, typeName, '1')
|
||||
const yan3 = getMappedCount(currentData.yanCounts, typeName, '3')
|
||||
const yan4 = getMappedCount(currentData.yanCounts, typeName, '4')
|
||||
const yanOther = getMappedCount(currentData.yanCounts, typeName, '其他')
|
||||
|
||||
return {
|
||||
typeName,
|
||||
ban3,
|
||||
ban4,
|
||||
banOther,
|
||||
yan1,
|
||||
yan3,
|
||||
yan4,
|
||||
yanOther,
|
||||
total: ban3 + ban4 + banOther + yan1 + yan3 + yan4 + yanOther
|
||||
}
|
||||
})
|
||||
|
||||
const totalRow = rows.reduce((acc, item) => {
|
||||
acc.ban3 += item.ban3
|
||||
acc.ban4 += item.ban4
|
||||
acc.banOther += item.banOther
|
||||
acc.yan1 += item.yan1
|
||||
acc.yan3 += item.yan3
|
||||
acc.yan4 += item.yan4
|
||||
acc.yanOther += item.yanOther
|
||||
acc.total += item.total
|
||||
return acc
|
||||
}, {
|
||||
typeName: '合计',
|
||||
ban3: 0,
|
||||
ban4: 0,
|
||||
banOther: 0,
|
||||
yan1: 0,
|
||||
yan3: 0,
|
||||
yan4: 0,
|
||||
yanOther: 0,
|
||||
total: 0
|
||||
})
|
||||
|
||||
return rows.concat(totalRow)
|
||||
}
|
||||
|
||||
function buildRatioTableRows(currentData) {
|
||||
return getDynamicTypeKeys(currentData.banTypeRatios).map((typeName) => {
|
||||
const originalKey = Object.keys(currentData.banTypeRatios || {}).find((key) => normalizeTypeName(key) === typeName)
|
||||
return {
|
||||
typeName,
|
||||
ratio: (currentData.banTypeRatios || {})[originalKey] || '0%'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function buildMonthTableRows(currentData) {
|
||||
const rows = Array.from({ length: 12 }, (_, index) => {
|
||||
const month = String(index + 1)
|
||||
return {
|
||||
monthLabel: `${month}月`,
|
||||
banCount: toNumber((currentData.banMonthCounts || {})[month]),
|
||||
yanCount: toNumber((currentData.yanMonthCounts || {})[month]),
|
||||
amount: formatAmount((currentData.monthAmounts || {})[month])
|
||||
}
|
||||
})
|
||||
|
||||
rows.push({
|
||||
monthLabel: '合计',
|
||||
banCount: toNumber(currentData.banTotalCount),
|
||||
yanCount: toNumber(currentData.yanTotalCount),
|
||||
amount: formatAmount(currentData.banTotalPrice)
|
||||
})
|
||||
|
||||
return rows
|
||||
}
|
||||
|
||||
export {
|
||||
getCurrentYearValue,
|
||||
getPreviousYearValue,
|
||||
normalizeYearValue
|
||||
}
|
||||
|
||||
export function buildYearVipViewData(currentData = {}, previousData = {}) {
|
||||
return {
|
||||
summaryCards: buildSummaryCards(currentData, previousData),
|
||||
handleTableRows: buildHandleTableRows(currentData),
|
||||
ratioTableRows: buildRatioTableRows(currentData),
|
||||
monthTableRows: buildMonthTableRows(currentData)
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
v-model="dataForm.userKey"
|
||||
debounce="500"
|
||||
:debounce="500"
|
||||
:fetch-suggestions="loadAll"
|
||||
placeholder="请输入手机号/邮箱"
|
||||
@select="handleSelect"
|
||||
|
||||
Reference in New Issue
Block a user