远控增加密码

baoshiwei

2023-12-11 1b20ab505d771e8d2168ddb8154da5d6aa85919a

 src/views/dashboard/control/index.vue

@@ -1,14 +1,22 @@
<template>
  <a-modal v-model:visible="visible" centered :mask="false" :closable="false" :cancelText="null" title="警告"
           @ok="hideModal">
  <a-modal v-model:visible="visible" centered :mask="true" :maskClosable="false" :keyboard="false" :closable="false" :cancelText="null" title="警告"
           @ok="hideModal" @cancel="cnacelModal" >
    <a-card>
       <div class="indented-text">在使用远程控制设备前，请确保机器周围没有其他人员。建立一个安全区域，确保没有人能够进入该区域，防止不必要的伤害。</div>
      <div style="display: flex; justify-content: space-between; padding-top: 20px; "> 
        <p style="font-weight: bold;" >请输入密码：</p>
        <p style="color: red">{{ error }}</p>
      </div>
       <div >
        <a-input-password v-model:value="password" placeholder="请输入密码！"></a-input-password>
       </div>
    </a-card>

  </a-modal>
  <div class="app">
    <a-row>
      <a-card title="照明" style="width: 60%">
      <div style="width: 60%">
      <a-card title="照明" >
      <div class="light-box">
        <div v-for="item in lightList" :key="item.identifier"  class="center">
          <!-- <a-button v-if="item.type == 0"  type="primary" class="com-btn"
@@ -27,7 +35,9 @@
       
      </div>
    </a-card>
    <a-card title="监控" style="width: 35%; margin-left: 10px;">
  </div>
  <div style="width: 40%">
    <a-card title="监控" style=" margin-left: 10px;">
      <div class="monitor-box">
        <div v-for="item in lightList" :key="item.identifier" class="center" >
          <div v-if="item.type==1" @click="deviceClick(item)">
@@ -40,19 +50,20 @@
      </div>
      </div>
    </a-card>

</div>
    </a-row>
    
    <a-card title="指令" style="margin-top: 10px">
 <a-row>
      <div style="width: 50%">
<a-card title="指令" style="margin-top: 10px; ">
      <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 style="width: 500px;">
        <div style="width: 500px;"  >
        
        <a-row class="button-row">
          <a-button type="primary" @click="clickButton(1010, '干燥启动')" class="com-btn">  
          <a-button type="primary" :disabled="btnDisabled"  @click="clickButton(1010, '干燥启动')" class="com-btn">  
            <div> <PlayCircleOutlined style="font-size: 20px;" /> </div>
          <div>  干燥启动 </div>
          
@@ -62,33 +73,33 @@
          <div>  后门开关 </div>
          
        </a-button> -->
        <a-button type="default" @click="clickButton(1003,'滚筒升')" class="com-btn w300">
        <a-button type="default" :disabled="btnDisabled"  @click="clickButton(1003,'滚筒升')" class="com-btn w300">
          <div> <UpCircleOutlined style="font-size: 20px;" /> </div>
          <div>  滚筒升 </div>
          
        </a-button>
        <a-button type="info" @click="clickButton(1014, '开门观察')" class="com-btn">
          <div> <SettingOutlined style="font-size: 20px;" /> </div>
          <div>  开门观察 </div>
        <a-button type="normal" :disabled="btnDisabled" @click="clickButton(1016,'清除')" class="com-btn">
          <div> <ClearOutlined style="font-size: 20px;" /> </div>
          <div>  清除 </div>
          
        </a-button>
        </a-row>
        <a-row class="button-row">
          <a-button type="normal" @click="clickButton(1005,'滚筒正转')" class="com-btn h100">
          <a-button type="normal" :disabled="btnDisabled"  @click="clickButton(1005,'滚筒正转')" class="com-btn h100">
            <div>  <RedoOutlined style="font-size: 20px;" /> </div>
            <div> 滚筒正转 </div>
        </a-button>
          <a-button type="danger" @click="clickButton(1007,'停止')" class="com-btn h100 w300 " >
          <a-button type="danger" :disabled="btnDisabled"  @click="clickButton(1007,'停止')" class="com-btn h100 w300 " >
            <div> <PauseCircleOutlined style="font-size: 20px;" />  </div>
            <div>  停止 </div>
        </a-button>
        <a-button type="normal" @click="clickButton(1006,'滚筒反转')" class="com-btn h100">
        <a-button type="normal" :disabled="btnDisabled"  @click="clickButton(1006,'滚筒反转')" class="com-btn h100">
          <div> <UndoOutlined style="font-size: 20px;" /> </div>
          <div>  滚筒反转 </div>
        </a-button>
        </a-row>
        <a-row class="button-row">
          <a-button type="success" @click="clickButton(1015,'出料')" class="com-btn">
          <a-button type="success" :disabled="btnDisabled"  @click="clickButton(1015,'出料')" class="com-btn">
            <div> <DownloadOutlined style="font-size: 20px;" /> </div>
            <div>  出料 </div>
          
