zc

src/views/safetyCheck/components/initiateInspect.vue

@@ -8,12 +8,143 @@
       <p class="page-top-title-add-p" @click="submitForm">提交查看</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
     </div>
-    <div class="content-box scrollbar-box">
-      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="120px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="newData.name" placeholder="请输入名称" maxLength="20" style="width:500px;"></el-input>
-        </el-form-item>
-      </el-form>
+    <div class="content-box">
+        <div class="content-left-box">
+          <div class="content-left-top-box">
+            <div class="left-text-box">
+              <p class="left-text-name-p">计划标题</p>
+              <div>
+                <p>{{newData.data1}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">检查类型</p>
+              <div style="width:130px;">
+                <p>{{newData.data2}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">计划周期</p>
+              <div>
+                <p>{{newData.data3}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">检查组织</p>
+              <div>
+                <p>{{newData.data4}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">检查要求</p>
+              <div style="min-height:80px;">
+                <p>{{newData.data5}}</p>
+              </div>
+            </div>
+          </div>
+          <div class="content-left-bottom-box">
+            <div class="left-text-box">
+              <p class="left-text-name-p">检查名称</p>
+              <div>
+                <p>{{newData.data6}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">检查开始日期</p>
+              <div>
+                <p>{{newData.data7}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p">整改期限</p>
+              <div>
+                <p>{{newData.data8}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-right-box scrollbar-box">
+          <p class="content-right-title-p">基本信息</p>
+          <div class="content-right-flex-border-box" style="padding-top:20px;">
+            <div class="left-text-box">
+              <p class="left-text-name-p">实验室</p>
+              <div>
+                <p>{{newData.data9}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p" style="width:138px;">学院单位</p>
+              <div>
+                <p>{{newData.data10}}</p>
+              </div>
+            </div>
+          </div>
+          <div class="content-right-flex-border-box">
+            <div class="left-text-box">
+              <p class="left-text-name-p">楼栋</p>
+              <div>
+                <p>{{newData.data11}}</p>
+              </div>
+            </div>
+            <div class="left-text-box">
+              <p class="left-text-name-p" style="width:138px;">检查人</p>
+              <div>
+                <p>{{newData.data12}}</p>
+              </div>
+            </div>
+          </div>
+          <p class="content-right-title-p">检查内容</p>
+          <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="rules" label-width="110px">
+            <el-form-item label="检查项目" prop="formData1">
+              <el-select v-model="addForm.formData1" :disabled="lookInfoType" placeholder="请选择检查项目" style="width:700px;">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <p class="dangers-num-p">此检查项在当前实验室累计出现 <span>{{dangersNum}}</span> 次隐患</p>
+            <el-form-item label="检查要点" prop="formData2">
+              <el-input v-model="addForm.formData2" disabled placeholder="请输入检查要点" style="width:700px;"></el-input>
+            </el-form-item>
+            <div style="display: flex;">
+              <el-form-item label="隐患等级" prop="formData3">
+                <el-select v-model="addForm.formData3" :disabled="lookInfoType" placeholder="请选择隐患等级" style="width:160px;">
+                  <el-option
+                    v-for="item in dangerLevel"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="检查结果" prop="formData4" v-if="!lookInfoType">
+                <div class="check-button-box">
+                  <div :class="addForm.formData4 == 1?'check-button-border':''" @click="checkButton(1)">
+                    <p>不符合</p>
+                    <img v-if="addForm.formData4 == 1" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
+                  </div>
+                  <div :class="addForm.formData4 == 2?'check-button-border':''" @click="checkButton(2)">
+                    <p>符合</p>
+                    <img v-if="addForm.formData4 == 2" src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
+                  </div>
+                </div>
+              </el-form-item>
+              <div class="check-button-border-box" v-if="lookInfoType">
+                <p>{{addForm.formData4?'不符合':'符合'}}</p>
+                <img src="@/assets/ZDimages/safetyCheck/icom_xjjc_jcjc@1x.png">
+              </div>
+              <div class="left-text-box" v-if="lookInfoType">
+                <p class="left-text-name-p" style="width:90px;">检查时间</p>
+                <div style="width:160px;">
+                  <p>{{newData.data13}}</p>
+                </div>
+              </div>
+            </div>
+          </el-form>
+        </div>
     </div>
   </div>
 </template>
@@ -29,7 +160,45 @@
     },
     data(){
       return{
-        newData:{},
+        //查看详情状态
+        lookInfoType:false,
+        newData:{
+          data1:'计划标题计划标题计划标题计划标题计划标计划标题标题计划标题计划标题计划标',
+          data2:'全面检查',
+          data3:'2024-03-01至2024-08-31',
+          data4:'督导组名称',
+          data5:'全面检查',
+          data6:'第1次检查',
+          data7:'2024-09-06',
+          data8:'2024-09-06',
+          data9:'实验室（房间号）',
+          data10:'学院名称',
+          data11:'楼栋名称',
+          data12:'姓名-工号',
+          data13:'2024-09-06',
+        },
+        options:[],
+        dangerLevel:[
+
+        ],
+        //隐患次数
+        dangersNum:0,
+        addForm:{
+          formData1:'',
+          formData2:'',
+          formData3:'',
+          formData4:1,
+        },
+        rules:{
+          formData1: [
+            { required: true, message: "请选择检查项目", trigger: "blur" },
+            { required: true, message: "请选择检查项目", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          formData4: [
+            { required: true, message: "请选择检查结果", trigger: "blur" },
+            { required: true, message: "请选择检查结果", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
       }
     },
     created(){
@@ -56,6 +225,12 @@
             }
           }
         })
+      },
+      //检查结果勾选
+      checkButton(type){
+        if(this.addForm.formData4 != type){
+          this.$set(this.addForm,'formData4',type);
+        }
       }
     },
   }
@@ -66,7 +241,169 @@
     .content-box{
       flex:1;
       display: flex;
-      padding:20px;
+      overflow: hidden;
+      .content-left-box{
+        width:529px;
+        display: flex;
+        flex-direction: column;
+        margin:40px 0;
+        border-right: 1px dashed #D8D8D8;
+        overflow: hidden;
+        .content-left-top-box{
+          margin:0 38px 20px 29px;
+          border-bottom: 2px dashed #D8D8D8;
+        }
+        .content-left-bottom-box{
+          margin:0 38px 0 29px;
+
+        }
+        .left-text-box{
+          display: flex;
+          margin-bottom:20px;
+          .left-text-name-p{
+            width:96px;
+            line-height:40px;
+            text-align: right;
+            margin-right:14px;
+            font-size:16px;
+          }
+          div{
+            font-size:14px;
+            width:350px;
+            padding:10px 20px;
+            background-color: #f5f5f5;
+            border: 1px solid #E0E0E0;
+            border-radius: 4px 4px 4px 4px;
+            p{
+              line-height:20px;
+            }
+          }
+        }
+      }
+      .content-right-box{
+        margin:40px 0;
+        flex:1;
+        overflow: hidden;
+        padding:0 26px 0 48px;
+        .content-right-title-p{
+          line-height:40px;
+          background: #F5F5F5;
+          border: 1px solid #E0E0E0;
+          padding-left:23px;
+        }
+        .content-right-flex-border-box{
+          display: flex;
+          border-left:1px solid #E0E0E0;
+          border-right:1px solid #E0E0E0;
+        }
+        .add-form-box{
+          padding-top:20px;
+          border:1px solid #E0E0E0;
+          border-top:none;
+          ::v-deep .el-form-item--medium .el-form-item__label{
+            font-size:16px;
+          }
+          .dangers-num-p{
+            margin-left:110px;
+            margin-bottom:20px;
+            font-size:14px;
+            color: #333;
+            display: block;
+            span{
+              color:#FF0000;
+            }
+          }
+          .check-button-box{
+            display: flex;
+            div{
+              border:1px solid #A2A2A2;
+              width:100px;
+              height:40px;
+              text-align: center;
+              position: relative;
+              cursor: pointer;
+              p{
+                width:100px;
+                line-height:40px;
+                font-size:14px;
+                text-align: center;
+              }
+              img{
+                position: absolute;
+                bottom:0;
+                right:0;
+                width:20px;
+                height:20px;
+              }
+            }
+            div:nth-child(1){
+              border-bottom-left-radius: 4px;
+              border-top-left-radius: 4px;
+              border-right:none;
+            }
+            div:nth-child(2){
+              border-bottom-right-radius: 4px;
+              border-top-right-radius: 4px;
+              border-left:none;
+            }
+            .check-button-border{
+              border:1px solid #0183FA!important;
+              color:#0183FA;
+            }
+          }
+          .check-button-border-box{
+            margin-left:30px;
+            border:1px solid #0183FA!important;
+            color:#0183FA;
+            border-radius:4px;
+            width:100px;
+            height:40px;
+            text-align: center;
+            position: relative;
+            p{
+              width:100px;
+              line-height:40px;
+              font-size:14px;
+              text-align: center;
+            }
+            img{
+              position: absolute;
+              bottom:0;
+              right:0;
+              width:20px;
+              height:20px;
+            }
+          }
+        }
+        .left-text-box{
+          display: flex;
+          margin-bottom:20px;
+          .left-text-name-p{
+            width:90px;
+            line-height:40px;
+            text-align: right;
+            margin-right:14px;
+            font-size:16px;
+          }
+          div{
+            font-size:14px;
+            width:300px;
+            padding:10px 20px;
+            background-color: #f5f5f5;
+            border: 1px solid #E0E0E0;
+            border-radius: 4px 4px 4px 4px;
+            p{
+              line-height:20px;
+            }
+          }
+        }
+        ::v-deep .el-input.is-disabled .el-input__inner{
+          background-color: #f5f5f5;
+          border: 1px solid #E0E0E0;
+          color:#333;
+          cursor: auto;
+        }
+      }
     }
   }
 </style>

src/views/safetyCheck/schoolInspect/inspectManage/index.vue

@@ -174,7 +174,7 @@
       return {
         tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
         //页面状态
-        pageType:1,
+        pageType:2,
         //复查状态选项卡
         tableButtonCheckType:1,
         //页面遮罩