<template>
|
<div class="mod-config">
|
<basic-container>
|
<div style="margin-left: 15px;">
|
<el-form>
|
<el-row>
|
<el-col :span="5">
|
<el-form-item label="时间">
|
<el-date-picker
|
v-model="form.date"
|
clearable
|
type="daterange"
|
style="width: 70%;"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="yyyyMMdd"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="工序">
|
<el-input
|
v-model="form.name"
|
placeholder="请选择工序"
|
disabled
|
style="width: 70%"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="showOperate = true"
|
></el-button>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="零件号">
|
<el-input
|
v-model="form.partNo"
|
placeholder="请选择零件号"
|
style="width: 70%"
|
disabled
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="openSelectPart"
|
></el-button>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="零件名称">
|
<el-input
|
style="width: 70%;"
|
v-model="form.partName"
|
placeholder="请输入"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="车间" prop="workShop">
|
<el-select
|
v-model="form.workShop"
|
placeholder="请选择"
|
style="width:70%"
|
@clear="getData"
|
clearable
|
>
|
<el-option
|
v-for="item in workShopOptions"
|
:key="item.id"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item>
|
<el-button type="primary" @click="getData">查询</el-button>
|
<el-button type="primary" @click="reset">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<ttable
|
:table="table"
|
:options="options"
|
:prelang="prelang"
|
@currentChange="handleCurrentChange"
|
:ajaxFun="ajaxFun"
|
:isShowPagination="false"
|
:paramObj="paramObj"
|
ref="table"
|
>
|
<template #toolbar>
|
<el-button type="primary" @click="chartVisible = true">
|
柱状图
|
</el-button>
|
</template>
|
</ttable>
|
</basic-container>
|
<partDialog
|
ref="partDialog"
|
:currshowlist.sync="showPart"
|
:multiSelect="true"
|
@handleSelectionChange="selectPart"
|
/>
|
<operationDialog
|
ref="operationDialog"
|
:currshowlist.sync="showOperate"
|
:multiSelect="true"
|
@handleSelectionChange="selectOperate"
|
/>
|
<el-dialog
|
v-if="chartVisible"
|
:visible.sync="chartVisible"
|
class="chart"
|
title="柱状图"
|
width="90%"
|
>
|
<rateChart :paramObj="paramObj"></rateChart>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import partDialog from '@/views/common/part'
|
import operationDialog from '@/views/common/operation.vue'
|
import ttable from '@/views/common/ztt-table.vue'
|
import { getQualityCheckRate } from '@/api/quality/apply'
|
import rateChart from '@/views/quality/statistics/rateChart'
|
import { remote } from '@/api/admin/dict'
|
export default {
|
components: {
|
partDialog,
|
operationDialog,
|
ttable,
|
rateChart
|
},
|
data() {
|
return {
|
ajaxFun: getQualityCheckRate,
|
chartVisible: false,
|
workShopOptions: [],
|
form: {},
|
paramObj: {},
|
showPart: false,
|
showOperate: false,
|
prelang: 'commonProductoutput',
|
options: {
|
height: 300, // 默认高度-为了表头固定
|
stripe: true, // 是否为斑马纹 table
|
highlightCurrentRow: false, // 是否要高亮当前行
|
border: true, // 是否有纵向边框
|
lazy: false, // 是否需要懒加载
|
fit: true, // 列的宽度是否自撑开
|
multiSelect: true, //
|
seqNo: true,
|
isRefresh: true, // 是否显示刷新按钮
|
isShowHide: true, // 是否显示显影按钮
|
isSearch: false, // 高级查询按钮
|
cancelRunCreated: false,
|
defaultOrderBy: { column: 'id', direction: 'desc' }
|
},
|
table: {
|
currentPage: 1,
|
pageSize: Number.MAX_SAFE_INTEGER,
|
data: [],
|
// 标题
|
column: [
|
{
|
minWidth: '160',
|
prop: 'qualityDate',
|
label: '时间',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '160',
|
prop: 'name',
|
label: '工序',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '160',
|
prop: 'productQty',
|
label: '生产数量',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '160',
|
prop: 'qtyArrived',
|
label: '合格数量',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '160',
|
prop: 'unqualifiedArrived',
|
label: '不合格数量',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '80',
|
prop: 'unit',
|
label: '单位',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '100',
|
prop: 'ratio',
|
label: '合格率',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
}
|
]
|
}
|
}
|
},
|
created() {
|
this.getWorkShopOptions()
|
},
|
mounted() {
|
this.$refs.partDialog.options.multiSelect = true
|
this.$refs.operationDialog.options.multiSelect = true
|
this.$refs.table.isGeneralSearch = false
|
},
|
methods: {
|
reset() {
|
this.form = {}
|
this.paramObj = {}
|
this.$nextTick(() => {
|
this.getData()
|
})
|
},
|
// 获取数据列表
|
getData() {
|
if (this.form.date && this.form.date.length === 2) {
|
this.paramObj.dateAfter = this.form.date[1]
|
this.paramObj.dateBefore = this.form.date[0]
|
} else {
|
this.paramObj.dateAfter = undefined
|
this.paramObj.dateBefore = undefined
|
}
|
if (this.form.id && this.form.id.length > 0) {
|
this.paramObj.operationIdList = this.form.id.split(',')
|
}
|
if (this.form.partNo && this.form.partNo.length > 0) {
|
this.paramObj.partNoList = this.form.partNo.split(',')
|
}
|
this.paramObj.partName = this.form.partName
|
this.paramObj.workShop = this.form.workShop
|
this.$refs.table.getDataList()
|
},
|
selectPart(param) {
|
this.form.partNo = ''
|
if (param && param.length > 0) {
|
param.forEach((item) => {
|
if (this.form.partNo.length > 0) {
|
this.form.partNo += ','
|
}
|
this.form.partNo += item.partNo
|
})
|
}
|
},
|
selectOperate(operate) {
|
this.form.name = ''
|
this.form.id = ''
|
if (operate && operate.length > 0) {
|
operate.forEach((item) => {
|
if (this.form.name.length > 0) {
|
this.form.name += ','
|
this.form.id += ','
|
}
|
this.form.name += item.name
|
this.form.id += item.id
|
})
|
}
|
},
|
getWorkShopOptions() {
|
remote('work_shop').then((response) => {
|
if (response.data.code === 0) {
|
this.workShopOptions = response.data.data
|
} else {
|
this.workShopOptions = []
|
}
|
})
|
},
|
openSelectPart() {
|
this.showPart = true
|
},
|
handleCurrentChange(row) {
|
this.currentRow = row
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* >>> .chart .el-dialog__body {
|
height: 70vh;
|
} */
|
</style>
|