@@ -97,11 +108,11 @@
          <div> <SplitCellsOutlined style="font-size: 20px;" /> </div>
          <div>  前门开关 </div>
        </a-button> -->
        <a-button type="normal" @click="clickButton(1004,'滚筒降')" class="com-btn w300">
        <a-button type="normal" :disabled="btnDisabled"  @click="clickButton(1004,'滚筒降')" class="com-btn w300">
          <div> <DownCircleOutlined style="font-size: 20px;" /> </div>
          <div>  滚筒降 </div>
        </a-button>
        <a-button type="normal" @click="clickButton(1013,'热风启动')" class="com-btn">
        <a-button type="normal" :disabled="btnDisabled"  @click="clickButton(1013,'热风启动')" class="com-btn">
          <div> <FireOutlined style="font-size: 20px;" /> </div>
            <div>  热风启动 </div>
          
@@ -109,26 +120,45 @@
      </a-row>
       
        </div>
        <div style="margin-left: 100px;">
          <div>
          <a-button type="warning" @click="clickButton(1017,'手动/自动')" class="com-btn">


      </div>
    </a-card>
    </div>
    <div style="width: 50%">
    <a-card title="状态" style="margin-left: 10px;margin-top:10px">
      <div class="com-box">
        <div>
      <div>
          <a-button type="warning" :disabled="btnDisabled"  @click="clickButton(1017,'手动/自动')" class="com-btn">
            <div> <SyncOutlined style="font-size: 20px;" /> </div>
          <div>  手动/自动 </div>
          
        </a-button>
       
      </div>
      <div>
        <a-button type="normal" @click="clickButton(1016,'清除')" class="com-btn">
          <div> <ClearOutlined style="font-size: 20px;" /> </div>
          <div>  清除 </div>
        <a-button type="info" :disabled="btnDisabled"  @click="clickButton(1014, '开门观察')" class="com-btn">
          <div> <SettingOutlined style="font-size: 20px;" /> </div>
          <div>  开门观察 </div>
          
        </a-button>
       
      </div>
      <div>
        <a-button type="normal" @click="lock()" class="com-btn">
          <div> <Icon :icon="lockIcon" :size="28" /> </div>
          <div>  {{lockText}} </div>
          
        </a-button>
      </div>
        </div>

      </div>
    </div>
    </a-card>
    <a-card title="控制台" style="margin-top: 10px">
  </div>
    </a-row>
    
    <a-card title="控制台" style="margin-top: 10px; ">
      <div class="log-box">
        <p v-for="log in logList" :key="log"> {{ log }}</p>
      </div>
@@ -144,8 +174,11 @@
import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
import { useUserStore } from '/@/store/modules/user';
import { RedoOutlined ,SettingOutlined, UndoOutlined,FireOutlined, SplitCellsOutlined, DownloadOutlined, PauseCircleOutlined,ClearOutlined, SyncOutlined,PlayCircleOutlined, SwapOutlined , UpCircleOutlined, DownCircleOutlined, LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';


import { router } from '/@/router'
const error = ref('')
const lockIcon = ref('tdesign:lock-off')
const lockText = ref('解锁')
const password = ref()
const visible = ref<boolean>(false);
  const glob = useGlobSetting();
interface Commant {
@@ -213,9 +246,19 @@
    icon: "caret-right-outlined"
  }]);


const btnDisabled = ref(true)
const lightList = ref<Device[]>([]);
const monitorList = ref<Device[]>([]);

function lock() {
  btnDisabled.value = !btnDisabled.value
  lockIcon.value = btnDisabled.value?'tdesign:lock-off':'tdesign:lock-on'
  lockText.value = btnDisabled.value?'解锁': '锁定'
  if (btnDisabled.value) {
    showModal()
  }
}

function comClick(item) {
  addLog("发送", item.title);
  //发送指令
@@ -257,8 +300,23 @@
  visible.value = true;
};

const cnacelModal = () => {
  router.back()
}

const hideModal = () => {
  visible.value = false;
  if(!password.value || password.value.length<=0) {
    error.value="请输入密码！"
  }else
  if(password.value === 'LBit@123') {
    visible.value = false;
    password.value = ''
    error.value = ''
  } else {
    error.value = '密码错误！'
  }
  
  
};

/**
@@ -330,9 +388,17 @@
        })
      }

      function keydown(e) {
        error.value = ''
        if(e.keyCode == 13) {
          hideModal()
        }
      }

onMounted(() => {
  showModal();
  initWebSocket();
  window.addEventListener('keydown', keydown)
});

queryDevice()
@@ -349,7 +415,7 @@
  // margin-left: 200px;

  display: flex;

  justify-content: center;
  
  .com-btn {
    border-radius: 5px;