From 66bae94879a1ef44abe28833627564086d74ee13 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期一, 21 八月 2023 10:19:27 +0800
Subject: [PATCH] 内容提交
---
.env.development | 1
src/assets/js/tools/websocket/getWsUrl.js | 25 ++++
src/views/home/index.vue | 6
src/views/home/components/homeDetail.vue | 35 +++++
src/main.js | 7 +
src/views/home/js/homeInfoModule.js | 103 ++++++++++++++++
.env.production | 1
src/assets/js/tools/websocket/createWs.js | 121 ++++++++++++++++++++
src/views/video/components/hkVideo.vue | 5
9 files changed, 295 insertions(+), 9 deletions(-)
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..e893d4c
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_APP_ENV="dev"
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..091f0e6
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_APP_ENV="prod"
diff --git a/src/assets/js/tools/websocket/createWs.js b/src/assets/js/tools/websocket/createWs.js
new file mode 100644
index 0000000..82f5a81
--- /dev/null
+++ b/src/assets/js/tools/websocket/createWs.js
@@ -0,0 +1,121 @@
+import getWsUrl from "./getWsUrl";
+import {computed, onMounted, onUnmounted, ref} from "vue";
+
+const createWs = (url)=>{
+ const wsUri = getWsUrl(url);
+ // 閲嶈繛鏃堕棿闂撮殧 榛樿10绉�
+ const reConnectDelay = 10 * 1000;
+ let timer = null;
+ let SOCKET = ref(null);
+
+ // 鎵撳紑閾炬帴
+ const openSocket = ()=>{
+ // 鍒濆鍖朩ebSocket 濡傛灉宸茬粡鍒濆鍖� 鍒欎粈涔堥兘涓嶅仛
+ if (SOCKET.value) {
+ return false;
+ }
+ WSClose();
+ WSInit();
+ }
+
+ const WSInit = ()=>{
+ console.log(isWSOpen);
+ // 鏈鍒濆鍖栧垵濮嬪寲
+ if (!isWSOpen.value) {
+ console.log('=====WSinit, url:', wsUri);
+ SOCKET.value = new WebSocket(wsUri);
+ SOCKET.value.onmessage = onWSMessage;
+ SOCKET.value.onopen = onWSOpen;
+ SOCKET.value.onerror = onWSError;
+ SOCKET.value.onclose = WSClose;
+ }
+ }
+
+ const onWSOpen = ()=>{
+ }
+
+ const onWSMessage = ()=>{
+ }
+
+ const onWSError = (Event)=>{
+ console.log('閾炬帴澶辫触', wsUri);
+ WSClose(Event);
+ }
+
+ const WSClose = (Event)=>{
+ if (SOCKET.value) {
+ switch (SOCKET.value.readyState) {
+ case 0:
+ SOCKET.value.onopen = () => {
+ SOCKET.value.close();
+ console.log('閾炬帴鍏抽棴', wsUri, 'close浜嬩欢瀵硅薄:', Event);
+ SOCKET.value = null;
+ // 娌℃湁event瀵硅薄 鍒欎负鎵嬪姩鍏抽棴
+ if (Event) {
+ reConnect();
+ }
+ }
+ break;
+ case 1:
+ SOCKET.value.close();
+ console.log('閾炬帴鍏抽棴', wsUri, 'close浜嬩欢瀵硅薄:', Event);
+ SOCKET.value = null;
+ // 娌℃湁event瀵硅薄 鍒欎负鎵嬪姩鍏抽棴
+ if (Event) {
+ reConnect();
+ }
+ break;
+ case 2:
+ SOCKET.value.onclose = () => {
+ console.log('閾炬帴鍏抽棴', wsUri, 'close浜嬩欢瀵硅薄:', Event);
+ SOCKET.value = null;
+ // 娌℃湁event瀵硅薄 鍒欎负鎵嬪姩鍏抽棴
+ if (Event) {
+ reConnect();
+ }
+ }
+ break;
+ case 3:
+ console.log('閾炬帴鍏抽棴', wsUri, 'close浜嬩欢瀵硅薄:', Event);
+ SOCKET.value = null;
+ // 娌℃湁event瀵硅薄 鍒欎负鎵嬪姩鍏抽棴
+ if (Event) {
+ reConnect();
+ }
+ break;
+ }
+ }
+ }
+
+ // 閲嶈繛
+ const reConnect = ()=>{
+ // 閲嶈繛璁℃椂寮�濮� 灏变笉鍙﹂噸杩�
+ if (timer) {
+ return;
+ }
+ timer = setTimeout(() => {
+ timer = null;
+ WSInit();
+ }, reConnectDelay);
+ }
+
+ const isWSOpen= computed(()=>{
+ return SOCKET.value && 1 === SOCKET.value.readyState;
+ });
+
+ onMounted(()=>{
+ openSocket();
+ })
+
+ onUnmounted(()=>{
+ WSClose();
+ })
+
+ return {
+ SOCKET,
+ onWSOpen,
+ onWSMessage
+ };
+}
+
+export default createWs;
diff --git a/src/assets/js/tools/websocket/getWsUrl.js b/src/assets/js/tools/websocket/getWsUrl.js
new file mode 100644
index 0000000..5087429
--- /dev/null
+++ b/src/assets/js/tools/websocket/getWsUrl.js
@@ -0,0 +1,25 @@
+
+/**
+ * 鑾峰彇Websocket鐨勮繛鎺�
+ * @param action
+ * @returns {string}
+ */
+function getWsUrl(action, port) {
+ let env = import.meta.env.VITE_APP_ENV;
+ let _port = port ? port : 8101;
+ let hostname = window.location.hostname;
+ let wsProtocol = "ws://";
+ if(window.location.protocol == "https:") {
+ wsProtocol = "wss://";
+ }
+ if (env == 'dev') {
+ hostname = "localhost";
+ }else {
+ _port = window.location.port;
+ }
+ // 澶勭悊绔彛涓�80
+ _port = _port == 80?"":":"+_port;
+ return wsProtocol + hostname + _port + '/envir/' + action;
+}
+
+export default getWsUrl;
diff --git a/src/main.js b/src/main.js
index 23168d1..214d721 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,13 @@
const pinia = createPinia()
+// 瀵箃oFixed鏁板瓧淇濈暀浣嶆暟浜屾灏佽锛坧s锛歵oFixed杩斿洖鐨勬槸瀛楃涓诧級
+Number.prototype.toHold = function (value) {
+ let hold = this.toFixed(value);
+ hold = Number(hold);
+ return hold;
+};
+
app.use(ElementPlus);
app.use(router);
app.use(pinia);
diff --git a/src/views/home/components/homeDetail.vue b/src/views/home/components/homeDetail.vue
index 9ca4d8a..78ac024 100644
--- a/src/views/home/components/homeDetail.vue
+++ b/src/views/home/components/homeDetail.vue
@@ -1,5 +1,5 @@
<script setup>
-import image5 from "@/views/home/images/璐ㄦ帶瀹�.jpg";
+import MapPin from "@/components/MapPin.vue";
const props = defineProps({
info: {
@@ -12,7 +12,19 @@
src: "",
width: 100,
height: 100
- }
+ },
+ info: {}
+ }
+ }
+ },
+ vals: {
+ type: Object,
+ default() {
+ return {
+ diff: 0,
+ hum: 48.71,
+ num: 3,
+ tmp: 26.56
}
}
}
@@ -21,6 +33,12 @@
<template>
<div class="home-detail">
+ <div class="vals-wrapper">
+ <div class="vals-name">{{info.name}}</div>
+ <div class="vals-item">娓╁害: {{vals.tmp}}鈩�</div>
+ <div class="vals-item">婀垮害: {{vals.hum}}%RH</div>
+ <div class="vals-item">鍘嬪樊: {{vals.diff}}Pa</div>
+ </div>
<div class="home-detail-img">
<img :src="info.img.src" alt=""/>
</div>
@@ -29,9 +47,22 @@
<style lang="less" scoped>
.home-detail {
+ position: relative;
width: 600px;
text-align: center;
background-color: #ffffff;
+ .vals-wrapper {
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ text-align: left;
+ padding: 8px;
+ background-color: #303133;
+ color: #FFFFFF;
+ .vals-name {
+ text-align: center;
+ }
+ }
}
.home-detail-img {
display: inline-block;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2e42cc5..b2f5b74 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
<script setup>
-import {onMounted, onUnmounted, ref, watch} from "vue";
+import {onMounted, onUnmounted, ref, watch, nextTick} from "vue";
import MapPin from "@/components/MapPin.vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";
import homeContentModule from "@/views/home/js/homeContentModule";
@@ -25,10 +25,12 @@
const {getHomeDetailInfo} = homeDetailModule();
const homeItemDialog = ref(false);
const homeDetailInfo = ref({});
+const homeVals = ref({});
const handleClick = (info)=>{
let rs = getHomeDetailInfo(info.num);
if(rs.code === 1) {
homeDetailInfo.value = rs.data;
+ homeVals.value = info;
homeItemDialog.value = true;
}else {
ElMessage(rs.msg);
@@ -75,7 +77,7 @@
class="center-dialog"
modal-class="high-level-dialog"
align-center>
- <home-detail :info="homeDetailInfo"></home-detail>
+ <home-detail :info="homeDetailInfo" :vals="homeVals"></home-detail>
</el-dialog>
</div>
diff --git a/src/views/home/js/homeInfoModule.js b/src/views/home/js/homeInfoModule.js
index 8029a38..e2b4096 100644
--- a/src/views/home/js/homeInfoModule.js
+++ b/src/views/home/js/homeInfoModule.js
@@ -1,6 +1,31 @@
-import {reactive} from "vue";
+import {onMounted, reactive} from "vue";
+import createWs from "@/assets/js/tools/websocket/createWs";
const homeInfoModule = ()=>{
+ const {
+ SOCKET
+ } = createWs("homePageSocket");
+
+ const handleOpen = ()=>{};
+
+ const handleMessage = (res=>{
+ const rs = JSON.parse(res.data);
+ if(rs.code === 1 && rs.data) {
+ const data = rs.data2;
+ for(let i=0; i<data.length;i++) {
+ let iData = data[i];
+ for(let j=0; j<homeInfo.length; j++) {
+ let jData = homeInfo[j];
+ if(iData.roomName === jData.name && iData.devId === 220000001) {
+ jData.info.tmp = iData.envirState.devTemp.toHold(2);
+ jData.info.hum = iData.envirState.devHumid.toHold(2);
+ jData.info.diff = iData.envirState.devPresss.toHold(2);
+ }
+ }
+ }
+ }
+ });
+
const homeInfo = reactive([
{
name: "鏁版嵁鏈烘埧",
@@ -14,7 +39,7 @@
},
info: {
num: 99,
- tmp: 10,
+ tmp: 0,
hum: 0,
diff: 0
}
@@ -137,8 +162,82 @@
hum: 0,
diff: 0
}
+ },
+ {
+ name: "搴撴埧",
+ temp: 0,
+ hum: 0,
+ diffPre: 0,
+ pos: {
+ visible: true,
+ x: 550,
+ y: 380
+ },
+ info: {
+ num: 99,
+ tmp: 0,
+ hum: 0,
+ diff: 0
+ }
+ },
+ {
+ name: "鐏弻瀹�",
+ temp: 0,
+ hum: 0,
+ diffPre: 0,
+ pos: {
+ visible: true,
+ x: 750,
+ y: 360
+ },
+ info: {
+ num: 99,
+ tmp: 0,
+ hum: 0,
+ diff: 0
+ }
+ },
+ {
+ name: "鐞嗗寲闂�",
+ temp: 0,
+ hum: 0,
+ diffPre: 0,
+ pos: {
+ visible: true,
+ x: 420,
+ y: 700
+ },
+ info: {
+ num: 99,
+ tmp: 0,
+ hum: 0,
+ diff: 0
+ }
+ },
+ {
+ name: "绌鸿皟鏈烘埧",
+ temp: 0,
+ hum: 0,
+ diffPre: 0,
+ pos: {
+ visible: true,
+ x: 420,
+ y: 1100
+ },
+ info: {
+ num: 99,
+ tmp: 0,
+ hum: 0,
+ diff: 0
+ }
}
]);
+
+ onMounted(()=>{
+ SOCKET.value.addEventListener("open", handleOpen, false);
+ SOCKET.value.addEventListener("message", handleMessage, false);
+ });
+
return {homeInfo};
};
export default homeInfoModule;
diff --git a/src/views/video/components/hkVideo.vue b/src/views/video/components/hkVideo.vue
index efb7d0d..249b0e3 100644
--- a/src/views/video/components/hkVideo.vue
+++ b/src/views/video/components/hkVideo.vue
@@ -6,7 +6,7 @@
type: Object,
default() {
return {
- ip: "192.168.10.5",
+ ip: "192.168.10.10",
port: 80,
username: "admin",
password: "a123456789"
@@ -21,10 +21,9 @@
videoInitPlugin, clickLogin
} = hkModule();
-
onMounted(()=>{
videoInitPlugin(()=>{
- //clickLogin(props.companyVideoData);
+ clickLogin(props.companyVideoData);
});
});
--
Gitblit v1.9.1