Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2023-03-13 4ef69f1d7bdd01471d207c865a394c618c214452

 src/views/intellectInspect/inspectIndex/components/unusualList.vue

对比新文件
@@ -0,0 +1,539 @@
<template>
    <el-dialog v-model="unusualListDialog" title="巡检异常清单" width="90%" center>
      <div class="main-card">
        <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
          <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 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>
      </div>
      <template #footer>
        <span class="dialog-footer" style="display: flex;justify-content: right">
          <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" />
        </span>
      </template>
        <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
      <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: 100px; height: 100px" :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: 100px; height: 100px" :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>
    </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
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 { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { useRouter } from 'vue-router';
import inspectRecordDialog from './inspectRecordDialog.vue';
import { departmentApi } from '/@/api/systemManage/department';
import {inspectIndexApi} from "/@/api/intellectInspectSystem/inspectIndex";
import {ElMessageBox} from "element-plus/es";
// 定义接口来定义对象的类型
interface stateType {
    unusualData: Array<any>;
    unchecked: null | number;
    unusual: null | number;
    uncheckedList: [];
    abnormalList: [];
    pageIndex: number;
    pageSize: number;
    totalSize: number;
    workTypeList: Array<type>;
    classGroupList: Array<classGroup>;
    quotaList: [];
    departmentList: [];
    inspectPointAllList: [];
    unusualListDialog: boolean;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
    afImgs: []
}
interface type {
    id: number;
    name: string;
}
interface classGroup {
    id: number;
    groupName: string;
}
export default {
    name: 'inspectList',
    components: { inspectRecordDialog },
    setup(context) {
        const router = useRouter();
        const state = reactive<stateType>({
            unusualListDialog: false,
          dialogVisible: false,
          workNum: '',
          beImgs: [],
          afImgs: [],
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            unusualData: [],
            unchecked: null,
            unusual: null,
            departmentList: [],
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
                { id: 1, name: '日常任务' },
                { id: 2, name: '周期任务' }
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: []
        });
        const inspectRecordDialogRef = ref();
        interface User {
            name: string;
            startTime: string;
            endTime: string;
            info: string;
        }

        // 页面载入时执行方法
        onMounted(() => {

        });

        const showUnusualList = ()=>{
          state.unusualListDialog = true
          getInspectRecord();
        }
        // 分页获取工作时段列表
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
            let res = await inspectIndexApi().getListExcepOrderByPage(data);
            if (res.data.code === '200') {
              state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
              state.totalSize = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
      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') {
                getInspectRecord();
                context.emit('refreshRecord');
                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') {
                getInspectRecord();
                context.emit('refreshRecord');
                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: '图片获取失败'
            });
          }
        }
        const handleSizeChange = (val: number) => {
            state.pageSize = val;
            getInspectRecord();
        };
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val;
            getInspectRecord();
        };

        const toLine = (item) => {
          console.log(item,'item')
            let id = item.id;
            console.log(id,'id')
            router.push({
                path: 'intelligentLine',
                query: {
                    id: id
                }
            });
        };

        const toOverTime = (id) => {
            console.log(state.uncheckedList, 'list');
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                }
            });
        };
        const toDetails = (type: string, item: object) => {

        };
        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            router,
            inspectRecordDialogRef,
            acceptance,
          openPhoto,
            remark,
            showUnusualList,
            toLine,
            toOverTime,
            toDetails,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 16px;
            align-items: center;
            padding: 10px 15px;
            background: #ffeb87;
            border-radius: 8px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 22px;
                    color: #f3001e;
                    margin: 0 4px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 16px;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 6px 10px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 18px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 2px 6px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 16px;
                    color: #f3001e;
                    margin: 0 1px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 12px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}

.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .title {
            font-size: 20px;
            font-weight: bolder;
        }
        .main-card {
            width: 100%;
            height: 100%;
        }
        &:last-of-type {
            position: relative;
            padding-top: 0;
            height: calc(100% - 60px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }
    }
}
.el-input {
    width: 100% !important;
}
.el-date-editor::v-deep {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
</style>