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()
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|