ue场景接入

.env.development

@@ -4,8 +4,12 @@ VITE_APP_TITLE = 应急大屏
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
-# 若依管理系统/开发环境
-VITE_APP_BASE_API = 'http://10.1.161.156:4000'
+# 开发环境
+VITE_API_BASE_URL = ''
+
+#请求地址
+# VITE_SERVICE_API_URL = 'http://10.1.162.189:3000'
+VITE_SERVICE_API_URL = 'http://10.1.162.193:3000'
 
 
 

.env.production

@@ -4,10 +4,12 @@ VITE_APP_TITLE = 应急大屏
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
-# 若依管理系统/生产环境
-# VITE_APP_BASE_API = '/prod-api'
-# VITE_APP_BASE_API = 'http://10.1.161.60:4000/catalog-api'
-VITE_APP_BASE_API = 'http://58.34.215.18:4000/catalog-api'
+# 生产环境
+VITE_API_BASE_URL = ''
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip
+VITE_BUILD_COMPRESS = gzip
+
+#请求地址
+# VITE_SERVICE_API_URL = 'http://10.1.162.189:3000'
+VITE_SERVICE_API_URL = 'http://10.1.162.193:3000'

public/peer-stream.js

@@ -0,0 +1,944 @@
+'5.1.3';
+// Must be kept in sync with JavaScriptKeyCodeToFKey C++ array.
+// special keycodes different from KeyboardEvent.keyCode
+const SpecialKeyCodes = {
+  Backspace: 8,
+  ShiftLeft: 16,
+  ControlLeft: 17,
+  AltLeft: 18,
+  ShiftRight: 253,
+  ControlRight: 254,
+  AltRight: 255,
+};
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+const MouseButton = {
+  MainButton: 0, // Left button.
+  AuxiliaryButton: 1, // Wheel button.
+  SecondaryButton: 2, // Right button.
+  FourthButton: 3, // Browser Back button.
+  FifthButton: 4, // Browser Forward button.
+};
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#value
+const MouseButtonsMask = {
+  1: 0,
+  2: 2,
+  4: 1,
+  8: 3,
+  16: 4,
+};
+// Must be kept in sync with PixelStreamingProtocol::EToClientMsg C++ enum.
+const RECEIVE = {
+  QualityControlOwnership: 0,
+  Response: 1,
+  Command: 2,
+  FreezeFrame: 3,
+  UnfreezeFrame: 4,
+  VideoEncoderAvgQP: 5,
+  LatencyTest: 6,
+  InitialSettings: 7,
+  FileExtension: 8,
+  FileMimeType: 9,
+  FileContents: 10,
+  InputControlOwnership: 12,
+  CompositionStart: 64,
+  Protocol: 255,
+};
+// Must be kept in sync with PixelStreamingProtocol::EToUE4Msg C++ enum.
+const SEND = {
+  /*
+   * Control Messages. Range = 0..49.
+   */
+  IFrameRequest: 0,
+  RequestQualityControl: 1,
+  FpsRequest: 2,
+  AverageBitrateRequest: 3,
+  StartStreaming: 4,
+  StopStreaming: 5,
+  LatencyTest: 6,
+  RequestInitialSettings: 7,
+  /*
+   * Input Messages. Range = 50..89.
+   */
+  // Generic Input Messages. Range = 50..59.
+  UIInteraction: 50,
+  Command: 51,
+  // Keyboard Input Message. Range = 60..69.
+  KeyDown: 60,
+  KeyUp: 61,
+  KeyPress: 62,
+  FindFocus: 63,
+  CompositionEnd: 64,
+  // Mouse Input Messages. Range = 70..79.
+  MouseEnter: 70,
+  MouseLeave: 71,
+  MouseDown: 72,
+  MouseUp: 73,
+  MouseMove: 74,
+  MouseWheel: 75,
+  // Touch Input Messages. Range = 80..89.
+  TouchStart: 80,
+  TouchEnd: 81,
+  TouchMove: 82,
+  // Gamepad Input Messages. Range = 90..99
+  GamepadButtonPressed: 90,
+  GamepadButtonReleased: 91,
+  GamepadAnalog: 92,
+};
+let iceServers = undefined;
+
+class PeerStream extends HTMLVideoElement {
+  constructor() {
+    super();
+    window.ps = this;
+    this.ws = {
+      send() {},
+      close() {},
+    }; // WebSocket
+    this.pc = {
+      close() {},
+    }; // RTCPeerConnection
+    this.setupVideo();
+    this.registerKeyboardEvents();
+    this.registerMouseHoverEvents();
+    this.registerFakeMouseEvents();
+    
+    // 获取自定义属性
+    this.sceneId = this.dataset.sceneId;
+    this.viewMode = this.dataset.viewMode;
+    this.token = this.dataset.token;
+    // 初始化事件处理器
+    this._onClose = null;
+    this._onOpen = null;
+    this._onMessage = null;
+
+    document.addEventListener(
+      'pointerlockchange',
+      () => {
+        if (document.pointerLockElement === this) {
+          this.registerPointerLockEvents();
+        } else {
+          this.registerMouseHoverEvents();
+        }
+      },
+      false,
+    );
+    this.addEventListener('loadeddata', (e) => {
+      this.style['aspect-ratio'] = this.videoWidth / this.videoHeight;
+    });
+    // this.setupPeerConnection();
+  }
+// 用户设置事件处理函数
+    set onclose(callback) {
+        if (typeof callback === 'function') {
+            this._onClose = callback;
+        }
+    }
+
+    set onopen(callback) {
+        if (typeof callback === 'function') {
+            this._onOpen = callback;
+        }
+    }
+    set onmessage(callback) {
+      if (typeof callback === 'function') {
+          this._onMessage = callback;
+      }
+  }
+  checkWebRTCSupport() {
+    // Step 2: Check for RTCPeerConnection
+    const RTCPeerConnection =
+      window.RTCPeerConnection ||
+      window.webkitRTCPeerConnection ||
+      window.mozRTCPeerConnection;
+    if (!RTCPeerConnection) {
+      console.warn('checkWebRTCSupport RTCPeerConnection not supported');
+      return false;
+    }
+    // Step 3: Check for DataChannel
+    let dataChannelSupported = false;
+    let pc = null;
+    if (RTCPeerConnection) {
+      try {
+        pc = new RTCPeerConnection();
+        const dc = pc.createDataChannel('test');
+        dataChannelSupported = !!dc;
+        dc.close(); // Close the DataChannel when done
+        pc.close();
+      } catch (e) {
+        console.error(e);
+        console.warn('checkWebRTCSupport dataChannelSupported not supported');
+        return false;
+      }
+      if (!dataChannelSupported) {
+        console.warn('checkWebRTCSupport DataChannel not supported');
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // setupWebsocket
+  async connectedCallback() {
+    if (false == this.checkWebRTCSupport()) {
+      const overlayDiv = document.createElement('div');
+      overlayDiv.innerHTML =
+        '你的浏览器版本过低!<br>推荐使用谷歌100以上版本浏览器!!';
+      overlayDiv.style.position = 'absolute';
+      overlayDiv.style.top = '50%';
+      overlayDiv.style.left = '50%';
+      overlayDiv.style.transform = 'translate(-50%, -50%)';
+      overlayDiv.style.background = 'rgba(255, 255, 255, 0.8)';
+      overlayDiv.style.padding = '10px';
+      overlayDiv.style.borderRadius = '5px';
+      overlayDiv.style.display = 'block'; // Initially hidden
+      this.parentNode.appendChild(overlayDiv);
+    }
+    // This will happen each time the node is moved, and may happen before the element"s contents have been fully parsed. may be called once your element is no longer connected
+    if (!this.isConnected) return;
+    if (
+      this.pc.connectionState === 'connected' &&
+      this.dc.readyState === 'open' &&
+      this.ws.readyState === 1
+    ) {
+      // this.pc.restartIce();
+      this.play();
+      return;
+    }
+    // await new Promise((res) => setTimeout(res, 1000));
+    this.ws.onclose = null;
+    this.ws.close(1000);
+    this.sceneId = this.dataset.sceneId;
+    this.viewMode = this.dataset.viewMode;
+    this.token = this.dataset.token;
+    const wsUrl =
+      // 'ws:58.34.215.19:3000' +
+      // 'ws:10.1.162.189:3000' +
+      'ws:10.1.162.193:3000' +
+      `?sceneId=${this.sceneId}&token=${this.token}&&view_mode=${this.viewMode}`;
+    this.ws = new WebSocket(wsUrl, 'peer-stream');
+    this.ws.onerror;
+    this.ws.onopen = () => {
+      console.info('✅', this.ws);
+    };
+    this.ws.onmessage = (e) => {
+      this.onWebSocketMessage(e.data);
+    };
+    this.ws.onclose = (e) => {
+      console.warn(e);
+      this.dispatchEvent(new CustomEvent('playerdisconnected', {}));
+      this.dispatchEvent(new CustomEvent('disConnected', {}));
+      // clearTimeout(this.reconnect);
+      // this.reconnect = setTimeout(() => this.connectedCallback(), 3000);
+    };
+  }
+  // 当属性发生变化时，会调用这个回调
+  static get observedAttributes() {
+    return ['sceneId', 'token','viewMode']; // 监听的属性
+  }
+  disconnectedCallback() {
+    if(this._onClose)this._onClose();
+    // lifecycle binding
+    setTimeout(() => {
+      if (this.isConnected) return;
+      this.ws.close(1000);
+      this.pc.close();
+      console.log('❌ peer connection closing');
+      if(this.dc)this.dc.close();
+    }, 100);
+  }
+
+  adoptedCallback() {}
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isConnected) return;
+    // fired before connectedCallback when startup
+    this.ws.close(1000);
+    //
+    if (name === 'viewMode') {
+      this.viewMode = newValue;
+    } else if (name === 'sceneId') {
+      this.sceneId = newValue ; // controls 属性只接受 'true' 或 'false'
+    } else if(name === 'token') {
+      this.token = newValue;
+    }
+  }
+
+  async onWebSocketMessage(msg) {
+    try {
+      msg = JSON.parse(msg);
+    } catch {
+      console.debug('↓↓', msg);
+      return;
+    }    
+    if (msg.type === 'offer') {
+      this.setupPeerConnection();
+      const offer = new RTCSessionDescription(msg);
+      console.log('↓↓ offer', offer);
+      await this.pc.setRemoteDescription(offer);
+      // Setup a transceiver for getting UE video
+      this.pc.addTransceiver('video', { direction: 'recvonly' });
+      const answer = await this.pc.createAnswer();
+      await this.pc.setLocalDescription(answer);
+      console.log('↑↑ answer', answer);
+      this.ws.send(JSON.stringify(answer));
+      for (let receiver of this.pc.getReceivers()) {
+        receiver.playoutDelayHint = 0;
+      }
+    } else if (msg.type === 'iceCandidate') {
+      const candidate = new RTCIceCandidate(msg.candidate);
+      console.log('↓↓ candidate:', candidate);
+      await this.pc.addIceCandidate(candidate);
+    } else if (msg.type === 'answer') {
+      const answer = new RTCSessionDescription(msg);
+      await this.pc.setRemoteDescription(answer);
+      console.log('↓↓ answer:', answer);
+      for (const receiver of this.pc.getReceivers()) {
+        receiver.playoutDelayHint = 0;
+      }
+    } else if (msg.type === 'playerqueue') {
+      this.dispatchEvent(new CustomEvent('playerqueue', { detail: msg }));
+      console.log('↓↓ playerqueue:', msg);
+    } else if (msg.type === 'setIceServers') {
+      iceServers = msg.iceServers;
+      console.log('↓↓ setIceServers:', msg);
+    } else if (msg.type === 'playerConnected') {
+      console.log('↓↓ playerConnected:', msg);
+      this.setupPeerConnection_ue4();
+      this.setupDataChannel_ue4();
+    } else if (msg.type === 'ping') {
+      console.log('↓↓ ping:', msg);
+      msg.type = 'pong';
+      this.ws.send(JSON.stringify(msg));
+      if (this.mouseReleaseTime) {
+        let now = new Date();
+        if (now - this.lastmouseTime > this.mouseReleaseTime * 1000) {
+          msg.type = 'mouseRelease';
+          this.ws.send(JSON.stringify(msg));
+        }
+      }
+    } else if (msg.type === 'ueDisConnected') {
+      this.dispatchEvent(new CustomEvent('ueDisConnected', { detail: msg }));
+      console.log('↓↓ ueDisConnected:', msg);
+    } else if (msg.type === 'setmouseReleaseTime') {
+      this.mouseReleaseTime = msg.mouseReleaseTime;
+      this.lastmouseTime = new Date();
+      console.log('↓↓ setmouseReleaseTime:', msg);
+    } else if (msg.type === 'getStatus') {
+      console.log('↓↓ getStatus:', msg);
+      this.handleGetStatus(msg);
+    } else {
+      console.warn('↓↓', msg);
+      this.dispatchEvent(new CustomEvent('message', { detail:JSON.stringify(msg) }));
+    }
+  }
+
+  handleGetStatus(msg) {
+    if (false == this.pc instanceof RTCPeerConnection) {
+      msg.videoencoderqp = null;
+      msg.netrate = null;
+      this.ws.send(JSON.stringify(msg));
+      console.log('↑↑ handleGetStatus:', msg);
+      return;
+    }
+    let initialBytesReceived = 0;
+    // 获取初始统计信息
+    this.pc.getStats(null).then((stats) => {
+      stats.forEach((report) => {
+        if (report.type === 'transport') {
+          initialBytesReceived = report.bytesReceived;
+        }
+      });
+    });
+    // 等待指定的时间间隔后再次获取统计信息
+    let durationInSeconds = 0.2;
+    setTimeout(() => {
+      this.pc.getStats(null).then((stats) => {
+        stats.forEach((report) => {
+          if (report.type === 'transport') {
+            const finalBytesReceived = report.bytesReceived;
+            const bytesReceived = finalBytesReceived - initialBytesReceived;
+            // 计算平均带宽（单位：字节/秒）
+            const averageReceiveBandwidth =
+              ((bytesReceived / durationInSeconds) * 8) / 1000 / 1000;
+            msg.videoencoderqp = this.VideoEncoderQP;
+            msg.netrate = averageReceiveBandwidth.toFixed(2);
+            this.ws.send(JSON.stringify(msg));
+            console.log('↑↑ handleGetStatus:', msg);
+          }
+        });
+      });
+    }, durationInSeconds * 1000);
+  }
+
+  onDataChannelMessage(data) {
+    data = new Uint8Array(data);
+    const utf16 = new TextDecoder('utf-16');
+    switch (data[0]) {
+      case RECEIVE.VideoEncoderAvgQP: {
+        this.VideoEncoderQP = +utf16.decode(data.slice(1));
+        // console.debug("↓↓ QP:", this.VideoEncoderQP);
+        break;
+      }
+      case RECEIVE.Response: {
+        // user custom message
+        const detail = utf16.decode(data.slice(1));
+        this.dispatchEvent(new CustomEvent('message', { detail }));
+        console.info(detail);
+        break;
+      }
+      case RECEIVE.Command: {
+        const command = JSON.parse(utf16.decode(data.slice(1)));
+        console.info('↓↓ command:', command);
+        if (command.command === 'onScreenKeyboard') {
+          console.info('You should setup a on-screen keyboard');
+          if (command.showOnScreenKeyboard) {
+            if (this.enableChinese) {
+              let input = document.createElement('input');
+              input.style.position = 'fixed';
+              input.style.zIndex = -1;
+              input.autofocus = true;
+              document.body.append(input);
+              input.focus();
+              input.addEventListener('compositionend', (e) => {
+                console.log(e.data);
+                this.emitMessage(e.data, SEND.CompositionEnd);
+              });
+              input.addEventListener('blue', (e) => {
+                input.remove();
+              });
+              input.addEventListener('keydown', (e) => {
+                this.onkeydown(e);
+              });
+              input.addEventListener('keyup', (e) => {
+                this.onkeyup(e);
+              });
+              input.addEventListener('keypress', (e) => {
+                this.onkeypress(e);
+              });
+            }
+          }
+        }
+        break;
+      }
+      case RECEIVE.FreezeFrame: {
+        const size = new DataView(data.slice(1, 5).buffer).getInt32(0, true);
+        const jpeg = data.slice(1 + 4);
+        console.info('↓↓ freezed frame:', jpeg);
+        break;
+      }
+      case RECEIVE.UnfreezeFrame: {
+        console.info('↓↓ 【unfreeze frame】');
+        break;
+      }
+      case RECEIVE.LatencyTest: {
+        const latencyTimings = JSON.parse(utf16.decode(data.slice(1)));
+        console.info('↓↓ latency timings:', latencyTimings);
+        break;
+      }
+      case RECEIVE.QualityControlOwnership: {
+        this.QualityControlOwnership = data[1] !== 0;
+        console.info(
+          '↓↓ Quality Control Ownership:',
+          this.QualityControlOwnership,
+        );
+        break;
+      }
+      case RECEIVE.InitialSettings: {
+        this.InitialSettings = JSON.parse(utf16.decode(data.slice(1)));
+        console.log('↓↓ initial setting:', this.InitialSettings);
+        break;
+      }
+      case RECEIVE.InputControlOwnership: {
+        this.InputControlOwnership = data[1] !== 0;
+        console.log('↓↓ input control ownership:', this.InputControlOwnership);
+        break;
+      }
+      case RECEIVE.Protocol: {
+        let protocol = JSON.parse(utf16.decode(data.slice(1)));
+        console.log(protocol);
+        if (protocol.Direction === 0) {
+          for (let key in protocol) {
+            SEND[key] = protocol[key].id;
+          }
+        } else if (protocol.Direction === 1) {
+          for (let key in protocol) {
+            RECEIVE[key] = protocol[key].id;
+          }
+        }
+        this.dc.send(new Uint8Array([SEND.RequestInitialSettings]));
+        this.dc.send(new Uint8Array([SEND.RequestQualityControl]));
+        break;
+      }
+      default: {
+        console.error('↓↓ invalid data:', data);
+      }
+    }
+  }
+
+  setupVideo() {
+    this.tabIndex = 0; // easy to focus..
+    // this.autofocus = true;
+    this.playsInline = true;
+    this.disablepictureinpicture = true;
+    // Recently many browsers can only autoplay the videos with sound off
+    this.muted = true;
+    this.autoplay = true;
+    // this.onsuspend
+    // this.onresize
+    // this.requestPointerLock();
+    this.style['pointer-events'] = 'none';
+    this.style['object-fit'] = 'fill';
+  }
+
+  setupDataChannel(e) {
+    // See https://www.w3.org/TR/webrtc/#dom-rtcdatachannelinit for values (this is needed for Firefox to be consistent with Chrome.)
+    // this.dc = this.pc.createDataChannel(label, { ordered: true });
+    this.dc = e.channel;
+    // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+    this.dc.binaryType = 'arraybuffer';
+    this.dc.onopen = (e) => {
+      console.log('✅', this.dc);
+      this.style.pointerEvents = 'auto';
+      // setTimeout(() => {
+      // 	this.dc.send(new Uint8Array([SEND.RequestInitialSettings]));
+      // 	this.dc.send(new Uint8Array([SEND.RequestQualityControl]));
+      // }, 500);
+    };
+    this.dc.onclose = (e) => {
+      console.info('❌ data channel closed');
+      this.style.pointerEvents = 'none';
+      this.blur();
+      // this.dispatchEvent(new CustomEvent('ueDisConnected', {  }));
+    };
+    this.dc.onerror;
+    this.dc.onmessage = (e) => {
+      this.onDataChannelMessage(e.data);
+    };
+  }
+
+  setupDataChannel_ue4(label = 'hello') {
+    // See https://www.w3.org/TR/webrtc/#dom-rtcdatachannelinit for values (this is needed for Firefox to be consistent with Chrome.)
+    this.dc = this.pc.createDataChannel(label, { ordered: true });
+    // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+    this.dc.binaryType = 'arraybuffer';
+    this.dc.onopen = (e) => {
+      console.log('✅ data channel connected:', label);
+      this.style.pointerEvents = 'auto';
+      this.dc.send(new Uint8Array([SEND.RequestInitialSettings]));
+      this.dc.send(new Uint8Array([SEND.RequestQualityControl]));
+    };
+    this.dc.onclose = (e) => {
+      console.info('❌ data channel closed:', label);
+      this.style.pointerEvents = 'none';
+    };
+    this.dc.onmessage = (e) => {
+      this.onDataChannelMessage(e.data);
+    };
+  }
+
+  setupPeerConnection() {
+    this.pc.close();
+    this.pc = new RTCPeerConnection({
+      sdpSemantics: 'unified-plan',
+      bundlePolicy: 'balanced',
+      iceServers: iceServers,
+      // iceTransportPolicy:'relay',
+      iceConnectionTimeout: 40000 // 设置为更长的时间，例如10秒
+    });
+    this.pc.ontrack = (e) => {
+      console.log(`↓↓ ${e.track.kind} track:`, e);
+      if (e.track.kind === 'video') {
+        this.srcObject = e.streams[0];
+      } else if (e.track.kind === 'audio') {
+        this.audio = document.createElement('audio');
+        this.audio.autoplay = true;
+        this.audio.srcObject = e.streams[0];
+      }
+    };
+    this.pc.onicecandidate = (e) => {
+      // firefox
+      if (e.candidate?.candidate) {
+        console.log('↑↑ candidate:', e.candidate);
+        this.ws.send(
+          JSON.stringify({ type: 'iceCandidate', candidate: e.candidate }),
+        );
+      } else {
+        // Notice that the end of negotiation is detected here when the event"s candidate property is null.
+      }
+    };
+    this.pc.ondatachannel = (e) => {
+      this.setupDataChannel(e);
+    };
+    // 监听 iceconnectionstatechange 事件
+    this.pc.addEventListener('iceconnectionstatechange', () => {
+      const state = this.pc.iceConnectionState;
+      console.log('ICE connection state:', state);
+
+      if (state === 'connected' || state === 'completed') {
+        console.log('WebRTC connection established successfully!');
+        // 这里可以开始传输视频、音频等媒体数据
+      } else if (state === 'failed') {
+        console.error('ICE connection failed!');
+      } else if (state === 'disconnected') {
+        console.warn('ICE connection disconnected!');
+      }
+    });
+  }
+
+  
+
+  setupPeerConnection_ue4() {
+    this.pc.close();
+    this.pc = new RTCPeerConnection({
+      sdpSemantics: 'unified-plan',
+      bundlePolicy: 'balanced',
+      iceServers: iceServers,      
+    });
+    this.pc.ontrack = (e) => {
+      console.log(`↓↓ ${e.track.kind} track:`, e);
+      if (e.track.kind === 'video') {
+        this.srcObject = e.streams[0];
+      } else if (e.track.kind === 'audio') {
+        this.audio = document.createElement('audio');
+        this.audio.autoplay = true;
+        this.audio.srcObject = e.streams[0];
+      }
+    };
+    this.pc.onicecandidate = (e) => {
+      // firefox
+      if (e.candidate?.candidate) {
+        console.log('↑↑ candidate:', e.candidate);
+        this.ws.send(
+          JSON.stringify({ type: 'iceCandidate', candidate: e.candidate }),
+        );
+      } else {
+        // Notice that the end of negotiation is detected here when the event"s candidate property is null.
+      }
+    };
+    this.pc.onnegotiationneeded = (e) => {
+      this.setupOffer();
+    };
+  }
+
+  async setupOffer() {
+    // this.pc.addTransceiver("video", { direction: "recvonly" });
+    const offer = await this.pc.createOffer({
+      offerToReceiveAudio: +this.hasAttribute('audio'),
+      offerToReceiveVideo: 1,
+      voiceActivityDetection: false,
+    });
+    // this indicate we support stereo (Chrome needs this)
+    offer.sdp = offer.sdp.replace(
+      'useinbandfec=1',
+      'useinbandfec=1;stereo=1;sprop-maxcapturerate=48000',
+    );
+    this.pc.setLocalDescription(offer);
+    this.ws.send(JSON.stringify(offer));
+    console.log('↓↓ sending offer:', offer);
+  }
+
+  keysDown = new Set();
+
+  registerKeyboardEvents() {
+    this.onkeydown = (e) => {
+      const keyCode = SpecialKeyCodes[e.code] || e.keyCode;
+      this.dc.send(new Uint8Array([SEND.KeyDown, keyCode, e.repeat]));
+      this.keysDown.add(keyCode);
+      // Backspace is not considered a keypress in JavaScript but we need it
+      // to be so characters may be deleted in a UE text entry field.
+      if (e.keyCode === SpecialKeyCodes.Backspace) {
+        this.onkeypress({
+          keyCode: SpecialKeyCodes.Backspace,
+        });
+      }
+      // whether to prevent browser"s default behavior when keyboard/mouse have inputs, like F1~F12 and Tab
+      // e.preventDefault();
+    };
+    this.onkeyup = (e) => {
+      const keyCode = SpecialKeyCodes[e.code] || e.keyCode;
+      this.dc.send(new Uint8Array([SEND.KeyUp, keyCode]));
+      this.keysDown.delete(keyCode);
+    };
+    this.onkeypress = (e) => {
+      const data = new DataView(new ArrayBuffer(3));
+      data.setUint8(0, SEND.KeyPress);
+      data.setUint16(1, SpecialKeyCodes[e.code] || e.keyCode, true);
+      this.dc.send(data);
+    };
+    this.onblur = (e) => {
+      this.keysDown.forEach((keyCode) => {
+        this.dc.send(new Uint8Array([SEND.KeyUp, keyCode]));
+      });
+      this.keysDown.clear();
+    };
+  }
+
+  registerTouchEvents() {
+    // We need to assign a unique identifier to each finger.
+    // We do this by mapping each Touch object to the identifier.
+    const fingers = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
+    const fingerIds = {};
+    this.ontouchstart = (e) => {
+      // Assign a unique identifier to each touch.
+      for (const touch of e.changedTouches) {
+        // remember touch
+        const finger = fingers.pop();
+        if (finger === undefined) {
+          console.info('exhausted touch indentifiers');
+        }
+        fingerIds[touch.identifier] = finger;
+      }
+      this.emitTouchData(SEND.TouchStart, e.changedTouches, fingerIds);
+      e.preventDefault();
+    };
+    this.ontouchend = (e) => {
+      this.emitTouchData(SEND.TouchEnd, e.changedTouches, fingerIds);
+      // Re-cycle unique identifiers previously assigned to each touch.
+      for (const touch of e.changedTouches) {
+        // forget touch
+        fingers.push(fingerIds[touch.identifier]);
+        delete fingerIds[touch.identifier];
+      }
+      e.preventDefault();
+    };
+    this.ontouchmove = (e) => {
+      this.emitTouchData(SEND.TouchMove, e.touches, fingerIds);
+      e.preventDefault();
+    };
+  }
+
+  // touch as mouse
+  registerFakeMouseEvents() {
+    let finger = undefined;
+    const { left, top } = this.getBoundingClientRect();
+    this.ontouchstart = (e) => {
+      if (finger === undefined) {
+        const firstTouch = e.changedTouches[0];
+        finger = {
+          id: firstTouch.identifier,
+          x: firstTouch.clientX - left,
+          y: firstTouch.clientY - top,
+        };
+        // Hack: Mouse events require an enter and leave so we just enter and leave manually with each touch as this event is not fired with a touch device.
+        this.onmouseenter(e);
+        this.emitMouseDown(MouseButton.MainButton, finger.x, finger.y);
+      }
+      e.preventDefault();
+    };
+    this.ontouchend = (e) => {
+      // filtering multi finger touch events temporarily
+      if (finger) {
+        for (const touch of e.changedTouches) {
+          if (touch.identifier === finger.id) {
+            const x = touch.clientX - left;
+            const y = touch.clientY - top;
+            this.emitMouseUp(MouseButton.MainButton, x, y);
+            // Hack: Manual mouse leave event.
+            this.onmouseleave(e);
+            finger = undefined;
+            break;
+          }
+        }
+      }
+      e.preventDefault();
+    };
+    this.ontouchmove = (e) => {
+      // filtering multi finger touch events temporarily
+      if (finger) {
+        for (const touch of e.touches) {
+          if (touch.identifier === finger.id) {
+            const x = touch.clientX - left;
+            const y = touch.clientY - top;
+            this.emitMouseMove(x, y, x - finger.x, y - finger.y);
+            finger.x = x;
+            finger.y = y;
+            break;
+          }
+        }
+      }
+      e.preventDefault();
+    };
+  }
+
+  registerMouseHoverEvents() {
+    this.registerMouseEnterAndLeaveEvents();
+    this.onmousemove = (e) => {
+      this.emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY);
+      e.preventDefault();
+    };
+    this.onmousedown = (e) => {
+      this.emitMouseDown(e.button, e.offsetX, e.offsetY);
+      // e.preventDefault();
+    };
+    this.onmouseup = (e) => {
+      this.emitMouseUp(e.button, e.offsetX, e.offsetY);
+      // e.preventDefault();
+    };
+    // When the context menu is shown then it is safest to release the button which was pressed when the event happened. This will guarantee we will get at least one mouse up corresponding to a mouse down event. Otherwise the mouse can get stuck.
+    // https://github.com/facebook/react/issues/5531
+    this.oncontextmenu = (e) => {
+      this.emitMouseUp(e.button, e.offsetX, e.offsetY);
+      e.preventDefault();
+    };
+    this.onwheel = (e) => {
+      this.emitMouseWheel(e.wheelDelta, e.offsetX, e.offsetY);
+      e.preventDefault();
+    };
+  }
+
+  registerPointerLockEvents() {
+    this.registerMouseEnterAndLeaveEvents();
+    console.info('mouse locked in, ESC to exit');
+    const { clientWidth, clientHeight } = this;
+    let x = clientWidth / 2;
+    let y = clientHeight / 2;
+    this.onmousemove = (e) => {
+      x += e.movementX;
+      y += e.movementY;
+      x = (x + clientWidth) % clientWidth;
+      y = (y + clientHeight) % clientHeight;
+      this.emitMouseMove(x, y, e.movementX, e.movementY);
+    };
+    this.onmousedown = (e) => {
+      this.emitMouseDown(e.button, x, y);
+    };
+    this.onmouseup = (e) => {
+      this.emitMouseUp(e.button, x, y);
+    };
+    this.onwheel = (e) => {
+      this.emitMouseWheel(e.wheelDelta, x, y);
+    };
+  }
+
+  registerMouseEnterAndLeaveEvents() {
+    this.onmouseenter = (e) => {
+      this.dc.send(new Uint8Array([SEND.MouseEnter]));
+    };
+    this.onmouseleave = (e) => {
+      if (this.dc.readyState === 'open')
+        this.dc.send(new Uint8Array([SEND.MouseLeave]));
+      // 释放掉
+      for (let i = 1; i <= 16; i *= 2) {
+        if (e.buttons & i) {
+          this.emitMouseUp(MouseButtonsMask[i], 0, 0);
+        }
+      }
+    };
+  }
+
+  emitMouseMove(x, y, deltaX, deltaY) {
+    const coord = this.normalize(x, y);
+    deltaX = (deltaX * 65536) / this.clientWidth;
+    deltaY = (deltaY * 65536) / this.clientHeight;
+    const data = new DataView(new ArrayBuffer(9));
+    data.setUint8(0, SEND.MouseMove);
+    data.setUint16(1, coord.x, true);
+    data.setUint16(3, coord.y, true);
+    data.setInt16(5, deltaX, true);
+    data.setInt16(7, deltaY, true);
+    this.dc.send(data);
+    this.lastmouseTime = new Date();
+  }
+
+  emitMouseDown(button, x, y) {
+    const coord = this.normalize(x, y);
+    const data = new DataView(new ArrayBuffer(6));
+    data.setUint8(0, SEND.MouseDown);
+    data.setUint8(1, button);
+    data.setUint16(2, coord.x, true);
+    data.setUint16(4, coord.y, true);
+    this.dc.send(data);
+    if (this.enableChinese) {
+      this.dc.send(new Uint8Array([SEND.FindFocus]));
+    }
+  }
+
+  emitMouseUp(button, x, y) {
+    const coord = this.normalize(x, y);
+    const data = new DataView(new ArrayBuffer(6));
+    data.setUint8(0, SEND.MouseUp);
+    data.setUint8(1, button);
+    data.setUint16(2, coord.x, true);
+    data.setUint16(4, coord.y, true);
+    this.dc.send(data);
+  }
+
+  emitMouseWheel(delta, x, y) {
+    const coord = this.normalize(x, y);
+    const data = new DataView(new ArrayBuffer(7));
+    data.setUint8(0, SEND.MouseWheel);
+    data.setInt16(1, delta, true);
+    data.setUint16(3, coord.x, true);
+    data.setUint16(5, coord.y, true);
+    this.dc.send(data);
+  }
+
+  emitTouchData(type, touches, fingerIds) {
+    const data = new DataView(new ArrayBuffer(2 + 6 * touches.length));
+    data.setUint8(0, type);
+    data.setUint8(1, touches.length);
+    let byte = 2;
+    for (const touch of touches) {
+      const x = touch.clientX - this.offsetLeft;
+      const y = touch.clientY - this.offsetTop;
+      const coord = this.normalize(x, y);
+      data.setUint16(byte, coord.x, true);
+      byte += 2;
+      data.setUint16(byte, coord.y, true);
+      byte += 2;
+      data.setUint8(byte, fingerIds[touch.identifier], true);
+      byte += 1;
+      data.setUint8(byte, 255 * touch.force, true); // force is between 0.0 and 1.0 so quantize into byte.
+      byte += 1;
+    }
+    this.dc.send(data);
+  }
+
+  // emit string
+  emitMessage(msg, messageType = SEND.UIInteraction) {
+    if (typeof msg !== 'string') msg = JSON.stringify(msg);
+    // Add the UTF-16 JSON string to the array byte buffer, going two bytes at a time.
+    const data = new DataView(new ArrayBuffer(1 + 2 + 2 * msg.length));
+    let byteIdx = 0;
+    data.setUint8(byteIdx, messageType);
+    byteIdx++;
+    data.setUint16(byteIdx, msg.length, true);
+    byteIdx += 2;
+    for (let i = 0; i < msg.length; i++) {
+      // charCodeAt() is UTF-16, codePointAt() is Unicode.
+      data.setUint16(byteIdx, msg.charCodeAt(i), true);
+      byteIdx += 2;
+    }
+    this.dc.send(data);
+    return new Promise((resolve) =>
+      this.addEventListener('message', (e) => resolve(e.detail), {
+        once: true,
+      }),
+    );
+  }
+
+  normalize(x, y) {
+    const normalizedX = x / this.clientWidth;
+    const normalizedY = y / this.clientHeight;
+    if (
+      normalizedX < 0.0 ||
+      normalizedX > 1.0 ||
+      normalizedY < 0.0 ||
+      normalizedY > 1.0
+    ) {
+      return {
+        inRange: false,
+        x: 65535,
+        y: 65535,
+      };
+    } else {
+      return {
+        inRange: true,
+        x: normalizedX * 65536,
+        y: normalizedY * 65536,
+      };
+    }
+  }
+}
+
+customElements.define('peer-stream', PeerStream, { extends: 'video' });

