This commit is contained in:
朱菊兰 2024-07-24 15:42:37 +08:00
parent 6aabe6dd90
commit c2defa2da6
12 changed files with 1428 additions and 833 deletions

View File

@ -14,9 +14,9 @@ VUE_APP_TITLE = MES系统
# 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
VUE_APP_BASE_API = 'http://192.168.1.164:48082'
# VUE_APP_BASE_API = 'http://192.168.1.164:48082'
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
VUE_APP_BASE_API = 'http://192.168.1.81:48082'
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
# VUE_APP_BASE_API = 'http://192.168.1.56:48082'

View File

@ -1,84 +1,80 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
@headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
:max-height="tableH">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
@clickBtn="handleClick" />
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
@pagination="getList" />
<!-- 新增 -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="centervisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
>
:before-close="handleCancel">
<energy-plc-add ref="energyPlc" @successSubmit="successSubmit" />
</base-dialog>
</div>
</template>
<script>
import { getEnergyPlcPage, deleteEnergyPlc } from "@/api/base/energyPlc";
import { getEnergyPlcPage, deleteEnergyPlc } from '@/api/base/energyPlc';
// import { publicFormatter } from '@/utils/dict'
import EnergyPlcAdd from './components/energyPlcAdd.vue'
import EnergyPlcAdd from './components/energyPlcAdd.vue';
import tableHeightMixin from '@/mixins/tableHeightMixin';
const tableProps = [
{
prop: 'plcTableName',
label: '关联表名'
label: '关联表名',
},
{
prop: 'code',
label: '关联表编码',
minWidth: 150,
showOverflowtooltip: true
showOverflowtooltip: true,
},
{
prop: 'name',
label: '标识名'
label: '标识名',
},
{
prop: 'enName',
label: '英文标识名'
label: '英文标识名',
},
{
prop: 'collection',
label: '是否采集'
label: '是否采集',
},
{
prop: 'description',
label: '描述',
showOverflowtooltip: true
}
]
showOverflowtooltip: true,
},
];
export default {
name: "EnergyPlc",
name: 'EnergyPlc',
components: { EnergyPlcAdd },
mixins: [tableHeightMixin],
data() {
return {
formConfig: [
@ -86,65 +82,61 @@ export default {
type: 'input',
label: '标识名',
placeholder: '标识名',
param: 'name'
param: 'name',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary'
color: 'primary',
},
{
type: 'separate'
type: 'separate',
},
{
type: this.$auth.hasPermi('base:energy-plc:create') ? 'button' : '',
btnName: '新增',
name: 'add',
color: 'success',
plain: true
}
plain: true,
},
],
tableProps,
tableBtn: [
this.$auth.hasPermi('base:energy-plc:update')
? {
type: 'edit',
btnName: '编辑'
btnName: '编辑',
}
: undefined,
this.$auth.hasPermi('base:energy-plc:delete')
? {
type: 'delete',
btnName: '删除'
btnName: '删除',
}
: undefined
: undefined,
].filter((v) => v),
tableH: this.tableHeight(260),
collectionList: [
{ value: 0, label: '否' },
{value: 1,label: '是'}
{ value: 1, label: '是' },
],
//
total: 0,
//
list: [],
//
addOrEditTitle: "",
addOrEditTitle: '',
//
centervisible: false,
//
queryParams: {
pageNo: 1,
pageSize: 20,
name: null
}
name: null,
},
};
},
created() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(260)
})
this.getList();
},
methods: {
@ -152,67 +144,72 @@ export default {
switch (val.btnName) {
case 'search':
this.queryParams.pageNo = 1;
this.queryParams.name = val.name
this.getList()
break
this.queryParams.name = val.name;
this.getList();
break;
default:
this.addOrEditTitle = '新增'
this.centervisible = true
this.addOrEditTitle = '新增';
this.centervisible = true;
this.$nextTick(() => {
this.$refs.energyPlc.init()
})
this.$refs.energyPlc.init();
});
}
},
/** 查询列表 */
getList() {
getEnergyPlcPage(this.queryParams).then(response => {
getEnergyPlcPage(this.queryParams).then((response) => {
let arr = response.data.list || [];
arr&&arr.map(item => {
this.collectionList.map(i => {
arr &&
arr.map((item) => {
this.collectionList.map((i) => {
if (item.collection === i.value) {
item.collection = i.label
item.collection = i.label;
}
})
})
this.list = arr
});
});
this.list = arr;
this.total = response.data.total;
});
},
handleClick(val) {
switch (val.type) {
case 'edit':
this.addOrEditTitle = '编辑'
this.addOrEditTitle = '编辑';
this.$nextTick(() => {
this.$refs.energyPlc.init(val.data.id)
})
this.centervisible = true
break
this.$refs.energyPlc.init(val.data.id);
});
this.centervisible = true;
break;
default:
this.handleDelete(val.data)
this.handleDelete(val.data);
}
},
handleCancel() {
this.$refs.energyPlc.formClear()
this.centervisible = false
this.addOrEditTitle = ''
this.$refs.energyPlc.formClear();
this.centervisible = false;
this.addOrEditTitle = '';
},
handleConfirm() {
this.$refs.energyPlc.submitForm()
this.$refs.energyPlc.submitForm();
},
successSubmit() {
this.handleCancel()
this.getList()
this.handleCancel();
this.getList();
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除关联表名为"' + row.name + '"的数据项?').then(function() {
this.$modal
.delConfirm(row.name)
.then(function () {
return deleteEnergyPlc(row.id);
}).then(() => {
})
.then(() => {
this.queryParams.pageNo = 1;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
this.$modal.msgSuccess('删除成功');
})
.catch(() => {});
},
},
};
</script>

