video正常查看

public/antd_color.less

@@ -42,7 +42,7 @@ html {--antd-wave-shadow-color: @primary-color;}
 .ant-alert-info .ant-alert-icon {color: #1890ff;}
 .ant-alert-warning {background-color: #fffbe6;border: 1px solid #ffe58f;}
 .ant-alert-warning .ant-alert-icon {color: #faad14;}
-.ant-alert-error {background-color: color(~`colorPalette("@{text-color-secondary}", 1)`);border: 1px solid #ffa39e;}
+.ant-alert-error {background-color: #fff1f0;border: 1px solid #ffa39e;}
 .ant-alert-error .ant-alert-icon {color: #f5222d;}
 .ant-alert-close-icon {background-color: transparent;border: none;}
 .ant-alert-close-icon .anticon-close {color: @text-color-secondary;}
@@ -1377,7 +1377,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
 .ant-tag-magenta {color: #eb2f96;background: #fff0f6;border-color: #ffadd2;}
 .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-red {color: #f5222d;background: color(~`colorPalette("@{text-color-secondary}", 1)`);border-color: #ffa39e;}
+.ant-tag-red {color: #f5222d;background: #fff1f0;border-color: #ffa39e;}
 .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
 .ant-tag-volcano {color: #fa541c;background: #fff2e8;border-color: #ffbb96;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}

src/views/realTimeMonitoring/index.vue

@@ -20,11 +20,7 @@
                 :span="4"
                 style="height:87vh;overflow: scroll;"
             >
-                <a-input-search
-                    style="margin-bottom: 8px"
-                    placeholder="Search"
-                    @selsect="onChange"
-                />
+                <br/>
                 <a-tree
                     :tree-data="treeData"
                     @select="rightClick"
@@ -54,7 +50,7 @@
                     }">
                     <video
                         :style="{ height: '87vh',width: '100%', 'object-fit': 'fill' }"
-                        :id="`camera${camera.id}`"
+                        :id="`camera`"
                         autoplay
                         muted
                         controls
@@ -241,6 +237,7 @@ export default {
                 title: "title",
             },
             treeData: [],
+            node:'',
         };
     },
     computed: {
@@ -278,7 +275,7 @@ export default {
             this.autoExpandParent = false;
         },
         toPtz(cameraId, cameraIOId) {
-            console.log("toptz：",cameraId, cameraIOId);
+            // console.log("toptz：",cameraId, cameraIOId);
             this.$api.httpApi
                 .cameraIoToPtz({
                     data: {
@@ -294,7 +291,7 @@ export default {
         
         //触发点击效果
         handleClick(key) {
-            let result = str.split("-");
+            let result = key.split("-");
             if (result.length > 1) {
                 //触发相机
                 sessionStorage.setItem("defaultKey", result[0]+"-"+result[1]);
@@ -306,22 +303,7 @@ export default {
                 this.toPtz(result[1],result[2]);
             }
         },
-        onChange(e) {
-            const value = e.target.value;
-            const expandedKeys = dataList
-                .map((item) => {
-                    if (item.title.indexOf(value) > -1) {
-                        return getParentKey(item.key, gData);
-                    }
-                    return null;
-                })
-                .filter((item, i, self) => item && self.indexOf(item) === i);
-            Object.assign(this, {
-                expandedKeys,
-                searchValue: value,
-                autoExpandParent: true,
-            });
-        },
+        
         // 选择节点时的处理方法
         handleSelect(selectedKeys, info) {
             // 确保只有一个节点被选中
@@ -370,13 +352,19 @@ export default {
             const selectedNode = info.selectedNodes[0];
             console.log("onCheck", selectedNode); // 处理节点的变色
             const node = document.querySelector(
-                `[title="${selectedNode.label}"]`
+                `[title="${selectedNode.data.props.title}"]`
             );
             
+            if(this.node){
+                this.node.style.backgroundColor = "";
+            }
             if (node) {
+                this.node = node;
                 // 改变选中节点的背景色
                 node.style.backgroundColor = "lightblue";
             }
+            console.log(selectedNode.data.key);
+            this.handleClick(selectedNode.data.key)
         },
 
         // 关闭 SSE 连接
@@ -461,6 +449,7 @@ export default {
                 if (cameraId == a.id) {
                     this.camera = a;
                     let video = document.getElementById("camera");
+                    console.log(video);
                     console.log("play:" + a.id);
                     let server = a.rtcServer + ":" + a.rtcServerPort;
                     let player = new WebRtcPlayer(
@@ -475,8 +464,10 @@ export default {
         destory() {
             for (let player of this.players) {
                 console.log("stop");
+                if(player){
                     player.destroy();
                 }
+            }
         },
         zoomDecStart(event, id) {
             console.log("变倍-按下");