Skip to content

C
center-chart-show-h5
提交 ed85259b authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 f0832372
显示空白字符变更
内嵌 并排
正在显示 包含 402 行增加 和 140 行删除
package-lock.json
浏览文件 @ ed85259b
...@@ -10,15 +10,18 @@ ...@@ -10,15 +10,18 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.10.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"echarts": "^5.0.2", "echarts": "^5.0.2",
"lodash.sortby": "^4.7.0",
"swiper": "^5.4.5",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-echarts": "^6.0.0-rc.3", "vue-awesome-swiper": "^4.1.1",
"vue-echarts": "6.0.0-rc.4",
"vue-loader": "^15.9.6", "vue-loader": "^15.9.6",
"vue-router": "^3.4.9", "vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",
"vuex": "^3.6.0" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.11.6", "@babel/core": "^7.11.6",
...@@ -3499,9 +3502,9 @@ ...@@ -3499,9 +3502,9 @@
} }
}, },
"node_modules/core-js": { "node_modules/core-js": {
"version": "3.9.1", "version": "3.10.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.0.tgz",
"integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==", "integrity": "sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==",
"hasInstallScript": true, "hasInstallScript": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
...@@ -4201,6 +4204,14 @@ ...@@ -4201,6 +4204,14 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
} }
}, },
"node_modules/dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dependencies": {
"ssr-window": "^2.0.0"
}
},
"node_modules/domain-browser": { "node_modules/domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
...@@ -7766,6 +7777,11 @@ ...@@ -7766,6 +7777,11 @@
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
"dev": true "dev": true
}, },
"node_modules/lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
},
"node_modules/loglevel": { "node_modules/loglevel": {
"version": "1.7.1", "version": "1.7.1",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
...@@ -11128,6 +11144,11 @@ ...@@ -11128,6 +11144,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
},
"node_modules/ssri": { "node_modules/ssri": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
...@@ -11460,6 +11481,23 @@ ...@@ -11460,6 +11481,23 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/swiper": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"hasInstallScript": true,
"dependencies": {
"dom7": "^2.1.5",
"ssr-window": "^2.0.0"
},
"engines": {
"node": ">= 4.7.0"
},
"funding": {
"type": "patreon",
"url": "https://www.patreon.com/vladimirkharlampidi"
}
},
"node_modules/table": { "node_modules/table": {
"version": "5.4.6", "version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
...@@ -12408,10 +12446,22 @@ ...@@ -12408,10 +12446,22 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
}, },
"node_modules/vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
"engines": {
"node": ">=8"
},
"peerDependencies": {
"swiper": "^5.2.0",
"vue": "2.x"
}
},
"node_modules/vue-demi": { "node_modules/vue-demi": {
"version": "0.7.3", "version": "0.7.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.3.tgz", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
"integrity": "sha512-vrzM26H4CZCXBf/eu4T8nks6o7qgziYM52myk8bg+atw4qYqpeWJf5c82W8VdmgGfSIdh9ulOOe9+GeLc3Z/8A==", "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
"hasInstallScript": true, "hasInstallScript": true,
"bin": { "bin": {
"vue-demi-fix": "bin/vue-demi-fix.js", "vue-demi-fix": "bin/vue-demi-fix.js",
...@@ -12431,13 +12481,13 @@ ...@@ -12431,13 +12481,13 @@
} }
}, },
"node_modules/vue-echarts": { "node_modules/vue-echarts": {
"version": "6.0.0-rc.3", "version": "6.0.0-rc.4",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-rc.3.tgz", "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-rc.4.tgz",
"integrity": "sha512-B7xfwpHaOeM9+cjallrK3AW893oaeqT9Sjx7tHgwoyGdfPTq6cwDc2Hcdmjgrs/KEp+ZZXMIajXky30Wu4/TDw==", "integrity": "sha512-kkpBkAFIh7aHw2/0FEm9UktQ16LDP5EmATaCqq+CtnSKzd+vuZI6UxrfTLnOQNMCR5eKX8FoonggoKHpcjNGQg==",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"resize-detector": "^0.3.0", "resize-detector": "^0.3.0",
"vue-demi": "^0.7.1" "vue-demi": "^0.7.4"
}, },
"peerDependencies": { "peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.2", "@vue/composition-api": "^1.0.0-rc.2",
...@@ -16464,9 +16514,9 @@ ...@@ -16464,9 +16514,9 @@
} }
}, },
"core-js": { "core-js": {
"version": "3.9.1", "version": "3.10.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.0.tgz",
"integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==" "integrity": "sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ=="
}, },
"core-js-compat": { "core-js-compat": {
"version": "3.9.1", "version": "3.9.1",
...@@ -17028,6 +17078,14 @@ ...@@ -17028,6 +17078,14 @@
"entities": "^2.0.0" "entities": "^2.0.0"
} }
}, },
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
}
},
"domain-browser": { "domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
...@@ -19809,6 +19867,11 @@ ...@@ -19809,6 +19867,11 @@
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
"dev": true "dev": true
}, },
"lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
},
"loglevel": { "loglevel": {
"version": "1.7.1", "version": "1.7.1",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
...@@ -22562,6 +22625,11 @@ ...@@ -22562,6 +22625,11 @@
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
} }
}, },
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
},
"ssri": { "ssri": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
...@@ -22818,6 +22886,15 @@ ...@@ -22818,6 +22886,15 @@
"has-flag": "^3.0.0" "has-flag": "^3.0.0"
} }
}, },
"swiper": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"requires": {
"dom7": "^2.1.5",
"ssr-window": "^2.0.0"
}
},
"table": { "table": {
"version": "5.4.6", "version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
...@@ -23591,19 +23668,25 @@ ...@@ -23591,19 +23668,25 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
}, },
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
"requires": {}
},
"vue-demi": { "vue-demi": {
"version": "0.7.3", "version": "0.7.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.3.tgz", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
"integrity": "sha512-vrzM26H4CZCXBf/eu4T8nks6o7qgziYM52myk8bg+atw4qYqpeWJf5c82W8VdmgGfSIdh9ulOOe9+GeLc3Z/8A==", "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
"requires": {} "requires": {}
}, },
"vue-echarts": { "vue-echarts": {
"version": "6.0.0-rc.3", "version": "6.0.0-rc.4",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-rc.3.tgz", "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-rc.4.tgz",
"integrity": "sha512-B7xfwpHaOeM9+cjallrK3AW893oaeqT9Sjx7tHgwoyGdfPTq6cwDc2Hcdmjgrs/KEp+ZZXMIajXky30Wu4/TDw==", "integrity": "sha512-kkpBkAFIh7aHw2/0FEm9UktQ16LDP5EmATaCqq+CtnSKzd+vuZI6UxrfTLnOQNMCR5eKX8FoonggoKHpcjNGQg==",
"requires": { "requires": {
"resize-detector": "^0.3.0", "resize-detector": "^0.3.0",
"vue-demi": "^0.7.1" "vue-demi": "^0.7.4"
} }
}, },
"vue-eslint-parser": { "vue-eslint-parser": {
......
package.json
浏览文件 @ ed85259b
...@@ -71,15 +71,18 @@ ...@@ -71,15 +71,18 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.10.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"echarts": "^5.0.2", "echarts": "^5.0.2",
"lodash.sortby": "^4.7.0",
"swiper": "^5.4.5",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-echarts": "^6.0.0-rc.3", "vue-awesome-swiper": "^4.1.1",
"vue-echarts": "6.0.0-rc.4",
"vue-loader": "^15.9.6", "vue-loader": "^15.9.6",
"vue-router": "^3.4.9", "vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",
"vuex": "^3.6.0" "vuex": "^3.6.2"
}, },
"engines": { "engines": {
"node": ">=8.9" "node": ">=8.9"
......
src/app.vue
浏览文件 @ ed85259b
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
}
ul > li {
list-style: none;
} }
body { body {
background: linear-gradient(180deg, #1e0c0d, #1a0200); background: linear-gradient(180deg, #1e0c0d, #1a0200);
......
src/components/card.vue
浏览文件 @ ed85259b
...@@ -23,14 +23,15 @@ export default { ...@@ -23,14 +23,15 @@ export default {
background: linear-gradient(56deg, #162b85, #20b4e2, #000f4a, #172987) 100%; background: linear-gradient(56deg, #162b85, #20b4e2, #000f4a, #172987) 100%;
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 1px;
margin: 0 15px;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 3px; top: 1px;
left: 3px; left: 1px;
right: 3px; right: 1px;
bottom: 3px; bottom: 1px;
background: #000; background: #000;
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
...@@ -38,18 +39,22 @@ export default { ...@@ -38,18 +39,22 @@ export default {
} }
.card-inner { .card-inner {
position: relative; position: relative;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(0deg, #1d357a 0%, rgba(23, 41, 136, 0) 100%); background: linear-gradient(0deg, #1d357a 0%, rgba(23, 41, 136, 0) 100%);
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
} }
.card-hd { .card-hd {
padding: 10px 20px; padding: 13px 13px;
font-size: 18px; font-size: 14px;
font-weight: bold; font-weight: 400;
line-height: 30px; color: #f3f3f3;
color: #fff;
} }
.card-bd { .card-bd {
margin: 0 20px; flex: 1;
margin: 0 13px;
overflow: hidden;
} }
</style> </style>
src/components/monthCompleteRate.vue
浏览文件 @ ed85259b
...@@ -25,14 +25,44 @@ export default { ...@@ -25,14 +25,44 @@ export default {
type: 'bar', type: 'bar',
barWidth: 10, barWidth: 10,
barCategoryGap: '0%', barCategoryGap: '0%',
itemStyle: { borderRadius: 100 }, label: {
label: { show: true, position: 'right', color: '#E59700', formatter: ({ value }) => value / 10000 } show: true,
// showBackground: true, position: 'right',
// backgroundStyle: { color: 'transparent', borderWidth: 1, borderColor: '#0A7199', borderRadius: 100 }, color: '#E59700',
formatter: ({ value }) => parseInt(value).toLocaleString()
}
} }
const series = [ const series = [
{ ...seriesItem, name: '收入', data: [] }, {
{ ...seriesItem, name: '投入', data: [] } ...seriesItem,
name: '收入',
data: [],
itemStyle: {
borderRadius: 10,
color: {
type: 'linear',
colorStops: [
{ offset: 0, color: '#073547' },
{ offset: 1, color: '#1B98BD' }
]
}
}
},
{
...seriesItem,
name: '投入',
data: [],
itemStyle: {
borderRadius: 10,
color: {
type: 'linear',
colorStops: [
{ offset: 0, color: '#0D4708' },
{ offset: 1, color: '#3DAC34' }
]
}
}
}
] ]
this.currentData.sell_data && this.currentData.sell_data &&
this.currentData.sell_data.forEach(item => { this.currentData.sell_data.forEach(item => {
...@@ -45,8 +75,8 @@ export default { ...@@ -45,8 +75,8 @@ export default {
option() { option() {
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'none' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
grid: { left: '60px', right: '60px', bottom: 0 }, grid: { left: '45px', right: '40px', top: '20px', bottom: 0 },
legend: { textStyle: { color: '#fff' } }, legend: { textStyle: { color: '#0A7199' } },
xAxis: { show: false }, xAxis: { show: false },
yAxis: { yAxis: {
inverse: true, inverse: true,
...@@ -78,9 +108,3 @@ export default { ...@@ -78,9 +108,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
.chart {
height: 280px;
}
</style>
src/components/monthDashboard.vue
浏览文件 @ ed85259b
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
this.response = response this.response = response
}) })
}, },
formatValue(value = '') { formatValue(value = 0) {
return value.toLocaleString() return value.toLocaleString()
} }
}, },
......
src/components/monthIncome.vue
浏览文件 @ ed85259b
<template> <template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" /> <div class="container">
<p class="date">{{ dateStr }}</p>
<dl>
<dt>本月总收入</dt>
<dd>{{ formatValue(currentData.all_pay_money) }}</dd>
</dl>
<div class="chart">
<v-chart :option="option" :autoresize="true" />
</div>
<div class="bottom">
<ul>
<li>
<b>本月留资数：</b><span>{{ numbers.app_count }}</span>
</li>
<li>
<b>本月报名数：</b><span>{{ numbers.apply_count }}</span>
</li>
</ul>
<ul>
<li>
<b>单条留资成本：</b><span>{{ numbers.app_cost }}</span>
</li>
<li>
<b>&nbsp;&nbsp;&nbsp;本月缴费数：</b><span>{{ numbers.pay_count }}</span>
</li>
</ul>
</div>
</div>
</template> </template>
<script> <script>
...@@ -12,7 +39,9 @@ export default { ...@@ -12,7 +39,9 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
response: { sell_data: [] } response: { sell_data: [] },
list: [],
dateStr: ''
} }
}, },
computed: { computed: {
...@@ -51,9 +80,26 @@ export default { ...@@ -51,9 +80,26 @@ export default {
series: [{ type: 'bar', barWidth: 10, data: this.dataset.series, coordinateSystem: 'polar' }] series: [{ type: 'bar', barWidth: 10, data: this.dataset.series, coordinateSystem: 'polar' }]
} }
return option return option
},
numbers() {
return this.list.reduce(
(result, item) => {
result.app_cost += Math.floor(item.app_cost / this.list.length)
result.app_count += item.app_count
result.apply_count += item.apply_count
result.pay_count += item.pay_count
return result
},
{ app_cost: 0, app_count: 0, apply_count: 0, pay_count: 0 }
)
} }
}, },
methods: { methods: {
init() {
!this.data && this.getData()
this.getProjectCost()
this.initDate()
},
getData() { getData() {
this.loading = true this.loading = true
api api
...@@ -64,16 +110,66 @@ export default { ...@@ -64,16 +110,66 @@ export default {
.finally(() => { .finally(() => {
this.loading = false this.loading = false
}) })
},
getProjectCost() {
api.getProjectCost().then(response => {
this.list = response
})
},
initDate() {
const date = new Date()
this.dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
},
formatValue(value = '') {
return value.toLocaleString()
} }
}, },
beforeMount() { beforeMount() {
!this.data && this.getData() this.init()
} }
} }
</script> </script>
<style scoped> <style scoped>
.container {
display: flex;
flex-direction: column;
height: 100%;
color: #f3f3f3;
padding-bottom: 40px;
}
.date {
padding: 24px 0;
font-size: 16px;
}
dl {
text-align: center;
}
dt {
font-size: 20px;
font-weight: 500;
}
dd {
margin-top: 18px;
font-size: 36px;
font-weight: 500;
color: #03fdf0;
}
.chart { .chart {
height: 200px; flex: 1;
overflow: hidden;
}
.bottom {
display: flex;
justify-content: space-between;
}
li b {
font-size: 12px;
font-weight: 400;
text-align: right;
}
li span {
font-size: 16px;
font-weight: 600;
} }
</style> </style>
src/components/monthIncomeTrend.vue
浏览文件 @ ed85259b
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
position: 'top', position: 'top',
color: '#fff', color: '#fff',
formatter({ value }) { formatter({ value }) {
return value / 10000 return (value / 10000).toFixed()
} }
}, },
itemStyle: { color: 'transparent' } itemStyle: { color: 'transparent' }
...@@ -90,13 +90,15 @@ export default { ...@@ -90,13 +90,15 @@ export default {
}, },
option() { option() {
return { return {
title: { text: '单位：万', textStyle: { fontSize: 12, color: '#0A7199' }, padding: 0 },
// tooltip: { trigger: 'axis', axisPointer: {} }, // tooltip: { trigger: 'axis', axisPointer: {} },
grid: { left: 0, top: '40px', right: 0, bottom: '40px', containLabel: true },
legend: { legend: {
top: 'bottom', bottom: '10px',
itemWidth: 13, itemWidth: 10,
itemHeight: 13, itemHeight: 10,
icon: 'rect', icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 } textStyle: { color: '#F3F3F3' }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -140,9 +142,3 @@ export default { ...@@ -140,9 +142,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
.chart {
height: 300px;
}
</style>
src/components/nowApply.vue
浏览文件 @ ed85259b
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<td>{{ item.user_name }}</td> <td>{{ item.user_name }}</td>
<td>{{ item.pay_type }}</td> <td>{{ item.pay_type }}</td>
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.pay_money.toLocaleString() }}</td> <td>{{ formatValue(item.pay_money) }}</td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -33,6 +33,9 @@ export default { ...@@ -33,6 +33,9 @@ export default {
api.getNowIncome().then(response => { api.getNowIncome().then(response => {
this.response = response this.response = response
}) })
},
formatValue(value = 0) {
return value.toLocaleString()
} }
}, },
beforeMount() { beforeMount() {
......
src/components/nowIncome.vue
浏览文件 @ ed85259b
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<td>{{ item.user_name }}</td> <td>{{ item.user_name }}</td>
<td>{{ item.pay_type }}</td> <td>{{ item.pay_type }}</td>
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.pay_money.toLocaleString() }}</td> <td>{{ formatValue(item.pay_money) }}</td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -33,6 +33,9 @@ export default { ...@@ -33,6 +33,9 @@ export default {
api.getNowIncome().then(response => { api.getNowIncome().then(response => {
this.response = response this.response = response
}) })
},
formatValue(value = 0) {
return value.toLocaleString()
} }
}, },
beforeMount() { beforeMount() {
......
src/components/paymentStructure.vue
浏览文件 @ ed85259b
...@@ -23,8 +23,8 @@ export default { ...@@ -23,8 +23,8 @@ export default {
orient: 'vertical', orient: 'vertical',
right: 0, right: 0,
top: 'middle', top: 'middle',
itemWidth: 14, itemWidth: 10,
itemHeight: 14, itemHeight: 10,
icon: 'rect', icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 } textStyle: { color: '#fff', fontSize: 16 }
}, },
......
src/components/projectCost.vue
浏览文件 @ ed85259b
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
</tr> </tr>
<tr v-for="(item, index) in response" :key="index"> <tr v-for="(item, index) in response" :key="index">
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.app_count.toLocaleString() }}</td> <td>{{ formatValue(item.app_count) }}</td>
<td>{{ item.app_cost.toLocaleString() }}</td> <td>{{ formatValue(item.app_cost) }}</td>
<td>{{ item.pay_count.toLocaleString() }}</td> <td>{{ formatValue(item.pay_count) }}</td>
<td>{{ item.conversion_rate }}</td> <td>{{ item.conversion_rate }}</td>
</tr> </tr>
</table> </table>
...@@ -33,6 +33,9 @@ export default { ...@@ -33,6 +33,9 @@ export default {
api.getProjectCost().then(response => { api.getProjectCost().then(response => {
this.response = response this.response = response
}) })
},
formatValue(value = 0) {
return value.toLocaleString()
} }
}, },
beforeMount() { beforeMount() {
......
src/components/projectRanking.vue
浏览文件 @ ed85259b
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
</template> </template>
<script> <script>
import sortBy from 'lodash.sortby'
import * as api from '@/api/index' import * as api from '@/api/index'
export default { export default {
name: 'MonthlyIncome', name: 'MonthlyIncome',
...@@ -13,30 +14,27 @@ export default { ...@@ -13,30 +14,27 @@ export default {
} }
}, },
computed: { computed: {
colors() {
return this.$store.state.colors
},
option() { option() {
const axisData = [] const axisData = []
const seriesData = [] const seriesData = []
this.response.forEach(item => { this.response.forEach(item => {
const color = this.colors[item.project_name]
axisData.push(item.project_name) axisData.push(item.project_name)
seriesData.push({ value: item.apply_count, name: item.project_name }) seriesData.push({ value: item.apply_count, name: item.project_name, itemStyle: { color } })
}) })
const option = { const option = {
tooltip: { tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
trigger: 'axis', grid: { left: '45px', right: '40px', top: 0, bottom: 0 },
axisPointer: {
type: 'none'
}
},
grid: { left: '60px', top: 0, right: '60px', bottom: 0 },
xAxis: { show: false, textAlign: 'left' }, xAxis: { show: false, textAlign: 'left' },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: axisData, data: axisData,
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
nameTextStyle: { nameTextStyle: { align: 'left' }
align: 'left'
}
}, },
textStyle: { color: '#fff' }, textStyle: { color: '#fff' },
series: [ series: [
...@@ -52,7 +50,6 @@ export default { ...@@ -52,7 +50,6 @@ export default {
} }
] ]
} }
return option return option
} }
}, },
...@@ -62,7 +59,7 @@ export default { ...@@ -62,7 +59,7 @@ export default {
api api
.getYearApply() .getYearApply()
.then(response => { .then(response => {
this.response = response this.response = sortBy(response, item => item.apply_count)
}) })
.finally(() => { .finally(() => {
this.loading = false this.loading = false
...@@ -74,9 +71,3 @@ export default { ...@@ -74,9 +71,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
.chart {
height: 120px;
}
</style>
src/components/weekIncome.vue
浏览文件 @ ed85259b
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
position: 'top', position: 'top',
color: '#fff', color: '#fff',
formatter({ value }) { formatter({ value }) {
return value / 10000 return (value / 10000).toFixed()
} }
}, },
itemStyle: { color: 'transparent' } itemStyle: { color: 'transparent' }
...@@ -94,14 +94,15 @@ export default { ...@@ -94,14 +94,15 @@ export default {
}, },
option() { option() {
return { return {
title: { text: '单位：万', textStyle: { fontSize: 12, color: '#0A7199' }, padding: 0 },
// tooltip: { trigger: 'axis', axisPointer: { type: 'none' } }, // tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
grid: { left: 0, top: '10%', right: 0, bottom: '12%', containLabel: true }, grid: { left: 0, top: '40px', right: 0, bottom: '40px', containLabel: true },
legend: { legend: {
bottom: '10px', bottom: '10px',
itemWidth: 13, itemWidth: 10,
itemHeight: 13, itemHeight: 10,
icon: 'rect', icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 } textStyle: { color: '#F3F3F3' }
// data: this.dataset.legend // data: this.dataset.legend
}, },
yAxis: { yAxis: {
...@@ -149,6 +150,6 @@ export default { ...@@ -149,6 +150,6 @@ export default {
<style scoped> <style scoped>
.chart { .chart {
height: 300px; height: 100%;
} }
</style> </style>
src/components/yearIncome.vue
浏览文件 @ ed85259b
<template> <template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" /> <v-chart class="chart" :option="option" :autoresize="true" :loading="loading" ref="chart" />
</template> </template>
<script> <script>
...@@ -9,15 +9,20 @@ export default { ...@@ -9,15 +9,20 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
response: [] response: [],
height: 0
} }
}, },
computed: { computed: {
colors() {
return this.$store.state.colors
},
option() { option() {
let total = 0 let total = 0
const data = this.response.map(item => { const data = this.response.map(item => {
total += item.all_pay_money total += item.all_pay_money
return { value: item.all_pay_money, name: item.project_name } const color = this.colors[item.project_name]
return { value: item.all_pay_money, name: item.project_name, itemStyle: { color } }
}) })
const option = { const option = {
title: { title: {
...@@ -25,29 +30,31 @@ export default { ...@@ -25,29 +30,31 @@ export default {
text: `{value|${(total / 10000).toFixed(2)}万}`, text: `{value|${(total / 10000).toFixed(2)}万}`,
top: 'center', top: 'center',
textStyle: { textStyle: {
rich: { value: { color: '#fff', fontSize: 20, width: 160, align: 'center' } } rich: { value: { color: '#fff', fontSize: 16, width: this.height - 20, align: 'center' } }
} }
}, },
tooltip: { trigger: 'item' }, tooltip: { trigger: 'item' },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: '200px', left: this.height + 30,
top: 'middle', top: 'middle',
itemWidth: 14, itemWidth: 10,
itemHeight: 14, itemHeight: 10,
icon: 'rect', icon: 'rect',
textStyle: { color: '#fff', fontSize: 16, padding: [0, 0, 0, 12] } rigth: 0,
textStyle: { color: '#fff' }
}, },
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['60%', '90%'], radius: ['60%', '90%'],
width: 160, left: '0',
height: 160, width: this.height - 20,
// height: this.height,
stillShowZeroSum: false, stillShowZeroSum: false,
avoidLabelOverlap: false, avoidLabelOverlap: false,
zlevel: 1, zlevel: 1,
label: { formatter: '{d}%', color: '#fff', fontSize: 16 }, label: { formatter: '{d}%', color: '#fff' },
labelLayout({ dataIndex }) { labelLayout({ dataIndex }) {
return { return {
x: 340, x: 340,
...@@ -75,16 +82,20 @@ export default { ...@@ -75,16 +82,20 @@ export default {
.finally(() => { .finally(() => {
this.loading = false this.loading = false
}) })
},
getChartHeight() {
this.height = this.$refs.chart.$el.offsetHeight
} }
}, },
beforeMount() { beforeMount() {
this.getData() this.getData()
},
mounted() {
this.getChartHeight()
window.addEventListener('resize', this.getChartHeight)
},
destroyed() {
window.removeEventListener('resize', this.getChartHeight)
} }
} }
</script> </script>
<style scoped>
.chart {
height: 160px;
}
</style>
src/index.html
浏览文件 @ ed85259b
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<title>紫荆教育决策数据看板</title> <title>决策数据看板</title>
<meta <meta
name="viewport" name="viewport"
id="viewport" id="viewport"
......
src/main.js
浏览文件 @ ed85259b
...@@ -5,8 +5,14 @@ import App from './app.vue' ...@@ -5,8 +5,14 @@ import App from './app.vue'
import ECharts from 'vue-echarts' import ECharts from 'vue-echarts'
import 'echarts' import 'echarts'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// register globally (or you can do it locally) // register globally (or you can do it locally)
Vue.component('v-chart', ECharts) Vue.component('v-chart', ECharts)
Vue.use(VueAwesomeSwiper /* { default options with global component } */)
// import BeforeEnter from './utils/beforeEnter' // import BeforeEnter from './utils/beforeEnter'
// const before = new BeforeEnter() // const before = new BeforeEnter()
......
src/pages/home/index.vue
浏览文件 @ ed85259b
<template> <template>
<div> <div class="home">
<month-dashboard :data="month" style="margin-bottom: 24px"></month-dashboard> <swiper class="swiper" :options="swiperOption">
<card title="周营收平台走势及预测（万）"> <swiper-slide>
<week-income></week-income> <div class="h100">
</card> <card>
<card title="各项目月度营收">
<month-income :data="month"></month-income> <month-income :data="month"></month-income>
</card> </card>
<card title="各项目月度投入产出比"> </div>
<month-complete-rate :data="month"></month-complete-rate> </swiper-slide>
</card> <swiper-slide>
<card title="营收实时滚动信息"> <div class="h100">
<now-income></now-income> <card title="项目营收走势及预测（本周）">
<week-income></week-income>
</card> </card>
<card title="周营收平台走势及预测（万）"> <card title="项目线上投入产出比（本月）">
<project-cost></project-cost> <month-complete-rate :data="month"></month-complete-rate>
</card> </card>
<card title="年度总营收及各项目占比"> </div>
</swiper-slide>
<swiper-slide>
<div class="h100">
<card title="项目总营收占比（本年度）">
<year-income></year-income> <year-income></year-income>
</card> </card>
<card title="项目报名数据排名"> <card title="项目报名数据排名（本年度）">
<project-ranking></project-ranking> <project-ranking></project-ranking>
</card> </card>
<card title="各月营收走势"> <card title="营收走势（本年度）">
<month-income-trend></month-income-trend> <month-income-trend></month-income-trend>
</card> </card>
<card title="缴费结构"> </div>
<payment-structure></payment-structure> </swiper-slide>
</card> <div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div> </div>
</template> </template>
...@@ -71,6 +76,11 @@ export default { ...@@ -71,6 +76,11 @@ export default {
}, },
data() { data() {
return { return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
}
},
month: {} month: {}
} }
}, },
...@@ -88,7 +98,30 @@ export default { ...@@ -88,7 +98,30 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.card { .h100 {
margin-bottom: 24px; display: flex;
flex-direction: column;
height: calc(100vh - 32px);
}
.h100 .card {
margin-top: 14px;
flex: 1;
}
.swiper-slide {
height: 100vh;
}
.swiper {
.swiper-pagination {
bottom: 10px !important;
}
.swiper-pagination-bullet {
background-color: #c0c0c0;
opacity: 1;
}
.swiper-pagination-bullet-active {
width: 20px;
background-color: #03fdf0;
border-radius: 4px;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论