$.fn.fishbone = function(data) {
var colors = ['#f89782', '#1a84ce', '#f7a259', '#43a6da', '#f9bf3b', '#88c7cc', '#ef6d5f', '#d9d9d9', '#f03852', '#3a9284'];
////对应插件颜色下标,8:红色、2:橘黄、4:黄色、7:绿色
//var sourcedatacolor = { "工作": 8, "运输": 2, "转移": 4, "在库": 7 };
//var sourcedatacolordirection = { "工作": "top", "运输": "top", "转移": "top", "在库": "bottom" };
//对应插件颜色下标,8:红色、2:橘黄、4:黄色、7:绿色
var sourcedatacolor = { "red": 8, "green": 7 };
var sourcedatacolordirection = { "red": "top", "green": "bottom" };
/**入口*/
//1.创建dom
$(this).children().remove();
$(this).append(creatafishbone(data));
//2.自适应
var rowcount = fixwindow();
//3.翻页滚动效果
jquery(".fishbone").slide({
titcell: ".hd ul",
maincell: ".bd>ul",
autopage: true,
effect: "left",
autoplay: false,
scroll: rowcount,
vis: rowcount
});
/**自适应 平均分布*/
function fixwindow() {
//item所占的宽度 = 自身宽度+paddingleft
var item = $(".fishbone .bd .item");
var paddingleft = parseint(item.css('padding-left'));
var item_w = item.width() + paddingleft;
//显示区域
var bd_w = $(".fishbone .bd").width();
//能显示的个数 取整
var rowcount = parseint(bd_w / item_w);
if (rowcount > item.size()) {
//rowcount = item.size();
$(".fishbone .prevleftimg,.fishbone .nextrightimg").show();
} else {
$(".fishbone .prevleftimg").show();
}
//设置新的宽度使其平均分布
var item_w_temp = bd_w / rowcount - paddingleft;
item.width(item_w_temp);
return rowcount;
};
/**li左边框线颜色 border-left-color 动态获取*/
function getcolor(i) {
var length = colors.length;
var color = 'gray';
if (i <= length - 1) {
color = colors[i];
} else {
color = colors[i % length];
}
return color;
};
/**轴线上圆点位置纵坐标,见图片line-point.png*/
function getlinepointy(i) {
var length = colors.length;
var y = 0;
if (i <= length - 1) {
y = -i * 20;
} else {
y = -(i % length) * 20;
}
return y + "px";
};
/**第一行日期圆点位置纵坐标,图片line-first.png*/
function getlinefirsty(i) {
var length = colors.length;
var y = 0;
if (i <= length - 1) {
y = -i * 60;
} else {
y = -(i % length) * 60;
}
return y + "px";
};
/** .title-left背景纵坐标,0px开始,见图片title.png*/
function gettitlelefty(i) {
var length = colors.length;
var y = 0;//图片位置
if (i <= length - 1) {
y += -i * 60;
} else {
y += -(i % length) * 60;
}
return y + "px";
};
/** .title-center背景纵坐标,600px开始,见图片title.png*/
function gettitlecentery(i) {
var length = colors.length;
var y = -598;//图片位置
if (i <= length - 1) {
y += -i * 60;
} else {
y += -(i % length) * 60;
}
return y + "px";
};
/**.title-right背景纵坐标,1200px开始,见图片title.png*/
function gettitlerighty(i) {
var length = colors.length;
var y = -1200;//图片位置
if (i <= length - 1) {
y += -i * 60;
} else {
y += -(i % length) * 60;
}
return y + "px";
};
/**创建dom结构*/
function creatafishbone(data) {
var fishbone = $("
");
var wrapper = $("");
var bd = $("");
var ul_item = $("");
//遍历数据
$(data).each(function (index) {
var colorindex = sourcedatacolor[data[index].colorlevel] === undefined ? 7 : sourcedatacolor[data[index].colorlevel];
var colordirection = sourcedatacolordirection[data[index].colorlevel] === undefined ? "bottom" : sourcedatacolordirection[data[index].colorlevel];
var itemclass = itemclass(index);//显示在轴上方或下方标识 top/bottom
var color = getcolor(colorindex);
var linefirsty = getlinefirsty(colorindex);
var titlelefty = gettitlelefty(index);//index
var titlecentery = gettitlecentery(index);
var titlerighty = gettitlerighty(index);
var ul = $("");
//遍历封装属性
if(itemclass=='top'){
$.each(this, function (name, value) {
if (name === "sourcedate") {
var postiony = colordirection != "top" ? -31 : 9;
var postionc = colordirection != "top" ? "colord" : "";
//var vlist = value.split('=');
//var li = $("" + vlist[0]+"
" + vlist[1] + "").css("margin", "0px 0px 0px -42px").css("height", "22px");//9是原计算结果的偏移量,显示位置正合适
var li = $("" + value + "").css("margin", "0px 0px 0px -100px").css("height", "120px");//9是原计算结果的偏移量,显示位置正合适
li.appendto(ul);
var li2 = $(" ")
.css('background-position-y', (parseint(linefirsty) + postiony) + "px").addclass(postionc);
li2.appendto(ul);
var li3 = $(" ").css("height","60px");
li3.appendto(ul);
return;
}
});
}
if(itemclass=="bottom"){
$.each(this, function (name, value) {
if (name === "sourcedate") {
var postiony = colordirection != "bottom" ? -7 : 33;
var postionc = colordirection != "bottom" ? "colord" : "";
var li3 = $(" ").css("height", "60px");
li3.appendto(ul);
var li2 = $(" ")
.css('background-position-y', (parseint(linefirsty) - postiony) + "px").addclass(postionc);
li2.appendto(ul);
//var vlist = value.split('=');
//var li = $("" + vlist[1] + "
" + vlist[0] + "").css("margin", "0px 0px 0px -42px").css("height", "22px");//9是原计算结果的偏移量,显示位置正合适
var li = $("" + value + "").css("margin", "0px 0px 0px -100px").css("height", "120px");//9是原计算结果的偏移量,显示位置正合适
li.appendto(ul);
return;
}
});
}
//封装轴线上的圆点
var linepointy = getlinepointy(colorindex);
var point = $("").css('background-position', '0px ' + linepointy);
point.appendto(ul);
//生成一个item(一个完整的案件)
var li_item = $("");
var content = $("");
ul.appendto(content);
content.appendto(li_item);
li_item.addclass(itemclass(index)).appendto(ul_item);
});
ul_item.appendto(bd);
bd.appendto(wrapper);
var prev = $("");
var next = $("");
var line = $("");
var bgmsg = $("没有数据
");
var l1 = $("");
var r1 = $("");
if (data.length > 0)
fishbone.append(wrapper).append(prev).append(next).append(line).append(l1).append(r1);
else
fishbone.append(bgmsg);
return fishbone;
};
/**item添加样式,显示在上方或下方*/
function itemclass(index) {
index += 1;
if (index % 2 == 0) {
//偶数显示到下方
return "bottom";
} else {
//奇数显示到上方
return "top";
}
}
}
function hidefishboneprevbutton() {
$(".prevleftimg").show();
}
function showfishboneprevbutton() {
$(".prevleftimg").show();
}
function hidefishbonenextbutton() {
$(".nextrightimg").show();
}
function showfishbonenextbutton() {
$(".nextrightimg").show();
}