160 lines
4.0 KiB
Vue
160 lines
4.0 KiB
Vue
<template>
|
|
<el-row :gutter="8" class="thicknessDistributionMap">
|
|
<el-col :span="10">
|
|
<div class="left-box">
|
|
<search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
|
|
<base-table
|
|
ref="thicknessDistributionTable"
|
|
id="thicknessDistributionTable1"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
highlight-current-row
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<div class="right-box">
|
|
<thickness-distribution-chart />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from '@/utils/index'
|
|
import thicknessDistributionChart from './../components/thicknessDistributionChart.vue'
|
|
import { queryThickness, drawThickness } from '@/api/qualityManagement'
|
|
import { timeFormatter } from '@/utils'
|
|
import moment from 'moment'
|
|
const tableProps = [
|
|
{
|
|
prop: 'glassId',
|
|
label: 'ID'
|
|
},
|
|
{
|
|
prop: 'testTime',
|
|
label: '检测时间',
|
|
filter: timeFormatter,
|
|
minWidth: 160
|
|
},
|
|
{
|
|
prop: 'grindType',
|
|
label: '研磨类型'
|
|
}
|
|
]
|
|
export default {
|
|
name: 'thicknessDistributionMap',
|
|
components: { thicknessDistributionChart },
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '检验时间',
|
|
dateType: 'datetimerange',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
param: 'timeVal',
|
|
defaultSelect: [],
|
|
width: 350
|
|
},
|
|
{
|
|
type: 'input',
|
|
label: '玻璃ID',
|
|
placeholder: '玻璃ID',
|
|
param: 'glassId'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '绘图',
|
|
name: 'draw',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
listQuery: {
|
|
startTime: '',
|
|
endTime: '',
|
|
glassId: ''
|
|
},
|
|
tableProps,
|
|
tableData: [],
|
|
tableH: tableHeight(350),
|
|
drawGlassId: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(350)
|
|
})
|
|
this.formConfig[0].defaultSelect = [
|
|
moment().format('yyyy-MM-DD') + 'T00:00:00',
|
|
moment().format('yyyy-MM-DD') + 'T23:59:59'
|
|
]
|
|
this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
|
|
this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
queryThickness({ ...this.listQuery }).then((res) => {
|
|
console.log(res)
|
|
if (res.code === 0 && res.data.length > 0) {
|
|
let _this = this
|
|
_this.tableData = res.data
|
|
_this.$nextTick(() => {
|
|
_this.$refs.thicknessDistributionTable.setCurrent(
|
|
'thicknessDistributionTable1',
|
|
0
|
|
)
|
|
})
|
|
_this.drawGlassId = _this.tableData[0].id
|
|
} else {
|
|
this.tableData = []
|
|
this.drawGlassId = ''
|
|
}
|
|
})
|
|
},
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
|
this.listQuery.glassId = val.glassId
|
|
this.getList()
|
|
break
|
|
default:
|
|
drawThickness(this.drawGlassId).then((res) => {
|
|
console.log(res)
|
|
})
|
|
}
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.drawGlassId = val.newVal.id
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.thicknessDistributionMap {
|
|
width: 100%;
|
|
padding: 0 8px 0 16px;
|
|
.left-box,
|
|
.right-box {
|
|
height: calc(100vh - 205px);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
</style>
|