src/components/UeMap.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="ue-option" :ref="val => getVideoRef(val)"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useStateManageStore } from '@/store/stateManage'
+import { getAuth } from '@/utils/ueMap.js'
+
+const stateManage = useStateManageStore()
+
+const getVideoRef = val => {
+  stateManage.setVideoContainerRef(val)
+}
+
+// const handleViewScene = (sceneId: any) => {
+//   stateManage.wsConnect(videoContainerRef, sceneId, 'VIEWONLY', localStorage.getItem('token'));
+// };
+
+function getData(url = '', token = '') {
+  return new Promise((resolve, reject) => {
+    // 创建 XMLHttpRequest 对象
+    const xhr = new XMLHttpRequest()
+
+    // 配置 GET 请求
+    xhr.open('GET', url, true)
+
+    // 如果提供了 token，设置 Authorization 头
+    if (token) {
+      xhr.setRequestHeader('Authorization', `Bearer ${token}`)
+    }
+
+    // 设置响应处理
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(JSON.parse(xhr.responseText)) // 请求成功，解析 JSON 响应
+      } else {
+        reject(`Error: ${xhr.status}`) // 请求失败
+      }
+    }
+
+    // 设置错误处理
+    xhr.onerror = () => reject('Request failed')
+
+    // 发送 GET 请求
+    xhr.send()
+  })
+}
+
+async function getUEAuth() {
+  try {
+    await getAuth({ username: 'JKTest', password: '123456' }).then(res => {
+      localStorage.setItem('token', res.access_token)
+      init()
+    })
+  } catch (error) {
+    console.error('获取 UE token 失败', error)
+  }
+}
+
+function init() {
+  const script = document.createElement('script')
+  // script.src = '/pixel-streaming-client/peer-stream.js'; // 自定义元素文件的路径
+  console.log(import.meta.env)
+  script.src = './peer-stream.js' // 自定义元素文件的路径
+  script.async = true
+  script.onload = () => {
+    console.log('PeerStream custom element script loaded')
+  }
+  document.body.appendChild(script)
+  let token = localStorage.getItem('token')
+  console.log(token, 'getItemToken')
+  const fetchData = async () => {
+    try {
+      const sceneList = await getData(import.meta.env.VITE_SERVICE_API_URL + '/scenePermission', localStorage.getItem('token'))
+
+      console.log(sceneList, 'sceneList')
+      stateManage.fSceneList = sceneList[0] // 设置场景列表数据到状态
+      console.log(stateManage.fSceneList, 'stateManage.fSceneList')
+      stateManage.handleOperateScene()
+     
+    } catch (error) {
+      alert(error)
+    }
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  getUEAuth()
+})
+</script>
+
+<style lang="scss" scoped>
+.ue-option {
+  position: absolute;
+  top:0px;
+  left: 0px;
+  // z-index: 9992;
+  // flex: 1;
+  // height: 100%;
+  // width: 100%;
+  height: 1080px;
+  width: 3840px;
+  overflow: hidden;
+}
+</style>

