add 产品质量分析-图形弹窗
This commit is contained in:
@@ -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>
|
||||
<div class="app-container">
|
||||
设备质量分析
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import LineChart from './components/lineChart.vue';
|
||||
|
||||
export default {
|
||||
name: "QualityAnalysis",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
}
|
||||
name: 'QualityAnalysis',
|
||||
components: { LineChart },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
urls: {
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user