Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 6b1085ad by yuanfeng
Options

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

parents 2f1e0214 f21ad4b8
Showing with 590 additions and 176 deletions
src/components/CountRoll.vue 0 → 100644
<template>
<div class="chartNum">
<div :class="isMin ? 'box-item-min' : 'box-item'">
<li v-for="(item,index) in orderNum"
:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
        <span v-if="!isNaN(item)">
         <i ref="numberItem">0123456789</i>
       </span>
       <span class="comma" v-else>{{item}}</span>
</li>
</div>
</div>
</template>
<script>
export default {
name: 'CountRoll',
props: {
count: Number,
isMin: {
type: Boolean,
default: false
}
},
data () {
return {
orderNum: []
}
},
mounted () {
this.toOrderNum(this.count)
this.increaseNumber()
},
deactivated () {
clearInterval(this.timer)
},
methods: {
// TODO: 定时器
increaseNumber () {
this.timer = setInterval(() => {
this.setNumberTransform()
}, 300)
},
// TODO：设置文字滚动
setNumberTransform () {
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
const numberArr = this.orderNum.filter(item => !isNaN(item))
// 结合CSS 对数字字符进行滚动
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
}
clearInterval(this.timer)
},
// TODO: 处理数字
toOrderNum (num) {
num = this.utils.formatNumber(num, num.length)
this.orderNum = num // 将其便变成数据，渲染至滚动数组
}
}
}
</script>
<style scoped lang='less'>
.chartNum {
.box-item {
position: relative;
font-size: 36px;
line-height: 48px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 20px;
height: 48px;
border: 1px solid #2B79BC;
margin-right: 5px;
line-height: 10px;
font-size: 36px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 30px;
height: 48px;
display: flex;
list-style: none;
margin-right: 5px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 6px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
.box-item-min {
position: relative;
font-size: 28px;
line-height: 36px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 24px;
height: 36px;
border: 1px solid #2B79BC;
margin-right: 8px;
line-height: 10px;
font-size: 28px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 24px;
height: 36px;
display: flex;
list-style: none;
margin-right: 8px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 2px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
}
</style>
src/components/PopupFrame.vue
......@@ -94,8 +94,8 @@ export default {
.close {
width: 24px;
height: 24px;
background: url('../../static/images/index/bulletFrame-close.png')
no-repeat left top;
// background: url('../../static/images/index/bulletFrame-close.png')
// no-repeat left top;
position: absolute;
top: 36px;
right: 19px;
......
src/pages/index/Right.vue
......@@ -18,9 +18,10 @@
<div class="seemore">查看更多</div>
</div>
<p class="percent">
<span>课程数<count-to :endVal="120" /></span>
<span>学习总时长<count-to :endVal="1248" /></span>
<span>出勤率<count-to :endVal="88" suffix="%"/></span>
<span v-for="(item, l) in coursedata" :key="l">
{{item.name}}
<count-to :endVal="item.value" :suffix="item.unit"/>
</span>
</p>
<div class="line">
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
......@@ -33,8 +34,36 @@
</div>
<!-- 活动开展 -->
<div class='activ'>
<active />
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor" @click="getMore">查看更多</div>
</div>
<div class="activity-two">
<div class="left">
<div class="act-left">
<count-roll :count="4166" class="act-style"/><span>次</span>
</div>
<p class="act-num">活动开展次数</p>
</div>
<div class="line"></div>
<div class="right">
<line-bar
:layout="activeConfig.layout"
:option="activeConfig.option"
/>
</div>
</div>
</div>
<popup-frame
:visible.sync="activeShow"
@beforeClose="beforeCloses"
>
<div class="img">
<img src="../../../static/images/index/03.png" alt="">
</div>
</popup-frame>
<popup-frame
:visible.sync="showVisible"
@beforeClose="beforeCloses"
......@@ -114,6 +143,8 @@
</div>
</div>
</div>
<!-- 活动开展 查看更多的弹出层 -->
</div>
</template>
......@@ -123,7 +154,9 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import active from './active'
import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default {
name: 'Right',
components: {
......@@ -132,10 +165,21 @@ export default {
PieChart,
swiper,
swiperSlide,
active
LineBar,
CountRoll
// PopupFrame
},
props: {
rightData: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
activeShow: false,
showVisible: false,
// 师资力量
eduConfig: {},
......@@ -159,6 +203,21 @@ export default {
}
],
// 教学课程
coursedata: [
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
lineConfig: {},
line: [
{
......@@ -227,7 +286,20 @@ export default {
img: '../../../static/images/index/topic-bg1.png'
}
]
],
// 活动开展
activeConfig: {},
activeList: [
{name: '*****活动', value: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
],
moreConfig: {
props: {
visible: false,
title: ''
}
}
}
},
mounted () {
......@@ -235,111 +307,101 @@ export default {
this.getEdu()
this.getline()
this.getlearn()
this.getActive(this.activeList)
},
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'
},
// 师资力量
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
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%']
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
},
getEdu () {
this.eduConfig = {
option: {
base: {
color: [],
legend: {
show: false
}
},
seriesData: [
{
type: 'bar',
barWidth: 6,
type: 'pie',
name: '师资力量',
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
normal: {
label: {
show: false
},
{
offset: 0,
color: '#00BEFf'
}
]),
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
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 +507,174 @@ 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: {
base: {
legend: {
show: false
}
tooltip: {
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: [
{
type: 'pie',
name: '师资力量',
type: 'bar',
barWidth: 6,
itemStyle: {
normal: {
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
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
}
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
},
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'
}
{
offset: 0,
color: '#00BEFf'
}
}
]
]),
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: Data
}
]
}
}
},
// 师资力量
getstaff () {
this.staffConfig = {
getActive (data) {
let yData = data.map(v => v.name).reverse()
let y2Data = data.map(v => v.value).reverse()
let max = 4166
let maxData = new Array(data.length).fill(max)
let pointData = data.reverse().map((v, i) => {
return {
xAxis: v.value,
yAxis: i
}
})
this.activeConfig = {
layout: {
width: '100%',
height: '100%'
},
option: {
base: {
xAxis: {
max: max
},
yAxis: [
{
axisLabel: {
color: '#fff',
align: 'left',
padding: [0, 0, 0, -60]
},
data: yData
}, {
data: y2Data.map(v => v)
}
]
},
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
name: 'back',
barWidth: '5px',
data: maxData
},
{
name: 'show',
barWidth: '5px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)'
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData
},
data: y2Data
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
]
}
}
},
// 查看更多的点击事件
getMore () {
console.log(123)
this.activeShow = true
},
// 交流会/专题弹框
topicDialog () {
this.showVisible = true
......@@ -542,6 +682,7 @@ export default {
// 关闭交流会/专题弹框弹框前的回调
beforeCloses (flag) {
this.showVisible = flag
this.activeShow = flag
}
}
}
......@@ -613,9 +754,80 @@ export default {
}
// 活动开展
.activ{
width: 100%;
height: 150px;
}
width: 100%;
height: 140px;
.activity-one{
height: 20px;
display: flex;
justify-content: space-between;
.act{
width: 72px;
height: 20px;
margin-top: -5px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
.mor{
width: 94px;
height: 20px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background:url('../../../static/images/index/more.png') no-repeat right;
}
}
.activity-two{
margin-top: 12px;
display: flex;
justify-content: space-between;
.left{
margin-top:10px;
width: 150px;
.act-left{
display: flex;
.act-style{
width: 150px;
}
span{
width: 16px;
height: 17px;
margin-top: 22px;
margin-left: 12px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 35px;
}
}
.act-num{
width: 108px;
height: 18px;
margin-top: 20px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 17px;
}
}
.line{
width: 3px;
height: 76px;
margin: 10px 0 0 20px;
background:url('../../../static/images/index/3.png');
}
.right{
width: 270px;
height: 100%;
}
}
}
.right-bottom {
position: relative;
.seemore {
......
src/pages/index/index.vue
......@@ -74,6 +74,10 @@ export default {
}
// 右侧数据
this.rightData = {
staff: data.p12 || {}, // 师资力量
coursedata: data.p13 || {}, // 教学课程
line: data.p14 || {}, // 教学线上线下比例
learn: data.p15 || {} // 学习内容
}
} catch (err) {
console.log('managePlatform >', err)
......
src/public/apis/proxy.js
......@@ -4,7 +4,7 @@
module.exports = {
host: '127.0.0.1',
port: '8082', // 自定义端口号
port: '8087', // 自定义端口号
proxyTable: { // Vue开发环境跨域配置
'/apis': {
target: 'http://test-a.com',
......
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