Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 00d16317 by wangr
Options

add

parents 2654119f 8e646652
Showing with 733 additions and 493 deletions
src/components/CountRoll.vue 0 → 100644
<template>
<div class="chartNum">
<div :class="isMin ? 'box-item-min' : 'box-item'">
<li v-for="(item,index) in orderNum"
:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
        <span v-if="!isNaN(item)">
         <i ref="numberItem">0123456789</i>
       </span>
       <span class="comma" v-else>{{item}}</span>
</li>
</div>
</div>
</template>
<script>
export default {
name: 'CountRoll',
props: {
count: Number,
isMin: {
type: Boolean,
default: false
}
},
data () {
return {
orderNum: []
}
},
mounted () {
this.toOrderNum(this.count)
this.increaseNumber()
},
deactivated () {
clearInterval(this.timer)
},
methods: {
// TODO: 定时器
increaseNumber () {
this.timer = setInterval(() => {
this.setNumberTransform()
}, 300)
},
// TODO：设置文字滚动
setNumberTransform () {
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
const numberArr = this.orderNum.filter(item => !isNaN(item))
// 结合CSS 对数字字符进行滚动
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
}
clearInterval(this.timer)
},
// TODO: 处理数字
toOrderNum (num) {
num = this.utils.formatNumber(num, num.length)
this.orderNum = num // 将其便变成数据，渲染至滚动数组
}
}
}
</script>
<style scoped lang='less'>
.chartNum {
.box-item {
position: relative;
font-size: 36px;
line-height: 48px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 20px;
height: 48px;
border: 1px solid #2B79BC;
margin-right: 5px;
line-height: 10px;
font-size: 36px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 30px;
height: 48px;
display: flex;
list-style: none;
margin-right: 5px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 6px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
.box-item-min {
position: relative;
font-size: 28px;
line-height: 36px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 24px;
height: 36px;
border: 1px solid #2B79BC;
margin-right: 8px;
line-height: 10px;
font-size: 28px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 24px;
height: 36px;
display: flex;
list-style: none;
margin-right: 8px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 2px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
}
</style>
src/components/CountTo.vue deleted 100644 → 0
<template>
<CountTo
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:separator="separator"
:suffix="suffix"
:prefix="prefix"
/>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
name: 'VueCountTo', // TODO: 数字变动组件
components: { CountTo },
props: {
autoplay: { type: Boolean, default: true }, // 自动播放 默认为 True
startVal: { type: Number, default: 0 }, // 起始值
endVal: { type: Number, default: 0 }, // 结束值
duration: { type: Number, default: 800 }, // 持续时间，以毫秒为单位
decimals: { type: Number, default: 0 }, // 要显示的小数位数
separator: { type: String, default: ',' }, // 分隔符
prefix: { type: String, default: '' }, // 前缀
suffix: { type: String, default: '' } // 后缀
}
}
</script>
<style scoped>
span {
font-family: "Century Gothic";
}
</style>
src/components/PopupFrame.vue
...@@ -88,17 +88,13 @@ export default { ...@@ -88,17 +88,13 @@ export default {
top: 7px; top: 7px;
} }
} }
.content {
margin-top: 15px;
}
.close { .close {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url('../../static/images/index/bulletFrame-close.png') background: url('../../static/images/index/bulletFrame-close.png') no-repeat left top;
no-repeat left top;
position: absolute; position: absolute;
top: 36px; top: 20px;
right: 19px; right: 20px;
cursor: pointer; cursor: pointer;
} }
} }
......
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,24 +93,25 @@ ...@@ -93,24 +93,25 @@
> >
<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>
</div> </div>
</div> </div>
<!-- 弹框 -->
<popup-frame :visible="visible" :layout="{width: '960px', height: '540px'}" @beforeClose="closePopup">
<img src="../../../static/images/index/studentDemeanor.jpg" alt="弹框">
</popup-frame>
</div> </div>
</template> </template>
<script> <script>
import TitleLine from '@/components/TitleLine' import TitleLine from 'components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue' import BarChart from 'components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from 'components/echarts/PieChart.vue'
import LineChart from '@/components/echarts/LineChart.vue' import LineChart from 'components/echarts/LineChart.vue'
import Swiper from '@/components/Swiper' import Swiper from 'components/Swiper'
import { swiperSlide } from 'vue-awesome-swiper' import { swiperSlide } from 'vue-awesome-swiper'
import utils from 'utils' import utils from 'utils'
export default { export default {
...@@ -142,233 +143,40 @@ export default { ...@@ -142,233 +143,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,39 +184,14 @@ export default { ...@@ -376,39 +184,14 @@ 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
}, },
greatKey: 0 greatKey: 0,
// 弹框是否显示
visible: false
} }
}, },
...@@ -418,56 +201,86 @@ export default { ...@@ -418,56 +201,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 +290,7 @@ export default { ...@@ -477,7 +290,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 +305,37 @@ export default { ...@@ -492,11 +305,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 +381,34 @@ export default { ...@@ -542,8 +381,34 @@ export default {
} }
}, },
// 学员风采 // 学员风采
getStudent (data) {
this.studentDemeanor = data.list || []
},
// 明星班级
getClass (data) {
this.starClass = data.valueList || []
},
// 打开学员风采弹框
openStudent (index) { openStudent (index) {
console.log(index) console.log(index)
this.visible = true
},
// 关闭弹框
closePopup (data) {
this.visible = data
},
// 把数组中的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
} }
} }
} }
...@@ -586,7 +451,7 @@ export default { ...@@ -586,7 +451,7 @@ export default {
span { span {
width: 0%; width: 0%;
height: 8px; height: 8px;
transition: width linear 300ms; transition: width linear 1000ms;
&.male { &.male {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
...@@ -718,6 +583,7 @@ export default { ...@@ -718,6 +583,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 +613,10 @@ export default { ...@@ -747,7 +613,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;
} }
} }
} }
......
src/pages/index/Right.vue
...@@ -18,9 +18,10 @@ ...@@ -18,9 +18,10 @@
<div class="seemore">查看更多</div> <div class="seemore">查看更多</div>
</div> </div>
<p class="percent"> <p class="percent">
<span>课程数<count-to :endVal="120" /></span> <span v-for="(item, l) in coursedata" :key="l">
<span>学习总时长<count-to :endVal="1248" /></span> {{item.name}}
<span>出勤率<count-to :endVal="88" suffix="%"/></span> <count-to :endVal="item.value" :suffix="item.unit"/>
</span>
</p> </p>
<div class="line"> <div class="line">
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" /> <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
...@@ -33,8 +34,36 @@ ...@@ -33,8 +34,36 @@
</div> </div>
<!-- 活动开展 --> <!-- 活动开展 -->
<div class='activ'> <div class='activ'>
<active /> <div class="activity-one">
<div class="act">活动开展</div>
<div class="mor" @click="getMore">查看更多</div>
</div>
<div class="activity-two">
<div class="left">
<div class="act-left">
<count-roll :count="4166" class="act-style"/><span>次</span>
</div>
<p class="act-num">活动开展次数</p>
</div>
<div class="line"></div>
<div class="right">
<line-bar
:layout="activeConfig.layout"
:option="activeConfig.option"
/>
</div>
</div>
</div> </div>
<popup-frame
:visible.sync="activeShow"
@beforeClose="beforeCloses"
>
<div class="img">
<img src="../../../static/images/index/03.png" alt="">
</div>
</popup-frame>
<popup-frame <popup-frame
:visible.sync="showVisible" :visible.sync="showVisible"
@beforeClose="beforeCloses" @beforeClose="beforeCloses"
...@@ -117,6 +146,8 @@ ...@@ -117,6 +146,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 活动开展 查看更多的弹出层 -->
</div> </div>
</template> </template>
...@@ -126,7 +157,9 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper' ...@@ -126,7 +157,9 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue' import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
import active from './active' import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
...@@ -135,10 +168,21 @@ export default { ...@@ -135,10 +168,21 @@ export default {
PieChart, PieChart,
swiper, swiper,
swiperSlide, swiperSlide,
active LineBar,
CountRoll
// PopupFrame
},
props: {
rightData: {
type: Object,
default () {
return {}
}
}
}, },
data () { data () {
return { return {
activeShow: false,
showVisible: false, showVisible: false,
// 师资力量 // 师资力量
eduConfig: {}, eduConfig: {},
...@@ -162,6 +206,21 @@ export default { ...@@ -162,6 +206,21 @@ export default {
} }
], ],
// 教学课程 // 教学课程
coursedata: [
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
lineConfig: {}, lineConfig: {},
line: [ line: [
{ {
...@@ -231,7 +290,20 @@ export default { ...@@ -231,7 +290,20 @@ export default {
} }
], ],
topicShow: true topicShow: true,
// 活动开展
activeConfig: {},
activeList: [
{name: '*****活动', value: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
],
moreConfig: {
props: {
visible: false,
title: ''
}
}
} }
}, },
mounted () { mounted () {
...@@ -239,111 +311,101 @@ export default { ...@@ -239,111 +311,101 @@ export default {
this.getEdu() this.getEdu()
this.getline() this.getline()
this.getlearn() this.getlearn()
this.getActive(this.activeList)
}, },
methods: { methods: {
// 学习内容 // 师资力量
getlearn () { getstaff () {
const xData = this.learn.map(v => v.name) this.staffConfig = {
const Data = this.learn.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: { option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: { base: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#ffffff'
},
backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)'
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData
},
yAxis: [{ yAxis: [{
type: 'value', data: this.staff.map(item => item.name).reverse()
max: 'dataMax',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
},
boundaryGap: ['20%', '20%']
}] }]
}
}
}
},
getEdu () {
this.eduConfig = {
option: {
base: {
color: [],
legend: {
show: false
}
}, },
seriesData: [ seriesData: [
{ {
type: 'bar', type: 'pie',
barWidth: 6, name: '师资力量',
itemStyle: { itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [ normal: {
{ label: {
offset: 1, show: false
color: '#24E8FF'
}, },
{ labelLine: {
offset: 0, show: false
color: '#00BEFf' },
} shadowBlur: 0,
]), shadowColor: '#3EB8F7'
shadowOffsetY: 0, }
shadowOffsetX: 0,
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
}, },
data: Data clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
},
position: 'center',
show: true
}
},
itemStyle: {
normal: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: this.edu[0].value / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
}
}
]
} }
] ]
} }
...@@ -449,96 +511,174 @@ export default { ...@@ -449,96 +511,174 @@ export default {
} }
} }
}, },
getEdu () { // 学习内容
this.eduConfig = { getlearn () {
const xData = this.learn.map(v => v.name)
const Data = this.learn.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: { option: {
base: { base: {
legend: { tooltip: {
show: false trigger: 'axis',
} axisPointer: {
type: 'line'
},
textStyle: {
color: '#ffffff'
},
backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)'
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData
},
yAxis: [{
type: 'value',
max: 'dataMax',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
},
boundaryGap: ['20%', '20%']
}]
}, },
seriesData: [ seriesData: [
{ {
type: 'pie', type: 'bar',
name: '师资力量', barWidth: 6,
itemStyle: { itemStyle: {
normal: { color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
shadowBlur: 0, {
shadowColor: '#3EB8F7' offset: 1,
} color: '#24E8FF'
},
clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n\n{b|教师数}'
},
position: 'center',
show: true
}
}, },
itemStyle: { {
normal: { offset: 0,
color: '#3EB8F7', color: '#00BEFf'
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: this.edu[0].value / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
} }
} ]),
] barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: Data
} }
] ]
} }
} }
}, },
// 师资力量 getActive (data) {
getstaff () { let yData = data.map(v => v.name).reverse()
this.staffConfig = { let y2Data = data.map(v => v.value).reverse()
let max = 4166
let maxData = new Array(data.length).fill(max)
let pointData = data.reverse().map((v, i) => {
return {
xAxis: v.value,
yAxis: i
}
})
this.activeConfig = {
layout: {
width: '100%',
height: '100%'
},
option: { option: {
base: {
xAxis: {
max: max
},
yAxis: [
{
axisLabel: {
color: '#fff',
align: 'left',
padding: [0, 0, 0, -60]
},
data: yData
}, {
data: y2Data.map(v => v)
}
]
},
seriesData: [ seriesData: [
{ {
data: this.staff.map(item => item.value).reverse() name: 'back',
barWidth: '5px',
data: maxData
},
{
name: 'show',
barWidth: '5px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)'
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData
},
data: y2Data
} }
], ]
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
} }
} }
}, },
// 查看更多的点击事件
getMore () {
console.log(123)
this.activeShow = true
},
// 交流会/专题弹框 // 交流会/专题弹框
topicDialog () { topicDialog () {
this.showVisible = true this.showVisible = true
...@@ -546,8 +686,8 @@ export default { ...@@ -546,8 +686,8 @@ export default {
// 关闭交流会/专题弹框弹框前的回调 // 关闭交流会/专题弹框弹框前的回调
beforeCloses (flag) { beforeCloses (flag) {
this.showVisible = flag this.showVisible = flag
this.activeShow = flag
}, },
// 交流会/专题弹框切换
topicChange () { topicChange () {
this.topicShow = !this.topicShow this.topicShow = !this.topicShow
} }
...@@ -622,9 +762,80 @@ export default { ...@@ -622,9 +762,80 @@ export default {
} }
// 活动开展 // 活动开展
.activ{ .activ{
width: 100%; width: 100%;
height: 150px; height: 140px;
} .activity-one{
height: 20px;
display: flex;
justify-content: space-between;
.act{
width: 72px;
height: 20px;
margin-top: -5px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
.mor{
width: 94px;
height: 20px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background:url('../../../static/images/index/more.png') no-repeat right;
}
}
.activity-two{
margin-top: 12px;
display: flex;
justify-content: space-between;
.left{
margin-top:10px;
width: 150px;
.act-left{
display: flex;
.act-style{
width: 150px;
}
span{
width: 16px;
height: 17px;
margin-top: 22px;
margin-left: 12px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 35px;
}
}
.act-num{
width: 108px;
height: 18px;
margin-top: 20px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 17px;
}
}
.line{
width: 3px;
height: 76px;
margin: 10px 0 0 20px;
background:url('../../../static/images/index/3.png');
}
.right{
width: 270px;
height: 100%;
}
}
}
.right-bottom { .right-bottom {
position: relative; position: relative;
.seemore { .seemore {
......
src/pages/index/index.vue
...@@ -74,6 +74,10 @@ export default { ...@@ -74,6 +74,10 @@ export default {
} }
// 右侧数据 // 右侧数据
this.rightData = { this.rightData = {
staff: data.p12 || {}, // 师资力量
coursedata: data.p13 || {}, // 教学课程
line: data.p14 || {}, // 教学线上线下比例
learn: data.p15 || {} // 学习内容
} }
} catch (err) { } catch (err) {
console.log('managePlatform >', err) console.log('managePlatform >', err)
......
src/public/apis/proxy.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
module.exports = { module.exports = {
host: '127.0.0.1', host: '127.0.0.1',
port: '8082', // 自定义端口号 port: '8087', // 自定义端口号
proxyTable: { // Vue开发环境跨域配置 proxyTable: { // Vue开发环境跨域配置
'/apis': { '/apis': {
target: 'http://test-a.com', target: 'http://test-a.com',
......
src/public/plugins/index.js
...@@ -5,7 +5,6 @@ import ContentContainer from 'components/ContentContainer' ...@@ -5,7 +5,6 @@ import ContentContainer from 'components/ContentContainer'
// 页面头 // 页面头
import Header from 'components/Header' import Header from 'components/Header'
// 插件 // 插件
import CountTo from 'components/CountTo.vue'
import PopupFrame from '@/components/PopupFrame' import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {} const UsePlugin = {}
...@@ -21,8 +20,6 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -21,8 +20,6 @@ UsePlugin.install = function (Vue, options = {}) {
// 内容容器 // 内容容器
Vue.component('content-container', ContentContainer) Vue.component('content-container', ContentContainer)
Vue.component('page-head', Header) Vue.component('page-head', Header)
// 数组滚动
Vue.component('count-to', CountTo)
// 弹框组件 // 弹框组件
Vue.component('popup-frame', PopupFrame) Vue.component('popup-frame', PopupFrame)
} }
......
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