FE-V2-PC/src/views/securityCheck/checkRecord/CheckRecordInfo.vue

<!--问题整改详情-->
<template>
  <div class="CheckRecordInfo">
    <div class="CheckRecordInfoPage scrollbar-box" v-if="pageType">
      <!--标题部分-->
      <div class="top-title-box">
        <p class="title-p">问题整改</p>
        <p class="button-p reset-button-one" @click="backPage">返回</p>
      </div>
      <!--步骤条-->
      <div class="top-steps-box">
        <div class="top-steps-left-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_yzg.png">
          <p>待整改</p>
        </div>
        <div class="top-steps-border" :class="stepsType == 0?'top-steps-border-false':'top-steps-border-true'"></div>
        <div class="top-steps-center-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_zgwwc.png" v-if="stepsType == 0">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_fh.png" v-if="stepsType == 1 || stepsType == 4">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_btg.png" v-if="stepsType == 2">
          <p :class="stepsType==0?'color999':''">{{stepsType == 0||stepsType == 1?'整改待复核':(stepsType == 2?'复核未通过':(stepsType == 4?'整改已通过':''))}}</p>
        </div>
        <div class="top-steps-border" :class="stepsType != 4?'top-steps-border-false':'top-steps-border-true'"></div>
        <div class="top-steps-right-box">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_wwc.png" v-if="stepsType != 4">
          <img src="@/assets/ZDimages/secuityCheck/icon_zg_ywc.png" v-if="stepsType == 4">
          <p :class="stepsType!=4?'color999':''">{{newData.isZgStatus == 1?'暂时无法整改':'已整改'}}</p>
        </div>
      </div>
      <!--步骤信息-->
      <div class="top-steps-text-box">
        <div class="top-steps-text-left-box">
          <p>检查时间：{{newData.createTime}}</p>
          <p v-if="newData.firstTime">首次查看时间：{{newData.firstTime}}</p>
        </div>
        <div class="top-steps-text-center-box">
          <p v-if="newData.zgqrTime">整改时间：{{newData.zgqrTime}}</p>
          <p v-if="newData.zgbhTime">驳回时间：{{newData.zgbhTime}}</p>
        </div>
        <div class="top-steps-text-right-box">
          <p :class="stepsTimeType?'stepsTimeTypeTrue':''">整改截止时间：{{newData.zgjzTime}}</p>
        </div>
      </div>
      <!--整改单位/人员信息-->
      <div class="center-info-top-box">
        <div class="center-left-box">
          <img src="@/assets/newImages/icon_7.png">
          <div>
            <p>{{newData.zgType == 0?'一般整改':(newData.zgType == 1?'重大整改':'')}}</p>
            <p>{{newData.jcDwName}}</p>
          </div>
        </div>
        <div class="center-center-box">
          <img src="@/assets/newImages/icon_8.png">
          <div>
            <p>{{newData.laboratoryName}}</p>
            <p>{{newData.buildingName}}{{newData.fjNumber}}</p>
          </div>
        </div>
        <div class="center-right-box">
          <img src="@/assets/newImages/icon_9.png">
          <div>
            <p>{{newData.fzrName}}</p>
            <p>{{newData.fzrLxfs}}</p>
          </div>
        </div>
      </div>
      <!--整改信息部分-->
      <div class="center-info-box ">
        <div class="center-info-for-max-box">
          <p class="center-info-for-max-title">{{newData.isZgStatus == 1?'暂时无法整改':(stepsType == 0 ?'整改信息':'已整改信息')}}</p>
          <!--检查项循环-->
          <div class="center-info-for-box">
            <div class="center-info-for-title-box">
              <p class="title-left">{{newData.detailsList.jcxSstkNum}}</p>
              <div class="title-right">
                <p>{{newData.detailsList.jcxName}}</p>
              </div>
            </div>
            <div class="center-info-for-big-box" :class="allDataType?'center-info-for-big-box-all':(!newData.detailsList.detailslogList[1]?'center-info-for-big-box-all':'')">
              <div class="center-info-for-big-title-box">
                <p>条款：</p>
                <p>{{newData.detailsList.jcxSstkMs}}</p>
              </div>
              <div class="center-info-for-big-flex-box">
                <div class="center-info-for-big-flex-left-box">
                  <p class="center-info-for-big-flex-left-title">隐患照片：</p>
                  <div class="center-info-for-big-flex-left-img-box" v-if="newData.detailsList.yhImg[0]">
                    <img :src="item" v-for="(item,index) in newData.detailsList.yhImg" :key="index" @click="lockImg(item)">
                  </div>
                  <p v-if="!newData.detailsList.yhImg[0]">未上传照片</p>
                </div>
                <div class="center-info-for-big-flex-right-box">
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>检查时间：</p>
                    <p>{{newData.createTime}}</p>
                  </div>
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>检查人：</p>
                    <p>{{newData.jcRyxm}}</p>
                  </div>
                  <div class="center-info-for-big-flex-right-text-box">
                    <p>隐患描述：</p>
                    <p>{{newData.detailsList.yhMs}}</p>
                  </div>
                </div>
              </div>
              <!--整改信息填写栏-->
              <div class="center-info-for-min-box" style="margin-bottom:20px;" v-if="stepsType == 0 || stepsType == 2" v-hasPermi="['laboratory:checkRecordDetails:rectification']">
                <!--整改循环-->
                <div class="center-info-for-min">
                  <div class="center-info-for-min-left-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>整改信息</p>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules">
                      <div class="for-min-img-box" style="margin-top:25px;">
                        <p class="for-min-img-box-left-title" style="color:#333;">整改材料：</p>
                          <div class="for-min-img-box-left-img-box">

                            <div v-for="(imgItem,index) in form.yhZghImg" :key="index" class="up-img-for-box">
                              <img :src="imgItem">
                              <i class="el-icon-close del-i" @click="imgDel(index)"></i>
                            </div>
                            <!--<img :src="imgItem" v-for="(imgItem,index) in form.yhZghImg" :key="index">-->
                            <el-upload
                                v-if="form.yhZghImg.length<5"
                                class="position-button"
                                :action="uploadImgUrlTwo"
                                :show-file-list="false"
                                accept="image/jpeg,image/gif,image/png"
                                :on-success="(res)=>handleAvatarSuccessTwo(res,2)"
                                :headers="headers"
                                :before-upload="beforeAvatarUpload">
                                <div class="up-data-button">
                                    <p>+</p>
                                    <p>上传</p>
                                  <el-form-item label="" prop="yhZghImg" style="height:150px;margin:10px 0 0 18px;" >
                                  </el-form-item>
                                </div>
                              </el-upload>
                          </div>
                      </div>
                      <div class="for-min-input-box" style="width:715px;margin-top:0;margin-bottom:20px;">
                        <p style="color:#333;">整改描述：</p>
                        <el-form-item label="" prop="zgMs">
                          <el-input
                            class="min-input-textarea"
                            type="textarea"
                            resize="none"
                            style="color:red;width:640px;"
                            maxlength="50"
                            :autosize="{ minRows: 4, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="form.zgMs">
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-form>
                  </div>
                  <div class="center-info-for-min-right-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>复核信息</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="center-info-for-min-box" v-if="newData.detailsList.detailslogList[0]">
                <!--整改循环-->
                <div class="center-info-for-min" v-for="(item,index) in newData.detailsList.detailslogList" :key="index" v-if="index == 0 || allDataType">
                  <div class="center-info-for-min-left-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>整改信息</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改时间：</p>
                      <p>{{item.createTime}}</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改人：</p>
                      <p>{{item.zgUserName}}</p>
                    </div>
                    <div class="for-min-text-box">
                      <p>整改描述：</p>
                      <p>{{item.zgMs}}</p>
                    </div>
                    <div class="for-min-img-box">
                      <p class="for-min-img-box-left-title">整改照片：</p>
                      <div class="for-min-img-box-left-img-box" v-if="item.yhZghImg[0]">
                        <img :src="minItem" v-for="(minItem,minIndex) in item.yhZghImg" :key="minIndex" @click="lockImg(minItem)">
                      </div>
                      <p v-if="!item.yhZghImg[0]">未上传照片</p>
                    </div>
                  </div>
                  <div class="center-info-for-min-right-box">
                    <div class="for-min-title-box">
                      <p></p>
                      <p>复核信息</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核时间：</p>
                      <p>{{item.spTime}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核人：</p>
                      <p>{{item.spUserName}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核结果：</p>
                      <p :class="item.spStatus == 1?'spStatusColorA':'spStatusColorB'">{{item.spStatus == 1 ? '复核通过':'复核驳回'}}</p>
                    </div>
                    <div class="for-min-text-box" v-if="item.spTime">
                      <p>复核备注：</p>
                      <p>{{item.spSm}}</p>
                    </div>
                  </div>
                </div>
              </div>
              <!--查看更多复核信息-->
              <div class="all-button-box" v-if="newData.detailsList.detailslogList[1] && !allDataType" @click="lookAllData">
                <p>查看更多复核记录</p>
                <img src="@/assets/ZDimages/secuityCheck/icon_wtzg_jcjlxl.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-button-box" v-hasPermi="['laboratory:checkRecordDetails:rectification']">
        <p class="null-p"></p>
        <p class="button-p inquire-button-two" @click="auditButton(1)" v-if="stepsType == 0 || stepsType == 2">暂时无法整改</p>
        <p class="button-p inquire-button-one" @click="auditButton(2)" v-if="stepsType == 0 || stepsType == 2">完成整改</p>
        <!--<p class="button-p reset-button-one" @click="downloadGenNotice" v-if="newData.zgType == 1">整改通知书</p>-->
        <!--<p class="button-p reset-button-one" @click="downloadGenReport" v-if="newData.zgType == 1 && stepsType == 4">整改报告</p>-->
        <p class="null-p"></p>
      </div>
    </div>
    <!--<check-record-info-up v-if="pageType == 2" :newData="newData"></check-record-info-up>-->
    <!--查看图片-->
    <el-dialog :title="imgTitle" :visible.sync="imgOpen" width="1200px" append-to-body>
      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
      </div>
    </el-dialog>
    <el-dialog class="up-img-box" title="上传电子签名" :visible.sync="upImgOpen" width="600px" append-to-body>
      <p>示例</p>
      <img class="img-one" src="@/assets/ZDimages/icon_scdzqm_sl.png">
      <p>正楷签名</p>
      <div class="cropper-box">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="realTime"
        ></vueCropper>
        <p class="cropper-button" @click="upImgButton">保存查看</p>
        <el-upload
          class="position-button"
          :action="uploadImgUrl"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="signatureChange"
          accept="image/jpeg,image/gif,image/png"
          :headers="headers"
          :before-upload="beforeAvatarUpload">
          <p style="position: absolute;right:100px;top:10px;z-index:1;color:#fff;background:#14AE10;cursor: pointer;padding:5px 10px;margin:0;border-radius:6px;">选择签名</p>
        </el-upload>
      </div>
      <p style="color:#999;">请将签名置于选择框内以便提高识别度</p>
      <img class="cropper-img" v-if="signatureData" :src="signatureData">
      <div slot="footer" class="dialog-footer">
        <el-button @click="upImgOpenClick(1)">取 消</el-button>
        <el-button type="primary" @click="upSignatureData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDettailsListInfo,rectification,getCheckSign,queryDeptSignByUserId } from "@/api/laboratory/checkRecord";
  import { genSign,updateSignature } from "@/api/system/user";
  // import checkRecordInfoUp from "./CheckRecordInfoUp.vue";
  import { getToken } from "@/utils/auth";
  export default {
    name: 'verifyCheckInfo',
    // components: {
    //   checkRecordInfoUp,
    // },
    props:{
      infoId:{},
    },
    data() {
      return {
        uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
        uploadImgUrlTwo: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //整改状态
        stepsType:1,
        //逾期状态
        stepsTimeType:false,
        newData:{},
        active:0,
        textOne:"",
        textTwo:"",
        textTree:"",
        //页面状态
        pageType:false,
        //查看图片
        imgOpen:false,
        imgTitle:"",
        imgUrl:"",
        //传参数据
        infoData:[],
        //是否展示所有数据
        allDataType:false,
        //提交数据
        form:{
          zgMs:"",
          yhZghImg:[],
        },
        rules:{
          zgMs: [
            { required: true, message: "请输入整改描述", trigger: "blur" },
            { required: true, message: "请输入整改描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          yhZghImg: [
            { required: true, message: "请上传整改材料", trigger: "blur" }
          ],
        },
        //上传签名开关
        upImgOpen:false,
        option:{
          img: '', // 裁剪图片的地址
          outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
          outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
          info: true,          //图片大小信息
          canScale: true,      //图片是否允许滚轮缩放
          autoCrop: true,      //是否默认生成截图框
          autoCropWidth: 240,  //默认生成截图框宽度
          autoCropHeight: 80, //默认生成截图框高度
          fixed: true,         //是否开启截图框宽高固定比例
          fixedNumber: [3, 1], //截图框的宽高比例
          full: false,         //false按原比例裁切图片，不失真
          fixedBox: true,      //固定截图框大小，不允许改变
          canMove: false,      //上传图片是否可以移动
          canMoveBox: true,    //截图框能否拖动
          original: false,     //上传图片按照原始比例渲染
          centerBox: false,    //截图框是否被限制在图片里面
          height: true,        //是否按照设备的dpr 输出等比例图片
          infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
          maxImgSize: 3000,    //限制图片最大宽度和高度
          enlarge: 1,          //图片根据截图框输出比例倍数
          mode: '560px 400px'  //图片默认渲染方式
        },
        previews:{},
        //临时签名数据
        signatureData:"",
      }
    },
    created() {
      this.getInfo();
    },
    methods: {
      //删除整改图片
      imgDel(index){
        this.form.yhZghImg.splice(index,1);
      },
      // 实时预览函数
      realTime(data) {
        this.previews = data;
      },
      //上传签名
      upSignatureData(){
        if(!this.signatureData){
          this.msgError('请先选择签名上传并保存查看')
        }
        var blob = this.dataURLtoBlob(this.signatureData);
        var file = this.blobToFile(blob, 'dx.jpg');
        let formData = new FormData();
        formData.append('file',file,"DX.jpg")
        console.log("formData",formData);
        updateSignature(formData).then(response => {
          if(response.code == 200){
            this.msgSuccess("操作成功");
            this.upImgOpen = false;
          }
        });
      },
      //签名页面开关
      upImgOpenClick(type){
        if(type == 1){
          this.upImgOpen = false;
        }else if (type == 2){
          this.option.img = this.user.signature;
          this.signatureData = this.user.signature;
          this.upImgOpen = true;
        }
      },
      //确定签名
      upImgButton(){
        let self = this;
        if(!this.option.img){
          this.msgError('请先上传签名')
          return
        }
        this.$refs.cropper.getCropBlob(async (data) => {
          let formData = new FormData();
          formData.append('file',data,"DX.jpg")
          genSign(formData).then(response => {
            if(response.code == 200){
              this.signatureData = 'data:image/png;base64,'+response.data;
            } else {
              this.msgError(response.msg)
            }
          });
        })
      },
      //签名选择
      signatureChange(val){
        const windowURL = window.URL || window.webkitURL;
        this.option.img = windowURL.createObjectURL(val.raw)
        this.signatureData = "";
        this.upImgOpen = true;
      },
      //查看所有
      lookAllData(){
        this.allDataType = true;
      },
      //上传
      handleAvatarSuccessTwo(res, type) {
        this.form.yhZghImg.push(res.data.url);
        // console.log("res",res.data.url);
        // console.log("type",type);
        this.$refs["form"].validate(valid => {})
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
      getInfo(){
        console.log("this.infoId",this.infoId)
        let obj = {
          id:this.infoId,
        };
        getDettailsListInfo(obj).then( response => {
          let obj = JSON.parse(JSON.stringify(response.data));
          if(obj.details.yhImg){
            obj.details.yhImg = obj.details.yhImg.split(",");
          }
          if(obj.details.zmClImg){
            obj.details.zmClImg = obj.details.zmClImg.split(",");
          }
          if(obj.details.yhZghImg){
            obj.details.yhZghImg = obj.details.yhZghImg.split(",");
          }
          let newOjb = obj.record;
          newOjb.detailsList = obj.details;
          // spStatus检查项状态 0待整改 1整改待复核 2复核未通过 4完成
          // zgStatus 检查逾期  5逾期' 其他未逾期
          if(newOjb.detailsList.spStatus == 0){
            this.stepsType = 0;
          }else if (newOjb.detailsList.spStatus == 1){
            this.stepsType = 1;
          }else if (newOjb.detailsList.spStatus == 2){
            this.stepsType = 2;
          }else if (newOjb.detailsList.spStatus == 4){
            this.stepsType = 4;
          }
          if(newOjb.zgStatus == 5 && newOjb.detailsList.spStatus != 4){
            this.stepsTimeType = true
          }else{
            this.stepsTimeType = false
          }
          for(let i=0;i<newOjb.detailsList.detailslogList.length;i++){
            if(newOjb.detailsList.detailslogList[i].yhZghImg){
              newOjb.detailsList.detailslogList[i].yhZghImg = newOjb.detailsList.detailslogList[i].yhZghImg.split(",");
            }else{
              newOjb.detailsList.detailslogList[i].yhZghImg = [];
            }
          }
          this.$set(this,'newData',newOjb);
          this.pageType = true;
        });
      },
      //返回
      backPage(){
        this.$parent.goPageType(1);
      },
      //查看图片
      lockImg(url){
        this.imgTitle = "照片查看";
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //整改
      auditButton(type){
        if(type == 1){
          this.$refs["form"].validateField("zgMs",valid=>{
            if (!valid) {
              if(this.newData.zgType == 1){
                getCheckSign().then( response => {
                  if(response.data){
                    this.putEditList(3);
                  }else{
                    this.upImgOpen = true;
                  }
                })
              }else{
                this.putEditList(3);
              }
            }
          })
        }else if(type == 2){
          this.$refs["form"].validate(valid => {
            if (valid) {
              if(this.newData.zgType == 1){
                getCheckSign().then( response => {
                  if(response.data){
                    this.putEditList(1);
                  }else{
                    this.upImgOpen = true;
                  }
                })
              }else{
                this.putEditList(1);
              }
            }
          })
        }
      },
      //整改
      putEditList(type){
        let obj = {
          checkId:this.newData.id,//检查单
          id:this.newData.detailsList.id,//隐患项
          spStatus:type,
          zgMs:this.form.zgMs,
          yhZghImg:this.form.yhZghImg+'',
        }
        rectification(obj).then( response => {
          this.msgSuccess(response.msg);
          this.backPage();
        })
      },
      //整改通知书
      downloadGenNotice(){
        if(this.newData.zgType == 1){
          getCheckSign().then( response => {
            if (response.data) {
              queryDeptSignByUserId().then(response =>{
                if(response.data.isUpload){
                  this.download('/laboratory/checkOption/genNotice/'+this.newData.id, {}, `整改通知书.docx`)
                }else{
                  this.$alert('请稍后联系管理员上传电子签章!否则整改通知书无法自动生成签章', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.download('/laboratory/checkOption/genNotice/'+this.newData.id, {}, `整改通知书.docx`)
                    }
                  });
                }
              })
            }else{
              this.upImgOpen = true;
            }
          })
        }else{
          this.download('/laboratory/checkOption/genNotice/'+this.newData.id, {
          }, `整改通知书.docx`)
        }
      },
      //整改报告
      downloadGenReport(){
        if(this.newData.zgType == 1){
          getCheckSign().then( response => {
            if (response.data) {
              queryDeptSignByUserId().then(response =>{
                if(response.data.isUpload){
                  this.download('/laboratory/checkOption/genReport/'+this.newData.id, {}, `整改报告.docx`)
                }else{
                  this.$alert('请稍后联系管理员上传电子签章!否则整改报告无法自动生成签章', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.download('/laboratory/checkOption/genReport/'+this.newData.id, {}, `整改报告.docx`)
                    }
                  });
                }
              })
            }else{
              this.upImgOpen = true;
            }
          })
        }else{
          this.download('/laboratory/checkOption/genReport/'+this.newData.id, {}, `整改报告.docx`)
        }
      },
      //将base64转换为blob
      dataURLtoBlob: function(dataurl) {
        var  arr = dataurl.split(',')
        var  mime = arr[0].match(/:(.*?);/)[1]
        var  bstr = atob(arr[1])
        var  n = bstr.length
        var  u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      },
      //将blob转换为file
      blobToFile: function(theBlob, fileName){
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
      },
    }
  }
</script>

<style scoped lang="scss">
  .CheckRecordInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
    }
    .CheckRecordInfoPage{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      overflow-y: scroll;
      /*标题部分*/
      .top-title-box{
        display: flex;
        height:80px;
        border-bottom:1px solid #e0e0e0;
        .title-p{
          margin-left:20px;
          flex:1;
          line-height:80px;
          font-size:18px;
          color:#0045AF;
        }
        .button-p{
          margin:20px;
        }
      }
      /*步骤条*/
      .top-steps-box{
        display: flex;
        width:870px;
        margin:30px auto 0;
        .top-steps-left-box{
          width:100px;
          display: flex;
          img{
            width:30px;
            height:30px;
          }
          p{
            flex:1;
            text-align:center;
            font-size:16px;
            line-height:30px;
            height:30px;
          }
        }
        .top-steps-border{
          width:260px;
          height:0;
          margin:14px 10px 0 0;
        }
        .color999{
          color:#999!important;
        }
        .top-steps-border-true{
          border:1px dashed #0183FA;
        }
        .top-steps-border-false{
          border:1px dashed #999;
        }
        .top-steps-center-box{
          width:130px;
          display: flex;
          img{
            width:30px;
            height:30px;
          }
          p{
            flex:1;
            text-align:center;
            font-size:16px;
            line-height:30px;
            height:30px;
          }
        }
        .top-steps-right-box{
          width:140px;
          display: flex;
          img{
            width:30px;
            height:30px;
          }
          p{
            flex:1;
            text-align:left;
            margin-left:5px;
            font-size:16px;
            line-height:30px;
            height:30px;
          }
        }
      }
      /*步骤信息*/
      .top-steps-text-box{
        display: flex;
        width:1000px;
        margin:10px auto 0;
        p{
          line-height:28px;
          font-size:14px;
          color:#999999;
          font-weight:500;
        }
        .top-steps-text-left-box{
          width:230px;
          p{
            text-align: left;
          }
        }
        .top-steps-text-center-box{
          flex:1;
          p{
            text-align: center;
          }
        }
        .top-steps-text-right-box{
          width:240px;
          p{
            text-align: left;
          }
          .stepsTimeTypeTrue{
            color:#FF4343;
          }
        }
      }
      /*整改单位/人员信息*/
      .center-info-top-box{
        border-top:1px solid #e0e0e0;
        margin:20px 20px 0;
        display: flex;
        p{
          margin:0;
          font-weight:500;
        }
        .center-left-box{
          margin-right:100px;
          display: flex;
          margin-top:20px;
          margin-left:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:16px;
          }
        }
        .center-center-box{
          margin-right:100px;
          display: flex;
          margin-top:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:16px;
          }
        }
        .center-right-box{
          display: flex;
          margin-top:20px;
          img{
            width:40px;
            height:40px;
            margin:10px 20px;
          }
          div{
            line-height:30px;
            font-size:16px;
          }
        }
      }
      /*整改信息部分*/
      .center-info-box{
        flex:1;
        .center-info-for-max-box{
          .center-info-for-max-title{
            padding-left:20px;
            border-bottom:1px solid #e0e0e0;
            flex:1;
            height:68px;
            line-height:68px;
            font-size:18px;
            color:#0045AF;
          }
          .center-info-for-box{
            margin: 20px 20px 0;
            .center-info-for-title-box{
              display: flex;
              overflow: hidden;
              .title-left{
                background: #0183FA;
                padding:0 10px;
                color:#fff;
                line-height:50px;
              }
              .title-right{
                background: #CCE6FE;
                flex:1;
                padding:15px 18px;
                color:#333;
                p{
                  display: inline-block;
                  line-height:20px;
                }
              }
            }
            .center-info-for-big-box{
              border-left:1px solid #e0e0e0;
              border-right:1px solid #e0e0e0;
              border-bottom:1px solid #e0e0e0;
              font-weight:500;
              overflow: hidden;
              .center-info-for-big-title-box{
                display: flex;
                font-size:14px;
                margin:23px 0 27px 0;
                p:nth-child(1){
                  width:116px;
                  text-align: right;
                  color:#999;
                }
                p:nth-child(2){
                  flex:1;
                  color:#333;
                  margin-right:20px;
                }
              }
              .center-info-for-big-flex-box{
                display: flex;
                .center-info-for-big-flex-left-box{
                  width:790px;
                  overflow: hidden;
                  font-size:14px;
                  display: flex;
                  .center-info-for-big-flex-left-title{
                    width:116px;
                    text-align: right;
                    color:#999;
                  }
                  .center-info-for-big-flex-left-img-box{
                    img{
                      margin:0 10px 10px 0;
                      width:120px;
                      height:120px;
                    }
                  }
                }
                .center-info-for-big-flex-right-box{
                  flex:1;
                  .center-info-for-big-flex-right-text-box{
                    display: flex;
                    margin:0 40px 25px 0;
                    p{
                      line-height:14px;
                      font-size:14px;

                    }
                    p:nth-child(1){
                      width:100px;
                      color: #999;
                      text-align: right;
                    }
                    p:nth-child(2){
                      flex: 1;
                      color:#333;
                    }
                  }
                }
              }
              .center-info-for-min-box{
                border:1px solid #e0e0e0;
                margin:0 40px;
                .center-info-for-min:nth-child(1){
                  border:none;
                }
                .center-info-for-min{
                  display: flex;
                  padding:15px 17px;
                  border-top:1px dashed #e0e0e0;
                  .for-min-title-box{
                    display: flex;
                    p:nth-child(1){
                      height:20px;
                      width:4px;
                      background:#0183FA;
                      margin-right:10px;
                    }
                    p:nth-child(2){
                      font-size:16px;
                      line-height:20px;
                      color:#333;
                    }
                  }
                  .center-info-for-min-left-box{
                    width:760px;
                    .for-min-text-box{
                      display: flex;
                      margin-top:20px;
                      p{
                        font-size:14px;
                        line-height:14px;
                      }
                      p:nth-child(1){
                        width:75px;
                        text-align: right;
                        color:#999;
                      }
                      p:nth-child(2){
                        flex:1;
                        color:#333;
                        margin-right:90px;
                      }
                      .spStatusColorA{
                        color:#21CC1D!important;
                      }
                      .spStatusColorB{
                        color:#FF0000!important;
                      }
                    }
                    .for-min-img-box{
                      width:790px;
                      overflow: hidden;
                      font-size:14px;
                      line-height:14px;
                      display: flex;
                      margin-top:20px;
                      .for-min-img-box-left-title{
                        width:75px;
                        text-align: right;
                        color:#999;
                      }
                      .for-min-img-box-left-img-box{
                        img{
                          display: inline-block;
                          overflow: hidden;
                          width:120px;
                          height:120px;
                        }
                        .up-img-for-box{
                          display: inline-block;
                          overflow: hidden;
                          margin:0 10px 10px 0;
                          width:120px;
                          height:120px;
                          position: relative;
                          img{
                            display: block;
                            overflow: hidden;
                            width:120px;
                            height:120px;
                          }
                          .del-i{
                            position: absolute;
                            top:0;
                            right:0;
                            width:20px;
                            height:20px;
                            line-height:20px;
                            background: rgba(0,0,0,0.4);
                            color:#fff;
                            font-size:14px;
                            text-align: center;
                            cursor:pointer;
                          }
                        }
                        .position-button{
                          display: inline-block;
                          overflow: hidden;
                          margin:0 10px 10px 0;
                          width:120px;
                          height:120px;
                          .up-data-button{
                            display: inline-block;
                            overflow: hidden;
                            width:120px;
                            height:120px;
                            border: 1px dashed #E0E0E0;
                            cursor: pointer;
                            p{
                              text-align: center;
                              color:#999;
                              font-weight:500;
                            }
                            p:nth-child(1){
                              font-size: 20px;
                              line-height:40px;
                              margin-top:20px;
                            }
                            p:nth-child(2){
                              font-size: 16px;

                            }
                          }
                        }
                      }
                    }
                    .for-min-input-box{
                      display: flex;
                      margin-top:20px;
                      p{
                        font-size:14px;
                        line-height:14px;
                      }
                      p:nth-child(1){
                        width:75px;
                        text-align: right;
                        color:#999;
                      }
                      .min-input-textarea{
                        flex:1;
                        color:#333;
                        font-size:14px;
                        line-height:16px;
                      }
                    }
                  }
                  .center-info-for-min-right-box{
                    flex:1;
                    .for-min-text-box{
                      display: flex;
                      margin-top:20px;
                      p{
                        font-size:14px;
                        line-height:14px;
                      }
                      p:nth-child(1){
                        width:75px;
                        text-align: right;
                        color:#999;
                      }
                      p:nth-child(2){
                        flex:1;
                        color:#333;
                      }
                      .spStatusColorA{
                        color:#21CC1D!important;
                      }
                      .spStatusColorB{
                        color:#FF0000!important;
                      }
                    }
                  }
                }
              }
              .all-button-box{
                display: flex;
                height:50px;
                width:140px;
                margin:0 auto;
                cursor: pointer;
                p{
                  line-height:50px;
                  text-align: center;
                  font-size:14px;
                  color:#0183FA;
                }
                img{
                  width:12px;
                  height:10px;
                  margin:20px 0 20px 10px;
                }
              }
            }
            .center-info-for-big-box-all{
              padding-bottom:20px;
            }
          }
        }



        .text-box{
          display: flex;
          margin-top:10px;
          p{
            font-weight:500;
          }
          p:nth-child(1){
            width:80px;
            line-height:30px;
          }
          p:nth-child(2){
            flex:1;
            padding-top:5px;
            line-height:20px;
          }
        }
        .center-info-top-box{
          display: flex;
          p{
            margin:0;
            font-weight:500;
          }
          .center-left-box{
            width:360px;
            display: flex;
            margin-top:20px;
            img{
              width:40px;
              height:40px;
              margin:10px 20px;
            }
            div{
              line-height:30px;
              font-size:18px;
            }
          }
          .center-center-box{
            width:360px;
            display: flex;
            margin-top:20px;
            img{
              width:40px;
              height:40px;
              margin:10px 20px;
            }
            div{
              line-height:30px;
              font-size:18px;
            }
          }
          .center-right-box{
            width:360px;
            display: flex;
            margin-top:20px;
            img{
              width:40px;
              height:40px;
              margin:10px 20px;
            }
            div{
              line-height:30px;
              font-size:18px;
            }
          }
        }
        .center-info-title{
          font-size:18px;
          margin-top:10px;
          line-height:40px;
        }
        .center-for-box{
          margin-top:20px;
          border:1px solid #dedede;
          padding:20px;
          display: flex;
          p{
            margin:0;
            font-weight:500;
          }
          .center-for-left-box{
            width:500px;
            .for-title-p{
              line-height:20px;
              font-size:16px;
              margin-bottom:10px;
            }
            .for-text-box{
              display: flex;
              font-size:14px;
              p:nth-child(1){
                width:80px;
                line-height:30px;
              }
              p:nth-child(2){
                flex:1;
                padding-top:5px;
                line-height:20px;
              }
            }
          }
          .center-for-right-box{
            margin-left:40px;
            flex:1;
            .for-img-max-box{
              display: flex;
              .for-img-max-title-p{
                line-height:80px;
                width:120px;
              }
              .for-img-box{
                flex:1;
                img{
                  cursor: pointer;
                  height:80px;
                  width:80px;
                  margin:0 10px 10px 0;
                }
              }
            }
          }
        }
      }
      .bottom-button-box{
        display: flex;
        padding:20px 0;
        .null-p{
          flex:1;
        }
        .button-p{
          width:120px;
          margin-right:20px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .up-img-box{
    .el-dialog__body{
      padding-top:0;
    }
    .img-one{
      width:560px;
      height:150px;
    }
    .cropper-img{
      display: block;
      border:1px solid #e0e0e0;
      width:360px;
      height:120px;
      margin:0 auto;
    }
    .cropper-box{
      width:560px;
      height:270px;
      position: relative;
      .cropper-button{
        position: absolute;
        right:10px;top:10px;
        z-index:1;
        background: #0183FA;
        color:#fff;
        cursor: pointer;
        padding:5px 10px;
        margin:0;
        border-radius:6px;
      }
    }
  }
</style>