Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 9f3e1381 by yuanfeng
Options

左边对接接口

parent 2dc3fddf
Showing with 124 additions and 266 deletions
src/components/echarts/BarChart.vue
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
show: false show: false
}, },
grid: { grid: {
left: -10, left: 0,
right: 35, right: 35,
bottom: 0, bottom: 0,
top: 0, top: 0,
......
src/pages/index/Left.vue
...@@ -8,16 +8,16 @@ ...@@ -8,16 +8,16 @@
</div> </div>
<div class="details"> <div class="details">
<p class="percent"> <p class="percent">
<span>{{genderPercent.male}}</span> <span>{{genderPercent.malePer}}</span>
<span>{{genderPercent.female}}</span> <span>{{genderPercent.femalePer}}</span>
</p> </p>
<div class="line"> <div class="line">
<span class="male" :style={width:genderPercent.male}></span> <span class="male" :style={width:genderPercent.malePer}></span>
<span class="female" :style={width:genderPercent.female}></span> <span class="female" :style={width:genderPercent.femalePer}></span>
</div> </div>
<p class="num"> <p class="num">
<span>{{gender.male | dealWithNumber}}</span> <span>{{genderPercent.male | dealWithNumber}}</span>
<span>{{gender.female | dealWithNumber}}</span> <span>{{genderPercent.female | dealWithNumber}}</span>
</p> </p>
</div> </div>
<div class="female"> <div class="female">
...@@ -48,14 +48,14 @@ ...@@ -48,14 +48,14 @@
</div> </div>
<ul> <ul>
<li v-for="(item, index) in distribution[distShowKey]" :key="index"> <li v-for="(item, index) in distribution[distShowKey]" :key="index">
<p>{{item.name}}</p> <p>{{item.key}}</p>
<count-to :endVal="item.value"/> <count-to :endVal="item.value"/>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 行业分布 --> <!-- 行业分布 -->
<div class="industry"> <div class="industry">
<div class="partTitle margin20-10">年龄结构</div> <div class="partTitle margin20-10">行业分布</div>
<bar-chart :option="industryConfig.option" :layout="industryConfig.layout" /> <bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
</div> </div>
<!-- 参与度|活跃度 --> <!-- 参与度|活跃度 -->
...@@ -78,9 +78,9 @@ ...@@ -78,9 +78,9 @@
<div class="studentDemeanor" v-if="greatKey === 0"> <div class="studentDemeanor" v-if="greatKey === 0">
<swiper :options="swiperOption"> <swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in studentDemeanor" :key="index"> <swiper-slide v-for="(item, index) in studentDemeanor" :key="index">
<img :src="item.pic" alt="照片" @click="openStudent(index)"> <img :src="item.iconUrl" alt="照片" @click="openStudent(index)">
<p>{{item.name}}</p> <p>{{item.name}}</p>
<p>{{item.position}}</p> <p>{{item.desc}}</p>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
...@@ -93,10 +93,7 @@ ...@@ -93,10 +93,7 @@
> >
<ul> <ul>
<li v-for="(item, index) in starClass" :key="index"> <li v-for="(item, index) in starClass" :key="index">
<span>{{item.name}}</span> <span v-for="(con, i) in item" :key="i + 'key'">{{con}}</span>
<span>{{item.content1}}</span>
<span>{{item.content2}}</span>
<span>{{item.content3}}</span>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
...@@ -142,233 +139,40 @@ export default { ...@@ -142,233 +139,40 @@ export default {
data () { data () {
return { return {
// 男女学员数量 // 男女学员比例
gender: { genderPercent: {
male: 92768, male: 0,
female: 41768 female: 0,
malePer: '0%',
femalePer: '0%'
}, },
genderPercent: {},
// 年龄数据
age: [
{
name: '60’s',
value: 32
}, {
name: '70’s',
value: 106
}, {
name: '80’s',
value: 184
}, {
name: '90’s',
value: 131
}
],
// 平均年龄 // 平均年龄
ageAverage: 45.7, ageAverage: 0,
// 年龄结构配置 // 年龄结构配置
ageConfig: {}, ageConfig: {},
// 学历数据
edu: [
{value: 735, name: '大专'},
{value: 580, name: '本科'},
{value: 484, name: '硕士'},
{value: 300, name: '博士以上'}
],
// 学历情况配置 // 学历情况配置
eduConfig: {}, eduConfig: {},
// 分布 // 分布
distribution: { distribution: {
// 党派 // 党派
party: [ party: [],
{
name: '民革',
value: 4293
}, {
name: '民盟',
value: 4293
}, {
name: '民健',
value: 4293
}, {
name: '民进',
value: 4293
}, {
name: '无党派',
value: 4293
}
],
// 民族 // 民族
ethnic: [ ethnic: []
{
name: '汉族',
value: 3924
}, {
name: '藏族',
value: 3924
}, {
name: '维吾尔族',
value: 3924
}, {
name: '白族',
value: 3924
}, {
name: '苗族',
value: 3924
}
]
}, },
// 分布当前展示数据标识 // 分布当前展示数据标识
distShowKey: 'party', distShowKey: 'party',
// 行业分布 // 行业分布
industry: [
{
name: '家电行业',
value: 4172
}, {
name: '电子信息',
value: 892
}, {
name: '机械制造',
value: 8321
}, {
name: '纺织生产',
value: 1892
}, {
name: '生物医药',
value: 1892
}
],
industryConfig: { industryConfig: {
layout: { layout: {
height: '143px' height: '143px'
} }
}, },
// 参与度活跃度 // 参与度活跃度
degree: { degree: {},
// 参与度
participate: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 180
}, {
name: '41-60%',
value: 310
}, {
name: '61-80%',
value: 380
}, {
name: '81-100%',
value: 489
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 110
}, {
name: '41-60%',
value: 220
}, {
name: '61-80%',
value: 310
}, {
name: '81-100%',
value: 320
}
]
}
],
// 活跃度
active: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 29
}, {
name: '41-60%',
value: 300
}, {
name: '61-80%',
value: 200
}, {
name: '81-100%',
value: 300
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 80
}, {
name: '41-60%',
value: 20
}, {
name: '61-80%',
value: 400
}, {
name: '81-100%',
value: 500
}
]
}
]
},
degreeKey: '', degreeKey: '',
degreeConfig: {}, degreeConfig: {},
// 学员风采 // 学员风采
studentDemeanor: [ studentDemeanor: [],
{
pic: require('../../../static/images/index/persion.png'),
name: '白岩松1',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松2',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松3',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松4',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松5',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松6',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松7',
position: '主持人/作家'
}
],
swiperOption: { swiperOption: {
loop: false, loop: false,
autoplay: false, autoplay: false,
...@@ -376,34 +180,7 @@ export default { ...@@ -376,34 +180,7 @@ export default {
slidesPerView: 4.5 slidesPerView: 4.5
}, },
// 明星班级 // 明星班级
starClass: [ starClass: [],
{
name: '2021年秋季班（21人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（22人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（23人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（24人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（25人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}
],
classOption: { classOption: {
step: 0.35, step: 0.35,
singleHeight: 50 singleHeight: 50
...@@ -418,56 +195,86 @@ export default { ...@@ -418,56 +195,86 @@ export default {
methods: { methods: {
init () { init () {
this.dealGender() const {
this.getAge() gender,
this.getEdu() age,
this.getIndustry() edu,
this.changeDegree('participate') party,
ethnic,
industry,
participate,
active,
studentDemeanor,
starClass
} = this.leftData
this.dealGender(gender)
this.getAge(age)
this.getEdu(edu)
this.getDist(party, ethnic)
this.getIndustry(industry)
this.getDegree(participate, active)
this.getStudent(studentDemeanor)
this.getClass(starClass)
}, },
// 求性别百分比 // 求性别百分比
dealGender () { dealGender (data) {
const arr = Object.values(this.gender) // total为1防止NAN
const total = arr.reduce((pre, next) => pre + next) const total = data.total || 1
const maleItem = data.list && data.list.find(item => item.key === '男')
const male = maleItem.value || 0
const femaleItem = data.list && data.list.find(item => item.key === '女')
const female = femaleItem.value || 0
this.genderPercent = { this.genderPercent = {
male: (this.gender.male * 100 / total).toFixed(1) + '%', male,
female: (this.gender.female * 100 / total).toFixed(1) + '%' female,
malePer: (male * 100 / total).toFixed(1) + '%',
femalePer: (female * 100 / total).toFixed(1) + '%'
} }
}, },
// 年龄结构 // 年龄结构
getAge () { getAge (data) {
this.ageAverage = data.subTitleValue || 0
const age = data.list || []
this.ageConfig = { this.ageConfig = {
option: { option: {
seriesData: [ seriesData: [
{ {
data: this.age.map(item => item.value).reverse() data: age.map(item => item.value).reverse()
} }
], ],
base: { base: {
yAxis: [{ yAxis: [{
data: this.age.map(item => item.name).reverse() data: age.map(item => item.key).reverse()
}] }]
} }
} }
} }
}, },
// 学历情况 // 学历情况
getEdu () { getEdu (data) {
const edu = this.formatArr(data.list || [])
this.eduConfig = { this.eduConfig = {
option: { option: {
seriesData: [ seriesData: [
{ {
data: this.edu data: edu
} }
] ]
} }
} }
}, },
// 党派/民族分布 // 党派/民族分布
getDist (data1, data2) {
this.distribution.party = data1.list || []
this.distribution.ethnic = data2.list || []
},
// 切换党派/民族
changeDist (type) { changeDist (type) {
this.distShowKey = type this.distShowKey = type
}, },
// 行业分布 // 行业分布
getIndustry () { getIndustry (data) {
const industry = data.list || []
this.industryConfig.option = { this.industryConfig.option = {
seriesData: [ seriesData: [
{ {
...@@ -477,7 +284,7 @@ export default { ...@@ -477,7 +284,7 @@ export default {
return utils.dealWithNumber(item.value) return utils.dealWithNumber(item.value)
} }
}, },
data: this.industry.map(item => item.value).reverse() data: industry.map(item => item.value).reverse()
} }
], ],
base: { base: {
...@@ -492,11 +299,37 @@ export default { ...@@ -492,11 +299,37 @@ export default {
padding: [0, 10, 0, 0], padding: [0, 10, 0, 0],
fontFamily: 'Microsoft YaHei' fontFamily: 'Microsoft YaHei'
}, },
data: this.industry.map(item => item.name).reverse() data: industry.map(item => item.key).reverse()
}] }]
} }
} }
}, },
// 获取参与度与活跃度数据
getDegree (data1, data2) {
// 参与度
const oldParticipate = data1.list || []
const participate = []
oldParticipate.forEach(item => {
participate.push({
name: item.title,
value: this.formatArr(item.list || [])
})
})
// 活跃度
const oldActive = data2.list || []
const active = []
oldActive.forEach(item => {
active.push({
name: item.title,
value: this.formatArr(item.list || [])
})
})
this.degree = {
participate,
active
}
this.changeDegree('participate')
},
// 切换参与度与活跃度 // 切换参与度与活跃度
changeDegree (type) { changeDegree (type) {
this.degreeKey = type this.degreeKey = type
...@@ -542,8 +375,29 @@ export default { ...@@ -542,8 +375,29 @@ export default {
} }
}, },
// 学员风采 // 学员风采
getStudent (data) {
this.studentDemeanor = data.list || []
},
// 明星班级
getClass (data) {
this.starClass = data.valueList || []
},
// 打开学员风采弹框
openStudent (index) { openStudent (index) {
console.log(index) console.log(index)
},
// 把数组中的key转成name
formatArr (arr) {
const newArr = []
if (this.utils.isArray(arr) && arr.length) {
arr.forEach(item => {
newArr.push({
name: item.key,
value: item.value
})
})
}
return newArr
} }
} }
} }
...@@ -718,6 +572,7 @@ export default { ...@@ -718,6 +572,7 @@ export default {
.img { .img {
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 50%;
} }
p { p {
font-size: 14px; font-size: 14px;
...@@ -747,7 +602,10 @@ export default { ...@@ -747,7 +602,10 @@ export default {
font-weight: 400; font-weight: 400;
color: #6DCDFF; color: #6DCDFF;
line-height: 34px; line-height: 34px;
padding: 8px 0px 8px 40px; font-size: 16px;
padding: 8px 10px 8px 40px;
display: flex;
justify-content: space-between;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment