261 lines
11 KiB
Vue
261 lines
11 KiB
Vue
<template>
|
|
<ModelBox name='2-2'>
|
|
<div class='line-container'>
|
|
<div class='table-box'>
|
|
<div class='title'>本班次</div>
|
|
<dv-scroll-board ref="classToday" :config="classConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
|
<span class='split-line' style='left: 66px;'></span>
|
|
<span class='split-line' style='left: 186px;'></span>
|
|
<span class='split-line' style='left: 311px;'></span>
|
|
<span class='split-line' style='left: 437px;'></span>
|
|
</div>
|
|
<div class='table-box'>
|
|
<div class='title'>本日</div>
|
|
<dv-scroll-board ref="day" :config="dayConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
|
<span class='split-line' style='left: 66px;'></span>
|
|
<span class='split-line' style='left: 186px;'></span>
|
|
<span class='split-line' style='left: 311px;'></span>
|
|
<span class='split-line' style='left: 437px;'></span>
|
|
</div>
|
|
<div class='table-box'>
|
|
<div class='title'>本周</div>
|
|
<dv-scroll-board ref="week" :config="weekConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
|
<span class='split-line' style='left: 66px;'></span>
|
|
<span class='split-line' style='left: 186px;'></span>
|
|
<span class='split-line' style='left: 311px;'></span>
|
|
<span class='split-line' style='left: 437px;'></span>
|
|
</div>
|
|
<div class='table-box'>
|
|
<div class='title'>本月</div>
|
|
<dv-scroll-board ref="month" :config="monthConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
|
<span class='split-line' style='left: 66px;'></span>
|
|
<span class='split-line' style='left: 186px;'></span>
|
|
<span class='split-line' style='left: 311px;'></span>
|
|
<span class='split-line' style='left: 437px;'></span>
|
|
</div>
|
|
</div>
|
|
</ModelBox>
|
|
</template>
|
|
<script>
|
|
import ModelBox from './ModelBox.vue';
|
|
export default {
|
|
name: 'LineInpurAndOutput',
|
|
components: {
|
|
ModelBox
|
|
},
|
|
props: {
|
|
dataObj: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
dataObj: {
|
|
handler(newVal, oldVal) {
|
|
console.log(newVal, 'newVal');
|
|
if (newVal) {
|
|
this.nowMonth = newVal.todayClass ? newVal.nowMonth.map((item, index) => [
|
|
`<span style="color:#000;" >${index + 1 || ''}
|
|
</span>`,
|
|
`<span style="color:#000;" >${item.name || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${item.inputNum || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
|
`<div style="width:136px; margin:0px;">
|
|
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
|
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
|
</div>
|
|
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
|
</div>`,
|
|
]) : []
|
|
this.monthConfig.data = this.nowMonth
|
|
this.$refs['month'].updateRows(this.nowMonth)
|
|
this.nowWeek = newVal.nowWeek ? newVal.nowWeek.map((item, index) => [
|
|
`<span style="color:#000;" >${index + 1 || ''}
|
|
</span>`,
|
|
`<span style="color:#000;" >${item.name || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${item.inputNum || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
|
`<div style="width:136px; margin:0px;">
|
|
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
|
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
|
</div>
|
|
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
|
</div>`,
|
|
]) : []
|
|
this.weekConfig.data = this.nowWeek
|
|
this.$refs['week'].updateRows(this.nowWeek)
|
|
this.oneDay = newVal.oneDay ? newVal.oneDay.map((item, index) => [
|
|
`<span style="color:#000;" >${index + 1 || ''}
|
|
</span>`,
|
|
`<span style="color:#000;" >${item.name || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${item.inputNum || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
|
`<div style="width:136px; margin:0px;">
|
|
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
|
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
|
</div>
|
|
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
|
</div>`,
|
|
]) : []
|
|
this.dayConfig.data = this.oneDay
|
|
this.$refs['day'].updateRows(this.oneDay)
|
|
this.todayClass = newVal.todayClass ? newVal.todayClass.map((item, index) => [
|
|
`<span style="color:#000;" >${index + 1 || ''}
|
|
</span>`,
|
|
`<span style="color:#000;" >${item.name || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${item.inputNum || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
|
`<div style="width:136px; margin:0px;">
|
|
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
|
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
|
</div>
|
|
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
|
</div>`,
|
|
]) : []
|
|
this.classConfig.data = this.todayClass
|
|
this.$refs['classToday'].updateRows(this.todayClass)
|
|
}
|
|
},
|
|
deep: true // 深度监听
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
nowMonth: [],
|
|
nowWeek: [],
|
|
oneDay: [],
|
|
todayClass: [],
|
|
classConfig:{
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
|
|
headerHeight: 25,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC:'#E8EDF8',
|
|
evenRowBGC:'#fff',
|
|
rowNum: 8,
|
|
columnWidth: [66, 120, 125, 126, 174],
|
|
align : ['center', 'center', 'center', 'center', 'center'],
|
|
data: []
|
|
},
|
|
monthConfig: {
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
|
headerHeight: 25,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC: '#E8EDF8',
|
|
evenRowBGC: '#fff',
|
|
rowNum: 8,
|
|
columnWidth: [66, 120, 125, 126, 174],
|
|
align: ['center', 'center', 'center', 'center', 'center'],
|
|
data: []
|
|
},
|
|
dayConfig: {
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
|
headerHeight: 25,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC: '#E8EDF8',
|
|
evenRowBGC: '#fff',
|
|
rowNum: 8,
|
|
columnWidth: [66, 120, 125, 126, 174],
|
|
align: ['center', 'center', 'center', 'center', 'center'],
|
|
data: []
|
|
},
|
|
weekConfig: {
|
|
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
|
headerHeight: 25,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC: '#E8EDF8',
|
|
evenRowBGC: '#fff',
|
|
rowNum: 8,
|
|
columnWidth: [66, 120, 125, 126, 174],
|
|
align: ['center', 'center', 'center', 'center', 'center'],
|
|
data: []
|
|
}
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// let arr1 = []
|
|
// let arr2 = []
|
|
// let data = [
|
|
// [1,'A1-磨边',234344,234333,100],
|
|
// [2,'A1-磨边',234344,234333,10],
|
|
// [3,'A1-磨边',234344,234333,96],
|
|
// [4,'A1-磨边',234344,234333,20],
|
|
// [5,'A1-磨边',234344,234333,40],
|
|
// [6,'A1-磨边',234344,234333,90],
|
|
// [7,'A1-磨边',234344,234333,80],
|
|
// [8,'A1-磨边',234344,234333,80],
|
|
// ]
|
|
// for (let i =0; i < data.length; i++) {
|
|
// arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
|
|
// arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
|
|
// arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
|
|
// arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
|
|
// arr1.push(`<div style="width:136px; margin:0px;">
|
|
// <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
|
// <div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
|
// </div>
|
|
// <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
|
|
// </div>`)
|
|
// arr2.push(arr1)
|
|
// arr1 = []
|
|
// }
|
|
// this.config.data = arr2
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.line-container {
|
|
display: flex;
|
|
height: 600px;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
flex-wrap: wrap;
|
|
.table-box {
|
|
width: 601px;
|
|
height: 300px;
|
|
position: relative;
|
|
padding-top: 16px;
|
|
.title {
|
|
width: 271px;
|
|
height: 27px;
|
|
line-height: 27px;
|
|
font-size: 20px;
|
|
color: #000000;
|
|
letter-spacing: 4px;
|
|
text-align: center;
|
|
background-image: url(../assets/img/title-bg.png);
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.split-line {
|
|
position: absolute;
|
|
top: 53px;
|
|
width: 1px;
|
|
height: 242px;
|
|
background: #CDD3DF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|