Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 32dc719f by wdc147
Options

Merge remote-tracking branch 'origin/20210819' into wdc

parents f7b874fb b6a259d5
Showing with 829 additions and 5 deletions
src/components/CountTo.vue 0 → 100644
<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/Swiper/index.vue 0 → 100644
<template>
<swiper :options="swiperOption">
<slot>
<!-- 滚动内容 -->
<!-- 下面的按需求引入 -->
</slot>
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</template>
<script>
import { swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
swiperOption: {
// 滚动方向
// direction: 'vertical',
// 展示swiper-slide的个数
slidesPerView: 1,
// 展示swiper-slide是否居中
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true
// 显示分页
// pagination: {
// el: '.swiper-pagination',
// clickable: true // 允许分页点击跳转
// },
// 设置点击箭头
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// }
}
}
},
components: {
swiper
},
created () {
this.initPage()
},
methods: {
initPage () {
// 合并参数
Object.assign(this.swiperOption, this.options)
}
}
}
</script>
<style lang="less" scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
.swiper-slide {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/components/echarts/LineChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'LineChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '160px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '160px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'line',
symbol: 'circle',
symbolSize: 4,
lineStyle: {
width: 2,
shadowOffsetX: 5,
shadowOffsetY: 3,
shadowBlur: 20
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultColors = ['#00BEFF', '#00DE7D']
const defaultOption = {
color: defaultColors,
title: {
show: false
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
top: '-2%',
right: '0%',
itemGap: 40,
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'MicrosoftYaHei'
},
data: []
},
tooltip: {
trigger: 'item',
position: 'top',
padding: [3, 5],
borderColor: '#3EB9FF',
backgroundColor: '#1771B8',
textStyle: {
height: 12,
fontSize: 14,
color: '#fff'
},
formatter (item) {
return item.value
}
},
grid: {
left: 0,
right: 30,
bottom: 0,
top: 20,
containLabel: true
},
xAxis: {
type: 'category',
// 两边留白
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#3EB9FF',
opacity: 0.3
}
},
data: []
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#9CBCF9',
opacity: 0.5
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
}
}
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Center.vue
<template> <template>
<div class="managePlatform-center"></div> <div class="managePlatform-center">
<div class="survey-content">
<div class="item" v-for="(g, l) in survey" :key="l">
<count-to :endVal="g.value" />
<p>{{g.name}}</p>
</div>
</div>
<div class="footer">
<div class="item course">
<title-line :con="'发展历程'"></title-line>
<div class="courseModal">
2021年学校成立
***********************
</div>
</div>
<div class="item framework">
<title-line :con="'组织架构'"></title-line>
</div>
</div>
</div>
</template> </template>
<script> <script>
import TitleLine from '@/components/TitleLine'
export default { export default {
name: 'Center', name: 'Center',
components: {
TitleLine
},
data () { data () {
return {} return {
survey: [
{ name: '学员数', value: 31721 },
{ name: '班级数', value: 105 },
{ name: '二级协会数', value: 15 }
]
}
}, },
mounted () {}, mounted () {},
...@@ -18,5 +48,72 @@ export default { ...@@ -18,5 +48,72 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.managePlatform-center { .managePlatform-center {
width: 100%;
position: relative;
.survey-content {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
.item {
width: 220px;
height: 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
span {
font-size: 42px;
color: #FFFFFF;
font-weight: 400;
}
p {
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
}
}
.item:nth-child(2) {
border-left: 1px solid rgba(89, 183, 249, 0.8);
border-right: 1px solid rgba(89, 183, 249, 0.8);
}
}
.footer {
width: calc(100% - 30px);
height: 270px;
position: absolute;
left: 15px;
top: 740px;
background: rgba(0, 7, 17, 0.18);
padding: 10px 15px;
display: flex;
justify-content: space-between;
.item {
width: 50%;
height: 100%;
box-sizing: border-box;
}
.course {
background: url('../../../static/images/index/courseBG.png') left top 113px no-repeat;
}
.courseModal {
width: 214px;
height: 75px;
background: rgba(0, 190, 255, 0.1);
border: 1px solid;
border-image: linear-gradient(176deg, rgba(61, 162, 242, 0), #3DA2F2, rgba(10, 79, 135, 0)) 1 1;
box-sizing: border-box;
padding: 8px 12px;
font-size: 14px;
font-weight: 300;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
}
.framework{
padding-left: 42px;
background: url('../../../static/images/index/frameworkBG.png') right top 43px no-repeat;
}
}
} }
</style> </style>
\ No newline at end of file
src/pages/index/Left.vue
...@@ -53,6 +53,55 @@ ...@@ -53,6 +53,55 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- 行业分布 -->
<div class="industry">
<div class="partTitle margin20-10">年龄结构</div>
<bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
</div>
<!-- 参与度|活跃度 -->
<div class="degree">
<div class="selectTitle">
<span :class="degreeKey === 'participate' ? 'curr' : ''" @click="changeDegree('participate')">参与度</span>
<i> | </i>
<span :class="degreeKey === 'active' ? 'curr' : ''" @click="changeDegree('active')">活跃度</span>
</div>
<line-chart :option="degreeConfig.option" />
</div>
<!-- 学员风采|明星班级 -->
<div class="great">
<div class="selectTitle">
<span :class="greatKey === 0 ? 'curr' : ''" @click="greatKey = 0">学员风采</span>
<i> | </i>
<span :class="greatKey === 1 ? 'curr' : ''" @click="greatKey = 1">明星班级</span>
</div>
<!-- 学员风采 -->
<div class="studentDemeanor" v-if="greatKey === 0">
<swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in studentDemeanor" :key="index">
<img :src="item.pic" alt="照片" @click="openStudent(index)">
<p>{{item.name}}</p>
<p>{{item.position}}</p>
</swiper-slide>
</swiper>
</div>
<!-- 明星班级 -->
<div class="starClass" v-if="greatKey === 1">
<vue-seamless-scroll
:data="starClass"
:class-option="classOption"
class="scrolliframe"
>
<ul>
<li v-for="(item, index) in starClass" :key="index">
<span>{{item.name}}</span>
<span>{{item.content1}}</span>
<span>{{item.content2}}</span>
<span>{{item.content3}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div> </div>
</template> </template>
...@@ -60,6 +109,9 @@ ...@@ -60,6 +109,9 @@
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 Swiper from '@/components/Swiper'
import { swiperSlide } from 'vue-awesome-swiper'
import utils from 'utils' import utils from 'utils'
export default { export default {
name: 'Left', name: 'Left',
...@@ -67,7 +119,10 @@ export default { ...@@ -67,7 +119,10 @@ export default {
components: { components: {
TitleLine, TitleLine,
BarChart, BarChart,
PieChart PieChart,
LineChart,
Swiper,
swiperSlide
}, },
filters: { filters: {
...@@ -155,7 +210,196 @@ export default { ...@@ -155,7 +210,196 @@ export default {
] ]
}, },
// 分布当前展示数据标识 // 分布当前展示数据标识
distShowKey: 'party' distShowKey: 'party',
// 行业分布
industry: [
{
name: '家电行业',
value: 4172
}, {
name: '电子信息',
value: 892
}, {
name: '机械制造',
value: 8321
}, {
name: '纺织生产',
value: 1892
}, {
name: '生物医药',
value: 1892
}
],
industryConfig: {
layout: {
height: '143px'
}
},
// 参与度活跃度
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: '',
degreeConfig: {},
// 学员风采
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: {
loop: false,
autoplay: false,
centeredSlides: false,
slidesPerView: 4.5
},
// 明星班级
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: {
step: 0.35,
singleHeight: 50
},
greatKey: 0
} }
}, },
...@@ -163,6 +407,8 @@ export default { ...@@ -163,6 +407,8 @@ export default {
this.init() this.init()
this.getAge() this.getAge()
this.getEdu() this.getEdu()
this.getIndustry()
this.changeDegree('participate')
}, },
methods: { methods: {
...@@ -210,6 +456,85 @@ export default { ...@@ -210,6 +456,85 @@ export default {
// 党派/民族分布 // 党派/民族分布
changeDist (type) { changeDist (type) {
this.distShowKey = type this.distShowKey = type
},
// 行业分布
getIndustry () {
this.industryConfig.option = {
seriesData: [
{
label: {
fontSize: 24,
formatter: item => {
return utils.dealWithNumber(item.value)
}
},
data: this.industry.map(item => item.value).reverse()
}
],
base: {
grid: {
left: 10,
right: 80
},
yAxis: [{
axisLabel: {
color: '#6DCDFF',
fontSize: 16,
padding: [0, 10, 0, 0],
fontFamily: 'Microsoft YaHei'
},
data: this.industry.map(item => item.name).reverse()
}]
}
}
},
// 切换参与度与活跃度
changeDegree (type) {
this.degreeKey = type
const legendData = this.degree[this.degreeKey].map(v => v.name)
const xData = this.degree[this.degreeKey][0].value.map(v => v.name)
const y1Data = this.degree[this.degreeKey][0].value.map(v => v.value)
const y2Data = this.degree[this.degreeKey][1].value.map(v => v.value)
this.degreeConfig = {
option: {
base: {
xAxis: {
data: xData
},
legend: {
data: legendData
}
},
seriesData: [
{
name: this.degree[this.degreeKey][0].name,
data: y1Data
}, {
name: this.degree[this.degreeKey][1].name,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 222, 125, .85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: y2Data
}
]
}
}
},
// 学员风采
openStudent (index) {
console.log(index)
} }
} }
} }
...@@ -224,6 +549,9 @@ export default { ...@@ -224,6 +549,9 @@ export default {
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
line-height: 18px; line-height: 18px;
&.margin20-10 {
margin: 20px 0 10px;
}
} }
.gender { .gender {
display: flex; display: flex;
...@@ -347,5 +675,74 @@ export default { ...@@ -347,5 +675,74 @@ export default {
} }
} }
} }
.selectTitle {
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 28px;
font-size: 16px;
color: #6DCDFF;
span {
cursor: pointer;
&.curr {
font-size: 18px;
color: #FFFFFF;
}
}
i {
font-size: 18px;
color: #FFFFFF;
}
}
.degree {
margin-top: 10px;
}
.great {
margin-top: 10px;
.studentDemeanor {
margin-top: 17px;
width: 100%;
height: 150px;
.swiper-container {
.swiper-slide {
cursor: pointer;
text-align: center;
.img {
width: 88px;
height: 88px;
}
p {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
&:nth-child(3) {
margin-top: 5px;
}
}
}
}
}
.starClass {
.scrolliframe {
width: 100%;
height: 150px;
overflow: hidden;
ul {
li {
width: 480px;
height: 50px;
background: url('../../../static/images/index/starClassBg.png') no-repeat left center;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 34px;
padding: 8px 0px 8px 40px;
}
}
}
}
}
} }
</style> </style>
\ No newline at end of file
src/pages/index/index.vue
...@@ -40,5 +40,8 @@ export default { ...@@ -40,5 +40,8 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.index-page {
width: 1920px;
margin: 0 auto;
}
</style> </style>
src/public/plugins/index.js
...@@ -4,6 +4,8 @@ import mixins from '../mixins' ...@@ -4,6 +4,8 @@ import mixins from '../mixins'
import ContentContainer from 'components/ContentContainer' import ContentContainer from 'components/ContentContainer'
// 页面头 // 页面头
import Header from 'components/Header' import Header from 'components/Header'
// 插件
import CountTo from 'components/CountTo.vue'
const UsePlugin = {} const UsePlugin = {}
...@@ -18,6 +20,8 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -18,6 +20,8 @@ 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)
} }
export default UsePlugin export default UsePlugin
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