index.vue

<template>
  <div class="oneself">
    <div class="content">
      <div class="content-title">温馨提示：系统如无异常，请勿操作此界面</div>
      <el-form ref="form1" :model="formData1" :rules="rules1" label-width="180px" class="content-form">
        <el-form-item label="服务器IP地址：" prop="ip">
          <el-input v-model="formData1.ip" style="width: 300px" placeholder="请输入服务器IP地址" />
        </el-form-item>
        <el-form-item label="基站名称：" prop="baseStation">
          <el-select v-model="formData1.baseStation" style="width: 300px" filterable placeholder="请选择基站">
            <el-option
              v-for="item in baseStationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="FSU：" prop="fsu">
          <el-select v-model="formData1.fsu" style="width: 300px" filterable placeholder="请选择FSU">
            <el-option
              v-for="item in fsuList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型配置：" prop="type">
          <el-select v-model="formData1.type" style="width: 300px" filterable placeholder="请选择设备类型配置">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form ref="form2" :model="formData2" :rules="rules2" label-width="180px" class="content-form">
        <el-form-item label="设备配置下发：" prop="type">
          <div class="content-form-right">
            <el-radio-group v-model="formData2.type">
              <el-row style="margin-bottom: 10px">
                <el-radio :label="1">复位重启FSU</el-radio>
                <el-radio :label="2">常规测试>>次数
                  <el-input-number v-model="formData2.routineNum"  :min="1" />
                </el-radio>
              </el-row>
              <el-row>
                <el-radio :label="3">请求实时连接</el-radio>
                <el-radio :label="4">自检测试>>次数
                  <el-input-number v-model="formData2.selfNum"  :min="1" />
                </el-radio>
              </el-row>
            </el-radio-group>
            <div class="btn">
              <el-button style="width: 120px" type="primary" :loading="loading3" @click="sendContent">发送查询内容</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-form ref="form3" :model="formData3" :rules="rules3" label-width="180px" class="content-form">
        <el-form-item label="设备运行参数配置下发：" prop="issue">
          <div class="content-form-right">
            <el-select v-model="formData3.issue" style="width: 300px" filterable placeholder="请选择配置下发类型">
              <el-option
                v-for="item in issueList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="btn">
              <el-button style="width: 120px" type="primary" :loading="loading3" @click="sendData">发送数据</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="tips">当前未向服务器下发指令！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStationList: [],
      fsuList: [],
      typeList: [],
      issueList: [],
      formData1: {
        ip: '',
        baseStation: '',
        fsu: '',
        type: ''
      },
      rules1: {
        ip: [
          { required: true, message: '请输入服务器IP地址', trigger: 'blur' }
        ],
        baseStation: [
          { required: true, message: '请选择基站名称', trigger: 'blur' }
        ],
        fsu: [
          { required: true, message: '请选择FSU', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择设备配置类型', trigger: 'blur' }
        ]

      },
      formData2: {
        type: 1,
        routineNum: 0,
        selfNum: 0
      },
      rules2: {
        type: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      loading3: false,
      formData3: {
        issue: ''
      },
      rules3: {
        issue: [
          { required: true, message: '请选择配置下发类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    sendContent() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          console.log(this.formData2)
        }
      })
    },
    sendData() {
      this.$refs.form3.validate((valid) => {
        if (valid) {
          console.log(this.formData3)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.oneself {
  margin: 10px;
  .content {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    .content-title {
      width: 100%;
      height: 60px;
      background: rgba(226, 235, 255, 0.39);
      line-height: 60px;
      font-size: 18px;
      color: #333;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid #e3e3e3;
      margin-bottom: 20px;
    }
    .content-form {
       margin: 0 auto;
      // padding: 20px 0;
      width: 800px;
      .content-form-right {
        border: 1px solid #DCDFE6;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        .btn {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .tips {
    text-align: center;
    padding-top: 50px;
    color: #1E64F6;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>