FE-V2-PC/src/views/safetyCheck/components/infoDialog/infoDialog.vue

<!--

  <infoDialog v-if="infoDialogType" :propsInfoDialogData="propsInfoDialogData"></infoDialog>

  import infoDialog from '@/views/safetyCheck/components/infoDialog/infoDialog.vue'

  components: {
    infoDialog,
  },


  infoDialogType:false,
  propsInfoDialogData:{},


  //开关详情页面
  addDialogOpen(type,data){
    if(this.infoDialogType != type){
      if(type){
        let obj = {
          id:data.id
        }
        this.$set(this,'propsInfoDialogData',obj);
        this.$set(this,'infoDialogType',type);
      }else{
        this.getList();
        this.$set(this,'infoDialogType',type);
      }
    }
  },

-->
<template>
  <el-dialog class="safetyHazard-info-dialog-box" @close="outDialog"
             :close-on-click-modal="false"
             :class="fullScreenType?'lookDocumentDataDialog-fullScreen':''"
             v-loading="loading"
             :title="infoDialogData.checkHazardApplyDto.rectifyStatus==1?'已完成':(infoDialogData.checkHazardApplyDto.rectifyStatus==2?'待整改':(infoDialogData.checkHazardApplyDto.rectifyStatus==3?'待复核':(infoDialogData.checkHazardApplyDto.rectifyStatus==4?'暂无法整改':'')))"
             :visible.sync="infoDialogType" v-if="infoDialogType"
             width="1184px" append-to-body>
    <div class="info-dialog-title-box scrollbar-box" v-if="imgDocumentType == 0">
      <div class="info-dialog-for-title-box" @click="checkTitleButton('info')" :class="infoDialogCheckIndex == 'info'?'info-dialog-for-check':''">
        <p>隐患检查</p>
        <p></p>
      </div>
      <div class="info-dialog-for-title-box" :class="infoDialogCheckIndex == index?'info-dialog-for-check':''"
           @click="checkTitleButton(index)" v-for="(item,index) in infoDialogData.checkRectifyApplyList" :key="index">
        <!--<p>{{item.applyFlag==1?'隐患整改':(item.applyFlag==2?'整改复核':'')}}</p>-->
        <p>{{item.titleName}}</p>
        <p></p>
      </div>
      <div class="info-dialog-for-title-box" v-if="addFormType == 1 || addFormType == 2" @click="checkTitleButton('add')" :class="infoDialogCheckIndex == 'add'?'info-dialog-for-check':''">
        <p>{{addFormTitle}}</p>
        <p></p>
      </div>
    </div>
    <div class="info-dialog-content-box scrollbar-box" v-if="imgDocumentType == 0">
      <div class="info-dialog-content-info" v-if="infoDialogCheckIndex == 'info' && imgDocumentType == 0">
        <div class="info-dialog-content-info-top">
          <div class="text-box-box">
            <p>计划标题</p>
            <p>{{infoDialogData.title}}</p>
          </div>
          <div class="text-box-two-box">
            <div>
              <p>检查组织</p>
              <p>{{infoDialogData.checkType==1?'校院巡查':(infoDialogData.checkType==2?'实验室自查':'')}}</p>
            </div>
            <div>
              <p>{{infoDialogData.checkType==1?'计划周期':(infoDialogData.checkType==2?'任务周期':'')}}</p>
              <p>{{infoDialogData.cycleStartTime}} 至 {{infoDialogData.cycleEndTime}}</p>
            </div>
          </div>
          <div class="text-box-two-box">
            <div>
              <p>学院</p>
              <p>{{infoDialogData.collegeName}}</p>
            </div>
            <div>
              <p>实验室</p>
              <p>{{infoDialogData.subjectName}} - {{infoDialogData.roomNumber}}</p>
            </div>
          </div>
          <div class="text-box-two-box">
            <div>
              <p>楼栋</p>
              <p>{{infoDialogData.buildName}}</p>
            </div>
          </div>
          <div class="text-box-box">
            <p>检查要求</p>
            <p>{{infoDialogData.checkDemand}}<span v-if="!infoDialogData.checkDemand" style="color:#999;">未输入</span></p>
          </div>
          <div class="text-box-two-box">
            <div>
              <p>检查结果</p>
              <p>{{infoDialogData.checkResult==0?'不符合':(infoDialogData.checkResult==1?'符合':'')}}</p>
            </div>
            <div>
              <p>整改期限</p>
              <p>{{infoDialogData.rectifyDeadline}}</p>
            </div>
          </div>
          <div class="button-box">
            <p>{{infoDialogData.rectifyNotice == 1?'整改告知书':(infoDialogData.rectifyNotice == 2?'整改通知书':'')}}</p>
            <p class="inquire-button-one" @click="lookDocument(1)">查看</p>
            <p class="add-button-one-90" @click="downloadButton">下载</p>
          </div>
          <div class="text-box-two-box">
            <div>
              <p>检查者</p>
              <p>{{infoDialogData.checkUser}}</p>
            </div>
            <div>
              <p>检查时间</p>
              <p>{{infoDialogData.checkTime}}</p>
            </div>
          </div>
        </div>
        <p class="table-top-title-p">不符合项</p>
        <div class="info-dialog-content-info-bottom">
          <div class="table-box">
            <p class="table-title-p" v-if="infoDialogData.checkHazardApplyDto.checkCategory==1">隐患项</p>
            <p class="table-title-p" v-if="infoDialogData.checkHazardApplyDto.checkCategory==2">【{{infoDialogData.checkHazardApplyDto.hazardName}}】 专项检查</p>
            <div class="table-min">
              <div class="left-box">
                <p></p>
                <p>检查项目</p>
                <p></p>
              </div>
              <div class="right-box text-two-box">
                <p></p>
                <p>{{infoDialogData.checkHazardApplyDto.hazardCheckProStr}}</p>
                <p></p>
                <p v-if="infoDialogData.checkHazardApplyDto.hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{infoDialogData.checkHazardApplyDto.hazardCheckCount}}</span> 次隐患</p>
                <p></p>
              </div>
            </div>
            <div class="table-min">
              <div class="left-box">
                <p></p>
                <p>隐患描述</p>
                <p></p>
              </div>
              <div class="right-box text-box">
                <p></p>
                <p>{{infoDialogData.checkHazardApplyDto.hazardDescribe}}</p>
                <p></p>
              </div>
            </div>
            <div class="table-min">
              <div class="left-box">
                <p></p>
                <p>隐患等级</p>
                <p></p>
              </div>
              <div class="right-box text-box">
                <p></p>
                <p>{{infoDialogData.checkHazardApplyDto.hazardLevel==2?'一般隐患':(infoDialogData.checkHazardApplyDto.hazardLevel==1?'重大隐患':(infoDialogData.checkHazardApplyDto.hazardLevel==3?'管理问题':''))}}</p>
                <p></p>
              </div>
            </div>
            <div class="table-min">
              <div class="left-box">
                <p></p>
                <p>检查要点</p>
                <p></p>
              </div>
              <div class="right-box text-box">
                <p></p>
                <p>{{infoDialogData.checkHazardApplyDto.hazardCheckPoint}}</p>
                <p></p>
              </div>
            </div>
            <div class="table-min">
              <div class="left-box">
                <p></p>
                <p>隐患照片</p>
                <p></p>
              </div>
              <div class="right-box img-box">
                <img :src="imgItem.fileUrl" v-for="(imgItem,index) in infoDialogData.checkHazardApplyDto.uploadDtoList"
                     :key="index" @click="lookImg(infoDialogData.checkHazardApplyDto.uploadDtoList,index)">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-dialog-content-type" v-if="infoDialogCheckIndex == index && imgDocumentType == 0"
           v-for="(item,index) in infoDialogData.checkRectifyApplyList" :key="index">
        <!--已整改-->
        <div class="has-rectification" v-if="item.applyFlag == 1">
          <div class="button-box">
            <p>整改结果</p>
            <p>{{item.rectifyResult == 1?'已整改':(item.rectifyResult == 0?'暂无法整改':'')}}</p>
          </div>
          <div class="text-box">
            <p>整改措施</p>
            <p>{{item.rectifyMeasure}}</p>
          </div>
          <div class="img-box">
            <p>整改照片</p>
            <div>
              <img :src="imgItem.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)"
                   v-for="(imgItem,imgIndex) in item.uploadDtoList" :key="imgIndex">
            </div>
          </div>
          <div class="text-box-two">
            <div>
              <p>整改人</p>
              <p>{{item.createName}}</p>
            </div>
            <div style="margin-left:26px;">
              <p>整改时间</p>
              <p>{{item.createTime}}</p>
            </div>
          </div>
        </div>
        <!--已审核-->
        <div class="has-inspection" v-if="item.applyFlag == 2">
          <div class="type-box">
            <p>审核结果</p>
            <img v-if="item.examineResult == 0" src="@/assets/ZDimages/safetyCheck/icon_zcgl_sb.png">
            <img v-if="item.examineResult == 1" src="@/assets/ZDimages/safetyCheck/icon_zcgl_cg.png">
          </div>
          <div class="text-box">
            <p>审核意见</p>
            <p>{{item.examineOpinion}}</p>
          </div>
          <div class="text-box-two">
            <div>
              <p>审核人</p>
              <p>{{item.reviewedName}}</p>
            </div>
            <div style="margin-left:26px;">
              <p>审核时间</p>
              <p>{{item.reviewedTime}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="info-dialog-content-add" v-if="infoDialogCheckIndex == 'add' && imgDocumentType == 0">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="90px">
          <!--待整改-->
          <div class="stay-rectification" v-if="addFormType == 1">
            <el-form-item label="整改结果" prop="rectifyResult">
              <el-radio-group v-model="addForm.rectifyResult">
                <el-radio :label="1">已整改</el-radio>
                <el-radio :label="0">暂无法整改</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="addForm.rectifyResult==1?'整改措施':'原因描述'" prop="rectifyMeasure">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                :placeholder="addForm.rectifyResult==1?'请输入整改措施':'请输入原因描述'"
                resize="none"
                maxlength="100"
                show-word-limit
                v-model="addForm.rectifyMeasure">
              </el-input>
            </el-form-item>
            <el-form-item label="上传照片" prop="uploadDtoList">
              <div class="for-img-box" v-for="(img,imgIndex) in addForm.uploadDtoList" :key="imgIndex">
                <img class="for-img" :src="img.fileUrl"  @click="lookImg(addForm.uploadDtoList,imgIndex)">
                <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
              </div>
              <el-upload
                v-if="addForm.uploadDtoList.length<5"
                style="display: inline-block;overflow: hidden"
                class="avatar-uploader"
                :action="uploadImgUrl"
                :show-file-list="false"
                :on-success="(res)=>handleAvatarSuccess(res,addForm)"
                :headers="headers"
                :before-upload="(res)=>beforeAvatarUpload(res,addForm)">
                <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
              </el-upload>
            </el-form-item>
            <p style="margin-left:80px;">支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
          </div>
          <!--待审核-->
          <div class="stay-inspection" v-if="addFormType == 2">
            <el-form-item label="审核意见" prop="examineOpinion">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入审核意见"
                resize="none"
                maxlength="100"
                show-word-limit
                v-model="addForm.examineOpinion">
              </el-input>
            </el-form-item>
            <div class="quick-selection-box">
              <p class="quick-selection-title">快捷输入</p>
              <p class="quick-selection-for" @click="stayInspectionClick(item)"
                 v-for="(item,index) in quickSelection" :key="index">{{item}}</p>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="info-dialog-content-img scrollbar-box" v-if="imgDocumentType == 1">
      <img :src="imgList[imgIndex].fileUrl">
      <p class="el-icon-arrow-left left-button-p" @click="infoLeftButton"></p>
      <p class="el-icon-arrow-right right-button-p" @click="infoRightButton"></p>
      <p class="bottom-num-text">{{imgIndex+1}} / {{imgList.length}}</p>
      <p class="out-button" @click="outLook">返回</p>
    </div>
    <!--通知书/告知书-->
    <div class="info-dialog-content-document scrollbar-box" v-if="imgDocumentType == 2">
      <informDom v-if="infoDialogData.rectifyNotice == 1" :propsInformDomData="propsInformDomData"></informDom>
      <noticeDom v-if="infoDialogData.rectifyNotice == 2" :propsNoticeDomData="propsNoticeDomData"></noticeDom>
      <p class="out-button" v-if="!fullScreenType" @click="outLook">关闭</p>
      <p class="positionButton" @click="fullScreenButton">{{fullScreenType?'退出':'全屏'}}</p>
    </div>
    <!--材料附件(暂时废弃)-->
    <div class="info-dialog-content-document-list" v-if="imgDocumentType == 3">
      <div class="left-box">
        <div class="left-title-box">
          <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
          <p>材料附件</p>
        </div>
        <div class="left-for-box scrollbar-box">
          <p class="left-for-p" v-for="(iframeItem,iframeIndex) in iframeSrcList" :key="iframeIndex"
             @click="lookDocumentListCheck(iframeIndex)"
             :class="iframeSrcIndex == iframeIndex?'check-p':''">{{iframeItem.name}}</p>
        </div>
      </div>
      <div class="center-border"></div>
      <div class="right-box">
        <iframe
          class="iframe"
          :src="iframeSrc" scrolling="auto" frameborder="0">
        </iframe>
      </div>
      <p class="out-button" @click="outLook">返回</p>
    </div>
    <div class="bottom-button-box dialog-footer-box" v-if="infoDialogCheckIndex == 'add'&&imgDocumentType != 1">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outDialog">取消</p>
      <p class="dialog-footer-button-primary" v-if="addFormType==1" @click="upDataButton(1)">提交</p>
      <p class="dialog-footer-button-border" v-if="addFormType==2" @click="upDataButton(2)">驳回</p>
      <p class="dialog-footer-button-primary" v-if="addFormType==2" @click="upDataButton(3)">通过</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  import { getHazardById,addOrApprove } from '@/api/safetyCheck/index'
  import { getToken } from "@/utils/auth";
  import informDom from '@/components/lookDocumentDialog/components/informDom.vue'
  import noticeDom from '@/components/lookDocumentDialog/components/noticeDom.vue'
  export default {
    name: 'infoDialog',
    components: {
      informDom,
      noticeDom
    },
    props:{
      propsInfoDialogData:{},
    },
    data(){
      return{
        //子组件传参
        propsNoticeDomData:{},
        propsInformDomData:{},
        //全屏状态
        fullScreenType:false,
        loading:false,
        upDataName:"",
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        infoDialogType:false,
        //img 与 document 展示状态
        imgDocumentType:0,
        infoDialogCheckIndex:'info',
        infoDialogData:{},
        //图片
        imgList:[],
        imgIndex:0,
        saveIndex:0,
        //文档地址
        iframeSrc:"",
        iframeSrcIndex:0,
        iframeSrcList:[],
        // 提交数据
        addFormType:null,//1整改 2审核 默认NULL 回调数据内判定当前状态
        addFormTitle:null,
        addForm:{
          rectifyResult:'',
          rectifyMeasure:'',
          uploadDtoList:[],
          examineOpinion:'',
        },
        rules: {
          rectifyResult: [
            { required: true, message: "请选择整改结果", trigger: "change" },
          ],
          uploadDtoList: [
            { required: true, message: "请选择上传图片", trigger: "change" },
          ],
          rectifyMeasure: [
            { required: true, message: '请输入内容', trigger: "change" },
            { required: true, message: '请输入内容', validator: this.spaceJudgment, trigger: "change" },
          ],
          examineOpinion: [
            { required: true, message: "请输入内容", trigger: "change" },
          ],
        },
        //快速选择
        quickSelection:['复核驳回','未解决','驳回再整改','请补充材料','请补充描述',],
      }
    },
    created(){

    },
    mounted(){
      this.getHazardById();
    },
    methods:{
      fullScreenButton(){
        this.fullScreenType = !this.fullScreenType;
      },
      //提交
      upDataButton(type){
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.addForm));
            if(type == 1){
              //整改
              obj.checkHazardId = this.infoDialogData.checkHazardApplyDto.id
              delete obj.examineOpinion
            }else if(type != 1){
              //审核
              obj.id = this.infoDialogData.checkRectifyApplyList[this.infoDialogData.checkRectifyApplyList.length-1].id;
              obj.examineResult = type==2?0:(type==3?1:'');
              delete obj.rectifyResult
              delete obj.rectifyMeasure
              delete obj.uploadDtoList
            }
            addOrApprove(obj).then(response => {
              this.msgSuccess(response.msg);
              this.$parent.addDialogOpen(false);
            })
          }
        })
      },
      //获取详情
      getHazardById(){
        getHazardById({id:this.propsInfoDialogData.id}).then(response => {
          console.log('response.data.checkRectifyApplyList[0]',response.data.checkRectifyApplyList)
          if(response.data.checkRectifyApplyList[0]){
            if(response.data.checkRectifyApplyList[response.data.checkRectifyApplyList.length-1].applyFlag == 1){
              if(response.data.checkHazardApplyDto.applyGentle){
                //已整改
                if(response.data.checkHazardApplyDto.rectifyStatus != 4){
                  this.$set(this,'addFormType',2)
                  if(response.data.checkRectifyApplyList.length>2){
                    this.$set(this,'addFormTitle',this.frequencyCalculation(response.data.checkRectifyApplyList.length,2)+'复核')
                  }else{
                    this.$set(this,'addFormTitle','整改复核')
                  }
                }
              }
            }else if(response.data.checkRectifyApplyList[response.data.checkRectifyApplyList.length-1].applyFlag == 2){
              if(response.data.checkHazardApplyDto.rectifyGentle){
                //已复核
                if(response.data.checkRectifyApplyList[response.data.checkRectifyApplyList.length-1].examineResult == 0){
                  //复核驳回
                  this.$set(this,'addFormType',1)
                  if(response.data.checkRectifyApplyList.length>1){
                    this.$set(this,'addFormTitle',this.frequencyCalculation(response.data.checkRectifyApplyList.length,1)+'整改')
                  }else{
                    this.$set(this,'addFormTitle','隐患整改')
                  }
                }
              }
            }
          }else{
            if(response.data.checkHazardApplyDto.rectifyGentle){
              //初次整改
              this.$set(this,'addFormType',1)
              this.$set(this,'addFormTitle','隐患整改')
            }
          }
          for(let i=0;i<response.data.checkRectifyApplyList.length;i++){
            console.log("i=",i);
            if(i == 0){
              response.data.checkRectifyApplyList[i].titleName = '隐患整改'
            }else if(i == 1){
              response.data.checkRectifyApplyList[i].titleName = '整改复核'
            }else{
              let nameLeft = this.frequencyCalculation(i,response.data.checkRectifyApplyList[i].applyFlag);
              let nameRight = response.data.checkRectifyApplyList[i].applyFlag == 1?'整改':'复核';
              response.data.checkRectifyApplyList[i].titleName = nameLeft+nameRight;
            }
          }
          this.$set(this,'infoDialogData',response.data);
          this.$set(this,'infoDialogType',true);
        });
      },
      //标签切换
      checkTitleButton(index){
        if(this.infoDialogCheckIndex != index){
          this.$set(this,'imgDocumentType',0);
          this.$set(this,'infoDialogCheckIndex',index);
        }
      },
      //快速选择内容
      stayInspectionClick(val){
        this.$set(this.addForm,'examineOpinion',val);
      },
      //点击查看文档
      lookDocument(type){
        if(type==1){
          if(this.infoDialogData.rectifyNotice == 1){
            //告知书
            this.$set(this,'propsInformDomData',{
              id:this.infoDialogData.id,
            });
          }else if(this.infoDialogData.rectifyNotice == 2){
            //通知书
            this.$set(this,'propsNoticeDomData',{
              id:this.infoDialogData.id,
            });
          }
          this.$set(this,'imgDocumentType',2);
        }else{
          this.$set(this,'imgDocumentType',0);
        }
        // if(type == 1){
        //   this.$set(this,'iframeSrcIndex',0);
        //   this.$set(this,'iframeSrcList',data);
        //   this.$set(this,'iframeSrc',this.urlJudge(data[0].url));
        //   this.$set(this,'imgDocumentType',3);
        // }else if(type == 2){
        //   this.$set(this,'iframeSrc',this.urlJudge(data));
        //   this.$set(this,'imgDocumentType',2);
        // }
      },
      // 单个下载按钮
      downloadButton(){
        if(this.infoDialogData.rectifyNotice == 1){
          //告知
          this.download('/zd-security/checkManage/getRectifyNotification/'+this.infoDialogData.id, {}, this.infoDialogData.title+'(整改告知书).docx')
        }else if(this.infoDialogData.rectifyNotice == 2){
          //通知
          this.download('/zd-security/checkManage/getRectifyAdviceNote/'+this.infoDialogData.id, {}, this.infoDialogData.title+'(整改通知书).docx')
        }
      },
      lookDocumentListCheck(val){
        this.$set(this,'iframeSrcIndex',val);
        this.$set(this,'iframeSrc',this.urlJudge(this.iframeSrcList[val].url));
      },
      //点击查看图片
      lookImg(list,index){
        this.$set(this,'imgList',list)
        this.$set(this,'imgIndex',index)
        this.$set(this,'imgDocumentType',1);
      },
      outLook(){
        this.$set(this,'imgDocumentType',0);
      },
      //图片左右按键
      infoLeftButton(){
        if (this.imgIndex == 0){
          this.msgError('当前是第一张')
        }else{
          this.imgIndex--
        }
      },
      infoRightButton(){
        if (this.imgIndex == this.imgList.length-1){
          this.msgError('当前是最后一张')
        }else{
          this.imgIndex++
        }
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res,item) {
        this.$set(this,'loading',false);
        if(item.uploadDtoList.length>4){
          this.msgError('最多只可上传5张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
          fileType:2,
        };
        item.uploadDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file,item) {
        console.log('file',file)
        if(item.uploadDtoList.length>4){
          this.msgError('最多只可上传5张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
          if(file.size> 2100000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.$set(this,'loading',true);
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('仅支持jpg/png/bmp/gif格式')
          type = false;
        }
        return type;
      },
      // 删除图片
      delImg(imgIndex){
        this.addForm.uploadDtoList.splice(imgIndex,1);
      },
      //退出
      outDialog(){
        this.$parent.addDialogOpen(false);
      },
      //多次名称匹配
      frequencyCalculation(length,type){
        let textList = [
          {value:'二次',key:'2'},{value:'三次',key:'3'},{value:'四次',key:'4'},{value:'五次',key:'5'}, {value:'六次',key:'6'},
          {value:'七次',key:'7'},{value:'八次',key:'8'},{value:'九次',key:'9'},{value:'十次',key:'10'}
        ]
        let num = type === 2?Math.ceil(length/2):Math.floor(length/2)
        if(type == 1){
          num++
        }
        if (num > 10){
          return '再次'
        } else{
          for(let i=0;i<textList.length;i++){
            if(num == textList[i].key){
              return textList[i].value
            }
          }
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .safetyHazard-info-dialog-box{
    ::v-deep .el-dialog__body{
      padding:0 0 30px 0;
    }
    ::v-deep .el-form-item__label{
      font-size:16px;
    }
    .info-dialog-title-box{
      border-bottom:1px solid #E0E0E0;
      padding:0 30px;
      overflow-x: scroll;
      overflow-y: hidden;
      height:80px;
      white-space: nowrap;
      .info-dialog-for-title-box{
        height:80px;
        width: 80px;
        margin-right:44px;
        overflow: hidden;
        display: inline-block;
        p:nth-child(1){
          height:44px;
          line-height:44px;
          margin-top:18px;
          text-align: center;
          color:#333;
          font-size:16px;
          cursor: pointer;
        }
        p:nth-child(2){
          height:4px;
          width:40px;
          margin:0 auto;
          border-radius:4px;
        }
      }
      .info-dialog-for-check{
        p:nth-child(1){
          font-size:16px;
          color:#0045AF;
        }
        p:nth-child(2){
          background-color: #0045AF;
        }
      }
    }
    .info-dialog-content-box{
      height:600px;
      .info-dialog-content-info{
        padding:30px 0 0;
        .info-dialog-content-info-top{
          padding:0 70px;
          .text-box-box{
            display: flex;
            margin-top:20px;
            p{
              font-size:16px;
              color:#333;
              line-height:40px;
            }
            p:nth-child(1){
              width:95px;
              text-align: right;
              margin-right:16px;
              font-size:16px;
            }
            p:nth-child(2){
              width:928px;
              padding:10px 20px;
              overflow: hidden;
              background: #F5F5F5;
              border-radius:4px;
              font-size:14px;
              line-height:20px;
            }
          }
          .text-box-two-box{
            display: flex;
            margin-top:20px;
            div{
              display: flex;
              p{
                font-size:16px;
                color:#333;
                line-height:40px;
              }
              p:nth-child(1){
                text-align: right;
                margin-right:16px;
                font-size:16px;
              }
              p:nth-child(2){
                padding:0 20px;
                overflow: hidden;
                background: #F5F5F5;
                border-radius:4px;
                font-size:14px;
              }
            }
            div:nth-child(1){
              p:nth-child(1){
                width:95px;
              }
              p:nth-child(2){
                width:400px;
              }
            }
            div:nth-child(2){
              p:nth-child(1){
                width:117px;
              }
              p:nth-child(2){
                width:400px;
              }
            }
          }
          .button-box{
            display: flex;
            margin-top:20px;
            p{
              font-size:16px;
              line-height:40px;
            }
            p:nth-child(1){
              color:#333;
              width:95px;
              text-align: right;
              margin-right:16px;
            }
            p:nth-child(2){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
              margin-right:12px;
              font-size:14px;
            }
            p:nth-child(3){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
              font-size:14px;
            }
          }
        }
        .table-top-title-p{
          margin-top:22px;
          font-size:16px;
          line-height: 50px;
          padding:0 50px;
          background-color: #F5F5F5;
          color:#333;
        }
        .info-dialog-content-info-bottom{
          padding:0 70px;
          .table-box{
            margin-left:16px;
            margin-top:20px;
            border:1px solid #e0e0e0;
            border-bottom:none;
            .table-title-p{
              background-color: #F5F5F5;
              line-height:50px;
              padding-left:30px;
              border-bottom:1px solid #e0e0e0;
            }
            .table-min{
              display: flex;
              overflow: hidden;
              border-bottom:1px solid #e0e0e0;
              .left-box{
                width:120px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background-color: #F5F5F5;
                border-right:1px solid #e0e0e0;
                p:nth-child(1){
                  flex:1;
                }
                p:nth-child(2){
                  text-align: center;
                  height:14px;
                  line-height:14px;
                }
                p:nth-child(3){
                  flex:1;
                }
              }
              .right-box{
                flex:1;
                overflow: hidden;
                min-height:60px;
                font-size:14px;
                padding:0 16px;
                line-height:20px;
              }
              .text-box{
                display: flex;
                flex-direction: column;
                p:nth-child(1){
                  flex:1;
                  min-height:12px;
                }
                p:nth-child(2){

                }
                p:nth-child(3){
                  flex:1;
                  min-height:12px;
                }
              }
              .text-two-box{
                p:nth-child(1){
                  flex:1;
                  min-height:12px;
                }
                p:nth-child(2){

                }
                p:nth-child(3){
                  flex:1;
                  min-height:12px;
                }
                p:nth-child(4){
                  span{
                    color:#FF0000;
                  }
                }
                p:nth-child(5){
                  flex:1;
                  min-height:12px;
                }
              }
              .img-box{
                padding:20px;
                img{
                  cursor: pointer;
                  height:80px;
                  width:80px;
                  margin-right:10px;
                  border-radius:4px;
                }
              }
            }
          }
        }
      }
      .info-dialog-content-type{
        padding:30px 70px 0;
        .has-rectification{
          .button-box{
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              text-align: center;
              padding:0 15px;
              height:30px;
              margin-top:5px;
              line-height:30px;
              font-size:14px;
              color:#0183FA;
              border:1px solid #0183FA;
              border-radius:4px;
            }
          }
          .text-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:20px;
              min-height: 70px;
              padding:15px 20px;
              flex:1;
              background-color: #F5F5F5;
              border-radius:4px;
            }
          }
          .img-box{
            margin-top:20px;
            display: flex;
            p{
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            img{
              cursor: pointer;
              width:80px;
              height:80px;
              margin-right:10px;
              border-radius:4px;
            }

          }
          .text-box-two{
            margin-top:20px;
            display: flex;
            div{
              display: flex;
              p:nth-child(1){
                height:40px;
                line-height:40px;
                width:80px;
                font-size:16px;
                color:#333;
                text-align: right;
                margin-right:15px;
              }
              p:nth-child(2){
                width:412px;
                height:40px;
                font-size:14px;
                line-height:40px;
                padding:0 20px;
                background-color: #F5F5F5;
                border-radius:4px;
              }
            }

          }
        }
        .has-inspection{
          .type-box{
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            img{
              width:60px;
              height:52px;
            }
          }
          .text-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:20px;
              min-height: 70px;
              padding:15px 20px;
              flex:1;
              background-color: #F5F5F5;
              border-radius:4px;
            }
          }
          .text-box-two{
            margin-top:20px;
            display: flex;
            div{
              display: flex;
              p:nth-child(1){
                height:40px;
                line-height:40px;
                width:80px;
                font-size:16px;
                color:#333;
                text-align: right;
                margin-right:15px;
              }
              p:nth-child(2){
                width:412px;
                height:40px;
                font-size:14px;
                line-height:40px;
                padding:0 20px;
                background-color: #F5F5F5;
                border-radius:4px;
                overflow: hidden;
              }
            }

          }
          .button-box{
            margin-top:20px;
            display: flex;
            p:nth-child(1){
              height:40px;
              line-height:40px;
              width:80px;
              font-size:16px;
              color:#333;
              text-align: right;
              margin-right:15px;
            }
            p:nth-child(2){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
            }
            p:nth-child(3){
              width:70px;
              height:30px;
              line-height:30px;
              margin-top:5px;
            }
          }
        }
      }
      .info-dialog-content-add{
        padding:30px 70px 0;
        .stay-rectification{
          .up-img-p{
            height:80px;
            width:80px;
            line-height:80px;
            text-align: center;
            font-size:16px;
            border-radius:4px;
            border:1px dashed #E0E0E0;
          }
          .for-img-box{
            width:80px;
            height:80px;
            border-radius:4px;
            display: inline-block;
            overflow: hidden;
            margin-right:20px;
            position: relative;
            .for-img{
              width:80px;
              height:80px;
              display: inline-block;
              overflow: hidden;
            }
            .for-del-button{
              background: rgba(0,0,0,0.7);
              width:20px;
              height:20px;
              line-height: 20px;
              text-align: center;
              color:#fff;
              border-bottom-left-radius:4px;
              cursor: pointer;
              position: absolute;
              top:0;
              right:0;
            }
          }
        }
        .stay-inspection{
          .quick-selection-box{
            display: flex;
            margin-top:20px;
            .quick-selection-title{
              margin-left:90px;
              height:40px;
              line-height:40px;
              font-size:14px;
              margin-right:23px;
            }
            .quick-selection-for{
              width:100px;
              height:40px;
              font-size:14px;
              text-align: center;
              line-height:40px;
              margin-right:10px;
              color:#333;
              background-color: #F5F5F5;
              border-radius:4px;
              cursor: pointer;
            }
            .quick-selection-for:hover{
              background: rgba(1,131,250,0.2);
              color:#0183FA ;
            }
          }
        }
      }
    }
    .info-dialog-content-img{
      padding:30px 70px 0;
      height:680px;
      img{
        width:1040px;
      }
      .left-button-p{
        cursor: pointer;
        text-align: center;
        line-height:30px;
        color:#fff;
        font-size:16px;
        top:440px;
        left:20px;
        position: absolute;
        width:30px;
        height:30px;
        background-color: #0045AF;
        border-radius:50%;
      }
      .right-button-p{
        cursor: pointer;
        text-align: center;
        line-height:30px;
        color:#fff;
        font-size:16px;
        position: absolute;
        top:440px;
        right:20px;
        width:30px;
        height:30px;
        background-color: #0045AF;
        border-radius:50%;
      }
      .left-button-p:hover{
        background-color: #0183fa;
      }
      .right-button-p:hover{
        background-color: #0183fa;
      }
      .bottom-num-text{
        text-align: center;
        line-height: 30px;
        font-size:16px;
        position: absolute;
        bottom:0;
        width:1026px;
      }
      .out-button{
        width:60px;
        line-height:30px;
        background:#ffffff;
        border: 1px solid #999;
        color:#999;
        border-radius:4px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top:80px;
        right:17px;
        z-index:99999;
      }
      .out-button:hover{
        background-color:#999;
        color:#fff;
      }
    }
    .info-dialog-content-document{
      padding:30px 70px 0;
      display: flex;
      flex:1;
      height:680px;
      .out-button{
        width:60px;
        line-height:30px;
        background:#ffffff;
        border: 1px solid #999;
        color:#999;
        border-radius:4px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top:80px;
        right:17px;
        z-index:99999;
      }
      .out-button:hover{
        background-color:#999;
        color:#fff;
      }
      .positionButton{
        position: absolute;
        top:80px;
        right: 90px;
        border:1px solid #0183fa;
        border-radius:4px;
        line-height:30px;
        width:60px;
        text-align: center;
        cursor: pointer;
        color:#0183fa;
        background-color: #fff;
      }
      .positionButton:hover{
        background-color:#0183fa;
        color:#fff;
      }
    }
    .info-dialog-content-document-list{
      padding:30px 70px 0;
      display: flex;
      flex:1;
      height:680px;
      overflow: hidden;
      .left-box{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:265px;
        .left-title-box{
          padding-bottom:20px;
          display: flex;
          width:230px;
          border-bottom:1px dashed #D8D8D8;
          img{
            width:16px;
            height:13px;
            margin:13px 15px 13px 0;
          }
          p{
            line-height:40px;
            width:230px;
            font-size:16px;
            color:#0183FA;
          }
        }
        .left-for-box{
          flex:1;
          .left-for-p{
            padding:0 10px;
            width:230px;
            line-height:40px;
            margin-top:10px;
            font-size:16px;
            color:#333;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            cursor: pointer;
          }
          .check-p{
            background-color:rgba(1,131,250,0.2);
            color:#0183FA;
          }
        }
      }
      .center-border{
        border-right:1px dashed #D8D8D8;
      }
      .right-box{
        flex:1;
        display: flex;
        margin-left:57px;
        .iframe{
          flex:1;
        }
      }
      .out-button{
        width:60px;
        line-height:30px;
        color:#999;
        background-color: #dedede;
        border-radius:4px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top:17px;
        right:17px;
        z-index:99999;
      }
    }
    .bottom-button-box{
      height:60px;
      width:1184px;
      position: absolute;
      bottom:0;
      padding-top:15px;
      border-top:1px solid #D8D8D8;
      display: flex;
    }
  }
  .lookDocumentDataDialog-fullScreen{
    background-color: #666;
    .info-dialog-title-box{
      display: none;
    }
    .info-dialog-content-box{
      height:100%;
    }
    .info-dialog-content-document{
      height:100%;
    }
    .positionButton{
      top:25px!important;
      right: 15px!important;
    }
    ::v-deep .el-dialog{
      width:100% !important;
      height:100% !important;
      box-shadow: none;
    }
    ::v-deep .el-dialog__header{
      display: none;
    }
    ::v-deep .el-dialog__body{
      height:100% !important;
      background-color: #666;
      .lookDocumentDataDialog-page{
        height:100%;
      }
    }
    ::v-deep .el-dialog__footer{
      display: none;
    }
  }
</style>