视频监控

project/shandong10086/apps/shandong/monitor/components/deviceSlider.vue

@@ -24,10 +24,17 @@
       </div>
       <div title>设备列表</div>
       <div fill class="deviceList">
-        <el-scrollbar>
-          <el-tree ref="deviceTree" :data="treeData" :props="propsConfig" @node-click="handleNodeClick"
-                   :render-content="renderItem" :filter-node-method="handleFilter"/>
-        </el-scrollbar>
+          <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig" @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
+                   :filter-node-method="handleFilter"/>
+          <ul
+              v-if="isShowMenu && menuInfo.node.type === '1'"
+              class="el-dropdown-menu el-popper"
+              :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>
     </div>
     <div class="rightBtn" :class="{show}" @click="handleShow">
@@ -82,8 +89,14 @@ export default {
       noArea: [],
       staData: [],
       name: '',
+      isShowMenu: false,
       search: {
         bind: ''
+      },
+      menuInfo: {
+        x: '',
+        y: '',
+        node: {}
       }
     }
   },
@@ -91,6 +104,10 @@ export default {
     handleShow() {
       this.$emit('update:show', !this.show)
     },
+
+    bindEvent() {
+      this.isShowMenu = false
+    },
     getDevices() {
       this.ins.post("/app/appzyvideoequipment/tree", null, {
         params: {size: 999}
@@ -103,6 +120,25 @@ export default {
         }
       })
     },
+
+    handleTreeCommand (e, node) {
+      this.$emit('treeCommand', {
+        type: e,
+        node
+      })
+    },
+
+    nodeContextmenu(e, node) {
+      this.isShowMenu = true
+      let y = e.y + 6
+      if (y + 202 > document.body.clientHeight) {
+        y = y - 202
+      }
+      this.menuInfo = {
+        x: e.x + 16, y,
+        node
+      }
+    },
     handleNodeClick(data) {
       this.$emit('select', data)
     },
@@ -124,6 +160,10 @@ export default {
   created() {
     this.dict.load("deviceStatus")
     this.getDevices()
+  },
+
+  mounted () {
+    document.querySelector('html').addEventListener('click', this.bindEvent)
   }
 }
 </script>
@@ -134,12 +174,36 @@ export default {
   align-items: center;
   flex-shrink: 0;
   color: #fff;
+  overflow: hidden;
 
   div[flex] {
     display: flex;
     align-items: center;
   }
 
+  .deviceList {
+    overflow: auto;
+
+    ::v-deep .el-tree {
+      width: -webkit-fit-content;
+      width: -moz-fit-content;
+      width: fit-content;
+      min-width: 100%;
+    }
+    &::-webkit-scrollbar {
+      width : 10px;
+      height: 15px;
+    }
+    &::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #535353;
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #fff;
+    }
+  }
+
   div[fill] {
     flex: 1;
     min-width: 0;