From 554ea194fa4332e97c3def7e010acecde26b48d5 Mon Sep 17 00:00:00 2001
From: yanjinhui <3306209981@qq.com>
Date: 星期四, 28 八月 2025 10:17:04 +0800
Subject: [PATCH] 前端页面的修改
---
项目代码/前端/单机版/src/views/tts/PickAndDrop/PickAndDrop.vue | 130 +++++++++++++++++--------------------------
1 files changed, 51 insertions(+), 79 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\215\225\346\234\272\347\211\210/src/views/tts/PickAndDrop/PickAndDrop.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\215\225\346\234\272\347\211\210/src/views/tts/PickAndDrop/PickAndDrop.vue"
index bddf55c..79db6ef 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\215\225\346\234\272\347\211\210/src/views/tts/PickAndDrop/PickAndDrop.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\211\215\347\253\257/\345\215\225\346\234\272\347\211\210/src/views/tts/PickAndDrop/PickAndDrop.vue"
@@ -37,25 +37,9 @@
<div class="item">缂╁埌浣�:{{ 0 }}</div>
<div class="item">浼稿嚭閫熷害:{{ ruleForm.extendSpeed }}</div>
<div class="item">缂╁洖閫熷害:{{ ruleForm.extendSpeed }}</div>
- <!-- <div class="open">
- <div class="city">
- <div class="dotted"></div>
- <div class="pulse1"></div>
- <div class="pulse2"></div>
- <div class="pulse3"></div>
- </div>
- </div> -->
</div>
<!-- 瑙嗛妗� -->
<div style="display: flex; justify-content: center">
- <!-- <div
- style="
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 80%;
- "
- > -->
<!-- 妯睆瑙嗛鐩戞帶宸︿晶 -->
<div class="video_l">
<video
@@ -82,30 +66,12 @@
<span>鍙充晶璀︽儠鏈烘瀯</span>
<span></span>
</div>
- <!-- 瑙嗛妗� -->
-
- <!-- <div
- style="
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 80%;
- "
- > -->
<div class="operate">
<div class="item">浼稿埌浣�:{{ ruleForm.leftPosition }}</div>
<!-- ruleForm.leftPosition -->
<div class="item">缂╁埌浣�:{{ 0 }}</div>
<div class="item">浼稿嚭閫熷害:{{ ruleForm.extendSpeed }}</div>
<div class="item">缂╁洖閫熷害:{{ ruleForm.extendSpeed }}</div>
- <!-- <div class="open">
- <div class="city">
- <div class="dotted"></div>
- <div class="pulse1"></div>
- <div class="pulse2"></div>
- <div class="pulse3"></div>
- </div>
- </div> -->
</div>
<div style="display: flex; justify-content: center;">
<!-- 妯睆瑙嗛鐩戞帶鍙充晶 -->
@@ -120,8 +86,6 @@
height="100%"
></video>
</div>
- <!-- </div> -->
-
</div>
</div>
</div>
@@ -144,18 +108,8 @@
<div class="item">缂╁埌浣�:{{ 0 }}</div>
<div class="item">浼稿嚭閫熷害:{{ ruleForm.extendSpeed }}</div>
<div class="item">缂╁洖閫熷害:{{ ruleForm.extendSpeed }}</div>
- <!-- <div class="open">
- <div class="city">
- <div class="dotted"></div>
- <div class="pulse1"></div>
- <div class="pulse2"></div>
- <div class="pulse3"></div>
- </div>
- </div> -->
</div>
- <!-- <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
- >瑙嗛鐩戞帶宸︿晶</span
- > -->
+
<div style="display: flex; flex-direction: column; align-items: center">
<div class="video_l">
<video
@@ -186,18 +140,7 @@
<div class="item">缂╁埌浣�:{{ 0 }}</div>
<div class="item">浼稿嚭閫熷害:{{ ruleForm.retractionSpeed }}</div>
<div class="item">缂╁洖閫熷害:{{ ruleForm.retractionSpeed }}</div>
- <!-- <div class="open">
- <div class="city">
- <div class="dotted"></div>
- <div class="pulse1"></div>
- <div class="pulse2"></div>
- <div class="pulse3"></div>
- </div>
- </div> -->
</div>
- <!-- <span style="color: #fff; font-size: 2.5rem; font-weight: bold"
- >瑙嗛鐩戞帶鍙充晶</span
- > -->
<div style="display: flex; flex-direction: column; align-items: center">
<div class="video_r">
<video
@@ -233,6 +176,7 @@
Pouse,
GetPosition,
GetParameter,
+ GetStandid
} from "@/api/newapi/Parameters.js";
const router = useRouter();
@@ -251,8 +195,6 @@
retractionSpeed: 0,
manualExtend: 0,
manualRetraction: 0,
- // depid: userInfo.depid,
- // account: userInfo.userName,
leftPosition: 0,
rightPosition: 0,
});
@@ -347,31 +289,66 @@
const webRtcServer_right = ref(null);
// 鎽勫儚澶� RTSP 鍦板潃锛屾敞鎰� %23 鏇夸唬 #锛岃繖鏄� URL 缂栫爜
-const rtspLeft =
- "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101";
-const rtspRight =
- "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201";
+const videoStreamList = [
+ // index = StationID - 1锛屽搴� StationID = 1 鏃跺彇绗� 0 椤�
+ {
+ left: "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/101",
+ right: "rtsp://admin:MXmx2380%23@192.168.1.168:554/Streaming/Channels/201"
+ },
+ {
+ left: "rtsp://admin:MXmx2380%23@192.168.1.169:554/Streaming/Channels/101",
+ right: "rtsp://admin:MXmx2380%23@192.168.1.169:554/Streaming/Channels/201"
+ },
+ {
+ left: "rtsp://admin:MXmx2380%23@192.168.1.170:554/Streaming/Channels/101",
+ right: "rtsp://admin:MXmx2380%23@192.168.1.170:554/Streaming/Channels/201"
+ }
+ // 鍙互缁х画娣诲姞鏇村绔欑偣娴佸湴鍧�
+];
+const getStationId = async () => {
+ try {
+ const res = await GetStandid()
+ console.log("瑙嗛鐩戞帶绔欑偣",res)
+ if (res.status) {
+ const stationId = parseInt(res.data);
+ initVideoByStationId(stationId);/// 浼犻�掑埌瑙嗛鍒濆鍖栧嚱鏁帮紙璋冪敤鏂规硶锛�
+ } else {
+ ElMessage.error("鑾峰彇绔欑偣缂栧彿澶辫触锛�" + res.message);
+ }
+ } catch (err) {
+ ElMessage.error("璇锋眰澶辫触锛�" + err.message);
+ }
+};
+
+
// WebRtcStreamer 鏈嶅姟鍦板潃
const serverUrl = "http://192.168.1.103:8000"; // 鈫� 鏀逛负浣犺繍琛岀殑閭ｅ彴鐢佃剳鐨� IP
-const initVideo = () => {
+//鏍规嵁鍚庣杩斿洖鐨勪笉鍚屾暟瀛楁潵璇诲彇涓嶅悓鐨勮棰戠洃鎺ф祦
+const initVideoByStationId = (stationId) => {
+ const index = stationId - 1;
+
+ if (index < 0 || index >= videoStreamList.length) {
+ ElMessage.error("鏃犳晥鐨勭珯鐐圭紪鍙凤細" + stationId);
+ return;
+ }
+
+ const rtspUrls = videoStreamList[index];
+
try {
webRtcServer_left.value = new WebRtcStreamer("video_left", serverUrl);
- webRtcServer_left.value.connect(rtspLeft);
+ webRtcServer_left.value.connect(rtspUrls.left);
webRtcServer_right.value = new WebRtcStreamer("video_right", serverUrl);
- webRtcServer_right.value.connect(rtspRight);
+ webRtcServer_right.value.connect(rtspUrls.right);
- console.log(
- "瑙嗛鍒濆鍖栧畬鎴�",
- webRtcServer_left.value,
- webRtcServer_right.value
- );
+ console.log("瑙嗛鍒濆鍖栧畬鎴愶細", rtspUrls);
} catch (err) {
ElMessage.error("瑙嗛鍒濆鍖栧け璐�: " + err.message);
}
};
+
const destroyVideo = () => {
if (webRtcServer_left.value) {
@@ -386,7 +363,8 @@
// 浠ヤ笂鏄棰戠洃鎺�
onMounted(() => {
- initVideo();
+ getStationId(); // 椤甸潰鍔犺浇鏃惰嚜鍔ㄨ幏鍙栧苟鎾斁瑙嗛
+ // initVideoByStationId();
//鐩戝惉绐楀彛澶у皬鍙樺寲
window.addEventListener("resize", () => {
nextTick(() => {
@@ -430,9 +408,6 @@
const isPortrait = ref(checkOrientation() === 'portrait');
onActivated(() => {
- // 缂撳瓨椤甸潰 鎵撳紑椤甸潰 瀹炵幇鎾斁
- // const video = document.getElementById("video");
- // video.paused && video.play();
["video_left", "video_right"].forEach((id) => {
const video = document.getElementById(id);
if (video && video.paused) video.play();
@@ -441,9 +416,6 @@
// 椤甸潰鍋滅敤
onDeactivated(() => {
- // 缂撳瓨椤甸潰 绂诲紑椤甸潰 瀹炵幇鏆傚仠
- // const video = document.getElementById("video");
- // video.play && video.pause();
["video_left", "video_right"].forEach((id) => {
const video = document.getElementById(id);
if (video && !video.paused) video.pause();
--
Gitblit v1.9.3