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 { ...@@ -96,6 +96,7 @@ export default {
top: 20px; top: 20px;
right: 20px; right: 20px;
cursor: pointer; cursor: pointer;
z-index: 102;
} }
} }
} }
......
src/components/echarts/LineBar.vue
...@@ -52,16 +52,16 @@ export default { ...@@ -52,16 +52,16 @@ export default {
this.barChartConf = { this.barChartConf = {
width, width,
height, height,
option, option
id: 'line-bar-chart-id' + this.utils.randomStr()
} }
}, },
/** /**
* @method getSeriesData 图表数据 * @method getSeriesData 图表数据
*/ */
getSeriesData (data) { getSeriesData () {
const defSeriesOpts = { const defSeriesOpts = [
{
name: 'back', name: 'back',
type: 'bar', type: 'bar',
barWidth: '4px', barWidth: '4px',
...@@ -73,17 +73,35 @@ export default { ...@@ -73,17 +73,35 @@ export default {
}, },
barGap: '-100%', barGap: '-100%',
data: [] 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 markPoint: {
console.log(this.option) 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',
if (seriesData.length) { symbolSize: [10, 10],
const temp = [] data: []
seriesData.forEach(item => { },
temp.push(this.deepMerge({}, defSeriesOpts, item)) data: [],
}) z: 3
result = temp
} }
]
const result = [{}, {}]
result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0])
result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[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>
...@@ -162,8 +162,7 @@ import BarStacked from 'components/echarts/BarStacked.vue' ...@@ -162,8 +162,7 @@ import BarStacked from 'components/echarts/BarStacked.vue'
import BarPillarChart from 'components/echarts/BarPillarChart.vue' import BarPillarChart from 'components/echarts/BarPillarChart.vue'
import GuagePart from 'components/echarts/GuagePart.vue' import GuagePart from 'components/echarts/GuagePart.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: {
...@@ -174,9 +173,7 @@ export default { ...@@ -174,9 +173,7 @@ export default {
GuagePart, GuagePart,
swiper, swiper,
swiperSlide, swiperSlide,
LineBar, LineBar
CountRoll
// PopupFrame
}, },
props: { props: {
rightData: { rightData: {
...@@ -232,16 +229,16 @@ export default { ...@@ -232,16 +229,16 @@ export default {
], ],
topicShow: true, topicShow: true,
// 活动开展 // 活动开展
active: [],
activeConfig: {}, activeConfig: {},
activeList: [ activeSum: '',
{name: '*****活动', value: 192}, activeList: []
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
]
} }
}, },
mounted () { mounted () {
this.init() this.init()
this.getActiveList()
this.getActive()
}, },
methods: { methods: {
init () { init () {
...@@ -256,7 +253,6 @@ export default { ...@@ -256,7 +253,6 @@ export default {
this.getcoursedata(coursedata) this.getcoursedata(coursedata)
this.getlinedata(line) this.getlinedata(line)
this.getlearn(learn) this.getlearn(learn)
this.getActive(this.activeList)
}, },
// 师资力量 // 师资力量
getstaff (Data) { getstaff (Data) {
...@@ -396,12 +392,22 @@ export default { ...@@ -396,12 +392,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 => {
let max = 4166 // x轴的最大值 return {
let maxData = new Array(data.length).fill(max)// x轴的最大值 key: item.key,
let pointData = data.reverse().map((v, i) => { 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 { return {
xAxis: v.value, xAxis: v.value,
yAxis: i yAxis: i
...@@ -432,29 +438,6 @@ export default { ...@@ -432,29 +438,6 @@ export default {
}, },
seriesData: [ 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', name: 'back',
barWidth: '5px', barWidth: '5px',
data: maxData data: maxData
...@@ -464,13 +447,13 @@ export default { ...@@ -464,13 +447,13 @@ export default {
barWidth: '5px', barWidth: '5px',
itemStyle: { itemStyle: {
borderRadius: [0, 0, 0, 0], borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)' color: 'rgba(64, 169, 248, 0.3)'
}, },
markPoint: { markPoint: {
symbolOffset: [0, 0.5], symbolOffset: [0, 0.5],
data: pointData // x轴的数值 data: pointData
}, },
data: [10, 10, 10, 10] data: y2Data
} }
] ]
} }
...@@ -597,13 +580,10 @@ export default { ...@@ -597,13 +580,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;
...@@ -627,13 +607,13 @@ export default { ...@@ -627,13 +607,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