暂存

ZZJ

2021-11-19 ddb4dda6ed6069253afb8b1e05fe52b56c681f35

 src/pages/settings/components/LoraGateway.vue

@@ -4,142 +4,159 @@
      <div class="title form-item">网络设置</div>

      <el-form-item class="form-item">
              <div class="item-title">设备ID</div>
              <div class="inputContain">
                <el-input
                  v-model="loraForm.deviceId"
                  placeholder="请输入设备ID"
                  size="small"
                ></el-input>
              </div>
        <div class="item-title">设备ID</div>
        <div class="inputContain">
          <el-input
            v-model="loraForm.devId"
            placeholder="请输入设备ID"
            size="small"
          ></el-input>
        </div>
      </el-form-item>

      <el-form-item class="form-item">
              <div class="item-title">APPID</div>
              <div class="inputContain">
                <el-input
                  v-model="loraForm.appId"
                  placeholder="请输入APPID"
                  size="small"
                ></el-input>
              </div>
        <div class="item-title">APPID</div>
        <div class="inputContain">
          <el-input
            v-model="loraForm.appId"
            placeholder="请输入APPID"
            size="small"
          ></el-input>
        </div>
      </el-form-item>

      <el-form-item class="form-item">
              <div class="item-title">密码</div>
              <div class="inputContain">
                <el-input
                  v-model="loraForm.password"
                  placeholder="请输入密码"
                  size="small"
                  show-password
                  auto-complete="new-password"
                ></el-input>
              </div>
        <div class="item-title">密码</div>
        <div class="inputContain">
          <el-input
            v-model="loraForm.password"
            placeholder="请输入密码"
            size="small"
            show-password
            auto-complete="new-password"
          ></el-input>
        </div>
      </el-form-item>

      <div class="block">
        <el-form-item class="form-item channel-sele">
              <div class="item-title">频道</div>
              <el-select v-model="loraForm.channel" placeholder="请选择" size="small"
                :popper-append-to-body="false">
                  <el-option
                    v-for="item in channel_option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              <div class="channel">当前连接通道：<span class="channelCount">{{channelCount}}</span></div>           
          </el-form-item>

        <el-form-item class="form-item">
             <div class="item-title">工作频率</div>
             <el-radio-group v-model="loraForm.workFre">
             <el-radio :label="0">475.5MHz</el-radio>
             <el-radio :label="1">868.5MHz</el-radio>
             <el-radio :label="2">915.5MHz</el-radio>
        </el-radio-group>
          <div class="item-title">频道</div>
          <el-select
            v-model="loraForm.channel"
            placeholder="请选择"
            size="small"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in channel_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div class="channel">
            当前连接通道：<span class="channelCount">{{ channelCount }}</span>
          </div>
        </el-form-item>

      <el-form-item class="form-item">
              <div class="item-title">通信模式</div>
              <div class="inputContain">
                <el-input
                  v-model="loraForm.mode"
                  placeholder="全双工"
                  size="small"
                ></el-input>
              </div>
      </el-form-item>
        <el-form-item class="form-item">
          <div class="item-title">工作频率</div>
          <el-radio-group v-model="loraForm.hz">
            <el-radio :label="0">475.5MHz</el-radio>
            <el-radio :label="1">868.5MHz</el-radio>
            <el-radio :label="2">915.5MHz</el-radio>
          </el-radio-group>
        </el-form-item>

      <el-form-item class="form-item">
             <div class="item-title">工作频率</div>
             <el-radio-group v-model="loraForm.workFre2">
             <el-radio :label="0">是</el-radio>
             <el-radio :label="1">否</el-radio>
             <el-radio :label="2">空闲不工作模式</el-radio>
        </el-radio-group>
      </el-form-item>
        <el-form-item class="form-item">
          <div class="item-title">通信模式</div>
          <div class="inputContain">
            <el-input
              v-model="loraForm.netMode"
              placeholder="全双工"
              size="small"
            ></el-input>
          </div>
        </el-form-item>

      <el-form-item class="form-item">
              <div class="item-title">发射功率调整</div>
               <el-slider
                  v-model="loraForm.frequency"
                  id="loraForm_frequency"
                  :min="0"
                  :max="100"
                  :show-tooltip="false"
                ></el-slider>
            <div class="slider-info">节能</div>
      </el-form-item>
        <el-form-item class="form-item">
          <div class="item-title">工作模式</div>
          <el-radio-group v-model="loraForm.workMode">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
            <el-radio :label="2">空闲不工作模式</el-radio>
          </el-radio-group>
        </el-form-item>

      <div class="ok">保存</div>
        <el-form-item class="form-item">
          <div class="item-title">发射功率调整</div>
          <el-slider
            v-model="loraForm.powerRate"
            id="loraForm_frequency"
            :min="0"
            :max="100"
            :show-tooltip="false"
          ></el-slider>
          <div class="slider-info">节能</div>
        </el-form-item>

        <div class="ok" @click="saveList">保存</div>
      </div>


      


    </el-form>
  </div>
</template>

<script>
import { getLora, saveLora } from "@/api/system";
export default {
 name:"loraGateway",
 data(){
   return {
     channel_option:[],
     channelCount:20,
     loraForm:{
       deviceId: "",
       appId: "",
       password: "",
       workFre: "",
       mode: "",
       workFre2: "",
       frequency: 20
     }
   }
 }
}
  name: "loraGateway",
  created() {
    this.getList();
  },
  data() {
    return {
      channel_option: [
        { label: "频道1", value: "频道1" },
        { label: "频道2", value: "频道2" },
      ],
      channelCount: 20,
      loraForm: {
        devId: "",
        appId: "",
        password: "",
        hz: "",
        netMode: "",
        workMode: "",
        powerRate: 20,
      },
    };
  },
  methods: {
    async getList() {
      const res = await getLora();
      console.log(res);
    },
    async saveList() {
      const res = await saveLora(this.loraForm);
      console.log(res);
    },
  },
};
</script>

<style scoped lang="scss">
@import '../asset/common.scss';
  .lora-gateway {
      display: flex;
      flex-direction: column;
      .block {
        margin-top: 16px;
      }
      .channel-sele {
        .el-select {
          flex: 1;
          margin-left: 88px;
        }
      }
@import "../asset/common.scss";
.lora-gateway {
  display: flex;
  flex-direction: column;
  .block {
    margin-top: 16px;
  }
  .channel-sele {
    .el-select {
      flex: 1;
      margin-left: 88px;
    }
  }
}
</style>