前端页面的修改

yanjinhui

2025-08-28 554ea194fa4332e97c3def7e010acecde26b48d5

 ÏîÄ¿´úÂë/Ç°¶Ë/µ¥»ú°æ/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();