125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
|
<div style="flex: 2;">
|
|
<Container name="本日生产良品率" size="small">
|
|
<div style="padding: 5px 10px;">
|
|
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
|
|
</div>
|
|
<KilnLine :horizontal="true" />
|
|
<div class="" style="flex: 2; padding: 8px">
|
|
<div
|
|
class="header-line"
|
|
style="margin: 8px 0 16px; display: flex; align-items: center">
|
|
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
|
|
生产良品率
|
|
</h2>
|
|
<Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
|
|
<div style="width: 169px;">
|
|
<span class="lgd lgd-total">总量</span>
|
|
<span class="lgd lgd-day" v-show='chartType'>白班</span>
|
|
<span class="lgd lgd-night" v-show='chartType'>夜班</span>
|
|
</div>
|
|
<div>
|
|
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
|
|
</div>
|
|
</div>
|
|
<div class="chart" style="height: 230px;">
|
|
<YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Container from '../components/Container'
|
|
import ScrollBoard from '../components/ScrollBoard'
|
|
import KilnLine from '../components/line'
|
|
import Switcher from '../components/Switcher'
|
|
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
|
import YieldRateChart from '../components/YieldRateChart'
|
|
export default {
|
|
name: 'YieldRate',
|
|
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
|
|
computed: {
|
|
yieldRateTable() {
|
|
return this.$store.state.websocket.yieldRateTable
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
config: {
|
|
header: ['产线', '一等率', '二等率','成品率','废品率'],
|
|
// headerHeight: '17',
|
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
columnWidth: [60],
|
|
align: ['center'],
|
|
data: [
|
|
[1, '产线1', '49%', '', ''],
|
|
[2, '产线2', '49%', '', ''],
|
|
[3, '产线3', '49%', '', ''],
|
|
[4, '产线4', '49%', '', ''],
|
|
[5, '产线5', '49%', '', '']
|
|
],
|
|
rowNum: 5
|
|
},
|
|
chartType:false,
|
|
chartTime: "日"
|
|
}
|
|
},
|
|
watch:{
|
|
yieldRateTable: {
|
|
handler(newVal, oldVal) {
|
|
let outArr = this.yieldRateTable.map((item) => [
|
|
item.lineName,
|
|
item.first,
|
|
item.second,
|
|
item.product,
|
|
item.waste
|
|
]);
|
|
this.config.data = outArr
|
|
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
changeType(val) {
|
|
this.chartType = val
|
|
},
|
|
// 切换时间
|
|
toggleDate(val) {
|
|
this.chartTime = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.lgd {
|
|
color: #fff;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
.lgd::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-right: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.lgd.lgd-total::before {
|
|
background-color: #ff9e00;
|
|
}
|
|
|
|
.lgd.lgd-day::before {
|
|
background-color: #08d8cd;
|
|
}
|
|
|
|
.lgd.lgd-night::before {
|
|
background-color: #0b58ff;
|
|
}
|
|
</style> |