<template>
|
<div class="work-order-progress">
|
<div class="bar-contents">
|
<div class="top-view">
|
<img src="/cockpitPage/work-order-top.png" alt="" />
|
<div class="top-title">
|
<span>工单进度统计</span>
|
<span class="top-rate">{{ workOrderFinishRate + "%" }}</span>
|
</div>
|
</div>
|
<div class="table-box">
|
<el-table
|
ref="table"
|
:data="tableData"
|
style="width: 100%"
|
height="100%"
|
>
|
<el-table-column
|
prop="Number"
|
label="工单编号"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="Product"
|
label="产品"
|
align="center"
|
min-width="100"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="Scale"
|
label="产品规格"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="Amount"
|
label="生产数量"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="PlanTime"
|
label="计划时间"
|
align="center"
|
min-width="100"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column label="完成进度" align="center" min-width="130">
|
<template slot-scope="scope">
|
<div class="progerss-bg">
|
<div
|
v-for="(item, index) in scope.row.completeProgerss"
|
class="progerss"
|
:class="
|
item.status == 1
|
? 'complete'
|
: item.status == 2
|
? 'producing'
|
: 'noStart'
|
"
|
:style="`width: ${
|
(1 / scope.row.completeProgerss.length) * 100
|
}%`"
|
></div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="延期预警" align="center" width="90">
|
<template slot-scope="scope">
|
<div v-show="scope.row.DelayDays > 0" class="round-view">
|
<div class="round red-bg"></div>
|
<div class="title red-color">
|
{{ scope.row.DelayDays > 10 ? ">10" : scope.row.DelayDays
|
}}{{ "天" }}
|
</div>
|
</div>
|
<div v-show="scope.row.DelayDays < 0" class="round-view">
|
<div class="round green-bg"></div>
|
<div class="title green-color">
|
{{ scope.row.DelayDays + "天" }}
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
props: {
|
tableData: {
|
type: Array,
|
default: () => [],
|
},
|
workOrderFinishRate: {
|
type: String,
|
default: "",
|
},
|
},
|
data() {
|
return {};
|
},
|
mounted() {
|
this.setAutoScroll();
|
},
|
watch: {},
|
methods: {
|
// 实现自动滚动的方法
|
setAutoScroll() {
|
// 拿到表格挂载后的真实DOM
|
const table = this.$refs.table;
|
// 拿到表格中承载数据的div元素
|
const divData = table.bodyWrapper;
|
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
|
setInterval(() => {
|
// 元素自增距离顶部1像素
|
divData.scrollTop += 1;
|
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
|
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
|
// 重置table距离顶部距离
|
divData.scrollTop = 0;
|
}
|
}, 200); // 滚动速度
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.work-order-progress {
|
width: 100%;
|
height: calc(100% - 10px);
|
.bar-contents {
|
width: calc(100% - 5px);
|
height: 100%;
|
border: 1px solid #00ffff;
|
box-sizing: border-box;
|
position: relative;
|
.top-view {
|
width: 33%;
|
margin-top: -1px;
|
margin-left: -1px;
|
position: relative;
|
.top-title {
|
width: 100%;
|
position: absolute;
|
top: 20%;
|
left: 0;
|
margin: auto;
|
color: #01f7fd;
|
font-size: 14px;
|
font-family: "Arial Negreta", "Arial Normal", "Arial";
|
font-weight: 700;
|
padding-left: 30px;
|
.top-rate {
|
margin-left: 15px;
|
color: #fec718;
|
}
|
}
|
}
|
.table-box {
|
padding: 20px 15px;
|
height: calc(100% - 75px);
|
overflow: hidden;
|
.progerss-bg {
|
width: 100%;
|
height: 22px;
|
background: #364459;
|
display: flex;
|
border: 1px solid #00ffff;
|
.progerss {
|
background: #fec718;
|
height: 100%;
|
border-right: 1px solid #00ffff;
|
&:last-child {
|
border-right: 0px;
|
}
|
}
|
.complete {
|
background: #00cc0077;
|
}
|
.producing {
|
background: #33ccff77;
|
}
|
.noStart {
|
background-color: transparent;
|
}
|
}
|
.round-view {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.round {
|
width: 16px;
|
height: 16px;
|
border-radius: 8px;
|
margin-right: 5px;
|
}
|
.red-bg {
|
background: #ff0000;
|
}
|
.green-bg {
|
background: #00cc00;
|
}
|
.red-color {
|
color: #ff0000;
|
}
|
.green-color {
|
color: #00cc00;
|
}
|
}
|
}
|
}
|
}
|
::v-deep {
|
//修改表头的背景颜色横向渐变色
|
.el-table {
|
thead {
|
color: #fff;
|
font-weight: 500;
|
background: linear-gradient(to right, #081630, #076c80) !important;
|
& th {
|
background-color: transparent;
|
padding: 6px 0;
|
}
|
& tr {
|
background-color: transparent;
|
padding: 6px 0;
|
}
|
}
|
}
|
// 修改表格字体颜色
|
.el-table__body td {
|
color: #00ffff;
|
padding: 8px 0;
|
}
|
// 设置表格背景透明
|
.el-table th {
|
background-color: transparent !important;
|
&:hover {
|
background-color: transparent !important;
|
}
|
}
|
.el-table tr {
|
background-color: transparent !important;
|
&:hover {
|
background-color: transparent !important;
|
}
|
}
|
.el-table--enable-row-transition .el-table__body td,
|
.el-table .cell {
|
background-color: transparent;
|
}
|
.el-table,
|
.el-table__expanded-cell {
|
background-color: transparent;
|
}
|
.el-table__body tr:hover > td {
|
background-color: transparent !important;
|
}
|
// 修改横线颜色
|
.el-table td.el-table__cell,
|
.el-table th.el-table__cell.is-leaf {
|
border-bottom: 1px solid #364459;
|
}
|
// 去掉底部多余横线
|
.el-table::before {
|
display: none;
|
}
|
// 保留垂直滚动且隐藏滚动条
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 0px;
|
height: 0px;
|
}
|
}
|
</style>
|
