Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 3553e448 by yangqingjie
Options

update

parents 0bf13d2f 40a186fd
Showing with 168 additions and 214 deletions
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/pages/index/Left.vue
...@@ -99,15 +99,19 @@ ...@@ -99,15 +99,19 @@
</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 {
...@@ -185,7 +189,9 @@ export default { ...@@ -185,7 +189,9 @@ export default {
step: 0.35, step: 0.35,
singleHeight: 50 singleHeight: 50
}, },
greatKey: 0 greatKey: 0,
// 弹框是否显示
visible: false
} }
}, },
...@@ -385,6 +391,11 @@ export default { ...@@ -385,6 +391,11 @@ export default {
// 打开学员风采弹框 // 打开学员风采弹框
openStudent (index) { openStudent (index) {
console.log(index) console.log(index)
this.visible = true
},
// 关闭弹框
closePopup (data) {
this.visible = data
}, },
// 把数组中的key转成name // 把数组中的key转成name
formatArr (arr) { formatArr (arr) {
......
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>
...@@ -67,9 +67,12 @@ ...@@ -67,9 +67,12 @@
<popup-frame <popup-frame
:visible.sync="showVisible" :visible.sync="showVisible"
@beforeClose="beforeCloses" @beforeClose="beforeCloses"
class="topic-frame"
> >
<div class="img"> <div class="img">
<img src="../../../static/images/index/supply-demand2.jpg" alt=""> <img src="../../../static/images/index/supply-demand1.jpg" alt="" v-show="topicShow">
<img src="../../../static/images/index/supply-demand2.jpg" alt="" v-show="!topicShow">
<div class="button" @click="topicChange"></div>
</div> </div>
</popup-frame> </popup-frame>
<div class="right-bottom"> <div class="right-bottom">
...@@ -147,14 +150,14 @@ ...@@ -147,14 +150,14 @@
</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'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
...@@ -181,9 +184,7 @@ export default { ...@@ -181,9 +184,7 @@ export default {
showVisible: false, showVisible: false,
// 师资力量 // 师资力量
eduConfig: {}, eduConfig: {},
edu: [ edu: null,
{ value: 168, name: '教师数' }
],
staffConfig: {}, staffConfig: {},
staff: [ staff: [
{ {
...@@ -201,63 +202,12 @@ export default { ...@@ -201,63 +202,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,
...@@ -285,6 +235,7 @@ export default { ...@@ -285,6 +235,7 @@ export default {
} }
], ],
topicShow: true,
// 活动开展 // 活动开展
activeConfig: {}, activeConfig: {},
activeList: [ activeList: [
...@@ -296,7 +247,9 @@ export default { ...@@ -296,7 +247,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)
...@@ -308,17 +261,31 @@ export default { ...@@ -308,17 +261,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: {
...@@ -333,16 +300,14 @@ export default { ...@@ -333,16 +300,14 @@ export default {
type: 'pie', type: 'pie',
name: '师资力量', name: '师资力量',
itemStyle: { itemStyle: {
normal: { shadowBlur: 0,
label: { shadowColor: '#3EB8F7'
show: false },
}, label: {
labelLine: { show: false
show: false },
}, labelLine: {
shadowBlur: 0, show: false
shadowColor: '#3EB8F7'
}
}, },
clockWise: false, clockWise: false,
hoverAnimation: false, hoverAnimation: false,
...@@ -350,47 +315,38 @@ export default { ...@@ -350,47 +315,38 @@ export default {
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', align: 'center',
align: 'center', fontSize: 30,
fontSize: 30, fontWeight: '400'
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
}, },
position: 'center', b: {
show: true color: '#fff',
} align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
},
position: 'center',
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'
}
} }
} }
] ]
...@@ -399,6 +355,17 @@ export default { ...@@ -399,6 +355,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 = {
...@@ -429,28 +396,27 @@ export default { ...@@ -429,28 +396,27 @@ 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: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
}, },
rich: { b: {
a: { color: '#fff',
color: '#fff', align: 'center',
align: 'center', fontSize: 24,
fontSize: 14, fontFamily: 'Century Gothic',
fontFamily: 'Microsoft YaHei', fontWeight: '400'
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
} }
} }
}, },
...@@ -468,28 +434,26 @@ export default { ...@@ -468,28 +434,26 @@ 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], formatter: function (params) {
formatter: function (params) { return '{a|' + params.name + '}{b|' + params.value + '%}'
return '{a|' + params.name + '}{b|' + params.value + '%}' },
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
}, },
rich: { b: {
a: { color: '#fff',
color: '#fff', align: 'center',
align: 'center', fontSize: 24,
fontSize: 14, fontFamily: 'Century Gothic',
fontFamily: 'Microsoft YaHei', fontWeight: '400'
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
} }
} }
}, },
...@@ -501,8 +465,8 @@ export default { ...@@ -501,8 +465,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%',
...@@ -543,6 +507,7 @@ export default { ...@@ -543,6 +507,7 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
fontSize: 14, fontSize: 14,
color: '#469CCC' color: '#469CCC'
...@@ -551,7 +516,8 @@ export default { ...@@ -551,7 +516,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: {
...@@ -569,12 +535,10 @@ export default { ...@@ -569,12 +535,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%']
}] }]
...@@ -698,7 +662,11 @@ export default { ...@@ -698,7 +662,11 @@ export default {
beforeCloses (flag) { beforeCloses (flag) {
this.showVisible = flag this.showVisible = flag
this.activeShow = flag this.activeShow = flag
},
topicChange () {
this.topicShow = !this.topicShow
} }
} }
} }
</script> </script>
...@@ -1010,5 +978,21 @@ export default { ...@@ -1010,5 +978,21 @@ export default {
} }
} }
} }
.topic-frame{
width: 100%;
height: 100%;
.img{
position: relative;
width: 100%;
height: 100%;
.button{
width: 50px;
height: 100px;
position: absolute;
top: 40%;
right: 10px;
}
}
}
} }
</style> </style>
\ No newline at end of file
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)
} }
......
static/images/index/03.png
static/images/index/03.png

313 KB | W: | H:

static/images/index/03.png

360 KB | W: | H:

static/images/index/03.png
static/images/index/03.png
static/images/index/03.png
static/images/index/03.png
  • 2-up
  • Swipe
  • Onion skin
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