safetyEducationExamination/src/views/safetyEducationExaminationNew/workbench/UserInfoCard.vue

<!-- 用户信息卡片 -->
<template>
  <div class="user-info-card">
    <div class="top-title-box">
      <p>用户信息</p>
      <p><span class="el-icon-coin"></span><span> {{userInfo.totalPoints?userInfo.totalPoints:0}} </span>积分</p>
    </div>
    <div class="user-info-max-box">
      <!--用户信息-->
      <div class="left-max-box">
        <div class="left-min-box">
          <p>姓名</p>
          <p>{{userInfo.userName}}</p>
        </div>
        <div class="left-min-box">
          <p>学工号</p>
          <p>{{userInfo.account}}</p>
        </div>
        <div class="left-min-box">
          <p>类型</p>
          <p>{{userInfo.userType == 2?userInfo.educationName:(userInfo.userType == 1?'教职工':'系统用户')}}</p>
        </div>
        <div class="left-min-box">
          <p>所属单位</p>
          <p>{{userInfo.deptName}}</p>
        </div>
        <div class="left-sub-min-box" v-if="userInfo.userType == 2">
          <p class="name-p">实验室信息</p>
          <p class="text-p" v-if="userInfo.bound">{{userInfo.labName}}</p>
          <p class="text-p" v-if="!userInfo.bound&&userInfo.educationType == 1">暂无绑定实验室</p>
          <p class="text-p" v-if="!userInfo.bound&&userInfo.educationType == 2">{{userInfo.isFinishExam?'暂无绑定实验室':'请先完成入学考试'}}</p>
          <p class="button-p" v-if="(!userInfo.bound&&userInfo.educationType == 1)||(!userInfo.bound&&userInfo.educationType == 2&&userInfo.isFinishExam)" @click="shadeButton(4)">去绑定</p>
          <p class="sub-name-p" v-if="userInfo.bound">{{userInfo.bindStatus}}</p>
        </div>
      </div>
      <!--进度-->
      <div class="center-max-box">
        <div class="center-title-box scrollbar-x-box">
          <p>{{userInfo.gradeRange}}</p>
          <p :style="'color:'+userInfo.levelColor+';'" v-if="userInfo.levelName">{{userInfo.levelName}}</p>
          <p v-if="userInfo.typeName">{{userInfo.typeName}}</p>
        </div>
        <div class="center-data-box">
          <div class="progress-max-box" v-if="userInfo.totalStudyHours>0">
            <el-progress
              :stroke-width="12" :format="format"
              :percentage="userInfo.studyHourRate">
            </el-progress>
            <div class="progress-min-box">
              <p>当前学年学时完成进度</p>
              <p>{{userInfo.completedStudyHours}} / {{userInfo.totalStudyHours}} 学时</p>
            </div>
          </div>
          <div class="center-bottom-box">
            <div class="center-bottom-min-box">
              <p>{{userInfo.totalStudyHours>0?'学时完成度':'学时要求'}}</p>
              <p>{{userInfo.totalStudyHours>0?userInfo.studyHourRate+'%':'无'}}</p>
            </div>
            <div class="center-bottom-min-box">
              <p>目标考试</p>
              <p>{{userInfo.targetExamName?userInfo.targetExamName:'无'}}</p>
            </div>
          </div>
        </div>
      </div>
      <!--任务-->
      <div class="right-max-box">
        <p class="right-title-p">当前学年任务状态</p>
        <div class="right-big-box">
          <p>考试状态</p>
          <p :class="!userInfo.examPassStatus||userInfo.examPassStatus==1?'':(userInfo.examPassStatus==2?'color-a':(userInfo.examPassStatus==3||userInfo.examPassStatus==4?'color-b':''))">
            {{!userInfo.examPassStatus?'暂无':(userInfo.examPassStatus==1?'考试中':((userInfo.examPassStatus==2?'已通过':(userInfo.examPassStatus==3?'未通过':(userInfo.examPassStatus==4?'缺考':'')))))}}
          </p>
        </div>
        <div class="right-big-box">
          <p>证书状态</p>
          <p :class="!userInfo.certificateStatus?'':(userInfo.certificateStatus==1?'color-a':(userInfo.certificateStatus==2||userInfo.certificateStatus==3||userInfo.certificateStatus==4?'color-b':''))">
            {{!userInfo.certificateStatus?'暂无':(userInfo.certificateStatus==1?'已通过':(userInfo.certificateStatus==2?'失效':(userInfo.certificateStatus==3?'已撤销':(userInfo.certificateStatus==4?'未签发':''))))}}
          </p>
        </div>
        <div class="right-big-box" v-if="userInfo.approvalStatus!=3&&userInfo.userType == 2">
          <p>审批状态</p>
          <p :class="userInfo.approvalStatus==0?'':(userInfo.approvalStatus==1?'color-a':(userInfo.approvalStatus==2?'color-b':''))">
            {{userInfo.bound&&userInfo.approvalStatus==0?'待审批':(userInfo.approvalStatus==1?'已通过':(userInfo.approvalStatus==2?'未通过':'待绑定'))}}
          </p>
        </div>
      </div>
    </div>
    <!--绑定实验室弹窗-->
    <div class="shade-max-big-box" v-if="shadeType == 1 || shadeType == 2">
      <div class="shade-big-box" v-if="shadeType == 1">
        <div class="shade-title-box">
          <p>绑定实验室</p>
          <p class="el-icon-close" v-if="shadeFormData.offType" @click="shadeButton(6)"></p>
        </div>
        <div class="shade-content-box">
          <el-form :model="shadeFormData" class="form-box" ref="shadeForm"
                   :inline="true" :rules="rules" style="width:100%;">
            <div v-if="!shadeFormData.isEnter">
              <el-form-item label="" prop="subId" label-width="0">
                <el-select
                  style="width:760px;"
                  v-model="shadeFormData.subId"
                  filterable
                  remote
                  reserve-keyword
                  @change="subChange"
                  placeholder="输入实验室名称、房间或楼栋关键词进行搜索"
                  :remote-method="subSelectList">
                  <el-option
                    v-for="item in subOptions"
                    :key="item.subId"
                    :label="item.deptName+' - '+item.subName+(item.roomNum?'（'+item.roomNum+'）':'')+'- '+item.buildName+item.floorName"
                    :value="item.subId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <p v-if="!shadeFormData.isEnter" class="shade-text-p">此处请选择需要后续进入的科研实验室的名称，输入实验室名称、房间号或楼栋关键词，再从检索结果中选择目标实验室。</p>
            <!--实验室信息-->
            <div class="shade-sub-max-box" v-if="shadeFormData.subId&&subData.subName&&!shadeFormData.isEnter">
              <div class="shade-sub-big-box">
                <div class="shade-sub-box">
                  <p>实验室名称</p>
                  <p>{{subData.subName}}{{subData.roomNum?'('+subData.roomNum+')':''}}</p>
                </div>
                <div class="shade-sub-box-1">
                  <p>实验室类型</p>
                  <p>{{subData.moldName}}</p>
                </div>
              </div>
              <div class="shade-sub-big-box">
                <div class="shade-sub-box">
                  <p>负责人</p>
                  <p>{{subData.adminName}}</p>
                </div>
                <div class="shade-sub-box-1">
                  <p>实验室分级</p>
                  <p :style="'color:'+subData.classLevelColor+';'">{{subData.classLevelName}}</p>
                </div>
              </div>
              <div class="shade-sub-big-box">
                <div class="shade-sub-box">
                  <p>所属学院</p>
                  <p>{{subData.deptName}}</p>
                </div>
                <div class="shade-sub-box-1">
                  <p>实验室分类</p>
                  <p>{{subData.classTypeNames}}</p>
                </div>
              </div>
              <div class="shade-sub-big-box">
                <div class="shade-sub-box">
                  <p>所在位置</p>
                  <p>{{subData.buildName}}{{subData.floorName}}</p>
                </div>
              </div>
            </div>
            <!--本科生选项-->
            <div style="margin-top:20px;" v-if="userInfo.educationType == 2">
              <el-form-item label="" prop="reason" label-width="0">
                <el-input
                  type="textarea"
                  style="width:760px;"
                  :autosize="{ minRows: 2, maxRows: 2}"
                  placeholder="请填写进入实验室原因(必填)"
                  maxLength="100"
                  resize="none"
                  v-model="shadeFormData.reason">
                </el-input>
              </el-form-item>
              <p class="shade-text-p">毕业论文或毕业设计，科创等相关需要在具体的实验室开展业务的情况可申请绑定实验室，绑定完毕后需要完成对应的分级考试。</p>
            </div>
            <!--研究生选项-->
            <div class="checkbox-box">
              <el-form-item label="" label-width="0">
                <el-checkbox v-model="shadeFormData.isEnter">无需进入实验室</el-checkbox>
                <p class="checkbox-text-p">人文、体育等相关学院无需进入实验室的新研究生可选择此项，选择后学时要求为4小时，需通过应知应会考试。</p>
              </el-form-item>
            </div>
            <div class="shade-check-box">
              <el-form-item label="" prop="checkType" label-width="0">
                <el-checkbox
                  @click.native.prevent="shadeButton(2)"
                  v-model="shadeFormData.checkType">我已阅读并同意</el-checkbox>
                <span style="color:#0183fa;font-size:14px;cursor: pointer"  @click="shadeButton(2)">《新生绑定实验室须知及责任说明》</span>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="shade-button-box">
          <p></p>
          <p class="out-button" v-if="shadeFormData.offType" @click="shadeButton(6)">取消</p>
          <p class="submit-button" @click="shadeButton(1)">确认绑定</p>
        </div>
      </div>
      <div class="shade-big-box" v-if="shadeType == 2">
        <div class="shade-title-box">
          <p>新生绑定实验室须知及责任说明</p>
        </div>
        <div class="shade-content-box-2 scrollbar-box">
          <p>1. 保证进入的实验室为导师实际使用实验室或属于当前实验室所属课题组。</p>
          <p>2. 研究生期间涉及到操作实验室内重要危险源，必须绑定实验室。</p>
          <p></p>
        </div>
        <div class="shade-button-box-2">
          <p></p>
          <p @click="shadeButton(33)">取消</p>
          <p @click="shadeButton(3)">我已知晓</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    examElLabEduRelationBindStatus,examElLabEduRelationLabLists,examElLabEduRelationBind,
    examElLabEduRelationLabDetail,
  } from "@/api/safetyEducationExaminationNew/index";
