From 84358f2bc9415c90099306f0c9c41cdc24cc78d6 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期三, 10 八月 2022 18:34:32 +0800 Subject: [PATCH] 图标 --- src/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue | 703 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 699 insertions(+), 4 deletions(-) diff --git a/src/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue b/src/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue index 8133178..79a10c7 100644 --- a/src/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue +++ b/src/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue @@ -1,9 +1,704 @@ -<template></template> +<template> + <div class="system-add-menu-container"> + <el-dialog v-model="ifShowInspectTaskDialog" :title="title"> + <el-form :model="inspectTaskForm" label-width="120px" ref="inspectTaskFormRef" :rules="inspectTaskFormRules"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称" prop="unitName"> + <el-input v-model="inspectTaskForm.unitName" class="input-add" placeholder="请填写任务名称"> </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型" prop="workType"> + <el-select v-model="inspectTaskForm.workType" class="input-add" placeholder="请选择任务类型"> + <el-option v-for="item in workTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检部门" prop="execDepId"> + <el-cascader @change="giveClassGroup" placeholder="请选择巡检部门" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" clearable filterable class="input-add" v-model="inspectTaskForm.execDepId"> </el-cascader> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检班组" prop="execClassgroupId"> + <el-select v-model="inspectTaskForm.execClassgroupId" placeholder="请选择巡检班组" class="input-add"> + <el-option v-for="item in classGroup" :key="item.id" :value="item.id" :label="item.groupName"></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检周期" prop="checkCycle"> + <el-input v-model="inspectTaskForm.checkCycle" placeholder="请输入巡检周期" class="input-add"> + <template #append> + <el-select v-model="inspectTaskForm.checkCycleUnit" placeholder="选择单位"> + <el-option v-for="item in timeList" :key="item.id" :value="item.id" :label="item.name"></el-option> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="提前通知时间" prop="noticeTime"> + <el-input v-model="inspectTaskForm.noticeTime" placeholder="请输入提前通知时间" class="input-add"> + <template #append> + <el-select v-model="inspectTaskForm.noticeTimeUnit" placeholder="选择单位"> + <el-option v-for="item in timeList" :key="item.id" :value="item.id" :label="item.name"></el-option> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="有效时间" prop="validTime"> + <el-input v-model="inspectTaskForm.validTime" placeholder="请输入有效时间" class="input-add"> + <template #append> + <el-select v-model="inspectTaskForm.validTimeUnit" placeholder="选择单位"> + <el-option v-for="item in timeList" :key="item.id" :value="item.id" :label="item.name"></el-option> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期开始时间" prop="firstStartTime"> + <el-date-picker v-model="inspectTaskForm.firstStartTime" placeholder="请选择周期开始时间" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" class="input-add" /> + </el-form-item> + </el-col> -<script> + <el-col :span="24"> + <el-form-item label="创建巡检链"> + <div style="width: 100%; margin-bottom: 20px" v-show="inspectPointConfirm"> + <el-button type="primary" :icon="Plus" size="default" @click="openInspectPointDialog('新增', '')">新增巡检点</el-button> + </div> + <div style="width: 100%; margin-left: -30px"> + <div v-for="(item, index) in inspectTaskForm.points" class="stepItem"> + <div class="stepNum">{{ index + 1 }}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{ item.pointId }}</div> + </div> + </template> + <div class="text item"> + 所属设备区域:<span>{{ item.regionId }}</span> + </div> + <div class="text item"> + 关联RFID:<span>{{ item.rfidId }}</span> + </div> + <div class="text item"> + 巡检指标:<span>{{ item.quotaId }}</span> + </div> + <div class="text item"> + 数据填报类型:<span>{{ item.dataReportType }}</span> + </div> + <div class="text item"> + 数据参考值:<span>{{ item.firstReferenceValue ? item.firstReferenceValue : item.secondReferenceValue ? item.secondReferenceValue : item.thirdReferenceValue }}</span> + </div> + </el-card> + </div> + <div v-show="inspectPointConfirm"> + <!-- <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>--> + <el-button type="primary" style="margin-left: 12px" size="default" @click="openInspectPointDialog('修改', item)">修改</el-button> + <el-button type="danger" size="default" @click="deleteFlow(index, item)">删除</el-button> + </div> + </div> + </div> + </el-form-item> + </el-col> + </el-row> + <div align="right" v-show="inspectPointConfirm"> + <el-button type="warning" @click="inspectPointDialog = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="submitInspectTask()" size="default">确认</el-button> + </div> + </el-form> + </el-dialog> + <el-dialog v-model="inspectPointDialog" :title="pointTitle"> + <el-form :model="inspectPointForm" label-width="150px" ref="inspectPointFormRef" :rules="inspectPointFormRules"> + <el-form-item label="选择巡检点" prop="pointId"> + <el-select v-model="inspectPointForm.pointId" @change="giveRegionAndRFID" class="input-add"> + <el-option v-for="item in inspectPointAllList" :key="item.id" :value="item.id" :label="item.code"></el-option> + </el-select> + </el-form-item> + <el-form-item label="所属设备区域" prop="regionId"> + <el-input v-model="inspectPointForm.regionId" class="input-add" readonly /> + </el-form-item> + <el-form-item label="关联RFID" prop="rfidId"> + <el-input v-model="inspectPointForm.rfidId" class="input-add" readonly /> + </el-form-item> + <el-form-item label="选择巡检指标" prop="quotaId"> + <el-select v-model="inspectPointForm.quotaId" @change="giveQuotaUnit" placeholder="请选择巡检指标" class="input-add"> + <el-option v-for="item in quotaList" :key="item.id" :value="item.id" :label="item.type"> </el-option> + </el-select> + </el-form-item> + <el-form-item label="选择巡检指标单位" prop="quotaUnit"> + <el-input v-model="inspectPointForm.quotaUnit" placeholder="单位" class="input-add"> </el-input> + </el-form-item> + <el-form-item label="数据填报类型" prop="dataReportType"> + <el-select v-model="inspectPointForm.dataReportType" class="input-add"> + <el-option v-for="item in dataReportTypeList" :key="item.id" :value="item.id" :label="item.name"> </el-option> + </el-select> + </el-form-item> + <el-form-item v-if="inspectPointForm.dataReportType == '1' || inspectPointForm.dataReportType == '3'" label="数据参考值" prop="firstReferenceValue"> + <el-select v-model="inspectPointForm.firstReferenceValue" class="input-add"> + <el-option v-for="item in firstReferenceValueList" :key="item.id" :value="item.id" :label="item.name"> </el-option> + </el-select> + </el-form-item> + <el-form-item v-if="inspectPointForm.dataReportType == '2' || inspectPointForm.dataReportType == '3'" label="数据参考值"> + <el-input v-model="inspectPointForm.secondReferenceValue" type="number" class="input-add" placeholder="请根据需求选择前方符号后再填写参考值,非必填"> + <template #prepend> + <el-select v-model="inspectPointForm.secondReferenceSign" placeholder="Select" style="width: 115px"> + <el-option v-for="item in secondReferenceSignList" :key="item.id" :value="item.id" :label="item.name"> </el-option> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item v-if="inspectPointForm.dataReportType == '2' || inspectPointForm.dataReportType == '3'" label=""> + <el-input v-model="inspectPointForm.thirdReferenceValue" type="number" class="input-add" placeholder="请根据需求选择前方符号后再填写参考值,非必填"> + <template #prepend> + <el-select v-model="inspectPointForm.thirdReferenceSign" placeholder="Select" style="width: 115px"> + <el-option v-for="item in thirdReferenceSignList" :key="item.id" :value="item.id" :label="item.name"> </el-option> + </el-select> + </template> + </el-input> + </el-form-item> + <div align="right"> + <el-button type="warning" @click="inspectPointDialog = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="submitInspectPoint()" size="default">确认</el-button> + </div> + </el-form> + </el-dialog> + </div> +</template> + +<script lang="ts"> +import { reactive, toRefs, ref } from 'vue'; +import { RFIDApi } from '/@/api/intellectInspectSystem/RFID'; +import { ElMessage } from 'element-plus/es'; +import { inspectTaskApi } from '/@/api/intellectInspectSystem/inspectTask'; +import { facilityAreaApi } from '/@/api/intellectInspectSystem/facilityAreaManage'; +interface dataState { + title: string; + pointTitle: string; + inspectPointConfirm: boolean; + inspectPointDialog: boolean; + ifShowInspectTaskDialog: boolean; + inspectPointForm: inspectPointForm; + inspectTaskForm: { + id: number | null; + uuid: number | null; + unitName: number | null; + taskUnitStatus: number | null; + workType: number | null; + execClassgroupId: number | null; + execDepId: number | null; + checkCycle: number | null; + checkCycleUnit: number | null; + noticeTime: number | null; + noticeTimeUnit: number | null; + validTime: number | null; + validTimeUnit: number | null; + firstStartTime: number | null; + points: Array<inspectPointForm>; + }; + inspectTaskFormRules: {}; + inspectPointFormRules: {}; + workTypeList: []; + departmentList: []; + timeList: []; + dataReportTypeList: Array<dataReport>; + firstReferenceValueList: Array<dataReport>; + secondReferenceSignList: Array<dataReport>; + thirdReferenceSignList: Array<dataReport>; + classGroupList: Array<classGroup>; + classGroup: Array<classGroup>; + quotaList: Array<quota>; + inspectPointAllList: Array<inspectPointAllState>; +} +interface inspectPointAllState { + id: number; + code: string; + regionId: number; + rfidId: number; +} +interface classGroup { + depId: number; +} +interface dataReport { + id: number; + name: string; +} +interface quota { + id: number; + type: string; + unit: string; +} +interface inspectPointForm { + id: number | null; + unitId: number | null; + unitUuid: string | null; + pointId: number | null; + pointUuid: string | null; + regionId: number | null; + regionUuid: string | null; + rfidId: number | null; + quotaId: number | null; + quotaUnit: string | null; + execSequence: number | null; + dataReportType: number | null; + firstReferenceValue: number | null; + secondReferenceSign: number | null; + secondReferenceValue: number | null; + thirdReferenceSign: number | null; + thirdReferenceValue: number | null; +} export default { - name: 'inspectTask' + name: 'inspectTaskDialog', + setup(props: any, context: any) { + const inspectTaskFormRef = ref(); + const data = reactive<dataState>({ + title: '', + pointTitle: '', + inspectPointConfirm: false, + inspectPointDialog: false, + ifShowInspectTaskDialog: false, + inspectPointForm: { + id: null, + unitId: null, + unitUuid: null, + pointId: null, + pointUuid: null, + regionId: null, + regionUuid: null, + rfidId: null, + quotaId: null, + quotaUnit: null, + execSequence: null, + dataReportType: null, + firstReferenceValue: null, + secondReferenceSign: null, + secondReferenceValue: null, + thirdReferenceSign: null, + thirdReferenceValue: null + }, + inspectTaskForm: { + id: null, + uuid: null, + unitName: null, + taskUnitStatus: null, + workType: null, + execClassgroupId: null, + execDepId: null, + checkCycle: null, + checkCycleUnit: null, + noticeTime: null, + noticeTimeUnit: null, + validTime: null, + validTimeUnit: null, + firstStartTime: null, + points: [] + }, + inspectTaskFormRules: { + unitName: [{ required: true, message: '请填写巡检任务单元名称', trigger: 'blur' }], + workType: [{ required: true, message: '请选择巡检任务类型', trigger: 'change' }], + execClassgroupId: [{ required: true, message: '请选择巡检班组', trigger: 'change' }], + execDepId: [{ required: true, message: '请选择巡检部门', trigger: 'blur' }], + checkCycle: [{ required: true, message: '请填写巡检周期', trigger: 'blur' }], + noticeTime: [{ required: true, message: '请填写提前通知时间', trigger: 'blur' }], + validTime: [{ required: true, message: '请填写有效时间', trigger: 'blur' }], + firstStartTime: [{ required: true, message: '请选择周期开始时间', trigger: 'change' }] + }, + inspectPointFormRules: {}, + workTypeList: [], + departmentList: [], + timeList: [], + classGroupList: [], + classGroup: [], + quotaList: [], + inspectPointAllList: [], + dataReportTypeList: [ + { id: 1, name: '选择' }, + { id: 2, name: '填空' }, + { id: 3, name: '选择并填空' } + ], + firstReferenceValueList: [ + { id: 0, name: '正常' }, + { id: 1, name: '异常' } + ], + secondReferenceSignList: [ + { id: 1, name: '>' }, + { id: 2, name: '>=' } + ], + thirdReferenceSignList: [ + { id: 3, name: '<' }, + { id: 4, name: '<=' } + ] + }); + + const openInspectPointDialog = (type: string, value: {}) => { + data.inspectPointDialog = true; + if (type === '新增') { + data.pointTitle = '新增巡检点'; + data.inspectPointForm = { + id: null, + unitId: null, + unitUuid: null, + pointId: null, + pointUuid: null, + regionId: null, + regionUuid: null, + rfidId: null, + quotaId: null, + quotaUnit: null, + execSequence: null, + dataReportType: null, + firstReferenceValue: null, + secondReferenceSign: null, + secondReferenceValue: null, + thirdReferenceSign: null, + thirdReferenceValue: null + }; + } else { + data.pointTitle = '修改巡检点'; + data.inspectPointForm = JSON.parse(JSON.stringify(value)); + } + }; + + const showInspectTaskDialog = (type: string, value: { id: number; uuid: string }, workTypeList: [], department: [], timeType: [], classGroupList: [], quotaList: [], inspectPointAllList: []) => { + data.quotaList = JSON.parse(JSON.stringify(quotaList)); + data.timeList = JSON.parse(JSON.stringify(timeType)); + data.inspectPointAllList = JSON.parse(JSON.stringify(inspectPointAllList)); + data.workTypeList = JSON.parse(JSON.stringify(workTypeList)); + data.departmentList = JSON.parse(JSON.stringify(department)); + data.classGroupList = JSON.parse(JSON.stringify(classGroupList)); + data.ifShowInspectTaskDialog = true; + if (type === '新增') { + data.inspectPointConfirm = true; + data.title = '新增巡检任务'; + data.inspectTaskForm = { + id: null, + uuid: null, + unitName: null, + taskUnitStatus: null, + workType: null, + execClassgroupId: null, + execDepId: null, + checkCycle: null, + checkCycleUnit: null, + noticeTime: null, + noticeTimeUnit: null, + validTime: null, + validTimeUnit: null, + firstStartTime: null, + points: [] + }; + } else if (type === '修改') { + data.inspectPointConfirm = true; + data.title = '修改巡检任务'; + inspectTaskApi() + .getInspectTaskById({ id: value.id, uuid: value.uuid }) + .then((res) => { + if (res.data.code === '200') { + data.inspectTaskForm.execDepId = res.data.data.execDepId; + giveClassGroup(); + data.inspectTaskForm = JSON.parse(JSON.stringify(res.data.data)); + } else { + } + }) + .catch((error) => {}); + } else { + data.inspectPointConfirm = false; + data.title = '查看巡检任务'; + inspectTaskApi() + .getInspectTaskById({ id: value.id, uuid: value.uuid }) + .then((res) => { + if (res.data.code === '200') { + data.inspectTaskForm = JSON.parse(JSON.stringify(res.data.data)); + } else { + } + }) + .catch((error) => {}); + } + }; + + const submitInspectPoint = async () => { + if (data.title === '新增巡检任务' && data.pointTitle === '新增巡检点') { + if (data.inspectTaskForm.points.length === 0) { + data.inspectPointForm.execSequence = 1; + } else { + data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1; + } + data.inspectTaskForm.points.push(data.inspectPointForm); + data.inspectPointDialog = false; + } else if (data.title === '新增巡检任务' && data.pointTitle === '修改巡检点') { + let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id); + data.inspectTaskForm.points[result] = data.inspectPointForm; + data.inspectPointDialog = false; + } else if (data.title === '修改巡检任务' && data.pointTitle === '新增巡检点') { + data.inspectPointForm.unitId = data.inspectTaskForm.id; + if (data.inspectTaskForm.points.length === 0) { + data.inspectPointForm.execSequence = 1; + } else { + data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1; + } + let res = await inspectTaskApi().addChainOfInspectTask(data.inspectPointForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '巡检点新增成功', + duration: 2000 + }); + data.inspectPointDialog = false; + data.inspectTaskForm.points.push(data.inspectPointForm); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } else { + data.inspectPointForm.unitId = data.inspectTaskForm.id; + let res = await inspectTaskApi().modChainOfInspectTask(data.inspectPointForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '巡检点修改成功', + duration: 2000 + }); + let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id); + data.inspectTaskForm.points[result] = data.inspectPointForm; + data.inspectPointDialog = false; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + }; + const deleteFlow = async (index: number, item: { id: number }) => { + if (data.pointTitle === '新增巡检点') { + data.inspectTaskForm.points.splice(index, 1); + } else { + let res = await inspectTaskApi().deleteChainOfInspectTask({ id: item.id, unitId: data.inspectTaskForm.id }); + if (res.data.code === '200') { + data.inspectTaskForm.points.splice(index, 1); + ElMessage({ + type: 'success', + message: '巡检点删除成功' + }); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + }; + + const giveRegionAndRFID = () => { + data.inspectPointForm.regionId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.regionId as number; + data.inspectPointForm.rfidId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.rfidId as number; + }; + + const giveClassGroup = () => { + data.inspectTaskForm.execClassgroupId = null; + data.classGroup = data.classGroupList.filter((item) => item.depId === data.inspectTaskForm.execDepId); + }; + + const giveQuotaUnit = () => { + data.inspectPointForm.quotaUnit = data.quotaList.find((item) => item.id === data.inspectPointForm.quotaId)?.unit as string; + }; + + const submitInspectTask = () => { + inspectTaskFormRef.value.validate(async (valid: Boolean) => { + if (valid) { + if (data.title === '新增巡检任务') { + let res = await inspectTaskApi().addInspectTask(data.inspectTaskForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '巡检任务新增成功', + duration: 2000 + }); + data.ifShowInspectTaskDialog = false; + context.emit('refreshInspectTask'); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } else { + let res = await inspectTaskApi().modInspectTask(data.inspectTaskForm); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: '巡检指标修改成功', + duration: 2000 + }); + data.ifShowInspectTaskDialog = false; + context.emit('refreshInspectTask'); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + } else { + ElMessage({ + type: 'warning', + message: '请完善基本信息' + }); + } + }); + }; + + return { + ...toRefs(data), + inspectTaskFormRef, + deleteFlow, + giveQuotaUnit, + giveClassGroup, + submitInspectTask, + submitInspectPoint, + giveRegionAndRFID, + showInspectTaskDialog, + openInspectPointDialog + }; + } }; </script> -<style scoped></style> +<style scoped lang="scss"> +$homeNavLengh: 8; +.home-container { + height: calc(100vh - 114px); + box-sizing: border-box; + overflow: hidden; + .homeCard { + width: 100%; + padding: 20px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; + + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} +.stepItem { + width: 100%; + display: flex; + align-items: flex-start; + margin-bottom: 30px; + margin-left: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:first-of-type { + margin-top: 30px; + } + &:last-of-type { + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 1px solid #999; + line-height: 28px; + text-align: center; + margin-right: 10px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + width: 100%; + margin-top: -30px; + + .box-card { + width: 100%; + &:deep(.el-card__header) { + padding: 10px 15px; + } + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + & > div:first-of-type { + margin-right: 80px; + font-size: 18px; + font-weight: bold; + } + } + } + } + &:hover .card-header { + color: #0098f5; + } + &:hover .stepNum { + border: 2px solid #0098f5; + color: #0098f5; + } +} +:deep(.el-date-editor) { + width: 100%; +} +</style> -- Gitblit v1.9.2