FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/alarmRecord/infoPage.vue

<template>
  <div class="infoPage">
    <div class="title-box">
      <p>{{propsInfoData.operate}}</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="scrollbar-box">
      <div class="text-box-one">
        <div>
          <p>报警时间：</p>
          <p>{{propsInfoData.alarmTime}}</p>
        </div>
        <div>
          <p>报警内容：</p>
          <p>{{propsInfoData.alarmContent}}</p>
        </div>
      </div>
      <div class="text-box-two">
        <div>
          <p>学院：</p>
          <p>{{propsInfoData.alarmDeptName}}</p>
        </div>
        <div>
          <p>实验室：</p>
          <p>{{propsInfoData.subName}}</p>
        </div>
        <div>
          <p>实验室负责人：</p>
          <p>{{propsInfoData.adminNames}}</p>
        </div>
        <div>
          <p>安全责任人：</p>
          <p>{{propsInfoData.safeUserNames}}</p>
        </div>
        <div>
          <p>报警方式：</p>
          <p>{{propsInfoData.alarmMode}}</p>
        </div>
        <div>
          <p>处理状态：</p>
          <p>{{propsInfoData.operate}}</p>
        </div>
      </div>
      <p class="bottom-button" v-if="propsInfoData.handlingStatus == 1 && propsInfoData.alarmModeStatus == 2" @click="handle">处理</p>
    </div>
  </div>
</template>

<script>
  import { handle } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "infoPage",
    props:{
      propsInfoData:{},
    },
    data() {
      return {

      }
    },
    created() {

    },
    mounted(){

    },
    methods:{
      //处理报警记录
      handle(){
        let self = this;
        this.$confirm('确定要处理吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          handle({id:self.propsInfoData.id}).then(response => {
            self.msgSuccess(response.msg);
            self.$set(self.propsInfoData,'handlingStatus',2);
            self.$set(self.propsInfoData,'operate','已处理');
          })
        }).then(() => {
        }).catch(() => {});
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .text-box-one{
      border-bottom:1px dashed #dedede;
      margin:0 80px;
      padding:20px 0;
      div{
        display: flex;
        p{
          line-height:20px;
          font-size:16px;
          color:#333;
          margin:20px 0;
          font-weight:500;
        }
        p:nth-child(1){
          width:120px;
          text-align: right;
        }
        p:nth-child(2){
          flex:1;
        }
      }
    }
    .text-box-two{
      margin:0 80px;
      padding:20px 0;
      div{
        display: flex;
        p{
          line-height:20px;
          font-size:16px;
          color:#333;
          margin:20px 0;
          font-weight:500;
        }
        p:nth-child(1){
          width:120px;
          text-align: right;
        }
        p:nth-child(2){
          flex:1;
        }
      }
    }
    .bottom-button{
      width: 100px;
      line-height: 40px;
      color:#fff;
      text-align: center;
      background: #0045AF;
      border-radius: 4px;
      margin:20px auto 40px;
      cursor: pointer;
    }
  }
</style>