Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 1b6c8504 by wangr
Options

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

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