最终显示效果
注意 :
从1 - 9 分别是 往上4代和往下4代, 以及本人这一代 , 共加载9代人
7 ...
6 父亲(配偶)、伯伯(配偶)、姑姑(配偶)、舅舅(配偶)、姨妈(配偶)
5 自己(配偶)、同辈堂兄弟姐妹(配偶)、同辈表兄弟姐妹
4 子女(配偶)、侄子侄女(配偶)、表侄子侄女(配偶)
3 ...
// 因为我的运行环境是SE5 不支持Map, 所有newMap是我自己封装的, 请自行替换
newMap();
// 这是我环境封装的请求SQL查询的函数, 可替换成ajax请求你的接口
result.SQL.get("qb9e8db7", {
...
});返回数据示例 :
JS代码 :
// var fatherBrotherArray = ["伯伯", "表(哥|弟|姐|妹)", "表侄(子|女)"]; // 父亲兄弟开始往下
// var fatherSistersArray = ["姑姑", "表(哥|弟|姐|妹)", "表侄(子|女)"]; // 父亲姐妹开始往下
// var motherBrotherArray = ["舅舅", "表(哥|弟|姐|妹)", "表侄(子|女)"]; // 母亲兄弟开始往下
// var motherSistersArray = ["姨妈", "表(哥|弟|姐|妹)", "表侄(子|女)"]; // 母亲姐妹开始往下
// var brotherArray = ["(嫂子|弟媳)", "侄(子|女)"] // 兄弟开始往下
// var sistersArray = ["(姐夫|妹夫)", "外甥(|女)"]; // 姐妹开始往下
var fatherArray = ["父亲", "爷爷", "曾祖父", "高祖父"];// 父亲往上男3代
var fatherNvArray = ["父亲", "奶奶", "曾祖母", "高祖母"];// 父亲往上女3代
var motherArray = ["母亲", "外公", "外曾祖父", "外高祖父"];// 母亲往上男3代
var motherNvArray = ["母亲", "外婆", "外曾祖母", "外高祖母"];// 母亲往上女3代
var sonArray = ["儿子", "孙子", "曾孙", "玄孙"];// 儿子的儿子往下
var sonNvArray = ["女儿", "孙女", "曾孙女", "玄孙女"];// 儿子的女儿往下
var daughterArray = ["儿子", "外孙子", "外曾孙", "外玄孙"];// 女儿的儿子往下
var daughterNvArray = ["女儿", "外孙女", "外曾孙女", "外玄孙女"];// 女儿的女儿往下
var levelMap = newMap();
levelMap.put("9", []);
levelMap.put("8", []);
levelMap.put("7", []);
levelMap.put("6", []);
levelMap.put("5", []);
levelMap.put("4", []);
levelMap.put("3", []);
levelMap.put("2", []);
levelMap.put("1", []);
var currentPerson = {};
// 获得母亲的兄弟姐妹 与 兄弟姐妹的孩子
function getMotherBrother(person) {
var per = getPerson(person.id, true);
var motherBrother = getBrothers(per);
for(var i = 0 ; i < motherBrother.length ; i++) {
var obj1 = motherBrother[i];
if(obj1.sex == '男性') {
if(obj1["flag"] != "1") {
obj1["relation"] = "舅舅";
}else{
obj1["relation"] = "姨夫";
}
}else{
if(obj1["flag"] != "1") {
obj1["relation"] = "姨妈";
}else{
obj1["relation"] = "舅妈";
}
}
builderBase(obj1);
if(obj1.fatherData != null) {
obj1["sourceId"] = obj1.fatherData.id;
obj1["source"] = obj1.fatherData.name;
}else if(obj1.motherData != null) {
obj1["sourceId"] = obj1.motherData.id;
obj1["source"] = obj1.motherData.name;
}
if(obj1.id == person.id) {
buiderBrother(currentPerson); // 当前人的亲兄妹以及他们的配偶
}
saveLevelPerson(6 , obj1);
getFatherMotherBrotherOffspring(motherBrother[i], 5, 0);
}
}
// 获得父亲的兄弟姐妹 与 兄弟姐妹的孩子
function getFatherBrother(person) {
var per = getPerson(person.id, true);
var fatherBrother = getBrothers(per);
for(var i = 0 ; i < fatherBrother.length ; i++) {
var obj1 = fatherBrother[i];
if(obj1.sex == '男性') {
if(obj1["flag"] != "1") {
obj1["relation"] = "伯伯";
}else{
obj1["relation"] = "姑父";
}
}else{
if(obj1["flag"] != "1") {
obj1["relation"] = "姑姑";
}else{
obj1["relation"] = "伯母";
}
}
if(obj1.fatherData != null) {
obj1["sourceId"] = obj1.fatherData.id;
obj1["source"] = obj1.fatherData.name;
}else if(obj1.motherData != null) {
obj1["sourceId"] = obj1.motherData.id;
obj1["source"] = obj1.motherData.name;
}
if(obj1.id == person.id) {
getOffspring(currentPerson, 4, 0); // 当前人的子孙后4代
buiderBrother(currentPerson); // 当前人的亲兄妹以及他们的配偶
}
saveLevelPerson(6 , obj1);
getFatherMotherBrotherOffspring(obj1, 5, 0);
}
}
// 父亲或母亲 | 兄弟姐妹 的后代 . 堂 / 表 (与配偶) / 侄
function getFatherMotherBrotherOffspring(person, level, index) {
if(person == null || index > 1) {
return;
}
var sunArray = [];
if(person.sex == "男性") {
sunArray = result.SQL.get("qb9e8db7", {
fatherId: person.id, // 父亲ID
fatherIdcard: person.idcard, //父亲证件号
});
}else{
sunArray = result.SQL.get("qb9e8db7", {
motherId: person.id, // 母亲ID
motherIdcard: person.idcard, // 母亲证件号
});
}
var sunArrayn = [];
for(var i = 0 ; i < sunArray.length ; i++) {
var obj = sunArray[i];
if(obj.id == currentPerson.id) {
continue;
}
builderBase(obj);
if(obj.sex == '男性') {
if(index == 0) {
if(currentPerson.age > obj.age) {
if(person.relation == "伯伯") {
obj["relation"] = "堂弟";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '堂弟媳';
}
}else{
obj["relation"] = "表弟";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '表弟媳';
}
}
if(obj.spouseData != null) {
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
}
}else{
if(person.relation == "伯伯") {
obj["relation"] = "堂哥";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '堂嫂';
}
}else{
obj["relation"] = "表哥";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '表嫂';
}
}
if(obj.spouseData != null) {
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
}
}
}
}else{
if(index == 0) {
if(currentPerson.age > obj.age) {
if(person.relation == "伯伯") {
obj["relation"] = "堂妹";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '堂妹夫';
}
}else{
obj["relation"] = "表妹";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '表妹夫';
}
}
if(obj.spouseData != null) {
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
}
}else{
if(person.relation == "伯伯") {
obj["relation"] = "堂姐";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '堂姐夫';
}
}else{
obj["relation"] = "表姐";
if(obj.spouseData != null) {
obj.spouseData["relation"] = '表姐夫';
}
}
if(obj.spouseData != null) {
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
}
}
}
}
if(index != 0) {
var relationStart = person.relation.indexOf("堂") != -1 ? "堂" : "表";
if(obj.sex == '男性') {
obj["relation"] = relationStart + "侄";
}else{
obj["relation"] = relationStart + "侄女";
}
// 侄子的配偶
if(obj.spouseData != null) {
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
obj.spouseData["spouseId"] = obj.id;
obj.spouseData["spouse"] = obj.name;
}
}
// 指向他们的父母连接线
if(obj.fatherData != null) {
obj["sourceId"] = obj.fatherData.id;
obj["source"] = obj.fatherData.name;
}else if(obj.motherData != null) {
obj["sourceId"] = obj.motherData.id;
obj["source"] = obj.motherData.name;
}
sunArrayn.push(obj);
// 有配偶的添加配偶
if(obj.spouseData != null) {
sunArrayn.push(obj.spouseData);
}
}
for(var i = 0 ; i < sunArrayn.length ; i++) {
var obj = sunArrayn[i];
saveLevelPerson(level, obj);
getFatherMotherBrotherOffspring(obj, level-1, index+1);
}
}
// 放入人员信息(规避重复放入)
function saveLevelPerson(level, person) {
if(person == null) {
return;
}
var arr = levelMap.get(level + "");
for(var i = 0 ; i < arr.length ; i++) {
if(arr[i].id == person.id) {
return;
}
}
arr.push(person);
}
// 获取某人信息
function getPerson(id, continueBase) {
var personArray = result.SQL.get("qb9e8db7", {
id: id
});
if(personArray.length > 0) {
var per = personArray[0];
if(continueBase) {
builderBase(per);
}
return per;
}
return null;
}
// 自己的所有孩子
function getSun(person) {
if(person == null) {
return [];
}
var sunArray = [];
if(person.sex == "男性") {
sunArray = result.SQL.get("qb9e8db7", {
fatherId: person.id, // 父亲ID
fatherIdcard: person.idcard, //父亲证件号
});
}else{
sunArray = result.SQL.get("qb9e8db7", {
motherId: person.id, // 母亲ID
motherIdcard: person.idcard, // 母亲证件号
});
}
return sunArray;
}
// 递归子孙后代
function getOffspring(person, level, index) {
if(person == null || index >= sonArray.length) {
return;
}
var sunArray = [];
if(person.sex == "男性") {
sunArray = result.SQL.get("qb9e8db7", {
fatherId: person.id, // 父亲ID
fatherIdcard: person.idcard, //父亲证件号
});
}else{
sunArray = result.SQL.get("qb9e8db7", {
motherId: person.id, // 母亲ID
motherIdcard: person.idcard, // 母亲证件号
});
}
for(var i = 0 ; i < sunArray.length ; i++) {
var obj = sunArray[i];
if(person.sex == "男性") {
if(obj.sex == "男性") {
obj["relation"] = sonArray[index];
}else{
obj["relation"] = sonNvArray[index];
}
}else{
if(obj.sex == "男性") {
obj["relation"] = daughterArray[index];
}else{
obj["relation"] = daughterNvArray[index];
}
}
obj["sourceId"] = person.id;
obj["source"] = person.name;
saveLevelPerson(level, obj);
getOffspring(obj, level-1, index+1)
}
}
// 递归姥姥姥爷..
function getMotherElders(person, arr, index) {
if(person == null || index >= arr.length) {
return;
}
var per = getPerson(person.id, true);
if(per != null ) {
if(per.fatherData != null) {
per["sourceId"] = per.fatherData.id;
per["source"] = per.fatherData.name;
}else if(per.motherData != null) {
per["sourceId"] = per.motherData.id;
per["source"] = per.motherData.name;
}
if(per.spouseData != null) {
per["spouseId"] = per.spouseData.id;
per["spouse"] = per.spouseData.name;
}
per["relation"] = arr[index];
if(index != 0){
saveLevelPerson(index + 6, per);
}
var father = per.fatherData;
var mother = per.motherData;
getFatherElders(father, motherArray, index+1);
getMotherElders(mother, motherNvArray, index+1);
}
}
// 递归爷爷奶奶..
function getFatherElders(person, arr, index) {
if(person == null || index >= arr.length) {
return;
}
var per = getPerson(person.id, true);
if(per != null ) {
if(per.fatherData != null) {
per["sourceId"] = per.fatherData.id;
per["source"] = per.fatherData.name;
}else if(per.motherData != null) {
per["sourceId"] = per.motherData.id;
per["source"] = per.motherData.name;
}
per["relation"] = arr[index];
if(index != 0){
saveLevelPerson(index + 6, per);
}
var father = per.fatherData;
var mother = per.motherData;
getFatherElders(father, fatherArray, index+1);
getMotherElders(mother, fatherNvArray, index+1);
}
}
// 封装父母和配偶
function builderBase(person) {
// 父亲
if(person.fatherId != "" || person.fatherIdcard != "") {
var personFu = result.SQL.get("qb9e8db7", {
id: person.fatherId, // 1. 父亲ID
idcard: person.fatherIdcard, // 2. 父亲证件号
});
person["fatherData"] = personFu.length > 0 ? personFu[0] : null;
}
// 母亲
if(person.motherId != "" || person.motherIdcard != "") {
var personMu = result.SQL.get("qb9e8db7", {
id: person.motherId, // 1. 母亲ID
idcard: person.motherIdcard, // 2. 母亲证件号
});
person["motherData"] = personMu.length > 0 ? personMu[0] : null;
}
// 配偶
if(person.spouseId != "" || person.spouseIdcard != "") {
var personPei = result.SQL.get("qb9e8db7", {
id: person.spouseId, // 1. 配偶ID
idcard: person.spouseIdcard, // 2. 配偶证件号
});
person["spouseData"] = personPei.length > 0 ? personPei[0] : null;
}
if(person["spouseData"] == null) {
var personPei = result.SQL.get("qb9e8db7", {
spouseId: person.id, // 1. 配偶ID
spouseIdcard: person.idcard, // 2. 配偶证件号
});
if(personPei.length > 0) {
person["spouseData"] = personPei[0];
}
}
if(person["motherData"] == null && person["fatherData"] != null) {
var personArray = result.SQL.get("qb9e8db7", {
id: person["fatherData"].id
});
if(personArray.length > 0) {
var per = personArray[0];
if(per.spouseId != "" || per.spouseIdcard != "") {
var personPei1 = result.SQL.get("qb9e8db7", {
id: per.spouseId, // 1. 配偶ID
idcard: per.spouseIdcard, // 2. 配偶证件号
});
person["motherData"] = personPei1.length > 0 ? personPei1[0] : null;
}
}
}
if(person["fatherData"] == null && person["motherData"] != null) {
var personArray = result.SQL.get("qb9e8db7", {
id: person["motherData"].id
});
if(personArray.length > 0) {
var per = personArray[0];
if(per.spouseId != "" || per.spouseIdcard != "") {
var personPei1 = result.SQL.get("qb9e8db7", {
id: per.spouseId, // 1. 配偶ID
idcard: per.spouseIdcard, // 2. 配偶证件号
});
person["fatherData"] = personPei1.length > 0 ? personPei1[0] : null;
}
}
}
}
// 封装亲兄弟姐妹(以及他们的配偶),以及侄子外甥(以及侄媳与外甥女婿)
function buiderBrother(person) {
var arr = getBrothers(person)
for(var i = 0 ; i < arr.length ; i++) {
saveLevelPerson(5, arr[i]);
}
for(var i = 0 ; i < arr.length ; i++) {
// 找弟弟的孩子
var array = getSun(arr[i]);
for(var j = 0 ; j < array.length ; j++) {
var obj = array[j];
builderBase(obj);
if( (arr[i].relation == "哥哥" || arr[i].relation == "弟弟") && arr[i].flag != "1" ) {
var tempRelation = "";
if(obj.sex == '男性') {
obj["relation"] = "侄子";
temp = "侄媳妇";
}else{
obj["relation"] = "侄女";
temp = "侄女婿";
}
obj["sourceId"] = arr[i].id;
obj["source"] = arr[i].name;
saveLevelPerson(4, obj);
if(obj.spouseData != null) {
obj.spouseData["relation"] = tempRelation;
obj.spouseData["sourceId"] = obj.id;
obj.spouseData["source"] = obj.name;
saveLevelPerson(4, obj.spouseData.name);
}
}
if( (arr[i].relation == "姐姐" || arr[i].relation == "妹妹") && arr[i].flag != "1" ) {
var tempRelation = "";
if(obj.sex == '男性') {
obj["relation"] = "外甥";
temp = "外甥媳妇";
}else{
obj["relation"] = "外甥女";
temp = "外甥女婿";
}
obj["sourceId"] = arr[i].id;
obj["source"] = arr[i].name;
saveLevelPerson(4, obj);
if(obj.spouseData != null) {
var spouseData = obj.spouseData;
spouseData["relation"] = tempRelation;
spouseData["flag"] = "1";
spouseData["sourceId"] = obj.id;
spouseData["source"] = obj.name;
spouseData["spouseId"] = obj.id;
spouseData["spouse"] = obj.name;
saveLevelPerson(4, spouseData);
}
}
}
}
}
// 获取兄弟姐妹(以及他们的配偶)
function getBrothers(person) {
var arr = [];
// 查找有相同父母的人员
if(person.motherData === null && person.fatherData === null) {
return [];
}
var map = newMap();
if( person.fatherId != "" || person.fatherIdcard != "") {
// 同父
var personArr1 = result.SQL.get("qb9e8db7", {
fatherId: person.fatherId, // 父亲ID
fatherIdcard: person.fatherIdcard, //父亲证件号
});
for(var i = 0 ; i < personArr1.length; i++) {
map.put(personArr1[i].id, personArr1[i]);
}
}
if( person.motherId != "" || person.motherIdcard != "") {
// 同母
var personArr2 = result.SQL.get("qb9e8db7", {
motherId: person.motherId, // 母亲ID
motherIdcard: person.motherIdcard, // 母亲证件号
});
for(var i = 0 ; i < personArr2.length; i++) {
map.put(personArr2[i].id, personArr2[i]);
}
}
var m = map.all();
for(var prop in m) {
arr.push(map.get(prop));
}
var d = arr;
var resultArray = [];
// 封装兄弟姐妹
for(var i = 0 ; i < arr.length ; i++) {
var per = arr[i];
builderBase(per);
if(per.id === currentPerson.id) {
per["relation"] = "本人";
if(per.spouseData != null) {
per.spouseData["relation"] = (currentPerson.sex == '男性' ? '妻子' : '丈夫');
per.spouseData["sourceId"] = currentPerson.id;
per.spouseData["source"] = currentPerson.name;
}
}else if(per.sex == '男性') {
if(per.age > person.age) {
per["relation"] = "哥哥";
if(per.spouseData != null) {
per.spouseData["relation"] = "嫂子";
per.spouseData["sourceId"] = per.id;
per.spouseData["source"] = per.name;
}
}else{
per["relation"] = "弟弟";
if(per.spouseData != null) {
per.spouseData["relation"] = "弟媳";
per.spouseData["sourceId"] = per.id;
per.spouseData["source"] = per.name;
}
}
}else{
if(per.age > person.age) {
per["relation"] = "姐姐";
if(per.spouseData != null) {
per.spouseData["relation"] = "姐夫";
per.spouseData["sourceId"] = per.id;
per.spouseData["source"] = per.name;
}
}else{
per["relation"] = "妹妹";
if(per.spouseData != null) {
per.spouseData["relation"] = "妹夫";
per.spouseData["sourceId"] = per.id;
per.spouseData["source"] = per.name;
}
}
}
if(per.fatherData != null) {
per["sourceId"] = per.fatherData.id;
per["source"] = per.fatherData.name;
}else if(per.motherData != null) {
per["sourceId"] = per.motherData.id;
per["source"] = per.motherData.name;
}
resultArray.push(per);
if(per.spouseData != null) {
var spouseData = per.spouseData; // 配偶的信息
spouseData["flag"] = "1";
spouseData["spouseId"] = per.id;
spouseData["spouse"] = per.name;
resultArray.push(spouseData);
}
}
return resultArray;
}
function data(id) {
currentPerson = person = getPerson(id, true);
getFatherElders(person.fatherData, fatherArray, 0); // 当前人的爸爸前4代
getMotherElders(person.motherData, motherArray, 0); // 当前人的妈妈前4代
getFatherBrother(person.fatherData); // 伯伯/姑姑/兄弟/表兄弟/表侄子(女)
getMotherBrother(person.motherData); // 舅舅/姨妈/表兄弟/表侄子(女)
var list = levelMap.allList();
var map = newMap();
for(var i = 0 ; i < list.length; i++) {
var obj = list[i];
var arr = map.get(obj.key) == null ? [] : map.get(obj.key);
for(var j = 0 ; j < obj.value.length; j++) {
arr.push({
name: obj.value[j].name, // 姓名
relation: obj.value[j].relation, // 关系
sex: obj.value[j].sex, // 性别
source: obj.value[j].source, // 连线至
sourceId: obj.value[j].sourceId,// 连线至ID
spouse: obj.value[j].spouse,// 配偶
spouseId: obj.value[j].spouseId,// 配偶ID
id: obj.value[j].id,// 主键
age: obj.value[j].age// 年龄
})
}
map.put(obj.key, arr);
}
return map.all();
}
data('人员ID');SQL示例 :
SQL查询的判断条件是我平台的固定写法, 可以进行替换。
SQL代码 :
SELECT
t1.population_info_id AS id,
t1.name,
t1.idcard,
t1.sex,
TIMESTAMPDIFF(YEAR, STR_TO_DATE(t1.birthday, '%Y-%m-%d'), CURDATE()) AS age,
IFNULL(t1.phone, '') AS phone,
CASE
WHEN t1.label LIKE '%6f63b85f-7157-46cd-b84d-b11a8a6602e6%' THEN '是'
ELSE '否'
END AS yiGu,
t1.father_id AS fatherId,
t1.father_idcard AS fatherIdcard,
t1.mother_id AS motherId,
t1.mother_idcard AS motherIdcard,
t1.spouse_id AS spouseId,
t1.spouse_idcard AS spouseIdcard
FROM
report_population_info t1
WHERE
t1.is_delete = 0
${fatherId != "" && fatherIdcard != "" && id == "" ? " AND (t1.father_id = '${fatherId}' OR t1.father_idcard = '${fatherIdcard}') " : ""}
${fatherId != "" && fatherIdcard == "" ? " AND t1.father_id = '${fatherId}' " : ""}
${fatherIdcard != "" && fatherId == "" ? " AND t1.father_idcard = '${fatherIdcard}' " : ""}
${motherId != "" && motherIdcard != "" ? " AND (t1.mother_id = '${motherId}' OR t1.mother_idcard = '${motherIdcard}') " : ""}
${motherId != "" && motherIdcard == "" ? " AND t1.mother_id = '${motherId}' " : ""}
${motherIdcard != "" && motherId == "" ? " AND t1.mother_idcard = '${motherIdcard}' " : ""}
${spouseId != "" && spouseIdcard != "" ? " AND (t1.spouse_id = '${spouseId}' OR t1.spouse_idcard = '${spouseIdcard}') " : ""}
${spouseId != "" && spouseIdcard == "" ? " AND t1.spouse_id = '${spouseId}' " : ""}
${spouseIdcard != "" && spouseId == "" ? " AND t1.spouse_idcard = '${spouseIdcard}' " : ""}
${id != "" && idcard != "" ? " AND (t1.population_info_id = '${id}' OR t1.idcard = '${idcard}') " : ""}
${id != "" && idcard == "" ? "AND t1.population_info_id = '${id}'" : ""}
${id == "" && idcard != "" ? "AND t1.idcard = '${idcard}'" : ""}
${id == "" && idcard == "" && fatherId == "" && fatherIdcard == "" && motherId == "" && motherIdcard == "" && spouseId == "" && spouseIdcard == "" ? " AND t1.is_delete = 2 " : ""}
ORDER BY
age DESC前端示例 ：
前端代码是我在我框架编写的代码块 , 仅供参考
serverData 传入渲染的数据 , moduleData.id为要往哪个Id的Div放 , linkAllAction是我框架的的触发函数
前端代码 ：
<style type="text/css">
.M0133_family{
margin: 10px 5px;
width: 99.3%;
z-index: 999 !important;
display: flex;
justify-content: center;
white-space: normal; /* 允许文本换行 */
word-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
overflow-wrap: break-word; /* 同上，为了兼容不同浏览器 */
}
.M0133_family .layui-btn {
display: inline-block; /* 使按钮以内联块级元素显示 */
margin: 5px; /* 添加一些外边距，使按钮之间有空隙 */
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2px;
border-radius: 5px;
height: 30px;
line-height: 30px;
}
#M0133-svg-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
</style>
<script type="text/javascript">
/**
* 模块类型 * 自定义
* 模块编号 * M0133
* 模块名称 * 人物关系图谱
* 创建日期 * 2024-11-19 17:47:11
* 使用说明 * 这里阐述该模块的使用说明
*/
function getXyM0133(dom, pos) {
var obj = {x : 0, y : 0};
if(pos == 'button') {
obj.x = dom.offsetLeft + dom.offsetWidth / 2;
obj.y = dom.offsetTop + dom.offsetHeight;
}else if(pos == 'left') {
obj.x = dom.offsetLeft;
obj.y = dom.offsetTop + dom.offsetHeight / 2;
}else if(pos == 'right') {
obj.x = dom.offsetLeft + dom.offsetWidth;
obj.y = dom.offsetTop + dom.offsetHeight / 2;
}else if(pos == 'top') {
obj.x = dom.offsetLeft + dom.offsetWidth / 2;
obj.y = dom.offsetTop;
}
return obj;
}
function connectEdgesM0133(id1, id2, color = 'red', width = '0.5' , pos1 = 'right', pos2 = 'left') {
try{
const dom1 = document.getElementById(id1);
const dom2 = document.getElementById(id2);
const svg = document.getElementById('M0133-svg-container');
var objXy1 = getXyM0133(dom1, pos1);
var objXy2 = getXyM0133(dom2, pos2);
// 创建SVG线条
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', objXy1.x);
line.setAttribute('y1', objXy1.y);
line.setAttribute('x2', objXy2.x);
line.setAttribute('y2', objXy2.y);
line.setAttribute('stroke', color); // 线条颜色
line.setAttribute('stroke-width', width); // 线条宽度
// 将线条添加到SVG容器中
svg.appendChild(line);
}catch(e) {
console.log(id1);
console.log(id2);
console.log(e);
}
}
function M0133(moduleData, serverData) {
if(!globalData[moduleData.id].interval) {
console.log('人物关系图谱【' + moduleData.id + '自定义】初始化...');
}
var maxWidth = moduleData.data.maxWidth;
var width = $('#' + moduleData.id).width();
var height = $('#' + moduleData.id).height();
var LineHeight = ($('#' + moduleData.id).height() - 90) / 9;
var html = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" shape-rendering="geometricPrecision" id="M0133-svg-container"></svg>`;
$('#' + moduleData.id).html(html);
var levelLength = 0;
for (let key in serverData) {
if (serverData.hasOwnProperty(key)) {
if(serverData[key].length > 0) {
levelLength++;
}
}
}
var LineHeight = ($('#' + moduleData.id).height() - (levelLength * 10)) / levelLength;
var levelArray = [];
for (let key in serverData) {
if (serverData.hasOwnProperty(key)) {
if(serverData[key].length > 0) {
levelArray.push(Number(key));
}
}
}
levelArray.sort((a, b) => b - a);
for(var i = 0 ; i < levelArray.length ; i++) {
$('#' + moduleData.id).append(`<div id="level${levelArray[i]}" style="height: ${LineHeight}px" class="M0133_family"></div>`);
}
for (let key in serverData) {
if (serverData.hasOwnProperty(key)) {
var array = serverData[key];
var length = array.length;
var mWidth = (width - 10 * length) / length;
var nWidth = mWidth > maxWidth ? maxWidth + "px" : mWidth + "px";
for(var i = 0 ; i < array.length ; i++) {
var obj = array[i];
$("#level" + key).append(`<button data-name="${obj.name}" data-sex="${obj.sex}" data-age="${obj.age}" data-level="${key}" style="width:${nWidth};height:${LineHeight / 2 > 40 ? LineHeight / 2 : 40 }px;line-height: 16px;" title="${obj.name}(${obj.relation})/${obj.age}岁" type="button" id="${obj.id}" class="M0133_family-btn layui-btn ${ '本人' == obj.relation ? 'user-self layui-btn-primary' : obj.sex == '男性' ? 'layui-btn-normal' : 'layui-btn-danger'}">${obj.name}</br>${obj.relation}.${obj.age}</button>`);
}
}
}
for (let key in serverData) {
if (serverData.hasOwnProperty(key)) {
var array = serverData[key];
for(var i = 0 ; i < array.length ; i++) {
var obj = array[i];
if(obj.sourceId && obj.sourceId.length > 0) {
var source = $(document.getElementById(obj.sourceId)).data("level");
var target = $(document.getElementById(obj.id)).data("level");
console.log(obj);
console.log(Number(source));
console.log(Number(target));
if(Number(source) < Number(target)) {
connectEdgesM0133(obj.sourceId , obj.id, 'blue', 0.5, 'top', 'button');
}else if(Number(source) == Number(target)) {
}else {
connectEdgesM0133(obj.sourceId , obj.id, 'blue', 0.5, 'button', 'top');
}
}
if(obj.spouseId && obj.spouseId.length > 0) {
connectEdgesM0133(obj.spouseId, obj.id, 'red', 5, 'right', 'left');
}
}
}
}
$(document).on("click", ".M0133_family-btn", function(e) {
var id = $(this).attr("id");
var name = $(this).data("name");
var sex = $(this).data("sex");
var age = $(this).data("age");
console.log(id, name, sex, age);
// 触发自定义联动
globalData[moduleData.id].linkAllAction({id: id, name: name, age: age, sex: sex});
})
}
</script>