添加远程控制页面

朱桂飞

2023-11-27 db029d023c099a578bdfb9db844ce365edd9e41e

添加远程控制页面

 src/views/dashboard/control/api.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
import { defHttp } from '/@/utils/http/axios';

enum Api {
  sendCommand = '/dry/real/sendCommand',
}
/**
 * å‘送命令
 * @param params
 */
export const sendCommand = (params) => defHttp.post({ url: Api.sendCommand, params },{ isTransformResponse: false });


 src/views/dashboard/control/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,168 @@
<template>
  <a-modal v-model:visible="visible" centered :mask="false" :closable="false" :cancelText="null" title="警告"
           @ok="hideModal">
    <a-card>
       <div class="indented-text">在使用远程控制设备前，请确保机器周围没有其他人员。建立一个安全区域，确保没有人能够进入该区域，防止不必要的伤害。</div>
    </a-card>

  </a-modal>
  <div class="app">
    <a-card title="指令">
      <div class="com-box">
        <a-button v-for="item in comList" :key="item.id" type="primary" class="com-btn"
                  @click="comClick(item)">
          {{ item.title }}
        </a-button>
      </div>
    </a-card>
    <a-card title="控制台" style="margin-top: 10px">
      <div class="log-box">
        <p v-for="log in logList" :key="log"> {{ log }}</p>
      </div>

    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { sendCommand } from "./api";

const visible = ref<boolean>(false);

interface Commant {
  id: number;
  title: string;
  icon: string;
}

const logList = ref<string[]>([]);
const comList = ref<Commant[]>([
  {
    id: 1010,
    title: "干燥启动",
    icon: "caret-right-outlined"
  }, {
    id: 1007,
    title: "停止运行",
    icon: "caret-right-outlined"
  }, {
    id: 1013,
    title: "热风启动",
    icon: "caret-right-outlined"
  }, {
    id: 1012,
    title: "后门开关",
    icon: "caret-right-outlined"
  }, {
    id: 1003,
    title: "滚筒升",
    icon: "caret-right-outlined"
  }, {
    id: 1004,
    title: "滚筒降",
    icon: "caret-right-outlined"
  }, {
    id: 1005,
    title: "滚筒正转",
    icon: "caret-right-outlined"
  }, {
    id: 1006,
    title: "滚筒反转",
    icon: "caret-right-outlined"
  }, {
    id: 1014,
    title: "开门观察",
    icon: "caret-right-outlined"
  }, {
    id: 1015,
    title: "出料",
    icon: "caret-right-outlined"
  }, {
    id: 1016,
    title: "清除",
    icon: "caret-right-outlined"
  }, {
    id: 1017,
    title: "手动/自动",
    icon: "caret-right-outlined"
  }]);

function comClick(item) {
  addLog("发送", item.title);
  //发送指令
  sendCmd(item);
}

/**
 * å‘送指令
 * @param item
 */
function sendCmd(item) {
  var params = { msg: item.title, code: item.id, tenantId: 1003, machineId: "GM001" };
  sendCommand(params).then(res => {
    if (res.success) {
      addLog("响应", res.message);
      console.info(res);
    } else {
      console.info(res);
      addLog("响应", res.message);
    }

  });
}

/**
 * æ·»åŠ log
 * @param type
 * @param msg
 */
function addLog(type, msg) {
  //发送log
  const date = new Date();
  const format = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
  const log = format + " " + type + ":" + msg;
  logList.value.unshift(log);
}

const showModal = () => {
  visible.value = true;
};

const hideModal = () => {
  visible.value = false;
};

onMounted(() => {
  showModal();
});


</script>

<style lang="less" scoped>
.app {
  margin: 10px;
}

.com-box {
  display: flex;
  flex-wrap: wrap;

  .com-btn {
    margin: 10px;
  }
}

.log-box {
  min-height: 200px;
  max-height: 300px;
  overflow-y: scroll;
}
.indented-text {
  text-indent: 20px;
  font-size: 16px;
}


</style>

 src/views/dashboard/video/index.vue