From 5148d55bbdf0e50e438be8dae0b7e682124ca44f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Sat, 18 Jul 2020 00:35:09 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=B8=80=E5=98=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/css/admin.css | 14 +- admin/data/menu.json | 46 +- assets/console.css | 100 ++++ component/layui/lay/extends/pearAdmin.js | 242 --------- component/layui/lay/extends/pearFrame.js | 93 ---- component/layui/lay/extends/pearMenu.js | 526 -------------------- component/layui/lay/extends/pearTab.js | 569 ---------------------- component/pear/css/pear-module/form.css | 3 + component/pear/css/pear-module/layout.css | 28 ++ component/pear/css/pear-module/menu.css | 2 +- component/pear/css/pear-module/tab.css | 4 + component/pear/css/pear.css | 1 + component/pear/module/admin.js | 35 +- component/pear/module/menu.js | 5 +- component/pear/module/tab.js | 41 +- index.html | 7 +- view/chart/line.html | 106 ++++ view/console/console.html | 198 ++++++++ view/document/drawer.html | 5 - view/document/form.html | 234 +++++++++ 20 files changed, 777 insertions(+), 1482 deletions(-) create mode 100644 assets/console.css delete mode 100644 component/layui/lay/extends/pearAdmin.js delete mode 100644 component/layui/lay/extends/pearFrame.js delete mode 100644 component/layui/lay/extends/pearMenu.js delete mode 100644 component/layui/lay/extends/pearTab.js create mode 100644 component/pear/css/pear-module/form.css create mode 100644 view/chart/line.html create mode 100644 view/console/console.html create mode 100644 view/document/form.html diff --git a/admin/css/admin.css b/admin/css/admin.css index 1f04120..5279943 100644 --- a/admin/css/admin.css +++ b/admin/css/admin.css @@ -10,8 +10,8 @@ } .pear-admin .layui-header { - left: 220px; - width: calc(100% - 220px); + left: 230px; + width: calc(100% - 230px); background-color: white; border-bottom: 1px solid whitesmoke; } @@ -27,8 +27,9 @@ } .pear-admin .layui-logo { - width: 220px; + width: 230px; height: 60px; + line-height: 60px; position: relative; background-color: #28333E; @@ -54,7 +55,7 @@ .pear-admin .layui-side { top: 0px; - width: 220px; + width: 230px; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); z-index: 9999; } @@ -65,8 +66,9 @@ } .pear-admin .layui-side-scroll { - height: calc(100% - 60px); + height: calc(100% - 60px)!important; background-color: #28333E; + width: 230px; } @@ -76,7 +78,7 @@ } .pear-admin .layui-body { - left: 220px; + left: 230px; bottom: 0px; } diff --git a/admin/data/menu.json b/admin/data/menu.json index 6f27078..eb03f77 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -10,7 +10,7 @@ "icon": "layui-icon layui-icon-console", "type": 1, "openType": "_iframe", - "href": "view/console/console1.html" + "href": "view/console/console.html" }, { "id": 13, "title": "数据分析", @@ -36,6 +36,14 @@ }, { "id": 202, + "title": "表单", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/document/form.html" + }, + { + "id": 203, "title": "多选下拉", "icon": "layui-icon layui-icon-face-cry", "type": 1, @@ -43,7 +51,7 @@ "href": "view/document/select.html" }, { - "id": 203, + "id": 204, "title": "抽屉组件", "icon": "layui-icon layui-icon-face-cry", "type": 1, @@ -52,6 +60,40 @@ } ] }, + { + "id": "chart", + "title": "统计图表", + "icon": "layui-icon layui-icon-auz", + "type": 0, + "href": "", + "children": [{ + "id": 501, + "title": "折线图", + "icon": "layui-icon layui-icon-face-smile", + "type": 1, + "openType": "_iframe", + "href": "view/chart/line.html" + }, + { + "id": 404, + "title": "404", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/error/404.html" + }, + + { + "id": 500, + "title": "500", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/error/500.html" + } + + ] + }, { "id": "error", "title": "错误页面", diff --git a/assets/console.css b/assets/console.css new file mode 100644 index 0000000..ee5f974 --- /dev/null +++ b/assets/console.css @@ -0,0 +1,100 @@ +.top-panel { + border-radius: 4px; + text-align: center; +} + +.top-panel>.layui-card-body { + height: 60px; +} + +.top-panel-number { + line-height: 60px; + font-size: 30px; + border-right: 1px solid #eceff9; +} + +.top-panel-tips { + padding-left: 8px; + padding-top: 16px; + line-height: 30px; + font-size: 12px; +} + +.pear-container { + background-color: whitesmoke; + margin: 10px; +} + +.card { + width: 100%; + height: 160px; + background-color: whitesmoke; + border-radius: 4px; +} + +.card .header .avatar { + width: 28px; + height: 28px; + margin: 20px; + border-radius: 50px; +} + +.card .header { + color: dimgray; +} + +.card .body { + color: gray; +} + +.card .body { + margin-left: 20px; + margin-right: 20px; +} + +.card .footer { + margin-left: 20px; + margin-right: 20px; + margin-top: 20px; + font-size: 13px; + color: gray; + position: absolute; +} + +.list .list-item { + height: 32px; + line-height: 32px; + color: gray; + padding: 5px; + padding-left: 15px; + border-radius: 4px; + margin-top: 5.2px; +} + +.custom-tab .layui-tab-title { + border-bottom-width: 0px; + border-bottom-style: none; +} + +.custom-tab .layui-tab-title li { + margin-left: 10px; +} + +.list .list-item:hover { + background-color: whitesmoke; +} + +.list .list-item .title { + font-size: 13px; + width: 100%; +} + +.list .list-item .footer { + position: absolute; + right: 30px; + font-size: 12px; +} + +.top-panel-tips i { + font-size: 33px; +} \ No newline at end of file diff --git a/component/layui/lay/extends/pearAdmin.js b/component/layui/lay/extends/pearAdmin.js deleted file mode 100644 index 870fdfb..0000000 --- a/component/layui/lay/extends/pearAdmin.js +++ /dev/null @@ -1,242 +0,0 @@ -layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pearFrame'], - function(exports) { - "use strict"; - - var $ = layui.jquery, - form = layui.form, - element = layui.element, - pearTab = layui.pearTab, - pearMenu = layui.pearMenu, - pearFrame = layui.pearFrame; - - var bodyFrame; - var sideMenu; - var bodyTab; - - var pearAdmin = new function() { - - this.render = function(option) { - this.menuRender(option); - this.bodyRender(option); - this.keepLoad(option); - this.logoRender(option); - } - - this.logoRender = function(option) { - - $(".layui-logo .logo").attr("src", option.logoImage); - $(".layui-logo .title").html(option.logoTitle); - } - - this.menuRender = function(option) { - sideMenu = pearMenu.render({ - elem: 'sideMenu', //依赖容器 - async: true, //数据形式 - theme: option.theme, - height: '100%', - control: option.control ? 'control' : false, // control - defaultMenu: 1, - defaultOpen: 0, //默认打开菜单 - accordion: true, - url: option.data, //数据地址 - parseData: false, //请求后是否进行数据解析 函数 - change: option.change - }) - sideMenu.selectItem(option.select); - } - - this.bodyRender = function(option) { - if (option.muiltTab) { - bodyTab = pearTab.render({ - elem: 'content', - roll: true, - tool: true, - width: '100%', - height: '100%', - index: 0, - tabMax: 20, - closeEvent: function(id) { - sideMenu.selectItem(id); - }, - data: [{ - id: '0', - url: option.index, - title: '首页', - close: false - }] //初始化数据 - }); - - bodyTab.click(function(id) { - bodyTab.positionTab(); - sideMenu.selectItem(id); - }) - - $("body").on("click", ".refresh", function() { - - bodyTab.refresh(600); - }) - - sideMenu.click(function(dom, data) { - - bodyTab.addTabOnly({ - id: data.menuId, - title: data.menuTitle, - url: data.menuUrl, - icon: data.menuIcon, - close: true - }, 300); - compatible(); - }) - - } else { - bodyFrame = pearFrame.render({ - elem: 'content', - title: '工作空间 / 首页', - url: option.index, - width: '100%', - height: '100%' - }); - - $("body").on("click", ".refresh", function() { - - bodyFrame.refresh(600); - }) - - sideMenu.click(function(dom, data) { - bodyFrame.changePage(data.menuUrl, data.menuPath, true); - }) - } - } - - this.keepLoad = function(option) { - setTimeout(function() { - $(".loader-main").fadeOut(option.done); - }, option.keepLoad) - } - }; - - $("body").on("click", ".collaspe,.pear-cover", function() { - sideMenu.collaspe(); - if ($(".pear-admin").is(".pear-mini")) { - $(".layui-icon-spread-left").addClass("layui-icon-shrink-right") - $(".layui-icon-spread-left").removeClass("layui-icon-spread-left") - $(".pear-admin").removeClass("pear-mini"); - } else { - $(".layui-icon-shrink-right").addClass("layui-icon-spread-left") - $(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right") - $(".pear-admin").addClass("pear-mini"); - } - }) - - $("body").on("click", ".fullScreen", function() { - if ($(this).hasClass("layui-icon-screen-restore")) { - screenFun(2).then(function() { - $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); - }); - } else { - screenFun(1).then(function() { - $(".fullScreen").eq(0).addClass("layui-icon-screen-restore"); - }); - } - - }); - -/* function compatible() { - if ($(window).width() <= 768) { - sideMenu.collaspe(); - if ($(".pear-admin").is(".pear-mini")) { - $(".layui-icon-spread-left").addClass("layui-icon-shrink-right") - $(".layui-icon-spread-left").removeClass("layui-icon-spread-left") - $(".pear-admin").removeClass("pear-mini"); - } else { - $(".layui-icon-shrink-right").addClass("layui-icon-spread-left") - $(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right") - $(".pear-admin").addClass("pear-mini"); - } - } - } */ - - function screenFun(num) { - num = num || 1; - num = num * 1; - var docElm = document.documentElement; - - switch (num) { - case 1: - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - break; - case 2: - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - break; - } - return new Promise(function(res, rej) { - res("返回值"); - }); - } - - - $("body").on("click", ".setting", function() { - - openRight(""); - - }) - - function openRight(html) { - layer.open({ - type: 1, - offset: 'r', - area: ['340px', '100%'], - title: false, - shade: 0.1, - closeBtn: 0, - shadeClose: false, - anim: -1, - skin: 'layer-anim-right', - move: false, - content: html, - success: function(layero, index) { - - form.render(); - - var color = localStorage.getItem("theme-color"); - if (color != "null") { - $(".select-color-item").removeClass("layui-icon") - .removeClass("layui-icon-ok"); - - $(".select-color-item").each(function() { - if ($(this).css("background-color") === color) { - $(this).addClass("layui-icon").addClass("layui-icon-ok"); - } - }); - } - - $('#layui-layer-shade' + index).click(function() { - var $layero = $('#layui-layer' + index); - $layero.animate({ - left: $layero.offset().left + $layero.width() - }, 200, function() { - layer.close(index); - }); - }) - } - }); - } - - exports('pearAdmin', pearAdmin); - }) diff --git a/component/layui/lay/extends/pearFrame.js b/component/layui/lay/extends/pearFrame.js deleted file mode 100644 index 11fe7e2..0000000 --- a/component/layui/lay/extends/pearFrame.js +++ /dev/null @@ -1,93 +0,0 @@ -layui.define(['table', 'jquery', 'element'], function (exports) { - "use strict"; - - var MOD_NAME = 'pearFrame', - $ = layui.jquery, - element = layui.element; - - var pearFrame = function (opt) { - this.option = opt; - }; - - pearFrame.prototype.render = function (opt) { - //默认配置值 - var option = { - elem:opt.elem, - url:opt.url, - title:opt.title, - width:opt.width, - height:opt.height, - done:opt.done ? opt.done: function(){ console.log("菜单渲染成功");} - } - - - createFrameHTML(option); - - $("#"+option.elem).width(option.width); - $("#"+option.elem).height(option.height); - - return new pearFrame(option); - } - - pearFrame.prototype.changePage = function(url,title,loading){ - - if(loading){ - var loading = $("#"+this.option.elem).find(".pear-frame-loading"); - - loading.css({display:'block'}); - } - - $("#"+this.option.elem+" iframe").attr("src",url); - - $("#"+this.option.elem+" .title").html(title); - - if(loading){ - var loading = $("#"+this.option.elem).find(".pear-frame-loading"); - - setTimeout(function(){ - - loading.css({display:'none'}); - - },800) - - } - - } - - pearFrame.prototype.refresh = function (time) { - - - // 刷 新 指 定 的 选 项 卡 - if(time!=false){ - - var loading = $("#"+this.option.elem).find(".pear-frame-loading"); - - loading.css({display:'block'}); - - if(time!=0){ - - setTimeout(function(){ - loading.css({display:'none'}); - },time) - } - - } - - $("#"+this.option.elem).find("iframe")[0].contentWindow.location.reload(true); - } - - function createFrameHTML(option){ - - var iframe = "" - - var loading = '
'+ - '
'+ - ''+ - '
'+ - '
' - - $("#"+option.elem).html(iframe+loading); - } - - exports(MOD_NAME,new pearFrame()); -}) \ No newline at end of file diff --git a/component/layui/lay/extends/pearMenu.js b/component/layui/lay/extends/pearMenu.js deleted file mode 100644 index 84ec4fd..0000000 --- a/component/layui/lay/extends/pearMenu.js +++ /dev/null @@ -1,526 +0,0 @@ -layui.define(['table', 'jquery', 'element'], function(exports) { - "use strict"; - - var MOD_NAME = 'pearMenu', - $ = layui.jquery, - element = layui.element; - - var pearMenu = function(opt) { - this.option = opt; - }; - - pearMenu.prototype.render = function(opt) { - //默认配置值 - var option = { - elem: opt.elem, - async: opt.async ? opt.async : false, - parseData: opt.parseData, - url: opt.url, - defaultOpen: opt.defaultOpen, - defaultSelect: opt.defaultSelect, - control: opt.control, - defaultMenu: opt.defaultMenu, - accordion: opt.accordion, - height: opt.height, - theme: opt.theme, - data: opt.data ? opt.data : [], - change: opt.change ? opt.change : function() { - console.log("切换") - }, - done: opt.done ? opt.done : function() { - console.log("菜单渲染成功"); - } - } - - // 根 据 请 求 方 式 获 取 数 据 - if (option.async) { - option.data = getData(option.url); - if (option.parseData != false) { - option.parseData(option.data); - } - } - - if(option.data.length > 0){ - if (option.control != false) { - - createMenuAndControl(option); - } else { - createMenu(option); - } - } - - - // 渲 染 菜 单 结 束 并 完 成 - element.init(); - - downShow(option); - - option.done(); - return new pearMenu(option); - } - - - /** 监听事件赋值 */ - pearMenu.prototype.click = function(clickEvent) { - - var _this = this; - $("#" + _this.option.elem + " .site-demo-active").parent().click(function() { - var dom = $(this).children(".site-demo-active"); - var data = { - menuId: dom.attr("menu-id"), - menuTitle: dom.attr("menu-title"), - menuPath: dom.attr("menu-title"), - menuIcon: dom.attr("menu-icon"), - menuUrl: dom.attr("menu-url") - }; - - var doms = hash(dom); - - if (doms.text() != '') { - data['menuPath'] = doms.find("span").text() + " / " + data['menuPath']; - - } - var domss = hash(doms); - - if (domss.text() != '') { - - data['menuPath'] = domss.find("span").text() + " / " + data['menuPath']; - - } - - var domsss = hash(domss); - - if (domsss.text() != '') { - - data['menuPath'] = domsss.find("span").text() + " / " + data['menuPath']; - - } - - clickEvent(dom, data); - }); - - } - - function hash(dom) { - - return dom.parent().parent().prev(); - } - - - pearMenu.prototype.skin = function(skin) { - - var menu = $(".pear-nav-tree[lay-filter='" + this.option.elem + "']").parent(); - - menu.removeClass("dark-theme"); - menu.removeClass("light-theme"); - - menu.addClass(skin); - } - - - pearMenu.prototype.selectItem = function(pearId) { - - if (this.option.control != false) { - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find("ul").css({ - display: "none" - }); - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find(".layui-this").removeClass( - "layui-this"); - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").css({ - display: "block" - }); - - var controlId = $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").attr("pear-id"); - - $("#" + this.option.control).find(".layui-this").removeClass("layui-this"); - - $("#" + this.option.control).find("[pear-id='" + controlId + "']").addClass("layui-this"); - } - - - // 根 据 菜 单 Id 选 中 菜 单 项 目 - - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass( - "layui-nav-itemed"); - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass( - "layui-this"); - - // 通 过 动 画 打 开 当 前 菜 单 项 layui-nav-child - - if (!$("#" + this.option.elem).is(".pear-nav-mini")) { - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-nav-item").addClass("layui-nav-itemed"); - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("dd").addClass("layui-nav-itemed"); - - } - - $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parent().addClass("layui-this"); - } - - - var activeMenus; - - pearMenu.prototype.collaspe = function(time) { - - var elem = this.option.elem; - - var config = this.option; - - if ($("#" + this.option.elem).is(".pear-nav-mini")) { - - $.each(activeMenus, function(i, item) { - $("#" + elem + " a[menu-id='" + $(this).attr("menu-id") + "']").parent().addClass("layui-nav-itemed"); - }) - - $("#" + this.option.elem).removeClass("pear-nav-mini"); - - $("#" + this.option.elem).animate({ - width: "220px" - }, 150); - - isHoverMenu(false, config); - - } else { - - activeMenus = $("#" + this.option.elem).find(".layui-nav-itemed>a"); - $("#" + this.option.elem).find(".layui-nav-itemed").removeClass("layui-nav-itemed"); - - $("#" + this.option.elem).addClass("pear-nav-mini"); - - $("#" + this.option.elem).animate({ - width: "60px" - }, 400); - isHoverMenu(true, config); - - } - } - - /** 同 步 请 求 获 取 数 据 */ - function getData(url) { - - $.ajaxSettings.async = false; - var data = null; - - $.get(url, function(result) { - data = result; - }); - - $.ajaxSettings.async = true; - return data; - } - - - function createMenu(option) { - // 声 明 头 部 - var menuHtml = '"; - // 将 菜 单 拼 接 到 初 始 化 容 器 中 - - $("#" + option.elem).html(menuHtml); - - } - - - function createMenuAndControl(option) { - - var control = '