视频监控

project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AppMonitorManage">
-    <device-slider :show.sync="slider" :ins="instance" :dict="dict" @select="handleSelectMonitor"
+    <device-slider :show.sync="slider" :ins="instance" :dict="dict" @treeCommand="handleSliderOption" @select="handleSelectMonitor"
                    :render-item="renderTreeItem" ref="DeviceSlider"/>
     <div class="monitorPane">
       <div class="headerBar">
@@ -151,14 +151,6 @@
               <div class="flexRow">
                 <i class={['iconfont', 'iconshipinjiankong', show]}/>
                 <div>{node.label}</div>
-                <el-dropdown class="menuBtn" onCommand={e => this.handleSliderOption(e, data)}>
-                  <i class="iconfont iconMore"/>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item command="edit">修改名称</el-dropdown-item>
-                    <el-dropdown-item command="area">行政地区</el-dropdown-item>
-                    <el-dropdown-item command="locate">地图标绘</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
               </div>
           )
         } else return (
@@ -171,17 +163,20 @@
             </div>
         )
       },
-      handleSliderOption(command, data) {
-        this.selected = JSON.parse(JSON.stringify({...data, command}))
-        this.selected.areaId = data.areaId || this.user.info.areaId
-        if (command == "edit") {//修改名称
+      handleSliderOption(e) {
+        this.selected = {
+          command: e.type,
+          ...e.node
+        }
+        this.selected.areaId = e.node.areaId || this.user.info.areaId
+        if (e.type == "edit") {//修改名称
           this.dialog = true
-        } else if (command == "area") {//绑定areaId
+        } else if (e.type  == "area") {//绑定areaId
           this.$refs.BindArea?.chooseArea()
-        } else if (command == "locate") {//地图标绘
-          this.latlng = data.lat && data.lng ? {
-            lat: data.lat,
-            lng: data.lng
+        } else if (e.type  == "locate") {//地图标绘
+          this.latlng = e.node.lat && e.node.lng ? {
+            lat: e.node.lat,
+            lng: e.node.lng
           } : ''
           this.locate = true
         }

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;