FE-V2-PC/src/views/comprehensive/message/warningNotice/algorithmForewarning.vue

<!--算法预警-->
<template>
  <div class="algorithmForewarning">
    <div class="title-box">
      <p>算法预警配置</p>
      <p></p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="form-max-box" ref="addForm" :model="addForm" :rules="rules" label-width="170px">
        <div class="form-top-box">
          <el-form-item class="form-item-box" label="穿戴抓拍周期" prop="num1">
            <el-input-number style="width:320px" v-model="addForm.num1" placeholder="请输入抓拍周期(小时)" :min="1" :max="3" label=""></el-input-number>
          </el-form-item>
          <el-form-item class="form-item-box" label="异常再识别数" prop="num2">
            <el-input-number style="width:320px" v-model="addForm.num2" placeholder="请输入异常再识别数" :min="5" :max="10" label=""></el-input-number>
          </el-form-item>
          <el-form-item class="form-item-box" label="异常再识别率" prop="num3">
            <el-input-number style="width:320px" v-model="addForm.num3" placeholder="请输入异常再识别率(%)" :min="70" :max="90" label=""></el-input-number>
          </el-form-item>
        </div>
        <p class="form-title-p">穿戴识别</p>
        <div class="check-max-box">
          <p class="check-title">系统通知</p>
          <div class="check-right-box check-right-box-A">
            <p>监测异常</p>
            <div>
              <el-select v-model="systemData.num" placeholder="请选择" style="width:50px;height:30px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <p>次</p>
            <p>监测到实验人员未正确穿戴实验服，{{systemData.num==1?'一':(systemData.num==2?'二':(systemData.num==3?'三':(systemData.num==4?'四':(systemData.num==5?'五':(systemData.num==6?'六':(systemData.num==7?'七':(systemData.num==8?'八':(systemData.num==9?'九':(systemData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
          </div>
        </div>
        <div class="check-max-box">
          <p class="check-title">短信通知</p>
          <div class="check-right-box check-right-box-A">
            <p>监测异常</p>
            <div>
              <el-select v-model="shortMessageData.num" placeholder="请选择" style="width:50px;height:30px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <p>次</p>
            <p>监测到实验人员未正确穿戴实验服，{{shortMessageData.num==1?'一':(shortMessageData.num==2?'二':(shortMessageData.num==3?'三':(shortMessageData.num==4?'四':(shortMessageData.num==5?'五':(shortMessageData.num==6?'六':(shortMessageData.num==7?'七':(shortMessageData.num==8?'八':(shortMessageData.num==9?'九':(shortMessageData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
          </div>
        </div>
        <div class="check-max-box">
          <p class="check-title">语音播报</p>
          <div class="check-right-box check-right-box-A">
            <p>监测异常</p>
            <div>
              <el-select v-model="voiceData.num" placeholder="请选择" style="width:50px;height:30px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <p>次</p>
            <p>监测到实验人员未正确穿戴实验服，{{voiceData.num==1?'一':(voiceData.num==2?'二':(voiceData.num==3?'三':(voiceData.num==4?'四':(voiceData.num==5?'五':(voiceData.num==6?'六':(voiceData.num==7?'七':(voiceData.num==8?'八':(voiceData.num==9?'九':(voiceData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
          </div>
        </div>
      </el-form>
    </div>
    <div class="bottom-button-max-box">
      <p></p>
      <p class="reset-button-one" @click="outButton">取消</p>
      <p class="inquire-button-one" @click="upDataButton">提交</p>
      <p></p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'algorithmForewarning',
    data(){
      return{
        options:[
          {value:"1",label:"1"},{value:"2",label:"2"},{value:"3",label:"3"},{value:"4",label:"4"},
          {value:"5",label:"5"},{value:"6",label:"6"},{value:"7",label:"7"},{value:"8",label:"8"},
          {value:"9",label:"9"},{value:"10",label:"10"}
        ],
        addForm:{
          num1:1,
          num2:10,
          num3:80,
        },
        systemData:{
          num:3
        },
        shortMessageData:{
          num:3
        },
        voiceData:{
          num:3
        },
        rules:{
          num1: [
            { required: true, message: "请输入穿戴抓拍周期", trigger: "blur" },
          ],
          num2: [
            { required: true, message: "请输入异常再识别数", trigger: "blur" },
          ],
          num3: [
            { required: true, message: "请输入异常再识别率", trigger: "blur" },
          ],
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //选择
      checkClick(type){
        if(type == 1){
          this.$set(this.systemData,'type',0);
        }else if (type == 2){
          this.$set(this.systemData,'type',1);
        }else if (type == 3){
          this.$set(this.shortMessageData,'type',0);
        }else if (type == 4){
          this.$set(this.shortMessageData,'type',1);
        }else if (type == 5){
          this.$set(this.voiceData,'type',0);
        }else if (type == 6){
          this.$set(this.voiceData,'type',1);
        }
      },
      //提交
      upDataButton(){
        this.$refs["addForm"].validate(valid => {
          if (valid) {

          }
        })
      },
      //返回事件
      outButton(){
        this.$parent.goPage(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .algorithmForewarning{
    font-weight: 500;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    ::v-deep .el-input-number__increase{
      line-height: 38px;
    }
    .title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        margin-left:20px;
        line-height: 80px;
        font-size:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        flex:1;
      }
      p:nth-child(3){
        margin:20px;
      }
    }
    .content-box{
      flex:1;
      .form-max-box{
        .form-top-box{
          display: flex;
          margin-top:40px;
          height:80px;
          .form-item-box{
            height:80px;
            margin-bottom:0;
          }
        }
        .form-title-p{
          line-height:50px;
          color:#0045AF;
          background-color: #F5F5F5;
          font-size:16px;
          padding-left:20px;
          margin-bottom:40px;
        }
        .check-max-box{
          margin-bottom:20px;
          display: flex;
          height:40px;
          line-height:40px;
          .check-title{
            margin-left:126px;
            width:80px;
            text-align: left;
            font-size:16px;
          }
          .check-right-box{
            cursor: pointer;
            display: flex;
            width:670px;
            ::v-deep .el-input__icon{
              line-height:30px;
            }
            ::v-deep .el-input__inner{
              height:30px;
              padding-right: 20px;
              padding-left: 10px;
            }
            ::v-deep .el-input__suffix{
              right:0;
              height:30px;
            }
          }
          .check-right-box-A{
            border:1px solid #0183FA;
            border-radius:4px;
            p:nth-child(1){
              width:80px;
              margin-left:10px;
            }
            div:nth-child(2){
              margin-top:-2px;
            }
            p:nth-child(3){
              margin:0 20px 0 14px;
            }
            p:nth-child(4){
              font-size:14px;
              color:#CCCCCC;
            }
          }
        }
      }
    }
    .bottom-button-max-box{
      display: flex;
      padding:20px 0;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:100px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:100px;
      }
      p:nth-child(4){
        flex:1;
      }
    }
  }
</style>