From 772190e7b2e3f6ef0695ba54d9209324acdcb30a Mon Sep 17 00:00:00 2001
From: 艺术家 <10819716+q100102@user.noreply.gitee.com>
Date: 星期三, 04 六月 2025 13:57:17 +0800
Subject: [PATCH] 伸缩杆代码提交
---
项目代码/伸缩杆/client/src/views/tts/PickAndDrop/Manualcontrol.vue | 591 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 322 insertions(+), 269 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
index fc310a1..06da629 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\344\274\270\347\274\251\346\235\206/client/src/views/tts/PickAndDrop/Manualcontrol.vue"
@@ -6,14 +6,16 @@
@click="handleAutoPickAndDrop('浼稿嚭')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !AutoPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !AutoPickColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -38,14 +40,16 @@
@click="handleAutoPickAndDrop('缂╁洖')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !AutoDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !AutoDropColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -70,14 +74,16 @@
@click="handlePouse"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !pouseColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !pouseColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -119,14 +125,16 @@
@click="handManualOperation('宸�', '浼稿嚭')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !leftPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !leftPickColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -151,14 +159,16 @@
@click="handManualOperation('宸�', '缂╁洖')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !leftDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !leftDropColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -179,16 +189,19 @@
</div>
<span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
</el-button>
- <div style="color: #fff; font-size: 2rem; margin-left: 15rem">
- 鍙充晶浼哥缉鏉�
+ <div style="color: #fff; font-size: 2rem; margin-left: 13rem">
+ 宸︿晶浼哥缉鏉嗕綅缃�:{{
+ leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
+ }}
</div>
</div>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.leftPosition }}</div>
+ <!-- ruleForm.leftPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.manualExtend }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.manualExtend }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -203,7 +216,7 @@
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>瑙嗛鐩戞帶宸︿晶</span
>
- <img src="@/assets/imgs/right.png" alt="" />
+ <img src="@/assets/imgs/left.png" alt="" />
</div>
</div>
</div>
@@ -214,14 +227,16 @@
@click="handManualOperation('鍙�', '浼稿嚭')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !rightPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !rightPickColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -246,14 +261,16 @@
@click="handManualOperation('鍙�', '缂╁洖')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !rightDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !rightDropColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -274,16 +291,21 @@
</div>
<span style="font-size: 2.25rem; text-align: center">缂╁洖</span>
</el-button>
- <div style="color: #fff; font-size: 2rem; margin-left: 15rem">
- 宸︿晶浼哥缉鏉�
+ <div style="color: #fff; font-size: 2rem; margin-left: 13rem">
+ 鍙充晶浼哥缉鏉嗕綅缃�:{{
+ rightposition.Rightvalue
+ ? parseInt(rightposition.Rightvalue)
+ : 0
+ }}
</div>
</div>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.rightPosition }}</div>
+ <!-- ruleForm.rightPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.manualRetraction }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.manualRetraction }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -298,7 +320,7 @@
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>瑙嗛鐩戞帶鍙充晶</span
>
- <img src="@/assets/imgs/left.png" alt="" />
+ <img src="@/assets/imgs/right.png" alt="" />
</div>
</div>
</div>
@@ -311,14 +333,16 @@
@click="handManualOperation('宸�', '浼稿嚭')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !leftPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !leftPickColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -343,14 +367,16 @@
@click="handManualOperation('宸�', '缂╁洖')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !leftDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !leftDropColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -374,14 +400,17 @@
</div>
<div style="color: #fff; font-size: 2rem">宸︿晶浼哥缉鏉�</div>
<span style="color: #fff; font-size: 2rem"
- >褰撳墠浼哥缉鏉嗕綅缃細{{ Position.right }}</span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
+ }}</span
>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.leftPosition }}</div>
+ <!-- ruleForm.leftPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.manualExtend }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.manualExtend }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -396,7 +425,7 @@
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>瑙嗛鐩戞帶宸︿晶</span
>
- <img src="@/assets/imgs/right.png" alt="" />
+ <img src="@/assets/imgs/left.png" alt="" />
</div>
</div>
</div>
@@ -407,14 +436,16 @@
@click="handManualOperation('鍙�', '浼稿嚭')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !rightPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !rightPickColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -439,14 +470,16 @@
@click="handManualOperation('鍙�', '缂╁洖')"
type="primary"
size="small"
- style="
- width: 14.69rem;
- height: 5.06rem;
- color: rgba(64, 253, 240, 1);
- background-color: rgba(6, 229, 231, 0.3);
- border: none;
- border-top: 0.25rem solid rgba(6, 229, 231, 1);
- "
+ :style="{
+ width: '14.69rem',
+ height: '5.06rem',
+ color: !rightDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
+ backgroundColor: !rightDropColor
+ ? 'rgba(6, 229, 231, 0.3)'
+ : 'rgba(205, 208, 214,0.5)',
+ border: 'none',
+ borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
+ }"
>
<div class="btnicon">
<span
@@ -470,14 +503,17 @@
</div>
<div style="color: #fff; font-size: 2rem">鍙充晶浼哥缉鏉�</div>
<span style="color: #fff; font-size: 2rem"
- >褰撳墠浼哥缉鏉嗕綅缃細{{ Position.right }}</span
+ >褰撳墠浼哥缉鏉嗕綅缃細{{
+ rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
+ }}</span
>
</div>
<div class="operate">
- <div class="item">浼稿埌浣�</div>
- <div class="item">缂╁埌浣�</div>
- <div class="item">浼稿嚭閫熷害</div>
- <div class="item">缂╁洖閫熷害</div>
+ <div class="item">浼稿埌浣�:{{ ruleForm.rightPosition }}</div>
+ <!-- ruleForm.rightPosition -->
+ <div class="item">缂╁埌浣�:{{ 0 }}</div>
+ <div class="item">浼稿嚭閫熷害:{{ ruleForm.manualRetraction }}</div>
+ <div class="item">缂╁洖閫熷害:{{ ruleForm.manualRetraction }}</div>
<div class="open">
<div class="city">
<div class="dotted"></div>
@@ -492,16 +528,14 @@
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
>瑙嗛鐩戞帶鍙充晶</span
>
- <div
+ <!-- <div id="video-container"></div> -->
+ <img src="@/assets/imgs/right.png" alt="" />
+ <!-- <div
id="playWnd"
class="playWnd"
style="left: 109px; top: 133px"
- ></div>
- <!-- <iframe
- src="http://192.168.2.168/doc/pageview.asp"
- id="childFrame"
- style="height: 100%"
- ></iframe> -->
+ ref="playWnd"
+ ></div> -->
</div>
</div>
</div>
@@ -509,7 +543,7 @@
</div>
</template>
<script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
@@ -517,19 +551,62 @@
GetPosition,
AutoPickAndDrop,
Pouse,
+ GetParameter,
} from "@/api/newapi/Parameters.js";
-// import { WebVideoCtrl } from "@/assets/webControl/webVideoCtrl.js";
+// import EZUIKit from "ezuikit-js";
+
const router = useRouter();
const isMobile = ref(false);
const Position = ref({
- left: 0,
+ lift: 0,
right: 0,
});
+const rightposition = ref({});
+const leftposition = ref({});
+const tableData = ref([]);
+const isStart = ref(false); // 鏄惁寮�濮�
+const timer = ref(null);
+const client = ref(null);
+const pouseColor = ref(false);
+const AutoPickColor = ref(false); // 浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+const AutoDropColor = ref(false); // 缂╁洖鏃堕鑹蹭负鍙樿壊
+const rightPickColor = ref(false); // 鍙充晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+const rightDropColor = ref(false); // 鍙充晶缂╁洖鏃堕鑹蹭负鍙樿壊
+const leftPickColor = ref(false); // 宸︿晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+const leftDropColor = ref(false); // 宸︿晶缂╁洖鏃堕鑹蹭负鍙樿壊
const jumpRouter = (path) => {
router.push(path);
};
-const handManualOperation = async (position, ExtendedState) => {
+const handManualOperation = throttle(async (position, ExtendedState) => {
+ if (position == "鍙�") {
+ if (ExtendedState == "浼稿嚭") {
+ rightPickColor.value = true; // 鍙充晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ rightDropColor.value = true; // 鍙充晶缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ } else {
+ if (ExtendedState == "浼稿嚭") {
+ leftPickColor.value = true; // 宸︿晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ leftDropColor.value = true; // 宸︿晶缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ }
+ setTimeout(() => {
+ if (position == "鍙�") {
+ if (ExtendedState == "浼稿嚭") {
+ rightPickColor.value = false; // 鍙充晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ rightDropColor.value = false; // 鍙充晶缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ } else {
+ if (ExtendedState == "浼稿嚭") {
+ leftPickColor.value = false; // 宸︿晶浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ leftDropColor.value = false; // 宸︿晶缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ }
+ }, 2000);
try {
const res = await ManualOperation({
position: position,
@@ -552,10 +629,20 @@
type: "error",
});
}
-
- console.log(res);
-};
-const handleAutoPickAndDrop = async (val) => {
+}, 2000);
+const handleAutoPickAndDrop = throttle(async (val) => {
+ if (val == "浼稿嚭") {
+ AutoPickColor.value = true; // 浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ AutoDropColor.value = true; // 缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ setTimeout(() => {
+ if (val == "浼稿嚭") {
+ AutoPickColor.value = false; // 浼稿嚭鏃堕鑹蹭负榛樿棰滆壊
+ } else {
+ AutoDropColor.value = false; // 缂╁洖鏃堕鑹蹭负鍙樿壊
+ }
+ }, 2000);
try {
const response = await AutoPickAndDrop({
ExtendedState: val,
@@ -569,8 +656,12 @@
console.error(error);
ElMessage.error("鎿嶄綔澶辫触");
}
-};
-const handlePouse = async () => {
+}, 2000);
+const handlePouse = throttle(async () => {
+ pouseColor.value = !pouseColor.value; // 鍒囨崲棰滆壊
+ setTimeout(() => {
+ pouseColor.value = !pouseColor.value; // 鍒囨崲棰滆壊
+ }, 2000);
try {
const response = await Pouse();
if (response.code === 0) {
@@ -578,158 +669,111 @@
} else {
ElMessage.error(response.message);
}
+ console.log("Pouse response:", response);
} catch (error) {
console.error(error);
ElMessage.error(error);
}
-};
+ // 5绉掑悗鎭㈠鍘熸潵鐨勯鑹�
+}, 2000);
//鑾峰彇褰撳墠浣嶇疆
-const getPosition = () => {
- GetPosition().then((res) => {
+// const getPosition = () => {
+// GetPosition().then((res) => {
+// if (res.code == 0) {
+// Position.value.lift = res.data.lift;
+// Position.value.right = res.data.right;
+// }
+// });
+// };
+
+function throttle(func, wait) {
+ // 涓婁竴娆℃墽琛屽嚱鏁扮殑鏃堕棿鎴筹紝鍒濆鍊间负 0
+ let lastTime = 0;
+ // 杩斿洖涓�涓棴鍖呭嚱鏁帮紝浣滀负鑺傛祦鍚庣殑鍑芥暟
+ return function (...args) {
+ // 鑾峰彇褰撳墠鏃堕棿鎴�
+ const now = Date.now();
+ // 濡傛灉褰撳墠鏃堕棿涓庝笂涓�娆℃墽琛屾椂闂寸殑宸�煎ぇ浜庣瓑浜� wait锛屽垯鎵ц鍑芥暟
+ if (now - lastTime >= wait) {
+ // 鏇存柊涓婁竴娆℃墽琛屽嚱鏁扮殑鏃堕棿鎴�
+ lastTime = now;
+ // 璋冪敤鍘熷鍑芥暟锛屽苟浼犲叆鍙傛暟
+ func(...args);
+ }
+ };
+}
+
+const ruleForm = ref({
+ creater: "string",
+ createDate: "2025-03-27T05:48:57.698Z",
+ modifier: "string",
+ modifyDate: "2025-03-27T05:48:57.698Z",
+ id: 0,
+ extendSpeed: 0,
+ retractionSpeed: 0,
+ manualExtend: 0,
+ manualRetraction: 0,
+ // depid: userInfo.depid,
+ // account: userInfo.userName,
+ leftPosition: 0,
+ rightPosition: 0,
+});
+
+//鑾峰彇鍙傛暟
+const getParameter = () => {
+ GetParameter().then((res) => {
if (res.code == 0) {
- Position.value.left = res.data.left;
- Position.value.right = res.data.right;
+ ruleForm.value.extendSpeed = res.data == null ? 0 : res.data.extendSpeed;
+ ruleForm.value.retractionSpeed =
+ res.data == null ? 0 : res.data.retractionSpeed;
+ ruleForm.value.manualExtend =
+ res.data == null ? 0 : res.data.manualExtend;
+ ruleForm.value.manualRetraction =
+ res.data == null ? 0 : res.data.manualRetraction;
+ ruleForm.value.leftPosition =
+ res.data == null ? 0 : res.data.leftPosition;
+ ruleForm.value.rightPosition =
+ res.data == null ? 0 : res.data.rightPosition;
}
});
};
-// const WebVideoCtrl = new WebControl();
-// 鍒涘缓鎾斁瀹炰緥
-function initPlugin() {
- console.log("initPlugin",new WebControl());
-
- oWebControl = new WebControl({
- szPluginContainer: "playWnd", // 鎸囧畾瀹瑰櫒id
- iServicePortStart: 15900, // 鎸囧畾璧锋绔彛鍙凤紝寤鸿浣跨敤璇ュ��
- iServicePortEnd: 15900,
- szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 鐢ㄤ簬IE10浣跨敤ActiveX鐨刢lsid
- cbConnectSuccess: function () {
- // 鍒涘缓WebControl瀹炰緥鎴愬姛
- oWebControl
- .JS_StartService("window", {
- // WebControl瀹炰緥鍒涘缓鎴愬姛鍚庨渶瑕佸惎鍔ㄦ湇鍔�
- dllPath: "./VideoPluginConnect.dll", // 鍊�"./VideoPluginConnect.dll"鍐欐
- })
- .then(
- function () {
- // 鍚姩鎻掍欢鏈嶅姟鎴愬姛
- oWebControl.JS_SetWindowControlCallback({
- // 璁剧疆娑堟伅鍥炶皟
- cbIntegrationCallBack: cbIntegrationCallBack,
- });
- oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () {
- //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾
- init(); // 鍒涘缓鎾斁瀹炰緥鎴愬姛鍚庡垵濮嬪寲
- });
- },
- function () {
- // 鍚姩鎻掍欢鏈嶅姟澶辫触
- }
- );
- },
- cbConnectError: function () {
- // 鍒涘缓WebControl瀹炰緥澶辫触
- oWebControl = null;
- $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...");
- WebControl.JS_WakeUp("VideoWebPlugin://"); // 绋嬪簭鏈惎鍔ㄦ椂鎵цerror鍑芥暟锛岄噰鐢╳akeup鏉ュ惎鍔ㄧ▼搴�
- initCount++;
- if (initCount < 3) {
- setTimeout(function () {
- initPlugin();
- }, 3000);
- } else {
- $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒");
- }
- },
- cbConnectClose: function (bNormalClose) {
- // 寮傚父鏂紑锛歜NormalClose = false
- // JS_Disconnect姝ｅ父鏂紑锛歜NormalClose = true
- console.log("cbConnectClose");
- oWebControl = null;
- $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...");
- WebControl.JS_WakeUp("VideoWebPlugin://");
- initCount++;
- if (initCount < 3) {
- setTimeout(function () {
- initPlugin();
- }, 3000);
- } else {
- $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒");
- }
- },
- });
-
-}
+const createSocket = (url) => {
+ clearInterval(timer.value);
+ // 鍒涘缓WebSocket杩炴帴
+ //"ws://127.0.0.1:9295/admin"
+ //192.168.1.103
+ client.value = new WebSocket("ws://192.168.1.103:5173/");
+ client.value.onopen = function () {
+ console.log("WebSocket 杩炴帴鎴愬姛");
+ };
+ client.value.onmessage = function (event) {
+ let data = JSON.parse(event.data);
+ if (data.Status) {
+ tableData.value = data.Data;
+ } else if (data.device == "鍙砅lc") {
+ rightposition.value = data;
+ } else if (data.device == "宸lc") {
+ leftposition.value = data;
+ }
-// const initWebVideoCtrl = () => {
-// if (!WebVideoCtrl) {
-// console.error("WebControl 鏈纭姞杞斤紝璇锋鏌ョ浉鍏宠剼鏈��");
-// ElMessage.error("WebControl 鏈纭姞杞斤紝璇锋鏌ョ浉鍏宠剼鏈��");
-// return;
-// }
+ console.log("WebSocket 鎺ユ敹鍒版秷鎭�", data);
+ };
+ client.value.onclose = function () {
+ console.log("WebSocket 杩炴帴鍏抽棴");
+ if (isStart.value) {
+ timer.value = setTimeout(createSocket, 1000);
+ }
+ };
-// try {
-// // 鍒濆鍖栨彃浠�
-// WebVideoCtrl.I_InitPlugin(800, 600, {
-// bWndFull: true, // 鏄惁鏀寔鍗曠獥鍙ｅ叏灞�
-// iPackageType: 2, // 2 琛ㄧず HLS 鍗忚
-// });
-// // 鎻掑叆鎻掍欢鍒版寚瀹� DOM 鍏冪礌
-// WebVideoCtrl.I_InsertOBJECTPlugin("videoDiv");
-
-// // 璁惧淇℃伅
-// const deviceInfo = {
-// sIP: "192.168.2.168", // 璁惧 IP 鍦板潃
-// iPort: 80, // 璁惧绔彛鍙�
-// sUsername: "admin", // 鐢ㄦ埛鍚�
-// sPassword: "123456", // 瀵嗙爜
-// };
-
-// // 璋冪敤鐧诲綍璁惧鍑芥暟
-// loginDevice(deviceInfo);
-// } catch (error) {
-// console.error("鍒濆鍖� WebVideoCtrl 鎻掍欢鏃跺嚭閿�:", error);
-// ElMessage.error("鍒濆鍖� WebVideoCtrl 鎻掍欢鏃跺嚭閿欙紝璇锋鏌ラ厤缃��");
-// }
-// };
-
-// 鐧诲綍璁惧
-// const loginDevice = (deviceInfo) => {
-// WebVideoCtrl.I_Login(
-// deviceInfo.sIP,
-// 1,
-// deviceInfo.iPort,
-// deviceInfo.sUsername,
-// deviceInfo.sPassword,
-// {
-// success: () => {
-// console.log("鐧诲綍鎴愬姛");
-// ElMessage.success("璁惧鐧诲綍鎴愬姛");
-// // 寮�濮嬮瑙�
-// startRealPlay();
-// },
-// error: () => {
-// console.error("鐧诲綍澶辫触锛岃妫�鏌ヨ澶囦俊鎭拰缃戠粶杩炴帴銆�");
-// ElMessage.error("璁惧鐧诲綍澶辫触锛岃妫�鏌ヨ澶囦俊鎭拰缃戠粶杩炴帴銆�");
-// },
-// }
-// );
-// };
-// // 寮�濮嬪疄鏃堕瑙堝嚱鏁�
-// const startRealPlay = () => {
-// try {
-// WebVideoCtrl.I_StartRealPlay(1, {
-// iStreamType: 0, // 涓荤爜娴�
-// });
-// console.log("寮�濮嬪疄鏃堕瑙�");
-// } catch (error) {
-// console.error("寮�濮嬪疄鏃堕瑙堟椂鍑洪敊:", error);
-// ElMessage.error("寮�濮嬪疄鏃堕瑙堟椂鍑洪敊锛岃妫�鏌ヨ澶囩姸鎬併��");
-// }
-// };
+ client.value.onerror = function () {};
+};
onMounted(() => {
- initPlugin();
+ isStart.value = true; // 璁剧疆涓哄紑濮嬬姸鎬�
+ createSocket();
+ getParameter();
+ // initPlugin();
// initWebVideoCtrl();
// 鐩戝惉绐楀彛澶у皬鍙樺寲
window.addEventListener("resize", () => {
@@ -749,7 +793,16 @@
// 濡傛灉绐楀彛瀹藉害灏忎簬绛変簬1080px锛屾墽琛岀浉搴旂殑鎿嶄綔
isMobile.value = false;
}
- getPosition();
+ // getPosition();
+});
+
+onUnmounted(() => {
+ isStart.value = false;
+ clearInterval(timer.value);
+ if (client.value) {
+ client.value.close();
+ }
+ clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.3