chore: sync local DataV boards and assets for standalone repo
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user