Skip to content

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

update

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