'init'
This commit is contained in:
238
src/views/FactoryManage/RealtimeDataOfOrder.vue
Normal file
238
src/views/FactoryManage/RealtimeDataOfOrder.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-06-22 14:00:17
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-06-22 14:00:17
|
||||
* @Description: 订单生产实时数据
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container" style="padding: 24px;">
|
||||
<small-title v-if="dataList.length <= 0">
|
||||
{{ $t('module.factory.realtime.order.pageName') }}
|
||||
</small-title>
|
||||
|
||||
<el-row
|
||||
v-for="(order, index) in dataList"
|
||||
v-else
|
||||
:key="index"
|
||||
style="margin: 0; padding-bottom: 64px;"
|
||||
class="horizontal-table"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :key="index + '--el-col'">
|
||||
<!-- title -->
|
||||
<div class="prefixed-title">
|
||||
<ul class="title-list">
|
||||
<li>
|
||||
{{ $t('module.factory.realtime.order.name') }}:
|
||||
<span class="title-value">{{ order.orderName }}</span>
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('module.factory.realtime.order.pName') }}:
|
||||
<span class="title-value">{{ order.productName }}</span>
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('module.factory.realtime.order.pSpecs') }}:
|
||||
<span class="title-value">{{ order.productSize }}</span>
|
||||
</li>
|
||||
<li>
|
||||
{{ $t('module.factory.realtime.order.pLine') }}:
|
||||
<span class="title-value">{{ order.productionLine }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- table -->
|
||||
<!-- style="background: #f0f0f0; margin-top: 8px; padding-top: 8px; display: inline-block; max-width: 100%; border-left: 1px solid #e6ebf5;" -->
|
||||
<base-table
|
||||
:key="`${index}-basetable`"
|
||||
style="display: inline-block; max-width: 100%;"
|
||||
:show-header="false"
|
||||
:border="true"
|
||||
:table-config="order.dynamicProps ? order.dynamicProps : [{ label: '', prop: '' }]"
|
||||
:table-data="order.dynamicData ? order.dynamicData : []"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import i18n from '@/lang'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import fetchList from '@/api/factory-manage/realtimeData'
|
||||
import moment from 'moment'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
export default {
|
||||
name: 'RealtimeOrder',
|
||||
components: { BaseTable, SmallTitle },
|
||||
data() {
|
||||
return {
|
||||
loopHelper: null,
|
||||
dataList: [],
|
||||
listLoading: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
|
||||
this.loopHelper = setInterval(() => {
|
||||
this.getList()
|
||||
}, 1000 * 60 * 5) // 5 mins
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.loopHelper) {
|
||||
clearInterval(this.loopHelper)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 创造公用组件所必须的props
|
||||
createTableProps(length) {
|
||||
const modalProp = { prop: 'fakeProp', label: 'fake-label-' }
|
||||
const fakeProps = []
|
||||
fakeProps.push({
|
||||
prop: 'headerProp',
|
||||
label: 'header-label',
|
||||
isFixed: true,
|
||||
width: 160
|
||||
})
|
||||
for (let i = 0; i < length; i++) {
|
||||
fakeProps.push({ prop: modalProp.prop + i, label: modalProp.label + i, width: 160 })
|
||||
}
|
||||
return fakeProps
|
||||
},
|
||||
// 对服务器传来的数据进行处理
|
||||
modifyData(detArray) {
|
||||
const row1 = {}
|
||||
const row2 = {}
|
||||
const row3 = {}
|
||||
const row4 = {}
|
||||
const row5 = {}
|
||||
|
||||
Object.defineProperty(row1, 'headerProp', { value: '内容', enumerable: true, writable: true })
|
||||
Object.defineProperty(row2, 'headerProp', { value: '上片数量', enumerable: true, writable: true })
|
||||
Object.defineProperty(row3, 'headerProp', { value: '下片数量', enumerable: true, writable: true })
|
||||
Object.defineProperty(row4, 'headerProp', { value: '报废数量', enumerable: true, writable: true })
|
||||
Object.defineProperty(row5, 'headerProp', { value: '合格率', enumerable: true, writable: true })
|
||||
|
||||
detArray.forEach((o, i) => {
|
||||
Object.defineProperty(row1, `fakeProp${i}`, {
|
||||
value: moment(o.recordTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
enumerable: true,
|
||||
writable: true
|
||||
})
|
||||
Object.defineProperty(row2, `fakeProp${i}`, { value: o.inputNum, enumerable: true, writable: true })
|
||||
Object.defineProperty(row3, `fakeProp${i}`, { value: o.outputNum, enumerable: true, writable: true })
|
||||
Object.defineProperty(row4, `fakeProp${i}`, { value: o.scrapNum, enumerable: true, writable: true })
|
||||
|
||||
const passRate = o.passRate ?? '-'
|
||||
Object.defineProperty(row5, `fakeProp${i}`, {
|
||||
value: passRate === '-' ? '-' : passRate + '%',
|
||||
enumerable: true,
|
||||
writable: true
|
||||
})
|
||||
})
|
||||
|
||||
return [row1, row2, row3, row4, row5]
|
||||
},
|
||||
|
||||
getList() {
|
||||
// this.listLoading = true
|
||||
|
||||
fetchList('order').then(response => {
|
||||
if (response.data) {
|
||||
this.dataList = response.data
|
||||
this.dataList.push({
|
||||
orderName: '22订单',
|
||||
productName: 'xxx光伏玻璃2.0B',
|
||||
productSize: '2*1128*2272',
|
||||
productionLine: 'C线 D线 A线',
|
||||
det: Array(3).fill({
|
||||
inputNum: '-259730',
|
||||
outputNum: '-772443',
|
||||
passRate: 100,
|
||||
recordTime: '2022-09-06T14:00:00',
|
||||
scrapNum: '0',
|
||||
sumInputNum: '259730',
|
||||
sumOutputNum: '772443'
|
||||
})
|
||||
})
|
||||
this.transformData()
|
||||
} else {
|
||||
this.dataList.splice(0)
|
||||
this.$message({
|
||||
message: '没有查询到相关数据!',
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
transformData() {
|
||||
this.dataList.forEach((o, i) => {
|
||||
o.dynamicProps = this.createTableProps(o.det.length)
|
||||
o.dynamicData = this.modifyData(o.det)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.prefixed-title {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
// font-weight: 700;
|
||||
color: #777;
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.prefixed-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -16px;
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
ul.title-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
// flex: 1 1;
|
||||
margin-right: 88px;
|
||||
padding: 2px 0;
|
||||
color: rgba($color: #000000, $alpha: 0.65);
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
font-weight: unset;
|
||||
// color: #000;
|
||||
color: rgba($color: #666, $alpha: 0.75);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [class^=el-table_1_column_]
|
||||
.horizontal-table >>> tr.el-table__row:first-child {
|
||||
background-color: #fafafa;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user