质量管理
This commit is contained in:
@@ -5,133 +5,182 @@
|
||||
:page="1"
|
||||
:limit="1000"
|
||||
:table-data="list" />
|
||||
<div class="orderBox">
|
||||
<div class="orderBox" v-for="(item, index) in downList" :key="index">
|
||||
<div class="title">
|
||||
<span>工单：工单1</span>
|
||||
<span>产品名称：名称1</span>
|
||||
<span>规格：规格1</span>
|
||||
<span>工单：{{ item.workOrderName }}</span>
|
||||
<span>产品名称：{{ item.productionName }}</span>
|
||||
<span>规格：{{ item.productionSize }}</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-tabs v-model="item.activeName" :stretch="true">
|
||||
<el-tab-pane :label="'\u2002表格\u2002'" name="table"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u3000图表\u3000'"
|
||||
name="chart"
|
||||
style="overflow: inherit">
|
||||
<baseChart />
|
||||
</el-tab-pane>
|
||||
style="overflow: inherit"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
v-if="item.activeName === 'table'"
|
||||
:table-props="item.tableProps"
|
||||
:page="1"
|
||||
:limit="1000"
|
||||
:table-data="item.list"
|
||||
:height="300" />
|
||||
<baseChart
|
||||
v-else
|
||||
:chartN="index"
|
||||
:chartData="item.list"
|
||||
:lineName="item.downProps" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BaseChart from './baseChart.vue';
|
||||
import { getInspectionData } from '@/api/monitoring/statisticalData';
|
||||
export default {
|
||||
name: 'CurrentTest',
|
||||
components: { BaseChart },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'table',
|
||||
tableProps: [
|
||||
computed: {
|
||||
tableProps() {
|
||||
return [
|
||||
{
|
||||
prop: 'workOrderName',
|
||||
label: '工单名称',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
...this.dynamicProps,
|
||||
{
|
||||
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',
|
||||
prop: 'sumInput',
|
||||
label: '上片总数',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'total2',
|
||||
prop: 'sumOutput',
|
||||
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' },
|
||||
],
|
||||
];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dynamicProps: [],
|
||||
list: [],
|
||||
downList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
async getList() {
|
||||
const res = await getInspectionData();
|
||||
// const res = {
|
||||
// data: [],
|
||||
// };
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData);
|
||||
this.list = this.filterData(res.data[0].upPart.data);
|
||||
// 工单明细
|
||||
res.data.forEach((item) => {
|
||||
let downProps = this.filterNameData(item.downPart[0].nameData);
|
||||
console.log('downProps:', downProps);
|
||||
let obj = this.downPartData(item.downPart[0].data, downProps);
|
||||
obj.tableProps = [
|
||||
{
|
||||
prop: 'inspectionContent',
|
||||
label: '检测内容',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'sumInput',
|
||||
label: '原片总数',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
...downProps,
|
||||
{
|
||||
prop: 'sumScrap',
|
||||
label: '未通过检测总数',
|
||||
},
|
||||
{
|
||||
prop: 'scrapRatio',
|
||||
label: '报废比例',
|
||||
},
|
||||
];
|
||||
this.downList.push(obj);
|
||||
});
|
||||
console.log(this.downList);
|
||||
} else {
|
||||
this.list = [];
|
||||
this.dynamicProps = [];
|
||||
}
|
||||
},
|
||||
filterNameData(nameData) {
|
||||
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 = {};
|
||||
console.log('innerData:', innerData);
|
||||
this.dynamicProps.map((item) => {
|
||||
keyValuePairs[item.prop] = '-';
|
||||
});
|
||||
innerData.forEach((d) => {
|
||||
keyValuePairs[d.dynamicName] = d.dynamicValue;
|
||||
});
|
||||
return {
|
||||
inspectionContent: item.inspectionContent,
|
||||
workOrderName: item.workOrderName,
|
||||
...keyValuePairs,
|
||||
sumInput: item.sumInput,
|
||||
sumOutput: item.sumOutput,
|
||||
};
|
||||
});
|
||||
},
|
||||
downPartData(data, downProps) {
|
||||
let obj = {
|
||||
workOrderName: '',
|
||||
productionName: '',
|
||||
productionSize: '',
|
||||
activeName: 'table',
|
||||
tableProps: [],
|
||||
downProps: downProps,
|
||||
list: [],
|
||||
};
|
||||
obj.workOrderName = data[0].workOrderName;
|
||||
obj.productionName = data[0].productionName;
|
||||
obj.productionSize = data[0].productionSize;
|
||||
obj.list = data.map((item) => {
|
||||
const { data: innerData } = item;
|
||||
const keyValuePairs = {};
|
||||
downProps.map((item) => {
|
||||
keyValuePairs[item.prop] = '-';
|
||||
});
|
||||
innerData.map((d) => {
|
||||
keyValuePairs[d.dynamicName] = d.dynamicValue;
|
||||
});
|
||||
return {
|
||||
inspectionContent: item.inspectionContent,
|
||||
sumInput: item.sumInput,
|
||||
...keyValuePairs,
|
||||
sumScrap: item.sumScrap,
|
||||
scrapRatio: item.scrapRatio,
|
||||
};
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@@ -139,11 +188,27 @@ export default {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
:deep(.custom-tabs) {
|
||||
|
||||
Reference in New Issue
Block a user