From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/dashboard/control/index.vue | 513 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 513 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/control/index.vue b/src/views/dashboard/control/index.vue
new file mode 100644
index 0000000..9cda79a
--- /dev/null
+++ b/src/views/dashboard/control/index.vue
@@ -0,0 +1,513 @@
+<template>
+ <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>
+ <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>
+ </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>
+
+ </a-card>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+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[]>([
+ {
+ 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"
+ }]);
+
+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);
+ //鍙戦�佹寚浠�
+ 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) {
+ //鍙戦�乴og
+ 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 cnacelModal = () => {
+ router.back()
+}
+
+const hideModal = () => {
+ 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>
+
+<style lang="less" scoped>
+.app {
+ margin: 10px;
+}
+
+.com-box {
+ // 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: 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