FE-V2-PC/src/views/emergencyManagement/plan/detailPlan.vue

<!--风险预案编辑-->
<template>
  <div class="addPlan">
    <el-form :model="form" ref="form" :inline="true" label-width="100px" class="form-box">
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      <div class="plan-info-box">
        <p class="plan-title-p color_one">基本信息</p>
        <div class="plan_n">
          <div>
            <p style="width:100px;">预案名称：</p>
            <p>{{form.name}}</p>
          </div>
          <div>
            <p>同步执行疏散：</p>
            <p>{{form.evacuation==0?'否':'是'}}</p>
          </div>
        </div>
      </div>

      <div class="plan-info-box">
        <p class="plan-title-p color_one">启动条件</p>
        <div class="plan_n2" v-for="item in form.riskPlanSensorList">
          <li>
            <i>传感器类型：</i>
            <i>{{item.FuncName}}传感器</i>
          </li>
          <li>
            <i>异常值区间：</i>
            <i>{{item.minMonitor}}-{{item.maxMonitor}}</i>
          </li>
        </div>
      </div>

      <div class="plan-info-box">
        <p class="plan-title-p color_one">执行动作</p>
        <div class="plan_n2" v-for="item in form.riskPlanHardwareList">
          <li>
            <i>硬件：</i>
            <i>{{item.hardwareTypeName}}</i>
          </li>
          <li>
            <i>执行操作:  </i>
            <i>{{item.operate==0?'关闭':'打开'}}</i>
          </li>
          <li>
            <i>结束操作:   </i>
            <i>{{item.overAct==0?'关闭':'打开'}}</i>
          </li>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {getPlan} from "@/api/laboratory/plan";
import {listDepartments} from "@/api/system/dept";
export default {
  props:{
    pageData2:{},
  },
  name: "detailPlan",
  data() {
    return {
      form:{},
    };
  },
  created() {
    console.log(this.pageData2.id)
    this.getPlan()
  },
  methods: {

    //切换页面
    backPage(){
      this.$parent.handleClick('','','back');
    },
    /** 查询详情 */
    getPlan() {
      let _this=this;
      getPlan(_this.pageData2.id).then(response => {
         this.form = response.data;

      });
    },

  },
  beforeMount() {

  },
};
</script>

<style scoped lang="scss">
  .addPlan{
    position: relative;
    margin-top:-11px;
    p{
      margin:0;
    }

    .reset-button-one{
      position: absolute;
      top:20px;
      right:20px;
    }
    .plan-info-box{
      width: 100%;
      height: auto;
      background: #FFFFFF;
      /*box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.1);*/
      border-radius: 20px;
      margin-bottom: 20px;
      /*padding: 30px 20px;*/
      box-sizing: border-box;
      .plan-title-p{
        height:80px;
        line-height:80px;
        font-size:18px;
        padding-left:20px;
        border-bottom:1px solid #E0E0E0;
      }
      .plan_n{
        width: 100%;
        display: flex;
        padding-left: 76px;
        box-sizing: border-box;
        margin-top:40px;
        div{
          list-style:none;
          width:370px;
          margin-right: 16px;
          display: flex;
          /*margin-right: 216px;*/
          p{
            font-style:normal;
          }
          p:nth-of-type(1){
            width:120px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            line-height: 18px;
            margin-right: 16px;
          }
          p:nth-of-type(2){
            flex:1;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #999999;
            line-height: 18px;
          }
        }
      }
      .plan_n2{
        width: 100%;
        height: 42px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 76px;
        box-sizing: border-box;
        >li{
          list-style:none;
          height: 42px;
          width:370px;
          margin-right: 16px;
          /*margin-right: 216px;*/
          >i{
            font-style:normal;
          }
          >i:nth-of-type(1){
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            line-height: 70px;
            margin-right: 16px;
          }
          >i:nth-of-type(2){
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #999999;
            line-height: 70px;
          }
        }
      }
    }

  }
</style>