View File

@ -0,0 +1,649 @@
<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,
},
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>

View File

@ -0,0 +1,125 @@
<template>
<div id="currentDataChart" style="width: 100%; height: 300px"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize';
export default {
name: 'BaseChart',
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
};
},
// props: {
// chartData: {
// type: Array,
// required: true,
// default: () => {
// return [];
// },
// },
// },
// watch: {
// chartData: function () {
// this.getChart();
// },
// },
mounted() {
window.addEventListener('resize', () => {
this.getChart();
});
},
methods: {
getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose(); // Dom
}
this.chartDom = document.getElementById('currentDataChart');
this.chart = echarts.init(this.chartDom);
// if (this.chartData.length === 0) {
// return false;
// }
var option = {
color: [
'#288AFF',
'#73DE93',
'#FFCE6A',
'#63BDFF',
'#7164FF',
'#FF6860',
'#FF9747',
'#B0EB42',
'#D680FF',
'#0043D2',
],
// legend: {
// data: keys,
// right: '1%',
// },
tooltip: {
trigger: 'axis',
},
grid: {
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [50, 30, 40, 50, 60],
type: 'bar',
stack: 'a',
barWidth: 20,
name: '产线1',
},
{
data: [30, 50, 44, 52, 39],
type: 'bar',
stack: 'a',
barWidth: 20,
name: '产线2',
},
{
data: [53, 33, 43, 53, 63],
type: 'bar',
stack: 'a',
barWidth: 20,
name: '产线3',
},
{
data: [35, 39, 44, 65, 45],
type: 'bar',
stack: 'a',
barWidth: 20,
name: '产线4',
},
{
data: [50, 30, 40, 50, 60],
type: 'bar',
stack: 'a',
barWidth: 20,
name: '产线5',
},
],
};
option && this.chart.setOption(option);
},
},
};
</script>

View File

@ -0,0 +1,167 @@
<template>
<div>
<base-table
:table-props="tableProps"
:page="1"
:limit="1000"
:table-data="list" />
<div class="orderBox">
<div class="title">
<span>工单工单1</span>
<span>产品名称名称1</span>
<span>规格规格1</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-tab-pane
:label="'\u3000图表\u3000'"
name="chart"
style="overflow: inherit">
<baseChart />
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import BaseChart from './baseChart.vue';
export default {
name: 'CurrentTest',
components: { BaseChart },
data() {
return {
activeName: 'table',
tableProps: [
{
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,
},
],
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' },
],
};
},
};
</script>
<style scoped lang="scss">
.orderBox {
padding-top: 16px;
}
.title {
span {
display: inline-block;
width: 300px;
font-size: 14px;
padding-bottom: 10px;
}
}
: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;
}
}
</style>

View File

@ -0,0 +1,179 @@
<template>
<base-table
:table-props="tableProps"
:table-data="list"
:max-height="tableH" />
</template>
<script>
import tableHeightMixin from '@/mixins/tableHeightMixin';
export default {
name: 'HourData',
mixins: [tableHeightMixin],
data() {
return {
heightNum: 200,
tableProps: [
{
prop: 'name',
lable: '检测内容',
},
{
label: '2024-01-01 01:00:00',
children: [
{
prop: 'line1-1',
label: '产线1',
},
{
prop: 'line1-2',
label: '产线2',
},
{
prop: 'line1-3',
label: '产线3',
},
{
prop: 'line1-4',
label: '产线4',
},
],
},
{
label: '2024-01-01 02:00:00',
children: [
{
prop: 'line2-1',
label: '产线1',
},
{
prop: 'line2-2',
label: '产线2',
},
{
prop: 'line2-3',
label: '产线3',
},
{
prop: 'line2-4',
label: '产线4',
},
],
},
{
label: '2024-01-01 03:00:00',
children: [
{
prop: 'line3-1',
label: '产线1',
},
{
prop: 'line3-2',
label: '产线2',
},
{
prop: 'line3-3',
label: '产线3',
},
{
prop: 'line3-4',
label: '产线4',
},
],
},
],
list: [
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
{
name: '磨边缺陷数',
'line1-1': 1,
'line1-2': 2,
'line1-3': 3,
'line1-4': 4,
'line2-1': 5,
'line2-2': 6,
'line2-3': 7,
'line2-4': 8,
'line3-1': 9,
'line3-2': 10,
'line3-3': 11,
'line3-4': 12,
},
],
};
},
};
</script>

