471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2026-04-16 14:03:22
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2026-04-17 15:50:29
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div style="background: #f2f4f9">
|
|
<div style="background: #f2f4f9; height: 38px; width: 100%">
|
|
<ButtonNav
|
|
ref="buttonNav"
|
|
:menus="['计划停机配置', '停机记录']"
|
|
@change="currentMenu">
|
|
<template v-slot:tab1>
|
|
<div>计划停机配置</div>
|
|
</template>
|
|
<template v-slot:tab2>
|
|
<div>停机记录</div>
|
|
</template>
|
|
</ButtonNav>
|
|
</div>
|
|
<div
|
|
style="
|
|
background: #ffffff;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
padding: 10px 10px 0 10px;
|
|
">
|
|
<!-- 搜索工作栏 -->
|
|
<search-bar
|
|
v-if="activeName === '计划停机配置'"
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick" />
|
|
|
|
<div v-else class="searchBarBox">
|
|
<el-form
|
|
:inline="true"
|
|
ref="searchBarForm"
|
|
:model="formInline"
|
|
class="searchBar">
|
|
<span class="blue-block"></span>
|
|
<el-form-item label="产线/工段" prop="lineIds">
|
|
<el-cascader size="small"
|
|
v-model="formInline.lineIds"
|
|
:options="options"
|
|
:props="{
|
|
value: 'id',
|
|
label: 'name',
|
|
checkStrictly: true,
|
|
multiple: true,
|
|
emitPath: false,
|
|
}"></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="时间范围" prop="times">
|
|
<el-date-picker size="small"
|
|
v-model="formInline.times"
|
|
type="daterange"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
range-separator="-"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="停机时长" prop="duration">
|
|
<el-select size="small"
|
|
v-model="durationJudge"
|
|
@change="handleCompareChange"
|
|
style="width: 100px; margin-right: 8px">
|
|
<el-option label="大于" value="1"></el-option>
|
|
<el-option label="大于等于" value="2"></el-option>
|
|
<el-option label="小于" value="3"></el-option>
|
|
<el-option label="小于等于" value="4"></el-option>
|
|
<el-option label="等于" value="5"></el-option>
|
|
<el-option label="介于" value="6"></el-option>
|
|
</el-select>
|
|
<el-input size="small"
|
|
v-model.number="duration1"
|
|
type="number"
|
|
placeholder="输入整数"
|
|
min="0"
|
|
style="width: 100px; margin-right: 8px"
|
|
@keydown="preventNonInteger"></el-input>
|
|
<span v-if="durationJudge === '6'" style="margin-right: 8px">
|
|
~
|
|
</span>
|
|
|
|
<el-input size="small"
|
|
v-if="durationJudge === '6'"
|
|
v-model.number="duration2"
|
|
type="number"
|
|
placeholder="输入整数"
|
|
min="0"
|
|
style="width: 100px; margin-right: 8px"
|
|
@keydown="preventNonInteger"></el-input>
|
|
<!-- 时间单位下拉 -->
|
|
<el-select size="small" v-model="timeUnit" style="width: 100px">
|
|
<el-option label="分钟" value="minute"></el-option>
|
|
<el-option label="小时" value="hour"></el-option>
|
|
<el-option label="天" value="day"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="small" type="primary" @click="handleRecordSearch">
|
|
查询
|
|
</el-button>
|
|
<el-button size="small" type="warning" @click="handleExport1">
|
|
导出
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="app-container"
|
|
v-if="activeName === '计划停机配置'"
|
|
style="background: #ffffff">
|
|
<!-- 表 -->
|
|
<div>
|
|
<base-table
|
|
:page="1"
|
|
:limit="100"
|
|
:table-props="tableProps1"
|
|
:table-data="list"
|
|
:max-height="500">
|
|
<method-btn
|
|
v-if="tableBtn.length"
|
|
slot="handleBtn"
|
|
:width="90"
|
|
label="操作"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick" />
|
|
</base-table>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="app-container"
|
|
v-else-if="activeName === '停机记录'"
|
|
style="background: #ffffff">
|
|
<!-- 表 -->
|
|
<div>
|
|
<base-table
|
|
:page="1"
|
|
:limit="100"
|
|
:table-props="tableProps2"
|
|
:table-data="list"
|
|
:max-height="500"></base-table>
|
|
</div>
|
|
</div>
|
|
<base-dialog
|
|
:dialogTitle="addOrEditTitle"
|
|
:dialogVisible="addOrUpdateVisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
width="40%">
|
|
<add-or-update
|
|
ref="addOrUpdate"
|
|
@refreshDataList="successSubmit"></add-or-update>
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ButtonNav from '@/components/ButtonNav';
|
|
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
|
import {
|
|
planList,
|
|
errorList,
|
|
exportPlanList,
|
|
exportErrorList,
|
|
} from '@/api/base/equipmentSectionShutdownLog';
|
|
import subDiv from './subDiv.vue';
|
|
import AddOrUpdate from './add-or-updata';
|
|
import basicPage from '@/mixins/basic-page';
|
|
import { getGroupPlanTree } from '@/api/group/Schedule';
|
|
|
|
const tableProps1 = [
|
|
{
|
|
prop: 'lineName',
|
|
label: '产线名称',
|
|
},
|
|
{
|
|
prop: 'timeVal',
|
|
label: '停机起止时间',
|
|
subcomponent: subDiv,
|
|
},
|
|
{
|
|
prop: 'durationStr',
|
|
label: '停机时长',
|
|
},
|
|
{
|
|
prop: 'reason',
|
|
label: '原因',
|
|
},
|
|
];
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'lineName',
|
|
label: '产线名称',
|
|
},
|
|
{
|
|
prop: 'sectionName',
|
|
label: '工段名称',
|
|
},
|
|
{
|
|
prop: 'timeVal',
|
|
label: '停机起止时间',
|
|
subcomponent: subDiv,
|
|
},
|
|
{
|
|
prop: 'duration',
|
|
label: '停机时长',
|
|
},
|
|
];
|
|
export default {
|
|
mixins: [basicPage],
|
|
name: '',
|
|
data() {
|
|
return {
|
|
urlOptions: {
|
|
exportURL: exportPlanList,
|
|
},
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '产线',
|
|
selectOptions: [],
|
|
param: 'lineIds',
|
|
collapseTags: true,
|
|
multiple: true,
|
|
},
|
|
{
|
|
type: 'datePicker',
|
|
label: '时间范围',
|
|
dateType: 'daterange',
|
|
format: 'yyyy-MM-dd',
|
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
param: 'timeVal',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '新增',
|
|
name: 'add',
|
|
color: 'success',
|
|
plain: true,
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '导出',
|
|
name: 'export',
|
|
color: 'warning',
|
|
},
|
|
],
|
|
tableBtn: [
|
|
{
|
|
type: 'edit',
|
|
btnName: '编辑',
|
|
},
|
|
].filter((v) => v),
|
|
activeName: '计划停机配置',
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 20,
|
|
lineIds: null,
|
|
times: null,
|
|
},
|
|
tableProps1,
|
|
tableProps2,
|
|
list: [],
|
|
lineList: [],
|
|
formInline: {
|
|
lineIds: null,
|
|
times: null,
|
|
durationJudge: '1',
|
|
duration: 0,
|
|
},
|
|
options: [], // 产线/工段选项
|
|
// 停机时长筛选相关
|
|
durationJudge: '1',
|
|
duration1: 0,
|
|
duration2: '',
|
|
timeUnit: 'minute',
|
|
};
|
|
},
|
|
components: { ButtonNav, AddOrUpdate },
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
getProductionLinePage({
|
|
page: 1,
|
|
limit: 500,
|
|
}).then((response) => {
|
|
this.formConfig[0].selectOptions = response.data.list;
|
|
});
|
|
if (this.$refs.buttonNav) {
|
|
this.$refs.buttonNav.currentMenu = '计划停机配置';
|
|
}
|
|
this.getDataList();
|
|
});
|
|
},
|
|
methods: {
|
|
currentMenu(val) {
|
|
this.activeName = val;
|
|
if (this.activeName == '计划停机配置') {
|
|
this.urlOptions.exportURL = exportPlanList;
|
|
this.getDataList();
|
|
} else {
|
|
this.urlOptions.exportURL = exportErrorList;
|
|
getGroupPlanTree().then((res) => {
|
|
this.options = res.data;
|
|
});
|
|
this.getErrorList();
|
|
}
|
|
},
|
|
//计划停机配置list
|
|
getDataList() {
|
|
planList(this.queryParams).then((response) => {
|
|
this.list = response.data;
|
|
});
|
|
},
|
|
//停机记录list
|
|
getErrorList() {
|
|
errorList(this.formInline).then((response) => {
|
|
this.list = response.data;
|
|
});
|
|
},
|
|
// 查询
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.queryParams.lineIds = val.lineIds;
|
|
this.queryParams.type = val.type;
|
|
this.queryParams.times = val.timeVal;
|
|
this.getDataList();
|
|
break;
|
|
case 'add':
|
|
this.addOrEditTitle = '新增';
|
|
this.addOrUpdateVisible = true;
|
|
this.addOrUpdateHandle();
|
|
break;
|
|
case 'export':
|
|
this.handleExport();
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
},
|
|
//tableBtn点击
|
|
handleClick(val) {
|
|
if (val.type === 'edit') {
|
|
this.addOrUpdateVisible = true;
|
|
this.addOrEditTitle = '编辑';
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init(val.data.id);
|
|
});
|
|
}
|
|
},
|
|
handleCompareChange() {
|
|
// 切换为非between时清空第二个输入框
|
|
if (this.durationJudge !== '6') {
|
|
this.duration2 = '';
|
|
}
|
|
},
|
|
|
|
// * 禁止输入非数字字符
|
|
preventNonInteger(e) {
|
|
// 允许数字、退格、删除、方向键
|
|
const keyCode = e.keyCode;
|
|
if (
|
|
!(keyCode >= 48 && keyCode <= 57) && // 0-9
|
|
!(keyCode >= 96 && keyCode <= 105) && // 小键盘0-9
|
|
keyCode !== 8 && // Backspace
|
|
keyCode !== 46 && // Delete
|
|
!(keyCode >= 37 && keyCode <= 40) // 方向键
|
|
) {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
handleRecordSearch() {
|
|
this.formInline.durationJudge = this.durationJudge;
|
|
// 构建停机时长筛选条件
|
|
if (this.durationJudge === '6') {
|
|
if (this.duration1 !== '' && this.duration2 !== '') {
|
|
this.formInline.duration = undefined;
|
|
// 转分钟
|
|
let start = Number(this.duration1);
|
|
let end = Number(this.duration2);
|
|
if (this.timeUnit === 'hour') {
|
|
start *= 60;
|
|
end *= 60;
|
|
} else if (this.timeUnit === 'day') {
|
|
start *= 60 * 24;
|
|
end *= 60 * 24;
|
|
} //minute 则不处理
|
|
this.formInline.betweenDurationStart = start;
|
|
this.formInline.betweenDurationEnd = end;
|
|
}
|
|
} else {
|
|
if (this.duration1 !== '') {
|
|
let val = Number(this.duration1);
|
|
if (this.timeUnit === 'hour') {
|
|
val *= 60;
|
|
} else if (this.timeUnit === 'day') {
|
|
val *= 60 * 24;
|
|
}
|
|
this.formInline.duration = val;
|
|
}
|
|
}
|
|
// 调用接口查询数据
|
|
|
|
this.getErrorList();
|
|
},
|
|
handleExport1() {
|
|
this.handleRecordSearch()
|
|
// 处理查询参数
|
|
let params = { ...this.formInline };
|
|
params.pageNo = undefined;
|
|
params.pageSize = undefined;
|
|
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
|
this.exportLoading = true;
|
|
return this.urlOptions.exportURL(params);
|
|
}).then(response => {
|
|
this.$download.excel(response, '报表.xls');
|
|
this.exportLoading = false;
|
|
}).catch(() => { });
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.searchBarBox {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
}
|
|
.searchBarBox::after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.searchBar .blue-block {
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
.searchBar .el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|