FE-V2-PC/src/views/safetyCheck/startInspection/index.vue

<template>
    <div class="app-container startInspection" v-loading.fullscreen.lock="loading">
      <div class="title-max-box">
        <p class="title-p">开展检查</p>
      </div>
      <div class="content-max-box scrollbar-box">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="82px">
          <div class="top-form-box">
            <div class="top-form-left-box">
              <el-form-item label="实验室" prop="subId">
                <el-select placeholder="搜索实验室或房间号" filterable remote reserve-keyword style="width: 500px"
                           v-model="addForm.subId" @change="subChange" :remote-method="getSubList">
                  <el-option
                    v-for="item in subSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼栋" prop="buildId">
                <el-select disabled v-model="addForm.buildId" placeholder="请选择学院"
                           @change="buildingsChange" style="width: 500px">
                  <el-option
                    v-for="item in buildingsSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="display: flex" v-if="planType == 1">
                <el-form-item label="计划标题" prop="title">
                  <el-input v-model="addForm.title" placeholder="请输入计划标题" maxLength="30" style="width: 500px"/>
                </el-form-item>
                <p class="inquire-button-one" @click="planButton(2)"
                   style="font-size:14px;margin-left:20px;width:100px;" v-if="planList[0]">选择计划</p>
              </div>
              <el-form-item label="检查类型" prop="checkCategory" >
                <el-select :disabled="planType==2" v-model="addForm.checkCategory" @change="checkCategoryChange" placeholder="请选择检查类型"
                           style="width: 500px;height: 40px;">
                  <el-option
                    v-for="item in inspectCategoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="display: flex" v-if="planType == 2">
                <el-form-item label="计划" prop="id">
                  <el-select v-model="addForm.id" placeholder="请选择计划"
                             @change="planChange" style="width: 500px">
                    <el-option
                      v-for="item in planList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <p class="inquire-button-one" @click="planButton(1)"
                   style="font-size:14px;margin-left:20px;width:100px;">自定义输入</p>
              </div>
              <el-form-item label="整改期限" prop="rectifyDeadline" v-if="addForm.checkResult === 0 || addForm.checkCategory==2">
                <el-date-picker
                  style="width: 500px"
                  v-model="addForm.rectifyDeadline"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  placeholder="请选择整改期限">
                </el-date-picker>
              </el-form-item>

            </div>
            <div class="top-form-right-box">
              <el-form-item label="学院" prop="deptId">
                <el-select disabled v-model="addForm.deptId" placeholder="请选择学院"
                           @change="deptChange" style="width: 500px">
                  <el-option
                    v-for="item in deptSelectList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检查组织" prop="checkType">
                <el-select v-model="addForm.checkType" placeholder="请选择检查组织"
                           disabled style="width: 500px">
                  <el-option
                    v-for="item in checkTypeList"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计划周期" prop="dateRange">
                <el-date-picker
                  :disabled="planType == 2"
                  :clearable="false"
                  v-model="addForm.dateRange"
                  size="small"
                  style="width: 500px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="检查结果" prop="checkResult" v-if="addForm.checkCategory==1">
                <el-select v-model="addForm.checkResult" @change="checkResultChange" placeholder="请选择检查结果" style="width: 500px">
                  <el-option :key="0" label="不符合" :value="0"></el-option>
                  <el-option :key="1" label="符合" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="整改通知" prop="rectifyNotice" v-if="addForm.checkResult === 0 || addForm.checkCategory==2">
                <el-radio-group v-model="addForm.rectifyNotice" style="margin-top:5px;">
                  <el-radio :label="1">整改告知书</el-radio>
                  <el-radio :label="2">整改通知书</el-radio>
                </el-radio-group>
              </el-form-item>

            </div>
          </div>
          <!--综合检查-->
          <div class="bottom-form-box" v-if="addForm.checkResult === 0 && addForm.checkCategory==1">
            <div class="bottom-form-title-box">
              <p>不符合项</p>
              <p>隐患数：{{addForm.checkHazardDtoList.length}}</p>
            </div>
            <div class="for-max-big-box" v-for="(item,index) in addForm.checkHazardDtoList" :key="index">
              <div class="for-title-box">
                <p class="for-title-p">第{{index+1}}隐患项</p>
                <div class="for-del-box">
                  <p class="el-icon-delete"></p>
                  <p @click="delCheckHazardDtoList(index,'')">删除此项</p>
                </div>
                <div class="for-button-box" @click="dataLookButton(item)">
                  <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
                  <p>{{item.lookType?'收起':'展开'}}</p>
                </div>
              </div>
              <div class="for-big-box" v-if="item.lookType">
                <el-form-item label="隐患等级" :prop="'checkHazardDtoList.'+index+'.hazardLevel'" :rules="rules.hazardLevel" label-width="123px">
                  <el-select v-model="item.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px">
                    <el-option :key="2" label="一般隐患" :value="2"></el-option>
                    <el-option :key="1" label="重大隐患" :value="1"></el-option>
                    <el-option :key="3" label="管理问题" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="检查项目" :prop="'checkHazardDtoList.'+index+'.hazardCheckPro'" :rules="rules.hazardCheckPro" label-width="123px">
                  <el-cascader
                    @change="(val)=>cascaderChange(val,'',index)"
                    v-model="item.hazardCheckPro"
                    style="width: 898px"
                    placeholder="请选择检查项"
                    :options="options"
                    :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
                    filterable>
                    <template slot-scope="{data}">
                      <el-tooltip :content="data.labelName" v-if="data.labelName.length>22">
                        <p style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                      </el-tooltip>
                      <p v-else style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                    </template>
                  </el-cascader>
                  <p class="hazard-check-count-p" v-if="hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{hazardCheckCount}}</span> 次隐患</p>
                </el-form-item>
                <el-form-item label="检查要点" label-width="123px">
                  <el-input
                    style="width: 898px"
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 6}"
                    placeholder="未查到此项检查要点，可在此输入添加"
                    resize="none"
                    maxlength="300"
                    show-word-limit
                    v-model="item.hazardCheckPoint">
                  </el-input>
                </el-form-item>
                <el-form-item label="隐患描述" :prop="'checkHazardDtoList.'+index+'.hazardDescribe'" :rules="rules.hazardDescribe" label-width="123px">
                  <el-input
                    style="width: 898px"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4}"
                    placeholder="请输入隐患描述"
                    resize="none"
                    maxlength="100"
                    show-word-limit
                    v-model="item.hazardDescribe">
                  </el-input>
                </el-form-item>
                <el-form-item label="隐患照片" :prop="'checkHazardDtoList.'+index+'.uploadDtoList'" :rules="rules.uploadDtoList" label-width="123px">
                  <div class="for-img-box" v-for="(img,imgIndex) in item.uploadDtoList" :key="imgIndex">
                    <img class="for-img" :src="img.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)">
                    <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
                  </div>
                  <el-upload
                    v-if="item.uploadDtoList.length<5"
                    style="display: inline-block;overflow: hidden"
                    class="avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,item)"
                    :headers="headers"
                    :before-upload="(res)=>beforeAvatarUpload(res,item)">
                    <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
                  </el-upload>
                </el-form-item>
                <el-form-item label="" label-width="123px" style="margin-bottom:40px;color:#999;">
                  <p>支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
                </el-form-item>
              </div>
            </div>
            <p class="add-bottom-button" @click="addObject">+新增隐患检查项</p>
          </div>
          <!--专项检查-->
          <div class="bottom-form-box" v-if="addForm.checkCategory==2 && pageType==1">
            <div class="bottom-form-title-box">
              <p>检查项</p>
              <p>检查项：{{addForm.checkHazardInfoVoList.length}}</p>
            </div>
            <div class="dept-table-max-box">
              <div class="device-tip">请选择以下实验室内设备开始检查</div>
              <el-table  border :data="deviceTableList" @selection-change="deviceChange" :row-key="getRowKeys" height="350">
                <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
                <el-table-column label="名称" align="center" prop="chName" show-overflow-tooltip/>
                <el-table-column label="数量" align="center" prop="hazardNum" show-overflow-tooltip/>
                <el-table-column label="型号" align="center" prop="code" show-overflow-tooltip />
                <el-table-column label="类型" align="center" prop="hazardTypeMode" show-overflow-tooltip/>
              </el-table>
            </div>
            <div class="start_btn" @click="handleClick('startBtn')">开始检查</div>
          </div>
          <!--专项检查项-->
          <div class="bottom-form-box" v-if="addForm.checkCategory==2 && pageType==2">
            <div class="bottom-form-title-box">
              <p>检查项</p>
              <p>检查项：{{addForm.checkHazardInfoVoList.length}}</p>
            </div>
            <div class="for-max-big-box for-max-big-box-special" v-for="(item,index) in addForm.checkHazardInfoVoList" :key="index">
              <div class="for-title-box">
                <p class="for-title-p">{{index+1}}、【{{item.hazardName}}{{item.hazardName}}】专项检查</p>
                <div class="for-del-box" v-if="planType==1">
                  <p class="el-icon-delete"></p>
                  <p @click="delCheckHazardDtoList(index,'')">删除此项</p>
                </div>
                <div class="for-button-box" @click="dataLookButton(item)">
                  <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
                  <p>{{item.lookType?'收起':'展开'}}</p>
                </div>
              </div>
              <div class="for-big-box-special" v-if="item.lookType" v-for="(item2,index2) in item.checkHazardDtoList">
                <div class="for-big-box-special-l">{{index+1}}.{{index2+1}}</div>
                <div class="for-big-box for-big-box-special-r">
                  <el-form-item label="检查项目" :prop="'checkHazardInfoVoList.'+index+'.checkHazardDtoList.'+index2+'.hazardCheckPro'" :rules="rules.hazardCheckPro" label-width="123px">
                    <el-radio-group v-model="item2.checkFlag" style="margin-right: 20px;">
                      <el-radio :label="1">符合</el-radio>
                      <el-radio :label="0">不符合</el-radio>
                    </el-radio-group>
                    <el-cascader
                      @change="(val)=>cascaderChange(val,item2,index2)"
                      v-model="item2.hazardCheckPro"
                      style="width: 730px"
                      placeholder="请选择检查项"
                      :options="options"
                      :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
                      filterable>
                      <template slot-scope="{data}">
                        <el-tooltip :content="data.labelName" v-if="data.labelName.length>22">
                          <p style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                        </el-tooltip>
                        <p v-else style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                      </template>
                    </el-cascader>
                    <i class="el-icon-delete" v-if="planType==1"  @click="delCheckHazardDtoList(index,index2)" style="color: #0183FA;margin-left: 20px;cursor: pointer;"></i>
                    <p class="hazard-check-count-p" v-if="hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{hazardCheckCount}}</span> 次隐患</p>
                  </el-form-item>
                  <el-form-item v-if="item2.checkFlag==0" label="隐患等级" :prop="'checkHazardInfoVoList.'+index+'.checkHazardDtoList.'+index2+'.hazardLevel'" :rules="rules.hazardLevel" label-width="123px">
                    <el-select v-model="item2.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px">
                      <el-option :key="2" label="一般隐患" :value="2"></el-option>
                      <el-option :key="1" label="重大隐患" :value="1"></el-option>
                      <el-option :key="3" label="管理问题" :value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="item2.checkFlag==0" label="隐患描述"  label-width="123px">
                    <el-input
                      style="width: 898px"
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4}"
                      placeholder="请输入隐患描述"
                      resize="none"
                      maxlength="100"
                      show-word-limit
                      v-model="item2.hazardDescribe">
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="item2.checkFlag==0" label="隐患照片" :prop="'checkHazardInfoVoList.'+index+'.checkHazardDtoList.'+index2+'.uploadDtoList'" :rules="rules.uploadDtoList" label-width="123px">
                    <div class="for-img-box" v-for="(img,imgIndex) in item2.uploadDtoList" :key="imgIndex">
                      <img class="for-img" :src="img.fileUrl" @click="lookImg(item2.uploadDtoList,imgIndex)">
                      <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
                    </div>
                    <el-upload
                      v-if="item2.uploadDtoList.length<5"
                      style="display: inline-block;overflow: hidden"
                      class="avatar-uploader"
                      :action="uploadImgUrl"
                      :show-file-list="false"
                      :on-success="(res)=>handleAvatarSuccess(res,item2)"
                      :headers="headers"
                      :before-upload="(res)=>beforeAvatarUpload(res,item2)">
                      <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
                    </el-upload>
                  </el-form-item>
                  <el-form-item v-if="item2.checkFlag==0" label="" label-width="123px" style="margin-bottom:40px;color:#999;">
                    <p>支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
                  </el-form-item>
                </div>
              </div>
              <p class="add-bottom-button" v-if="planType == 1" @click="addObjectTow(item)">+新增隐患检查项</p>
            </div>
            <p class="add-bottom-button" v-if="planType == 1" @click="addObjectDevice()">+新增检查项</p>
          </div>
        </el-form>
      </div>
      <div class="bottom-button-max-box" v-hasPermi="['safety:checkManage_4:edit']">
        <p class="null-p"></p>
        <p class="add-button-two-90" @click="upDataButton(1)">保存</p>
        <p class="inquire-button-one" @click="upDataButton(2)">提交</p>
        <p class="null-p"></p>
      </div>
      <lookImgDialog ref="lookImgDialog"></lookImgDialog>
      <!--设备弹窗-->
      <el-dialog title="检查项" v-if="dialogVisible" :visible.sync="dialogVisible" width="730px" :append-to-body="false" :modal-append-to-body="false" :close-on-click-modal="false">
        <div style="margin-bottom:20px ">请选择以下实验室内设备开始检查</div>
        <el-table ref="deviceTable"  border :data="deviceTableList" @selection-change="deviceChange" :row-key="getRowKeys" height="350">
          <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
          <el-table-column label="名称" align="center" prop="chName" show-overflow-tooltip/>
          <el-table-column label="数量" align="center" prop="hazardNum" show-overflow-tooltip/>
          <el-table-column label="型号" align="center" prop="code" show-overflow-tooltip />
          <el-table-column label="类型" align="center" prop="hazardTypeMode" show-overflow-tooltip/>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="handleClick('startBtn')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import { listDepartments } from "@/api/system/dept";
  import { buildFloorGetlist } from "@/api/laboratory/building";
  import {
    buildBySubList, getCheckPlanBySubId, findCheckManage, checkOptionList,
    checkManageUpdate, checkManageAdd, countHazardNum, getGentle, getHazardListBySub, getHazardInfo
  } from '@/api/safetyCheck/index'
  export default {
    name: 'index',
    components: {
      lookImgDialog,
    },
    data(){
      return{
        loading:false,
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //期限时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        //检查组织
        checkTypeList:[{ key:1, label:"校院巡查", },{ key:2, label:"实验室自查", }],
        //学院列表
        deptSelectList:[],
        //楼栋列表
        buildingsSelectList:[],
        //实验室列表
        subSelectList:[],
        //楼栋列表
        options:[],
        addForm:{
          checkRange:3,
          id:"",
          subId:"",
          buildId:"",
          deptId:"",
          title:"",
          checkResult:"",
          rectifyNotice:"",
          checkCategory:'1',
          checkType:2,
          dateRange:[],
          rectifyDeadline:"",
          //综合检查
          checkHazardDtoList:[],
          //专项检查
          checkHazardInfoVoList:[],
        },


        //检查项出现次数
        hazardCheckCount:0,
        //上传用名称保存
        upDataName:"",
        deviceTableList:[],
        //检查类型
        inspectCategoryList:[{id:'1',name:'综合检查'},{id:'2',name:'专项检查'}],
        // 表单校验
        rules: {
          subId: [
            { required: true, message: "请选择实验室", trigger: "blur" },
          ],
          buildId: [
            { required: true, message: "请选择楼栋", trigger: "blur" },
          ],
          deptId: [
            { required: true, message: "请选择学院", trigger: "blur" },
          ],
          checkType: [
            { required: true, message: "请选择检查组织", trigger: "blur" },
          ],
          checkCategory: [
            { required: true, message: "请选择检查类型", trigger: "blur" },
          ],
          dateRange: [
            { required: true, message: "请选择计划周期", trigger: "blur" },
          ],
          title: [
            { required: true, message: "请输入计划标题", trigger: "blur" },
            { required: true, message: "请输入计划标题", validator: this.spaceJudgment, trigger: "blur" },
          ],
          id: [
            { required: true, message: "请选择计划", trigger: "blur" },
          ],
          checkResult: [
            { required: true, message: "请选择检查结果", trigger: "blur" },
          ],
          rectifyNotice: [
            { required: true, message: "请选择整改通知", trigger: "blur" },
          ],
          rectifyDeadline: [
            { required: true, message: "请选择整改期限", trigger: "blur" },
          ],
          hazardLevel: [
            { required: true, message: "请选择隐患等级", trigger: "blur" },
          ],
          hazardCheckPro: [
            { required: true, message: "请选择检查项目", trigger: "blur" },
          ],
          hazardDescribe: [
            { required: true, message: "请输入隐患描述", trigger: "blur" },
            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" },
          ],
          uploadDtoList: [
            { required: true, message: "请上传隐患照片", trigger: "blur" },
          ],
        },
        //自主输入与列表选择相关数据
        planList:[],
        planType:1,//1手动 2选择
        //权限范围
        adminGentle:false,
        applyGentle:false,
        myApplyGentle:false,
        /* ==专项检查== */
        dialogVisible:false,
        pageType:0,
        multipleSelection:[],

      }
    },
    created(){

    },
    mounted(){
      this.checkOptionList();
      this.listDepartments();
      this.getGentle();
      this.buildFloorGetlist();
    },
    methods:{
      getRowKeys(row) {
        return row.id
      },
      //选中设备
      deviceChange(val){
        console.log('1',val)
        let deviceList=val
        let list=[];
        if(deviceList[0]){
          for(let i=0;i<deviceList.length;i++){
            list.push(deviceList[i].id)
          }
          this.multipleSelection=list
        }
      },
      handleClick(doType){
        let self=this;
        if(doType=='startBtn'){//开始检查
          let hazardIds='';
          if(this.multipleSelection[0]){
            this.pageType=2;
            this.checkOptionList();
            this.dialogVisible=false;
            hazardIds=this.multipleSelection.join(',')
            this.getHazardInfo(this.addForm.subId,hazardIds)
          }else{
            this.msgError('请先选择实验室内设备!')
          }
        }
      },
      // 取消按钮
      cancel() {
        this.dialogVisible = false;
      },
      //获取权限范围
      getGentle(){
        getGentle().then(response => {
          this.$set(this,'adminGentle',response.data.adminGentle);
          this.$set(this,'applyGentle',response.data.applyGentle);
          this.$set(this,'myApplyGentle',response.data.myApplyGentle);
        });
      },
      //提交按钮
      upDataButton(type){
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let startTime = Date.parse(new Date(this.addForm.dateRange[0]));
            let currentTime = Date.parse(new Date);
            if(currentTime<startTime){
              this.msgError('当前时间不在计划周期内')
              return
            }
            if(this.planType == 1){
              //新计划
              let obj = JSON.parse(JSON.stringify(this.addForm));
              obj.manageStatus = type
              obj.cycleStartTime = obj.dateRange[0]
              obj.cycleEndTime = obj.dateRange[1]
              obj.subIds = obj.subId;
              delete obj.subId;
              delete obj.dateRange
              if(this.addForm.checkCategory==1){//综合检查
                if(obj.checkResult === 0){
                  if(!obj.checkHazardDtoList[0]){
                    this.msgError('请添加隐患检查项')
                    return
                  }
                  for(let i=0;i<obj.checkHazardDtoList.length;i++){
                    obj.checkHazardDtoList[i].checkCategory=this.addForm.checkCategory;
                    delete obj.checkHazardDtoList[i].lookType
                  }
                  obj.dangerNum = obj.checkHazardDtoList.length
                }else{
                  obj.checkHazardDtoList = [];
                }

              }else if(this.addForm.checkCategory==2){//专项检查
                if(!obj.checkHazardInfoVoList[0]){
                  this.msgError('请添加隐患检查项')
                  return
                }
                let list=[]
                let checkFlagList=[];
                for(let i=0;i<this.addForm.checkHazardInfoVoList.length;i++){
                  for(let b=0;b<this.addForm.checkHazardInfoVoList[i].checkHazardDtoList.length;b++){
                    checkFlagList.push(this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkFlag)
                    let obj={
                      checkFlag:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkFlag,
                      checkCategory:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkCategory,
                      hazardCheckCode:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckCode,
                      hazardCheckName:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckName,
                      hazardCheckPro:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckPro,
                      hazardDescribe:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardDescribe,
                      hazardLevel:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardLevel,
                      uploadDtoList:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].uploadDtoList,
                      code:this.addForm.checkHazardInfoVoList[i].code,
                      hazardId:this.addForm.checkHazardInfoVoList[i].hazardId,
                      hazardName:this.addForm.checkHazardInfoVoList[i].hazardName,
                      hazardTypeMode:this.addForm.checkHazardInfoVoList[i].hazardTypeMode,
                      hazardTypeModeName:this.addForm.checkHazardInfoVoList[i].hazardTypeModeName,
                      joinHazardId:this.addForm.checkHazardInfoVoList[i].joinHazardId,
                    }
                    list.push(obj)
                  }
                }
                if(this.multipleSelection[0]){
                  obj.hazardIds=this.multipleSelection.join(',')
                }
                if(checkFlagList.every(item=>{return item==1})){//符合
                  obj.checkResult=1;
                }else{//不符合
                  obj.checkResult=0;
                }
                obj.checkHazardDtoList=list;
              }
              checkManageAdd(obj).then(response => {
                this.msgSuccess(response.msg);
                this.initializationAddData();
              });
            }if(this.planType == 2){
              //已有计划修改
              let obj = JSON.parse(JSON.stringify(this.addForm));
              obj.manageStatus = type
              obj.cycleStartTime = obj.dateRange[0]
              obj.cycleEndTime = obj.dateRange[1]
              delete obj.dateRange
              if(this.addForm.checkCategory==1){//综合检查
                if(obj.checkResult === 0){
                  if(!obj.checkHazardDtoList[0]){
                    this.msgError('请添加隐患检查项')
                    return
                  }
                  for(let i=0;i<obj.checkHazardDtoList.length;i++){
                    obj.checkHazardDtoList[i].checkCategory=this.addForm.checkCategory;
                    delete obj.checkHazardDtoList[i].lookType
                  }
                  obj.dangerNum = obj.checkHazardDtoList.length
                }else{
                  obj.checkHazardDtoList = [];
                }
              }else if(this.addForm.checkCategory==2){//专项检查
                if(!obj.checkHazardInfoVoList[0]){
                  this.msgError('请添加隐患检查项')
                  return
                }
                let list=[]
                let checkFlagList=[];
                for(let i=0;i<this.addForm.checkHazardInfoVoList.length;i++){
                  for(let b=0;b<this.addForm.checkHazardInfoVoList[i].checkHazardDtoList.length;b++){
                    checkFlagList.push(this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkFlag)
                    let obj={
                      checkFlag:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkFlag,
                      checkCategory:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].checkCategory,
                      hazardCheckCode:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckCode,
                      hazardCheckName:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckName,
                      hazardCheckPro:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardCheckPro,
                      hazardDescribe:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardDescribe,
                      hazardLevel:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].hazardLevel,
                      uploadDtoList:this.addForm.checkHazardInfoVoList[i].checkHazardDtoList[b].uploadDtoList,
                      code:this.addForm.checkHazardInfoVoList[i].code,
                      hazardId:this.addForm.checkHazardInfoVoList[i].hazardId,
                      hazardName:this.addForm.checkHazardInfoVoList[i].hazardName,
                      hazardTypeMode:this.addForm.checkHazardInfoVoList[i].hazardTypeMode,
                      hazardTypeModeName:this.addForm.checkHazardInfoVoList[i].hazardTypeModeName,
                      joinHazardId:this.addForm.checkHazardInfoVoList[i].joinHazardId,
                    }
                    list.push(obj)
                  }
                }
                if(checkFlagList.every(item=>{return item==1})){//符合
                  obj.checkResult=1;
                }else{//不符合
                  obj.checkResult=0;
                }
                obj.checkHazardDtoList=list;
              }
              checkManageUpdate(obj).then(response => {
                this.msgSuccess(response.msg);
                this.initializationAddData();
              });
            }
          }
        })
      },
      // 删除图片
      delImg(index,imgIndex){
        this.addForm.checkHazardDtoList[index].uploadDtoList.splice(imgIndex,1);
      },
      //收起/展开
      dataLookButton(item){
        item.lookType = !item.lookType
      },
      //检查结果选中
      checkResultChange(val){
        if(val == 0){
          //不符合时如果没有检查项则写入一条
          if(!this.addForm.checkHazardDtoList[0]){
            this.addObject();
          }
        }
      },
      //新增检查
      addObject(){
        if(this.addForm.checkHazardDtoList.length<10){
          let obj = {
            hazardCheckCode:'',
            hazardCheckName:'',
            hazardCheckPoint:'',
            hazardCheckPro:'',
            hazardDescribe:'',
            hazardLevel:'',
            lookType:true,
            uploadDtoList:[],
          };
          this.addForm.checkHazardDtoList.push(obj);
        }
      },
      //新增隐患项
      addObjectTow(item){
        if(item.checkHazardDtoList.length<10){
          let obj = {
            checkFlag:0,
            hazardCheckCode:'',
            hazardCheckName:'',
            hazardCheckPoint:'',
            hazardCheckPro:'',
            hazardDescribe:'',
            hazardLevel:'',
            lookType:true,
            uploadDtoList:[],
          };
          item.checkHazardDtoList.push(obj);
        }
      },
      //新增检查项
      addObjectDevice(item){
        let self=this;
        this.dialogVisible=true;
        let list=JSON.parse(JSON.stringify(self.multipleSelection))
        setTimeout(function(){
          self.$refs.deviceTable.clearSelection();
          if(list[0]){
            self.deviceTableList.forEach(row => {
              list.forEach(function(item) {
                if(row.id==item){
                  self.$refs.deviceTable.toggleRowSelection(row,true);
                }
              })
            });
          }else{
            if(self.$refs.deviceTable){
              self.$refs.deviceTable.clearSelection();
            }
          }
        },100);

      },
      //查看图片
      lookImg(list,index){
        for(let i=0;i<list.length;i++){
          list[i].name = list[i].fileName;
          list[i].url = list[i].fileUrl;
        }
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
      },
      /*==========上传相关==========*/
      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,
          source: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> 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;
      },
      //获取检查项
      checkOptionList(){
        checkOptionList().then( response => {
          this.$set(this,'options',response.data);
          this.getCascaderData(this.options);
        })
      },
      //联级选择器数据处理
      getCascaderData(list){
        let self = this;
        if(this.addForm.checkCategory==1){//综合检查
          for(let i=0;i<list.length;i++){
            list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
            if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2){
              if(list[i].children){
                if(list[i].children[0]){
                  self.getCascaderData(list[i].children)
                  if(list[i].children){
                    if(!list[i].children[0]){
                      list.splice(i,1)
                      i--
                    }
                  }else{
                    list.splice(i,1)
                    i--
                  }
                }else{
                  list.splice(i,1)
                  i--
                }
              }else{
                list.splice(i,1)
                i--
              }
            }else{
              delete list[i].children
            }
          }
        }else if(this.addForm.checkCategory==2){//专项检查
          for(let i=0;i<list.length;i++){
            list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
            if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2 || list[i].level == 3){
              if(list[i].children){
                if(list[i].children[0]){
                  self.getCascaderData(list[i].children)
                  if(list[i].children){
                    if(!list[i].children[0]){
                      list.splice(i,1)
                      i--
                    }
                  }else{
                    list.splice(i,1)
                    i--
                  }
                }else{
                  list.splice(i,1)
                  i--
                }
              }else{
                list.splice(i,1)
                i--
              }
            }else{
              delete list[i].children
            }
          }
        }

      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.deptSelectList = response.data;
        });
      },
      //根据学院id查询楼栋列表
      buildFloorGetlist(){
        buildFloorGetlist({type:2}).then(response => {
          this.buildingsSelectList = response.rows;
        });
      },
      //根据楼栋id查询实验室列表
      buildBySubList(data,type){
        let obj = type == 1?{buildId:data}:{searchValue:data}
        buildBySubList(obj).then(response => {
          this.subSelectList = response.data;
        });
      },
      //选择学院触发
      deptChange(val){
        this.$set(this.addForm,'buildId','');
        this.$set(this.addForm,'subId','');
        this.$set(this,'subSelectList',[]);
        this.initializationAddFormData();
        this.$set(this,'planType',1);
        this.$set(this,'planList',[]);
      },
      //选择楼栋触发
      buildingsChange(val){
        this.$set(this,'subId','');
        this.$set(this.addForm,'subId','');
        this.initializationAddFormData();
        this.$set(this,'planType',1);
        this.$set(this,'planList',[]);
        this.buildBySubList(val,1);
      },
      //选择实验室触发
      subChange(val){
        let self = this;
        for(let i=0;i<self.subSelectList.length;i++){
          if(self.subSelectList[i].id == val){
            this.$set(this.addForm,'deptId',self.subSelectList[i].deptId);
            this.$set(this.addForm,'buildId',self.subSelectList[i].buildId);
            this.getCheckPlanBySubId(val);
            this.getHazardListBySub(val);
            return
          }
        }
      },
      //实验室搜索
      getSubList(val){
        this.$set(this.addForm,'deptId','');
        this.$set(this.addForm,'buildId','');
        this.$set(this.addForm,'subId','');
        this.$set(this,'subSelectList',[]);
        this.initializationAddFormData();
        this.$set(this,'planType',1);
        this.$set(this,'planList',[]);
        this.buildBySubList(val,2);
      },
      //根据实验室ID查询计划任务
      getCheckPlanBySubId(id){
        getCheckPlanBySubId({subId:id}).then(response => {
          this.initializationAddFormData();
          let list = [];
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].isSelfData == 1){
              list.push(response.data[i]);
            }
          }
          this.$set(this,'planType',list[0]?2:1);
          this.$set(this,'planList',list);
        });
      },
      //根据实验室ID查询实验室设备
      getHazardListBySub(id){
        getHazardListBySub({subId:id}).then(response => {
            this.deviceTableList=response.data;
        });
      },
      //根据设备id生成检查项
      getHazardInfo(id,hazardIds){
        getHazardInfo({subId:id,hazardIds:hazardIds}).then(response => {
            if(response.data[0]){
              response.data.forEach(function(item) {
                item.lookType=true;
                item.checkHazardDtoList.forEach(function(item2) {
                  item2.hazardCheckCode=item2.code
                })
              })
            }
            this.addForm.checkHazardInfoVoList=response.data
        });
      },
      //专项检查选中
      checkCategoryChange(){
        console.log(this.addForm.checkCategory)
        if(this.addForm.checkCategory==1){
          this.pageType=0;
        }else if(this.addForm.checkCategory==2){
          this.pageType=1;
        }

      },
      //计划列表选中
      planChange(val){
        let self = this;
        for(let i=0;i<self.planList.length;i++){
          if(self.planList[i].id == val){
            self.findCheckManage(self.planList[i].id);
            return
          }
        }
      },
      //状态切换按钮
      planButton(type){
        this.initializationAddFormData();
        this.$set(this,'planType',type);
        if(type == 1){
          this.$set(this.addForm,'checkType',2);
          this.$set(this,'checkTypeList',[{
            key:2,
            label:"实验室自查",
          }]);
          this.pageType=1;
          this.addForm.checkHazardInfoVoList=[];
        }else if(type == 2){
          this.pageType=0;
          this.$set(this.addForm,'checkType',null);
          this.$set(this,'checkTypeList',[{ key:1, label:"校院巡查", },{ key:2, label:"实验室自查", }]);
        }
      },
      //查询详情
      findCheckManage(id){
        findCheckManage({id:id}).then(response => {
          if(response.data.checkCategory==1){//综合检查
            response.data.checkResult = response.data.checkResult === 0 || response.data.checkResult === 1?response.data.checkResult:"";
            response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
            response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
            response.data.dateRange = [response.data.cycleStartTime,response.data.cycleEndTime];
            for(let i=0;i<response.data.checkHazardDtoList.length;i++){
              response.data.checkHazardDtoList[i].lookType = true;
            }

          }else if(response.data.checkCategory==2){//专项检查
            response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
            response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
            response.data.dateRange = [response.data.cycleStartTime,response.data.cycleEndTime];
            if(response.data.checkHazardInfoVoList[0]){
              response.data.checkHazardInfoVoList.forEach(function(item) {
                item.lookType = true;
                item.checkHazardDtoList.forEach(function(item2) {
                  item2.hazardCheckCode=item2.code
                })
              })
            }
            this.pageType=2
          }
          this.buildBySubList(response.data.buildId,1);
          this.$set(this,'addForm',{
            id:response.data.id,
            checkPlanId:response.data.checkPlanId,
            title:response.data.title,
            subId:response.data.subId,
            buildId:response.data.buildId,
            checkResult:response.data.checkResult,
            rectifyNotice:response.data.rectifyNotice,
            deptId:response.data.deptId,
            checkType:response.data.checkType,
            checkCategory:response.data.checkCategory+'',
            dateRange:response.data.dateRange,
            rectifyDeadline:response.data.rectifyDeadline,
            checkHazardDtoList:response.data.checkHazardDtoList,
            checkHazardInfoVoList:response.data.checkHazardInfoVoList,

          });
          this.checkOptionList();//获取检查项

        });
      },
      //初始化数据
      initializationAddFormData(){
        this.$set(this.addForm,'id','');
        this.$set(this.addForm,'checkPlanId','');
        this.$set(this.addForm,'title','');
        this.$set(this.addForm,'checkRange',3);
        this.$set(this.addForm,'checkType',2);
        this.$set(this.addForm,'dateRange',[]);
        this.$set(this.addForm,'checkResult','');
        this.$set(this.addForm,'rectifyNotice','');
        this.$set(this.addForm,'rectifyDeadline','');
        this.$set(this.addForm,'checkHazardDtoList',[]);
      },
      initializationAddData(){
        this.$set(this,'addForm',{
          checkRange:3,
          id:"",
          checkPlanId:"",
          subId:"",
          buildId:"",
          deptId:"",
          title:"",
          checkResult:"",
          rectifyNotice:"",
          checkType:2,
          dateRange:[],
          rectifyDeadline:"",
          checkHazardDtoList:[],
        });
        this.$set(this,'planType',1);
        this.$set(this,'planList',[]);
      },
      //删除检查项
      delCheckHazardDtoList(index,index2){

        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          if(self.addForm.checkCategory==1){//综合检查
            self.addForm.checkHazardDtoList.splice(index,1);
          }else if(self.addForm.checkCategory==2){//专项检查
            if(index2>=0){//小检查项
              self.addForm.checkHazardInfoVoList[index].checkHazardDtoList.splice(index2,1);
            }else{//检查设备
              self.addForm.checkHazardInfoVoList.splice(index,1);
            }

          }

        }).then(() => {
        }).catch(() => {});
      },
      //检查项选中
      cascaderChange(val,item,index){
        let obj = this.getCascaderDataQuery(val,this.options);

        if(this.addForm.checkCategory==1){//综合检查
          if(!obj){
            this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPro','');
            this.msgError('未找到相关项目')
            return
          }
          this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckCode',obj.code);
          this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckName',obj.name);
          this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPoint',obj.mainPoint);
          countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
            this.$set(this,'hazardCheckCount',response.data);
          })
        }else if(this.addForm.checkCategory==2){//专项检查
          if(!obj){
            this.$set(this.addForm.checkHazardInfoVoList[index],'hazardCheckPro','');
            this.msgError('未找到相关项目')
            return
          }
          console.log(obj)
          item.hazardCheckCode=obj.code;
          item.hazardCheckName=obj.name;
          countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
            this.$set(this,'hazardCheckCount',response.data);
          })
        }
      },
      /*==========专项检查==========*/

      //联级选择器数据查询
      getCascaderDataQuery(text,list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].id == text){
            return list[i]
          }else{
            if(list[i].children){
              let obj = self.getCascaderDataQuery(text,list[i].children)
              if(obj){
                return obj
              }
            }
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .startInspection{
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    *{
      font-weight:500;
    }
    img{
      user-drag: none;
    }
    ::v-deep .el-range-editor--small .el-range-separator{
      line-height:32px;
    }
    .dept-table-max-box{
      padding: 0 20px;
      box-sizing: border-box;
        .device-tip{
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 16px;
          margin-bottom: 20px;
        }
    }
    .start_btn{
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #0183FA;
      line-height: 40px;
      text-align: center;
      width: 500px;
      height: 40px;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px dotted #0183FA;
      margin:40px auto;
    }
    .title-max-box{
      position: relative;
      height:90px;
      display: flex;
      border-bottom:1px solid #dedede;
      .title-p{
        flex:1;
        color:#0045AF;
        margin-left:64px;
        line-height:90px;
        font-size:16px;
      }
      .title-button{
        width:70px;
        margin:24px 31px;
      }
      .position-img{
        width:80px;
        height:80px;
        position: absolute;
        top:0;
        left:0;
      }
    }
    .content-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .top-form-box{
        padding:40px 85px 20px;
        display: flex;
        .top-form-left-box{
          flex:1;
          height:310px;
        }
        .top-form-right-box{
          height:310px;
        }
      }
      .bottom-form-box{
        .bottom-form-title-box{
          background: #F5F5F5;
          display: flex;
          margin-bottom:31px;
          p{
            font-size:16px;
            line-height:50px;
          }
          p:nth-child(1){
            color:#333;
            margin-left:30px;
            flex:1;
          }
          p:nth-child(2){
            color:#0183FA;
            margin-right:37px;
          }
        }
        .add-bottom-button{
          cursor: pointer;
          color:#0183FA;
          border-radius:4px;
          border:1px dashed #0183FA;
          width:800px;
          line-height:40px;
          text-align: center;
          font-size:14px;
          margin: 20px auto;
        }
      }
    }
    .for-max-big-box{
      border:1px solid #dedede;
      overflow: hidden;
      margin:0 81px;
      .for-title-box{
        display: flex;
        background: #F5F5F5;
        border-bottom:1px solid #dedede;
        line-height:50px;
        .for-title-p{
          color:#333333;
          font-size:16px;
          margin-left: 30px;
          flex:1;
        }
        .for-del-box{
          color:#0183FA;
          margin-left:46px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
        .for-button-box{
          color:#0183FA;
          margin-left:46px;
          margin-right:43px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
      }
      .for-big-box{
        padding-top:27px;
        .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;
          }
        }
        .hazard-check-count-p{
          display: inline-block;
          margin-left: 20px;
          font-size: 14px;
          line-height: 40px;
          span{
            color:#FF0000;
          }
        }
      }
    }
    /*专项检查*/
    .for-max-big-box-special{
      margin-bottom: 20px;
      .for-big-box-special{
        border-bottom: 1px dotted #D8D8D8;
        margin:30px;
        display: flex;
        justify-content: flex-start;
        .for-big-box-special-l{
          width: 30px;
          height: 30px;
          background: #0183FA;
          border-radius: 6px 6px 6px 6px;
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
          text-align: center;
        }
        .for-big-box-special-r{}
      }
      .for-big-box-special:last-of-type{
        border-bottom: none;
      }
    }
    .bottom-button-max-box{
      height:80px;
      display: flex;
      border-top:1px solid #dedede;
      p{
        margin-top:20px;
      }
      .null-p{
        flex:1;
      }
      p:nth-child(2){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:90px;
        margin-right:20px;
      }
    }
  }
</style>