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"
             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">
      <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">
      <div class="info-dialog-content-info" v-if="infoDialogCheckIndex == 'info' && imgDocumentType == 0">
        <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}}</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,infoDialogData.data18)">查看</p>
          <p class="add-button-one-90">下载</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 class="table-box">
          <p class="table-title-p">隐患项</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 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 class="button-box" v-if="item.examineResult == 1">
            <p>整改报告书</p>
            <p class="inquire-button-one" @click="lookDocument(2,item.dataL)">查看</p>
            <p class="add-button-one-90">下载</p>
          </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 class="info-dialog-content-img" 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" v-if="imgDocumentType == 2">
        <iframe
          class="iframe"
          :src="iframeSrc" scrolling="auto" frameborder="0">
        </iframe>
        <p class="out-button" @click="outLook">返回</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>
    <div class="bottom-button-box dialog-footer-box" v-if="infoDialogCheckIndex == 'add'">
      <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";
  export default {
    name: 'infoDialog',
    props:{
      propsInfoDialogData:{},
    },
    data(){
      return{
        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:{
      //提交
      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,data){
        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);
        }
      },
      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) {
        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> 2000000){
            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{
      padding:30px 70px 0;
      height:600px;
      .info-dialog-content-info{
        .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-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{
        .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;
              width:80px;
              height:30px;
              margin-top:5px;
              line-height:30px;
              font-size:14px;
              color:#0183FA;
            }
          }
          .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{
        .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{
        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;
          color:#999;
          background-color: #dedede;
          border-radius:4px;
          text-align: center;
          cursor: pointer;
          position: absolute;
          top:17px;
          right:17px;
          z-index:99999;
        }
      }
      .info-dialog-content-document{
        display: flex;
        flex:1;
        height:570px;
        .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;
        }
      }
      .info-dialog-content-document-list{
        display: flex;
        flex:1;
        height:570px;
        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;
    }
  }
</style>