src/store/stateManage.js

@@ -0,0 +1,178 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useStateManageStore = defineStore('stateManage', () => {
+  const fSceneList = ref();
+  // 编辑器ref
+  const jsonEditor = ref(null);
+  // 消息message
+  const videoMessage = ref('');
+  const videoContainerRef = ref(null);
+  const setVideoContainerRef = (val) => {
+    videoContainerRef.value = val;
+  };
+  const peerStreamRef = ref(null);
+  const connectFlag = ref(false);
+  const connectStatus = ref('未连接');
+  async function getStats (ps) {
+    if (ps?.pc?.connectionState !== 'connected') return;
+    let cue = ` 场景状态 \nCurrent Time: ${ps.currentTime} s`;
+    // most < 27
+    if (ps.VideoEncoderQP < 27) {
+      document.documentElement.style.setProperty('--cue', 'lime');
+    } else if (ps.VideoEncoderQP < 36) {
+      document.documentElement.style.setProperty('--cue', 'orange');
+      cue += `\n Spotty Network !`;
+    } else {
+      document.documentElement.style.setProperty('--cue', 'red');
+      cue += `\n Bad Network !!`;
+    }
+    cue += `\n Video Quantization Parameter: ${ps.VideoEncoderQP}`;
+    let bytesReceived = '\n';
+    let codec = '\n';
+    const stats = await ps.pc.getStats(null);
+    stats.forEach((stat) => {
+      switch (stat.type) {
+        case 'data-channel': {
+          cue += `\n Data Channel 🢁 ${stat.bytesSent.toLocaleString()} B 🢃 ${stat.bytesReceived.toLocaleString()} B`;
+          break;
+        }
+        case 'inbound-rtp': {
+          if (stat.mediaType === 'video') {
+            cue += `\n 💻 ${stat.frameWidth} x ${stat.frameHeight} 📷 ${stat.framesPerSecond} FPS`;
+            cue += `\n Frames Decoded: ${stat.framesDecoded.toLocaleString()}`;
+            cue += `\n ${stat.packetsLost.toLocaleString()} packets lost, ${stat.framesDropped} frames dropped`;
+            bytesReceived += ` video ${stat.bytesReceived.toLocaleString()} B 🢃`;
+          } else if (stat.mediaType === 'audio') bytesReceived += ` audio ${stat.bytesReceived.toLocaleString()} B 🢃`;
+          break;
+        }
+        case 'codec': {
+          codec += ' ' + stat.mimeType;
+          break;
+        }
+        case 'transport': {
+          const bitrate = ~~(((stat.bytesReceived - ps.bytesReceived) / (stat.timestamp - ps.timestamp)) * (1000 * 8));
+          cue += `\n Bitrate 🢃 ${bitrate.toLocaleString()} bps`;
+          ps.bytesReceived = stat.bytesReceived;
+          ps.timestamp = stat.timestamp;
+          break;
+        }
+        default: {
+        }
+      }
+    });
+    cue += bytesReceived;
+    cue += codec;
+    return cue;
+  }
+  const wsConnect = (sceneId, view_mode, token) => {
+    // 确保 videoContainerRef 指向一个有效的容器
+    if (videoContainerRef.value) {
+      // 清空容器
+      videoContainerRef.value.innerHTML = '';
+      // 创建 PeerStream 元素
+      peerStreamRef.value = document.createElement('video', { is: 'peer-stream' });
+      peerStreamRef.value.dataset.sceneId = sceneId;
+      peerStreamRef.value.dataset.viewMode = view_mode;
+      peerStreamRef.value.dataset.token = token ;
+      peerStreamRef.value.style.width = '100%';
+      peerStreamRef.value.style.height = '100%';
+      videoContainerRef.value.appendChild(peerStreamRef.value );
+      //场景关闭按钮
+
+      // 添加关闭场景按钮
+      // const closeButton = document.createElement('button');
+      // closeButton.innerText = '关闭场景';
+      // closeButton.style.position = 'absolute';
+      // closeButton.style.top = '10px';
+      // closeButton.style.right = '10px';
+      // closeButton.style.zIndex = '10';
+      // closeButton.style.border = '1px solid gray';
+      // closeButton.addEventListener('click', closeScene);
+
+      // 将关闭按钮添加到容器中
+      // videoContainerRef.value.appendChild(closeButton);
+      //场景事件
+      // peerStreamRef.value.addEventListener('playing', () => {
+      //   console.log('连接成功');
+      //   connectFlag.value = true;
+      //   connectStatus.value = '连接成功' + `(${new Date().toTimeString().split(' ')[0]})`;
+      //   const start = document.querySelector('#start');
+      //   start.innerHTML = `
+      //     <span>关闭</span>
+      //   `;
+      // });
+      // peerStreamRef.value.addEventListener('disConnected', () => {
+      //   connectStatus.value = '连接断开' + `(${new Date().toTimeString().split(' ')[0]})`;
+      //   connectFlag.value = false;
+      //   const start = document.querySelector('#start');
+      //   start.innerHTML = `
+      //     <span>开始</span>
+      //   `;
+      // });
+      peerStreamRef.value.addEventListener('message', (e) => {
+        console.log(1111111);
+        console.log(e);
+        const message = e.detail;
+        videoMessage.value = videoMessage.value + new Date().toLocaleString() + ' --> ' + e.detail.replace(/[\r\n\t]/g, '') + '\n\n';
+        connectStatus.value = message + `(${new Date().toTimeString().split(' ')[0]})`;
+      });
+      //场景状态页面
+      // const sceneMessageGetDiv = document.createElement('div');
+      // sceneMessageGetDiv.style.position = 'absolute';
+      // sceneMessageGetDiv.style.bottom = '0px';
+      // sceneMessageGetDiv.style.right = '0px';
+      // sceneMessageGetDiv.style.zIndex = '10';
+      // sceneMessageGetDiv.style.width = '25%';
+      // sceneMessageGetDiv.style.height = '30%';
+      // sceneMessageGetDiv.style.backgroundColor = 'black';
+      // sceneMessageGetDiv.style.borderRadius = '.5rem';
+      // sceneMessageGetDiv.style.padding = '.5rem';
+      // sceneMessageGetDiv.style.color = 'white';
+      // sceneMessageGetDiv.style.border = '1px solid gray';
+      // videoContainerRef.value.appendChild(sceneMessageGetDiv);
+      // sceneMessageGetDiv.innerHTML = '场景状态';
+      // (peerStreamRef.value).onplaying = () => {
+      //   setInterval(async () => {
+      //     const res = await getStats(peerStreamRef.value);
+      //     if (res) sceneMessageGetDiv.innerHTML = res?.replace(/\n/g, '<br />');
+      //   }, 1000); // Call your getStats function when the video starts playing
+      // };
+    }
+  };
+
+  const sendDataChannelCommand = (command) => {
+    if (peerStreamRef.value) {
+      console.error(peerStreamRef.value , (peerStreamRef.value ).dc);
+      // Call the send method on the custom peer-stream element
+      (peerStreamRef.value ).emitMessage(JSON.parse(command));
+      console.log('Sending command:', command);
+    }
+  };
+
+  // 关闭场景的函数
+  const closeScene = () => {
+    if (videoContainerRef.value) {
+      videoContainerRef.value.removeChild(peerStreamRef.value);
+      console.log('Scene closed');
+    }
+  };
+
+  // 点击操作场景按钮的处理函数
+  const handleOperateScene = () => {
+    wsConnect(fSceneList.value.scene_id, 'OPERABLE', localStorage.getItem('token'));
+  };
+
+  return {
+    videoContainerRef,
+    jsonEditor,
+    connectFlag,
+    videoMessage,
+    wsConnect,
+    setVideoContainerRef,
+    sendDataChannelCommand,
+    closeScene,
+    handleOperateScene,
+    fSceneList
+  };
+});

