125 lines
3.8 KiB
JavaScript
125 lines
3.8 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("process-control", {
|
|
template: `
|
|
<div @mouseover="MouseEnter" @mouseout="MouseLeave">
|
|
<div v-if="list.length == 0" style="height: 200px;text-align: center;line-height: 200px;color: #aaaaaa">暂无数据</div>
|
|
<div v-if="list.length> 0" class="output-content" :style="{'height':height +'px'}" ref="process">
|
|
<div class="output-content-for" v-for="(item,i) in forData">
|
|
<div class="output-title">
|
|
{{item.title}}
|
|
<div class="output-rightTitle" v-if="righttext">
|
|
{{item.text}} {{item.number}}%
|
|
</div>
|
|
</div>
|
|
|
|
<div class="output-bar"v-if="!prop">
|
|
<div class="output-bar-border">
|
|
<div class="output-bar-background-1" :style="{'width':item.width+'%'}"></div>
|
|
</div>
|
|
<div class="output-bar-value" v-if="!shownumber">{{item.number}}</div>
|
|
</div>
|
|
|
|
<div class="output-bar" v-if="prop">
|
|
<div class="output-bar-border">
|
|
<div class="output-bar-background-1" :style="{'width':item.number}"></div>
|
|
</div>
|
|
<div class="output-bar-value" v-if="!shownumber">{{item.number}}</div>
|
|
</div>
|
|
|
|
<div class="output-bar" v-if="!type">
|
|
<div class="output-bar-border">
|
|
<div class="output-bar-background-2" :style="{'width':item.prop}"></div>
|
|
</div>
|
|
<div class="output-bar-value">{{item.prop}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`,
|
|
props: {
|
|
list:{
|
|
type:Array
|
|
},
|
|
height:{
|
|
type:Number
|
|
},
|
|
number:{
|
|
type:Number
|
|
},
|
|
prop:{
|
|
type:Boolean
|
|
},
|
|
type:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
shownumber:{
|
|
type:Boolean,
|
|
default: false
|
|
},
|
|
righttext:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
forData:[],
|
|
interval: '',
|
|
index:0,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getData()
|
|
//计划时间
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
|
|
},
|
|
getData(){
|
|
var data = this.list
|
|
var max = 0;
|
|
for(let i = 0;i<data.length;i++){
|
|
if(max < Number(data[i].number)){
|
|
max = Number(data[i].number)
|
|
}
|
|
}
|
|
data.map(x => {
|
|
x.width = (Number(x.number) / max ) * 100
|
|
return x
|
|
})
|
|
this.forData = data
|
|
},
|
|
scroll() {
|
|
let offsetHeight = this.$refs.process.querySelectorAll('.output-content-for')[0].offsetHeight;
|
|
if(this.index == this.forData.length - this.number){
|
|
this.index = 0
|
|
this.$refs.process.scrollTop = 0
|
|
}else{
|
|
this.index += 1
|
|
$(this.$refs.process).animate({scrollTop:(offsetHeight * this.index)+'px'})
|
|
}
|
|
|
|
},
|
|
MouseEnter() {//鼠标移入停止滚动
|
|
clearInterval(this.interval);
|
|
},
|
|
MouseLeave() {//鼠标离开继续滚动
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
},
|
|
|
|
},
|
|
watch:{
|
|
list:function () {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|