二级菜单右键功能

skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/winui/css/winui.css

@@ -478,70 +478,72 @@ button{
 
 .task-contextmenu,
 .menu-contextmenu {
-    width: 200px;
+    width: 110px;
     padding: 8px 0;
-    background: #2B2B2B;
-    color: #fff;
+    background: white;
+    color: black;
     position: fixed;
     z-index: 201704011157;
     box-sizing: border-box;
-    border: 1px solid #494949;
+    border-radius: 5px;
 }
 
-    .task-contextmenu li,
-    .menu-contextmenu li {
-        line-height: 34px;
-        padding: 0 10px;
-        font-size: 13px;
-        cursor: default;
-        padding-left: 38px;
-    }
+.task-contextmenu li,
+.menu-contextmenu li {
+    line-height: 34px;
+    padding: 0 10px;
+    font-size: 13px;
+    cursor: default;
+    padding-left: 38px;
+}
 
-        .task-contextmenu li:hover,
-        .menu-contextmenu li:hover {
-            background: #404040;
-        }
+.task-contextmenu li:hover,
+.menu-contextmenu li:hover {
+    background: #91C9F7;
+}
 
-        .task-contextmenu li i,
-        .menu-contextmenu li i {
-            font-size: 14px;
-            margin-right: 10px;
-            margin-left: -28px;
-        }
+.task-contextmenu li i,
+.menu-contextmenu li i {
+    font-size: 14px;
+    margin-right: 10px;
+    margin-left: -28px;
+}
 
 /*左面应用右键菜单*/
 .app-contextmenu {
-    width: 180px;
+    width: 110px;
+    border-radius: 5px;
     padding: 2px;
     border: 1px solid #dcf0ff;
     z-index: 201704011157;
     box-sizing: border-box;
-    background-color: #F0F0F0;
+    background-color: white;
     position: fixed;
     -moz-box-shadow: 2px 2px 1px #353535;
     -webkit-box-shadow: 2px 2px 1px #353535;
     box-shadow: 2px 2px 1px #353535;
 }
 
-    .app-contextmenu li {
-        line-height: 22px;
-        font-size: 12px;
-        cursor: default;
-        padding-left: 28px;
-        padding-right: 10px;
-        position: relative;
-    }
+.app-contextmenu li {
+    line-height: 30px;
+    font-size: 12px;
+    cursor: pointer;
+    padding-left: 28px;
+    padding-right: 10px;
+    position: relative;
+}
 
-        .app-contextmenu li:hover {
-            background-color: #91C9F7;
-        }
+.app-contextmenu li:hover {
+    background-color: #91C9F7;
+}
 
-        .app-contextmenu li i {
-            position: absolute;
-            left: 10px;
-            top: 3px;
-            font-size: 14px;
-        }
+.app-contextmenu li i {
+    position: absolute;
+    left: 5px;
+    top: 3px;
+    font-size: 14px;
+    line-height: 24px;
+}
 
 
 /*开始菜单*/

skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/winui/js/winui.desktop.js

@@ -176,7 +176,11 @@ layui.define(['jquery', 'layer', 'winui'], function (exports) {
 
                 var div = '<ul class="app-contextmenu" style="top:' + top + 'px;left:' + left + 'px;">';
                 $(options.item).each(function (index, item) {
-                    div += '<li>' + item + '</li>';
+                	if(!isNull(item.icon)){
+                		div += '<li><i class="right-menu-icon ' + item.icon + '"></i>' + item.text + '</li>';
+                	}else{
+                		div += '<li>' + item.text + '</li>';
+                	}
                 });
                 div += '</ul>';
 
@@ -292,6 +296,54 @@ layui.define(['jquery', 'layer', 'winui'], function (exports) {
             this.render(callback);
         });
     };
+    
+    //重置二级菜单右键
+    desktop.initRightMenu = function(options){
+    	if (!options.item)
+            return;
+
+        //重置右键事件
+        common.resetEvent('.winui-desktop-item', 'mouseup', function (e) {
+            if (!e) e = window.event;
+            var currentItem = this;
+            if (e.button == 2) {
+                var left = e.clientX;
+                var top = e.clientY;
+
+                var div = '<ul class="app-contextmenu" style="top:' + top + 'px;left:' + left + 'px;">';
+                $(options.item).each(function (index, item) {
+                	if(!isNull(item.icon)){
+                		div += '<li><i class="right-menu-icon ' + item.icon + '"></i>' + item.text + '</li>';
+                	}else{
+                		div += '<li>' + item.text + '</li>';
+                	}
+                });
+                div += '</ul>';
+
+                //移除之前右键菜单
+                $('.app-contextmenu').remove();
+                //渲染当前右键菜单
+                $('body').append(div);
+                //绑定单击回调函数
+                $('ul.app-contextmenu li').on('click', function () {
+                    var index = $(this).index();
+                    if (typeof options['item' + (index + 1)] !== 'function')
+                        return;
+                    //调用回调函数
+                    options['item' + (index + 1)].call(this, $(currentItem).attr('win-id'), $(currentItem), { reLocaApp: common.locaApp });
+
+                    $('.app-contextmenu').remove();
+                    //移除选中状态
+                    $('.winui-desktop>.winui-desktop-item').removeClass('winui-this');
+                });
+                //阻止右键菜单冒泡
+                $('.app-contextmenu li').on('click mousedown', call.sp);
+            }
+            $(currentItem).addClass('winui-this').siblings().removeClass('winui-this');
+        });
+
+        this.contextmenuOptions = options;
+    }
 
     winui.desktop = desktop;
 

skyeye-promote/skyeye-web/src/main/resources/template/js/index/index.js

@@ -352,7 +352,7 @@
                 	url: reqBasePath + 'login004',
                     method: 'get',
                     data: {loginPCIp: returnCitySN["cip"]}
-                },    //可以为{}  默认 请求 json/desktopmenu.json
+                },    //可以为{}
                 done: function (desktopApp) {
                     desktopApp.onclick(function (id, elem) {
                     	var item = $(elem);
@@ -363,7 +363,16 @@
                     	}
                     }),
                     desktopApp.contextmenu({
-                        item: ["打开", "删除", '右键菜单可自定义'],
+                        item: [{
+                        	icon: 'fa fa-folder-open-o',
+                    		text: "打开",
+                        }, {
+                        	icon: 'fa fa-trash-o fa-lg',
+                    		text: "删除",
+                        }, {
+                        	icon: 'fa fa-calculator',
+                    		text: "自定义",
+                        }],
                         item1: function (id, elem) {
                         	var item = $(elem);
                         	if(item.find(".icon-drawer").length > 0){
@@ -398,7 +407,7 @@
                     menuItem.contextmenu({
                         item: [{icon: 'fa-cog', text: '设置'}, 
                                {icon: 'fa-close', text: '关闭'}, 
-                               {icon: 'fa-qq', text: '右键菜单可自定义'}],
+                               {icon: 'fa-qq', text: '自定义'}],
                         item1: function (id, elem) {
                             //设置回调
                             console.log(id);
@@ -545,6 +554,7 @@
         });
     }
     
+    //打开二级窗口
     function showBigWin(menuItem){
     	var menu = $(menuItem);
     	winui.window.config({
@@ -566,6 +576,36 @@
             shade: 0.5,
             maxmin: false
         });
+    	winui.desktop.initRightMenu({
+            item: [{
+            	icon: 'fa fa-folder-open-o',
+        		text: "打开",
+            }, {
+            	icon: 'fa fa-trash-o fa-lg',
+        		text: "删除",
+            }, {
+            	icon: 'fa fa-calculator',
+        		text: "自定义",
+            }],
+            item1: function (id, elem) {
+            	var item = $(elem);
+            	if(item.find(".icon-drawer").length > 0){
+            		showBigWin(elem);
+            	}else{
+            		OpenWindow(elem);
+            		winui.window.close($('#childWindow').parent());
+            	}
+            },
+            item2: function (id, elem, events) {
+                winui.window.msg('删除回调');
+                $(elem).remove();
+                //从新排列桌面app
+                events.reLocaApp();
+            },
+            item3: function (id, elem, events) {
+                winui.window.msg('自定义回调');
+            }
+        });
     }
 
     //注销登录