From 1f1fd51a80c6d790e0e797fca3b233399e92ce5e Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期二, 09 四月 2024 09:19:14 +0800
Subject: [PATCH] 功能优化
---
src/views/dashboard/control/index.vue | 381 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 363 insertions(+), 18 deletions(-)
diff --git a/src/views/dashboard/control/index.vue b/src/views/dashboard/control/index.vue
index 5085e12..9cda79a 100644
--- a/src/views/dashboard/control/index.vue
+++ b/src/views/dashboard/control/index.vue
@@ -1,21 +1,164 @@
<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-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>
+ <a-row>
+ <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"
+ @click="deviceClick(item)">
+ {{ item.name }}
+ </a-button> -->
+ <div v-if="item.type==0" @click="deviceClick(item)">
+ <div :class="[ item.value?'lightOn':'lightOff' ,'device']">
+
+
+ </div>
+ <div class="text-center">{{ item.name }}</div>
+
+ </div>
+ </div>
+
</div>
</a-card>
- <a-card title="鎺у埗鍙�" style="margin-top: 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)">
+ <div :class="[ item.value?'camOn':'camOff' ,'device']">
+
+
+ </div>
+ <div class="text-center">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+ </a-card>
+</div>
+ </a-row>
+ <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;" >
+
+ <a-row class="button-row">
+ <a-button type="primary" :disabled="btnDisabled" @click="clickButton(1010, '骞茬嚗鍚姩')" class="com-btn">
+ <div> <PlayCircleOutlined style="font-size: 20px;" /> </div>
+ <div> 骞茬嚗鍚姩 </div>
+
+ </a-button>
+ <!-- <a-button type="normal" @click="clickButton(1012)" class="com-btn">
+ <div> <SplitCellsOutlined style="font-size: 20px;" /> </div>
+ <div> 鍚庨棬寮�鍏� </div>
+
+ </a-button> -->
+ <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="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" :disabled="btnDisabled" @click="clickButton(1005,'婊氱瓛姝ｈ浆')" class="com-btn h100">
+ <div> <RedoOutlined style="font-size: 20px;" /> </div>
+ <div> 婊氱瓛姝ｈ浆 </div>
+ </a-button>
+ <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" :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" :disabled="btnDisabled" @click="clickButton(1015,'鍑烘枡')" class="com-btn">
+ <div> <DownloadOutlined style="font-size: 20px;" /> </div>
+ <div> 鍑烘枡 </div>
+
+ </a-button>
+ <!-- <a-button type="normal" @click="clickButton(1010)" class="com-btn">
+ <div> <SplitCellsOutlined style="font-size: 20px;" /> </div>
+ <div> 鍓嶉棬寮�鍏� </div>
+ </a-button> -->
+ <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" :disabled="btnDisabled" @click="clickButton(1013,'鐑鍚姩')" class="com-btn">
+ <div> <FireOutlined style="font-size: 20px;" /> </div>
+ <div> 鐑鍚姩 </div>
+
+ </a-button>
+ </a-row>
+
+ </div>
+
+
+ </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="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>
+ </a-card>
+ </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>
@@ -26,16 +169,31 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
-import { sendCommand } from "./api";
-
+import { sendCommand, sendWriteCommand, listAll } from "./api";
+import { useGlobSetting } from '/@/hooks/setting';
+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 {
id: number;
title: string;
icon: string;
}
+interface Device {
+ name: string;
+ identifier: string;
+ value: boolean;
+ sort_order: number;
+}
+const userStore = useUserStore();
const logList = ref<string[]>([]);
const comList = ref<Commant[]>([
{
@@ -88,6 +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);
//鍙戦�佹寚浠�
@@ -129,13 +300,109 @@
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 = '瀵嗙爜閿欒锛�'
+ }
+
+
};
+
+/**
+ * 鏌ヨ鐏拰鎽勫儚澶村垪琛�
+ */
+function queryDevice() {
+ listAll({}).then(res => {
+ console.log("ress000:",res);
+ lightList.value = res
+ })
+
+
+}
+
+function clickButton(cmd, msg) {
+ console.log("target::::",cmd);
+ let tenantId = userStore.getTenant;
+ var params = { msg: msg, code: cmd, tenantId: tenantId, machineId: "GM001" };
+ sendCommand(params).then(res => {
+ if (res.success) {
+ addLog("鍝嶅簲", res.message);
+ console.info(res);
+ } else {
+ console.info(res);
+ addLog("鍝嶅簲", res.message);
+ }
+
+ });
+}
+
+
+
+
+function deviceClick(item) {
+ //console.log("item===",item.value);
+ let params = {code: item.identifier, msg: !item.value}
+ sendWriteCommand(params).then(res => {
+ console.log("鍐欐寚浠ょ粨鏋滐細锛�", res)
+ if(res.success) {
+ lightList.value.forEach(device => {
+ if(device.identifier == item.identifier) {
+ device.value = !item.value
+ }
+ })
+ }
+ })
+
+}
+
+ // 鍒濆鍖� WebSocket
+ function initWebSocket() {
+
+ let user = userStore.getUserInfo;
+ let tenantId = user.loginTenantId;
+
+ console.log(user);
+ // WebSocket涓庢櫘閫氱殑璇锋眰鎵�鐢ㄥ崗璁湁鎵�涓嶅悓锛寃s绛夊悓浜巋ttp锛寃ss绛夊悓浜巋ttps
+ let url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/drySocket/' + tenantId;
+
+ connectWebSocket(url);
+ onWebSocket(onWebSocketMessage);
+ }
+
+ function onWebSocketMessage(data) {
+ console.log("drysocket:data::",data)
+ lightList.value.forEach(item => {
+ if(item.identifier == data.identifier) {
+ item.value = data.value
+ }
+ })
+ }
+
+ function keydown(e) {
+ error.value = ''
+ if(e.keyCode == 13) {
+ hideModal()
+ }
+ }
onMounted(() => {
showModal();
+ initWebSocket();
+ window.addEventListener('keydown', keydown)
});
+
+queryDevice()
</script>
@@ -146,23 +413,101 @@
}
.com-box {
- display: flex;
- flex-wrap: wrap;
+ // margin-left: 200px;
+ display: flex;
+ justify-content: center;
+
.com-btn {
+ border-radius: 5px;
+ width: 100px;
margin: 10px;
+ height: 70px;
}
}
+.button-row {
+ display: flex; justify-content: space-between;
+}
+
.log-box {
- min-height: 200px;
- max-height: 300px;
- overflow-y: scroll;
+ min-height: 150px;
+ max-height: 150px;
+ overflow-y: auto;
}
.indented-text {
text-indent: 20px;
font-size: 16px;
}
+.light-box {
+ display: flex;
+ justify-items: center;
+justify-content: center;
+ flex-wrap: wrap;
+
+}
+.center {
+ display: flex;
+justify-items: center;
+justify-content: center;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.lightOn {
+ background-image: url(/src/assets/images/dry/control/light.png);
+ background-repeat: no-repeat;
+ background-size: 50px;
+ /* border-radius: 10px; */
+ background-position: 48px 0px;
+ }
+ .lightOff {
+ background-image: url(/src/assets/images/dry/control/light-close.png);
+ background-repeat: no-repeat;
+ background-size: 50px;
+ /* border-radius: 10px; */
+ background-position: 48px 0px;
+ }
+
+ .camOn {
+ background-image: url(/src/assets/images/dry/control/cam1.png);
+ background-repeat: no-repeat;
+ background-size: 50px;
+ /* border-radius: 10px; */
+ background-position: 48px 0px;
+ }
+ .camOff {
+ background-image: url(/src/assets/images/dry/control/cam0.png);
+ background-repeat: no-repeat;
+ background-size: 50px;
+ /* border-radius: 10px; */
+ background-position: 48px 0px;
+ }
+
+
+.device {
+ width: 150px; height: 60px;
+
+}
+
+.h100 {
+ height: 70px !important;
+}
+
+.w300 {
+ width: 100px !important;
+}
+
+.monitor-box {
+ display: flex;
+ justify-items: center;
+justify-content: center;
+flex-wrap: wrap;
+
+}
+
</style>
--
Gitblit v1.9.3