zc

src/views/safetyCheck/laboratorySelfTest/selfInspectionManagement/index.vue

@@ -118,7 +118,7 @@
     },
     data(){
       return{
-        pageType:1,
+        pageType:3,
         queryParams:{
           pageNum:1,
           pageSize:20,

src/views/safetyCheck/laboratorySelfTest/selfInspectionManagement/infoDialog.vue

@@ -0,0 +1,559 @@
+<template>
+  <el-dialog class="selfInspectionManagement-info-dialog-box"
+             :title="infoDialogTitle" :visible.sync="infoDialogType" v-if="infoDialogType"
+             width="1184px" append-to-body>
+    <div class="info-dialog-title-box">
+      <div class="info-dialog-for-title-box" @click="checkTitleButton('info')" :class="infoDialogCheckIndex == 'info'?'info-dialog-for-check':''">
+        <p>隐患检查</p>
+        <p></p>
+      </div>
+      <div class="info-dialog-for-title-box" :class="infoDialogCheckIndex == index?'info-dialog-for-check':''"
+           @click="checkTitleButton(index)" v-for="(item,index) in infoDialogList" :key="index">
+        <p>{{item.name}}</p>
+        <p></p>
+      </div>
+    </div>
+    <div class="info-dialog-content-box scrollbar-box">
+      <div class="info-dialog-content-info" v-if="infoDialogCheckIndex == 'info'">
+        <div class="text-box-box">
+          <p>计划标题</p>
+          <p>{{infoDialogData.data1}}</p>
+        </div>
+        <div class="text-box-two-box">
+          <div>
+            <p>检查类型</p>
+            <p>{{infoDialogData.data2}}</p>
+          </div>
+          <div>
+            <p>任务周期</p>
+            <p>{{infoDialogData.data3}}</p>
+          </div>
+        </div>
+        <div class="text-box-two-box">
+          <div>
+            <p>学院</p>
+            <p>{{infoDialogData.data4}}</p>
+          </div>
+          <div>
+            <p>实验室</p>
+            <p>{{infoDialogData.data5}}</p>
+          </div>
+        </div>
+        <div class="text-box-two-box">
+          <div>
+            <p>楼栋</p>
+            <p>{{infoDialogData.data6}}</p>
+          </div>
+        </div>
+        <div class="text-box-box">
+          <p>检查要求</p>
+          <p>{{infoDialogData.data7}}</p>
+        </div>
+        <div class="text-box-two-box">
+          <div>
+            <p>检查结果</p>
+            <p>{{infoDialogData.data8}}</p>
+          </div>
+          <div>
+            <p>整改期限</p>
+            <p>{{infoDialogData.data9}}</p>
+          </div>
+        </div>
+        <div class="button-box">
+          <p>整改通知书</p>
+          <p class="inquire-button-one" @click="lookDocument">查看</p>
+          <p class="add-button-one-90">下载</p>
+        </div>
+        <div class="text-box-two-box">
+          <div>
+            <p>检查者</p>
+            <p>{{infoDialogData.data10}}</p>
+          </div>
+          <div>
+            <p>创建时间</p>
+            <p>{{infoDialogData.data11}}</p>
+          </div>
+        </div>
+        <div class="table-box">
+          <p class="table-title-p">第1隐患项</p>
+          <div class="table-min">
+            <div class="left-box">
+              <p></p>
+              <p>检查项目</p>
+              <p></p>
+            </div>
+            <div class="right-box text-two-box">
+              <p></p>
+              <p>{{infoDialogData.data12}}</p>
+              <p></p>
+              <p>此检查项在当前实验室累计出现 <span>{{infoDialogData.data13}}</span> 次隐患</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="table-min">
+            <div class="left-box">
+              <p></p>
+              <p>隐患描述</p>
+              <p></p>
+            </div>
+            <div class="right-box text-box">
+              <p></p>
+              <p>{{infoDialogData.data14}}</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="table-min">
+            <div class="left-box">
+              <p></p>
+              <p>隐患等级</p>
+              <p></p>
+            </div>
+            <div class="right-box text-box">
+              <p></p>
+              <p>{{infoDialogData.data15}}</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="table-min">
+            <div class="left-box">
+              <p></p>
+              <p>检查要点</p>
+              <p></p>
+            </div>
+            <div class="right-box text-box">
+              <p></p>
+              <p>{{infoDialogData.data16}}</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="table-min">
+            <div class="left-box">
+              <p></p>
+              <p>隐患照片</p>
+              <p></p>
+            </div>
+            <div class="right-box img-box">
+              <img src="" v-for="(imgItem,index) in infoDialogData.data17" :key="index" @click="lookImg(infoDialogData.data17,index)">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info-dialog-content-img" v-if="infoDialogCheckIndex == 'img'">
+        <img :src="imgList[imgIndex].url">
+        <p class="el-icon-arrow-left left-button-p" @click="infoLeftButton"></p>
+        <p class="el-icon-arrow-right right-button-p" @click="infoRightButton"></p>
+        <p class="bottom-num-text">{{imgIndex+1}} / {{imgList.length}}</p>
+        <p class="out-button" @click="outLook">返回</p>
+      </div>
+      <div class="info-dialog-content-document" v-if="infoDialogCheckIndex == 'document'">
+        <iframe
+          class="iframe"
+          :src="iframeSrc" scrolling="auto" frameborder="0">
+        </iframe>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'infoDialog',
+    data(){
+      return{
+        infoDialogTitle:"编辑",
+        infoDialogType:true,
+        infoDialogCheckIndex:'info',
+        infoDialogData:{
+          data1:"2023年3月份校级督导检查",
+          data2:"校园巡查",
+          data3:"2023-01-01至2024-01-01",
+          data4:"环境与测绘学院",
+          data5:"管制类化学品暂存库 - A103",
+          data6:"实验大楼",
+          data7:"全部检查",
+          data8:"不符合",
+          data9:"2023-01-01",
+          data10:"李小三",
+          data11:"2023-01-01  13:00",
+          data12:"1 检查项目名称 — 1.1 检查项目名称名称名称名称 — 1.1.1 检查项目名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称",
+          data13:"9",
+          data14:"现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患信息隐患信息现场隐患",
+          data15:"一般隐患",
+          data16:"检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要点内容检查要",
+          data17:[
+            {name:"1",url:'https://img2.baidu.com/it/u=3219906533,2982923681&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
+            {name:"2",url:'https://img1.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500'},
+            {name:"3",url:'https://img1.baidu.com/it/u=2995157981,91041597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
+            {name:"4",url:'https://img0.baidu.com/it/u=561734853,2461096286&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
+            {name:"5",url:'https://img2.baidu.com/it/u=567357414,4240886412&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
+          ],
+        },
+        infoDialogList:[
+          {
+            name:"隐患整改",
+          },
+          {
+            name:"整改复核",
+          },
+          {
+            name:"二次整改",
+          },
+          {
+            name:"二次复核",
+          },
+        ],
+        //图片
+        imgList:[],
+        imgIndex:0,
+        //文档地址
+        iframeSrc:"",
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+      //标签切换
+      checkTitleButton(index){
+        if(this.infoDialogCheckIndex != index){
+          this.$set(this,'infoDialogCheckIndex',index);
+        }
+      },
+      //点击查看文档
+      lookDocument(url){
+        url = 'http://localhost/#/safetyCheck/laboratorySelfTest/selfInspectionManagement'
+        this.iframeSrc = this.urlJudge(url)
+        this.$set(this,'infoDialogCheckIndex','document');
+      },
+      //点击查看图片
+      lookImg(list,index){
+        this.$set(this,'imgList',list)
+        this.$set(this,'imgIndex',index)
+        this.$set(this,'infoDialogCheckIndex','img');
+      },
+      outLook(){
+        this.$set(this,'infoDialogCheckIndex','info');
+      },
+      //图片左右按键
+      infoLeftButton(){
+        if (this.imgIndex == 0){
+          this.msgError('当前是第一张')
+        }else{
+          this.imgIndex--
+        }
+      },
+      infoRightButton(){
+        if (this.imgIndex == this.imgList.length-1){
+          this.msgError('当前是最后一张')
+        }else{
+          this.imgIndex++
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .selfInspectionManagement-info-dialog-box{
+    ::v-deep .el-dialog__body{
+      padding:0 0 30px 0;
+    }
+    .info-dialog-title-box{
+      border-bottom:1px solid #E0E0E0;
+      padding:0 30px;
+      .info-dialog-for-title-box{
+        height:80px;
+        width: 80px;
+        margin-right:44px;
+        overflow: hidden;
+        display: inline-block;
+        p:nth-child(1){
+          height:44px;
+          line-height:44px;
+          margin-top:18px;
+          text-align: center;
+          color:#333;
+          font-size:16px;
+          cursor: pointer;
+        }
+        p:nth-child(2){
+          height:4px;
+          width:40px;
+          margin:0 auto;
+          border-radius:4px;
+        }
+      }
+      .info-dialog-for-check{
+        p:nth-child(1){
+          font-size:16px;
+          color:#0045AF;
+        }
+        p:nth-child(2){
+          background-color: #0045AF;
+        }
+      }
+    }
+    .info-dialog-content-box{
+      padding:30px 70px 0;
+      height:700px;
+      .info-dialog-content-info{
+        .text-box-box{
+          display: flex;
+          margin-top:20px;
+          p{
+            font-size:16px;
+            color:#333;
+            line-height:40px;
+          }
+          p:nth-child(1){
+            width:95px;
+            text-align: right;
+            margin-right:16px;
+            font-size:16px;
+          }
+          p:nth-child(2){
+            width:933px;
+            padding:0 20px;
+            overflow: hidden;
+            background: #F5F5F5;
+            border-radius:4px;
+            font-size:14px;
+          }
+        }
+        .text-box-two-box{
+          display: flex;
+          margin-top:20px;
+          div{
+            display: flex;
+            p{
+              font-size:16px;
+              color:#333;
+              line-height:40px;
+            }
+            p:nth-child(1){
+              text-align: right;
+              margin-right:16px;
+              font-size:16px;
+            }
+            p:nth-child(2){
+              padding:0 20px;
+              overflow: hidden;
+              background: #F5F5F5;
+              border-radius:4px;
+              font-size:14px;
+            }
+          }
+          div:nth-child(1){
+            p:nth-child(1){
+              width:95px;
+            }
+            p:nth-child(2){
+              width:400px;
+            }
+          }
+          div:nth-child(2){
+            p:nth-child(1){
+              width:117px;
+            }
+            p:nth-child(2){
+              width:400px;
+            }
+          }
+        }
+        .button-box{
+          display: flex;
+          margin-top:20px;
+          p{
+            font-size:16px;
+            line-height:40px;
+          }
+          p:nth-child(1){
+            color:#333;
+            width:95px;
+            text-align: right;
+            margin-right:16px;
+          }
+          p:nth-child(2){
+            width:70px;
+            height:30px;
+            line-height:30px;
+            margin-top:5px;
+            margin-right:12px;
+            font-size:14px;
+          }
+          p:nth-child(3){
+            width:70px;
+            height:30px;
+            line-height:30px;
+            margin-top:5px;
+            font-size:14px;
+          }
+        }
+        .table-box{
+          margin-left:16px;
+          margin-top:20px;
+          border:1px solid #e0e0e0;
+          border-bottom:none;
+          .table-title-p{
+            background-color: #F5F5F5;
+            line-height:50px;
+            padding-left:30px;
+            border-bottom:1px solid #e0e0e0;
+          }
+          .table-min{
+            display: flex;
+            overflow: hidden;
+            border-bottom:1px solid #e0e0e0;
+            .left-box{
+              width:120px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              background-color: #F5F5F5;
+              border-right:1px solid #e0e0e0;
+              p:nth-child(1){
+                flex:1;
+              }
+              p:nth-child(2){
+                text-align: center;
+                height:14px;
+                line-height:14px;
+              }
+              p:nth-child(3){
+                flex:1;
+              }
+            }
+            .right-box{
+              flex:1;
+              overflow: hidden;
+              min-height:60px;
+              font-size:14px;
+              padding:0 16px;
+              line-height:20px;
+            }
+            .text-box{
+              display: flex;
+              flex-direction: column;
+              p:nth-child(1){
+                flex:1;
+                min-height:12px;
+              }
+              p:nth-child(2){
+
+              }
+              p:nth-child(3){
+                flex:1;
+                min-height:12px;
+              }
+            }
+            .text-two-box{
+              p:nth-child(1){
+                flex:1;
+                min-height:12px;
+              }
+              p:nth-child(2){
+
+              }
+              p:nth-child(3){
+                flex:1;
+                min-height:12px;
+              }
+              p:nth-child(4){
+                span{
+                  color:#FF0000;
+                }
+              }
+              p:nth-child(5){
+                flex:1;
+                min-height:12px;
+              }
+            }
+            .img-box{
+              padding:20px;
+              img{
+                cursor: pointer;
+                height:80px;
+                width:80px;
+                margin-right:10px;
+                border-radius:4px;
+              }
+            }
+          }
+        }
+      }
+      .info-dialog-content-img{
+        img{
+          width:1040px;
+        }
+        .left-button-p{
+          cursor: pointer;
+          text-align: center;
+          line-height:30px;
+          color:#fff;
+          font-size:16px;
+          top:440px;
+          left:20px;
+          position: absolute;
+          width:30px;
+          height:30px;
+          background-color: #0045AF;
+          border-radius:50%;
+        }
+        .right-button-p{
+          cursor: pointer;
+          text-align: center;
+          line-height:30px;
+          color:#fff;
+          font-size:16px;
+          position: absolute;
+          top:440px;
+          right:20px;
+          width:30px;
+          height:30px;
+          background-color: #0045AF;
+          border-radius:50%;
+        }
+        .left-button-p:hover{
+          background-color: #0183fa;
+        }
+        .right-button-p:hover{
+          background-color: #0183fa;
+        }
+        .bottom-num-text{
+          text-align: center;
+          line-height: 30px;
+          font-size:16px;
+          position: absolute;
+          bottom:0;
+          width:1026px;
+        }
+        .out-button{
+          width:60px;
+          line-height:30px;
+          color:#999;
+          background-color: #dedede;
+          border-radius:4px;
+          text-align: center;
+          cursor: pointer;
+          position: absolute;
+          top:17px;
+          right:17px;
+          z-index:99999;
+        }
+      }
+      .info-dialog-content-document{
+        display: flex;
+        flex:1;
+        height:700px;
+        .iframe{
+          flex:1;
+          height:700px;
+        }
+      }
+    }
+  }
+</style>

src/views/safetyCheck/laboratorySelfTest/selfInspectionManagement/infoPage.vue

@@ -166,15 +166,18 @@
       </el-form>
     </div>
     <lookImgDialog ref="lookImgDialog"></lookImgDialog>
+    <infoDialog ref="lookImgDialog"></infoDialog>
   </div>
 </template>
 
 <script>
   import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
+  import infoDialog from './infoDialog.vue'
   export default {
     name: 'infoPage',
     components: {
-      lookImgDialog
+      lookImgDialog,
+      infoDialog
     },
     data(){
       return{

src/views/safetyCheck/schoolInspection/inspectionPlan/addDialog.vue

@@ -161,7 +161,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="deptResetQueryLeft" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="deptResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table  border :data="deptTableListLeft" @selection-change="deptChange" :row-key="getRowKeys">
@@ -218,7 +218,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="deptResetQueryRight" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="deptResetQueryRight" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table  border :data="deptTableListRight">
@@ -287,7 +287,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="subResetQueryLeft" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="subResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table  border :data="subTableListLeft" @selection-change="subChangeLeft" :row-key="getRowKeys">
@@ -357,7 +357,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="subResetQueryRight" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="subResetQueryRight" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table border :data="subTableListRight" @selection-change="subChangeRight" :row-key="getRowKeys">
@@ -404,7 +404,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="userResetQueryLeft" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="userResetQueryLeft" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table  border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
@@ -453,7 +453,7 @@
               </el-input>
             </el-form-item>
             <el-form-item style="margin-right:0;">
-              <p class="reset-button-one" @click="userResetQueryRight" style="width:60px;">重置</p>
+              <p class="inquire-button-one" @click="userResetQueryRight" style="width:60px;margin-right:0;">重置</p>
             </el-form-item>
           </el-form>
           <el-table  border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">