更新
This commit is contained in:
470
src/views/base/equipmentSectionShutdownLog/index.vue
Normal file
470
src/views/base/equipmentSectionShutdownLog/index.vue
Normal file
@@ -0,0 +1,470 @@
|
||||
<!--
|
||||
* @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>
|
||||
Reference in New Issue
Block a user