演示大屏使用修改

.env.development

@@ -7,7 +7,7 @@ ENV = 'development'
 # 若依管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
-VUE_APP_WS_URL = 'ws://192.168.2.16:8081'
+VUE_APP_WS_URL = 'ws://192.168.2.16:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.gitignore

@@ -22,3 +22,4 @@ selenium-debug.log
 package-lock.json
 yarn.lock
 public/video/webrtc-streamer.exe
+*.zip

package.json

@@ -43,6 +43,7 @@
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.4.1",
@@ -61,6 +62,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-flv-player": "^1.0.3",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

src/views/Screen/index.vue

@@ -73,6 +73,7 @@
                   v-model="selectVidoe"
                   @change="handleCascaderChange"
                   :options="videoList"
+                  placeholder="二楼办公室左后"
                   :props="{
                     value: 'value',
                     label: 'label',
@@ -88,15 +89,16 @@
                 class="video-box"
               ></VideoPlay> -->
               <div class="video-box" ref="videoContainer">
-                <iframe
-                  :src="iframeSrc"
-                  :style="{
-                    width: width + 'px',
-                    height: height + 'px',
-                    border: 'none',
-                  }"
-                  ref="analysisIframe"
-                ></iframe>
+                <video
+                  id="videoPlayer"
+                  ref="videoPlayer"
+                  class=""
+                  style="width: 100%; height: 100%"
+                  autoplay
+                  muted
+                  controls
+                  preload="auto"
+                ></video>
               </div>
             </div>
             <div class="content-bottom">
@@ -176,6 +178,8 @@ import {
   getVideoPlayUrlWithAlgorithm,
 } from "@/api/business/home.js";
 import { getAlarmLogList } from "@/api/business/alarmlog.js";
+// 播放FLV视频流
+import flvjs from "flv.js";
 export default {
   dicts: ["algorithm_level"],
   name: "Screen",
@@ -227,22 +231,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      // 初始化观察器
-      this.resizeObserver = new ResizeObserver((entries) => {
-        const { width, height } = entries[0].contentRect;
-        this.width = width;
-        this.height = height;
-        // 传递尺寸到iframe内部（需同源）
-        this.$refs.analysisIframe.contentWindow.postMessage(
-          {
-            type: "resize",
-            width,
-            height,
-          },
-          "*"
-        );
-      });
-      this.resizeObserver.observe(this.$refs.videoContainer);
+      this.videoPlayer();
     });
   },
   beforeDestroy() {
@@ -257,34 +246,6 @@ export default {
       await Promise.all([
         getCameraList().then((res) => {
           if (res.code !== 200) return;
-          // 在数据转换时保留原始字段
-          this.videoList = res.rows.map((camera) => ({
-            value: camera.cameraId,
-            label: camera.cameraName, // 这里保持摄像头名称
-            children: [
-              // 新增预览选项
-              { value: "preview", label: "原始画面" },
-              // 原有算法列表
-              ...camera.algorithmVo.map((algorithm) => ({
-                value: algorithm.algorithmId,
-                label: algorithm.algorithmName,
-              })),
-            ],
-          }));
-          // 设置默认选中第一个摄像头的第一个算法
-          if (
-            this.videoList.length > 0 &&
-            this.videoList[0].children?.length > 0
-          ) {
-            this.selectVidoe = [
-              this.videoList[0].value,
-              this.videoList[0].children[0].value,
-            ];
-            this.cameraName = this.videoList[0].label; // 摄像头名称
-            this.algorithmName = this.videoList[0].children[0].label; // 算法名称
-            this.iframeSrc = `${this.iframeUrl}/view/${this.videoList[0].value}/${this.videoList[0].children[0].value}`;
-          }
-          this.videoShow = true;
         }),
 
         getCameraOnlineData().then((res) => {
@@ -361,6 +322,18 @@ export default {
         this.iframeSrc = `${this.iframeUrl}/view/${value[0]}/${value[1]}`;
       }
     },
+    videoPlayer() {
+      if (flvjs.isSupported()) {
+        var videoElement = document.getElementById("videoPlayer");
+        var flvPlayer = flvjs.createPlayer({
+          type: "flv",
+          url: "http://192.168.3.248:2022/live/15_1_.flv", //你的url地址
+        });
+        flvPlayer.attachMediaElement(videoElement);
+        flvPlayer.load();
+        flvPlayer.play();
+      }
+    },
   },
 };
 </script>

src/views/dashboard/LineChartScreen.vue

@@ -146,10 +146,10 @@ export default {
           },
         },
         grid: {
-          left: 10,
-          right: 40,
+          left: 30,
+          right: 30,
           bottom: 20,
-          top: 30,
+          top: 90,
           containLabel: true,
         },
         tooltip: {
@@ -166,6 +166,11 @@ export default {
         },
         legend: {
           data: lendata,
+          //颜色、
+
+          textStyle: {
+            color: "#fff", // 图例文字颜色
+          },
         },
         series: list,
       });

vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.2.16:8081`,
+        target: `http://192.168.2.16:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''