87 lines
3.2 KiB
JavaScript
87 lines
3.2 KiB
JavaScript
Vue.component('security-check', {
|
|
template:`
|
|
<div class="month-list-max" ref="max" @mouseover="mouseEnter" @mouseout="mouseLeave">
|
|
<div class="month-list-for" v-for="(item,i) in data" ref="min">
|
|
<div class="month-list-min">
|
|
<div class="xhz-work-order-title" @click="onWorkOrderTitle(item)">
|
|
<div class="xhz-order-number" v-cloak>{{item.number<10?'0'+item.number:item.number}}</div>
|
|
<div class="xhz-job-number" v-cloak>{{item.title}}</div>
|
|
</div>
|
|
<div class="inspect-content">
|
|
<div class="inspect-content-img">
|
|
<el-image style="width: 100px; height: 100px" :src="item.front_images[0]" fit="fill"
|
|
:preview-src-list="srcList" @click="imagesAmplify(item.front_images)"></el-image>
|
|
<p>整改前</p>
|
|
</div>
|
|
<div class="inspect-content-img">
|
|
<el-image style="width: 100px; height: 100px" :src="item.after_images[0]" fit="fill"
|
|
:preview-src-list="srcList" @click="imagesAmplify(item.after_images)"></el-image>
|
|
<p>整改后</p>
|
|
</div>
|
|
<div class="inspect-content-info">
|
|
<div>问题数：<span class="police-data" v-cloak>{{item.problem_number}}</span> 个</div>
|
|
<div>整改数：<span class="color-green" v-cloak>{{item.correct_number}}</span> 个</div>
|
|
<div>整改率：<span class="classify-data-2" v-cloak>{{item.correct_rate}}</span> %</div>
|
|
<div>检查时间：<span v-cloak>{{item.inspect_time}}</span></div>
|
|
</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);
|
|
}
|
|
},
|
|
imagesAmplify(arr){
|
|
this.srcList = arr
|
|
},
|
|
scrollRoll(){
|
|
var height = this.$refs.min[0].clientHeight;
|
|
if(this.index == this.data.length - 3){
|
|
this.$refs.max.scrollTop = 0
|
|
this.index = 1
|
|
}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()
|
|
}
|
|
}
|
|
}) |