调整布局

hanbaoshan

2020-08-08 f77dad86de37e5ab0df6a6ce43f21e1ab408d389

 src/pages/gb28181/index/App.vue

@@ -1,93 +1,111 @@
<template>
  <div class="s-basic-setting">
    <!-- GB28181设置 -->
    <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181">
      <!-- <el-form-item label="国际服务器IP" prop="ServerIp">
            <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
      </el-form-item>-->
    <el-menu
      :default-openeds="openeds"
      background-color="#fff"
      text-color="#303133"
      active-text-color="#409EFF"
      style="height: 100%;"
      class="menu-css"
      @open="menuOpen"
      @close="menuClose"
    >
      <el-submenu index="0">
        <template slot="title">
          <b class="tree-font">国际ID</b>
        </template>
        <el-menu-item-group class="item-group">
          <!-- GB28181设置 -->
          <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181">
            <!-- <el-form-item label="国际服务器IP" prop="ServerIp">
                  <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
            </el-form-item>-->

      <div style="text-align: left;margin-bottom: 22px;">
        <el-radio-group v-model="gb28181.idType">
          <el-radio :label="0">输入已有ID</el-radio>
          <el-radio :label="1">生成新的ID</el-radio>
        </el-radio-group>
      </div>
            <div style="text-align: left;margin-bottom: 22px;">
              <el-radio-group v-model="gb28181.idType">
                <el-radio :label="0">输入已有ID</el-radio>
                <el-radio :label="1">生成新的ID</el-radio>
              </el-radio-group>
            </div>

      <el-form-item label="所在地">
        <el-select
          v-model="locationCity.province"
          @change="changeProvince"
          size="small"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in locationCity.provinceOptions"
            :key="item.id"
            :label="item.name"
            size="small"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          class="ml10 mr10"
          v-model="locationCity.city"
          :disabled="!locationCity.province"
          @change="changeCity"
          size="small"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in locationCity.cityOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          v-model="locationCity.county"
          :disabled="!locationCity.city"
          size="small"
          placeholder="请选择区县"
        >
          <el-option
            v-for="item in locationCity.countyOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          type="text"
          style="position: absolute"
          v-show="gb28181.idType === 1"
          @click="newGBID"
        >生成ID</el-button>
      </el-form-item>
            <el-form-item label="所在地">
              <el-select
                v-model="locationCity.province"
                @change="changeProvince"
                size="small"
                placeholder="请选择省份"
              >
                <el-option
                  v-for="item in locationCity.provinceOptions"
                  :key="item.id"
                  :label="item.name"
                  size="small"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                class="ml10 mr10"
                v-model="locationCity.city"
                :disabled="!locationCity.province"
                @change="changeCity"
                size="small"
                placeholder="请选择城市"
              >
                <el-option
                  v-for="item in locationCity.cityOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="locationCity.county"
                :disabled="!locationCity.city"
                size="small"
                placeholder="请选择区县"
              >
                <el-option
                  v-for="item in locationCity.countyOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button
                type="text"
                style="position: absolute"
                v-show="gb28181.idType === 1"
                @click="newGBID"
              >生成ID</el-button>
            </el-form-item>

      <!-- <el-form-item label="国际服务器端口" prop="GbServerPort">
            <el-input v-model.number="gb28181.ServerPort" placeholder="请输入" size="small"></el-input>
      </el-form-item>-->
            <!-- <el-form-item label="国际服务器端口" prop="GbServerPort">
                  <el-input v-model.number="gb28181.ServerPort" placeholder="请输入" size="small"></el-input>
            </el-form-item>-->

      <el-form-item label="国标ID">
        <el-input v-model="gb28181.PublicId" placeholder="请输入" size="small"></el-input>
      </el-form-item>
            <el-form-item label="国标ID">
              <el-input v-model="gb28181.PublicId" placeholder="请输入" size="small"></el-input>
            </el-form-item>

      <el-form-item label="国标端口" prop="ServerPort">
        <el-input v-model.number="gb28181.GbServerPort" placeholder="请输入" size="small"></el-input>
      </el-form-item>
            <el-form-item label="国标端口" prop="ServerPort">
              <el-input v-model.number="gb28181.GbServerPort" placeholder="请输入" size="small"></el-input>
            </el-form-item>

      <el-form-item label="开启鉴权">
        <el-switch v-model="gb28181.IsAuth"></el-switch>
      </el-form-item>
            <el-form-item label="开启鉴权">
              <el-switch v-model="gb28181.IsAuth"></el-switch>
            </el-form-item>

      <el-form-item label="鉴权密码" v-show="gb28181.IsAuth">
        <el-input v-model="gb28181.Password" placeholder="请输入" size="small"></el-input>
      </el-form-item>
            <el-form-item label="鉴权密码" v-show="gb28181.IsAuth">
              <el-input v-model="gb28181.Password" placeholder="请输入" size="small"></el-input>
            </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitGB28281" size="small">保存</el-button>
      </el-form-item>
    </el-form>
            <el-form-item >
              <el-button type="primary" @click="submitGB28281" size="small">保存</el-button>
            </el-form-item>
          </el-form>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

@@ -230,16 +248,20 @@
<style lang="scss">
.s-basic-setting {
  height: 100%;
  padding: 0 30px;
  padding: 30px;
  box-sizing: border-box;
  .el-form {
    margin-top: 30px;
    // margin-left: -80px;
    .el-form-item {
      text-align: left;
      &:last-of-type{
        width: 490px;
      }
      .el-button {
        float: right;
      }

      .el-select{
        margin-right:10px;
      }
      .el-form-item__content {
        text-align: left;
        input {
@@ -258,6 +280,7 @@
        text-align: left;
      }
    }
   
  }
  .alarmSetting {
    .el-input {