add 产品质量分析-图形弹窗
This commit is contained in:
parent
55f90a7102
commit
6f71b6a7c0
@ -0,0 +1,34 @@
|
|||||||
|
<!--
|
||||||
|
filename: lineChart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-04 13:45:00
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="line-chart">line LineChart</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'LineChart',
|
||||||
|
components: {},
|
||||||
|
props: ['config'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.line-chart {
|
||||||
|
margin: 24px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #e1e1e1;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -6,24 +6,278 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
设备质量分析
|
<!-- 搜索工作栏 -->
|
||||||
</div>
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emitFun="handleEmitFun"></base-table>
|
||||||
|
|
||||||
|
<!-- 图形分析 dialog -->
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="图形视角"
|
||||||
|
:dialogVisible="dialogVisible"
|
||||||
|
width="60%"
|
||||||
|
@close="dialogClose"
|
||||||
|
@cancel="dialogClose"
|
||||||
|
@confirm="dialogClose">
|
||||||
|
<LineChart :config="lineChartConfig" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LineChart from './components/lineChart.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "QualityAnalysis",
|
name: 'QualityAnalysis',
|
||||||
components: {},
|
components: { LineChart },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
},
|
dialogVisible: false,
|
||||||
computed: {},
|
urls: {
|
||||||
methods: {},
|
page: '/analysis/equipment-analysis/quality',
|
||||||
}
|
},
|
||||||
|
mode: 'table', // defaults to 'table'
|
||||||
|
searchBarFormConfig: [
|
||||||
|
// 产品
|
||||||
|
{
|
||||||
|
__index: 'product',
|
||||||
|
type: 'select',
|
||||||
|
label: '产品',
|
||||||
|
placeholder: '请选择产品',
|
||||||
|
param: 'productId',
|
||||||
|
},
|
||||||
|
// 产线
|
||||||
|
{
|
||||||
|
__index: 'line',
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
placeholder: '请选择产线',
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
// 时间段
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间段',
|
||||||
|
dateType: 'daterange', // datetimerange
|
||||||
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始日期',
|
||||||
|
endPlaceholder: '结束日期',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'recordTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: '列表数据',
|
||||||
|
// name: 'tableVersion',
|
||||||
|
// color: 'text btn-table',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'separate',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '图形分析',
|
||||||
|
name: 'graphVersion',
|
||||||
|
color: 'text btn-graph',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 动态的 props
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'sectionName',
|
||||||
|
label: '工段',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备名称',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'products',
|
||||||
|
label: '产品名称',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'inQuantity',
|
||||||
|
label: '进片数量',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'outQuantity',
|
||||||
|
label: '出片数量',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'nokQuantity',
|
||||||
|
label: '破损/不合格数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// width: 160,
|
||||||
|
prop: 'passRate',
|
||||||
|
label: '合格率',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
lineId: null,
|
||||||
|
productId: null,
|
||||||
|
recordTime: [],
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.fillLineOptions();
|
||||||
|
this.fillProductOptions();
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fillLineOptions() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/production-line/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
const cfg = this.searchBarFormConfig.find(
|
||||||
|
(item) => item.__index == 'line'
|
||||||
|
);
|
||||||
|
this.$set(
|
||||||
|
cfg,
|
||||||
|
'selectOptions',
|
||||||
|
data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async fillProductOptions() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/base/product/listAll',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
const cfg = this.searchBarFormConfig.find(
|
||||||
|
(item) => item.__index == 'product'
|
||||||
|
);
|
||||||
|
this.$set(
|
||||||
|
cfg,
|
||||||
|
'selectOptions',
|
||||||
|
data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async getList() {
|
||||||
|
const { data } = await this.$axios({
|
||||||
|
url: '/analysis/equipment-analysis/quality',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
lineId: this.queryParams.lineId || null,
|
||||||
|
productId: this.queryParams.productId || null,
|
||||||
|
recordTime: this.queryParams.recordTime || null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.list = data.map((item) => ({
|
||||||
|
...item,
|
||||||
|
products: item.products.join(','),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
console.log('handleSearchBarBtnClick', btn);
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.queryParams.lineId = btn.lineId;
|
||||||
|
this.queryParams.productId = btn.productId;
|
||||||
|
this.queryParams.recordTime = btn.recordTime;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'tableVersion':
|
||||||
|
this.dialogClose();
|
||||||
|
break;
|
||||||
|
case 'graphVersion':
|
||||||
|
this.dialogShow();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEmitFun({ action, payload }) {},
|
||||||
|
|
||||||
|
dialogShow() {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
dialogClose() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
:deep(.searchBar) {
|
||||||
|
.el-button.btn-table {
|
||||||
|
color: rgb(0, 130, 130);
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid rgb(0, 130, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(0, 130, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button.btn-graph {
|
||||||
|
color: rgb(130, 0, 130);
|
||||||
|
border: 1px solid rgb(130, 0, 130);
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(130, 0, 130);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user