视频监控

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -221,9 +221,16 @@
       },
       renderTreeItem: function (h, {node, data}) {
         let show = data.deviceStatus == 1 ? 'show' : ''
+        const ids = this.ids.split(',')
+        const index = ids.indexOf(data.id) + 1
+        console.log(index, ids, data.id)
         if (node.isLeaf) {
           return (
               <div class="flexRow">
+                {index > 0 ? 
+                <span>{ index }</span>
+                : ''
+                }
                 <i class={['iconfont', 'iconshipinjiankong', show]}/>
                 <div>{node.label}</div>
               </div>
@@ -466,6 +473,17 @@
     font-size: 14px;
     color: #fff;
 
+    span {
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 1px;
+      background: #2266FF;
+    }
+
     .iconfont {
       color: #89b;
 

packages/IntelligentSecurity/components/deviceSlider.vue

@@ -24,7 +24,7 @@
       </div>
       <div title>设备列表</div>
       <div fill class="deviceList">
-        <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig"
+        <el-tree ref="deviceTree" highlight-current :render-content="renderItem" :data="treeData" :props="propsConfig"
                  @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
                  :filter-node-method="handleFilter"/>
         <ul
@@ -33,7 +33,6 @@
           :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
           x-placement="top-end">
           <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
-          <!-- <li class="el-dropdown-menu__item" @click="handleTreeCommand('area', menuInfo.node)">行政地区</li> -->
           <li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
         </ul>
       </div>
@@ -276,8 +275,20 @@ export default {
       background: transparent;
       color: #fff;
 
-      .el-tree-node:focus > .el-tree-node__content, .el-tree-node__content:hover {
-        background: rgba(#fff, .1);
+      .el-tree-node__content {
+        background: transparent!important;
+      }
+      
+      .el-tree-node__children .is-current .el-tree-node__content {
+        background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%)!important;
+      }
+
+      .el-tree-node__content:hover {
+        background: transparent;
+      }
+
+      .el-tree-node__content {
+        height: 32px;
       }
     }