From 97dc174b26461df1395394c02401bb51dd6376bc Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期一, 04 十二月 2023 08:03:53 +0800
Subject: [PATCH] 增加opc设备维护和控制功能
---
src/views/dashboard/control/index.vue | 296 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 287 insertions(+), 9 deletions(-)
diff --git a/src/views/dashboard/control/index.vue b/src/views/dashboard/control/index.vue
index 5085e12..e9d321d 100644
--- a/src/views/dashboard/control/index.vue
+++ b/src/views/dashboard/control/index.vue
@@ -7,12 +7,125 @@
</a-modal>
<div class="app">
- <a-card title="鎸囦护">
+ <a-row>
+ <a-card title="鐓ф槑" style="width: 60%">
+ <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="width: 35%; 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>
+
+ </a-row>
+
+ <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"
+ <!-- <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" @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" @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>
+ </a-row>
+ <a-row class="button-row">
+ <a-button type="normal" @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 " >
+ <div> <PauseCircleOutlined style="font-size: 20px;" /> </div>
+ <div> 鍋滄 </div>
+ </a-button>
+ <a-button type="normal" @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">
+ <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" @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">
+ <div> <FireOutlined style="font-size: 20px;" /> </div>
+ <div> 鐑鍚姩 </div>
+
+ </a-button>
+ </a-row>
+
+ </div>
+ <div style="margin-left: 100px;">
+ <div>
+ <a-button type="warning" @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>
+ </div>
+ </div>
+
</div>
</a-card>
<a-card title="鎺у埗鍙�" style="margin-top: 10px">
@@ -26,16 +139,28 @@
<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';
+
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 +213,9 @@
icon: "caret-right-outlined"
}]);
+
+const lightList = ref<Device[]>([]);
+const monitorList = ref<Device[]>([]);
function comClick(item) {
addLog("鍙戦��", item.title);
//鍙戦�佹寚浠�
@@ -133,9 +261,81 @@
visible.value = false;
};
+/**
+ * 鏌ヨ鐏拰鎽勫儚澶村垪琛�
+ */
+function queryDevice() {
+ listAll({}).then(res => {
+ console.log("ress000:",res);
+ lightList.value = res
+ })
+
+
+}
+
+function clickButton(cmd, msg) {
+ console.log("target::::",cmd);
+ var params = { msg: msg, code: cmd, tenantId: 1003, 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
+ }
+ })
+ }
+
onMounted(() => {
showModal();
+ initWebSocket();
});
+
+queryDevice()
</script>
@@ -146,23 +346,101 @@
}
.com-box {
- display: flex;
- flex-wrap: wrap;
+ // margin-left: 200px;
+ display: flex;
+
+
.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