Skip to content

C
center-chart-show-pc
提交 30ac805c authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

updata

上级 0143b5b7
隐藏空白字符变更
内嵌 并排
正在显示 包含 1886 行增加 和 24 行删除
.config.dev.js
浏览文件 @ 30ac805c
module.exports = {
domain: 'dev.ezijing.com',
url: 'https://ehall2.ezijing.com/api',
url: 'http://data-view.ezijing.com',
isEnableToIphoneDebugger: false,
// apiBaseURL: '//demo-login.ezijing.com/',
webpack: {
......
.gitignore 0 → 100644
浏览文件 @ 30ac805c
.DS_store
node_modules
client-dist
package-lock.json
浏览文件 @ 30ac805c
......@@ -3679,6 +3679,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.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
......@@ -3743,6 +3751,14 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
......@@ -8588,6 +8604,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
"integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
......@@ -9553,6 +9574,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.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
......@@ -9774,6 +9800,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.npm.taobao.org/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1609732765587&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftable%2Fdownload%2Ftable-5.4.6.tgz",
......@@ -10598,6 +10633,21 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614651009&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
},
"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=="
},
"vue-echarts": {
"version": "5.0.0-beta.0",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
"integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
"requires": {
"core-js": "^3.4.4",
"lodash": "^4.17.15",
"resize-detector": "^0.1.10"
}
},
"vue-eslint-parser": {
"version": "7.6.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
......@@ -11529,6 +11579,11 @@
"dev": true
}
}
},
"zrender": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
package.json
浏览文件 @ 30ac805c
......@@ -83,6 +83,10 @@
"vue-loader": "^15.9.3",
"vue-meta-info": "^0.1.7",
"vue-router": "^3.4.6",
"vue-template-compiler": "^2.6.12"
"vue-template-compiler": "^2.6.12",
"echarts": "^4.7.0",
"vue-echarts": "^5.0.0-beta.0",
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1"
}
}
src/action/Chart210323Action.js 0 → 100644
浏览文件 @ 30ac805c
import BaseACTION from './base_action'
import { Chart210323 } from '@api'
export default class Chart210323Action extends BaseACTION {
/* get传输方式 */
getMonthProjectIncome (id) {
return Chart210323.getMonthProjectIncome(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getYearPlanCompletion (id) {
return Chart210323.getYearPlanCompletion(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getMonthRevenueTrend (id) {
return Chart210323.getMonthRevenueTrend(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getRealTimePay (id) {
return Chart210323.getRealTimePay(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getProjectAppCost (id) {
return Chart210323.getProjectAppCost(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getYearRankingApply (id) {
return Chart210323.getYearRankingApply(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getChannelPayMoney (id) {
return Chart210323.getChannelPayMoney(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
/* get传输方式 */
getProjectPayWeek (id) {
return Chart210323.getProjectPayWeek(id).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
})
}
}
src/action/TestAction.js
浏览文件 @ 30ac805c
import BaseACTION from './base_action'
import { Test } from '@api'
import { Chart210323 } from '@api'
export default class TestAction extends BaseACTION {
export default class Chart210323Action extends BaseACTION {
/* get传输方式 */
getTest (id) {
return Test.getTest(id).then(res => {
return Chart210323.getTest(id).then(res => {
return res || { test: this.getVueInstance().$t('action.interface') }
}).catch(res => {
return res || { test: this.getVueInstance().$t('action.interface') }
......@@ -13,7 +13,7 @@ export default class TestAction extends BaseACTION {
/* post传输方式 */
postTest (obj = {}) {
return Test.postTest(obj).then(res => {
return Chart210323.postTest(obj).then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
......@@ -22,7 +22,7 @@ export default class TestAction extends BaseACTION {
/* 当前登录用户，检测是否该系统有权限 */
getInfo () {
return Test.getInfo().then(res => {
return Chart210323.getInfo().then(res => {
return res || { test: 'OK' }
}).catch(res => {
return res || { test: 'OK' }
......
src/action/index.js
浏览文件 @ 30ac805c
import TestAction from './TestAction'
import Chart210323Action from './Chart210323Action'
const Test = new TestAction()
const Chart210323 = new Chart210323Action()
const cAction = {
Test
Test,
Chart210323
}
export default cAction
src/api/chart210323.js 0 → 100644
浏览文件 @ 30ac805c
import BaseAPI from './base_api'
export default class Chart210323API extends BaseAPI {
/**
* get传输方式
* @param {[string]} id resource_id
*/
getMonthProjectIncome = () => this.get('/v1/big_screen_marketing/now_month_project_income', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getYearPlanCompletion = () => this.get('/v1/big_screen_marketing/year_plan_completion', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getMonthRevenueTrend = () => this.get('/v1/big_screen_marketing/every_month_project_income', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getRealTimePay = () => this.get('/v1/big_screen_marketing/real_time_pay', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getProjectAppCost = () => this.get('/v1/big_screen_marketing/project_app_cost', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getYearRankingApply = () => this.get('/v1/big_screen_marketing/year_project_apply', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getChannelPayMoney = () => this.get('/v1/big_screen_marketing/channel_pay_money', {})
/**
* get传输方式
* @param {[string]} id resource_id
*/
getProjectPayWeek = () => this.get('/v1/big_screen_marketing/project_pay_week ', {})
}
src/api/index.js
浏览文件 @ 30ac805c
import TestAPI from './test_api'
import Chart210323API from './chart210323'
const Test = new TestAPI(webConf)
const Chart210323 = new Chart210323API(webConf)
export {
Test
Test,
Chart210323
}
src/components/beforeEnter/Before.js
浏览文件 @ 30ac805c
import cAction from '@action'
// import cAction from '@action'
import { Message } from 'element-ui'
// import { Message } from 'element-ui'
export default class Before {
constructor (opt) {
......@@ -23,12 +23,13 @@ export default class Before {
/* 获取用户信息 */
isLogin () {
if (window.G.UserInfo) return true
return cAction.Test.getInfo().then(res => {
window.G.UserInfo = res
return true
}).catch(res => {
Message({ type: 'error', message: res.message })
return false
})
return true
// return cAction.Test.getInfo().then(res => {
// window.G.UserInfo = res
// return true
// }).catch(res => {
// Message({ type: 'error', message: res.message })
// return false
// })
}
}
src/components/chart/card.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="border-box">
<div class="content-box">
<div class="tit" v-if="title">{{ title }}</div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
devClass: String
}
}
</script>
<style lang="scss">
.border-box{
width: 100%;
height: 100%;
// padding: 3px;
box-sizing: border-box;
background-image: linear-gradient(56deg, #162B85, #20B4E2, #000F4A, #172987);
border-radius: 20px;
position: relative;
&.after-w{
&::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #000;
width: 100%;
height: 98%;
z-index: 9999;
transform: translate(-50%, -50%);
border-radius: 20px;
}
}
&::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #000;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(.99, .98);
border-radius: 20px;
}
.content-box{
position: relative;
z-index: 9;
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(0deg, rgba(29,53,122,0.5) 0%, rgba(23, 41, 136, 0) 100%);
overflow-y: scroll;
&::-webkit-scrollbar{
// width: 4px;
// height: 4px;
display: none;
}
// &::-webkit-scrollbar-button{
// width: 0;
// height: 0;
// }
// &::-webkit-scrollbar-track{
// }
// &::-webkit-scrollbar-thumb{
// border-radius: 8px;
// background-color: rgba(0, 203, 255, .5);
// }
// &::-webkit-scrollbar-thumb:hover {
// background-color: rgba(0, 203, 255, 1);
// }
// &::-webkit-scrollbar-thumb:active {
// background-color: rgba(0, 203, 255, 1);
// }
.tit{
padding: 2% 0 0 4.1%;
box-sizing: border-box;
font-size: 18px;
color: #F3F3F3;
}
}
}
</style>
src/components/chart/chart210323/monthCompleteRate.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="echarts-box">
<v-chart :options="option"/>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array
}
},
data () {
return {
option: {
}
}
},
beforeMount () {
const chartData = {
project: [],
payMoney: [],
cost: []
}
this.data.map(item => {
chartData.project.unshift(item.project_name)
chartData.payMoney.unshift(item.pay_money.toFixed(2))
chartData.cost.unshift(item.cost.toFixed(2))
})
this.initChart(chartData)
},
methods: {
initChart(data) {
this.option = {
legend: {
data: ['收入', '投入']
},
grid: {
top: '15%',
left: '4%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
data: data.project,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#0A7199',
padding: [0, 15, 0, 0]
}
},
series: [
{
label: {
show: true,
color: '#E59700',
position: 'right',
fontSize: 11
},
name: '收入',
type: 'bar',
data: data.payMoney,
barMaxWidth: '8',
itemStyle: {
barBorderRadius: [20],
color: {
type: 'linear',
colorStops: [
{ offset: 0, color: '#073547' },
{ offset: 1, color: '#1B98BD' }
]
}
}
},
{
label: {
color: '#E59700',
show: true,
position: 'right',
fontSize: 11
},
name: '投入',
type: 'bar',
data: data.cost,
barMaxWidth: '8',
itemStyle: {
barBorderRadius: [20],
color: {
type: 'linear',
colorStops: [
{ offset: 0, color: '#3DAC34' },
{ offset: 1, color: '#0D4708' }
]
}
}
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts-box{
width: 100%;
height: 80%;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
src/components/chart/chart210323/monthIncome.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div>
<v-chart :options="option"/>
</div>
</template>
<script>
// import action from '@action'
export default {
props: {
data: {
type: Object,
default: () => { return {} }
}
},
data () {
return {
option: {
}
}
},
mounted () {
// console.log(this.data)
this.initChart()
},
methods: {
initChart() {
this.option = {
angleAxis: {
show: false
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%'
},
radiusAxis: {
// show: false,
type: 'category',
data: this.data.projectName,
z: 10,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
textStyle: {
color: '#fff'
},
polar: {
},
series: [{
type: 'bar',
barWidth: 10,
data: this.data.data,
coordinateSystem: 'polar',
emphasis: {
focus: 'series'
}
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}
}
}
}
// this.data.projectName
}
</script>
<style lang="scss" scoped>
.echarts {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 115%;
height: 115%;
}
</style>
src/components/chart/chart210323/monthRevenueTrend.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="echarts-box">
<v-chart :options="option"/>
</div>
</template>
<script>
import action from '@action'
export default {
data () {
return {
getColor: {
sofia: 'rgba(252, 101, 75, 1)',
kelley: 'rgba(52, 166, 210, 1)',
cu: 'rgba(152, 146, 240, 1)',
ciis: 'rgba(239, 177, 174, 1)',
shms: 'rgba(249, 189, 115, 1)'
},
option: {
}
}
},
beforeMount () {
this.getData()
},
methods: {
getData() {
action.Chart210323.getMonthRevenueTrend().then(res => {
const projectName = []
res.data.forEach(item => {
if (!projectName.includes(item.project_name)) {
projectName.push(item.project_name)
}
})
projectName.sort()
const data = []
projectName.map((item, index) => {
data.push([])
res.data.find(cItem => {
cItem.project_name === item && data[index].push(cItem)
})
})
this.setChartData(data)
}).finally(res => {
// console.log('finally 可用。')
})
},
setChartData(data) {
// 定义x y数据
const cData = {
xData: [],
yData: []
}
// 图表柱子上面的总数
const totalNum = {}
// x轴数据
data[0].map(item => {
cData.xData.push(item.pay_month)
totalNum[item.pay_month] = 0
})
// y 轴数据
data.map((item, index) => {
// 柱子的默认参数
const bar = {
name: item[0].project_name,
type: 'bar',
stack: 'total',
emphasis: {
focus: 'series'
},
data: [],
itemStyle: {
color: this.getColor[item[0].project_name]
},
barMaxWidth: '20'
}
item.map(cItem => {
bar.data.push(cItem.pay_money)
totalNum[cItem.pay_month] += cItem.pay_money
})
// 总数显示设置
bar.label = {
show: !!(index === data.length - 1),
position: 'top',
color: '#fff',
formatter: function(c) {
return totalNum[c.name]
}
}
cData.yData.push(bar)
})
this.initChart(cData)
},
initChart(data) {
this.option = {
legend: {
top: 'bottom',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 }
},
// tooltip: { trigger: 'axis', axisPointer: {} },
grid: {
top: '8%',
left: '3%',
right: '5%',
bottom: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.xData,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#0A7199'
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#0A7199'
}
},
series: data.yData
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts-box{
width: 100%;
height: 80%;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
src/components/chart/chart210323/nowApply.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="apply-inner">
<div class="nav-title-apply">
<div>项目</div>
<div>留资总数</div>
<div>单条留资成本</div>
<div>已缴报名费</div>
<div>报名后均转换率</div>
</div>
<ul class="apply-content">
<template v-for="(item, index) in dataList">
<li :key="index">
<div>{{ item.project_name }}</div>
<div>{{ item.app_count }}</div>
<div>{{ item.app_cost }}</div>
<div>{{ item.apply_count }}</div>
<div>{{ item.conversion_rate }}</div>
</li>
</template>
</ul>
</div>
</template>
<script>
import action from '@action'
export default {
name: 'MonthlyIncome',
data() {
return {
dataList: []
}
},
mounted() {
this.getData()
},
methods: {
getData(n) {
action.Chart210323.getProjectAppCost().then(res => {
this.dataList = res.data
}).finally(res => {
// console.log('finally 可用。')
})
}
}
// beforeMount() {
// this.getData()
// }
}
</script>
<style scoped lang="scss">
.apply-inner{
padding: 0 5%;
height: 100%;
overflow-y: scroll;
box-sizing: border-box;
&::-webkit-scrollbar{
// width: 4px;
// height: 4px;
display: none;
}
// &::-webkit-scrollbar-button{
// width: 0;
// height: 0;
// }
// &::-webkit-scrollbar-track{
// }
// &::-webkit-scrollbar-thumb{
// border-radius: 8px;
// background-color: rgba(0, 203, 255, .5);
// }
// &::-webkit-scrollbar-thumb:hover {
// background-color: rgba(0, 203, 255, 1);
// }
// &::-webkit-scrollbar-thumb:active {
// background-color: rgba(0, 203, 255, 1);
// }
}
.nav-title-apply{
display: flex;
div{
line-height: 39px;
color: #34A6D2;
text-align: center;
width: 20%;
height: 39px;
font-size: 16px;
}
border-bottom: 1px solid rgba(52, 166, 210, .4);
}
.apply-content{
li{
display: flex;
height: 39px;
border-bottom: 1px solid rgba(52, 166, 210, .4);
div{
width: 20%;
line-height: 39px;
color: #fff;
text-align: center;
font-size: 16px;
}
}
}
</style>
src/components/chart/chart210323/nowIncome.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="inner">
<ul class="nav-title">
<li>时间</li>
<li>姓名</li>
<li>类型</li>
<li>项目</li>
<li>金额（元）</li>
</ul>
<div class="list-content" id="scroll-set-h">
<swiper ref="mySwiper" :options="swiperOption" v-if="isSwiperShow">
<template v-for="(item, index) in dataList">
<swiper-slide :key="index">
<ul class="slide">
<template v-for="(cItem, cIndex) in item">
<li :key="'c' + cIndex" :class="cItem.pay_type == '报名费' && 'active'">
<div>{{ cItem.pay_time }}</div>
<div>{{ cItem.user_name }}</div>
<div>{{ cItem.pay_type }}</div>
<div>{{ cItem.project_name }}</div>
<div>{{ cItem.pay_money }}</div>
</li>
</template>
</ul>
</swiper-slide>
</template>
</swiper>
</div>
</div>
</template>
<script>
// import * as api from '@/api/index'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import action from '@action'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
name: 'MonthlyIncome',
data() {
return {
isSwiperShow: false,
swiperOption: {
// slidesPerView: 'auto',
// spaceBetween: 79,
notNextTick: true,
freeMode: true,
setWrapperSize: true,
speed: 2000,
observer: true,
observeParents: true,
loop: true,
autoplay: {
delay: 1,
autoplayDisableOnInteraction: false
},
direction: 'vertical'
},
dataList: []
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
const countH = $('.chart-l-b').outerHeight() - $('.chart-l-b .tit').outerHeight() - $('.chart-l-b .nav-title').outerHeight() - 20
$('#scroll-set-h').height(countH)
this.$nextTick(() => {
setTimeout(() => {
this.getData(Math.round(countH / 35))
}, 1000)
})
},
methods: {
getData(n) {
action.Chart210323.getRealTimePay().then(res => {
this.dataList = []
// 填充数据
for (let i = 0; i < res.data.length / n; i++) {
this.dataList.push([])
}
// push到二维数组里
res.data.map((item, index) => {
this.dataList[parseInt(index / n)].push(item)
})
// 检查最后一个数组是不是少item
const lengthNum = this.dataList[this.dataList.length - 1].length
if (lengthNum !== n) {
for (let i = 0; i < n - lengthNum; i++) {
this.dataList[this.dataList.length - 1].push(res.data[i])
}
}
this.isSwiperShow = true
}).finally(res => {
// console.log('finally 可用。')
})
}
},
beforeMount() {
// this.getData()
}
}
</script>
<style scoped lang="scss">
.inner{
padding: 0 4.1%;
box-sizing: border-box;
}
.nav-title{
display: flex;
font-size: 16px;
color: #34A6D2;
padding-top: 2%;
justify-content: space-between;
li{
text-align: center;
&:nth-child(1){
width: 20%;
}
&:nth-child(2){
width: 20%;
}
&:nth-child(3){
width: 20%;
}
&:nth-child(4){
width: 20%;
}
&:nth-child(5){
white-space:nowrap;
width: 20%;
}
}
}
.list-content{
width: 100%;
height: 100px;
.slide{
// padding-top: 10px;
width: 100%;
li{
width: 100%;
padding-top: 15px;
display: flex;
justify-content: space-between;
&:nth-child(1){
// padding-top: 0;
}
&.active{
div{
color: #fff;
}
}
div{
color: #E59700;
text-align: center;
&:nth-child(1){
width: 20%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(2){
width: 20%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(3){
width: 20%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(4){
width: 20%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
&:nth-child(5){
width: 20%;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
}
}
}
::v-deep .swiper-container{
height: 100%;
// margin: 0 auto;
.swiper-wrapper{
.swiper-slide{
// padding-bottom: 15px;
width: auto !important;
}
}
}
}
</style>
src/components/chart/chart210323/weekRevenueForecast.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="echarts-box">
<v-chart :options="option"/>
</div>
</template>
<script>
import action from '@action'
export default {
data () {
return {
getColor: {
sofia: 'rgba(252, 101, 75, 1)',
kelley: 'rgba(52, 166, 210, 1)',
cu: 'rgba(152, 146, 240, 1)',
ciis: 'rgba(239, 177, 174, 1)',
shms: 'rgba(249, 189, 115, 1)'
},
option: {
}
}
},
beforeMount () {
this.getData()
},
methods: {
getData() {
action.Chart210323.getProjectPayWeek().then(res => {
const projectName = []
res.data.forEach(item => {
if (!projectName.includes(item.project_name)) {
projectName.push(item.project_name)
}
})
projectName.sort()
const data = []
projectName.map((item, index) => {
data.push([])
res.data.find(cItem => {
cItem.project_name === item && data[index].push(cItem)
})
})
this.setChartData(data)
}).finally(res => {
// console.log('finally 可用。')
})
},
setChartData(data) {
// 定义x y数据
const cData = {
xData: [],
yData: []
}
// 图表柱子上面的总数
const totalNum = {}
// x轴数据
data[0].map(item => {
cData.xData.push(item.week)
totalNum[item.week] = 0
})
// y 轴数据
data.map((item, index) => {
// 柱子的默认参数
const bar = {
name: item[0].project_name,
type: 'bar',
stack: 'total',
emphasis: {
focus: 'series'
},
data: [],
barMaxWidth: '20',
itemStyle: {
color: this.getColor[item[0].project_name]
}
}
item.map(cItem => {
// console.log(cItem)
totalNum[cItem.week] += cItem.pay_money
if (cItem.week === '当前周预测' || cItem.week === '当前周实际') {
bar.data.push({
value: cItem.pay_money,
itemStyle: {
normal: {
barBorderColor: this.getColor[item[0].project_name],
barBorderWidth: 1,
barBorderRadius: 0,
borderType: 'dotted',
color: 'rgba(0, 0, 0, 0.1)'
}
}
})
} else {
bar.data.push({
value: cItem.pay_money,
itemStyle: {
normal: {
color: this.getColor[item[0].project_name]
}
}
})
}
})
// 总数显示设置
bar.label = {
show: !!(index === data.length - 1),
position: 'top',
color: '#fff',
formatter: function(c) {
return totalNum[c.name]
}
}
// console.log(cData.yData, '-123')
cData.yData.push(bar)
})
this.initChart(cData)
},
initChart(data) {
this.option = {
legend: {
top: 'bottom',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 }
},
// tooltip: { trigger: 'axis', axisPointer: {} },
grid: {
top: '15%',
left: '3%',
right: '5%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.xData,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#0A7199',
interval: 0,
rotate: 40
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#0A7199'
}
},
series: data.yData
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts-box{
width: 100%;
height: 80%;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
src/components/chart/chart210323/yearApply.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="echarts">
<v-chart :options="option"/>
</div>
</template>
<script>
import action from '@action'
export default {
props: {
data: {
type: Object,
default: () => { return {} }
}
},
data () {
return {
option: {},
getColor: {
0: 'rgba(252, 101, 75, 1)',
1: 'rgba(52, 166, 210, 1)',
2: 'rgba(152, 146, 240, 1)',
3: 'rgba(239, 177, 174, 1)',
4: 'rgba(249, 189, 115, 1)'
}
}
},
mounted () {
this.getData()
},
methods: {
getData() {
action.Chart210323.getChannelPayMoney().then(res => {
const data = []
res.data.map((item, index) => {
data.push({
value: item.pay_money,
name: item.channel_name,
itemStyle: {
color: this.getColor[index]
}
})
})
this.initChart(data)
}).finally(res => {
// console.log('finally 可用。')
})
},
initChart(data) {
this.option = {
series: [
{
name: '访问来源',
type: 'pie',
data: data,
radius: '70%',
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 85%;
}
</style>
src/components/chart/chart210323/yearIncome.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<div class="income-box">
<div class="echarts-box">
<v-chart :options="option"/>
<div class="allMoney">{{ (allMoney / 10000).toFixed(2) }}万</div>
</div>
<ul class="tips-box">
<template v-for="(item, index) in tipsData">
<li :key="index">
<div :class="`block col-${item.projectName}`"></div>
<div class="project-name">{{ item.projectName }}</div>
<div class="num">{{ item.num }}%</div>
</li>
</template>
</ul>
</div>
</template>
<script>
import action from '@action'
export default {
props: {
data: {
type: Object,
default: () => { return {} }
}
},
data () {
return {
getColor: {
sofia: 'rgba(252, 101, 75, 1)',
kelley: 'rgba(52, 166, 210, 1)',
cu: 'rgba(152, 146, 240, 1)',
ciis: 'rgba(239, 177, 174, 1)',
shms: 'rgba(249, 189, 115, 1)'
},
option: {
},
tipsData: [],
allMoney: 0
}
},
mounted () {
this.getData()
},
methods: {
getData() {
const data = []
action.Chart210323.getYearPlanCompletion().then(res => {
let allMoney = 0
res.data.map(item => {
allMoney += item.all_pay_money
this.allMoney += item.all_pay_money
})
// console.log(allMoney)
res.data.map(item => {
data.push({
value: item.all_pay_money,
name: item.project_name,
itemStyle: {
color: this.getColor[item.project_name]
}
})
this.tipsData.push({
projectName: item.project_name,
num: Math.round(item.all_pay_money / allMoney * 100)
})
})
this.initChart(data)
// console.log(this.tipsData)
}).finally(res => {
// console.log('finally 可用。')
})
},
initChart(data) {
this.option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: 'rgb(0, 0, 0)',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: data
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.echarts-box{
width: 50%;
height: 90%;
position: relative;
}
.echarts{
width: 100%;
height: 100%;
}
.income-box{
width: 100%;
height: 100%;
display: flex;
// align-items: center;
.tips-box{
padding-top: 5%;
transform: translateX(-20px);
li{
width: 142px;
display: flex;
margin-bottom: 10px;
.block{
width: 13px;
height: 13px;
&.col-sofia{
background: rgba(252, 101, 75, 1);
}
&.col-kelley{
background: rgba(52, 166, 210, 1);
}
&.col-cu{
background: rgba(152, 146, 240, 1);
}
&.col-ciis{
background: rgba(239, 177, 174, 1);
}
&.col-shms{
background: rgba(249, 189, 115, 1);
}
}
.project-name{
font-size: 17px;
color: #F3F3F3;
line-height: 13px;
margin-left: 12px;
}
.num{
font-size: 16px;
color: #F3F3F3;
line-height: 13px;
margin-left: auto;
}
}
}
}
.allMoney{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
</style>
src/components/chart/chart210323/yearRankingApply.vue 0 → 100644
浏览文件 @ 30ac805c
<template>
<ul class="rate-box">
<template v-for="(item, index) in data">
<li :key="index">
<div class="name">{{ item.project_name }}</div>
<div class="progress-box">
<div class="block" :style="setStyle(item.rateNum)"></div>
</div>
<div class="num">{{ item.apply_count }}</div>
</li>
</template>
</ul>
</template>
<script>
import action from '@action'
export default {
data () {
return {
data: []
}
},
mounted () {
this.getData()
},
methods: {
getData() {
action.Chart210323.getYearRankingApply().then(res => {
const sortData = res.data.sort((a, b) => parseFloat(b.apply_count) - parseFloat(a.apply_count))
sortData.map(item => {
item.rateNum = parseInt(item.apply_count / sortData[0].apply_count * 100)
this.data.push(item)
})
}).finally(res => {
// console.log('finally 可用。')
})
}
},
computed: {
setStyle() {
return (n) => {
return `width: ${n}%`
}
}
}
}
</script>
<style lang="scss" scoped>
.rate-box{
width: 90%;
margin: 0 auto;
// padding-top: 30px;
li{
margin-top: 3%;
display: flex;
justify-content: center;
.name{
width: 18%;
font-size: 14px;
color: #0A7199;
line-height: 12px;
}
.progress-box{
width: 95%;
height: 12px;
// border: 1px solid #0A7199;
border-radius: 5px;
box-sizing: border-box;
.block{
width: 50%;
height: 8px;
background: rgba(52, 166, 210, 1);
border-radius: 3px;
margin: 1px 0;
}
}
.num{
width: 18%;
text-align: right;
font-size: 14px;
color: #E59700;
line-height: 12px;
}
}
}
</style>
src/main.js
浏览文件 @ 30ac805c
......@@ -8,7 +8,20 @@ import App from './app.vue' // 初始化 vue页面
import './style.scss' // 公共样式
import MetaInfo from 'vue-meta-info'
import Element from 'element-ui'
import modules from './modules'
import ECharts from 'vue-echarts'
import 'echarts'
// import modules from './modules'
// import Echarts from 'vue-echarts'
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/chart/line'
// import 'echarts/lib/chart/pie'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/legend'
// import 'echarts/lib/component/markPoint'
// import 'echarts/lib/component/markLine'
// import 'echarts/lib/component/graphic'
// import 'echarts/lib/component/polar'
// import 'echarts/lib/component/radar'
import createBefore from './components/beforeEnter'
......@@ -20,7 +33,8 @@ const i18n = createI18n()
Vue.use(MetaInfo)
Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })
Vue.use(modules, { i18n })
Vue.component('v-chart', ECharts)
// Vue.use(modules, { i18n })
/* 设置全局变量 */
window.G = Vue.prototype.$GLOBAL = {
......
src/modules/test-module/src/TestModule.vue
浏览文件 @ 30ac805c
......@@ -13,7 +13,7 @@ export default {
componentName: 'TestModule',
mounted () {
TestModule.getTestInfo().then(res => {
console.log('模块接口调用成功', res)
// console.log('模块接口调用成功', res)
})
}
}
......
src/pages/chart/chart-210323.vue
浏览文件 @ 30ac805c
<template>
<div class="chart-box">
<div class="title">紫荆教育决策数据看板</div>
<div class="chart-content">
<div class="chart-left-box">
<div class="chart-l-t">
<card title="各项目月度营收">
<div class="chart-show">
<div class="circle-bg">
<div class="circle-bg2">
<month-income v-if="domFlag" :data="monthlyIncomeData" class="bar-polar"/>
</div>
</div>
</div>
</card>
</div>
<div class="chart-l-c">
<card title="各项目月度投入产出比">
<month-complete-rate v-if="domFlag" :data="monthCompleteRateData"></month-complete-rate>
</card>
</div>
<div class="chart-l-b">
<card title="营收实时滚动信息">
<now-income></now-income>
</card>
</div>
</div>
<div class="chart-center-box">
<div class="title-info">
<div class="tit-l">
<div class="name">总销售额</div>
<div class="num">
{{ totalData.money }}<span></span>
</div>
</div>
<div class="tit-l">
<div class="name">总成单量</div>
<div class="num">
{{ totalData.count }}<span></span>
</div>
</div>
</div>
<div class="chart-c-t">
<card title="周营收走势及预测" devClass='after-w'>
<week-revenue-forecast></week-revenue-forecast>
</card>
</div>
<div class="chart-c-b">
<card devClass='after-w'>
<now-apply></now-apply>
</card>
</div>
</div>
<div class="chart-right-box">
<div class="chart-r-t">
<card title="年度总营收及各项目占比">
<year-income></year-income>
</card>
</div>
<div class="chart-r-c">
<card title="项目报名数据排名">
<year-ranking-apply></year-ranking-apply>
</card>
</div>
<div class="chart-r-c2">
<card title="各月营收走势">
<month-revenue-trend></month-revenue-trend>
</card>
</div>
<div class="chart-r-b">
<card title="缴费结构">
<year-apply></year-apply>
</card>
</div>
</div>
</div>
</div>
</template>
<script>
import card from '../../components/chart/card'
import monthIncome from '../../components/chart/chart210323/monthIncome'
import monthCompleteRate from '../../components/chart/chart210323/monthCompleteRate'
import nowIncome from '../../components/chart/chart210323/nowIncome'
import nowApply from '../../components/chart/chart210323/nowApply'
import yearIncome from '../../components/chart/chart210323/yearIncome'
import monthRevenueTrend from '../../components/chart/chart210323/monthRevenueTrend'
import yearApply from '../../components/chart/chart210323/yearApply'
import yearRankingApply from '../../components/chart/chart210323/yearRankingApply'
import weekRevenueForecast from '../../components/chart/chart210323/weekRevenueForecast'
import action from '@action'
import Card from '../../components/chart/card.vue'
export default {
components: {
monthIncome,
card,
monthCompleteRate,
nowIncome,
nowApply,
yearIncome,
monthRevenueTrend,
yearApply,
yearRankingApply,
weekRevenueForecast,
Card
},
data() {
return {
domFlag: false,
monthlyIncomeData: {
data: [
{
value: 0,
itemStyle: {
color: '#34A6D2'
}
}
],
projectName: ['']
},
monthCompleteRateData: [],
totalData: {
money: '',
count: ''
}
}
},
mounted() {
$('.circle-bg').css({
width: $('.chart-show').outerWidth(),
height: $('.chart-show').outerHeight()
})
this.getData()
},
methods: {
getData() {
action.Chart210323.getMonthProjectIncome().then(res => {
res.data.sell_data.map(item => {
// 营收数据遍历
this.monthlyIncomeData.data.push(
{
value: item.pay_money,
itemStyle: {
color: '#34A6D2'
}
}
)
this.monthlyIncomeData.projectName.push(item.project_name)
// 达成率数据遍历
this.monthCompleteRateData = res.data.sell_data
// 总销售额 总成单量
this.totalData.money = res.data.all_pay_money
this.totalData.count = res.data.all_pay_count
})
this.domFlag = true
}).finally(res => {
// console.log('finally 可用。')
})
}
}
}
</script>
<style lang="scss" scoped>
.chart-box{
width: 100%;
height: 100%;
.title{
position: absolute;
top: 0;
left: 0;
z-index: 9;
max-width: 1920px;
width: 100%;
height: 96px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4d17cfb3f6d4afec61a026d18b190ccf.png) center;
background-size: 100% 100%;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #F3F3F3;
line-height: 70px;
}
.chart-content{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.chart-left-box{
flex: 1;
height: 100%;
margin-left: 11px;
padding-top: 3%;
box-sizing: border-box;
.chart-l-t{
height: 38%;
position: relative;
.tit{
padding: 5% 0 0 8.5%;
font-size: 18px;
color: #F3F3F3;
}
.chart-show{
position: absolute;
// bottom: 4.5%;
top: 50%;
left: 50%;
width: 50%;
height: 0;
padding-bottom: 50%;
transform: translate(-50%, -50%);
.circle-bg{
background: url(https://zws-imgs-pub.ezijing.com/static/public/052fbafd85745805c6e0de2f7b0fca17.png);
background-size: 100% 100%;
}
.circle-bg2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9433a4b9f08be20e530f43dda3ad5998.png);
background-size: 100% 100%;
}
.bar-polar{
width: 100%;
height: 100%;
}
}
}
.chart-l-c{
height: 28%;
margin: 5% 0;
}
.chart-l-b{
height: 24%;
}
}
.chart-center-box{
width: 41%;
height: 100%;
margin: 0 18px 0 18px;
padding-top: 3%;
box-sizing: border-box;
.title-info{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
height: 17%;
&::after{
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, #142E53 0%, #16466A 10%, #5081A9 21%, #5C96BB 32%, #C0ECF9 42%, #D0E8F2 49%, #C0ECF9 56.00000000000001%, #5C96BB 65%, #5081A9 75%, #16466A 88%, #142E53 100%);
opacity: 0.23;
border-radius: 10px;
width: 100%;
height: 100%;
}
.name{
width: 100%;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #F3F3F3;
margin-top: 30px;
}
.num{
width: 100%;
text-align: center;
font-size: 36px;
// font-weight: bold;
color: #03FDF0;
padding-top: 5px;
span{
font-size: 18px;
}
}
}
.chart-c-t{
height: 45%;
margin: 2.5% 0 2.5%;
}
.chart-c-b{
height: 30%;
}
}
.chart-right-box{
flex: 1;
height: 100%;
margin-right: 12px;
padding-top: 3%;
box-sizing: border-box;
.chart-r-t{
height: 22.2%;
}
.chart-r-c{
height: 20.3%;
margin-top: 4%;
// margin: 1.3% 0 2.3%;
}
.chart-r-c2{
height: 23.1%;
margin-top: 4%;
}
.chart-r-b{
height: 23.4%;
margin-top: 4%;
}
}
}
}
// .border-box{
// width: 100%;
// height: 100%;
// padding: 3px;
// box-sizing: border-box;
// background-image: linear-gradient(56deg, #162B85, #20B4E2, #000F4A, #172987);
// border-radius: 20px;
// position: relative;
// &.after-w{
// &::after{
// content: '';
// position: absolute;
// top: 50%;
// left: 50%;
// background: #000;
// width: 99%;
// height: 98%;
// transform: translate(-50%, -50%);
// border-radius: 20px;
// }
// }
// &::after{
// content: '';
// position: absolute;
// top: 50%;
// left: 50%;
// background: #000;
// width: 98%;
// height: 98%;
// transform: translate(-50%, -50%);
// border-radius: 20px;
// }
// .content-box{
// position: relative;
// z-index: 9;
// width: 100%;
// height: 100%;
// border-radius: 20px;
// background: linear-gradient(0deg, rgba(29,53,122,0.5) 0%, rgba(23, 41, 136, 0) 100%);
// }
// }
</style>
src/router/routes.js
浏览文件 @ 30ac805c
export default [
{ path: '/', redirect: '/test' },
{ path: '/', redirect: '/charts-210323' },
/* 测试页面 */
{ path: '/test', name: 'test', component: () => import('../pages/test.vue') },
{ path: '/charts-210323', component: () => import('../pages/chart/chart-210323.vue') },
/* 如果所有页面都没找到 - 指向 */
{ path: '*', component: () => import('@/components/errorPages/404.vue') }
]
src/style.scss
浏览文件 @ 30ac805c
......@@ -4,7 +4,13 @@ html, body {
margin: 0;
height: 100%;
width: 100%;
background: #eee;
// background: linear-gradient(180deg, #1E0C0D, #1A0200);
background: #000;
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
/* 统一字体样式 */
* {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论