src/utils/request.js

@@ -1,441 +1,50 @@
-// import axios from 'axios'
-// import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'
-// import { getToken } from '@/utils/auth'
-// import errorCode from '@/utils/errorCode'
-// import { tansParams, blobValidate } from '@/utils/ruoyi'
-// import cache from '@/plugins/cache'
-// import { saveAs } from 'file-saver'
-// import useUserStore from '@/store/modules/user'
-
-// import router from '../router/index'
-
-// let downloadLoadingInstance
-// // 是否显示重新登录
-// export let isRelogin = { show: false }
-
-// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-// // 创建axios实例
-// const service = axios.create({
-//   // axios中请求配置有baseURL选项，表示请求URL公共部分
-//   baseURL: import.meta.env.VITE_APP_BASE_API,
-//   // 超时
-//   timeout: 10000
-// })
-
-// // request拦截器
-// service.interceptors.request.use(
-//   config => {
-//     // 是否需要设置 token
-//     const isToken = (config.headers || {}).isToken === false
-//     // 是否需要防止数据重复提交
-//     const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-//     if (getToken() && !isToken) {
-//       config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-//     }
-//     // get请求映射params参数
-//     if (config.method === 'get' && config.params) {
-//       let url = config.url + '?' + tansParams(config.params)
-//       url = url.slice(0, -1)
-//       config.params = {}
-//       config.url = url
-//     }
-//     if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-//       const requestObj = {
-//         url: config.url,
-//         data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-//         time: new Date().getTime()
-//       }
-//       const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
-//       const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
-//       if (requestSize >= limitSize) {
-//         console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-//         return config
-//       }
-//       const sessionObj = cache.session.getJSON('sessionObj')
-//       if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-//         cache.session.setJSON('sessionObj', requestObj)
-//       } else {
-//         const s_url = sessionObj.url // 请求地址
-//         const s_data = sessionObj.data // 请求数据
-//         const s_time = sessionObj.time // 请求时间
-//         const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
-//         if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-//           const message = '数据正在处理，请勿重复提交'
-//           console.warn(`[${s_url}]: ` + message)
-//           return Promise.reject(new Error(message))
-//         } else {
-//           cache.session.setJSON('sessionObj', requestObj)
-//         }
-//       }
-//     }
-//     return config
-//   },
-//   error => {
-//     console.log(error)
-//     Promise.reject(error)
-//   }
-// )
-
-// // 响应拦截器
-// service.interceptors.response.use(
-//   res => {
-//     // 未设置状态码则默认成功状态
-//     const code = res.data.code || 200
-//     // 获取错误信息
-//     const msg = errorCode[code] || res.data.msg || errorCode['default']
-//     if (+code == 599) {
-//       ElMessage({ message: msg, type: 'error' })
-//       sessionStorage.setItem('message', JSON.stringify(msg))
-//       return router.push('/599')
-//     }
-
-//     // 二进制数据则直接返回
-//     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-//       return res.data
-//     }
-//     if (code === 401) {
-//       if (!isRelogin.show) {
-//         isRelogin.show = true
-//         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' })
-//           .then(() => {
-//             isRelogin.show = false
-//             useUserStore()
-//               .logOut()
-//               .then(() => {
-//                 location.href = '/catalog/index'
-//               })
-//           })
-//           .catch(() => {
-//             isRelogin.show = false
-//           })
-//       }
-//       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-//     } else if (code === 500) {
-//       ElMessage({ message: msg, type: 'error' })
-//       return Promise.reject(new Error(msg))
-//     } else if (code === 601) {
-//       ElMessage({ message: msg, type: 'warning' })
-//       return Promise.reject(new Error(msg))
-//     } else if (code !== 200) {
-//       ElNotification.error({ title: msg })
-//       return Promise.reject('error')
-//     } else {
-//       return Promise.resolve(res.data)
-//     }
-//   },
-//   error => {
-//     console.log('err' + error)
-//     let { message } = error
-//     if (message == 'Network Error') {
-//       message = '后端接口连接异常'
-//     } else if (message.includes('timeout')) {
-//       message = '系统接口请求超时'
-//     } else if (message.includes('Request failed with status code')) {
-//       message = '系统接口' + message.substr(message.length - 3) + '异常'
-//     }
-//     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-//     return Promise.reject(error)
-//   }
-// )
-
-// // 通用下载方法
-// export function download(url, params, filename, config, ContentType) {
-//   downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' })
-//   return service
-//     .post(url, params, {
-//       transformRequest: [
-//         params => {
-//           return tansParams(params)
-//         }
-//       ],
-//       headers: { 'Content-Type': ContentType || 'application/x-www-form-urlencoded' },
-//       responseType: 'blob',
-//       ...config
-//     })
-//     .then(async data => {
-//       const isBlob = blobValidate(data)
-//       if (isBlob) {
-//         const blob = new Blob([data])
-//         saveAs(blob, filename)
-//       } else {
-//         const resText = await data.text()
-//         const rspObj = JSON.parse(resText)
-//         const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-//         ElMessage.error(errMsg)
-//       }
-//       downloadLoadingInstance.close()
-//     })
-//     .catch(r => {
-//       console.error(r)
-//       ElMessage.error('下载文件出现错误，请联系管理员！')
-//       downloadLoadingInstance.close()
-//     })
-// }
-
-// export const myRequestInstanceJson = axios.create({
-//   baseURL: import.meta.env.VITE_APP_BASE_API,
-//   method: 'post',
-//   headers: {
-//     Authorization: getToken()
-//   }
-// })
-
-// // request拦截器
-// myRequestInstanceJson.interceptors.request.use(
-//   config => {
-//     // 是否需要设置 token
-//     const isToken = (config.headers || {}).isToken === false
-//     // 是否需要防止数据重复提交
-//     const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-//     if (getToken() && !isToken) {
-//       config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-//     }
-//     // get请求映射params参数
-//     if (config.method === 'get' && config.params) {
-//       let url = config.url + '?' + tansParams(config.params)
-//       url = url.slice(0, -1)
-//       config.params = {}
-//       config.url = url
-//     }
-//     if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-//       const requestObj = {
-//         url: config.url,
-//         data: config.data,
-//         time: new Date().getTime()
-//       }
-//       const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
-//       const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
-//       if (requestSize >= limitSize) {
-//         console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-//         return config
-//       }
-//       const sessionObj = cache.session.getJSON('sessionObj')
-//       if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-//         cache.session.setJSON('sessionObj', requestObj)
-//       } else {
-//         const s_url = sessionObj.url // 请求地址
-//         const s_data = sessionObj.data // 请求数据
-//         const s_time = sessionObj.time // 请求时间
-//         const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
-//         if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-//           const message = '数据正在处理，请勿重复提交'
-//           console.warn(`[${s_url}]: ` + message)
-//           return Promise.reject(new Error(message))
-//         } else {
-//           cache.session.setJSON('sessionObj', requestObj)
-//         }
-//       }
-//     }
-//     return config
-//   },
-//   error => {
-//     console.log(error)
-//     Promise.reject(error)
-//   }
-// )
-
-// // 响应拦截器
-// myRequestInstanceJson.interceptors.response.use(
-//   res => {
-//     // 未设置状态码则默认成功状态
-//     const code = res.data.code || '200'
-//     // 获取错误信息
-//     const msg = errorCode[code] || res.data.msg || errorCode['default']
-
-//     if (+code == 599) {
-//       ElMessage({ message: msg, type: 'error' })
-//       sessionStorage.setItem('message', JSON.stringify(msg))
-//       return router.push('/599')
-//     }
-//     // 二进制数据则直接返回
-//     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-//       return res.data
-//     }
-//     if (+code === 401) {
-//       if (!isRelogin.show) {
-//         isRelogin.show = true
-//         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' })
-//           .then(() => {
-//             isRelogin.show = false
-//             useUserStore()
-//               .logOut()
-//               .then(() => {
-//                 location.href = '/catalog/index'
-//               })
-//           })
-//           .catch(() => {
-//             isRelogin.show = false
-//           })
-//       }
-//       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-//     } else if (+code === 500) {
-//       ElMessage({ message: msg, type: 'error' })
-//       return Promise.reject(new Error(msg))
-//     } else if (+code === 601) {
-//       ElMessage({ message: msg, type: 'warning' })
-//       return Promise.reject(new Error(msg))
-//     } else if (+code !== 200) {
-//       ElNotification.error({ title: msg })
-//       return Promise.reject('error')
-//     } else if (+code === 599) {
-//       ElMessage({ message: msg, type: 'error' })
-//       sessionStorage.setItem('message', JSON.stringify(msg))
-//       return router.push('/599')
-//     } else {
-//       return Promise.resolve(res.data)
-//     }
-//   },
-//   error => {
-//     console.log('err' + error)
-//     let { message } = error
-//     if (message == 'Network Error') {
-//       message = '后端接口连接异常'
-//     } else if (message.includes('timeout')) {
-//       message = '系统接口请求超时'
-//     } else if (message.includes('Request failed with status code')) {
-//       message = '系统接口' + message.substr(message.length - 3) + '异常'
-//     }
-//     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-//     return Promise.reject(error)
-//   }
-// )
-
-// export const myRequestInstance = axios.create({
-//   baseURL: import.meta.env.VITE_APP_BASE_API,
-//   method: 'post',
-//   headers: {
-//     Authorization: getToken(),
-//     'Content-Type': 'application/x-www-form-urlencoded'
-//   },
-//   transformRequest: [
-//     data => {
-//       if (data) {
-//         let params = new FormData()
-//         let keys = Object.keys(data)
-//         keys.forEach(key => {
-//           params.append(key, data[key])
-//         })
-//         return params
-//       }
-//       return data
-//     }
-//   ]
-// })
-
-// // request拦截器
-// myRequestInstance.interceptors.request.use(
-//   config => {
-//     // 是否需要设置 token
-//     const isToken = (config.headers || {}).isToken === false
-//     // 是否需要防止数据重复提交
-//     const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-//     if (getToken() && !isToken) {
-//       config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-//     }
-//     // get请求映射params参数
-//     if (config.method === 'get' && config.params) {
-//       let url = config.url + '?' + tansParams(config.params)
-//       url = url.slice(0, -1)
-//       config.params = {}
-//       config.url = url
-//     }
-//     if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-//       const requestObj = {
-//         url: config.url,
-//         data: config.data,
-//         time: new Date().getTime()
-//       }
-//       const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
-//       const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
-//       if (requestSize >= limitSize) {
-//         console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-//         return config
-//       }
-//       const sessionObj = cache.session.getJSON('sessionObj')
-//       if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-//         cache.session.setJSON('sessionObj', requestObj)
-//       } else {
-//         const s_url = sessionObj.url // 请求地址
-//         const s_data = sessionObj.data // 请求数据
-//         const s_time = sessionObj.time // 请求时间
-//         const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
-//         if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-//           const message = '数据正在处理，请勿重复提交'
-//           console.warn(`[${s_url}]: ` + message)
-//           return Promise.reject(new Error(message))
-//         } else {
-//           cache.session.setJSON('sessionObj', requestObj)
-//         }
-//       }
-//     }
-//     return config
-//   },
-//   error => {
-//     console.log(error)
-//     Promise.reject(error)
-//   }
-// )
-
-// // 响应拦截器
-// myRequestInstance.interceptors.response.use(
-//   res => {
-//     // 未设置状态码则默认成功状态
-//     const code = res.data.code || '200'
-//     // 获取错误信息
-//     const msg = errorCode[code] || res.data.msg || errorCode['default']
-//     if (+code == 599) {
-//       ElMessage({ message: msg, type: 'error' })
-//       sessionStorage.setItem('message', JSON.stringify(msg))
-//       return router.push('/599')
-//     }
-
-//     // 二进制数据则直接返回
-//     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-//       return res.data
-//     }
-//     if (+code === 401) {
-//       if (!isRelogin.show) {
-//         isRelogin.show = true
-//         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' })
-//           .then(() => {
-//             isRelogin.show = false
-//             useUserStore()
-//               .logOut()
-//               .then(() => {
-//                 location.href = '/catalog/index'
-//               })
-//           })
-//           .catch(() => {
-//             isRelogin.show = false
-//           })
-//       }
-//       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-//     } else if (+code === 500) {
-//       ElMessage({ message: msg, type: 'error' })
-//       return Promise.reject(new Error(msg))
-//     } else if (+code === 601) {
-//       ElMessage({ message: msg, type: 'warning' })
-//       return Promise.reject(new Error(msg))
-//     } else if (+code !== 200) {
-//       ElNotification.error({ title: msg })
-//       return Promise.reject('error')
-//     } else {
-//       return Promise.resolve(res.data)
-//     }
-//   },
-//   error => {
-//     console.log('err' + error)
-//     let { message } = error
-//     if (message == 'Network Error') {
-//       message = '后端接口连接异常'
-//     } else if (message.includes('timeout')) {
-//       message = '系统接口请求超时'
-//     } else if (message.includes('Request failed with status code')) {
-//       message = '系统接口' + message.substr(message.length - 3) + '异常'
-//     }
-//     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-//     return Promise.reject(error)
-//   }
-// )
-
-// export default service
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: import.meta.env.VITE_SERVICE_API_URL, // 基础 API 地址
+  timeout: 1000 // 请求超时时间
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    // 在请求前附加 token
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    console.error('请求错误：', error);
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    // 直接返回数据
+    if (response.status === 200 || response.status === 201) {
+      return response.data;
+    } else {
+      ElMessage.error(response.data.message || '请求失败');
+      return Promise.reject(response.data);
+    }
+  },
+  (error) => {
+    // 处理 HTTP 错误
+    if (error.response && error.response.status === 401) {
+      ElMessage.error('登录已过期，请重新登录');
+      localStorage.removeItem('token');
+      window.location.href = '/login';
+    } else {
+      ElMessage.error(error.response?.data?.message || '请求失败');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/utils/ueMap.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+// 获取UE token 
+export function getAuth (data) {
+  return request({
+    url: '/auth/login',
+    method: 'post',
+    data
+  })
+}

src/views/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home_container">
+    <UeMap></UeMap>
     <!-- 头部 -->
     <div class="home_container_header">
       <div class="home_container_header-left">
@@ -53,6 +54,7 @@
   </div>
 </template>
 <script setup>
+import UeMap from '../components/UeMap.vue'
 import AreaLayerSwitch from "../components/AreaLayerSwitch/index";
 import LeftPage from "./left/index.vue";
 import RightPage from "./right/index.vue";

vite.config.js

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import AutoImport from "unplugin-auto-import/vite";
@@ -7,68 +7,72 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 import postcsspxtoviewport from "postcss-px-to-viewport";
 
 // https://vite.dev/config/
-export default defineConfig({
-  server: {
-    open: true,
-    prot: 8088,
-  },
-  resolve: {
-    // https://cn.vitejs.dev/config/#resolve-alias
-    alias: {
-      // 设置路径
-      "~": path.resolve(__dirname, "./"),
-      // 设置别名
-      "@": path.resolve(__dirname, "./src"),
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    base: env.VITE_API_BASE_URL,
+    server: {
+      open: true,
+      prot: 8088,
+    },
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        "~": path.resolve(__dirname, "./"),
+        // 设置别名
+        "@": path.resolve(__dirname, "./src"),
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
     },
-    // https://cn.vitejs.dev/config/#resolve-extensions
-    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
-  },
-
-  optimizeDeps: {
-    // 开发时 解决这些commonjs包转成esm包
-    include: [
-      "@jiaminghi/c-render",
-      "@jiaminghi/c-render/lib/plugin/util",
-      "@jiaminghi/charts/lib/util/index",
-      "@jiaminghi/charts/lib/util",
-      "@jiaminghi/charts/lib/extend/index",
-      "@jiaminghi/charts",
-      "@jiaminghi/color",
-      "highcharts",
-      "highcharts/highcharts-3d",
-    ],
-  },
-  plugins: [
-    vue(),
 
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
-  ],
-  css: {
-    postcss: {
-      plugins: [
-        postcsspxtoviewport({
-          unitToConvert: "px", // 要转化的单位
-          // viewportHeight: 1080, // 可选，视口高度，通常不需要设置
-          viewportWidth: 3840, // UI设计稿的宽度
-          unitPrecision: 4, // 转换后的精度，即小数点位数
-          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-          // viewportUnit: 'vh', // 指定需要转换成的视窗单位，默认vw
-          // fontViewportUnit: 'vh', // 指定字体需要转换成的视窗单位，默认vw
-          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
-          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
-          selectorBlackList: [], // 指定不转换为视窗单位的类名，
-          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-          replace: true, // 是否转换后直接更换属性值
-          exclude: [/node_modules\/(?!element-plus)/], // 设置忽略文件，用正则做目录名匹配
-          landscape: false, // 是否处理横屏情况
-        }),
+    optimizeDeps: {
+      // 开发时 解决这些commonjs包转成esm包
+      include: [
+        "@jiaminghi/c-render",
+        "@jiaminghi/c-render/lib/plugin/util",
+        "@jiaminghi/charts/lib/util/index",
+        "@jiaminghi/charts/lib/util",
+        "@jiaminghi/charts/lib/extend/index",
+        "@jiaminghi/charts",
+        "@jiaminghi/color",
+        "highcharts",
+        "highcharts/highcharts-3d",
       ],
     },
-  },
+    plugins: [
+      vue(),
+
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+    ],
+    css: {
+      postcss: {
+        plugins: [
+          postcsspxtoviewport({
+            unitToConvert: "px", // 要转化的单位
+            // viewportHeight: 1080, // 可选，视口高度，通常不需要设置
+            viewportWidth: 3840, // UI设计稿的宽度
+            unitPrecision: 4, // 转换后的精度，即小数点位数
+            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+            // viewportUnit: 'vh', // 指定需要转换成的视窗单位，默认vw
+            // fontViewportUnit: 'vh', // 指定字体需要转换成的视窗单位，默认vw
+            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
+            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
+            selectorBlackList: [], // 指定不转换为视窗单位的类名，
+            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+            replace: true, // 是否转换后直接更换属性值
+            exclude: [/node_modules\/(?!element-plus)/], // 设置忽略文件，用正则做目录名匹配
+            landscape: false, // 是否处理横屏情况
+          }),
+        ],
+      },
+    },
+  }
 });