From f7bd94cf4a3d6ce6b06c2f90413f6798c488481d Mon Sep 17 00:00:00 2001 From: batman <978517621@qq.com> Date: 星期三, 15 三月 2023 10:21:22 +0800 Subject: [PATCH] 修改特殊作业首页 --- src/views/intellectInspect/inspectIndex/index.vue | 326 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 203 insertions(+), 123 deletions(-) diff --git a/src/views/intellectInspect/inspectIndex2/index.vue b/src/views/intellectInspect/inspectIndex/index.vue similarity index 76% rename from src/views/intellectInspect/inspectIndex2/index.vue rename to src/views/intellectInspect/inspectIndex/index.vue index 7b43609..be79359 100644 --- a/src/views/intellectInspect/inspectIndex2/index.vue +++ b/src/views/intellectInspect/inspectIndex/index.vue @@ -102,33 +102,6 @@ </template> </el-table-column> </el-table> -<!-- <div class="list">--> -<!-- <div class="list-tit">--> -<!-- <span class="w60">任务信息</span>--> -<!-- <span class="w20">任务状态</span>--> -<!-- <span class="w20">操作</span>--> -<!-- </div>--> -<!-- <div class="cardTop" v-for="(item, index) in tableData" :key="index">--> -<!-- <div class="l-info">--> -<!-- <span class="place">{{ item.taskName }},</span>--> -<!-- <p v-if="item.execUserName == null">该任务暂无人认领</p>--> -<!-- <p v-else>--> -<!-- <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span>由<span class="name">{{ item.execUserName }}</span--> -<!-- >进行的巡检任务--> -<!-- </p>--> -<!-- </div>--> -<!-- <div class="m-info">--> -<!-- 任务状态:<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>--> -<!-- </div>--> -<!-- <div class="r-info">--> -<!-- <el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>--> -<!-- <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>--> -<!-- </div>--> -<!-- </div>--> -<!-- </div>--> -<!-- <div class="pageBtn">--> -<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />--> -<!-- </div>--> </div> </div> </div> @@ -142,21 +115,35 @@ </div> <div class="chart"> <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }"> - <el-table-column prop="num" label="工单编号" align="center"/> - <el-table-column prop="spot" label="异常巡检点" align="center"/> - <el-table-column prop="time" label="巡检(发现)时间" align="center"/> - <el-table-column prop="job" label="所属巡检任务" align="center"/> - <el-table-column prop="area" label="设备/区域名称" align="center"/> - <el-table-column prop="refer" label="正常参考值" align="center"/> - <el-table-column prop="real" label="实际巡检值" align="center"/> - <el-table-column prop="name" label="隐患处置人" align="center"/> - <el-table-column prop="phone" label="电话" align="center"/> - <el-table-column prop="status" label="处置状态" align="center"/> - <el-table-column prop="describe" label="处置描述反馈" align="center"/> + <el-table-column prop="workOrderNum" label="工单编号" align="center"/> + <el-table-column prop="pointCode" label="异常巡检点" align="center"/> + <el-table-column prop="occurrenceTime" label="巡检(发现)时间" align="center"/> + <el-table-column prop="taskName" label="所属巡检任务" align="center"/> + <el-table-column prop="regionName" label="设备/区域名称" align="center"/> + <el-table-column prop="refer" label="正常参考值" align="center"> + <template #default="scope"> + <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span> + </template> + </el-table-column> + <el-table-column label="实际巡检值" align="center"> + <template #default="scope"> + <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span> + </template> + </el-table-column> + <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/> + <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/> + <el-table-column prop="handlerStatus" label="处置状态" align="center"> + <template #default="scope"> + <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag> + </template> + </el-table-column> + <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/> <el-table-column label="操作" align="center" width="180" fixed="right"> <template #default="scope"> - <el-button type="text" size="small" class="checkBtn">验收</el-button> - <el-button type="text" size="small" class="reviewBtn">查看现场照片</el-button> + <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button> + <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button> + <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button> + <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span> </template> </el-table-column> </el-table> @@ -167,9 +154,42 @@ </div> </div> </div> + <el-dialog + v-model="dialogVisible" + :title= '"工单编号:" + workNum' + width="60%" + :before-close="handleClose" + center + > + <div style="margin-bottom: 20px"> + <div style="margin-bottom: 10px">处置前:</div> + <div v-if="beImgs && beImgs.length>0"> + <el-image v-for="(item,index) in beImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" /> + </div> + <div v-else> + 无照片信息 + </div> + </div> + <div> + <div style="margin-bottom: 10px">处置后</div> + <div v-if="afImgs && beImgs.length>0"> + <el-image v-for="(item,index) in afImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" /> + </div> + <div v-else> + 无照片信息 + </div> + </div> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogVisible = false"> + 确认 + </el-button> + </span> + </template> + </el-dialog> <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog> <inspect-list ref="inspectListRef"></inspect-list> - <unusual-list ref="unusualListRef"></unusual-list> + <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list> </div> </template> @@ -181,7 +201,7 @@ import { Session } from '/@/utils/storage'; import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; import { ElTable } from 'element-plus'; -import { FormInstance, FormRules, ElMessage } from 'element-plus'; +import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus'; import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord'; import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex' import { useRouter } from 'vue-router'; @@ -211,7 +231,11 @@ chartStatus:boolean; period: string; isFull:boolean; - themeColor:string + themeColor:string; + dialogVisible:boolean; + workNum: string; + beImgs: []; + afImgs: [] } interface type { id: number; @@ -231,64 +255,14 @@ const state = reactive<stateType>({ isFull: false, themeColor: '#333', + workNum: '', + beImgs: [], + afImgs: [], pageIndex: 1, pageSize: 5, totalSize: 0, tableData: [], - unusualData: [ - { - num: '202302280001', - spot: '70736', - time: '2023-03-02 17:44:25', - job: '甲醇车间XXX巡检', - area: 'xxx设备', - refer: '8.9~10Mpa', - real: '15.6Mpa', - name: '黄公子', - phone: '15261806176', - status: '待验收', - describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰' - }, - { - num: '202302280001', - spot: '70736', - time: '2023-03-02 17:44:25', - job: '甲醇车间XXX巡检', - area: 'xxx设备', - refer: '8.9~10Mpa', - real: '15.6Mpa', - name: '黄公子', - phone: '15261806176', - status: '待验收', - describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰' - }, - { - num: '202302280001', - spot: '70736', - time: '2023-03-02 17:44:25', - job: '甲醇车间XXX巡检', - area: 'xxx设备', - refer: '8.9~10Mpa', - real: '15.6Mpa', - name: '黄公子', - phone: '15261806176', - status: '待验收', - describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰' - }, - { - num: '202302280001', - spot: '70736', - time: '2023-03-02 17:44:25', - job: '甲醇车间XXX巡检', - area: 'xxx设备', - refer: '8.9~10Mpa', - real: '15.6Mpa', - name: '黄公子', - phone: '15261806176', - status: '待验收', - describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰' - } - ], + unusualData: [], unchecked: null, unusual: null, chartStatus: true, @@ -309,7 +283,8 @@ ], classGroupList: [], quotaList: [], - inspectPointAllList: [] + inspectPointAllList: [], + dialogVisible: false }); const inspectRecordDialogRef = ref(); const inspectListRef = ref(); @@ -331,7 +306,7 @@ initSbtj() }); const toFullscreen =()=>{ - console.log(state.isFull,'quanp',state.themeColor) + // console.log(state.isFull,'quanp',state.themeColor) const element = document.getElementById('bigScreen') if (!screenfull.isEnabled) { ElMessage.warning('暂不不支持全屏'); @@ -354,6 +329,86 @@ const checkAllList =()=>{ unusualListRef.value.showUnusualList() } + const acceptance =(row:object)=>{ + ElMessageBox.confirm( + '确认完成验收并结束工单?', + '完成验收', + { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + center: true + } + ) + .then(async() => { + const res = await inspectIndexApi().acceptedStatus({id: row.id}); + if (res.data.code === '200') { + getListExcepOrder(); + ElMessage({ + type: 'success', + message: '验收成功', + }) + } else { + ElMessage({ + type: 'warning', + message: '验收失败' + }); + } + }) + .catch(() => { + ElMessage({ + type: 'info', + message: '取消验收', + }) + }) + } + const remark =(row:object)=>{ + ElMessageBox.confirm( + '确认是否标记误报?', + '标记误报', + { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + center: true + } + ) + .then(async() => { + const res = await inspectIndexApi().falseAlarmStatus({id: row.id}); + if (res.data.code === '200') { + getListExcepOrder(); + ElMessage({ + type: 'success', + message: '标记误报成功', + }) + } else { + ElMessage({ + type: 'warning', + message: '标记误报失败' + }); + } + }) + .catch(() => { + ElMessage({ + type: 'info', + message: '取消标记', + }) + }) + } + const openPhoto = async(row)=>{ + state.dialogVisible = true + state.workNum = row.workOrderNum + const res = await inspectIndexApi().getListImages({id: row.id}); + if (res.data.code === '200') { + state.beImgs = res.data.data.beforeImages + state.afImgs = res.data.data.afterImages + } else { + ElMessage({ + type: 'warning', + message: '图片获取失败' + }); + } + } type EChartsOption = echarts.EChartsOption const initXjLine =()=>{ let dom = document.getElementById(xjLine.value); @@ -373,8 +428,7 @@ padding:[1,1,1,0], textStyle: { // 设置默认的文字颜色 - color: state.themeColor, - fontSize: 12 + color: state.themeColor }, }, grid: { @@ -398,7 +452,17 @@ } }, yAxis: { - type: 'value' + splitLine: { + show: true, + lineStyle: { + color: '#fafafa', + width: 1, + type: 'dashed' + } + }, + axisLabel:{ + color: '#ccc' + } }, series: [ { @@ -464,7 +528,7 @@ textStyle: { // 设置默认的文字颜色 color: state.themeColor, - fontSize: 12 + // fontSize: 12 }, itemStyle: { borderWidth: 0 // 设置图例边框宽度为0 @@ -479,21 +543,29 @@ itemStyle: { borderRadius: 1, borderColor: '#fff', - borderWidth: 2 + borderWidth: 1 }, label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold' - } + show: true, + position: 'outside', + overflow: 'truncate', + borderWidth: 0, + color: state.themeColor }, labelLine: { - show: true + show: true, // 显示指示线 + lineStyle: { + color: '#ccc', + width: 1, + type: 'solid' + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + }, }, data: [ { value: 1048, name: '区域1' }, @@ -527,10 +599,10 @@ }; // 分页获取 const getListExcepOrder = async () => { - const data = { pageSize: state.pageSize, pageIndex: state.pageIndex }; + const data = { pageSize: 4, pageIndex: state.pageIndex }; let res = await inspectIndexApi().getListExcepOrderByPage(data); if (res.data.code === '200') { - console.log(res.data,'res') + state.unusualData = JSON.parse(JSON.stringify(res.data.data.records)) } else { ElMessage({ type: 'warning', @@ -613,6 +685,9 @@ toFullscreen, checkAllRecord, checkAllList, + acceptance, + remark, + openPhoto, toLine, toOverTime, toDetails, @@ -646,7 +721,7 @@ line-height: 34px; top: 80px; right: 20px; - z-index: 99999; + z-index: 9; } .topChart{ width: 100%; @@ -880,13 +955,18 @@ .full{ position:fixed; - background: #fff; - border-radius: 17px; + background: rgba(0,0,0,.2); + border: 1px solid rgba(54, 252, 252, .6); + border-radius: 17px 1px 1px 17px; box-shadow: 3px 3px 12px rgba(0,0,0,.2); - height: 34px; - line-height: 34px; - top: 0; - right: 20px; + height: 32px; + line-height: 30px; + top: 10px; + right: 2px; + display: flex; + justify-content: center; + backdrop-filter: blur(2px); + z-index: 99999; } .topChart{ .chart-item{ -- Gitblit v1.9.2