303 lines
7.0 KiB
Vue
303 lines
7.0 KiB
Vue
<!--
|
|
* @Author: Do not edit
|
|
* @Date: 2023-08-29 14:59:29
|
|
* @LastEditTime: 2025-01-09 10:27:53
|
|
* @LastEditors: zwq
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@select-changed="handleSearchBarChanged"
|
|
@headBtnClick="buttonClick" />
|
|
<div v-if="showData.length">
|
|
<base-table
|
|
class="right-aside"
|
|
v-loading="dataListLoading"
|
|
:table-props="tableProps"
|
|
:page="1"
|
|
:limit="999"
|
|
:table-data="showData">
|
|
<method-btn
|
|
v-if="showData.length"
|
|
slot="handleBtn"
|
|
:width="80"
|
|
label="操作"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick" />
|
|
</base-table>
|
|
<barChart
|
|
v-for="item in chartData"
|
|
:key="item.name + 'echart'"
|
|
style="margin-top: 50px"
|
|
height="600px"
|
|
:id="item.name + 'echart'"
|
|
:title="item.name + ' 节拍趋势图'"
|
|
:bar-data="item" />
|
|
</div>
|
|
<div v-else class="no-data-bg"></div>
|
|
<base-dialog
|
|
:dialogTitle="addOrEditTitle"
|
|
:dialogVisible="addOrUpdateVisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
close-on-click-modal
|
|
top="0"
|
|
width="50%">
|
|
<eq-detail ref="eqDetail" />
|
|
<slot name="footer">
|
|
<el-row slot="footer" type="flex" justify="end">
|
|
<el-col :span="24">
|
|
<el-button size="small" class="btnTextStyle" @click="handleCancel">
|
|
取消
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</slot>
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import eqDetail from './eq-detail';
|
|
import { parseTime } from '../../mixins/code-filter';
|
|
import { getPdList } from '@/api/core/monitoring/auto';
|
|
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
|
|
import { getFactoryPage } from '@/api/core/base/factory';
|
|
// import codeFilter from '../../mixins/code-filter'
|
|
import * as XLSX from 'xlsx';
|
|
import FileSaver from 'file-saver';
|
|
import barChart from './BarChart.vue';
|
|
|
|
const tableProps = [
|
|
{
|
|
prop: 'factoryName',
|
|
label: '工厂',
|
|
},
|
|
{
|
|
prop: 'lineName',
|
|
label: '产线',
|
|
},
|
|
{
|
|
prop: 'size',
|
|
label: '规格',
|
|
showOverflowtooltip: true,
|
|
},
|
|
{
|
|
prop: 'process',
|
|
label: '产品工艺',
|
|
},
|
|
{
|
|
prop: 'edgeCt',
|
|
label: '磨边当前节拍pcs/min',
|
|
},
|
|
{
|
|
prop: 'temperCt',
|
|
label: '钢化当前节拍pcs/min',
|
|
},
|
|
{
|
|
prop: 'downCt',
|
|
label: '下片当前节拍pcs/min',
|
|
},
|
|
];
|
|
|
|
export default {
|
|
components: {
|
|
barChart,
|
|
eqDetail,
|
|
},
|
|
data() {
|
|
return {
|
|
urlOptions: {
|
|
getDataListURL: getNewCTNow,
|
|
},
|
|
listQuery: {
|
|
lineId: [],
|
|
},
|
|
fileName: '',
|
|
dataListLoading: false,
|
|
tableProps,
|
|
tableBtn: [
|
|
{
|
|
type: 'eq',
|
|
btnName: '详情',
|
|
},
|
|
].filter((v) => v),
|
|
showData: [],
|
|
tableData: [],
|
|
chartData: [],
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '工厂',
|
|
selectOptions: [],
|
|
param: 'factoryId',
|
|
onchange: true,
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: '产线',
|
|
selectOptions: [],
|
|
param: 'lineId',
|
|
multiple: true,
|
|
},
|
|
{
|
|
type: 'datePicker',
|
|
label: '时间范围',
|
|
dateType: 'datetimerange',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'timestamp',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
defaultTime: ['00:00:00', '23:59:59'],
|
|
param: 'timeVal',
|
|
width: 350,
|
|
clearable: false,
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
// {
|
|
// type: 'separate',
|
|
// },
|
|
// {
|
|
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
|
// type: 'button',
|
|
// btnName: '导出',
|
|
// name: 'export',
|
|
// color: 'warning',
|
|
// },
|
|
],
|
|
addOrEditTitle: '',
|
|
addOrUpdateVisible: false,
|
|
};
|
|
},
|
|
created() {
|
|
// 获取当前时间
|
|
const now = new Date();
|
|
// 获取前一天的同一时间
|
|
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
|
// 设置为00:00:00
|
|
yesterday.setHours(0, 0, 0, 0);
|
|
// 设置为23:59:59
|
|
const end = new Date(yesterday.getTime());
|
|
end.setHours(23, 59, 59, 59);
|
|
this.listQuery.startTime = yesterday.getTime();
|
|
this.listQuery.endTime = end.getTime();
|
|
this.$nextTick(() => {
|
|
this.$refs.searchBarForm.formInline.timeVal = [
|
|
yesterday.getTime(),
|
|
end.getTime(),
|
|
];
|
|
});
|
|
this.getDataList();
|
|
this.getPdLineList();
|
|
},
|
|
methods: {
|
|
handleExport() {
|
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
|
const fix = tables.querySelector('.el-table__fixed');
|
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
|
if (fix) {
|
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
|
}
|
|
if (fixRight) {
|
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
|
}
|
|
let exportTable = XLSX.utils.table_to_book(tables);
|
|
|
|
var exportTableOut = XLSX.write(exportTable, {
|
|
bookType: 'xlsx',
|
|
bookSST: true,
|
|
type: 'array',
|
|
});
|
|
// sheetjs.xlsx为导出表格的标题名称
|
|
try {
|
|
FileSaver.saveAs(
|
|
new Blob([exportTableOut], {
|
|
type: 'application/octet-stream',
|
|
}),
|
|
this.fileName + '产线自动报表.xlsx'
|
|
);
|
|
} catch (e) {
|
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
|
}
|
|
return exportTableOut;
|
|
},
|
|
getPdLineList() {
|
|
getPdList().then((res) => {
|
|
this.formConfig[1].selectOptions = res.data || [];
|
|
});
|
|
const params = {
|
|
pageSize: 100,
|
|
pageNo: 1,
|
|
};
|
|
getFactoryPage(params).then((res) => {
|
|
this.formConfig[0].selectOptions = res.data.list || [];
|
|
});
|
|
},
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.factoryId = val.factoryId || undefined;
|
|
this.listQuery.lineId = val.lineId ? val.lineId : [];
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
|
this.getDataList();
|
|
break;
|
|
case 'export':
|
|
this.handleExport();
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
},
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.dataListLoading = true;
|
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
|
this.tableData = response.data;
|
|
this.dataListLoading = false;
|
|
this.showData = this.tableData;
|
|
});
|
|
getNewCTCharts(this.listQuery).then((response) => {
|
|
this.chartData = response.data;
|
|
});
|
|
},
|
|
handleSearchBarChanged({ param, value }) {
|
|
this.listQuery.lineId = [];
|
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
|
getPdList(value).then((res) => {
|
|
this.formConfig[1].selectOptions = res.data || [];
|
|
});
|
|
},
|
|
handleClick(val) {
|
|
this.addOrUpdateVisible = true;
|
|
this.addOrEditTitle =
|
|
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
|
this.$nextTick(() => {
|
|
this.$refs.eqDetail.init(
|
|
val.data.lineId,
|
|
this.listQuery.startTime,
|
|
this.listQuery.endTime
|
|
);
|
|
});
|
|
},
|
|
handleCancel() {
|
|
this.addOrUpdateVisible = false;
|
|
this.addOrEditTitle = '';
|
|
},
|
|
handleConfirm() {
|
|
this.handleCancel();
|
|
},
|
|
},
|
|
};
|
|
</script>
|