627 lines
17 KiB
Vue
627 lines
17 KiB
Vue
<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
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
top:'2%'
|
||
},
|
||
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>
|