103 lines
3.5 KiB
JavaScript
103 lines
3.5 KiB
JavaScript
/**
|
||
* 顶部header
|
||
*/
|
||
Vue.component("process-control-bar", {
|
||
template: `
|
||
<div @mouseover="MouseEnter" @mouseout="MouseLeave">
|
||
<div class="output-content" ref="process" :style="{'height':height +'px'}">
|
||
<div class="process-for" style="height: 60px;" v-for="(item,i) in forData">
|
||
<div style="display: flex;align-items: center;justify-content: space-between;padding: 10px 0 5px;">
|
||
<div>
|
||
<img src="http://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png" width="12" height="8">
|
||
<span style="color:#fcbc02;font-style:italic;padding-right: 5px;">No.{{i + 1}}</span>
|
||
<span style="color:#c6d9fa">{{item.name}}</span>
|
||
</div>
|
||
<div style="color: #6c829a">
|
||
<span style="color: #c6d9fa">{{item.total}}</span> {{item.unit}}
|
||
<span>（</span>
|
||
<span style="color: #52adf4">{{item.yesMonitor}}</span> {{item.unit}} /
|
||
<span style="color: #4677ff">{{item.notMonitor}}</span> {{item.unit}}
|
||
<span>）</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 8px;">
|
||
<div style="height: 6px;background:rgba(22,203,115,0.1);display: flex;align-items: center">
|
||
<div :style="{'width':item.yesWidth+'%','height':'6px','background':'#52adf4'}"></div>
|
||
<div :style="{'width':item.notWidth+'%','height':'6px','background':'#4677ff'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
`,
|
||
props: {
|
||
list:{
|
||
type:Array
|
||
},
|
||
height:{
|
||
type:Number
|
||
},
|
||
number:{
|
||
type:Number
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
forData:[],
|
||
interval: '',
|
||
index:0,
|
||
}
|
||
},
|
||
mounted() {
|
||
//this.init()
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getData()
|
||
//计划时间
|
||
},
|
||
getData(){
|
||
var data = this.list
|
||
var max = 0;
|
||
for(let i = 0;i<data.length;i++){
|
||
if(max < Number(data[i].total)){
|
||
max = Number(data[i].total)
|
||
}
|
||
}
|
||
data.map(x => {
|
||
x.yesWidth = (Number(x.yesMonitor) / max ) * 100
|
||
x.notWidth = (Number(x.notMonitor) / max ) * 100
|
||
return x
|
||
})
|
||
this.forData = data
|
||
this.$refs.process.scrollTop = 0
|
||
this.index = 0
|
||
this.interval = setInterval(this.scroll, 5000);
|
||
},
|
||
scroll() {
|
||
let offsetHeight = this.$refs.process.querySelectorAll('.process-for')[0].offsetHeight;
|
||
if(this.index == this.forData.length - this.number){
|
||
this.index = 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 (n,o) {
|
||
this.init()
|
||
},
|
||
}
|
||
|
||
})
|