Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 08b96681 by wangdongchen
Options

Merge branch 'wdc' into '20210819' 

Wdc

See merge request vue-project/liangXing/frontEnd!13
parents 090b0950 26bc0a1b
Showing with 224 additions and 69 deletions
src/pages/index/Right.vue
<template> <template>
<div class="managePlatform-right"> <div class="managePlatform-right">
<title-line :con="'师资/课程/活动'"></title-line> <title-line :con="'师资/课程/活动'"></title-line>
<!-- 师资力量 -->
<div class="faculty"> <div class="faculty">
<div class="teachernum"> <div class="teachernum">
<div class="teacherTitle">师资力量</div> <div class="minTitle">师资力量</div>
<pie-chart :option="eduConfig.option" /> <pie-chart :option="eduConfig.option" />
</div> </div>
<div class="staff"> <div class="staff">
<bar-chart :option="staffConfig.option" /> <bar-chart :option="staffConfig.option" />
</div> </div>
</div> </div>
<!-- 教学课程 -->
<div class="course"> <div class="course">
<div class="coursetitle"> <div class="coursetitle">
<div class="left">教学课程</div> <div class="minTitle">教学课程</div>
<div class="seemore">查看更多</div> <div class="seemore">查看更多</div>
</div> </div>
<p class="percent"> <p class="percent">
<span>课程数</span> <span>课程数<count-to :endVal="120" /></span>
<span>学习总时长</span> <span>学习总时长<count-to :endVal="1248" /></span>
<span>出勤率</span> <span>出勤率<count-to :endVal="88" suffix="%"/></span>
</p> </p>
<div class="line"> <div class="line">
<bar-chart :option="lineConfig.option" /> <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
</div> </div>
</div> </div>
<!-- 学习内容 -->
<div class="learnContent">
<div class="minTitle">学习内容</div>
<bar-chart style="margin-top:13px" :layout="learnConfig.layout" :option="learnConfig.option" />
</div>
<!-- 活动开展 --> <!-- 活动开展 -->
<div class='activ'> <div class='activ'>
<active /> <active />
...@@ -120,12 +127,12 @@ export default { ...@@ -120,12 +127,12 @@ export default {
}, },
data () { data () {
return { return {
// 师资力量
eduConfig: {}, eduConfig: {},
edu: [ edu: [
{ value: 168, name: '教师数' } { value: 168, name: '教师数' }
], ],
staffConfig: {}, staffConfig: {},
// 师资数据
staff: [ staff: [
{ {
name: '****教授', name: '****教授',
...@@ -141,6 +148,7 @@ export default { ...@@ -141,6 +148,7 @@ export default {
value: 12 value: 12
} }
], ],
// 教学课程
lineConfig: {}, lineConfig: {},
line: [ line: [
{ {
...@@ -151,10 +159,38 @@ export default { ...@@ -151,10 +159,38 @@ export default {
value: 68 value: 68
} }
], ],
genderPercent: { // 学习内容
male: '32%', learnConfig: {},
female: '68%' learn: [
{
name: '**学习',
value: 65
}, },
{
name: '**学习',
value: 25
},
{
name: '**学习',
value: 85
},
{
name: '**学习',
value: 70
},
{
name: '**学习',
value: 100
},
{
name: '**学习',
value: 40
},
{
name: '**学习',
value: 45
}
],
swiperOption: { swiperOption: {
mousewheel: true, mousewheel: true,
centeredSlides: true, centeredSlides: true,
...@@ -188,11 +224,134 @@ export default { ...@@ -188,11 +224,134 @@ export default {
this.getstaff() this.getstaff()
this.getEdu() this.getEdu()
this.getline() this.getline()
this.getlearn()
}, },
methods: { methods: {
// 学习内容
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: {
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: [{
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: [
{
type: 'bar',
barWidth: 6,
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
},
{
offset: 0,
color: '#00BEFf'
}
]),
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: Data
}
]
}
}
},
// 教学课程百分比
getline () { getline () {
this.lineConfig = { this.lineConfig = {
layout: {
width: '100%',
height: '31px'
},
option: { option: {
base: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true
}
},
seriesData: [ seriesData: [
{ {
name: 'A', name: 'A',
...@@ -200,30 +359,38 @@ export default { ...@@ -200,30 +359,38 @@ export default {
stack: 'Tik Tok', stack: 'Tik Tok',
barWidth: 25, barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 190, 255, .3)',
shadowOffsetY: 0, shadowOffsetY: 0,
shadowOffsetX: 0, shadowOffsetX: 0,
barBorderRadius: [2, 0, 0, 2] barBorderRadius: [5, 0, 0, 5]
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-20, 0], offset: [-40, 2],
formatter: '{c}%', formatter: function (params) {
textStyle: { return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center', align: 'center',
baseline: 'middle',
fontSize: 14, fontSize: 14,
fontWeight: '400', fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff', color: '#fff',
textShadowColor: '#000', align: 'center',
textShadowBlur: '0', fontSize: 24,
textShadowOffsetX: 1, fontFamily: 'Century Gothic',
textShadowOffsetY: 1 fontWeight: '400'
}
} }
} }
}, },
data: [32] data: [this.line[0]]
}, },
{ {
name: 'B', name: 'B',
...@@ -231,29 +398,38 @@ export default { ...@@ -231,29 +398,38 @@ export default {
stack: 'Tik Tok', stack: 'Tik Tok',
barWidth: 25, barWidth: 25,
itemStyle: { itemStyle: {
color: 'rgba(0, 222, 125, .3)',
shadowOffsetY: 0, shadowOffsetY: 0,
shadowOffsetX: 0 shadowOffsetX: 0,
barBorderRadius: [0, 5, 5, 0]
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-20, 0], offset: [-40, 2],
formatter: '{c}%', formatter: function (params) {
textStyle: { return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center', align: 'center',
baseline: 'middle',
fontSize: 14, fontSize: 14,
fontWeight: '400', fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff', color: '#fff',
textShadowColor: '#000', align: 'center',
textShadowBlur: '0', fontSize: 24,
textShadowOffsetX: 1, fontFamily: 'Century Gothic',
textShadowOffsetY: 1 fontWeight: '400'
}
} }
} }
}, },
data: [68] data: [this.line[1]]
} }
] ]
} }
...@@ -273,12 +449,6 @@ export default { ...@@ -273,12 +449,6 @@ export default {
name: '师资力量', name: '师资力量',
itemStyle: { itemStyle: {
normal: { normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0, shadowBlur: 0,
shadowColor: '#3EB8F7' shadowColor: '#3EB8F7'
} }
...@@ -338,6 +508,7 @@ export default { ...@@ -338,6 +508,7 @@ export default {
} }
} }
}, },
// 师资力量
getstaff () { getstaff () {
this.staffConfig = { this.staffConfig = {
option: { option: {
...@@ -361,6 +532,12 @@ export default { ...@@ -361,6 +532,12 @@ export default {
<style lang="less"> <style lang="less">
.managePlatform-right { .managePlatform-right {
height: 500px; height: 500px;
.minTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.faculty { .faculty {
margin-top: 7px; margin-top: 7px;
height: 156px; height: 156px;
...@@ -368,12 +545,6 @@ export default { ...@@ -368,12 +545,6 @@ export default {
.teachernum { .teachernum {
width: 134px; width: 134px;
height: 100%; height: 100%;
.teacherTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
} }
.staff { .staff {
margin-top: 47px; margin-top: 47px;
...@@ -386,12 +557,6 @@ export default { ...@@ -386,12 +557,6 @@ export default {
.coursetitle { .coursetitle {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.seemore { .seemore {
width: 94px; width: 94px;
cursor: pointer; cursor: pointer;
...@@ -412,31 +577,21 @@ export default { ...@@ -412,31 +577,21 @@ export default {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #6dcdff; color: #6dcdff;
span{
font-size: 26px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fff;
}
} }
} }
.line { .line {
margin-top: 12px;
display: flex;
margin-top: 5px;
margin-bottom: 4px;
span {
width: 0%;
height: 31px; height: 31px;
transition: width linear 300ms; margin-top: 12px;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #00beff;
opacity: 0.5;
}
&.female {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #00de7d;
opacity: 0.5;
}
} }
} }
.learnContent{
height: 178px;
} }
// 活动开展 // 活动开展
.activ{ .activ{
......
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