@@ -14,9 +14,9 @@ VUE_APP_TITLE = MES系统 | |||
# 芋道管理系统/开发环境 | |||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
VUE_APP_BASE_API = 'http://192.168.1.164:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.164:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082' | |||
VUE_APP_BASE_API = 'http://192.168.1.81:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.56:48082' | |||
@@ -1,218 +1,215 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" | |||
/> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="80" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" | |||
/> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" | |||
/> | |||
<!-- 新增 --> | |||
<base-dialog | |||
:dialogTitle="addOrEditTitle" | |||
:dialogVisible="centervisible" | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel" | |||
> | |||
<energy-plc-add ref="energyPlc" @successSubmit="successSubmit" /> | |||
</base-dialog> | |||
</div> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="80" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" /> | |||
<!-- 新增 --> | |||
<base-dialog | |||
:dialogTitle="addOrEditTitle" | |||
:dialogVisible="centervisible" | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel"> | |||
<energy-plc-add ref="energyPlc" @successSubmit="successSubmit" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { getEnergyPlcPage, deleteEnergyPlc } from "@/api/base/energyPlc"; | |||
import { getEnergyPlcPage, deleteEnergyPlc } from '@/api/base/energyPlc'; | |||
// import { publicFormatter } from '@/utils/dict' | |||
import EnergyPlcAdd from './components/energyPlcAdd.vue' | |||
import EnergyPlcAdd from './components/energyPlcAdd.vue'; | |||
import tableHeightMixin from '@/mixins/tableHeightMixin'; | |||
const tableProps = [ | |||
{ | |||
prop: 'plcTableName', | |||
label: '关联表名' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '关联表编码', | |||
minWidth: 150, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'name', | |||
label: '标识名' | |||
}, | |||
{ | |||
prop: 'enName', | |||
label: '英文标识名' | |||
}, | |||
{ | |||
prop: 'collection', | |||
label: '是否采集' | |||
}, | |||
{ | |||
prop: 'description', | |||
label: '描述', | |||
showOverflowtooltip: true | |||
} | |||
] | |||
{ | |||
prop: 'plcTableName', | |||
label: '关联表名', | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '关联表编码', | |||
minWidth: 150, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'name', | |||
label: '标识名', | |||
}, | |||
{ | |||
prop: 'enName', | |||
label: '英文标识名', | |||
}, | |||
{ | |||
prop: 'collection', | |||
label: '是否采集', | |||
}, | |||
{ | |||
prop: 'description', | |||
label: '描述', | |||
showOverflowtooltip: true, | |||
}, | |||
]; | |||
export default { | |||
name: "EnergyPlc", | |||
components: { EnergyPlcAdd }, | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'input', | |||
label: '标识名', | |||
placeholder: '标识名', | |||
param: 'name' | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary' | |||
}, | |||
{ | |||
type: 'separate' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-plc:create') ? 'button' : '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true | |||
} | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:energy-plc:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-plc:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除' | |||
} | |||
: undefined | |||
].filter((v) => v), | |||
tableH: this.tableHeight(260), | |||
collectionList: [ | |||
{value: 0,label: '否'}, | |||
{value: 1,label: '是'} | |||
], | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
// 弹出层标题 | |||
addOrEditTitle: "", | |||
// 是否显示弹出层 | |||
centervisible: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
name: null | |||
} | |||
}; | |||
}, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
this.getList(); | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
switch (val.btnName) { | |||
case 'search': | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.name = val.name | |||
this.getList() | |||
break | |||
default: | |||
this.addOrEditTitle = '新增' | |||
this.centervisible = true | |||
this.$nextTick(() => { | |||
this.$refs.energyPlc.init() | |||
}) | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyPlcPage(this.queryParams).then(response => { | |||
let arr = response.data.list || []; | |||
arr&&arr.map(item => { | |||
this.collectionList.map(i => { | |||
if (item.collection === i.value) { | |||
item.collection = i.label | |||
} | |||
}) | |||
}) | |||
this.list = arr | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
handleClick(val) { | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑' | |||
this.$nextTick(() => { | |||
this.$refs.energyPlc.init(val.data.id) | |||
}) | |||
this.centervisible = true | |||
break | |||
default: | |||
this.handleDelete(val.data) | |||
} | |||
}, | |||
handleCancel() { | |||
this.$refs.energyPlc.formClear() | |||
this.centervisible = false | |||
this.addOrEditTitle = '' | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyPlc.submitForm() | |||
}, | |||
successSubmit() { | |||
this.handleCancel() | |||
this.getList() | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
this.$modal.confirm('是否确认删除关联表名为"' + row.name + '"的数据项?').then(function() { | |||
return deleteEnergyPlc(row.id); | |||
}).then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess("删除成功"); | |||
}).catch(() => {}); | |||
} | |||
} | |||
name: 'EnergyPlc', | |||
components: { EnergyPlcAdd }, | |||
mixins: [tableHeightMixin], | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'input', | |||
label: '标识名', | |||
placeholder: '标识名', | |||
param: 'name', | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-plc:create') ? 'button' : '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true, | |||
}, | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:energy-plc:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-plc:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
collectionList: [ | |||
{ value: 0, label: '否' }, | |||
{ value: 1, label: '是' }, | |||
], | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
// 弹出层标题 | |||
addOrEditTitle: '', | |||
// 是否显示弹出层 | |||
centervisible: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
name: null, | |||
}, | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
switch (val.btnName) { | |||
case 'search': | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.name = val.name; | |||
this.getList(); | |||
break; | |||
default: | |||
this.addOrEditTitle = '新增'; | |||
this.centervisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.energyPlc.init(); | |||
}); | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyPlcPage(this.queryParams).then((response) => { | |||
let arr = response.data.list || []; | |||
arr && | |||
arr.map((item) => { | |||
this.collectionList.map((i) => { | |||
if (item.collection === i.value) { | |||
item.collection = i.label; | |||
} | |||
}); | |||
}); | |||
this.list = arr; | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
handleClick(val) { | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑'; | |||
this.$nextTick(() => { | |||
this.$refs.energyPlc.init(val.data.id); | |||
}); | |||
this.centervisible = true; | |||
break; | |||
default: | |||
this.handleDelete(val.data); | |||
} | |||
}, | |||
handleCancel() { | |||
this.$refs.energyPlc.formClear(); | |||
this.centervisible = false; | |||
this.addOrEditTitle = ''; | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyPlc.submitForm(); | |||
}, | |||
successSubmit() { | |||
this.handleCancel(); | |||
this.getList(); | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
this.$modal | |||
.delConfirm(row.name) | |||
.then(function () { | |||
return deleteEnergyPlc(row.id); | |||
}) | |||
.then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess('删除成功'); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,649 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<!-- 列表 --> | |||
<el-row> | |||
<el-col class="custom-tabs"> | |||
<el-tabs | |||
v-model="activeName" | |||
:stretch="true" | |||
@tab-click="handleTabClick"> | |||
<el-tab-pane :label="'\u2002表格数据\u2002'" name="table"> | |||
<!-- 列表 --> | |||
<div class="blue-title"> | |||
产品名:{{ productDetail.name }} 产品规格:{{ | |||
productDetail.specifications | |||
}} | |||
</div> | |||
<base-table | |||
class="base-table__margin" | |||
:table-props="productProps" | |||
:page="1" | |||
:limit="10" | |||
:table-data="list"></base-table> | |||
<div v-for="(item, index) in downProps" :key="index"> | |||
<div class="blue-title"> | |||
工单名称:{{ list[index].workOrderName }} | |||
</div> | |||
<base-table | |||
class="base-table__margin" | |||
:table-props="item" | |||
:page="1" | |||
:limit="10" | |||
:table-data="downList[index]"></base-table> | |||
</div> | |||
</el-tab-pane> | |||
<el-tab-pane | |||
:label="'\u3000图形数据\u3000'" | |||
name="chart" | |||
style="overflow: inherit"> | |||
<SearchBar | |||
:formConfigs="searchBarFormConfig" | |||
ref="search-bar" | |||
@headBtnClick="handleSearchBarBtnClick" /> | |||
<div id="main" style="height: 500px; width: 1000px"></div> | |||
</el-tab-pane> | |||
</el-tabs> | |||
</el-col> | |||
</el-row> | |||
<!-- 分页组件 --> | |||
<!-- <pagination | |||
v-show="total > 0" | |||
:total="total" | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
@pagination="getList" /> --> | |||
<!-- 对话框(添加 / 修改) --> | |||
<!-- <base-dialog | |||
:dialogTitle="title" | |||
:dialogVisible="open" | |||
width="50%" | |||
@close="cancel" | |||
@cancel="cancel" | |||
@confirm="submitForm"> | |||
<DialogForm v-if="open" ref="form" v-model="form" /> | |||
</base-dialog> --> | |||
</div> | |||
</template> | |||
<script> | |||
import { | |||
getInspectionData, | |||
getProductList, | |||
getWorkOrderList, | |||
} from '@/api/monitoring/statisticalData'; | |||
// import Editor from '@/components/Editor'; | |||
import moment from 'moment'; | |||
// import DialogForm from './dialogForm.vue'; | |||
import * as echarts from 'echarts'; | |||
// import basicPageMixin from '@/mixins/lb/basicPageMixin'; | |||
export default { | |||
name: 'statisticalData', | |||
// components: { | |||
// DialogForm, | |||
// }, | |||
// mixins: [basicPageMixin], | |||
data() { | |||
return { | |||
list: [], | |||
dynamicProps: [], | |||
downProps: [], | |||
downList: [], | |||
productDetail: { | |||
name: null, | |||
specifications: null, | |||
}, | |||
activeName: 'table', | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'label', | |||
label: '当前检测数据柱状图', | |||
// placeholder: '请选择工单号', | |||
// param: 'workOrderId', | |||
// selectOptions: [], | |||
}, | |||
// { | |||
// type: 'select', | |||
// label: '产品', | |||
// placeholder: '请选择产品', | |||
// param: 'productionId', | |||
// selectOptions: [], | |||
// }, | |||
// { | |||
// type: 'input', | |||
// label: '检测内容', | |||
// placeholder: '请输入检测内容', | |||
// param: 'inspectionDetContent', | |||
// }, | |||
// { | |||
// type: 'datePicker', | |||
// label: '时间段', | |||
// dateType: 'daterange', // datetimerange | |||
// // format: 'yyyy-MM-dd HH:mm:ss', | |||
// format: 'yyyy-MM-dd', | |||
// valueFormat: 'timestamp', | |||
// rangeSeparator: '-', | |||
// startPlaceholder: '开始日期', | |||
// endPlaceholder: '结束日期', | |||
// defaultTime: ['00:00:00', '23:59:59'], | |||
// param: 'checkTime', | |||
// // width: 350, | |||
// }, | |||
// { | |||
// type: 'button', | |||
// btnName: '查询', | |||
// name: 'search', | |||
// color: 'primary', | |||
// }, | |||
// { | |||
// type: 'separate', | |||
// }, | |||
// // { | |||
// // type: this.$auth.hasPermi( | |||
// // 'base:quality-inspection-record:create' | |||
// // ) | |||
// // ? 'button' | |||
// // : '', | |||
// // btnName: '新增', | |||
// // name: 'add', | |||
// // plain: true, | |||
// // color: 'success', | |||
// // }, | |||
], | |||
// tableBtn: [ | |||
// this.$auth.hasPermi('base:quality-inspection-record:update') | |||
// ? { | |||
// type: 'edit', | |||
// btnName: '修改', | |||
// } | |||
// : undefined, | |||
// this.$auth.hasPermi('base:quality-inspection-record:delete') | |||
// ? { | |||
// type: 'delete', | |||
// btnName: '删除', | |||
// } | |||
// : undefined, | |||
// ].filter((v) => v), | |||
// tableProps: [ | |||
// { | |||
// prop: 'createTime', | |||
// label: '添加时间', | |||
// fixed: true, | |||
// width: 180, | |||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'inspectionDetContent', | |||
// label: '检测内容', | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'lineName', | |||
// label: '产线', | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'checkPerson', | |||
// label: '检测人员', | |||
// }, | |||
// { | |||
// // width: 160, | |||
// prop: 'checkTime', | |||
// label: '检测时间', | |||
// filter: (val) => | |||
// val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-', | |||
// }, | |||
// { | |||
// width: 90, | |||
// prop: 'source', | |||
// label: '来源', | |||
// filter: (val) => ['未知', '手动', '自动'][val], | |||
// }, | |||
// ], | |||
// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应 | |||
// searchBarKeys: ['inspectionDetContent', 'checkTime', 'productionLineId'], | |||
// form: { | |||
// id: undefined, | |||
// inspectionDetId: undefined, | |||
// inspectionDetContent: undefined, | |||
// productionLineId: undefined, | |||
// sectionId: undefined, | |||
// checkPerson: undefined, | |||
// checkTime: undefined, | |||
// source: undefined, | |||
// explainText: undefined, | |||
// remark: undefined, | |||
// }, | |||
// 查询参数 | |||
queryParams: { | |||
workOrderId: undefined, | |||
productId: undefined, | |||
startTime: undefined, | |||
endTime: undefined, | |||
// productionLineId: null, | |||
}, | |||
}; | |||
}, | |||
created() { | |||
// this.getProductLineList(); | |||
}, | |||
computed: { | |||
productProps() { | |||
return [ | |||
{ | |||
// width: 160, | |||
prop: 'workOrderName', | |||
label: '工单名称', | |||
}, | |||
...this.dynamicProps, | |||
{ | |||
// width: 128, | |||
prop: 'sumInput', | |||
label: '上片总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'sumOutput', | |||
label: '下片总数', | |||
// subcomponent: { | |||
// name: 'TextOnly', | |||
// props: { | |||
// injectData: { | |||
// type: Object, | |||
// default: () => ({}), | |||
// }, | |||
// }, | |||
// data() { | |||
// return { | |||
// text: '比例', | |||
// }; | |||
// }, | |||
// methods: { | |||
// handleEmit(payload) { | |||
// console.log('handleEmit', payload); | |||
// }, | |||
// }, | |||
// render(h) { | |||
// return h('el-button', { props: { type: 'text' } }, this.text); | |||
// }, | |||
// }, | |||
}, | |||
]; | |||
}, | |||
}, | |||
mounted() { | |||
if (this.$route.params.startTime && this.$route.params.endTime) { | |||
this.searchBarFormConfig[0].defaultSelect = [ | |||
this.$route.params.startTime, | |||
this.$route.params.endTime, | |||
]; | |||
this.queryParams.param = {}; | |||
this.$set( | |||
this.queryParams.param, | |||
'startTime', | |||
this.$route.params.startTime | |||
); | |||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime); | |||
} else { | |||
this.searchBarFormConfig[0].defaultSelect = []; | |||
} | |||
this.getList(); | |||
}, | |||
methods: { | |||
handleTabClick() { | |||
if (this.activeName === 'chart') { | |||
var chartDom = document.getElementById('main'); | |||
var myChart = echarts.init(chartDom); | |||
var option; | |||
let arrXAxis = []; | |||
this.list.forEach((ele) => { | |||
arrXAxis.push(ele.workOrderName); | |||
}); | |||
this.downList.forEach((ele) => { | |||
ele.forEach((item) => { | |||
if (ele.length !== 0 && item.productionline) { | |||
arrXAxis.push('产线' + item.productionline); | |||
} | |||
}); | |||
}); | |||
let arrYAxis = []; | |||
this.list.forEach((ele) => { | |||
// console.log(ele); | |||
arrYAxis.push(ele.sumInput); | |||
}); | |||
this.downList.forEach((ele) => { | |||
ele.forEach((item) => { | |||
console.log(item); | |||
// if (ele.length !== 0 && item.productionline) { | |||
arrYAxis.push(item.sumInput); | |||
// } | |||
}); | |||
}); | |||
// console.log(arrXAxis); | |||
option = { | |||
xAxis: { | |||
type: 'category', | |||
data: arrXAxis, | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
}, | |||
series: [ | |||
{ | |||
data: arrYAxis, | |||
type: 'bar', | |||
showBackground: true, | |||
barWidth: '20', | |||
label: { | |||
show: true, | |||
position: 'top', | |||
}, | |||
backgroundStyle: { | |||
color: 'rgba(180, 180, 180, 0.2)', | |||
}, | |||
}, | |||
], | |||
}; | |||
option && myChart.setOption(option); | |||
} | |||
}, | |||
/** 获取搜索栏的产线列表 */ | |||
// async getDict() { | |||
// const res = await getProductList() | |||
// const result = await getWorkOrderList() | |||
// console.log(res); | |||
// this.searchBarFormConfig[1].selectOptions = res.data.map((item) => { | |||
// return { | |||
// name: item.name, | |||
// id:item.id | |||
// } | |||
// }) | |||
// this.searchBarFormConfig[0].selectOptions = result.data.map((item) => { | |||
// return { | |||
// name: item.name, | |||
// id: item.id | |||
// } | |||
// }) | |||
// }, | |||
// getProductLineList() { | |||
// this.$axios('/base/production-line/listAll').then((response) => { | |||
// this.searchBarFormConfig[0].selectOptions = response.data.map( | |||
// (item) => { | |||
// return { | |||
// name: item.name, | |||
// id: item.id, | |||
// }; | |||
// } | |||
// ); | |||
// }); | |||
// }, | |||
getList() { | |||
this.getDataList(); | |||
// this.getDict() | |||
}, | |||
/** 查询列表 */ | |||
async getDataList() { | |||
this.loading = true; | |||
// 执行查询 | |||
this.downProps = []; | |||
const res = await getInspectionData(this.queryParams); | |||
console.log(res); | |||
this.productDetail.name = res.data[0].productName; | |||
this.productDetail.specifications = res.data[0].specifications; | |||
// this.productName = res.data[0].productName | |||
this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData); | |||
console.log(this.dynamicProps); | |||
this.list = this.filterData(res.data[0].upPart.data); | |||
console.log(this.list); | |||
res.data[0].downPart.forEach((ele) => { | |||
// console.log(ele.data); | |||
let arr = this.downFilterNameData(ele.nameData); | |||
if (arr.length !== 0) { | |||
let propArr = [ | |||
{ | |||
// width: 160, | |||
prop: 'inspectionContent', | |||
label: '检测内容', | |||
}, | |||
...arr, | |||
{ | |||
// width: 128, | |||
prop: 'sumInput', | |||
label: '原片总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'sumScrap', | |||
label: '未通过检测总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'scrapRatio', | |||
label: '报废比例', | |||
}, | |||
]; | |||
this.downProps.push(propArr); | |||
} | |||
// this.downProps = [] | |||
}); | |||
res.data[0].downPart.forEach((ele) => { | |||
// console.log(ele.data); | |||
let arr = this.downFilterData(ele.data); | |||
if (arr.length !== 0) { | |||
this.downList.push(arr); | |||
} | |||
// this.downProps = [] | |||
}); | |||
// console.log(this.downList); | |||
}, | |||
downFilterNameData(nameData) { | |||
const ndSet = new Set(); | |||
nameData.forEach((nd) => { | |||
ndSet.add(nd.name); | |||
}); | |||
return Array.from(ndSet.values()) | |||
.sort() | |||
.map((name) => ({ | |||
prop: name, | |||
label: name, | |||
})); | |||
// }) | |||
}, | |||
downFilterData(data) { | |||
return data.map((item) => { | |||
const { data: innerData } = item; | |||
const keyValuePairs = {}; | |||
innerData.map((d) => { | |||
keyValuePairs[d.dynamicName] = d.dynamicValue; | |||
}); | |||
return { | |||
inspectionContent: item.inspectionContent, | |||
...keyValuePairs, | |||
sumInput: item.sumInput, | |||
scrapRatio: item.scrapRatio, | |||
sumScrap: item.sumScrap, | |||
}; | |||
}); | |||
}, | |||
filterNameData(nameData) { | |||
// console.log(upData); | |||
// upData.forEach((ele) => { | |||
const ndSet = new Set(); | |||
nameData.forEach((nd) => { | |||
ndSet.add(nd.name); | |||
}); | |||
return Array.from(ndSet.values()) | |||
.sort() | |||
.map((name) => ({ | |||
prop: name, | |||
label: name, | |||
})); | |||
// }) | |||
}, | |||
filterData(data) { | |||
return data.map((item) => { | |||
const { data: innerData } = item; | |||
const keyValuePairs = {}; | |||
innerData.map((d) => { | |||
keyValuePairs[d.dynamicName] = d.dynamicValue; | |||
}); | |||
return { | |||
inspectionContent: item.inspectionContent, | |||
workOrderName: item.workOrderName, | |||
...keyValuePairs, | |||
sumInput: item.sumInput, | |||
sumOutput: item.sumOutput, | |||
}; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
handleSearchBarBtnClick(val) { | |||
if (val.btnName === 'search') { | |||
this.queryParams.workOrderId = val.workOrderId | |||
? val.workOrderId | |||
: undefined; | |||
this.queryParams.productId = val.productId ? val.productId : undefined; | |||
this.queryParams.startTime = val.checkTime | |||
? val.checkTime[0] | |||
: undefined; | |||
this.queryParams.endTime = val.checkTime ? val.checkTime[1] : undefined; | |||
this.getList(); | |||
} | |||
console.log(val); | |||
}, | |||
/** 搜索按钮操作 */ | |||
// handleQuery() { | |||
// this.queryParams.pageNo = 1; | |||
// this.getList(); | |||
// }, | |||
// /** 重置按钮操作 */ | |||
// resetQuery() { | |||
// this.resetForm('queryForm'); | |||
// this.handleQuery(); | |||
// }, | |||
// /** 新增按钮操作 */ | |||
// handleAdd() { | |||
// this.reset(); | |||
// this.open = true; | |||
// this.title = '添加质量检查信息记录表'; | |||
// }, | |||
// /** 修改按钮操作 */ | |||
// handleUpdate(row) { | |||
// this.reset(); | |||
// const id = row.id; | |||
// getQualityInspectionRecord(id).then((response) => { | |||
// /** 因为后端返回的时间是时间戳格式,需转换 */ | |||
// const info = {} | |||
// Object.keys(this.form).forEach(key => { | |||
// info[key] = response.data[key] | |||
// }); | |||
// this.form = info; | |||
// this.open = true; | |||
// this.title = '修改质量检查信息记录表'; | |||
// }); | |||
// }, | |||
// /** 提交按钮 */ | |||
// submitForm() { | |||
// this.$refs['form'].validate((valid) => { | |||
// if (!valid) { | |||
// return; | |||
// } | |||
// // 修改的提交 | |||
// if (this.form.id != null) { | |||
// updateQualityInspectionRecord(this.form).then((response) => { | |||
// this.$modal.msgSuccess('修改成功'); | |||
// this.open = false; | |||
// this.getList(); | |||
// }); | |||
// return; | |||
// } | |||
// // 添加的提交 | |||
// createQualityInspectionRecord(this.form).then((response) => { | |||
// this.$modal.msgSuccess('新增成功'); | |||
// this.open = false; | |||
// this.getList(); | |||
// }); | |||
// }); | |||
// }, | |||
// /** 删除按钮操作 */ | |||
// handleDelete(row) { | |||
// const id = row.id; | |||
// this.$modal | |||
// .confirm('是否确认删除"' + row.inspectionDetContent + '"?') | |||
// .then(function () { | |||
// return deleteQualityInspectionRecord(id); | |||
// }) | |||
// .then(() => { | |||
// this.getList(); | |||
// this.$modal.msgSuccess('删除成功'); | |||
// }) | |||
// .catch(() => {}); | |||
// }, | |||
// /** 导出按钮操作 */ | |||
// handleExport() { | |||
// // 处理查询参数 | |||
// let params = { ...this.queryParams }; | |||
// params.pageNo = undefined; | |||
// params.pageSize = undefined; | |||
// this.$modal | |||
// .confirm('是否确认导出所有质量检查信息记录表数据项?') | |||
// .then(() => { | |||
// this.exportLoading = true; | |||
// return exportQualityInspectionRecordExcel(params); | |||
// }) | |||
// .then((response) => { | |||
// this.$download.excel(response, '质量检查信息记录表.xls'); | |||
// this.exportLoading = false; | |||
// }) | |||
// .catch(() => {}); | |||
// }, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
:deep(.custom-tabs) { | |||
.el-tabs__header { | |||
margin-bottom: 8px; | |||
display: inline-block; | |||
transform: translateY(-12px); | |||
} | |||
.el-tabs__content { | |||
overflow: visible; | |||
} | |||
.el-tabs__item { | |||
padding-left: 0 !important; | |||
padding-right: 0 !important; | |||
line-height: 36px !important; | |||
height: 36px; | |||
} | |||
} | |||
.blue-title { | |||
position: relative; | |||
padding: 4px 0; | |||
padding-left: 12px; | |||
font-size: 14px; | |||
color: #606266; | |||
font-weight: 700; | |||
margin-bottom: 12px; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
top: 6px; | |||
height: 16px; | |||
width: 4px; | |||
border-radius: 1px; | |||
background: #0b58ff; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,125 @@ | |||
<template> | |||
<div id="currentDataChart" style="width: 100%; height: 300px"></div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts'; | |||
import resize from '@/utils/chartMixins/resize'; | |||
export default { | |||
name: 'BaseChart', | |||
mixins: [resize], | |||
data() { | |||
return { | |||
chartDom: '', | |||
chart: '', | |||
}; | |||
}, | |||
// props: { | |||
// chartData: { | |||
// type: Array, | |||
// required: true, | |||
// default: () => { | |||
// return []; | |||
// }, | |||
// }, | |||
// }, | |||
// watch: { | |||
// chartData: function () { | |||
// this.getChart(); | |||
// }, | |||
// }, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.getChart(); | |||
}); | |||
}, | |||
methods: { | |||
getChart() { | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
this.chartDom = document.getElementById('currentDataChart'); | |||
this.chart = echarts.init(this.chartDom); | |||
// if (this.chartData.length === 0) { | |||
// return false; | |||
// } | |||
var option = { | |||
color: [ | |||
'#288AFF', | |||
'#73DE93', | |||
'#FFCE6A', | |||
'#63BDFF', | |||
'#7164FF', | |||
'#FF6860', | |||
'#FF9747', | |||
'#B0EB42', | |||
'#D680FF', | |||
'#0043D2', | |||
], | |||
// legend: { | |||
// data: keys, | |||
// right: '1%', | |||
// }, | |||
tooltip: { | |||
trigger: 'axis', | |||
}, | |||
grid: { | |||
left: '1%', | |||
right: '1%', | |||
bottom: '3%', | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
data: ['1', '2', '3', '4', '5'], | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
}, | |||
series: [ | |||
{ | |||
data: [50, 30, 40, 50, 60], | |||
type: 'bar', | |||
stack: 'a', | |||
barWidth: 20, | |||
name: '产线1', | |||
}, | |||
{ | |||
data: [30, 50, 44, 52, 39], | |||
type: 'bar', | |||
stack: 'a', | |||
barWidth: 20, | |||
name: '产线2', | |||
}, | |||
{ | |||
data: [53, 33, 43, 53, 63], | |||
type: 'bar', | |||
stack: 'a', | |||
barWidth: 20, | |||
name: '产线3', | |||
}, | |||
{ | |||
data: [35, 39, 44, 65, 45], | |||
type: 'bar', | |||
stack: 'a', | |||
barWidth: 20, | |||
name: '产线4', | |||
}, | |||
{ | |||
data: [50, 30, 40, 50, 60], | |||
type: 'bar', | |||
stack: 'a', | |||
barWidth: 20, | |||
name: '产线5', | |||
}, | |||
], | |||
}; | |||
option && this.chart.setOption(option); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,167 @@ | |||
<template> | |||
<div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="1" | |||
:limit="1000" | |||
:table-data="list" /> | |||
<div class="orderBox"> | |||
<div class="title"> | |||
<span>工单:工单1</span> | |||
<span>产品名称:名称1</span> | |||
<span>规格:规格1</span> | |||
</div> | |||
<div class="custom-tabs"> | |||
<el-tabs v-model="activeName" :stretch="true"> | |||
<el-tab-pane :label="'\u2002表格\u2002'" name="table"> | |||
<!-- 列表 --> | |||
<base-table | |||
:table-props="tableProps2" | |||
:page="1" | |||
:limit="1000" | |||
:table-data="list2" /> | |||
</el-tab-pane> | |||
<el-tab-pane | |||
:label="'\u3000图表\u3000'" | |||
name="chart" | |||
style="overflow: inherit"> | |||
<baseChart /> | |||
</el-tab-pane> | |||
</el-tabs> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import BaseChart from './baseChart.vue'; | |||
export default { | |||
name: 'CurrentTest', | |||
components: { BaseChart }, | |||
data() { | |||
return { | |||
activeName: 'table', | |||
tableProps: [ | |||
{ | |||
prop: 'workOrderName', | |||
label: '工单名称', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'prodName', | |||
label: '产品名称', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line1', | |||
label: '产线1', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line2', | |||
label: '产线2', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line3', | |||
label: '产线3', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'total', | |||
label: '上片总数', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'total2', | |||
label: '下片总数', | |||
showOverflowtooltip: true, | |||
}, | |||
], | |||
list: [ | |||
{ workOrderName: '工单1' }, | |||
{ workOrderName: '工单2' }, | |||
{ workOrderName: '工单3' }, | |||
{ workOrderName: '工单4' }, | |||
{ workOrderName: '工单5' }, | |||
{ workOrderName: '工单6' }, | |||
], | |||
tableProps2: [ | |||
{ | |||
prop: 'workOrderName', | |||
label: '检测内容', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'prodName', | |||
label: '原片总数', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line1', | |||
label: '产线1', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line2', | |||
label: '产线2', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'line3', | |||
label: '产线3', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'total', | |||
label: '未通过检测总数', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'total2', | |||
label: '报废比例', | |||
showOverflowtooltip: true, | |||
}, | |||
], | |||
list2: [ | |||
{ workOrderName: '工单1' }, | |||
{ workOrderName: '工单2' }, | |||
{ workOrderName: '工单3' }, | |||
{ workOrderName: '工单4' }, | |||
{ workOrderName: '工单5' }, | |||
{ workOrderName: '工单6' }, | |||
], | |||
}; | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.orderBox { | |||
padding-top: 16px; | |||
} | |||
.title { | |||
span { | |||
display: inline-block; | |||
width: 300px; | |||
font-size: 14px; | |||
padding-bottom: 10px; | |||
} | |||
} | |||
:deep(.custom-tabs) { | |||
.el-tabs__header { | |||
margin-bottom: 8px; | |||
display: inline-block; | |||
transform: translateY(-12px); | |||
} | |||
.el-tabs__content { | |||
overflow: visible; | |||
} | |||
.el-tabs__item { | |||
padding-left: 0 !important; | |||
padding-right: 0 !important; | |||
line-height: 36px !important; | |||
height: 36px; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,179 @@ | |||
<template> | |||
<base-table | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" /> | |||
</template> | |||
<script> | |||
import tableHeightMixin from '@/mixins/tableHeightMixin'; | |||
export default { | |||
name: 'HourData', | |||
mixins: [tableHeightMixin], | |||
data() { | |||
return { | |||
heightNum: 200, | |||
tableProps: [ | |||
{ | |||
prop: 'name', | |||
lable: '检测内容', | |||
}, | |||
{ | |||
label: '2024-01-01 01:00:00', | |||
children: [ | |||
{ | |||
prop: 'line1-1', | |||
label: '产线1', | |||
}, | |||
{ | |||
prop: 'line1-2', | |||
label: '产线2', | |||
}, | |||
{ | |||
prop: 'line1-3', | |||
label: '产线3', | |||
}, | |||
{ | |||
prop: 'line1-4', | |||
label: '产线4', | |||
}, | |||
], | |||
}, | |||
{ | |||
label: '2024-01-01 02:00:00', | |||
children: [ | |||
{ | |||
prop: 'line2-1', | |||
label: '产线1', | |||
}, | |||
{ | |||
prop: 'line2-2', | |||
label: '产线2', | |||
}, | |||
{ | |||
prop: 'line2-3', | |||
label: '产线3', | |||
}, | |||
{ | |||
prop: 'line2-4', | |||
label: '产线4', | |||
}, | |||
], | |||
}, | |||
{ | |||
label: '2024-01-01 03:00:00', | |||
children: [ | |||
{ | |||
prop: 'line3-1', | |||
label: '产线1', | |||
}, | |||
{ | |||
prop: 'line3-2', | |||
label: '产线2', | |||
}, | |||
{ | |||
prop: 'line3-3', | |||
label: '产线3', | |||
}, | |||
{ | |||
prop: 'line3-4', | |||
label: '产线4', | |||
}, | |||
], | |||
}, | |||
], | |||
list: [ | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
{ | |||
name: '磨边缺陷数', | |||
'line1-1': 1, | |||
'line1-2': 2, | |||
'line1-3': 3, | |||
'line1-4': 4, | |||
'line2-1': 5, | |||
'line2-2': 6, | |||
'line2-3': 7, | |||
'line2-4': 8, | |||
'line3-1': 9, | |||
'line3-2': 10, | |||
'line3-3': 11, | |||
'line3-4': 12, | |||
}, | |||
], | |||
}; | |||
}, | |||
}; | |||
</script> |
@@ -1,622 +1,88 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<!-- 列表 --> | |||
<el-row> | |||
<el-col class="custom-tabs"> | |||
<el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick"> | |||
<el-tab-pane :label="'\u2002表格数据\u2002'" name="table"> | |||
<!-- 列表 --> | |||
<div class="blue-title">产品名:{{ productDetail.name }} 产品规格:{{ productDetail.specifications }}</div> | |||
<base-table class="base-table__margin" :table-props="productProps" :page="1" :limit="10" :table-data="list"> | |||
</base-table> | |||
<div v-for="(item,index) in downProps" :key="index"> | |||
<div class="blue-title">工单名称:{{ list[index].workOrderName }}</div> | |||
<base-table class="base-table__margin" :table-props="item" :page="1" :limit="10" | |||
:table-data="downList[index]"> | |||
</base-table> | |||
</div> | |||
</el-tab-pane> | |||
<el-tab-pane :label="'\u3000图形数据\u3000'" name="chart" style="overflow: inherit"> | |||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" /> | |||
<div id="main" style="height: 500px;width: 1000px;"></div> | |||
</el-tab-pane> | |||
</el-tabs> | |||
</el-col> | |||
</el-row> | |||
<!-- 分页组件 --> | |||
<!-- <pagination | |||
v-show="total > 0" | |||
:total="total" | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
@pagination="getList" /> --> | |||
<!-- 对话框(添加 / 修改) --> | |||
<!-- <base-dialog | |||
:dialogTitle="title" | |||
:dialogVisible="open" | |||
width="50%" | |||
@close="cancel" | |||
@cancel="cancel" | |||
@confirm="submitForm"> | |||
<DialogForm v-if="open" ref="form" v-model="form" /> | |||
</base-dialog> --> | |||
</div> | |||
<div class="currentDataContainer"> | |||
<div class="topBox"> | |||
<el-menu | |||
:default-active="activeName" | |||
mode="horizontal" | |||
@select="handleSelect"> | |||
<el-menu-item index="currentTest">当前检测数据</el-menu-item> | |||
<el-menu-item index="24hour">24小时检测数据</el-menu-item> | |||
</el-menu> | |||
</div> | |||
<div class="bottomBox"> | |||
<!-- 当前检测数据 --> | |||
<div v-if="activeName === 'currentTest'"> | |||
<CurrentTest /> | |||
</div> | |||
<!-- 24小时检测数据 --> | |||
<div v-if="activeName === '24hour'"> | |||
<HourData /> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { | |||
getInspectionData, | |||
getProductList, | |||
getWorkOrderList | |||
} from '@/api/monitoring/statisticalData'; | |||
// import Editor from '@/components/Editor'; | |||
import moment from 'moment'; | |||
// import DialogForm from './dialogForm.vue'; | |||
import * as echarts from 'echarts'; | |||
// import basicPageMixin from '@/mixins/lb/basicPageMixin'; | |||
import CurrentTest from './currentTest.vue'; | |||
import HourData from './hourData.vue'; | |||
export default { | |||
name: 'statisticalData', | |||
// components: { | |||
// DialogForm, | |||
// }, | |||
// mixins: [basicPageMixin], | |||
name: 'currentData', | |||
data() { | |||
return { | |||
list: [], | |||
dynamicProps: [], | |||
downProps: [], | |||
downList: [], | |||
productDetail: { | |||
name: null, | |||
specifications:null, | |||
}, | |||
activeName: 'table', | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'label', | |||
label: '当前检测数据柱状图', | |||
// placeholder: '请选择工单号', | |||
// param: 'workOrderId', | |||
// selectOptions: [], | |||
}, | |||
// { | |||
// type: 'select', | |||
// label: '产品', | |||
// placeholder: '请选择产品', | |||
// param: 'productionId', | |||
// selectOptions: [], | |||
// }, | |||
// { | |||
// type: 'input', | |||
// label: '检测内容', | |||
// placeholder: '请输入检测内容', | |||
// param: 'inspectionDetContent', | |||
// }, | |||
// { | |||
// type: 'datePicker', | |||
// label: '时间段', | |||
// dateType: 'daterange', // datetimerange | |||
// // format: 'yyyy-MM-dd HH:mm:ss', | |||
// format: 'yyyy-MM-dd', | |||
// valueFormat: 'timestamp', | |||
// rangeSeparator: '-', | |||
// startPlaceholder: '开始日期', | |||
// endPlaceholder: '结束日期', | |||
// defaultTime: ['00:00:00', '23:59:59'], | |||
// param: 'checkTime', | |||
// // width: 350, | |||
// }, | |||
// { | |||
// type: 'button', | |||
// btnName: '查询', | |||
// name: 'search', | |||
// color: 'primary', | |||
// }, | |||
// { | |||
// type: 'separate', | |||
// }, | |||
// // { | |||
// // type: this.$auth.hasPermi( | |||
// // 'base:quality-inspection-record:create' | |||
// // ) | |||
// // ? 'button' | |||
// // : '', | |||
// // btnName: '新增', | |||
// // name: 'add', | |||
// // plain: true, | |||
// // color: 'success', | |||
// // }, | |||
], | |||
// tableBtn: [ | |||
// this.$auth.hasPermi('base:quality-inspection-record:update') | |||
// ? { | |||
// type: 'edit', | |||
// btnName: '修改', | |||
// } | |||
// : undefined, | |||
// this.$auth.hasPermi('base:quality-inspection-record:delete') | |||
// ? { | |||
// type: 'delete', | |||
// btnName: '删除', | |||
// } | |||
// : undefined, | |||
// ].filter((v) => v), | |||
// tableProps: [ | |||
// { | |||
// prop: 'createTime', | |||
// label: '添加时间', | |||
// fixed: true, | |||
// width: 180, | |||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'inspectionDetContent', | |||
// label: '检测内容', | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'lineName', | |||
// label: '产线', | |||
// }, | |||
// { | |||
// // width: 128, | |||
// prop: 'checkPerson', | |||
// label: '检测人员', | |||
// }, | |||
// { | |||
// // width: 160, | |||
// prop: 'checkTime', | |||
// label: '检测时间', | |||
// filter: (val) => | |||
// val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-', | |||
// }, | |||
// { | |||
// width: 90, | |||
// prop: 'source', | |||
// label: '来源', | |||
// filter: (val) => ['未知', '手动', '自动'][val], | |||
// }, | |||
// ], | |||
// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应 | |||
// searchBarKeys: ['inspectionDetContent', 'checkTime', 'productionLineId'], | |||
// form: { | |||
// id: undefined, | |||
// inspectionDetId: undefined, | |||
// inspectionDetContent: undefined, | |||
// productionLineId: undefined, | |||
// sectionId: undefined, | |||
// checkPerson: undefined, | |||
// checkTime: undefined, | |||
// source: undefined, | |||
// explainText: undefined, | |||
// remark: undefined, | |||
// }, | |||
// 查询参数 | |||
queryParams: { | |||
workOrderId: undefined, | |||
productId: undefined, | |||
startTime: undefined, | |||
endTime: undefined, | |||
// productionLineId: null, | |||
}, | |||
return { | |||
activeName: 'currentTest', | |||
}; | |||
}, | |||
created() { | |||
// this.getProductLineList(); | |||
}, | |||
computed: { | |||
productProps() { | |||
return [ | |||
{ | |||
// width: 160, | |||
prop: 'workOrderName', | |||
label: '工单名称', | |||
}, | |||
...this.dynamicProps, | |||
{ | |||
// width: 128, | |||
prop: 'sumInput', | |||
label: '上片总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'sumOutput', | |||
label: '下片总数', | |||
// subcomponent: { | |||
// name: 'TextOnly', | |||
// props: { | |||
// injectData: { | |||
// type: Object, | |||
// default: () => ({}), | |||
// }, | |||
// }, | |||
// data() { | |||
// return { | |||
// text: '比例', | |||
// }; | |||
// }, | |||
// methods: { | |||
// handleEmit(payload) { | |||
// console.log('handleEmit', payload); | |||
// }, | |||
// }, | |||
// render(h) { | |||
// return h('el-button', { props: { type: 'text' } }, this.text); | |||
// }, | |||
// }, | |||
}, | |||
]; | |||
}, | |||
}, | |||
mounted() { | |||
if (this.$route.params.startTime && this.$route.params.endTime) { | |||
this.searchBarFormConfig[0].defaultSelect = [ | |||
this.$route.params.startTime, | |||
this.$route.params.endTime, | |||
]; | |||
this.queryParams.param = {}; | |||
this.$set( | |||
this.queryParams.param, | |||
'startTime', | |||
this.$route.params.startTime | |||
); | |||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime); | |||
} else { | |||
this.searchBarFormConfig[0].defaultSelect = []; | |||
} | |||
this.getList() | |||
}, | |||
methods: { | |||
handleTabClick() { | |||
if (this.activeName === 'chart') { | |||
var chartDom = document.getElementById('main'); | |||
var myChart = echarts.init(chartDom); | |||
var option; | |||
let arrXAxis = [] | |||
this.list.forEach((ele) => { | |||
arrXAxis.push(ele.workOrderName) | |||
}) | |||
this.downList.forEach((ele) => { | |||
ele.forEach((item) => { | |||
if (ele.length !==0 && item.productionline) { | |||
arrXAxis.push('产线' + item.productionline) | |||
} | |||
}) | |||
}) | |||
let arrYAxis = [] | |||
this.list.forEach((ele) => { | |||
// console.log(ele); | |||
arrYAxis.push(ele.sumInput) | |||
}) | |||
this.downList.forEach((ele) => { | |||
ele.forEach((item) => { | |||
console.log(item); | |||
// if (ele.length !== 0 && item.productionline) { | |||
arrYAxis.push(item.sumInput) | |||
// } | |||
}) | |||
}) | |||
// console.log(arrXAxis); | |||
option = { | |||
xAxis: { | |||
type: 'category', | |||
data: arrXAxis | |||
}, | |||
yAxis: { | |||
type: 'value' | |||
}, | |||
series: [ | |||
{ | |||
data: arrYAxis, | |||
type: 'bar', | |||
showBackground: true, | |||
barWidth: '20', | |||
label: { | |||
show: true, | |||
position: 'top' | |||
}, | |||
backgroundStyle: { | |||
color: 'rgba(180, 180, 180, 0.2)' | |||
} | |||
} | |||
] | |||
}; | |||
option && myChart.setOption(option); | |||
} | |||
}, | |||
/** 获取搜索栏的产线列表 */ | |||
// async getDict() { | |||
// const res = await getProductList() | |||
// const result = await getWorkOrderList() | |||
// console.log(res); | |||
// this.searchBarFormConfig[1].selectOptions = res.data.map((item) => { | |||
// return { | |||
// name: item.name, | |||
// id:item.id | |||
// } | |||
// }) | |||
// this.searchBarFormConfig[0].selectOptions = result.data.map((item) => { | |||
// return { | |||
// name: item.name, | |||
// id: item.id | |||
// } | |||
// }) | |||
// }, | |||
// getProductLineList() { | |||
// this.$axios('/base/production-line/listAll').then((response) => { | |||
// this.searchBarFormConfig[0].selectOptions = response.data.map( | |||
// (item) => { | |||
// return { | |||
// name: item.name, | |||
// id: item.id, | |||
// }; | |||
// } | |||
// ); | |||
// }); | |||
// }, | |||
getList() { | |||
this.getDataList() | |||
// this.getDict() | |||
}, | |||
/** 查询列表 */ | |||
async getDataList() { | |||
this.loading = true; | |||
// 执行查询 | |||
this.downProps= [] | |||
const res = await getInspectionData(this.queryParams) | |||
console.log(res); | |||
this.productDetail.name = res.data[0].productName | |||
this.productDetail.specifications = res.data[0].specifications | |||
// this.productName = res.data[0].productName | |||
this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData) | |||
console.log(this.dynamicProps) | |||
this.list = this.filterData(res.data[0].upPart.data) | |||
console.log(this.list) | |||
res.data[0].downPart.forEach((ele) => { | |||
// console.log(ele.data); | |||
let arr = this.downFilterNameData(ele.nameData) | |||
if (arr.length !== 0) { | |||
let propArr = [{ | |||
// width: 160, | |||
prop: 'inspectionContent', | |||
label: '检测内容', | |||
}, | |||
...arr, | |||
{ | |||
// width: 128, | |||
prop: 'sumInput', | |||
label: '原片总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'sumScrap', | |||
label: '未通过检测总数', | |||
}, | |||
{ | |||
// width: 128, | |||
prop: 'scrapRatio', | |||
label: '报废比例', | |||
}] | |||
this.downProps.push(propArr) | |||
} | |||
// this.downProps = [] | |||
}) | |||
res.data[0].downPart.forEach((ele) => { | |||
// console.log(ele.data); | |||
let arr =this.downFilterData(ele.data) | |||
if (arr.length !== 0) { | |||
this.downList.push(arr) | |||
} | |||
// this.downProps = [] | |||
}) | |||
// console.log(this.downList); | |||
}, | |||
downFilterNameData(nameData) { | |||
const ndSet = new Set(); | |||
nameData.forEach((nd) => { | |||
ndSet.add(nd.name); | |||
}); | |||
return Array.from(ndSet.values()) | |||
.sort() | |||
.map((name) => ({ | |||
prop: name, | |||
label: name, | |||
})); | |||
// }) | |||
}, | |||
downFilterData(data) { | |||
return data.map((item) => { | |||
const { data: innerData } = item; | |||
const keyValuePairs = {}; | |||
innerData.map((d) => { | |||
keyValuePairs[d.dynamicName] = d.dynamicValue; | |||
}); | |||
return { | |||
inspectionContent: item.inspectionContent, | |||
...keyValuePairs, | |||
sumInput: item.sumInput, | |||
scrapRatio: item.scrapRatio, | |||
sumScrap: item.sumScrap | |||
}; | |||
}); | |||
}, | |||
filterNameData(nameData) { | |||
// console.log(upData); | |||
// upData.forEach((ele) => { | |||
const ndSet = new Set(); | |||
nameData.forEach((nd) => { | |||
ndSet.add(nd.name); | |||
}); | |||
return Array.from(ndSet.values()) | |||
.sort() | |||
.map((name) => ({ | |||
prop: name, | |||
label: name, | |||
})); | |||
// }) | |||
}, | |||
filterData(data) { | |||
return data.map((item) => { | |||
const { data: innerData } = item; | |||
const keyValuePairs = {}; | |||
innerData.map((d) => { | |||
keyValuePairs[d.dynamicName] = d.dynamicValue; | |||
}); | |||
return { | |||
inspectionContent: item.inspectionContent, | |||
workOrderName: item.workOrderName, | |||
...keyValuePairs, | |||
sumInput: item.sumInput, | |||
sumOutput: item.sumOutput, | |||
}; | |||
}); | |||
}, | |||
/** 取消按钮 */ | |||
handleSearchBarBtnClick(val) { | |||
if (val.btnName === 'search') { | |||
this.queryParams.workOrderId = val.workOrderId ? val.workOrderId : undefined | |||
this.queryParams.productId = val.productId ? val.productId : undefined | |||
this.queryParams.startTime = val.checkTime ? val.checkTime[0] : undefined | |||
this.queryParams.endTime = val.checkTime ? val.checkTime[1] : undefined | |||
this.getList() | |||
} | |||
console.log(val); | |||
} | |||
/** 搜索按钮操作 */ | |||
// handleQuery() { | |||
// this.queryParams.pageNo = 1; | |||
// this.getList(); | |||
// }, | |||
// /** 重置按钮操作 */ | |||
// resetQuery() { | |||
// this.resetForm('queryForm'); | |||
// this.handleQuery(); | |||
// }, | |||
// /** 新增按钮操作 */ | |||
// handleAdd() { | |||
// this.reset(); | |||
// this.open = true; | |||
// this.title = '添加质量检查信息记录表'; | |||
// }, | |||
// /** 修改按钮操作 */ | |||
// handleUpdate(row) { | |||
// this.reset(); | |||
// const id = row.id; | |||
// getQualityInspectionRecord(id).then((response) => { | |||
// /** 因为后端返回的时间是时间戳格式,需转换 */ | |||
// const info = {} | |||
// Object.keys(this.form).forEach(key => { | |||
// info[key] = response.data[key] | |||
// }); | |||
// this.form = info; | |||
// this.open = true; | |||
// this.title = '修改质量检查信息记录表'; | |||
// }); | |||
// }, | |||
// /** 提交按钮 */ | |||
// submitForm() { | |||
// this.$refs['form'].validate((valid) => { | |||
// if (!valid) { | |||
// return; | |||
// } | |||
// // 修改的提交 | |||
// if (this.form.id != null) { | |||
// updateQualityInspectionRecord(this.form).then((response) => { | |||
// this.$modal.msgSuccess('修改成功'); | |||
// this.open = false; | |||
// this.getList(); | |||
// }); | |||
// return; | |||
// } | |||
// // 添加的提交 | |||
// createQualityInspectionRecord(this.form).then((response) => { | |||
// this.$modal.msgSuccess('新增成功'); | |||
// this.open = false; | |||
// this.getList(); | |||
// }); | |||
// }); | |||
// }, | |||
// /** 删除按钮操作 */ | |||
// handleDelete(row) { | |||
// const id = row.id; | |||
// this.$modal | |||
// .confirm('是否确认删除"' + row.inspectionDetContent + '"?') | |||
// .then(function () { | |||
// return deleteQualityInspectionRecord(id); | |||
// }) | |||
// .then(() => { | |||
// this.getList(); | |||
// this.$modal.msgSuccess('删除成功'); | |||
// }) | |||
// .catch(() => {}); | |||
// }, | |||
// /** 导出按钮操作 */ | |||
// handleExport() { | |||
// // 处理查询参数 | |||
// let params = { ...this.queryParams }; | |||
// params.pageNo = undefined; | |||
// params.pageSize = undefined; | |||
// this.$modal | |||
// .confirm('是否确认导出所有质量检查信息记录表数据项?') | |||
// .then(() => { | |||
// this.exportLoading = true; | |||
// return exportQualityInspectionRecordExcel(params); | |||
// }) | |||
// .then((response) => { | |||
// this.$download.excel(response, '质量检查信息记录表.xls'); | |||
// this.exportLoading = false; | |||
// }) | |||
// .catch(() => {}); | |||
// }, | |||
}, | |||
components: { | |||
CurrentTest, | |||
HourData, | |||
}, | |||
methods: { | |||
handleSelect(name) { | |||
this.activeName = name; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
:deep(.custom-tabs) { | |||
.el-tabs__header { | |||
margin-bottom: 8px; | |||
display: inline-block; | |||
transform: translateY(-12px); | |||
} | |||
.el-tabs__content { | |||
overflow: visible; | |||
} | |||
.el-tabs__item { | |||
padding-left: 0 !important; | |||
padding-right: 0 !important; | |||
line-height: 36px !important; | |||
height: 36px; | |||
} | |||
} | |||
.blue-title { | |||
position: relative; | |||
padding: 4px 0; | |||
padding-left: 12px; | |||
font-size: 14px; | |||
color: #606266; | |||
font-weight: 700; | |||
margin-bottom: 12px; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
top: 6px; | |||
height: 16px; | |||
width: 4px; | |||
border-radius: 1px; | |||
background: #0b58ff; | |||
} | |||
.currentDataContainer { | |||
width: 100%; | |||
min-height: calc(100vh - 120px - 8px); | |||
background: rgba(242, 244, 249, 1); | |||
.topBox { | |||
.el-menu { | |||
background-color: #f2f4f9; | |||
margin-bottom: 8px; | |||
} | |||
.el-menu.el-menu--horizontal { | |||
border-bottom: none; | |||
width: 100%; | |||
.el-menu-item { | |||
height: 48px; | |||
line-height: 48px; | |||
width: calc((100% / 2) - 4px); | |||
border-radius: 8px; | |||
background-color: #fff; | |||
font-size: 16px; | |||
font-weight: 500; | |||
color: rgba(22, 22, 22, 0.65); | |||
text-align: center; | |||
} | |||
:first-child { | |||
margin-right: 8px; | |||
} | |||
.el-menu-item.is-active { | |||
border-width: 4px; | |||
color: #161616; | |||
} | |||
} | |||
.el-tabs__active-bar { | |||
display: none; | |||
} | |||
} | |||
.bottomBox { | |||
min-height: calc(100vh - 184px); | |||
background: #fff; | |||
padding: 16px; | |||
border-radius: 8px; | |||
} | |||
} | |||
</style> |
@@ -231,7 +231,7 @@ export default { | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'select', | |||
label: '工单', | |||
label: '工单名称', | |||
selectOptions: [], | |||
labelField: 'name', | |||
valueField: 'id', | |||
@@ -202,6 +202,7 @@ export default { | |||
selectOptions: [], | |||
filterable: true, | |||
clearable: false, | |||
defaultSelect: '', | |||
}, | |||
{ | |||
// parent: 'dateFilterType', | |||
@@ -246,7 +247,6 @@ export default { | |||
}, | |||
created() { | |||
this.getWorkOrder(); | |||
this.getList(); | |||
}, | |||
methods: { | |||
/** 准备工厂数据 */ | |||
@@ -262,7 +262,16 @@ export default { | |||
id: item.id, | |||
}; | |||
}); | |||
this.searchBarFormConfig[0].defaultSelect = | |||
this.searchBarFormConfig[0].selectOptions[0].id; | |||
this.queryParams.workOrderId = | |||
this.searchBarFormConfig[0].selectOptions[0].id; | |||
} else { | |||
this.searchBarFormConfig[0].selectOptions = []; | |||
this.searchBarFormConfig[0].defaultSelect = ''; | |||
this.queryParams.workOrderId = ''; | |||
} | |||
this.getList(); | |||
}, | |||
/** 查询列表 */ | |||
async getList() { | |||
@@ -284,14 +293,11 @@ export default { | |||
}); | |||
}, | |||
handleSearchBarBtnClick({ btnName, ...payload }) { | |||
console.log(btnName); | |||
console.log(payload); | |||
this.queryParams.workOrderId = payload.workOrderId || null; | |||
this.queryParams.recordTime = payload.recordTime || undefined; | |||
if (btnName == 'search') { | |||
this.queryParams.workOrderId = payload.workOrderId || null; | |||
this.queryParams.recordTime = payload.recordTime || undefined; | |||
this.getList(); | |||
} else { | |||
// this.queryParams.recordTime = null; | |||
this.exportExcel(); | |||
console.log('导出'); | |||
} | |||
@@ -111,9 +111,10 @@ export default { | |||
type: 'select', | |||
label: '工单名称', | |||
selectOptions: [], | |||
labelField: 'name', | |||
valueField: 'id', | |||
param: 'workOrderId', | |||
defaultSelect: '', | |||
filterable: true, | |||
clearable: false, | |||
}, | |||
{ | |||
type: 'datePicker', | |||
@@ -153,7 +154,6 @@ export default { | |||
// AddOrUpdate, | |||
}, | |||
created() { | |||
this.getList(); | |||
this.getDict(); | |||
}, | |||
methods: { | |||
@@ -172,6 +172,11 @@ export default { | |||
}; | |||
}); | |||
console.log(this.formConfig[0].selectOptions); | |||
this.formConfig[0].defaultSelect = | |||
this.formConfig[0].selectOptions[0].id || ''; | |||
this.listQuery.workOrderId = | |||
this.formConfig[0].selectOptions[0].id || ''; | |||
this.getList(); | |||
}); | |||
}, | |||
handleExport() { | |||
@@ -115,7 +115,6 @@ export default { | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
this.getDict(); | |||
}, | |||
methods: { | |||
@@ -135,7 +134,9 @@ export default { | |||
}); | |||
this.formConfig[0].defaultSelect = | |||
this.formConfig[0].selectOptions[0].id || ''; | |||
console.log(this.formConfig[0].selectOptions); | |||
this.listQuery.workOrderId = | |||
this.formConfig[0].selectOptions[0].id || ''; | |||
this.getList(); | |||
}); | |||
}, | |||
buttonClick(val) { | |||