Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 397b10c7 by wangdongchen
Options

Merge branch 'wdc' into '20210819' 

Wdc

See merge request vue-project/liangXing/frontEnd!16
parents 34b6d401 09ca30ac
Showing with 206 additions and 173 deletions
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" />
...@@ -134,6 +135,14 @@ export default { ...@@ -134,6 +135,14 @@ export default {
swiperSlide, swiperSlide,
active active
}, },
props: {
rightData: {
type: Object,
default () {
return {}
}
}
},
data () { data () {
return { return {
showVisible: false, showVisible: false,
...@@ -159,6 +168,21 @@ export default { ...@@ -159,6 +168,21 @@ export default {
} }
], ],
// 教学课程 // 教学课程
coursedata: [
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
lineConfig: {}, lineConfig: {},
line: [ line: [
{ {
...@@ -237,109 +261,98 @@ export default { ...@@ -237,109 +261,98 @@ export default {
this.getlearn() this.getlearn()
}, },
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'
}
}
}
]
} }
] ]
} }
...@@ -445,96 +458,112 @@ export default { ...@@ -445,96 +458,112 @@ 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
} }
] ]
} }
} }
}, },
// 师资力量
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
},
// 交流会/专题弹框 // 交流会/专题弹框
topicDialog () { topicDialog () {
this.showVisible = true this.showVisible = true
......
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)
......
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