export default {
  name: 'UserInfoCard',
  data() {
    const validateData5 = (rule, value, callback) => {
      console.log('value',value)
      if (!value) {
        callback(new Error('请阅读并确认勾选《新生绑定实验室须知及责任说明》'))
      } else {
        callback()
      }
    }
    return {
      textName:'测试测试测试,假数据记得改,记得问高部长要',
      userInfo: {
        userType:'',
        userName:'',
        account:'',
        educationName:'',
        deptName:'',
        labName:'',
        bound:'',
        approvalStatus:'',
        certificateStatus:'',
        examPassStatus:'',
        gradeRange:'',
        typeName:'',
        completedStudyHours:'',
        totalStudyHours:'',
        studyHourRate:'',
        targetExamName:'',
      },
      shadeFormData:{
        subId:null,
        reason:'',
        isEnter:false,
        checkType:false,
      },
      rules:{
        subId: [
          { required: true, message: "请选择实验室", trigger: "blur" },
          { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
        ],
        reason: [
          { required: true, message: "请填写进入实验室原因", trigger: "blur" },
          { required: true, message: "请填写进入实验室原因", validator: this.spaceJudgment, trigger: "blur" }
        ],
        checkType: [
          { required: true, message: "请阅读并确认勾选《新生绑定实验室须知及责任说明》", trigger: "blur" },
          { validator: validateData5, trigger: 'blur' }
        ],
      },
      subData:{},
      subOptions:[],
      //弹层
      shadeType:null,
      textDetail:'',
    }
  },
  created() {

  },
  mounted() {
    this.examElLabEduRelationBindStatus();
  },
  methods: {
    //进度条去除描述
    format(percentage) {
      return '';
    },
    //用户信息卡
    examElLabEduRelationBindStatus(){
      examElLabEduRelationBindStatus({}).then(response => {
        this.$set(this, 'userInfo', response.data)
        // if(!response.data.bound&&response.data.educationType == 1){
        //   this.shadeButton(5);
        // }
        if(response.data.isPopup){
          this.shadeButton(5);
        }
      })
    },
    //实验室懒加载
    subSelectList(query) {
      if (query !== '' && query.length>1) {
        examElLabEduRelationLabLists({searchValue:query}).then(response => {
          this.subOptions = response.data;
        });
      } else {
        this.subOptions = [];
      }
    },
    //关闭弹层
    shadeButton(type){
      let self = this;
      if(type == 1){
        //提交
        this.$refs["shadeForm"].validate(valid => {
          if (valid) {
            this.$confirm('确认提交?', "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              self.examElLabEduRelationBind();
            }).catch(() => {});
          }
        })
      }else if(type == 2){
        //查看通知
        this.$set(this,'shadeType',2);
      }else if(type == 3 || type == 33){
        if(type == 3){
          //关闭通知
          this.$set(this.shadeFormData,'checkType',true);
          this.$set(this,'shadeType',1);
        }else if(type == 33){
          //关闭通知
          this.$set(this.shadeFormData,'checkType',false);
          this.$set(this,'shadeType',1);
        }
      }else if(type == 4||type == 5){
        //开启
        this.$set(this,'shadeFormData',{
          subId:null,
          reason:'',
          isEnter:false,
          checkType:false,
          offType:type == 4?true:false,
        });
        this.$set(this,'shadeType',1);
      }else if(type == 6){
        //关闭
        this.$set(this,'shadeType',null);
      }
    },
    //选中实验室
    subChange(val){
      const selectedItem = this.subOptions.find(option => option.subId === val);
      this.$set(this,'subData',selectedItem);
    },
    examElLabEduRelationBind(){
      let obj = {
        subId:this.shadeFormData.subId?this.shadeFormData.subId:'',
        reason:this.shadeFormData.reason?this.shadeFormData.reason:'',
        isEnter:this.shadeFormData.isEnter?'0':'1'
      };
      examElLabEduRelationBind(obj).then(response => {
        this.msgSuccess(response.message);
        this.$set(this,'shadeType',null);
        this.examElLabEduRelationBindStatus();
      });
    },
  },
}
</script>

