Skip to content

F
founder_vue
Commit fb1958a0 by liyuhang19990520
Options

关系图接口以及组件

parent ff7172e4
Showing with 662 additions and 105 deletions
src/App.vue
<!--
* @Author: your name
* @Date: 2021-07-18 16:03:37
* @LastEditTime: 2021-07-18 16:18:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\App.vue
-->
<template>
<div id="app">
<router-view v-wechat-title="$route.meta.title"></router-view>
......@@ -5,7 +13,22 @@
</template>
<script>
export default {};
import { loginByZjhm } from "@/api/home.js";
export default {
created(){
this.login();
},
methods: {
login() {
var params = new FormData();
var self = this;
params.append("zjhm", "142302********2413");
loginByZjhm(params).then((res) => {
console.log(res);
});
},
},
};
</script>
<style></style>
src/api/home.js
/*
* @Author: your name
* @Date: 2021-07-05 17:04:26
* @LastEditTime: 2021-07-10 21:45:47
* @LastEditTime: 2021-07-18 18:54:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\api\home.js
......@@ -20,5 +20,11 @@ export const getAjRwGxXx = params =>
get(setting.BaseURL + "/ksh/getAjRwGxXx", params);
export const getRyJbXx = params =>
get(setting.BaseURL + "/ksh/getRyJbXx", params);
export const getHdxxById = params =>
get(setting.BaseURL + "/ksh/getHdxxById", params);
export const getHdSameByIds = params =>
get(setting.BaseURL + "/ksh/getHdSameByIds", params);
export const getQzByQzbhs = params =>
get(setting.BaseURL + "/ksh/getQzByQzbhs", params);
src/components/RelationalGraph.vue
......@@ -4,7 +4,7 @@
class="seeksRelationGraph"
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="nodeClick"
:on-node-click="nodeClickBoo ? nodeClick : () => {}"
>
</SeeksRelationGraph>
</div>
......@@ -19,7 +19,7 @@ export default {
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
props: {
//初始化根节点
//初始化根节点，没有不填
nodedata: {
type: Object,
default: () => {},
......@@ -31,16 +31,21 @@ export default {
default: () => {},
require: true,
},
//调用查询接口地址
//调用查询接口地址必填初始化的接口
childrenXhrStr: {
type: String,
default: () => null,
},
//全国人员照片接口
//全国人员照片接口没有的话就按type设置
photoXhrStr: {
type: String,
default: () => null,
},
//此接口是否是一层层展开的接口
nodeClickBoo: {
type: Boolean,
default: () => true,
},
},
data() {
return {
......@@ -53,7 +58,6 @@ export default {
defaultNodeColor: "rgba(238, 178, 94, 1)",
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
// defaultExpandHolderPosition: 'right',
defaultLineShape: 1,
layouts: [
{
......@@ -66,6 +70,8 @@ export default {
// 这里可以参考"Graph 图谱"中的参数进行设置
},
activeIdArr: [],
nodeArr: [],
linkArr: [],
};
},
created() {},
......@@ -80,81 +86,71 @@ export default {
},
async setGraphData() {
var _this = this;
// this.photoXhrStr
let photoData = await this.callApi(this.photoXhrStr, {
zjhm: this.nodedata.name,
});
let nodePhoto = this.selectIcon(this.nodedata.type);
if (photoData?.rows?.edzzplj) {
nodePhoto = "data:image/jpg;base64," + photoData?.rows?.edzzplj;
let photoData;
let nodePhoto;
let rootNode = null;
//如果存在根节点就创建
if (this.nodedata) {
//如果有photoXhrStr就调用接口否则就是selectIcon的图片
if (this.photoXhrStr) {
photoData = await this.callApi(this.photoXhrStr, {
zjhm: this.nodedata.name,
});
} else {
photoData = undefined;
}
nodePhoto = this.selectIcon(this.nodedata.type);
if (photoData?.rows?.edzzplj) {
nodePhoto = "data:image/jpg;base64," + photoData?.rows?.edzzplj;
}
this.activeIdArr = [this.nodedata.name];
//创建根节点
rootNode = {
id: this.nodedata.name,
text: this.nodedata.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
nodePhoto +
');"><div class="c-node-name2" style="color:#000">' +
this.nodedata.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(this.nodedata.describe) +
"</div></div>",
data: {
type: this.nodedata.type,
id: this.nodedata.name,
parentId: this.nodedata.id,
},
};
this.nodeArr.push(rootNode);
}
this.activeIdArr = [this.nodedata.name];
//动态调用接口初始化数据
let params = {};
for (let key in _this.params) {
params[key] = this.nodedata[_this.params[key]];
}
this.callApi(this.childrenXhrStr, params).then((res) => {
let nodeArr = [];
let linkArr = [];
this.callApi(this.childrenXhrStr, this.params).then((res) => {
//初始化子节点
if (res.rows?.length > 0) {
nodeArr = res.rows.map((item) => {
let base64 = "data:image/jpg;base64," + item.img;
if (!item.img) base64 = this.selectIcon(item.type, item.children);
return {
id: item.name,
text: item.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
base64 +
');"><div class="c-node-name2" style="color:#000">' +
item.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(item.describe) +
"</div></div>",
data: {
type: item.type,
id: item.name,
parentId: this.nodedata.name,
},
};
});
linkArr = res.rows.map((item) => {
return {
from: this.nodedata.name,
to: item.name,
text: item.value || "",
color: "#1789DB",
};
});
//处理node
this.createNode(res.rows);
//处理link
if (this.nodedata) {
res.rows.forEach((item) => {
this.linkArr.push({
from: this.nodedata.name,
to: item.name,
text: item.value || "",
color: "#1789DB",
});
});
}
this.createLink(res.rows);
}
var __graph_json_data = {
rootId: "a",
nodes: [
//初始化时的根节点
{
id: this.nodedata.name,
text: this.nodedata.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
nodePhoto +
');"><div class="c-node-name2" style="color:#000">' +
this.nodedata.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(this.nodedata.describe) + "</div></div>",
data: {
type: this.nodedata.type,
id: this.nodedata.name,
parentId: this.nodedata.id,
},
},
//子节点
...nodeArr,
...this.nodeArr,
],
links: [...linkArr],
links: [...this.linkArr],
};
this.g_loading = false;
this.$refs.seeksRelationGraph.setJsonData(
......@@ -167,6 +163,56 @@ export default {
);
});
},
//初始化时循环处理node
createNode(data) {
data.forEach((item) => {
if (
item.children &&
Array.isArray(item.children) &&
item.children.length > 0
) {
this.createNode(item.children);
}
if (!this.nodeArr.find((i) => i.id == item.name)) {
let base64 = "data:image/jpg;base64," + item.img;
if (!item.img) base64 = this.selectIcon(item.type, item.children);
this.nodeArr.push({
id: item.name,
text: item.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
base64 +
');"><div class="c-node-name2" style="color:#000">' +
item.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(item.describe) +
"</div></div>",
data: {
type: item.type,
id: item.name,
parentId: this?.nodedata?.name || 0,
},
});
}
});
},
//处理link
createLink(data, parentId) {
data.forEach((item) => {
if(item.children && Array.isArray(item.children) && item.children.length > 0){
this.createLink(item.children,item.name)
}
if (parentId) {
this.linkArr.push({
from: parentId,
to: item.name,
text: item.value || "",
color: "#1789DB",
});
}
});
},
selectIcon(val) {
switch (val) {
case "person":
......@@ -183,6 +229,14 @@ export default {
return require(`@/assets/img/graphEcharts/imei.png`);
case "lawcase":
return require(`@/assets/img/graphEcharts/lawcase.png`);
case "webo":
return require(`@/assets/img/graphEcharts/weibo.png`);
case "bankCard":
return require(`@/assets/img/graphEcharts/yinhangka.png`);
case "imsi":
return require(`@/assets/img/graphEcharts/imsi.png`);
case "broadband":
return require(`@/assets/img/graphEcharts/kuandai.png`);
}
},
nodeClick(nodeObject) {
......@@ -264,7 +318,6 @@ export default {
nodes: nodeArr,
links: linkArr,
},
(seeksRGGraph) => {
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
......@@ -311,10 +364,8 @@ export default {
height: 20px;
}
}
.box2 {
}
.c-my-node2 {
border: none;
background-position: center center;
......@@ -323,7 +374,6 @@ export default {
width: 80px;
border-radius: 40px;
}
.c-node-name2 {
width: 160px;
margin-left: -40px;
......
src/components/RelationalGraphAll.vue 0 → 100644
<template>
<div v-loading="g_loading" style="width: 100%; height: calc(100% - 1px)">
<SeeksRelationGraph
class="seeksRelationGraph"
ref="seeksRelationGraph"
:options="graphOptions"
>
</SeeksRelationGraph>
</div>
</template>
<script>
import { get, post, postform } from "@/utils/http.js";
import { getRyJbXx } from "@/api/home.js";
import SeeksRelationGraph from "relation-graph";
import { parse } from "qs";
export default {
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
props: {
//初始化根节点
data: {
type: Array,
default: () => [],
},
nodeData: {
type: Object,
default: () => null,
},
},
data() {
return {
g_loading: true,
demoname: "---",
activeTabName: "case1",
distanceCoefficient: 1,
graphOptions: {
defaultNodeBorderWidth: 0,
defaultNodeColor: "rgba(238, 178, 94, 1)",
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
// defaultExpandHolderPosition: 'right',
defaultLineShape: 1,
layouts: [
{
label: "自动布局",
layoutName: "force",
layoutClassName: "seeks-layout-force",
},
],
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置
},
activeIdArr: [],
};
},
created() {},
methods: {
//点击的api方法
async setGraphData() {
var _this = this;
let data = JSON.parse(JSON.stringify(this.data));
let nodeArr = [];
let linkArr = [];
//初始化子节点
console.log(this.nodeData.name, 22222222);
nodeArr = data.map((item) => {
let base64 = "data:image/jpg;base64," + item.img;
if (!item.img) base64 = this.selectIcon(item.type, item.children);
return {
id: item.name,
text: item.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
base64 +
');"><div class="c-node-name2" style="color:#000">' +
item.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(item.describe) +
"</div></div>",
data: {
type: item.type,
id: item.name,
parentId: this.nodeData.name,
},
};
});
linkArr = data.map((item) => {
return {
from: this.nodeData.name,
to: item.name,
text: item.value || "",
color: "#1789DB",
};
});
var __graph_json_data = {
rootId: this.nodeData.name,
nodes: [
//初始化时的根节点
{
id: this.nodeData.name,
text: this.nodeData.name,
innerHTML:
'<div class="c-my-node2" style="background-image: url(' +
this.selectIcon(this.nodeData.type, this.nodeData.children) +
');"><div class="c-node-name2" style="color:#000">' +
this.nodeData.name +
"</div></div>" +
'<div class="c-node-name2" style="color:#000;margin-top: 25px">' +
this.filterDescribe(this.nodeData.describe) +
"</div></div>",
data: {
type: this.nodeData.type,
id: this.nodeData.name,
parentId: this.nodeData.id,
},
},
//子节点
...nodeArr,
],
links: [...linkArr],
};
this.g_loading = false;
this.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 3000);
}
);
},
selectIcon(val) {
switch (val) {
case "person":
return require(`@/assets/img/graphEcharts/person.png`);
case "car":
return require(`@/assets/img/graphEcharts/car.png`);
case "phone":
return require(`@/assets/img/graphEcharts/phone.png`);
case "qq":
return require(`@/assets/img/graphEcharts/qq.png`);
case "wechat":
return require(`@/assets/img/graphEcharts/wechat.png`);
case "imei":
return require(`@/assets/img/graphEcharts/imei.png`);
case "lawcase":
return require(`@/assets/img/graphEcharts/lawcase.png`);
}
},
//过滤describe
filterDescribe(str) {
if (str) {
return str;
} else {
return "";
}
},
},
watch: {
data: {
handler(val) {
if (Array.isArray(val) && val.length > 0) {
this.setGraphData();
}
},
deep: true,
immediate: true,
},
},
};
</script>
<style lang="scss" scoped>
.seeksRelationGraph {
/deep/ {
.box1 {
width: 200px;
height: 200px;
background-color: #ccc;
.box1_1 {
width: 20px;
height: 20px;
}
}
.box2 {
}
.c-my-node2 {
border: none;
background-position: center center;
background-size: 100%;
height: 80px;
width: 80px;
border-radius: 40px;
}
.c-node-name2 {
width: 160px;
margin-left: -40px;
text-align: center;
margin-top: 85px;
position: absolute;
}
}
}
</style>
\ No newline at end of file
src/router/index.js
/*
* @Author: your name
* @Date: 2021-06-22 15:23:03
* @LastEditTime: 2021-06-28 15:28:38
* @LastEditTime: 2021-07-19 14:59:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\index.js
......@@ -54,6 +54,42 @@ const routes = [
component: () => import("@/views/echarts/index.vue")
},
{
path: "/FamilyRelation",
name: "FamilyRelation",
meta: {
title: "家族关系",
auth: 5
},
component: () => import("@/views/echarts/FamilyRelation.vue")
},
{
path: "/TicketRelation",
name: "TicketRelation",
meta: {
title: "话单关系",
auth: 5
},
component: () => import("@/views/echarts/TicketRelation.vue")
},
{
path: "/MoreTicketRelation",
name: "MoreTicketRelation",
meta: {
title: "多人话单关系",
auth: 5
},
component: () => import("@/views/echarts/MoreTicketRelation.vue")
},
{
path: "/GroupRelation",
name: "GroupRelation",
meta: {
title: "群组关系",
auth: 5
},
component: () => import("@/views/echarts/GroupRelation.vue")
},
{
path: "/naotu",
name: "naotu",
meta: {
......
src/utils/http.js
......@@ -114,7 +114,7 @@ export function get(url, params) {
export function post(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, qs.stringify(params))
.post(url, params)
.then(response => {
resolve(response);
// var urlIp = window.location.host.substring(
......
src/views/echarts/FamilyRelation.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-06-22 17:44:35
* @LastEditTime: 2021-07-18 16:22:32
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\index.vue
-->
<template>
<div id="echarts">
<RelationalGraph
childrenXhrStr="/api/ksh/getJzTpByZjhm"
photoXhrStr="/api/ksh/getRyJbXx"
:params="{
objectValue: 'name',
objectType: 'type',
parentId: 'id',
}"
:nodedata="{
type: 'person',
id: 0,
name: '150012199201019812',
describe: '立冬',
children: true,
}"
/>
</div>
</template>
<script>
import GraphEcharts from "@/components/MoreDataGraphEchartsCopy.vue";
import RelationalGraph from "@/components/RelationalGraph.vue";
import { chartsChildrenData } from "@/static/getChildrenData.js";
import { chartsData } from "@/static/getOneData.js";
import {
loginByZjhm,
getAjRwGxXx,
getRwAjGxXx,
getRyJbXx,
} from "@/api/home.js";
import axios from "axios";
export default {
components: {
GraphEcharts,
RelationalGraph,
},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
src/views/echarts/GroupRelation.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-07-18 16:22:04
* @LastEditTime: 2021-07-19 15:02:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\TicketRelation.vue
-->
<template>
<div id="TicketRelation">
<RelationalGraph
childrenXhrStr="/api/ksh/getQzByQzbhs"
:params="{
qzbhs: '110347236,278451483',
type: 1
}"
:nodeClickBoo="false"
/>
</div>
</template>
<script>
import { getHdxxById, getHdSameByIds, getQzByQzbhs } from "@/api/home.js";
import RelationalGraphAll from "@/components/RelationalGraphAll.vue";
import RelationalGraph from "@/components/RelationalGraph.vue";
export default {
data() {
return {
data: [],
};
},
mounted() {
this.getMoreGroup();
},
components: {
RelationalGraph,
},
methods: {
getMoreGroup() {
let arr = ["20210717141920", "20210717142311"];
console.log(JSON.stringify(arr));
getQzByQzbhs({
qzbhs: "110347236,278451483",
type: 1,
}).then((res) => {
console.log(res);
});
},
},
};
</script>
<style lang="scss" scoped>
#TicketRelation {
width: 100%;
height: 100vh;
}
</style>
src/views/echarts/MoreTicketRelation.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-07-18 16:22:04
* @LastEditTime: 2021-07-19 14:56:51
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\TicketRelation.vue
-->
<template>
<div id="TicketRelation">
<RelationalGraph
childrenXhrStr="/api/ksh/getHdSameByIds"
:params="{
bddlxh: '20210717141920,20210717142311'
}"
:nodeClickBoo="false"
/>
</div>
</template>
<script>
import { getHdxxById, getHdSameByIds, getQzByQzbhs } from "@/api/home.js";
import RelationalGraphAll from "@/components/RelationalGraphAll.vue";
import RelationalGraph from "@/components/RelationalGraph.vue";
export default {
data() {
return {
data: [],
};
},
mounted() {
this.getMoreGroup();
},
components: {
RelationalGraph,
},
methods: {
getMoreGroup() {
let arr = ["20210717141920", "20210717142311"];
console.log(JSON.stringify(arr));
getQzByQzbhs({
qzbhs: "110347236,278451483",
type: 1,
}).then((res) => {
console.log(res);
});
},
},
};
</script>
<style lang="scss" scoped>
#TicketRelation {
width: 100%;
height: 100vh;
}
</style>
src/views/echarts/TicketRelation.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-07-18 16:22:04
* @LastEditTime: 2021-07-19 11:02:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\TicketRelation.vue
-->
<template>
<div id="TicketRelation">
<RelationalGraph
childrenXhrStr="/api/ksh/getHdxxById"
:params="{
bddlxh: 20210717141920,
}"
:nodedata="{
type: 'phone',
id: 0,
name: '20210717141920',
describe: '',
children: true,
}"
:nodeClickBoo="false"
/>
</div>
</template>
<script>
import { getHdxxById, getHdSameByIds, getQzByQzbhs } from "@/api/home.js";
import RelationalGraphAll from "@/components/RelationalGraphAll.vue";
import RelationalGraph from "@/components/RelationalGraph.vue";
export default {
data() {
return {
data: [],
};
},
mounted() {
this.getData();
this.getMoreData();
this.getMoreGroup();
},
components: {
RelationalGraphAll,
RelationalGraph,
},
methods: {
getData() {
getHdxxById({
bddlxh: 20210717141920,
}).then((res) => {
if (res.rows.length > 0) {
this.data = res.rows;
}
});
},
getMoreData() {
getHdSameByIds({
bddlxh: "20210717141920,20210717142311",
}).then((res) => {
console.log(res);
});
},
getMoreGroup() {
let arr = ["20210717141920", "20210717142311"];
console.log(JSON.stringify(arr));
getQzByQzbhs({
qzbhs: JSON.stringify(["110347236", "278451483"]),
type: 1,
}).then((res) => {
console.log(res);
});
},
},
};
</script>
<style lang="scss" scoped>
#TicketRelation {
width: 100%;
height: 100vh;
}
</style>
src/views/echarts/index.vue
<!--
* @Author: your name
* @Date: 2021-06-22 17:44:35
* @LastEditTime: 2021-07-14 14:54:42
* @LastEditTime: 2021-07-19 10:00:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\index.vue
......@@ -25,11 +25,10 @@
<RelationalGraph
childrenXhrStr="/api/ksh/getAjRwGxXx"
photoXhrStr="/api/ksh/getRyJbXx"
:personImgFunction="personFunction"
:params="{
objectValue: 'name',
objectType: 'type',
parentId: 'id',
objectValue: '150012199201019812',
objectType: 'person',
parentId: '0',
}"
:nodedata="{
type: 'person',
......@@ -61,30 +60,8 @@ export default {
};
},
mounted() {
this.login();
},
methods: {
login() {
var params = new FormData();
var self = this;
params.append("zjhm", "142302********2413");
loginByZjhm(params).then((res)=>{
console.log(res)
})
},
personFunction(){
return getRyJbXx
},
test() {
// getAjRwGxXx({
// objectValue: "150012199201019812",
// objectType: "person",
// parentId: 0,
// }).then((res) => {
// this.data = res.rows;
// });
},
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment