视频监控树检索节点

gassafety-web/src/views/videoMonitoring/video/index.vue

@@ -2,25 +2,36 @@
   <div class="app-container">
     <el-row :gutter="5" type="flex" justify="space-around">
       <el-col :lg="4" :xl="4">
-          <el-tree id="videoTree"
+        <div class="head-container">
+          <el-input
+            v-model="videoTree"
+            placeholder="请输入监控名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
                    :data="treeData"
                    :props="treeProps"
-                   ref="Tree"
-                   node-key="id"
-                   :highlight-current="true"
-                   :default-expanded-keys="[0]"
-                   :default-checked-keys="[]"
+                   :expand-on-click-node="false"
+                   :filter-node-method="filterNode"
+                   ref="tree"
+                   default-expand-all
+                   prefix="el-icon-video-play"
                    @node-click="nodeClick"
                    style="background-color: white; color: #606266"
           >
-            <!--<template slot-scope="{node, data}">
+            <template slot-scope="{ node, data }" class="custom-tree-node">
               <span>
-                <i class="'#' + iconArrClass[data.level]" aria-hidden="true">
-                </i>
-                {{node.label}}
+                <i class="iconfont" :class="[data.icon, 'tree-icon']" />
+                {{ node.label }}
               </span>
-            </template>-->
+            </template>
           </el-tree>
+        </div>
       </el-col>
 
       <el-col :lg="20" :xl="20">
@@ -55,18 +66,17 @@
 </template>
 <style lang="scss" scped>
   .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    background-color: #a5a5a8;
-    color: white;
+    background-color: white;
   }
   .el-tree--highlight-current .el-tree-node > .el-tree-node__content:hover {
-    background-color: #a5a5a8;
+    background-color: white;
     color: #454547;
   }
-  /*main > div {
+  main > div {
     background: #ffffff;
     height: calc(100vh - 110px) !important;
     padding: 0px 0px 0px 10px !important;
-  }*/
+  }
   .row{
     display: flex;
     .box{
@@ -87,15 +97,12 @@
     line-height: calc((100vh - 130px)/2);
     color: white;
   }
-  /*  .nodeImg1{
-      background: url('../../assets/qiye.png') no-repeat center,
-    }
-    .nodeImg2{
-      background: url("../../assets/enterprises.png") no-repeat center,
-    }
-    .nodeImg3{
-      background: url("../../assets/video.png") no-repeat center,
-    }*/
+  .nodeImg1{
+    background: url("../../../assets/images/video1.png") no-repeat center;
+  }
+  .nodeImg2{
+    background: url("../../../assets/images/video2.png") no-repeat center;
+  }
 </style>
 
 <script>
@@ -105,6 +112,7 @@
     },
     data() {
       return {
+        videoTree: undefined,
         loading: false,
         playerWindow: "newplay1",
         flag: 1,
@@ -112,14 +120,10 @@
           {
             name: "企业视频监控",
             level: 0,
+            icon: "nodeImg1",
             childList: []
           }
         ],
-        /*iconArrClass: [
-          "nodeImg1",
-          "nodeImg2",
-          "nodeImg3"
-        ],*/
         treeProps: {
           children: "childList",
           label: "name"
@@ -128,25 +132,42 @@
         ideoController: {},
       }
     },
+    watch: {
+      // 根据名称筛选视频监控
+      videoTree(val) {
+        console.log("val", val)
+        this.$refs.tree.filter(val);
+      }
+    },
     methods: {
       getTreeData() {
         let that = this;
         that.treeData[0].childList = [
           {
             name: "视频监控1",
+            icon: "nodeImg2",
             deviceCode: "34020000001110000003_0200000004",
           },{
             name: "视频监控2",
+            icon: "nodeImg2",
             deviceCode: "34020000001110000003_0200000005",
           },{
             name: "视频监控3",
-            deviceCode: "stream_58_0",
+            icon: "nodeImg2",
+            deviceCode: "stream_36_0",
           },{
             name: "视频监控4",
-            deviceCode: "stream_58_0",
+            icon: "nodeImg2",
+            deviceCode: "stream_37_0",
           }
         ];
       },
+      // 筛选节点
+      filterNode(value, data) {
+        console.log(value, data)
+        if (!value) return true;
+        return data.name.indexOf(value) !== -1;
+      },
       nodeClick(data, node, target) {
         let that = this;
         that.treecheckedObj = node.data;