家谱现有接口调试50%
This commit is contained in:
rain
@@ -0,0 +1,243 @@
|
||||
// noinspection ThisExpressionReferencesGlobalObjectJS
|
||||
/**
|
||||
* 基于layui v-2.5.4 版本，封装的消息组件
|
||||
* 作者：jsan
|
||||
* 日期：2019-07-28
|
||||
*/
|
||||
(function (root, factroy) {
|
||||
typeof root.layui === "object" && layui.define ? layui.define(["layer"], function(mods){mods("jsanNotice", factroy(layui.layer))}) : factroy(root.layer);
|
||||
}(this, function (layer) {
|
||||
// //引入css
|
||||
layui.link(layui.cache.base+"mods/extend/jsan-notice.css?v="+(new Date).getTime());
|
||||
|
||||
/**
|
||||
* 消息盒子方法
|
||||
* @param option 参数对象：
|
||||
* elem 元素选择器，如：#test
|
||||
* positionX 盒子左右定位位置[right,left]，默认right
|
||||
* positionY 盒子相对位置，可以选择不同的单位长度，如：100px
|
||||
* lowKey true隐藏，false显示
|
||||
* noticeWindow 详细消息窗口属性
|
||||
*/
|
||||
layer.noticeMarker = function (option) {
|
||||
const $ = layui.$,
|
||||
that = {},
|
||||
POSITION_X_STYLE = typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right: 1px;" : option["positionX"]+" 1px;",
|
||||
POSITION_Y_STYPE = typeof option["positionY"] === "undefined" ? "top: 0;" : "top: "+option["positionY"]+";",
|
||||
MARKER = "lay-jsan-notice-marker",
|
||||
MARKER_BOX = "lay-jsan-notice-marker-box",
|
||||
MARKER_BOX_NEWS = "lay-jsan-notice-marker-news",
|
||||
MARKER_BOX_ICON = "layui-icon layui-icon-speaker lay-jsan-notice-marker-icon",
|
||||
MARKER_BOX_BTN = "lay-jsan-notice-marker-btn",
|
||||
MARKER_BOX_HIDE_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right" : "left"),
|
||||
MARKER_BOX_SHOW_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "left" : "right");
|
||||
|
||||
that.properties = {}; //初始化属性
|
||||
|
||||
$(option.elem).hide(); //隐藏初始化元素
|
||||
that.properties.index = NOTICE_MARKER_INDEX++; //消息框唯一标识
|
||||
that.properties.isOpen = option["lowKey"]; //初始化是否显示
|
||||
that.properties.option = option; //录入初始化配置
|
||||
that.properties.option.positionX = typeof option["positionX"] === "undefined" ? "right" : option["positionX"]; //初始化定位
|
||||
that.properties.option.positionY = typeof option["positionY"] === "undefined" ? "right" : option["positionY"]; //初始化定位
|
||||
that.properties.marker = $("<div id='notice-marker-"+that.properties.index+"' class='"+MARKER+"' style='"+POSITION_X_STYLE+POSITION_Y_STYPE+"'></div>"); //容器
|
||||
that.properties.markerBoxBtn = $("<div class='"+MARKER_BOX_BTN+"'></div>"); //提示显示角标
|
||||
that.properties.markerBoxBtnIcon = $("<i class='"+MARKER_BOX_HIDE_BTN_ICON+"'></i>"); //提示显示角标
|
||||
that.properties.markerBox = $("<div class='"+MARKER_BOX+"'></div>"); //消息盒子
|
||||
that.properties.markerBoxIcon = $("<i class='"+MARKER_BOX_ICON+"'></i>"); //消息盒子图标
|
||||
//初始化默认方法
|
||||
/**
|
||||
* 消息提醒方法
|
||||
* @param option 参数对象
|
||||
* lowKey true隐藏，false显示
|
||||
*/
|
||||
that.remind = function(option) {
|
||||
if(option["lowKey"] && that.properties.isOpen) {
|
||||
//提醒时不弹出
|
||||
this.hideBox();
|
||||
}else if(!option["lowKey"] && !that.properties.isOpen) {
|
||||
this.showBox();
|
||||
}
|
||||
this.properties.markerBox.addClass(MARKER_BOX_NEWS);
|
||||
this.properties.markerBoxBtn.addClass(MARKER_BOX_NEWS);
|
||||
};
|
||||
|
||||
/**
|
||||
* 隐藏消息盒子方法
|
||||
*/
|
||||
that.hideBox = function() {
|
||||
if(this.properties.isOpen) {
|
||||
this.properties.markerBox.hide();
|
||||
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_HIDE_BTN_ICON);
|
||||
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_SHOW_BTN_ICON);
|
||||
this.properties.isOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 显示消息盒子方法
|
||||
*/
|
||||
that.showBox = function() {
|
||||
if(!this.properties.isOpen) {
|
||||
this.properties.markerBox.show();
|
||||
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_SHOW_BTN_ICON);
|
||||
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_HIDE_BTN_ICON);
|
||||
this.properties.isOpen = true;
|
||||
}
|
||||
};
|
||||
|
||||
//封装渲染
|
||||
that.properties.markerBoxBtn.html(that.properties.markerBoxBtnIcon);
|
||||
that.properties.markerBox.html(that.properties.markerBoxIcon);
|
||||
that.properties.marker.html(that.properties.option["positionX"] === "left" ? that.properties.markerBox : that.properties.markerBoxBtn);
|
||||
that.properties.marker.append(that.properties.option["positionX"] === "left" ? that.properties.markerBoxBtn : that.properties.markerBox);
|
||||
|
||||
$("body").append(that.properties.marker);
|
||||
|
||||
//隐藏/显示事件
|
||||
that.properties.markerBoxBtn.unbind().on("click", that, function (event) {
|
||||
event.data.properties.isOpen ? event.data.hideBox() : event.data.showBox();
|
||||
});
|
||||
|
||||
//初始化详细消息窗口
|
||||
/**
|
||||
* type 1：组件自带消息窗口，2：打开用户自定义窗口，默认是1
|
||||
* title 消息窗口标题
|
||||
* classType 消息类型（type=1时生效） 属于Object类型 {"id": "name"} 如：{"notice": "通知", "alerted": "预警", "other": "其他"}
|
||||
* url 自定义消息窗口时打开的链接
|
||||
* width 消息窗口宽度 可以选择不同的单位长度，如：100px
|
||||
* height 消息窗口高度 可以选择不同的单位长度，如：100px
|
||||
* contentWidth 消息内容窗口宽度
|
||||
* contentHeight 消息内容窗口高度
|
||||
*/
|
||||
if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] !== 2) {
|
||||
|
||||
that.noticeWindow = {};
|
||||
that.noticeWindow.index = that.properties.index;
|
||||
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
|
||||
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
|
||||
that.noticeWindow.contentWidth = typeof that.properties.option.noticeWindow["contentWidth"] === "string" ? that.properties.option.noticeWindow["contentWidth"] : "650px";
|
||||
that.noticeWindow.contentHeight = typeof that.properties.option.noticeWindow["contentHeight"] === "string" ? that.properties.option.noticeWindow["contentHeight"] : "560px";
|
||||
that.noticeWindow.window = $("<div id='notice-marker-window-"+that.noticeWindow.index+"' class='layui-tab' lay-filter='notice-marker-window-"+that.noticeWindow.index+"'></div>");
|
||||
that.noticeWindow.tabTitle = $("<ul id='notice-marker-window-title-"+that.noticeWindow.index+"' class='layui-tab-title'></ul>");
|
||||
that.noticeWindow.tabContent = $("<div id='notice-marker-window-content-"+that.noticeWindow.index+"' class='layui-tab-content'></div>");
|
||||
|
||||
const classType = {};
|
||||
if(typeof that.properties.option.noticeWindow["classType"] === "object") {
|
||||
for(let tab in that.properties.option.noticeWindow["classType"]) {
|
||||
classType[tab] = ["<li id='notice-marker-window-title-"+tab+"'>"+that.properties.option.noticeWindow["classType"][tab]+"<span class='layui-badge-dot layui-hide'></span></li>", "<div id='notice-marker-window-content-"+tab+"' lay-id='notice-marker-window-content-"+tab+"' class='layui-tab-item'></div>"];
|
||||
}
|
||||
}else {
|
||||
classType['notice'] = ["<li id='notice-marker-window-title-notice'>消息</li>", "<div id='notice-marker-window-content-notice' lay-id='notice-marker-window-content-\"+tab+\"' class='layui-tab-item'></div>"];
|
||||
}
|
||||
|
||||
that.noticeWindow.classType = classType;
|
||||
|
||||
//详细消息窗口渲染
|
||||
that.noticeWindow.window.html(that.noticeWindow.tabTitle);
|
||||
that.noticeWindow.window.append(that.noticeWindow.tabContent);
|
||||
for(let tab in that.noticeWindow.classType) {
|
||||
that.noticeWindow.tabTitle.append(that.noticeWindow.classType[tab][0]);
|
||||
that.noticeWindow.tabContent.append(that.noticeWindow.classType[tab][1]);
|
||||
}
|
||||
that.noticeWindow.window.hide();
|
||||
that.noticeWindow.tabTitle.find("li").eq(0).addClass("layui-this");
|
||||
that.noticeWindow.tabContent.find(".layui-tab-item").eq(0).addClass("layui-show");
|
||||
$("body").append(that.noticeWindow.window);
|
||||
|
||||
layui.use('element', function(){});
|
||||
|
||||
that.properties.markerBox.unbind().on("click", that, function (event) {
|
||||
event.data.hideBox();
|
||||
layer.open({
|
||||
type: 1,
|
||||
id: "notice-marker-window-layer-"+that.noticeWindow.index,
|
||||
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
|
||||
area: [event.data.noticeWindow.width - 12, event.data.noticeWindow.height],
|
||||
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: $("#"+event.data.noticeWindow.window.attr("id")),
|
||||
cancel: function () {
|
||||
that.noticeWindow.window.hide();
|
||||
}
|
||||
});
|
||||
event.data.properties.markerBox.removeClass(MARKER_BOX_NEWS);
|
||||
event.data.properties.markerBoxBtn.removeClass(MARKER_BOX_NEWS);
|
||||
});
|
||||
|
||||
/**
|
||||
* 向消息窗口推送消息
|
||||
* @param option 参数对象
|
||||
* lowKey 是否使用盒子提醒 true不提醒，false提醒
|
||||
* classTypeId 消息所属消息类型的id
|
||||
* content 需要推送的类型集合 Array，每组数据包括：
|
||||
* title 消息标题。最大27位长度，大于27会自动省略
|
||||
* content 消息内容。最大44位长度，大于44位自动省略
|
||||
* date 消息发布时间 yyyy-MM-dd HH:mm:ss
|
||||
* url 点击消息后跳转位置
|
||||
*/
|
||||
that.addNews = function (option) {
|
||||
for(let i in option.content) {
|
||||
const item = $("<div class='lay-jsan-notice-marker-item' notice-url = '" + option.content[i]["url"] + "'></div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-title lay-jsan-notice-marker-item-title-new'>"+(option.content[i]["title"].length > 28 ? option.content[i]["title"].substring(0, 25)+"..." : option.content[i]["title"] )+"</div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-date'>"+option.content[i]["date"]+"</div>");
|
||||
item.append("<div class='lay-jsan-notice-marker-item-content'>"+(option.content[i]["content"].length > 45 ? option.content[i]["content"].substring(0, 43)+"..." : option.content[i]["content"])+"</div>");
|
||||
$("#notice-marker-window-content-"+option["classTypeId"]).prepend(item);
|
||||
}
|
||||
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").removeClass("layui-hide");
|
||||
noticeMarkerItemEvent(option, this);
|
||||
const lowKey = typeof option["lowKey"] === "undefined" ? false : option["lowKey"];
|
||||
this.remind({"lowKey": lowKey});
|
||||
};
|
||||
|
||||
var noticeMarkerItemEvent = function (option, that) {
|
||||
$("#notice-marker-window-content-"+option["classTypeId"]+" .lay-jsan-notice-marker-item").unbind().on("click", function (event) {
|
||||
$(this).find(".lay-jsan-notice-marker-item-title").eq(0).removeClass("lay-jsan-notice-marker-item-title-new");
|
||||
if($("#notice-marker-window-content-"+option["classTypeId"]).find(".lay-jsan-notice-marker-item-title-new").length === 0) {
|
||||
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").addClass("layui-hide");
|
||||
}
|
||||
$(this).attr("notice-url");
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: that.properties.option.noticeWindow["title"],
|
||||
area: [that.noticeWindow.contentWidth, that.noticeWindow.contentHeight],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: $(this).attr("notice-url")
|
||||
});
|
||||
});
|
||||
}
|
||||
}else if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] === 2) {
|
||||
|
||||
that.noticeWindow = {};
|
||||
that.noticeWindow.index = that.properties.index;
|
||||
that.noticeWindow.url = that.properties.option.noticeWindow["url"];
|
||||
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
|
||||
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
|
||||
|
||||
that.properties.markerBox.unbind().on("click", that, function (event) {
|
||||
event.data.hideBox();
|
||||
layer.open({
|
||||
type: 2,
|
||||
id: "notice-marker-window-layer-"+that.noticeWindow.index,
|
||||
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
|
||||
area: [event.data.noticeWindow.width, event.data.noticeWindow.height],
|
||||
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
content: event.data.noticeWindow.url
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//初始显示设置
|
||||
that.properties.isOpen ? that.hideBox() : that.showBox();
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
return {mod: "jsanNotice", v: "1.0.11"};
|
||||
}));
|
||||
|
||||
NOTICE_MARKER_INDEX = 1;
|
||||
Reference in New Issue
Block a user