控制轮询

ZZJ

2022-07-15 a3f357e8a60443b74b64c7479113c68eb35ce1f5

 src/pages/settings/components/MqttGateway.vue

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

      <el-form-item class="form-item">
             <switchBar
            :barName="`MOTT网关`"
            :value="accessible"
          ></switchBar>
        <switchBar
          :barName="`MOTT网关`"
          :value="mqttForm.enable"
          @switchChange="switchChange('enable', arguments)"
        ></switchBar>
      </el-form-item>

      <div class="block">
        <el-form-item class="form-item">
              <div class="item-title">IP地址</div>
              <div class="inputContain">
              <ipInput
                  :ip="mqttForm.ip"
                  @on-blur="mqttForm.ip = arguments[0]"
              ></ipInput>
              </div>
          <div class="item-title">IP地址</div>
          <div class="inputContain">
            <ipInput
              :ip="mqttForm.ip"
              @on-blur="mqttForm.ip = arguments[0]"
            ></ipInput>
          </div>
        </el-form-item>

        <el-form-item class="form-item">
              <div class="item-title">端口号</div>
              <div class="inputContain">
              <ipInput
                  :ip="mqttForm.port"
                  @on-blur="mqttForm.port = arguments[0]"
              ></ipInput>
              </div>
          <div class="item-title">端口号</div>
          <div class="inputContain">
            <el-input
              v-model="mqttForm.port"
              placeholder="请输入用户名"
              size="small"
            ></el-input>
          </div>
        </el-form-item>
      </div>

      <div class="block">
        <el-form-item class="form-item">
              <div class="item-title">名称</div>
              <div class="inputContain">
                <el-input
                  v-model="mqttForm.name"
                  placeholder="请输入用户名"
                  size="small"
                ></el-input>
              </div>
          </el-form-item>
          <div class="item-title">名称</div>
          <div class="inputContain">
            <el-input
              v-model="mqttForm.username"
              placeholder="请输入用户名"
              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="mqttForm.password"
                  placeholder="请输入密码"
                  size="small"
                  show-password
                  auto-complete="new-password"
                ></el-input>
              </div>
          </el-form-item>
        <el-form-item class="form-item">
          <div class="item-title">密码</div>
          <div class="inputContain">
            <el-input
              v-model="mqttForm.password"
              placeholder="请输入密码"
              size="small"
              show-password
              auto-complete="new-password"
            ></el-input>
          </div>
        </el-form-item>
      </div>

      <div class="block">
        <el-form-item class="form-item">
          <switchBar
            :barName="`MOTT网关`"
            :value="accessible"
            :barName="`匿名用户`"
            :value="mqttForm.anonymousEnable"
            @switchChange="switchChange('anonymousEnable', arguments)"
          ></switchBar>
        </el-form-item>
      </div>
    </el-form>

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

<script>
import ipInput from "../components/IPInput";
import switchBar from "../components/switchBar";
import { getMqtt, saveMqtt } from "@/api/system";
export default {
  name:"mqttGateway",
  data(){
  name: "mqttGateway",
  created() {
    this.getList();
  },
  data() {
    return {
      accessible: false,
      mqttForm:{
        ip:"",
        port:"",
        name:"",
        password:""
      }
    }
      mqttForm: {
        enable: "",
        anonymousEnable: "",
      },
    };
  },
  components :{
        switchBar,
        ipInput
    }
}
  components: {
    switchBar,
    ipInput,
  },
  methods: {
    async getList() {
      const res = await getMqtt();
      this.mqttForm = { ...res.data };
    },
    async saveList() {
      const res = await saveMqtt(this.mqttForm);
      console.log(res);
    },
    switchChange(tar, arr) {
      this.mqttForm[tar] = arr[0];
    },
  },
};
</script>

<style scoped lang="scss">
@import '../asset/common.scss';
  .mqtt-gateway {
      display: flex;
      flex-direction: column;
      .block {
        margin-top: 16px;
      }
@import "../asset/common.scss";
.mqtt-gateway {
  display: flex;
  flex-direction: column;
  .block {
    margin-top: 16px;
  }
}
</style>