325 lines
6.8 KiB
Vue
325 lines
6.8 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-main>
|
|
<div class="boxmain">
|
|
<div
|
|
class="wrapper"
|
|
:id="'scrollWrapper' + refValue"
|
|
@mouseover="mouseOver"
|
|
@mouseout="mouseOut"
|
|
>
|
|
<table class="totall">
|
|
<tr class="title">
|
|
<th v-for="itemx in titleData" :key="itemx">
|
|
{{ itemx }}
|
|
</th>
|
|
</tr>
|
|
</table>
|
|
<div
|
|
:id="refValue"
|
|
:ref="`${refValue}`"
|
|
class="scrollTableBody"
|
|
>
|
|
<div :id="'scrollBody' + refValue">
|
|
<table :class="{ marquee_top: animate }">
|
|
<tr
|
|
v-for="(itemy, index) in rowData"
|
|
class="rollData"
|
|
ref="con1"
|
|
:key="itemy"
|
|
>
|
|
<td v-if="!noIndex">{{ index + 1 }}</td>
|
|
<td v-for="itemz in itemy" :key="itemz">
|
|
<el-progress
|
|
v-if="itemz.elType == 'progress'"
|
|
:text-inside="true"
|
|
:stroke-width="14"
|
|
:percentage="itemz.value"
|
|
:status="getStatus(itemz.value)"
|
|
/>
|
|
<el-tag
|
|
v-else-if="itemz.elType == 'tag'"
|
|
:type="getTagType(itemz.value)"
|
|
>{{
|
|
stateOption[itemz.value]
|
|
}}</el-tag
|
|
>
|
|
<span v-else>{{ itemz.value }}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<table
|
|
:class="{ marquee_top: animate }"
|
|
v-show="scrollVivible"
|
|
>
|
|
<tr
|
|
v-for="(itemy, index) in rowData"
|
|
class="rollData"
|
|
ref="con1"
|
|
:key="itemy"
|
|
>
|
|
<td v-if="!noIndex">{{ index + 1 }}</td>
|
|
<td v-for="itemz in itemy" :key="itemz">
|
|
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
|
:status="getStatus(itemz.value)"/> -->
|
|
<el-progress
|
|
v-if="itemz.elType == 'progress'"
|
|
:text-inside="true"
|
|
:stroke-width="16"
|
|
:percentage="itemz.value"
|
|
:status="getStatus(itemz.value)"
|
|
>
|
|
<span>{{ itemz.value }}</span>
|
|
</el-progress>
|
|
<el-tag
|
|
v-else-if="itemz.elType == 'tag'"
|
|
:type="getTagType(itemz.value)"
|
|
>{{
|
|
stateOption[itemz.value]
|
|
}}</el-tag
|
|
>
|
|
<span v-else>{{ itemz.value }}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
noIndex: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
rowData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
titleData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
tableHeight: {
|
|
type: Number,
|
|
default() {
|
|
return 100;
|
|
},
|
|
},
|
|
refValue: {
|
|
type: String,
|
|
default() {
|
|
return "";
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
speed: 2000,
|
|
myScroll: null,
|
|
iliHeight: 30,
|
|
time: null,
|
|
delay: 20,
|
|
scrollVivible: true,
|
|
stateOption: {
|
|
10: "创建中",
|
|
14: "已分解",
|
|
20: "已下达",
|
|
30: "生产中",
|
|
34: "已停止",
|
|
40: "已完成",
|
|
q10: "完好",
|
|
q20: "限用",
|
|
q30: "在修",
|
|
q40: "禁用",
|
|
normal: "正常",
|
|
late: "迟到",
|
|
未到岗: "未到岗",
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
this.$nextTick(() => {
|
|
let Container = that.tableHeight;
|
|
let tableHeight = Container - 40;
|
|
let idName = "scrollWrapper" + that.refValue;
|
|
let idName2 = that.refValue;
|
|
document.getElementById(idName).style.height = Container + "px";
|
|
document.getElementById(idName2).style.height = tableHeight + "px";
|
|
// let scrollBody = "scrollBody" + this.refValue;
|
|
let scrollHeight = that.$refs[`${that.refValue}`].clientHeight / 2;
|
|
console.log("scrollHeight", scrollHeight);
|
|
if (tableHeight > scrollHeight) {
|
|
that.scrollVivible = false;
|
|
} else {
|
|
that.scrollVivible = true;
|
|
that.myScroll = setInterval(() => {
|
|
that.scrollUp();
|
|
}, that.speed);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
getTagType(type) {
|
|
if (type == 30 || type == 10 || type == 14 || type == 20) {
|
|
return "";
|
|
} else if (type == 40) {
|
|
return "success";
|
|
} else if (type == "normal") {
|
|
return "success";
|
|
} else if (type == "late") {
|
|
return "warning";
|
|
} else if (type == "未到岗") {
|
|
return "danger";
|
|
}
|
|
},
|
|
getStatus(status) {
|
|
if (status == 100) {
|
|
return "success";
|
|
} else if (status >= 80) {
|
|
return "primary";
|
|
} else if (status >= 60) {
|
|
return "warning";
|
|
} else {
|
|
return "exception";
|
|
}
|
|
},
|
|
|
|
scrollUp() {
|
|
if (
|
|
this.$refs[`${this.refValue}`] &&
|
|
this.$refs[`${this.refValue}`].scrollTop
|
|
) {
|
|
let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
|
|
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
|
|
if (scrollTop >= scrollHeight / 2) {
|
|
//判断条件是否达到临界
|
|
this.$refs[`${this.refValue}`].scrollTop = 0;
|
|
} else {
|
|
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
|
|
}
|
|
}
|
|
},
|
|
// 鼠标滑过暂停滚动
|
|
mouseOver() {
|
|
clearInterval(this.myScroll);
|
|
},
|
|
//鼠标移开重新滚动
|
|
mouseOut() {
|
|
this.myScroll = setInterval(() => {
|
|
this.scrollUp();
|
|
}, this.speed);
|
|
},
|
|
},
|
|
beforeUnmount() {
|
|
let that = this;
|
|
clearInterval(that.myScroll1);
|
|
that.myScroll1 = null;
|
|
},
|
|
beforeDestoryed() {
|
|
let that = this;
|
|
clearInterval(that.myScroll1);
|
|
that.myScroll1 = null;
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.boxmain {
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.boxmain {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
text-align: center;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
table th {
|
|
font-size: 14px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
table td {
|
|
font-size: 14px;
|
|
height: 40px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
table th,
|
|
table td {
|
|
padding: 0.1rem 0;
|
|
border-bottom: none !important;
|
|
background: none !important;
|
|
}
|
|
|
|
.marquee_top {
|
|
transition: all 0.5s ease-in-out;
|
|
margin-top: -26px;
|
|
}
|
|
|
|
.totall {
|
|
color: #fff;
|
|
background-color: rgb(10, 63, 68);
|
|
}
|
|
|
|
.rollData {
|
|
background-color: rgb(10, 39, 50);
|
|
}
|
|
|
|
.rollData:nth-of-type(2n + 1) {
|
|
background-color: rgb(0, 59, 81);
|
|
}
|
|
.scrollTableBody {
|
|
/* overflow: scroll;
|
|
overflow-x: scroll; */
|
|
overflow-y: scroll;
|
|
}
|
|
.scrollTableBody::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
/*
|
|
.scrollTableBody::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.scrollTableBody::-webkit-scrollbar-track {
|
|
background-color: #ddd;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.scrollTableBody::-webkit-scrollbar-button {
|
|
background-color: #4d7fff;
|
|
border-radius: 5px;
|
|
} */
|
|
|
|
/* .scrollTableBody::-webkit-scrollbar-button:hover {
|
|
background-color: #999999;
|
|
} */
|
|
</style>
|