<style scoped lang="scss">
.user-info-card {
  background: #fff;
  /*border-radius: 6px;*/
  padding: 16px 20px;
  margin-bottom: 12px;
  /*box-shadow: 0 1px 4px rgba(0,0,0,0.06);*/
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8edf5;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
  .top-title-box{
    display: flex;
    p{
      flex:1;
      line-height:20px;
    }
    p:nth-child(1){
      font-size:16px;
      font-weight:700;
    }
    p:nth-child(2){
      text-align: right;
      font-weight:700;
      color:#0183fa;
      margin-right: 10px;
      font-size:16px;
      span{
        font-size:18px;
      }
    }
  }
  .user-info-max-box{
    display: flex;
    margin-top:20px;
    .left-max-box{
      width:560px;
      height:260px;
      /*border-radius:6px;*/
      /*border:1px solid #dedede;*/
      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
      padding:20px 20px 0 20px;
      background: linear-gradient(180deg, #fff, #f7faff);
      border: 1px solid #eaf0f8;
      border-radius: 14px;
      .left-min-box:nth-child(odd){
        margin-right:20px;
      }
      .left-min-box{
        display: inline-block;
        overflow:hidden;
        width:248px;
        margin-bottom:10px;
        p{
          line-height:25px;
        }
        p:nth-child(1){
          font-size:12px;
          color:#666;
        }
        p:nth-child(2){
          font-size:14px;
          font-weight:700;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        p:nth-child(3){
          font-size:16px;
          font-weight:700;
          color: #0183fa;
          cursor: pointer;
        }
      }
      .left-sub-min-box{
        display: inline-block;
        overflow:hidden;
        width:248px;
        margin-bottom:15px;
        p{
          line-height:30px;
        }
        .name-p{
          font-size:14px;
          color:#666;
        }
        .text-p{
          font-size:14px;
          font-weight:700;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .button-p{
          font-size:16px;
          font-weight:700;
          color: #0183fa;
          cursor: pointer;
        }
        .sub-name-p{
          font-size:16px;
          font-weight:700;
          color: #0183fa;
        }
      }
    }
    .center-max-box{
      width:430px;
      height:260px;
      /*border-radius:6px;*/
      /*border:1px solid #dedede;*/
      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
      padding:20px;
      margin:0 20px;
      background: linear-gradient(180deg, #fff, #f7faff);
      border: 1px solid #eaf0f8;
      border-radius: 14px;
      .center-title-box{
        height:50px;
        p{
          color: #3978e6;
          background: #eef4ff;
          display: inline-block;
          /*border:1px solid #999;*/
          /*color:#0183fa;*/
          /*border-radius:6px;*/
          border-radius:99px;
          padding: 0 15px;
          height:32px;
          line-height:32px;
          margin-right:10px;
          font-size:14px;
          font-weight:700;
        }
        .check-title-p{
          /*color:#fff;*/
          /*border:1px solid #0183fa;*/
          /*background-color: #0183fa;*/
        }
      }
      .center-data-box{
        .progress-max-box ::v-deep .el-progress-bar{
          padding:0;
        }
        .progress-max-box{
          height:70px;
          .progress-min-box{
            display: flex;
            p{
              font-size:14px;
              font-weight:700;
              line-height:50px;
            }
            p:nth-child(1){
              flex:1;
            }
          }
        }
        .center-bottom-box{
          display: flex;
          .center-bottom-min-box:nth-child(1){
            margin-right:10px;
          }
          .center-bottom-min-box{
            /*background-color: rgba(1,131,250,0.1);*/
            border: 1px solid #e5edf8;
            background-color: #f7faff;;
            padding:10px 20px;
            border-radius:6px;
            width:188px;
            p{
              line-height: 30px;
            }
            p:nth-child(1){
              font-size:14px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:20px;
              color:#60708a;
            }
          }
        }
      }
    }
    .right-max-box{
      flex:1;
      height:260px;
      /*border-radius:6px;*/
      /*border:1px solid #dedede;*/
      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
      padding:20px;
      background: linear-gradient(180deg, #fff, #f7faff);
      border: 1px solid #eaf0f8;
      border-radius: 14px;
      .right-title-p{
        font-size:14px;
        font-weight:700;
        line-height:30px;
        margin-bottom:10px;
      }
      .right-big-box{
        border-radius: 10px;
        background: #f7f9fd;
        border: 1px solid #e8eef9;
        /*background-color: #E9E9E9;*/
        /*border-radius:6px;*/
        margin-bottom:10px;
        display: flex;
        height: 40px;
        padding:0 20px;
        p:nth-child(1){
          flex:1;
          line-height:40px;
          font-size:14px;
        }
        p:nth-child(2){
          width:70px;
          height:24px;
          line-height:24px;
          margin:7px 0 0 0;
          text-align: center;
          font-size:14px;
          border-radius:15px;
          background-color: #EBF0F5;
        }
        .color-a{
          background-color: #E6F5F0 !important;;
          color:#4D9775 !important;
        }
        .color-b{
          background-color: #EBCACE !important;;
          color:#E15263 !important;;
        }
      }
    }
    .min-height-box{
      height:170px !important;
    }
  }
  .shade-max-big-box{
    z-index:100;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.4);
    display: flex;             /* 开启 Flex 布局 */
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中 */
    .shade-big-box{
      width:800px;
      min-height:400px;
      border-radius:6px;
      background-color: #fff;
      position: relative;
      .shade-title-box{
        display: flex;
        p{
          line-height: 60px;
        }
        p:nth-child(1){
          flex:1;
          padding:0 20px;
        }
        p:nth-child(2){
          font-size:24px;
          color:#666;
          padding:0 20px;
          cursor: pointer;
        }
        p:nth-child(2):hover{
          color: red;
        }
      }
      .shade-content-box{
        padding:20px;
        .shade-text-p{
          color:#9BA7BA;
          font-size:14px;
          line-height:20px;
        }
        .checkbox-box{
          margin-top:20px;
          padding:10px 15px;
          border-radius:6px;
          background-color:#F8F9FC ;
          .checkbox-text-p{
            color:#9BA7BA;
          }
        }
        .shade-check-box{
          margin-top:15px;
        }
        .shade-sub-max-box{
          margin:20px 0 0;
          .shade-sub-big-box:nth-child(1){
            border-top:1px solid #EDEFF5;
          }
          .shade-sub-big-box{
            display: flex;
            border-bottom:1px solid #EDEFF5;
            border-right:1px solid #EDEFF5;
          }
          .shade-sub-box-1{
            flex:2;
            display: flex;
            p{
              line-height:40px;
              font-size:14px;
            }
            p:nth-child(1){
              background-color: #FAFAFA;
              width:110px;
              padding:0 15px;
              border-left:1px solid #EDEFF5;
              border-right:1px solid #EDEFF5;
            }
            p:nth-child(2){
              flex:1;
              padding:0 15px;
              background-color: #fff;
              /*单行省略号*/
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
          .shade-sub-box{
            flex:3;
            display: flex;
            p{
              line-height:40px;
              font-size:14px;
            }
            p:nth-child(1){
              background-color: #FAFAFA;
              width:110px;
              padding:0 15px;
              border-left:1px solid #EDEFF5;
              border-right:1px solid #EDEFF5;
            }
            p:nth-child(2){
              flex:1;
              padding:0 15px;
              background-color: #fff;
              /*单行省略号*/
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
        }
      }
      .shade-content-box-2{
        padding: 0 40px;
        margin: 20px 0;
        height: 200px;
        p{
          line-height:40px;
          font-size:15px;
        }
      }
      .shade-button-box{
        display: flex;
        padding:20px;
        p:nth-child(1){
          flex:1;
        }
        .out-button{
          width:70px;
          line-height:40px;
          border-radius:4px;
          text-align: center;
          border:1px solid #dedede;
          margin-right:20px;
          cursor: pointer;
        }
        .out-button:hover{
          border:1px solid #999;
          background-color: #999;
          color:#fff;
        }
        .submit-button{
          background-color: #A0CFFE;
          color:#fff;
          width:100px;
          line-height:40px;
          border-radius:4px;
          text-align: center;
          border:1px solid #A0CFFE;
          cursor: pointer;
        }
        .submit-button:hover{
          border:1px solid #0183fa;
          background-color: #0183fa;
        }
      }
      .shade-button-box-2{
        display: flex;
        padding:20px;
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:70px;
          line-height:40px;
          border-radius:4px;
          text-align: center;
          border:1px solid #dedede;
          margin-right:20px;
          cursor: pointer;
        }
        p:nth-child(2):hover{
          border:1px solid #999;
          background-color: #999;
          color:#fff;
        }
        p:nth-child(3){
          background-color: #A0CFFE;
          color:#fff;
          width:100px;
          line-height:40px;
          border-radius:4px;
          text-align: center;
          border:1px solid #A0CFFE;
          cursor: pointer;
        }
        p:nth-child(3):hover{
          border:1px solid #0183fa;
          background-color: #0183fa;
        }
      }

    }
  }
}
</style>