Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 40a186fd by wangdongchen
Options

Merge branch 'wdc' into '20210819' 

Wdc

See merge request vue-project/liangXing/frontEnd!24
parents a726c4df 5ac0a203
Showing with 51 additions and 91 deletions
src/pages/index/Right.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</div> </div>
<p class="percent"> <p class="percent">
<span v-for="(item, l) in coursedata" :key="l"> <span v-for="(item, l) in coursedata" :key="l">
{{item.name}} {{item.key}}
<count-to :endVal="item.value" :suffix="item.unit"/> <count-to :endVal="item.value" :suffix="item.unit"/>
</span> </span>
</p> </p>
...@@ -152,13 +152,13 @@ ...@@ -152,13 +152,13 @@
</template> </template>
<script> <script>
import TitleLine from '@/components/TitleLine' import TitleLine from 'components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper' 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 LineBar from '@/components/echarts/LineBar' import LineBar from 'components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue' import CountRoll from 'components/CountRoll.vue'
// import PopupFrame from './PopupFrame' // import PopupFrame from './PopupFrame'
export default { export default {
name: 'Right', name: 'Right',
...@@ -186,9 +186,7 @@ export default { ...@@ -186,9 +186,7 @@ export default {
showVisible: false, showVisible: false,
// 师资力量 // 师资力量
eduConfig: {}, eduConfig: {},
edu: [ edu: null,
{ value: 168, name: '教师数' }
],
staffConfig: {}, staffConfig: {},
staff: [ staff: [
{ {
...@@ -206,63 +204,12 @@ export default { ...@@ -206,63 +204,12 @@ export default {
} }
], ],
// 教学课程 // 教学课程
coursedata: [ coursedata: [],
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
lineConfig: {}, lineConfig: {},
line: [ line: [],
{
name: '线下',
value: 32
}, {
name: '线上',
value: 68
}
],
// 学习内容 // 学习内容
learnConfig: {}, learnConfig: {},
learn: [ 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,
...@@ -308,7 +255,9 @@ export default { ...@@ -308,7 +255,9 @@ export default {
}, },
mounted () { mounted () {
this.getstaff() this.getstaff()
this.getEdu() this.getEdudata()
this.getcoursedata()
this.getlinedata()
this.getline() this.getline()
this.getlearn() this.getlearn()
this.getActive(this.activeList) this.getActive(this.activeList)
...@@ -320,17 +269,31 @@ export default { ...@@ -320,17 +269,31 @@ export default {
option: { option: {
seriesData: [ seriesData: [
{ {
data: this.staff.map(item => item.value).reverse() data: this.rightData.staff.list.map(item => item.value).reverse()
} }
], ],
base: { base: {
yAxis: [{ yAxis: [{
data: this.staff.map(item => item.name).reverse() data: this.rightData.staff.list.map(item => item.key).reverse()
}] }]
} }
} }
} }
}, },
getEdudata () {
const num = this.rightData.staff.list.map(item => {
return item.value
})
function sum (arr) {
var s = 0
arr.forEach(val => {
s += val
})
return s
}
this.edu = sum(num)
this.getEdu()
},
getEdu () { getEdu () {
this.eduConfig = { this.eduConfig = {
option: { option: {
...@@ -345,26 +308,23 @@ export default { ...@@ -345,26 +308,23 @@ export default {
type: 'pie', type: 'pie',
name: '师资力量', name: '师资力量',
itemStyle: { itemStyle: {
normal: { shadowBlur: 0,
shadowColor: '#3EB8F7'
},
label: { label: {
show: false show: false
}, },
labelLine: { labelLine: {
show: false show: false
}, },
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
center: ['38%', '50%'], center: ['38%', '50%'],
radius: ['65%', '78%'], radius: ['65%', '78%'],
data: [ data: [
{ {
value: this.edu[0].value, value: this.edu,
label: { label: {
normal: {
rich: { rich: {
a: { a: {
color: '#fff', color: '#fff',
...@@ -384,25 +344,17 @@ export default { ...@@ -384,25 +344,17 @@ export default {
}, },
position: 'center', position: 'center',
show: true show: true
}
}, },
itemStyle: { itemStyle: {
normal: {
color: '#3EB8F7', color: '#3EB8F7',
shadowColor: '#2c6cc4', shadowColor: '#2c6cc4',
shadowBlur: 0 shadowBlur: 0
} }
}
}, { }, {
value: this.edu[0].value / 2 + 20, value: this.edu / 2 + 20,
name: 'invisible', name: 'invisible',
itemStyle: { itemStyle: {
normal: {
color: 'rgba(0, 12, 27)' color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
} }
} }
] ]
...@@ -411,6 +363,17 @@ export default { ...@@ -411,6 +363,17 @@ export default {
} }
} }
}, },
getcoursedata () {
this.coursedata = this.rightData.coursedata.list || []
},
getlinedata () {
this.line = this.rightData.line.list.map(item => {
return {
name: item.key,
value: item.value
}
}) || []
},
// 教学课程百分比 // 教学课程百分比
getline () { getline () {
this.lineConfig = { this.lineConfig = {
...@@ -441,11 +404,11 @@ export default { ...@@ -441,11 +404,11 @@ export default {
barBorderRadius: [5, 0, 0, 5] barBorderRadius: [5, 0, 0, 5]
}, },
label: { label: {
normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-40, 2], offset: [-40, 2],
formatter: function (params) { formatter: function (params) {
console.log(params, '5555')
return '{a|' + params.name + '}{b|' + params.value + '%}' return '{a|' + params.name + '}{b|' + params.value + '%}'
}, },
rich: { rich: {
...@@ -464,7 +427,6 @@ export default { ...@@ -464,7 +427,6 @@ export default {
fontWeight: '400' fontWeight: '400'
} }
} }
}
}, },
data: [this.line[0]] data: [this.line[0]]
}, },
...@@ -480,7 +442,6 @@ export default { ...@@ -480,7 +442,6 @@ export default {
barBorderRadius: [0, 5, 5, 0] barBorderRadius: [0, 5, 5, 0]
}, },
label: { label: {
normal: {
show: true, show: true,
position: 'insideRight', position: 'insideRight',
offset: [-40, 2], offset: [-40, 2],
...@@ -503,7 +464,6 @@ export default { ...@@ -503,7 +464,6 @@ export default {
fontWeight: '400' fontWeight: '400'
} }
} }
}
}, },
data: [this.line[1]] data: [this.line[1]]
} }
...@@ -513,8 +473,8 @@ export default { ...@@ -513,8 +473,8 @@ export default {
}, },
// 学习内容 // 学习内容
getlearn () { getlearn () {
const xData = this.learn.map(v => v.name) const xData = this.rightData.learn.data.list.map(v => v.key)
const Data = this.learn.map(v => v.value) const Data = this.rightData.learn.data.list.map(v => v.value)
this.learnConfig = { this.learnConfig = {
layout: { layout: {
width: '100%', width: '100%',
...@@ -555,6 +515,7 @@ export default { ...@@ -555,6 +515,7 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
fontSize: 14, fontSize: 14,
color: '#469CCC' color: '#469CCC'
...@@ -563,7 +524,8 @@ export default { ...@@ -563,7 +524,8 @@ export default {
}, },
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
max: 'dataMax', max: this.rightData.learn.yMaxValue,
min: this.rightData.learn.yMinValue,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
...@@ -581,12 +543,10 @@ export default { ...@@ -581,12 +543,10 @@ export default {
}, },
axisLabel: { axisLabel: {
formatter: '{value}%', formatter: '{value}%',
textStyle: {
fontSize: 14, fontSize: 14,
fontFamily: 'Century Gothic', fontFamily: 'Century Gothic',
fontWeight: 400, fontWeight: 400,
color: '#469CCC' color: '#469CCC'
}
}, },
boundaryGap: ['20%', '20%'] boundaryGap: ['20%', '20%']
}] }]
......
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