add 产品质量分析-图形弹窗

This commit is contained in:
lb 2023-09-04 13:54:37 +08:00
bovenliggende 55f90a7102
commit 6f71b6a7c0
2 gewijzigde bestanden met toevoegingen van 301 en 13 verwijderingen

Bestand weergeven

@ -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>

Bestand weergeven

@ -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>