97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("technical-disclosure-chart", {
|
|
template: `
|
|
<div class="technical-disclosure" :style="{'height':height+'px'}" ref="list" @mouseover="mouseEnter" @mouseout="mouseLeave">
|
|
<div class="technical-disclosure-for" v-for="(item,i) in listData" >
|
|
<div class="technical-disclosure-title">
|
|
<div class="technical-disclosure-text">{{item.name}}</div>
|
|
<div class="technical-disclosure-value">
|
|
<span>{{item.value}}</span>
|
|
<span>{{item.prop}} %</span>
|
|
</div>
|
|
</div>
|
|
<div class="technical-disclosure-border">
|
|
<div class="technical-disclosure-bgd" :style="{'width':item.prop+'%'}" @click="onChart(item)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
height:{
|
|
type: Number,
|
|
},
|
|
datas:{
|
|
type:Array
|
|
},
|
|
number:{
|
|
type: Number,
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
interval: '',
|
|
index:0,
|
|
listData:[],
|
|
num:0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getListDataChart()
|
|
//计划时间
|
|
this.interval = setInterval(this.scroll, 3000);
|
|
},
|
|
getListDataChart(){
|
|
if(this.datas.length>0){
|
|
var data = this.datas
|
|
var arr = []
|
|
for(let i = 0;i< data.length;i++){
|
|
arr.push(data[i].value)
|
|
}
|
|
var max = Math.max(...arr)
|
|
data.map(x => {
|
|
x.prop =((x.value / max ) * 100) .toFixed(2)
|
|
return x
|
|
})
|
|
this.listData = data
|
|
}
|
|
},
|
|
|
|
scroll() {
|
|
const height = $('.technical-disclosure-for').innerHeight()
|
|
let n = this.number ? this.number:0;
|
|
if(this.index == this.listData.length - n){
|
|
this.$refs.list.scrollTop = 0
|
|
this.index = 1
|
|
}else{
|
|
this.index+=1
|
|
}
|
|
$(this.$refs.list).animate({scrollTop:(height * this.index)+'px'})
|
|
},
|
|
|
|
|
|
mouseEnter() {//鼠标移入停止滚动
|
|
clearInterval(this.interval);
|
|
},
|
|
mouseLeave() {//鼠标离开继续滚动
|
|
this.interval = setInterval(this.scroll, 3000);
|
|
},
|
|
onChart(item){
|
|
this.$emit('value',item);
|
|
}
|
|
},
|
|
|
|
watch:{
|
|
datas:function () {
|
|
this.getListDataChart()
|
|
}
|
|
},
|
|
|
|
})
|