153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
<template>
|
|
<ModelBox name='1-3'>
|
|
<div class='count-box'>
|
|
<div class='count-tip-box'>
|
|
<div class='item'>
|
|
<p class='num'> {{ totalDownLoadNumClass ? totalDownLoadNumClass : 0}}</p>
|
|
<p class='title'>本班合计</p>
|
|
</div>
|
|
<div class='split'></div>
|
|
<div class='item'>
|
|
<p class='num'>{{ totalDownLoadNumDay ? totalDownLoadNumDay : 0 }} </p>
|
|
<p class='title'>本日合计</p>
|
|
</div>
|
|
</div>
|
|
<dv-scroll-board ref="locationScrollBoardTable" :config="config" style="width:580px;height:180px;margin-top: 10px;"
|
|
class='count-table' />
|
|
<span class='split-line' style='left: 70px;'></span>
|
|
<span class='split-line' style='left: 195px;'></span>
|
|
<span class='split-line' style='left: 320px;'></span>
|
|
<span class='split-line' style='left: 445px;'></span>
|
|
</div>
|
|
</ModelBox>
|
|
</template>
|
|
<script>
|
|
import ModelBox from './ModelBox.vue';
|
|
export default {
|
|
name: 'Count',
|
|
components: {
|
|
ModelBox
|
|
},
|
|
props: {
|
|
dataObj: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
watch: {
|
|
dataObj: {
|
|
handler(newVal, oldVal) {
|
|
console.log(newVal, 'newVal');
|
|
if (newVal) {
|
|
this.totalGlassNum = 0;
|
|
this.tableData = [];
|
|
// 累加所有项目的downLoadNumDay
|
|
this.totalDownLoadNumDay = 0;
|
|
this.totalDownLoadNumClass = 0
|
|
// 遍历每条产线数据
|
|
newVal.forEach(item => {
|
|
// 计算当前项目的glassNum总和
|
|
const glassArray = JSON.parse(item.glassNum);
|
|
const itemGlassSum = glassArray.reduce((sum, num) => sum + num, 0);
|
|
this.tableData.push({
|
|
lineName: item.lineName,
|
|
glassSum: itemGlassSum,
|
|
downLoadNumDay:item.downLoadNumDay,
|
|
downLoadNumClass: item.downLoadNumClass
|
|
});
|
|
|
|
// 累加downLoadNumDay
|
|
this.totalDownLoadNumDay += item.downLoadNumDay;
|
|
this.totalDownLoadNumClass += item.downLoadNumClass;
|
|
|
|
});
|
|
let eqArr = this.tableData.map((item, index) => [
|
|
`<span style="color:#000;" >${index+1 || ''}
|
|
</span>`,
|
|
`<span style="color:#000;" >${item.lineName || ''}
|
|
</span>`,
|
|
// formatDate(item.planStartTime) || '',
|
|
`
|
|
<span style="color:#000;" >${item.downLoadNumClass || ''}
|
|
</span>`,
|
|
`<span style="color:#000;">${item.downLoadNumDay || ''}</span>`,
|
|
`<span style="color:#000;">${item.glassSum || ''}</span>`,
|
|
])
|
|
this.config.data = eqArr
|
|
this.$refs['locationScrollBoardTable'].updateRows(eqArr)
|
|
}
|
|
// this.getChart(this.todayClass)
|
|
},
|
|
deep: true // 深度监听
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
totalDownLoadNumDay: 0,
|
|
totalDownLoadNumClass:0,
|
|
config:{
|
|
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: 30,
|
|
headerBGC: '#E8EDF8',
|
|
oddRowBGC:'#E8EDF8',
|
|
evenRowBGC:'#fff',
|
|
rowNum: 5,
|
|
columnWidth: [70, 125, 125, 125, 130],
|
|
align : ['center', 'center', 'center', 'center', 'center'],
|
|
data: [
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.count-box {
|
|
position: relative;
|
|
.count-tip-box {
|
|
margin-bottom: 20px;
|
|
.split {
|
|
width: 2px;
|
|
height: 40px;
|
|
background: #CDD3DF;
|
|
display: inline-block;
|
|
}
|
|
.item {
|
|
display: inline-block;
|
|
width: 290px;
|
|
text-align: center;
|
|
p{
|
|
margin: 0;
|
|
}
|
|
.num {
|
|
font-weight: 500;
|
|
font-size: 28px;
|
|
color: #155EFF;
|
|
margin-bottom: 5px;
|
|
}
|
|
.title {
|
|
font-size: 14px;
|
|
color: rgba(0,0,0,0.5);
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
}
|
|
.count-table {
|
|
box-shadow: 0px 2px 4px 0px #D5DAE6;
|
|
}
|
|
.split-line {
|
|
position: absolute;
|
|
top: 77px;
|
|
width: 1px;
|
|
height: 180px;
|
|
background: #CDD3DF;
|
|
}
|
|
}
|
|
|
|
</style>
|