IMAS-vue/src/components/DebugView.vue

<script>
import TitleBlock from "@/components/TitleBlock.vue";
import $ from "jquery";

export default {
  name: "DebugView",
  components: {TitleBlock},
  created() {
    this.getStatusData();
  },
  data() {
    return {
      Label_button1: "待机",
      Label_button2: "重启",
      Label_button3: "启动加湿",
      Label_button4: "关闭屏幕",
      button1: false,
      button2: false,
      button3: false,
      button4: false,
      data: {
        standby: 0,
        reboot: 0,
        humidifier: 0,
        screen: 1,
      }
    };
  },
  methods: {
    button1_click() {
      console.log("待机");
      this.button1 = true;
      setTimeout(() => {
        this.button1 = false;
      }, 5000);
      if (this.Label_button1 === "待机") {
        this.Label_button1 = "工作";
        this.button2 = true;
        this.button3 = true;
        this.button4 = true;
        this.data.standby = 1;
      } else {
        this.Label_button1 = "待机";
        this.button2 = false;
        this.button3 = false;
        this.button4 = false;
        this.data.standby = 0;
      }
      this.updateData();
    },
    button2_click() {
      console.log("重启");
      this.button1 = true;
      this.button2 = true;
      this.button3 = true;
      this.button4 = true;
      setTimeout(() => {
        this.button1 = false;
        this.button2 = false;
        this.button3 = false;
        this.button4 = false;
      }, 5000);


      this.data.reboot = 1;
      this.updateData();
      this.data.reboot = 0;
    },
    button3_click() {
      console.log("启动加湿");
      this.button3 = true;
      setTimeout(() => {
        this.button3 = false;
      }, 1000);
      if (this.Label_button3 === "启动加湿") {
        this.Label_button3 = "停止加湿";
        this.data.humidifier = 1;
      } else {
        this.Label_button3 = "启动加湿";
        this.data.humidifier = 0;
      }
      this.updateData();
    },
    button4_click() {
      console.log("关闭屏幕");
      this.button4 = true;
      setTimeout(() => {
        this.button4 = false;
      }, 1000);
      if (this.Label_button4 === "关闭屏幕") {
        this.Label_button4 = "打开屏幕";
        this.data.screen = 0;
      } else {
        this.Label_button4 = "关闭屏幕";
        this.data.screen = 1;
      }
      this.updateData();
    },
    updateData() {
      $.ajax({
            url: "http://localhost/debug.php",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(this.data),
            success: (response) => {
              console.log(response);
            }, 
            error: (xhr, status, error) => {
              console.log(error);
              console.log(xhr.responseText);
            }
          }
      )
    },
    getStatusData(){
      $.ajax({
            url: "http://localhost/debug.php",
            type: "GET",
            contentType: "application/json",
            success: (response) => {
              console.log(response);
              this.data.standby = parseInt(JSON.parse(response).standby);
              this.data.reboot = parseInt(JSON.parse(response).reboot);
              this.data.humidifier = parseInt(JSON.parse(response).humidifier);
              this.data.screen = parseInt(JSON.parse(response).screen);
              if (this.data.standby) {
                this.Label_button1 = "工作";
              } else {
                this.Label_button1 = "待机";
              }
              if (this.data.reboot) {
                this.Label_button2 = "重启中";
              } else {
                this.Label_button2 = "重启";
              }
              if (this.data.humidifier) {
                this.Label_button3 = "停止加湿";
              } else {
                this.Label_button3 = "启动加湿";
              }
              if (this.data.screen) {
                this.Label_button4 = "关闭屏幕";
              } else {
                this.Label_button4 = "打开屏幕";
              }
            },
            error: (xhr, status, error) => {
              console.log(error);
              console.log(xhr.responseText);
            }
          }
      )
    }
  },
  computed: {
  }
}
</script>

<template>
  <TitleBlock class="mb-4" title="调试" /><br>

  <div class="text-center me-1 pe-5 ps-5">
  <table class="table table-sm w-25">
    <thead>
      <tr>
        <th>功能</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody class="table-group-divider">
    <tr>
        <td>在线状态</td>
        <td>{{ data.standby? "离线" : data.reboot? "重启中": "在线" }}</td>
      </tr>
      <tr>
        <td>启动加湿</td>
        <td>{{ data.humidifier? "启动中" : "已停止" }}</td>
      </tr>
      <tr>
        <td>关闭屏幕</td>
        <td>{{ data.screen? "打开" : "关闭" }}</td>
      </tr>
    </tbody>
  </table>
  </div>

  <div class="ms-5 mt-4 btn-group">
    <button class="btn btn-outline-secondary" v-bind:disabled="button1" @click="button1_click" hidden>{{ Label_button1 }}</button>
    <button class="btn btn-outline-secondary" v-bind:disabled="button2" @click="button2_click">{{ Label_button2 }}</button>
    <button class="btn btn-outline-secondary" v-bind:disabled="button3" @click="button3_click">{{ Label_button3 }}</button>
    <button class="btn btn-outline-secondary" v-bind:disabled="button4" @click="button4_click">{{ Label_button4 }}</button>
  </div>

</template>

<style scoped>
</style>