View File

@ -1,622 +1,88 @@
<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 class="currentDataContainer">
<div class="topBox">
<el-menu
:default-active="activeName"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="currentTest">当前检测数据</el-menu-item>
<el-menu-item index="24hour">24小时检测数据</el-menu-item>
</el-menu>
</div>
<div class="bottomBox">
<!-- 当前检测数据 -->
<div v-if="activeName === 'currentTest'">
<CurrentTest />
</div>
<!-- 24小时检测数据 -->
<div v-if="activeName === '24hour'">
<HourData />
</div>
</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';
import CurrentTest from './currentTest.vue';
import HourData from './hourData.vue';
export default {
name: 'statisticalData',
// components: {
// DialogForm,
// },
// mixins: [basicPageMixin],
name: 'currentData',
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,
},
activeName: 'currentTest',
};
},
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()
components: {
CurrentTest,
HourData,
},
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
handleSelect(name) {
this.activeName = name;
},
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 {
.currentDataContainer {
width: 100%;
min-height: calc(100vh - 120px - 8px);
background: rgba(242, 244, 249, 1);
.topBox {
.el-menu {
background-color: #f2f4f9;
margin-bottom: 8px;
display: inline-block;
transform: translateY(-12px);
}
.el-tabs__content {
overflow: visible;
.el-menu.el-menu--horizontal {
border-bottom: none;
width: 100%;
.el-menu-item {
height: 48px;
line-height: 48px;
width: calc((100% / 2) - 4px);
border-radius: 8px;
background-color: #fff;
font-size: 16px;
font-weight: 500;
color: rgba(22, 22, 22, 0.65);
text-align: center;
}
.el-tabs__item {
padding-left: 0 !important;
padding-right: 0 !important;
line-height: 36px !important;
height: 36px;
:first-child {
margin-right: 8px;
}
.el-menu-item.is-active {
border-width: 4px;
color: #161616;
}
}
.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;
.el-tabs__active-bar {
display: none;
}
}
.bottomBox {
min-height: calc(100vh - 184px);
background: #fff;
padding: 16px;
border-radius: 8px;
}
}
</style>

View File

@ -231,7 +231,7 @@ export default {
searchBarFormConfig: [
{
type: 'select',
label: '工单',
label: '工单名称',
selectOptions: [],
labelField: 'name',
valueField: 'id',

View File

@ -202,6 +202,7 @@ export default {
selectOptions: [],
filterable: true,
clearable: false,
defaultSelect: '',
},
{
// parent: 'dateFilterType',
@ -246,7 +247,6 @@ export default {
},
created() {
this.getWorkOrder();
this.getList();
},
methods: {
/** 准备工厂数据 */
@ -262,7 +262,16 @@ export default {
id: item.id,
};
});
this.searchBarFormConfig[0].defaultSelect =
this.searchBarFormConfig[0].selectOptions[0].id;
this.queryParams.workOrderId =
this.searchBarFormConfig[0].selectOptions[0].id;
} else {
this.searchBarFormConfig[0].selectOptions = [];
this.searchBarFormConfig[0].defaultSelect = '';
this.queryParams.workOrderId = '';
}
this.getList();
},
/** 查询列表 */
async getList() {
@ -284,14 +293,11 @@ export default {
});
},
handleSearchBarBtnClick({ btnName, ...payload }) {
console.log(btnName);
console.log(payload);
if (btnName == 'search') {
this.queryParams.workOrderId = payload.workOrderId || null;
this.queryParams.recordTime = payload.recordTime || undefined;
if (btnName == 'search') {
this.getList();
} else {
// this.queryParams.recordTime = null;
this.exportExcel();
console.log('导出');
}

View File

@ -111,9 +111,10 @@ export default {
type: 'select',
label: '工单名称',
selectOptions: [],
labelField: 'name',
valueField: 'id',
param: 'workOrderId',
defaultSelect: '',
filterable: true,
clearable: false,
},
{
type: 'datePicker',
@ -153,7 +154,6 @@ export default {
// AddOrUpdate,
},
created() {
this.getList();
this.getDict();
},
methods: {
@ -172,6 +172,11 @@ export default {
};
});
console.log(this.formConfig[0].selectOptions);
this.formConfig[0].defaultSelect =
this.formConfig[0].selectOptions[0].id || '';
this.listQuery.workOrderId =
this.formConfig[0].selectOptions[0].id || '';
this.getList();
});
},
handleExport() {

View File

@ -115,7 +115,6 @@ export default {
};
},
created() {
this.getList();
this.getDict();
},
methods: {
@ -135,7 +134,9 @@ export default {
});
this.formConfig[0].defaultSelect =
this.formConfig[0].selectOptions[0].id || '';
console.log(this.formConfig[0].selectOptions);
this.listQuery.workOrderId =
this.formConfig[0].selectOptions[0].id || '';
this.getList();
});
},
buttonClick(val) {