247 lines
7.8 KiB
Vue
247 lines
7.8 KiB
Vue
<template>
|
|
<div id="centerRight1">
|
|
<div class="bg-color-black">
|
|
<div class="d-flex" style="display: block;width: 100%;text-align: center;">
|
|
<!-- <span>
|
|
<icon name="chart-bar" class="text-icon"></icon>
|
|
</span> -->
|
|
<div class="d-flex" style="display: block;width: 100%;text-align: center;font-size: 18px;font-weight: bold;">
|
|
<span class=" text">{{ title }}</span>
|
|
<!-- <dv-decoration-3 class="dv-dec-3" /> -->
|
|
</div>
|
|
</div>
|
|
<div class="jc-center body-box">
|
|
<el-table
|
|
:data="list"
|
|
style="width: 100%"
|
|
class="top"
|
|
:header-cell-style="{background:'transparent',color:'#fff'}"
|
|
>
|
|
<el-table-column prop="production_task_code" label="生产任务单" align="center" />
|
|
<el-table-column prop="material_name" label="产品名称" align="center" />
|
|
<el-table-column prop="work_line" label="产线信息" align="center" />
|
|
<el-table-column prop="code_batch" label="批次号" align="center" :width="140" />
|
|
<el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />
|
|
<el-table-column prop="complete_rate" label="完成率" align="center" :width="120" />
|
|
<el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
|
|
</el-table>
|
|
|
|
<vue-seamless-scroll
|
|
:data="list"
|
|
class="seamless-warp"
|
|
style="width: 100%"
|
|
:class-option="classOption"
|
|
>
|
|
<el-table
|
|
:data="list"
|
|
style="width: 100%"
|
|
class="bottom"
|
|
>
|
|
<el-table-column prop="production_task_code" label="生产任务单" align="center" />
|
|
<el-table-column prop="material_name" label="产品名称" align="center" />
|
|
<el-table-column prop="work_line" label="产线信息" align="center" />
|
|
<el-table-column prop="code_batch" label="批次号" align="center" :width="140" />
|
|
<el-table-column prop="plan_qty" label="计划数" align="center" :width="120" />
|
|
<el-table-column prop="complete_rate" label="完成率" align="center" :width="120" >
|
|
<template slot-scope="scope">
|
|
<el-progress :text-inside="true" :stroke-width="22" :percentage="scope.row.complete_rate" :status="scope.row.complete_rate<90?'success':'warning'"></el-progress>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="start_time" label="开工时间" align="center" :width="150" />
|
|
</el-table>
|
|
</vue-seamless-scroll>
|
|
|
|
|
|
<!-- <dv-scroll-board class="dv-scr-board" :config="config" v-if="type==1" />
|
|
<dv-scroll-board class="dv-scr-board" :config="config2" v-if="type==2" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from 'vue-seamless-scroll';
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll
|
|
},
|
|
props:[
|
|
'list',
|
|
'type',
|
|
'list1',
|
|
'title'
|
|
],
|
|
computed: {
|
|
// 滚动条的配置项
|
|
classOption() {
|
|
return {
|
|
step: 0.3, // 数值越大速度滚动越快
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.list
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
};
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
config: {
|
|
header: [
|
|
|
|
'生产任务单',
|
|
'产品名称',
|
|
'产线信息',
|
|
'提报类型',
|
|
'数量',
|
|
'提报人',
|
|
'计划数',
|
|
'剩余计划数',
|
|
'提报时间'],
|
|
data:this.list,
|
|
// data: [
|
|
// ['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
|
|
// ['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
|
// ['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
|
// ['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
|
// ['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
|
// ['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
|
// ['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
|
// ['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
|
// ['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
|
// ['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
|
|
// ],
|
|
rowNum: 7, //表格行数
|
|
headerHeight: 35,
|
|
headerBGC: '#0f1325', //表头
|
|
oddRowBGC: '#0f1325', //奇数行
|
|
evenRowBGC: '#171c33', //偶数行
|
|
index: true,
|
|
columnWidth: [30],
|
|
align: ['center']
|
|
},
|
|
config1: {
|
|
header: [
|
|
|
|
'单据编号',
|
|
'设备/产线名称',
|
|
'执行人',
|
|
'任务生成时间',],
|
|
data:this.list1,
|
|
// data: [
|
|
// ['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>"],
|
|
// ['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
|
// ['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
|
// ['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
|
// ['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
|
// ['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
|
// ['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
|
// ['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
|
// ['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
|
// ['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
|
|
// ],
|
|
rowNum: 7, //表格行数
|
|
headerHeight: 35,
|
|
headerBGC: '#0f1325', //表头
|
|
oddRowBGC: '#0f1325', //奇数行
|
|
evenRowBGC: '#171c33', //偶数行
|
|
index: true,
|
|
columnWidth: [30],
|
|
align: ['center']
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('list',this.list)
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$box-height: 420px;
|
|
$box-width: 1220px;
|
|
#centerRight1 {
|
|
padding: 16px;
|
|
padding-top: 20px;
|
|
height: $box-height;
|
|
width: $box-width;
|
|
border-radius: 5px;
|
|
.bg-color-black {
|
|
height: $box-height - 30px;
|
|
border-radius: 10px;
|
|
}
|
|
.text {
|
|
color: #c3cbde;
|
|
}
|
|
.body-box {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
.dv-scr-board {
|
|
width: 1120px;
|
|
height: 320px;
|
|
}
|
|
}
|
|
}
|
|
.seamless-warp {
|
|
height: 280px;
|
|
overflow: hidden;
|
|
}
|
|
.min {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
::v-deep .top .el-table__body-wrapper {
|
|
display: none;
|
|
border-bottom: 0;
|
|
}
|
|
::v-deep .top .el-table__header-wrapper {
|
|
border-bottom: 0;
|
|
}
|
|
::v-deep .bottom .el-table__header-wrapper {
|
|
display: none;
|
|
width: 100%;
|
|
border-bottom: 0;
|
|
}
|
|
::v-deep .el-table tr,.el-table tr{
|
|
background-color: transparent;
|
|
}
|
|
::v-deep .el-table thead tr{
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#092142 12%,
|
|
#034b7a 50%,
|
|
#092142 88%
|
|
);
|
|
}
|
|
::v-deep .el-table, .el-table__expanded-cell,th{
|
|
background-color: transparent;
|
|
color:#fff
|
|
}
|
|
::v-deep .el-table td, .el-table th.is-leaf,.el-table th.el-table__cell.is-leaf{
|
|
border-bottom: 0;
|
|
}
|
|
::v-deep .top th.el-table__cell.is-leaf{
|
|
border-bottom: 0;
|
|
}
|
|
::v-deep .el-table td{
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
::v-deep .el-table__body-wrapper .cell {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
::v-deep .el-table::before {
|
|
height: 0;
|
|
}
|
|
::v-deep .el-table tr:hover>td{
|
|
background-color: #034b7a !important;
|
|
|
|
}
|
|
</style>
|