|
|
@@ -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>
|
dedsudiyu