mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 保养监控

Browse Source
This commit is contained in:
lb 2024-02-04 15:43:33 +08:00
parent fd7e295975
commit 71aab2df9a
3 changed files with 616 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

461
src/views/specialEquipment/maintain/Monitor--detail.vue Normal file
View File

@ -0,0 +1,461 @@
<!--
filename: PlanConfig--addContent.vue
author: liubin
date: 2024-02-04 09:40:04
description:
-->
<template>
<el-drawer
:visible="visible"
:show-close="false"
:wrapper-closable="false"
class="drawer"
custom-class="mes-drawer"
size="60%"
@closed="$emit('destroy')">
<SmallTitle slot="title">
{{
mode.includes('detail')
? '详情'
: mode.includes('edit')
? '编辑'
: '新增'
}}
</SmallTitle>
<div class="drawer-body flex">
<div class="drawer-body__content">
<section>
<SmallTitle>保养信息</SmallTitle>
<div class="form-part" style="margin-bottom: 32px">
<el-skeleton v-if="!showForm" animated />
<el-form
v-else
ref="form"
:model="form"
label-position="top"
v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="保养计划名称" prop="name">
<span>{{ form.name }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="部门" prop="departmentName">
<span>{{ form.departmentName }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="产线名" prop="lineName">
<span>{{ form.lineName }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="保养频率" prop="maintenancePeriod">
<span>{{ form.maintenancePeriod }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="保养时长" prop="maintainDuration">
<span>{{ form.maintainDuration }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="计划保养人员" prop="maintainer">
<span>{{ form.maintainer }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</section>
<section>
<SmallTitle>保养详情</SmallTitle>
<div style="margin-top: 12px; position: relative">
<!-- <div
v-if="!mode.includes('detail')"
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddDetail" type="text">
<i class="el-icon-plus"></i>
添加详情
</el-button>
</div> -->
<base-table
v-loading="detailLoading"
:table-props="detailTableProps"
:page="detailTableQuery.pageNo || 1"
:limit="detailTableQuery.pageSize || 10"
:table-data="detailList"
@emitFun="handleDetailTableAction">
<!-- <method-btn
slot="handleBtn"
label="操作"
width="100"
:method-list="detailTableBtns"
@clickBtn="handleDetailTableBtnClicked" /> -->
</base-table>
<!-- 分页组件 -->
<pagination
v-show="detailTotal > 0"
:total="detailTotal"
:page.sync="detailTableQuery.pageNo"
:limit.sync="detailTableQuery.pageSize"
@pagination="refreshDetailList" />
</div>
</section>
</div>
</div>
<div class="drawer-body__footer">
<el-button style="" @click="cancel">取消</el-button>
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button>
<el-button v-else type="primary" @click="confirm">保存</el-button>
</div>
<!-- 属性对话框 -->
<base-dialog
dialogTitle="保养详情"
:dialogVisible="detailAddVisible"
width="35%"
:append-to-body="true"
custom-class="baseDialog"
@close="closeDetailForm"
@cancel="closeDetailForm"
@confirm="submitDetailForm">
<DialogForm
v-if="detailAddVisible"
ref="detailForm"
v-model="detailForm"
:rows="detailRows" />
</base-dialog>
</el-drawer>
</template>
<script>
import DialogForm from '@/components/DialogForm';
const SmallTitle = {
name: 'SmallTitle',
props: ['size'],
components: {},
data() {
return {};
},
methods: {},
render: function (h) {
return h(
'span',
{
class: 'small-title',
style: {
fontSize: '18px',
lineHeight:
this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px',
fontWeight: 500,
fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
},
},
this.$slots.default
);
},
};
export default {
name: 'PlanConfig--addContent',
components: { SmallTitle, DialogForm },
props: ['maintainData'],
data() {
return {
visible: false,
mode: 'edit',
showForm: false,
form: {
departmentName: null,
id: null,
lineName: null,
maintainDuration: null,
maintainer: null,
maintenancePeriod: null,
name: null,
},
formLoading: false,
equipmentOptions: [],
detailList: [],
detailAddVisible: false,
detailPageProps: ['equipmentName', 'program'],
detailForm: {
planId: null,
equipmentId: null,
program: '',
maintenanceDes: '',
remark: '',
},
detailRows: [
[
{
select: true,
label: '设备',
prop: 'equipmentId',
options: [],
rules: [
{ required: true, message: '设备不能为空', trigger: 'blur' },
],
},
],
[
{
input: true,
label: '保养项目',
prop: 'program',
rules: [
{ required: true, message: '保养项目不能为空', trigger: 'blur' },
],
},
],
[
{
input: true,
label: '保养描述',
prop: 'maintenanceDes',
rules: [
{ required: true, message: '包养描述不能为空', trigger: 'blur' },
],
},
],
],
detailLoading: false,
detailTableProps: [
{ prop: 'equipmentName', label: '设备名称' },
{ prop: 'program', label: '保养项目' },
{ prop: 'remark', label: '备注' },
],
detailTableQuery: {
pageNo: 1,
pageSize: 10,
},
detailTableBtns: [
{
type: 'edit',
btnName: '编辑',
},
{
type: 'delete',
btnName: '删除',
},
],
detailTotal: 0,
detailList: [],
equipmentList: [],
};
},
computed: {},
mounted() {
this.loadEquipments();
},
methods: {
show({
departmentName,
id,
lineName,
maintainDuration,
maintainer,
maintenancePeriod,
name,
}) {
this.form = Object.assign(
{},
{
departmentName,
id,
lineName,
maintainDuration,
maintainer,
maintenancePeriod,
name,
}
);
this.$nextTick(() => {
this.refreshDetailList();
});
this.visible = true;
this.showForm = true;
},
cancel() {
this.visible = false;
setTimeout(() => {
this.$emit('closed');
}, 500);
},
confirm() {
this.cancel();
},
toggleEdit() {
this.mode == 'edit' ? 'detail' : 'edit';
},
async loadEquipments() {
// TODO: 很有可能此处要改成动态刷新/获取/加载设备列表，当总的特殊设备数量大于100的时候...
const res = await this.$axios('/base/core-equipment/page', {
params: {
pageNo: 1,
pageSize: 100,
special: true,
},
});
this.equipmentList = res.data?.list || [];
this.detailRows[0][0].options = (res.data?.list || []).map((item) => ({
label: item.name,
value: item.id,
}));
},
closeDetailForm() {
this.detailAddVisible = false;
},
async submitDetailForm() {
// validation
this.$refs.detailForm.validate(async (valid) => {
if (!valid) return;
const res = await this.$axios[this.detailForm.id ? 'put' : 'post'](
`/base/equipment-maintain-plan-det/${
this.detailForm.id ? 'update' : 'create'
}`,
{
...this.detailForm,
planId: this.form.id,
}
);
if (res.code == 0) {
this.detailAddVisible = false;
this.$message.success('添加成功');
this.refreshDetailList();
} else {
this.detailAddVisible = false;
this.$message.error('出错');
}
});
},
async refreshDetailList() {
this.detailLoading = true;
if (!this.form.id)
return this.$message.info('没有找到保养计划相关信息...');
const res = await this.$axios('/base/equipment-maintain-plan-det/page', {
params: {
pageNo: this.detailTableQuery.pageNo,
pageSize: this.detailTableQuery.pageSize,
planId: this.form.id,
},
});
this.detailList = res.data?.list || [];
this.detailTotal = res.data?.total || 0;
this.detailLoading = false;
},
//
handleDetailTableAction() {},
handleDetailTableBtnClicked({ data, type }) {
switch (type) {
case 'edit':
const { id, equipmentId, planId, program, maintenanceDes, remark } =
data;
this.detailAddVisible = true;
this.$nextTick(() => {
this.detailForm = Object.assign(
{},
{
id,
equipmentId,
planId,
program,
maintenanceDes,
remark,
}
);
});
break;
case 'delete':
if (!data.id) return;
this.$confirm('确认移除该详情吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消',
})
.then(async () => {
const res = await this.$axios.delete(
'/base/equipment-maintain-plan-det/delete',
{
params: {
id: data.id,
},
}
);
if (res.code == 0) {
this.$message.success('删除成功!');
this.refreshDetailList();
}
})
.catch(console.error);
break;
case 'detail':
this.handleDetail(data);
break;
default:
this.handleTableActions({ data, type });
}
},
handleAddDetail() {
this.detailAddVisible = true;
},
},
};
</script>
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 0px;
}
.small-title::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: 22px;
border-radius: 1px;
margin-right: 8px;
background-color: #0b58ff;
}
.drawer-body {
display: flex;
flex-direction: column;
height: calc(100% - 72px);
}
.drawer-body__content {
flex: 1;
/* background: #eee; */
padding: 20px 30px;
overflow-y: auto;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style>

235
src/views/specialEquipment/maintain/Monitor.vue
View File

@ -52,6 +52,11 @@
:has-files="false"
:rows="rows" />
</base-dialog>
<MonitorDetail
v-if="monitorDetailVisible"
ref="monitorDetailDrawer"
@closed="monitorDetailVisible = false" />
</div>
</template>
@ -62,6 +67,8 @@ import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { exportMaintainMonitorExcel } from '@/api/equipment/base/maintain/record';
import { parseTime } from '@/utils/ruoyi';
import MonitorDetail from './Monitor--detail.vue';
const remainBox = {
name: 'RemainBox',
props: ['injectData'],
@ -120,22 +127,28 @@ const btn = {
export default {
name: 'SpecialEquipmentMaintainMonitor',
components: {},
components: { MonitorDetail },
mixins: [basicPageMixin],
data() {
return {
searchBarKeys: ['planId', 'specialType', 'equipmentId'],
monitorDetailVisible: false,
searchBarKeys: ['planId'],
tableProps: [
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: parseTime(createTime),
// },
{
prop: 'code',
label: '保养计划单号',
minWidth: 118,
showOverflowtooltip: true,
},
{
prop: 'name',
label: '保养计划',
label: '保养计划名称',
minWidth: 118,
showOverflowtooltip: true,
},
{
prop: 'departmentName',
label: '部门',
minWidth: 100,
showOverflowtooltip: true,
},
@ -146,61 +159,101 @@ export default {
showOverflowtooltip: true,
},
{
prop: 'equipmentCategory',
label: '设备大类',
minWidth: 100,
prop: 'lastPlanMaintainTime',
label: '上次计划保养时间',
filter: parseTime,
minWidth: 158,
showOverflowtooltip: true,
filter: (val) =>
val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
},
{
prop: 'equipmentName',
label: '设备名称',
minWidth: 100,
showOverflowtooltip: true,
},
{ prop: 'maintenancePeriod', label: '保养频率' },
{
prop: 'maintainType',
label: '保养类型',
showOverflowtooltip: true,
filter: publicFormatter(this.DICT_TYPE.MAINTAIN_TYPE),
},
{
prop: 'lastMaintainTime',
label: '上次保养时间',
label: '上次实际保养时间',
filter: parseTime,
minWidth: 150,
minWidth: 158,
showOverflowtooltip: true,
},
{
prop: 'nextMaintainTime',
label: '计划下次保养时间',
prop: 'nextPlanMaintainTime',
label: '下次计划保养时间',
filter: parseTime,
minWidth: 150,
minWidth: 158,
showOverflowtooltip: true,
},
{
prop: 'remainDays',
label: '距离保养时间(天)',
subcomponent: remainBox,
minWidth: 150,
// showOverflowtooltip: true
},
{
prop: 'opt1',
label: '设备保养',
name: '操作',
subcomponent: btn,
width: 100,
prop: 'maintainer',
label: '计划保养人员',
minWidth: 158,
showOverflowtooltip: true,
},
{
prop: 'opt2',
label: '保养记录',
name: '查看详情',
label: '保养内容',
name: '详情',
subcomponent: btn,
width: 100,
},
{
prop: 'remainDays',
label: '距离下次保养剩余时间(天)',
subcomponent: remainBox,
minWidth: 210,
},
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: parseTime(createTime),
// },
// {
// prop: 'equipmentCategory',
// label: '设备大类',
// minWidth: 100,
// showOverflowtooltip: true,
// filter: (val) =>
// val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
// },
// {
// prop: 'equipmentName',
// label: '设备名称',
// minWidth: 100,
// showOverflowtooltip: true,
// },
// { prop: 'maintenancePeriod', label: '保养频率' },
// {
// prop: 'maintainType',
// label: '保养类型',
// showOverflowtooltip: true,
// filter: publicFormatter(this.DICT_TYPE.MAINTAIN_TYPE),
// },
// {
// prop: 'lastMaintainTime',
// label: '上次保养时间',
// filter: parseTime,
// minWidth: 150,
// showOverflowtooltip: true,
// },
// {
// prop: 'remainDays',
// label: '距离保养时间(天)',
// subcomponent: remainBox,
// minWidth: 150,
// // showOverflowtooltip: true
// },
// {
// prop: 'opt1',
// label: '设备保养',
// name: '操作',
// subcomponent: btn,
// width: 100,
// },
// {
// prop: 'opt2',
// label: '保养记录',
// name: '查看详情',
// subcomponent: btn,
// width: 100,
// },
],
searchBarFormConfig: [
{
@ -210,26 +263,26 @@ export default {
param: 'planId',
filterable: true,
},
{
type: 'select',
label: '设备大类',
placeholder: '请选择设备大类',
param: 'specialType',
onchange: true,
selectOptions: [
{ id: 1, name: '安全设备' },
{ id: 2, name: '消防设备' },
{ id: 3, name: '特种设备' },
],
filterable: true,
},
{
type: 'select',
label: '设备名',
placeholder: '请选择设备',
param: 'equipmentId',
filterable: true,
},
// {
// type: 'select',
// label: '设备大类',
// placeholder: '请选择设备大类',
// param: 'specialType',
// onchange: true,
// selectOptions: [
// { id: 1, name: '安全设备' },
// { id: 2, name: '消防设备' },
// { id: 3, name: '特种设备' },
// ],
// filterable: true,
// },
// {
// type: 'select',
// label: '设备名',
// placeholder: '请选择设备',
// param: 'equipmentId',
// filterable: true,
// },
{
type: 'button',
btnName: '查询',
@ -255,10 +308,8 @@ export default {
queryParams: {
pageNo: 1,
pageSize: 10,
equipmentName: null,
createTime: null,
planId: null,
special: true,
specialType: null,
},
// 表单参数
form: {},
@ -331,28 +382,34 @@ export default {
});
},
handleEmitFun({ action, value }) {
console.log('handleEmitFun .... ', action, value);
switch (action) {
// 查看详情
case '设备保养':
this.$router.push({
path: '/equipment/base/maintain/record',
query: {
addRecord: 1,
row: value,
},
});
break;
case '保养记录':
const queryData = {
equipmentId: value.equipmentId,
maintainPlanId: value.id,
relatePlan: value.lastMaintainTime ? 1 : 2,
};
this.$router.push({
path: '/equipment/base/maintain/record',
query: queryData,
case '保养内容':
this.monitorDetailVisible = true;
this.$nextTick(() => {
this.$refs.monitorDetailDrawer.show(value);
});
break;
// case '设备保养':
// this.$router.push({
// path: '/equipment/base/maintain/record',
// query: {
// addRecord: 1,
// row: value,
// },
// });
// break;
// case '保养记录':
// const queryData = {
// equipmentId: value.equipmentId,
// maintainPlanId: value.id,
// relatePlan: value.lastMaintainTime ? 1 : 2,
// };
// this.$router.push({
// path: '/equipment/base/maintain/record',
// query: queryData,
// });
// break;
}
},
/** 查询列表 */

12
src/views/specialEquipment/maintain/PlanConfig--add.vue
View File

@ -199,7 +199,12 @@
</el-col>
<el-col :span="12">
<el-form-item label="首次保养时间" prop="firstMaintenanceTime">
<el-form-item
label="首次保养时间"
prop="firstMaintenanceTime"
:rules="[
{ required: true, message: '请选择首次保养时间', trigger: 'blur' },
]">
<el-date-picker
v-model="form.firstMaintenanceTime"
type="datetime"
@ -297,14 +302,15 @@ export default {
],
lineList: [],
maintainerList: [],
departmentList: []
departmentList: [],
};
},
watch: {
dataForm: {
handler(val) {
this.form = JSON.parse(JSON.stringify(val));
if (typeof val.maintainer == 'string') this.form.maintainer = val.maintainer.split(',')
if (typeof val.maintainer == 'string')
this.form.maintainer = val.maintainer.split(',');
if (this.form.equipmentCategory != null) {
setTimeout(() => {
this.equipmentOptions = this.equipmentList