mkl_power_box/components/security-check-node.js

75 lines
2.5 KiB
JavaScript

Vue.component('security-check-node', {
template:`
<div class="plan-max" ref="max" @mouseover="mouseEnter" @mouseout="mouseLeave">
<div class="plan-list-for" ref="min" v-for="(item,i) in data">
<div class="plan-list-min">
<div class="plan-list-title plan-list-title-border" @click="onWorkOrderTitle(item)">
<div class="xhz-order-number" v-cloak>{{i<10?'0'+(i+1):(i+1)}}</div>
<div class="xhz-job-number" v-cloak>{{item.project_name}}</div>
</div>
<div style="padding: 10px;">
<div class="plan-list-con">节点名称:<span class="popup-color" v-cloak>{{item.node_name}}</span></div>
<div class="plan-list-con">计划完成时间:<span class="popup-color" v-cloak>{{item.node_time}}</span></div>
<div class="plan-list-con">剩余天数:<span :class="item.state==1?'people-info-action':'warning-popup-color-red'" v-cloak>
{{item.node_days}}</span></div>
</div>
</div>
</div>
</div>
`,
props: {
data:{
type:Array
}
},
data() {
return {
srcList:[],
index:0,
interval:'',
};
},
mounted(){
this.init()
},
created() {
},
methods: {
init(){
if(this.data.length > 3){
this.interval = setInterval(this.scrollRoll, 5000);
this.index = 0
}
},
imagesAmplify(arr){
this.srcList = arr
},
scrollRoll(){
var height = this.$refs.min[0].clientHeight;
if(this.index == this.data.length - 2){
this.$refs.max.scrollTop = 0
this.index = 0
}else{
this.index+=1
}
$(this.$refs.max).animate({scrollTop:(height * this.index)+'px'})
},
mouseEnter() {//鼠标移入停止滚动
clearInterval(this.interval);
},
mouseLeave() {//鼠标离开继续滚动
if(this.data.length > 3) {
this.interval = setInterval(this.scrollRoll, 5000);
}
},
onWorkOrderTitle(e){
this.$emit('item',e);
}
},
watch:{
data:function () {
this.init()
}
}
})