Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 67102e5b by yangqingjie
Options

update

parent 8631696d
Showing with 31 additions and 231 deletions
src/components/CountRoll.vue deleted 100644 → 0
<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/echarts/LineBar.vue
...@@ -52,8 +52,7 @@ export default { ...@@ -52,8 +52,7 @@ export default {
this.barChartConf = { this.barChartConf = {
width, width,
height, height,
option, option
id: 'line-bar-chart-id' + this.utils.randomStr()
} }
}, },
...@@ -103,7 +102,6 @@ export default { ...@@ -103,7 +102,6 @@ export default {
const result = [{}, {}] const result = [{}, {}]
result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0]) result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0])
result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[1]) result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[1])
console.log(result[0], result[1])
return result return result
}, },
......
src/pages/index/Right.vue
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="activity-two"> <div class="activity-two">
<div class="left"> <div class="left">
<div class="act-left"> <div class="act-left">
<count-roll :count="4166" /><span>次</span> <count-roll :count="this.rightData.active.total" /><b>次</b>
</div> </div>
<p class="act-num">活动开展次数</p> <p class="act-num">活动开展次数</p>
</div> </div>
...@@ -160,8 +160,7 @@ import 'swiper/dist/css/swiper.css' ...@@ -160,8 +160,7 @@ 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 PopupFrame from './PopupFrame'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
...@@ -170,8 +169,7 @@ export default { ...@@ -170,8 +169,7 @@ export default {
PieChart, PieChart,
swiper, swiper,
swiperSlide, swiperSlide,
LineBar, LineBar
CountRoll
}, },
props: { props: {
rightData: { rightData: {
...@@ -227,13 +225,10 @@ export default { ...@@ -227,13 +225,10 @@ export default {
], ],
topicShow: true, topicShow: true,
// 活动开展 // 活动开展
active: [],
activeConfig: {}, activeConfig: {},
activeSum: '', activeSum: '',
activeList: [ activeList: []
{name: '*****活动', value: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
]
} }
}, },
mounted () { mounted () {
...@@ -243,7 +238,8 @@ export default { ...@@ -243,7 +238,8 @@ export default {
this.getlinedata() this.getlinedata()
this.getline() this.getline()
this.getlearn() this.getlearn()
this.getActive(this.activeList) this.getActiveList()
this.getActive()
}, },
methods: { methods: {
// 师资力量 // 师资力量
...@@ -399,7 +395,6 @@ export default { ...@@ -399,7 +395,6 @@ export default {
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: {
...@@ -583,15 +578,22 @@ export default { ...@@ -583,15 +578,22 @@ export default {
} }
} }
}, },
getActive (data) { // 活动展开
let yData = data.map(v => v.name).reverse() // y轴左侧的数据 getActiveList () {
let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据 this.activeList = this.rightData.active.list.map(item => {
console.log(y2Data) return {
let max = y2Data[0] + y2Data[1] + y2Data[2] key: item.key,
this.activeSum = max value: item.value
// let max = 4166 // x轴的最大值 }
let maxData = new Array(data.length).fill(max)// x轴的最大值 })
let pointData = data.reverse().map((v, i) => { this.activeSum = this.rightData.active.total
},
getActive () {
let yData = this.activeList.map(v => v.key).reverse() // y轴左侧的数据
let y2Data = this.activeList.map(v => v.value).reverse() // y轴右侧的数据
let max = this.activeSum
let maxData = new Array(this.activeList.length).fill(max)// x轴的最大值
let pointData = this.activeList.reverse().map((v, i) => {
return { return {
xAxis: v.value, xAxis: v.value,
yAxis: i yAxis: i
...@@ -764,13 +766,10 @@ export default { ...@@ -764,13 +766,10 @@ export default {
justify-content: space-between; justify-content: space-between;
.left{ .left{
margin-top:10px; margin-top:10px;
width: 150px; width: 35%;
.act-left{ .act-left{
display: flex; display: flex;
.act-style{ b{
width: 150px;
}
span{
width: 16px; width: 16px;
height: 17px; height: 17px;
margin-top: 22px; margin-top: 22px;
...@@ -794,13 +793,13 @@ export default { ...@@ -794,13 +793,13 @@ export default {
} }
} }
.line{ .line{
width: 3px; width: 5%;
height: 76px; height: 76px;
margin: 10px 0 0 20px; margin: 10px 0 0 20px;
background:url('../../../static/images/index/3.png'); background:url('../../../static/images/index/3.png') no-repeat center;
} }
.right{ .right{
width: 270px; width: 60%;
height: 100%; height: 100%;
} }
} }
......
src/pages/index/index.vue
...@@ -77,7 +77,8 @@ export default { ...@@ -77,7 +77,8 @@ export default {
staff: data.p12 || {}, // 师资力量 staff: data.p12 || {}, // 师资力量
coursedata: data.p13 || {}, // 教学课程 coursedata: data.p13 || {}, // 教学课程
line: data.p14 || {}, // 教学线上线下比例 line: data.p14 || {}, // 教学线上线下比例
learn: data.p15 || {} // 学习内容 learn: data.p15 || {}, // 学习内容
active: data.p16 || {} // 活动开展
} }
} 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