index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>融合画像展示及智能决策的供电服务数据地图系统</title>
  7. <script src="../js/min-loader.js"></script>
  8. <link rel="stylesheet" href="../iconfont/iconfont.css">
  9. <style>
  10. .layui-btn, .layui-disabled, .layui-icon, .layui-unselect{
  11. display:none !important;
  12. }
  13. .layui-tab-title li{
  14. padding:0 1px;
  15. color:#004B97;
  16. }
  17. .layui-tab-title .layui-this:after {
  18. position: absolute;
  19. left: 0;
  20. top: 0;
  21. content: '';
  22. width: 100%;
  23. height: 100%;
  24. border-width: 0px !important;
  25. border-style: solid;
  26. border-bottom-color: #fff;
  27. border-radius: 0px 0px 0 0;
  28. box-sizing: border-box;
  29. pointer-events: none;
  30. }
  31. .layui-tab-card>.layui-tab-title li{
  32. color: #9C9C9C;
  33. font-size: 14px;
  34. }
  35. .layui-tab-card>.layui-tab-title .layui-this{
  36. background:none;
  37. color: #212121;
  38. }
  39. .mainFull {
  40. left:0px;
  41. bottom:0px;
  42. }
  43. .meauson{
  44. color: #333;
  45. opacity: 0.5;
  46. padding: 0 20px;
  47. line-height: 30px;
  48. padding-top: 16px;
  49. }
  50. .layui-nav .layui-nav-item .meau-back{
  51. background-color: #012e29;
  52. color: #fff;
  53. }
  54. .meau-back .meau-line{
  55. display: inline-block;
  56. background: #fff;
  57. height: 18px;
  58. width: 6px;
  59. border-radius: 8px;
  60. float: right;
  61. margin-top: 14px;
  62. }
  63. .layui-nav-tree .layui-nav-item{
  64. box-shadow: inset 0 0 4px 0 rgba(56,88,142,0.50);
  65. padding-bottom: 12px;
  66. }
  67. .layui-layer-shade{
  68. background-color: rgba(0, 0, 0,0.4) !important;
  69. }
  70. .navbar-brand {
  71. padding: 10px;
  72. margin-left: 0 !important;
  73. display: -webkit-flex;
  74. display: flex;
  75. }
  76. .line {
  77. width: 0.0625rem;
  78. height: 3rem;
  79. /* background: url(../images/logo.png) no-repeat; */
  80. padding-left: 6.8rem;
  81. border-right: 1px solid #FFFFFF;
  82. display: inline-block;
  83. height: 30px;
  84. }
  85. .f14-white {
  86. font-size: 14px;
  87. color: #FFFFFF;
  88. }
  89. .layui-tab-contentMainFull {
  90. top:0px;
  91. }
  92. .layui-tab-item{
  93. height: 100%;
  94. }
  95. .layui-nav-tree{
  96. margin-top: 0 !important;
  97. padding: 50px 0;
  98. }
  99. </style>
  100. </head>
  101. <body class="kit-theme">
  102. <div class="layui-layout layui-layout-admin kit-layout-admin">
  103. <div class="layui-header">
  104. <div class="layui-logo">
  105. <div class="navbar-brand">
  106. <div class="line" style = "width : 140px"></div>
  107. </div>
  108. </div>
  109. <div class="layui-logo kit-logo-mobile">K</div>
  110. <ul class="layui-nav layui-layout-left kit-nav" id="oneMenu">
  111. <li class="layui-nav-item">
  112. <a href="javascript:;">快捷菜单</a>
  113. <dl class="layui-nav-child" id="quickMenu">
  114. </dl>
  115. </li>
  116. </ul>
  117. <ul class="layui-nav layui-layout-right kit-nav" style="margin-right: 20px;">
  118. <li class="layui-nav-item" style="margin-right: 20px;">
  119. <a href="javascript:;">
  120. <img id="headImg" src="errurl" onerror="this.src='../images/head.jpg'" class="layui-nav-img"> <span id="userName"></span>
  121. </a>
  122. <dl class="layui-nav-child">
  123. <!-- <dd id="changeBaseInf"><a href="javascript:;"><span>基本资料</span></a></dd> -->
  124. <dd id="changePwd"><a href="javascript:;"><span>修改密码</span></a></dd>
  125. </dl>
  126. </li>
  127. <li class="layui-nav-item" id="loginOut"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</li>
  128. </ul>
  129. </div>
  130. <div class="layui-side kit-side" id="menuDiv">
  131. <div class="layui-side-scroll" id = "menu">
  132. </div>
  133. </div>
  134. <div class="layui-body mainFull" id="container">
  135. <!-- 内容主体区域 -->
  136. <div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 请稍等...</div>
  137. </div>
  138. <!-- 底部固定区域 -->
  139. <!-- <div class="layui-footer" id="bottomGd">
  140. 2019 &copy;
  141. <a href="#"></a> MIT license
  142. </div> -->
  143. </div>
  144. <script>
  145. var message;
  146. $('#loginOut').on('click', function() {
  147. layer.confirm('真的要注销吗', function(index){
  148. $.request({
  149. action : "../SystemAction/loginOut",
  150. data : {},
  151. success : function(data) {
  152. window.location.href = "http://"+ window.location.host +getContextPath() +"/admin/login.html";
  153. }
  154. });
  155. });
  156. });
  157. var element;
  158. var mbisMainPage = false;
  159. function oneMenuClick(oneMenuId, isMainPage, openMenu) {
  160. mbisMainPage = isMainPage;
  161. if(isMainPage) {
  162. $("#menuDiv").hide();
  163. $("#bottomGd").addClass("mainFull");
  164. $("#container").addClass("mainFull");
  165. $("#titileTabId").hide();
  166. /* $("#titileTabId").css("left","0px"); */
  167. $("#tabContent").css("top","0px");
  168. }
  169. else {
  170. $("#menuDiv").show();
  171. $("#bottomGd").removeClass("mainFull"); //删除样式
  172. $("#container").removeClass("mainFull"); //添加样式
  173. $("#titileTabId").show();
  174. $("#titileTabId").css("left","200px");
  175. $("#container").css("top","46px");
  176. }
  177. $.request({
  178. action : "MenuAction/menu",
  179. loading : false,
  180. data : {supMenuId:oneMenuId},
  181. loading:false,
  182. success : function(data) {
  183. setItemAuthData(data.itemAuth);
  184. //记录权限数据
  185. var menuHtml = '<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="kitNavbar" kit-navbar style="margin-top:50px;height:100%;width:200px;">';
  186. var menu = data.menu.submenu;
  187. var firstMenu = "";
  188. var countA = 0;
  189. for (var i = 0; i < menu.length; i ++) {
  190. if (i == 0) {
  191. menuHtml += '<li class="layui-nav-item layui-nav-itemed">';
  192. } else {
  193. menuHtml += '<li class="layui-nav-item">';
  194. }
  195. menuHtml += '<a href="javascript:;">'+ menu[i].name+'</a>';
  196. // 子菜单
  197. var sumMenu = menu[i].submenu;
  198. menuHtml += '<dl class="layui-nav-child">';
  199. for (var j = 0; j < sumMenu.length; j ++) {
  200. var firstMenuClass = ""
  201. if(i == 0 && j == 0) {
  202. firstMenu = sumMenu[j].code;
  203. firstMenuClass = "meau-back";
  204. }
  205. menuHtml += ' <dd><a class="'+firstMenuClass+'" style = "background:#012e29;" id="aTag' + sumMenu[j].code + '" href="javascript:void(0);" onclick="deletOtherTab(\'' + sumMenu[j].code + '\',this)" kit-target data-options="{url:\''+ sumMenu[j].link +'\',icon:\'\',title:\'当前位置: '+sumMenu[j].name+'\',id:\''+sumMenu[j].code+'\'}"><span class="iconfont" aria-hidden="true">&'+sumMenu[j].icon+'</span><span>&nbsp;&nbsp' + sumMenu[j].name +'</span><span class="meau-line"><span></a></dd>';
  206. countA ++;
  207. }
  208. menuHtml += '</dl></li>';
  209. }
  210. menuHtml += '<span class="layui-nav-bar" style="height: 0px; top: 22.5px; opacity: 0;"></span></ul>';
  211. $("#menu").html(menuHtml);
  212. //注意:导航 依赖 element 模块,否则无法进行功能性操作
  213. layui.use('element', function(){
  214. element = layui.element;
  215. element.init();
  216. });
  217. layui.config({
  218. base: '../build/js/',
  219. version: '1.0.1'
  220. }).use(['app', 'message'], function() {
  221. var app = layui.app,
  222. $ = layui.jquery,
  223. layer = layui.layer;
  224. //将message设置为全局以便子页面调用
  225. message = layui.message;
  226. //主入口
  227. app.set({
  228. type: 'iframe'
  229. }).init();
  230. // 如果不是主页默认打开第一个页面
  231. if(!mbisMainPage) {
  232. //
  233. if (isEmpty(openMenu)) {
  234. $("#aTag" + firstMenu).click();
  235. } else {
  236. $("#aTag" + openMenu).click();
  237. }
  238. }
  239. $('dl.skin > dd').on('click', function() {
  240. var $that = $(this);
  241. var skin = $that.children('a').data('skin');
  242. switchSkin(skin);
  243. });
  244. var setSkin = function(value) {
  245. layui.data('kit_skin', {
  246. key: 'skin',
  247. value: value
  248. });
  249. },
  250. getSkinName = function() {
  251. return layui.data('kit_skin').skin;
  252. },
  253. switchSkin = function(value) {
  254. var _target = $('link[kit-skin]')[0];
  255. if(isEmpty(_target)) {
  256. return;
  257. }
  258. _target.href = _target.href.substring(0, _target.href.lastIndexOf('/') + 1) + value + _target.href.substring(_target.href.lastIndexOf('.'));
  259. setSkin(value);
  260. },
  261. initSkin = function() {
  262. var skin = getSkinName();
  263. switchSkin(skin === undefined ? 'default' : skin);
  264. }();
  265. });
  266. },
  267. error : function(data) {
  268. alert("error");
  269. }
  270. });
  271. }
  272. // 加载菜单
  273. $(document).ready(function(){
  274. // 初始化一级菜单
  275. $.request({
  276. action : "MenuAction/searchUsrFirstMenu",
  277. loading : false,
  278. data : {},
  279. success : function(data) {
  280. var menuHtml = "";
  281. // 如果设定了主页
  282. if(!isEmpty(data.indexPage)) {
  283. setTempVal('indexPage', data.indexPage);
  284. menuHtml = menuHtml + '<li id="mainThis" class="layui-nav-item layui-this">'
  285. menuHtml = menuHtml + '<a href="#" onclick =indexPage("' + data.indexPage + '")>' + '主页' + '</a>';
  286. menuHtml = menuHtml + '<div class="w-line"></div>';
  287. menuHtml = menuHtml + '</li>';
  288. }
  289. for(var i = 0; i < data.oneMenuList.length; i ++) {
  290. var oneMenu = data.oneMenuList[i];
  291. menuHtml = menuHtml + '<li id="otherThis'+i+'" name="otherThis" class="layui-nav-item">'
  292. menuHtml = menuHtml + '<a href="#" onclick =oneMenuClick("' + oneMenu.menuId + '")>' + oneMenu.menuName + '</a>';
  293. menuHtml = menuHtml + '<div class="w-line"></div>';
  294. menuHtml = menuHtml + '</li>';
  295. }
  296. $('#oneMenu').html(menuHtml);
  297. if(data.oneMenuList.length > 0) {
  298. oneMenuClick(data.oneMenuList[0].menuId, true);
  299. }
  300. else {
  301. oneMenuClick('', true);
  302. }
  303. },
  304. error : function(data) {
  305. alert("error");
  306. }
  307. });
  308. })
  309. // 打开主页
  310. function indexPage(url) {
  311. $("#menuDiv").hide();
  312. $("#container").addClass("mainFull"); //删除样式
  313. $("#bottomGd").addClass("mainFull"); //删除样式
  314. $("#titileTabId").hide();
  315. $("#tabContent").css("top","0px");
  316. //选中首页
  317. $("#mainThis").addClass("layui-nav-item layui-this");
  318. //删除其他选中
  319. var ortherList = document.getElementsByName("otherThis");
  320. for(var i = 0; i < ortherList.length; i ++) {
  321. $("#otherThis"+i).removeClass("layui-this");
  322. }
  323. var id = '000000';
  324. deletOtherTab(id);
  325. layui.use('element', function(){
  326. element = layui.element;
  327. element.init();
  328. element.tabDelete('kitTab', '000000');
  329. element.tabDelete('kitTab', '999999');
  330. res = element.tabAdd('kitTab', {
  331. title: '主页'
  332. ,content: '<iframe data-frameid="'+id+'" src="'+url+'" style="height: '+ window.innerHeight +'px;" frameborder="0"></iframe>'
  333. ,id:id
  334. });
  335. element.tabChange('kitTab', id);//添加选项卡后,默认此tab为选中状态
  336. });
  337. }
  338. // 修改密码
  339. $(document).on('click','#changePwd', function(){
  340. layer.open({
  341. type: 2,
  342. title: '修改密码',
  343. shadeClose: true,
  344. shade: true,
  345. //maxmin: true, //开启最大化最小化按钮
  346. area: ['550px', '314px'],
  347. content: 'personManage/changePwd.html'
  348. });
  349. });
  350. // 反显
  351. layui.use('form', function(){
  352. $.request({
  353. action : '../PersonManageAction/getPersonInf',
  354. loading : false,
  355. data : {},
  356. success : function(data) {
  357. var userInf = data.userInf;
  358. // 姓名
  359. $('#userName').html(userInf.name);
  360. // 头像地址
  361. $("#headImg").attr('src', userInf.img);
  362. },
  363. });
  364. });
  365. // 删除除了自己以外的加载页
  366. function deletOtherTab(thisTabId, t) {
  367. $("#menu").find("a").removeClass("meau-back");
  368. $(t).addClass("meau-back");
  369. var tabTile = $('.kit-tab ul.layui-tab-title');
  370. tabTile.children('li[lay-id]').each(function() {
  371. var curId = $(this).attr('lay-id');
  372. layui.use(['element'], function () {
  373. if(curId != thisTabId) {
  374. element.tabDelete('kitTab', curId);
  375. }
  376. });
  377. });
  378. }
  379. </script>
  380. </body>
  381. </html>