Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 29ee0e2d by wdc147
Options

update

parent 63662dd4
Showing with 67 additions and 265 deletions
runner @ f4746173
Subproject commit 0a4f2d33af0abc1da40e1482e27708fb9bea6ac1
Subproject commit f4746173cf454453e2895964ec3ed3d6a13d0e42
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/PopupFrame.vue
......@@ -96,6 +96,7 @@ export default {
top: 20px;
right: 20px;
cursor: pointer;
z-index: 102;
}
}
}
......
src/components/echarts/LineBar.vue
......@@ -52,16 +52,16 @@ export default {
this.barChartConf = {
width,
height,
option,
id: 'line-bar-chart-id' + this.utils.randomStr()
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData (data) {
const defSeriesOpts = {
getSeriesData () {
const defSeriesOpts = [
{
name: 'back',
type: 'bar',
barWidth: '4px',
......@@ -73,17 +73,35 @@ export default {
},
barGap: '-100%',
data: []
},
{
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(59, 150, 235, 0.1)'
}, {
offset: 1,
color: '#3b96eb'
}], false)
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
console.log(this.option)
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
},
markPoint: {
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
symbolSize: [10, 10],
data: []
},
data: [],
z: 3
}
]
const result = [{}, {}]
result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0])
result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[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>
......@@ -162,8 +162,7 @@ import BarStacked from 'components/echarts/BarStacked.vue'
import BarPillarChart from 'components/echarts/BarPillarChart.vue'
import GuagePart from 'components/echarts/GuagePart.vue'
import LineBar from 'components/echarts/LineBar'
import CountRoll from 'components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default {
name: 'Right',
components: {
......@@ -174,9 +173,7 @@ export default {
GuagePart,
swiper,
swiperSlide,
LineBar,
CountRoll
// PopupFrame
LineBar
},
props: {
rightData: {
......@@ -232,16 +229,16 @@ export default {
],
topicShow: true,
// 活动开展
active: [],
activeConfig: {},
activeList: [
{name: '*****活动', value: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
]
activeSum: '',
activeList: []
}
},
mounted () {
this.init()
this.getActiveList()
this.getActive()
},
methods: {
init () {
......@@ -256,7 +253,6 @@ export default {
this.getcoursedata(coursedata)
this.getlinedata(line)
this.getlearn(learn)
this.getActive(this.activeList)
},
// 师资力量
getstaff (Data) {
......@@ -396,12 +392,22 @@ export default {
}
}
},
getActive (data) {
let yData = data.map(v => v.name).reverse() // y轴左侧的数据
let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据
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
......@@ -432,29 +438,6 @@ export default {
},
seriesData: [
{
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(59, 150, 235, 1)'
}, {
offset: 1,
color: '#3b96eb'
}], false)
}
},
markPoint: {
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
symbolSize: [10, 10],
data: []
},
data: [50]
},
{
name: 'back',
barWidth: '5px',
data: maxData
......@@ -464,13 +447,13 @@ export default {
barWidth: '5px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)'
color: 'rgba(64, 169, 248, 0.3)'
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData // x轴的数值
data: pointData
},
data: [10, 10, 10, 10]
data: y2Data
}
]
}
......@@ -597,13 +580,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;
......@@ -627,13 +607,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