128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<template>
|
||
<div @mouseover="MouseEnter" @mouseout="MouseLeave" class="process-control-bar">
|
||
<div class="output-content" ref="process" :style="{ height: height + 'px' }">
|
||
<div class="process-for" v-for="(item, i) in forData" :key="i">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 0 5px">
|
||
<div class="text-row1">
|
||
<img src="/cdn/images/arr_up_green.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" class="text-row2">
|
||
<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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
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 els=this.$el.querySelectorAll(".process-for");
|
||
if(els.length==0){
|
||
return;
|
||
}
|
||
let offsetHeight = els[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();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.process-control-bar {
|
||
.process-for {
|
||
height: 60px;
|
||
font-size:14px;
|
||
}
|
||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
.process-for {
|
||
height: 70px;
|
||
margin: 20px 0px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 2561px) {
|
||
.process-for {
|
||
height: 80px;
|
||
margin: 40px 0px;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|