Skip to content

F
founder_vue
Commit 3289dafb by lp784568205
Options

修改组件代码，新增一些关系图页面

parent bc99d9da
Showing with 1961 additions and 4 deletions
src/components/bshChildrenQuery.vue
......@@ -1022,7 +1022,7 @@ export default {
}
post(this.propCxUrl, formDatas).then((response) => {
if (response.code == 200) {
if (self.pageBs != "ztsjfxtj") {
if (self.pageBs == "bshcb") {
response.data.data.forEach((item) => {
item.children = [];
item.xszmc = `${item.cbajAjmc}`;
......@@ -1040,7 +1040,8 @@ export default {
self.tPage = Math.ceil(
response.data.iTotalRecords / self.page_size
);
} else {
}
if(self.pageBs == "ztsjfxtj"){
if (response.data.rows.length == 0) {
this.$message.error("暂无数据显示");
}
......@@ -1140,11 +1141,9 @@ export default {
handler(val) {
if (val == 0 && this.pageBs == "dnabzcbxs") {
this.propdefaultFormThead = [...this.cxDefaultFormThead];
this.propCxUrl = this.cxUrl;
this.doQuery("yes");
} else if (val == 1 && this.pageBs == "dnabzcbxs") {
this.propdefaultFormThead = [...this.cxDefaultFormTheads];
this.propCxUrl = this.childrenUrl;
this.doQuery("yes");
}
},
......
src/components/ksh/MoreDataGraphEchartsCopy.vue 0 → 100644
<template>
<div id="graphEcharts" ref="graphEcharts">
<div
:class="splitScreen ? 'w50' : 'w100'"
id="chartsBox"
v-loading="loading"
>
<div class="leftText">
<img src="~@/assets/img/graphEcharts/logo.png" alt="" />
<span>可视化研判平台</span>
</div>
<div class="rightButton">
<el-button class="getback" @click="goBack">返回</el-button>
<el-button
type="primary"
icon="el-icon-download"
class="down"
@click="downImg"
>下载</el-button
>
</div>
<div id="hello" ref="hello"></div>
</div>
<div id="infor" :class="{ w50: splitScreen }" v-if="splitScreen">
<div class="table-content">
<el-table :data="styleForm.tableData" style="width: 100%" ref="table">
<el-table-column
align="center"
:prop="item.prop"
:label="item.label"
:width="item.width"
v-for="(item, index) in styleForm.tableLabel"
:sortable="item.label == '时间'"
:key="index"
>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="table-pagination">
<el-pagination
layout="total,prev, pager, next"
@current-change="currentChange"
:total="total"
:current-page="page"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import { get, post, postform } from "@/utils/http.js";
export default {
name: "GraphEcharts",
data() {
return {
// 实例化echarts
myChart: "",
// series中link的数据
seriesLink: "",
//series中data的数据
seriesData: "",
//点击的人物id
activeValue: "",
//背景颜色
background: "transparent",
//字体大小
fontSize: 18,
//当前缩放比例
zoom: 1,
//所有节点汇总(不展示)
dataAll: [],
//表格配置
styleForm: {
//表格内容数据
tableData: [],
//表格行标题构建
tableLabel: [
{
label: "经度",
prop: "precision",
},
{
label: "纬度",
prop: "latitude",
},
{
label: "地址",
prop: "address",
},
{
label: "时间",
prop: "time",
},
],
},
//几条数据
total: 3,
//第几页
page: 1,
//是否分屏
splitScreen: false,
//当前展开的节点
currentValue: "",
//当前点击的节点
clickNodeValue: "",
loading: true,
};
},
props: {
//接口返回的数据
data: {
type: Array,
default: () => [],
},
//调用二层的接口
childrenXhrStr: {
type: String,
default: () => null,
},
nodeInfor: {
type: Object,
default: () => {},
},
},
methods: {
/**
* @description: 返回echarts配置项方法
* @param {*}
* @return {*} echarts配置项
*/
getOption() {
return {
backgroundColor: this.background,
grid: {
left: "6%",
top: "10%",
right: "6%",
bottom: "6%",
},
series: [
{
type: "graph",
layout: "force",
force: {
repulsion: 6000,
edgeLength: 300,
layoutAnimation: true,
},
symbolSize: 100,
edgeSymbol: ["circle", "circle"],
nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
zoom: this.zoom,
roam: true, //缩放
scaleLimit: {
min: 0.2,
max: 2,
},
draggable: true, //节点是否可以拖拽
focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点，
label: {
normal: {
show: true,
position: "inside",
color: "#fff",
fontSize: this.fontSize,
},
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: this.fontSize,
color: "#26ABE0",
},
verticalAlign: "bottom",
backgroundColor: "#04233E",
lineHeight: -15,
formatter: "{c}",
},
},
categories: [
{
name: "亲人",
},
{
name: "租户",
symbol: "rect",
},
],
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: "#71D6FF",
color: "#fff",
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
// curveness: 0,
curveness: 0.1,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#26ABE0", // 0% 处的颜色
},
{
offset: 1,
color: "#0268FF", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
},
symbolKeepAspect: false,
data: this.seriesData,
links: this.seriesLink,
},
],
};
},
/**
* @description: 下载图片
* @param {*}
* @return {*}
*/
downImg() {
let aLink = document.createElement("a");
let blob = this.base64ToBlob(
this.myChart.getDataURL({ backgroundColor: "#032745" })
); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = "关系图表.png";
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
/**
* @description: base64转blob
* @param {*} code base64编码
* @return {*} blob格式
*/
base64ToBlob(code) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},
/**
* @description: 数组按时间排序的方法
* @param {*} list 数组数据
* @return {*} 最新时间在前的排序后的数据
*/
timeSortData(list) {
let arr = list;
arr.sort(function (a, b) {
return b.time > a.time ? 1 : -1;
});
return arr;
},
/**
* @description: 判断对应的节点个数设置缩放比例
* @param {*} data 节点数据是个数组
* @return {*}
*/
viewZoom(data) {
// zoom
if (data.length >= 0 && data.length <= 10) {
this.zoom = 0.7;
} else if (data.length >= 11 && data.length <= 19) {
this.zoom = 0.6;
} else if (data.length >= 20 && data.length <= 30) {
this.zoom = 0.5;
} else if (data.length >= 31 && data.length <= 45) {
this.zoom = 0.4;
} else if (data.length >= 46 && data.length <= 60) {
this.zoom = 0.3;
} else if (data.length >= 61) {
this.zoom = 0.2;
}
},
/**
* @description: 修改series中data数据为初始化数据
* @param {*} val 数组格式的数据里面包含人物节点
* @return {*}
*/
disposeData(val) {
this.seriesLink = [];
this.seriesData = val.map((i) => {
if (i.link) {
this.disposelinks(i.link, i.name);
}
return {
name: i.name,
value: i.id,
label: {
position: i.type ? "top" : null,
},
type: i.type,
symbol: "image://" + this.selectIcon(i.type, i?.children),
symbolSize: 80,
};
});
},
/**
* @description: 修改series中data的数据变为点击任务后的节点数据
* @param {*} val 对象格式 点击的人物的信息
* @return {*}
*/
disposeChilrenData(data) {
let arr = [];
let obj = this.dataAll.find((i) => i.id == this.currentValue);
arr.push({
name: obj.name,
value: obj.id,
label: {
position: obj.type ? "top" : null,
},
type: obj.type,
symbol:
"image://" +
this.selectIcon(obj.type, obj.id == this.currentValue ? false : true),
});
let childrenArr = data.map((i) => {
return {
name: i.name,
value: i.id,
label: {
position: i.type ? "top" : null,
},
type: i.type,
symbol: "image://" + this.selectIcon(i.type, i?.children),
};
});
this.seriesData = arr.concat(childrenArr);
this.seriesLink = [];
this.disposelinks(data, obj.name);
},
/**
* @description: 模拟接口返回数据
* @param {*} val 传手机号
* @return {*} 返回一个promise对象
*/
ajaxData(val) {
return new Promise((resolve, reject) => {
if (val == "11111111") {
resolve({
code: 200,
data: [
{
precision: 25.28198,
latitude: 24.887575,
address: "西安",
time: "2020-06-07",
},
{
precision: 27.28198,
latitude: 22.887575,
address: "北京",
time: "2020-06-08",
},
{
precision: 27.28198,
latitude: 27.887575,
address: "太原",
time: "2020-06-06",
},
],
});
} else {
reject("error");
}
});
},
/**
* @description: 给图表上事件前的准备工作
* @param {*}
* @return {*}
*/
initEvent() {
//关闭click事件
this.myChart.off("click");
//关闭click事件
this.myChart.off("contextmenu");
//取消浏览器默认行为
this.$refs.graphEcharts.oncontextmenu = function () {
return false;
};
},
/**
* @description: 变化分页方法
* @param {*} 变化后的页数的值
* @return {*}
*/
currentChange(val) {
this.page = val;
},
/**
* @description: 节点图片过滤
* @param {*} val 数据的type值
* @return {*} 返回对应的图片
*/
selectIcon(val, boo) {
let str = "";
if (!boo) str = "ash";
switch (val) {
case "person":
return require(`@/assets/img/graphEcharts/${str}person.png`);
case "zjhm":
return require(`@/assets/img/graphEcharts/${str}person.png`);
case "asjbh":
return require(`@/assets/img/graphEcharts/${str}person.png`);
case "car":
return require(`@/assets/img/graphEcharts/${str}car.png`);
case "phone":
return require(`@/assets/img/graphEcharts/${str}phone.png`);
case "qq":
return require(`@/assets/img/graphEcharts/${str}qq.png`);
case "wechat":
return require(`@/assets/img/graphEcharts/${str}wechat.png`);
case "imei":
return require(`@/assets/img/graphEcharts/${str}imei.png`);
case "lawcase":
return require(`@/assets/img/graphEcharts/${str}lawcase.png`);
}
},
/**
* @description: 获取全部节点数据
* @param {*} val 数组类型数据
* @return {*}
*/
getDataAll(val) {
//凡是出现过的节点进行判断如果与dataAll的数据重复则不要进行push
if (val.length <= 0) return;
val.forEach((i) => {
let obj = this.dataAll.find((node) => node.id == i.id);
if (!obj) this.dataAll.push(i);
});
},
/**
* @description: 修改series中link的值
* @param {*} val 数据中chilren数据数组格式
* @param {*} source 源目标name值
* @return {*}
*/
disposelinks(val, source) {
val?.forEach((i) => {
this.seriesLink.push({
source,
target: i.name,
value: i.value || "",
});
});
},
/**
* @description: 返回按钮点击事件
* @param {*}
* @return {*}
*/
goBack() {
this.clickNodeValue = "";
this.activeValue = "";
this.currentValue = "";
this.disposeData(this.data);
this.viewZoom(this.data);
this.myChart.setOption(this.getOption());
this.splitScreen = false;
this.chartsResize();
},
/**
* @description: 监听窗口响应式
* @param {*}
* @return {*}
*/
windowResize() {
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
/**
* @description: echarts的resize方法
* @param {*}
* @return {*}
*/
chartsResize() {
setTimeout(() => {
this.myChart.resize();
}, 0);
},
/**
* @description: 点击节点时候触发的时间
* @param {*} data 点击后节点的子节点集
* @return {*}
*/
nodeClick(data) {
let _this = this;
this.getDataAll(data);
//当前点开节点的value值
this.currentValue = this.clickNodeValue;
//刚开始不分屏
this.splitScreen = false;
this.chartsResize();
//动态设置series的data和link
this.disposeChilrenData(data);
//初始化缩放
this.viewZoom(data);
this.myChart.setOption(_this.getOption());
},
/**
* @description: 右击鼠标右键触发事件
* @param {*} params 节点对应信息
* @return {*}
*/
nodeRightClick(params) {
//对应的id匹配有值的话分屏
this.ajaxData(params.data.name)
.then((i) => {
if (i.code == 200) {
this.$set(this.styleForm, "tableData", this.timeSortData(i.data));
}
this.splitScreen = true;
this.chartsResize();
})
.catch(() => {
//没有的话提示
this.$message.closeAll();
this.$message({
message: "该节点没有详细数据",
type: "warning",
showClose: true,
duration: 2000,
});
});
},
/**
* @description: 左键单击节点的事件
* @param {*} params 点击对应的节点
* @return {*}
*/
nodeLeftClick(params) {
//储存当前点击的节点
this.clickNodeValue = params?.value;
this.loading = true;
let str;
let obj;
if (params.name.indexOf("A") == -1) {
str = this.childrenXhrStr;
obj = {
zjhm: params.name,
};
} else {
str = '/api/ksh/getAjRwGxXx';
obj = {
asjbh: params.name,
};
}
this.callApi(str, obj)
.then((res) => {
this.loading = false;
//如果点击的节点正是当前展开的节点
if (
this.currentValue == params?.value ||
!res.rows ||
res.rows.length <= 0
) {
this.$message.closeAll();
this.$message({
message: "该节点没有对应的子节点",
type: "warning",
showClose: true,
duration: 2000,
});
return;
} else {
this.nodeClick(res.rows);
}
})
.catch(() => {
this.loading = false;
});
//更换的接口
// const a = require("@/static/getChildrenData");
// var d = a.chartsChildrenData;
// if (this.clickNodeValue !== 22223) {
// d = [];
// }
},
callApi(url, params) {
return get(url, params);
},
},
watch: {
data: {
/**
* @description: 监听传入的data数据
* @param {*} val 传入的data数据
* @return {*}
*/
handler(val) {
this.$nextTick(() => {
this.loading = false;
if (!val || val.length <= 0) return;
var _this = this;
var chartDom = this.$refs.hello;
this.myChart = this.$echarts.init(chartDom);
//获取所有数据
this.getDataAll(val);
//初适化配置
_this.disposeData(val);
//初始化缩放
this.viewZoom(val);
//设置响应式布局
this.windowResize();
//设置事件前的准备工作
this.initEvent();
//设置点击事件
this.myChart.on("click", { dataType: "node" }, (params) => {
this.nodeLeftClick(params);
});
//设置右键点击事件
this.myChart.on("contextmenu", { dataType: "node" }, (params) => {
this.nodeRightClick(params);
});
//建立echarts
this.myChart.setOption(_this.getOption());
});
},
immediate: true,
deep: true,
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@mixin scrollBarStyle() {
&::-webkit-scrollbar {
width: 7px;
height: 7px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #fff;
background: rgba(3, 69, 108, 0.5);
}
}
#hello {
height: 100%;
}
#graphEcharts {
background: url("~@/assets/img/graphEcharts/back.png") 0 0 / cover no-repeat;
}
.leftText {
z-index: 1999;
position: absolute;
top: 40px;
left: 50px;
background: url("~@/assets/img/graphEcharts/bottom_line.png") 0 bottom
no-repeat;
display: flex;
height: 100px;
align-items: center;
justify-content: flex-start;
> span {
font-size: 30px;
font-family: LiHeiPro;
color: #ffffff;
margin-left: 15px;
}
}
.rightButton {
position: absolute;
z-index: 1999;
top: 70px;
right: 50px;
}
.getback {
border: 1px solid #0268ff;
width: 72px;
height: 32px;
border-radius: 4px;
color: #0268ff;
background-color: transparent;
}
.down {
width: 112px;
height: 32px;
background: #0268ff;
border-radius: 4px;
border: 1px solid #0268ff;
}
#graphEcharts {
height: 100%;
display: flex;
justify-content: flex-start;
}
#chartsBox {
position: relative;
// background: url("~@/assets/img/graphEcharts/back.png") -50% 0 no-repeat;
}
.w50 {
width: 50%;
}
.w100 {
width: 100%;
}
* {
padding: 0;
margin: 0;
}
#infor {
background: url("~@/assets/img/graphEcharts/shadow.png") 0 0 / cover;
.table-content {
@include scrollBarStyle;
}
.table-content /deep/ {
// height: calc(100% - 265px);
padding: 0 20px;
margin-bottom: 30px;
overflow: auto;
// table 头部部分的内容
.table-header {
width: 100%;
background-color: #03456c;
display: flex;
justify-content: space-between;
.table-header-write {
width: 15%;
display: flex;
justify-content: space-around;
align-items: center;
.result {
font-size: 14px;
color: #cfe2e6;
}
.total {
color: #02c7dd;
}
}
.table-header-select {
width: 17%;
// 覆盖 input 内部样式
.el-input--suffix .el-input__inner {
padding-right: 30px;
background-color: transparent;
border: 1px solid #02c7dd;
color: #fff;
}
}
}
// 将 table 透明化
.el-table {
background-color: transparent;
color: #cfe2e6;
/* 表格内背景颜色 */
th,
tr,
td {
background-color: transparent;
border-bottom: 1px dashed #0f94c38c;
}
.cell {
font-size: 17px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 17px;
}
&::before {
background-color: #0f94c38c;
}
//头部样式
thead {
background: #03456c;
border: 1px solid #064672;
opacity: 1;
border-radius: 4px 4px 0px 0px;
font-size: 13px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 17px;
color: #b0c1ca;
}
//列覆盖原有的高度
td {
padding: 9px 0;
}
tr {
height: 62px;
}
}
}
.table-pagination /deep/ {
height: 35px;
text-align: center;
// 将分页背景透明化
.el-pager,
.el-pager li {
color: #01afc8;
}
.el-pagination__total {
color: #b0c1ca;
font-size: 16px;
}
.el-pagination button:disabled {
background-color: #03456c;
color: #01afc8;
}
.el-pagination .btn-prev {
background-color: #03456c;
color: #01afc8;
}
.el-pagination .btn-next {
background-color: #03456c;
color: #01afc8;
}
.el-pager li {
background-color: #03456c;
margin: 0 2px 0 2px;
}
.el-pager li.active {
background-color: #02c7dd;
color: #06365a;
}
}
}
</style>
src/components/ksh/RelationalGraph.vue 0 → 100644
<template>
<div
v-loading="g_loading"
style="width: 100%; height: calc(100% - 1px); position: relative"
>
<SeeksRelationGraph
class="seeksRelationGraph"
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="nodeClickBoo ? nodeClick : () => {}"
>
<div
slot="node"
slot-scope="{ node }"
@contextmenu.prevent="contextmenu(node)"
:class="{
w100h100: true,
gen: negativeHeightLine(node),
highlight: judgeHeightLine(node) || node.data.red,
yellow: yellowActiveHeightLine(node),
}"
>
<div
class="w100h100 backImg"
:style="{
background: 'url(' + node.data.nodePhoto + ') 0 0 / cover',
}"
></div>
<div class="fontBox">
<p
v-if="node.data.name"
:class="{
serialNumber: true,
redColor: node.data.isXsAj
? node.data.isXsAj == '1'
: judgeHeightLine(node),
}"
>
{{ node.data.name }}
</p>
<p
v-if="node.data.describe"
:class="{
name: true,
redColor: node.data.isXsAj
? node.data.isXsAj == '1'
: judgeHeightLine(node),
}"
>
{{ node.data.describe }}
</p>
<p
v-if="node.data.ajlbdmStr"
:class="{
ajlbdmStr: true,
redColor: node.data.isXsAj
? node.data.isXsAj == '1'
: judgeHeightLine(node),
}"
>
{{ node.data.ajlbdmStr }}
</p>
</div>
</div>
</SeeksRelationGraph>
<el-button
class="show"
type="primary"
v-if="type == 'screenArgx' || type == 'screenRagx'"
@click="openGraph"
>查看树状图</el-button
>
<div class="leftToolbar" ref="leftToolbar" v-if="toolbarBoo">
<el-button
class="toolBarItem"
@click.native="gainImg"
title="获取照片"
:loading="photoLoading"
>
<i class="el-icon-picture-outline-round"></i>
<p>获取</p>
</el-button>
</div>
</div>
</template>
<script>
import { get } from "@/utils/http.js";
import utils from "@/utils/util.js";
import SeeksRelationGraph from "relation-graph";
// import SeeksRelationGraph from "@/utils/gxt.js";
export default {
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
props: {
//初始化根节点，没有不填
nodedata: {
type: Object,
default: () => null,
},
//初始化接口参数
params: {
type: Object,
default: () => {},
},
//调用查询接口地址必填初始化的接口
childrenXhrStr: {
type: String,
default: () => null,
},
//全国人员照片接口没有的话就按type设置
photoXhrObject: {
type: Object,
default: () => null,
},
//此接口是否是一层层展开的接口
nodeClickBoo: {
type: Boolean,
default: () => true,
},
//展开时候的接口
unfoldXhrStr: {
type: String,
default: () => null,
},
//展开时候的参数格式（nodeClickBoo为true时必传）
unfoldParams: {
type: Object,
default: () => null,
},
//高亮的案件代码集合
highLightArr: {
type: Array,
default: () => null,
},
//场景类型
type: String,
},
data() {
return {
g_loading: true,
demoname: "---",
activeTabName: "case1",
distanceCoefficient: 1,
graphOptions: {
defaultNodeBorderWidth: 0,
defaultNodeColor: "rgba(238, 178, 94, 1)",
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultLineShape: 1,
layouts: [
// {
// label: "上口树",
// layoutName: "tree",
// layoutClassName: "seeks-layout-center",
// from: "bottom",
// defaultNodeWidth: "74",
// defaultNodeHeight: "74",
// defaultJunctionPoint: "tb",
// defaultNodeShape: 1,
// defaultLineShape: 1,
// defaultNodeBorderWidth: 0,
// min_per_width: 80,
// min_per_height: 110,
// },
// {
// label: "中心图",
// layoutName: "center",
// layoutClassName: "seeks-layout-center",
// distance_coefficient: "0.8",
// },
// {
// label: "下口树",
// layoutName: "tree",
// layoutClassName: "seeks-layout-center",
// from: "top",
// defaultNodeWidth: "74",
// defaultNodeHeight: "74",
// defaultJunctionPoint: "tb",
// defaultNodeShape: 1,
// defaultLineShape: 1,
// defaultNodeBorderWidth: 0,
// min_per_width: 80,
// min_per_height: 110,
// },
// {
// label: "横向树",
// layoutName: "tree",
// layoutClassName: "seeks-layout-center",
// from: "left",
// defaultJunctionPoint: "lr",
// defaultNodeWidth: "74",
// defaultNodeHeight: "74",
// defaultNodeShape: 1,
// defaultLineShape: 1,
// defaultNodeBorderWidth: 0,
// min_per_width: 400,
// max_per_width: 400,
// min_per_height: 80,
// },
///////////////////////////////////////
{
label: "自动布局",
layoutName: "force",
layoutClassName: "seeks-layout-force",
},
],
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置
},
activeIdArr: [],
nodeArr: [],
linkArr: [],
linkAll: [],
genData: [],
toolbarBoo: false,
photoLoading: false,
newUnfoldParams: this.unfoldParams,
str: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwQDAwQEBAQFBQQFBwsHBwYGBw4KCggLEA4RERAOEA8SFBoWEhMYEw8QFh8XGBsbHR0dERYgIh8cIhocHRz/2wBDAQUFBQcGBw0HBw0cEhASHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBz/wAARCAC5AJYDASIAAhEBAxEB/8QAHQAAAQQDAQEAAAAAAAAAAAAAAAUGBwgCAwQJAf/EAEAQAAEDAwIEAwUEBwYHAAAAAAECAwQABREGIQcSMUETUWEIFDJxgSKRobEVIzNCwdHwFjRDUoKiFzVicnODkv/EABoBAQADAQEBAAAAAAAAAAAAAAABBAUCAwb/xAAjEQACAgIDAAIDAQEAAAAAAAAAAQIRAyEEEjETQSIyUXEF/9oADAMBAAIRAxEAPwC/1FFFAFFFFAFFFFAFFR9xA416L4aKDN+u6UTSARDjpLr2D3KR8I+eKrhrT25XPe3GNIWJr3dJ2k3TJUr/ANaFbf8A0flQF0KK83bv7YfEu4KUlFziRG1ApKIsVCfrzKyoH5HtXywe17r+3XBh6Vc0zGW9lMPtpUhY8jjB+uc+tAekdFVl4Ye1zD1lfYVnvFrYgOSioCS0+fDThPNuFAYyAe5qc0cRdKuTkQm77DckuLLSEtr5gtY6pChsSO4B2oLHPRXxK0rSlSVBSVDIIOQRX2gCiiigCiiigCiiigCiiigCiikrUuoYGlLHOvFyeDUOG2XFq7nyA9ScAfOgMdRaps2kra7cb3cY8GG0MqceVj7h1P0qk/Gf2wrreJrlr0G85brY3lKrgpOHnj0yn/Kny6H5VDfF/iteOJWpJE2bJUWMlLDAACWm87Aen5mozWokb45fxNRYo7Lve5l3muzJ81+XMePMt15RWtZPck70kKUQTjO9ZLVg5OeY/hWjOVbqOKkATy9gfSviVHOTj6V9Vv0V1rDON+gFAd0eW6xjlWUZ8jSpZ9SXKy3eLcbdKcjzo6wtp9CsFChvkU3ArOCa28/2AOnegLo8LfbFVY2jE1m7OvCFDKJMZKOdGTnCgrlz1x8XbpVttD8QdPcRLQLnp+eiUwNnEfC4yfJaeo/I9q8emnyMYJGTmpQ4Q8Wrtww1PFucCQsRFqSmZGBHK+1zAkYPfHQ9qWD1copA0brKza8sEa92KWmTBf2zjCkKHVKh2I8qX6AKKKKAKKKKAKKKKAKpX7ZHFWULszoeJ+rix0okSnEr3cUoZCSAegBzvv8ATrdSvKjjzfHtR8XdUyHHOZKJzjKCBgBKDyj8BUMIj5wl1SuUHc4JJrndTgAAAYpTajlKAnHU10NWZ2S+2hCM8xz061FnfWxvLbOw89ya+CMtxOUpJT0GKfY0i4+WY7KSp59YbBA+8/nTxf0G3HRGhNNYXyjnI3IJrh5Uj2jx5MhX3B3lCykkZwK0vR1JTuME1LUrSixKkNcv6qOSAMd+VPT6Y++kGVplXKtwp2SkHPmTg/kaLKg+O0R+GCEdDgdazLKlI2HXankrTa2mlcyclwlKfXbelHTelDOtrjnhZ5VYJI6bfzqXkS2crBJuiOAjlx1261vZJ+HO43BpzXjS7sKQ6nkICTjOKb78VyMpokbGulJM85QcfSyHsmcXX9Fa0a09PcWqz3taWAlS8IZeKgEufwPzHlXonXjbBlPWyfFlMOFt5laXEKHVCgQQfoa9dtGXZd90lY7m64h16ZCZecWgYSpSkAqIHbfO1SjhoXKKKKkBRRRQBRRRQBXlBxZtUu28T9VNTW1IkC4vLIUMZysqBx6gg/WvV+vP72utP/o7iu7MHKUXKK0+EgAcpA5D08yjP1qGSiCLZCVPlMMg9wMD1qXLVo4Mqfk8uSAG2xj0zn8aYOk4xVcmuUEqKvuqytvio91ZQsdACT3JqpyMnXSNDiY1J2xt2zSiYc+AsoCwgHf/AKsYz+NPCBpb3ouSA0Ocbg4/r+jSxECFhKQ2CrGM+VLMTLDRAScZ6VUUr9NJQoi2ZoR9lh5boKnH1KcVt0yc4+7b6U33NEuLi+GpHKVjmzy7YwKn0vB1A5k/IYrnfjNKbI8JJ2x0rruyPjX2Q2vhwXmm1lDaFJcUQMDA6/y/Ctun9Hi3MOR1ISM/aIA23JNSoiI4RjHrjHSuR+EWVFRSMYxUSm2jpY4rZEerdGMvoWsN4Vyk9O/9CoW1lp1MVqOpKQFY6eVWluC0lRSrBQdjUYcQNMO3JovRUpVgYKf4iu+PladMrcrCpRtFcgyvxkJcO2euK9cuHjCIugtMstpSlCLbHACen7NPqa8o5FvWielopIVzhJB2wa9adJxFwNLWSK4SXGITLasnJyEAHfvWkjFkhYoooqSAooooAooooAqp3tqWp5cbTFySlAjoLrC1ZGSo8pAx1xgGrY1X/wBp9/TuodAzrcq6RlXm3OIkMxUODnUrPKpPfcJUTjY7VDJSb8Kz8LNNtTGv0m6kKSk4Qn186kafqBq3vKaA5loySB0HzpB4QoA0m2NshxW9OadZY75Up0pS2rJUen41nzqU32NjCmsa6m206/tUYJVMdLaR+8U7CntbNa6fuOPAmJVnbBGKi1/RWjX+VUlaypJ/xX+VI+hOfwpYt+j7JHCTbHw0QNjkKB+orpyxpaR3GOVvbJTZMWSeZlaVJ67HpWfhoSd9xjrTL0869CmeA4rbOCexp4SgW47iyrASM9K8/wAX4etyXojX3WFs08yVuIcedT0baG5PzqKr3xr94k+EzY5ZaV+9yZPy2605pUeNJkOuS3E+Ek5VmkWbxO0zplfhNxCtQ5sllhThHKMnJTsMAgnfpXrjlF6UbPLJB/s5UIDNzul4V7w2w62g/urBQfxpcti3ZLC25Taw4nuoYyK3McRLZdZPuxZDLp38JxJbWB54PUfI0svNpwlbeOXzHlXM6f1RMItK07K9Xy2D/iaxDSkcr0pnAwe6h5b9+1eoCEhCEpHRIwK872kQo3HK1Tbky+9Ei8kossJyt1SBlKR23UADnGxO4qzdu9oZz9PW+Hd7Q3EiTngyFtulamc9Co4AP3CrUMkVFJszZ8fJklJwWkTvRRRXsVAooooAooooDTLcUzFecQkqWhClJSO5A6VShqxydQWqc9NcMlx5S31KcPMoZUe/pV3CAQQdxVQLlKFlmTbcycc8t9pGQMBKXCAKrcj6NX/mU+8Rs8Loqo1jmNL6NynE/QGnXerS/cofLGlFjIOeUb0laJZXHtL6F7u+9O8x8zzfyp9QI5dTynqaqT/ay3hilGiGJ3B9ydaHClwu3PxUutynzzgY/dKTkY/rFKGl+H8vT9gbYTKWm9BxP65tXK0lCQEhPKBhRwNyQCSetTvGtjbTWeVOflXxVtawtxYyBvgV7d7jTOVjxqXatkerS9E91dcUBJxhwJJKSfMZp0XC8pkWpPIQVLTgnypGmoMx910gBIPKkdq6129abcMgJQE5Axmqm7dFyKi/Rtu2hF3timw94ZK8uEAkqG+35UhXPhPbdT3lmfJWI5SgNqQynkSoAY3A9PKnvb0iFKbUAPDc2NPVuBHbwtKcHrgV7YpUjxyKL01ZHMvRER+U1JdHvDrQCUuFPLygDGAO1dEiK3Cj+GhOE+XlUkCChbRKwAd+g7U0r/DbbSvlVkCk97Ii09EVSLcgcQLdIKghUiMpCVkgAFKhnr6KNOKfaRcr7Bt8dIVIkTY3gDbGebf6bdaR9VJbYfhyXNjFQtYPzwKfHB1hd511p16QkkxWHn8HtkEJJ++vSKtpCL+PHOf+lqRX2iir584FFFFAFFFFAFVT4r6TWxq+bDSS2ZLhmxXO32t1A/UEVaymprjRjOrISOUpbuEbJYdPTfqk+hx9K8ssO8dFvh5/hyW/GVe0wuQ2qbFmRlR3+bnAPRWwGQfLYU/rMpIQDkc3cGky86Lv1lkCbOty2o6FFtb/AIiFJJPTABJxt1NcsJ9TauXJGeoNUZJr01VOLk+jtD/Q8l0YzuK+yU4irGeox1pIhv8APgZwojpW66OKciqS2ftFOKhM6r+DWYUp94NbHl2Kk7AnvinHJjOqhcnh52Heosu1/wBUWybHRa7VGkRWxh5LrhQs79Unp6708GOIYfihpKV+9KTy+GR07YqOp67T0jJlxtl5tMhtXhc2Cry9aezWfCGDlPUb1D0RWpJNxcM+RHEd3ITGbRs2OxK+pP3VKVue5WGwV7hASRnbI71NUcyWrFNyYhpvrjamre5LTnwkEqrvuMjZQBG1NSYo853FSnZ5v8djcn2E324uyHngYbACBHA+NQ3yfTept4EaadjsXHUEpHK5MIYYGMYbSd8emQB/pNJemuEEu6xoM6ROZahSkh4hsK8XlVvy+XTv+FTlChsW+IzFjNhthlIQhA6ACrWHG0+zKPK5UXj+OD/030UUVZMwKKKKAKKKKAKKKKAb2uoap2kLuyjPMGC4MdSUYVj/AG1WttzmIUdiKthJYTKjusL3Q6koV8iMVUq6RnrVcJkF0YdiuqbOds4OM1T5S8ZocGXsRwxZ3hoB8u9ZSbkpQCEglShTYYn78qiADWu4KuLsfNuUhMhH2SVjIx5+tUfvZqRf8HRFbDqyXAFY33G9dnhQ2HULTHSVKGy0o/DNQxNXqeRJIkXFpAbVgBDBx92a7FMX9KUpbmwynGFK5lp/24/jViMXXp7RxOW2SNImRVPLRzt8wJyAsE1thzSw4kBznbVsKiObY57jiSbk4o9wygBPzyadulbHOt76HXJ78loDKg6QQnHltXM4pbZGSDj4PGXKKlr5sYpDlu4KiMHtWE6dlxQBzvW/TFtc1FqO225IJS86PEx2QN1H7gaiCt0U8kltlo7DHMWx2xgpCS1GbQQOxCRSjXwAAAAYA7V9rVRhBRRRQBRRRQBRRRQBRRRQGK1paQpa1BKEglSlHAA8zVUOJ2uNH37Vz7+mLyzcpDKQm4pjJKm21DZKgvHKrIGDgnHL60wfbL47TZV1d0Hp+c4zbon2bm4yrBkOn/CJH7qR1Hckg9KhD2e5WNVz2FbpdiEkHuQtP868c6uDPfjNrKiwvvLEwZbXg/nSrbnnUpwncjY03bpp56KoyrfkJO6mh0+n8q5bdqdUJ4NyklChseYYrLq/DaUqeyQV2JN4SlSgpLw6LRsa+OcPn3ACq6yB6bD+FZ2bU8RYBDqc46ZpdXqFgt8yXk57nPSu4Wjv5H9MbqtAhlokyX1kjHMpW+KFFUGL4CVbAYzmu2drKK22UF5KlY33pjXTVCZbxaiJLjh2wKl2yJZKVG6TKbYO5ytXQDrVjuE+gV6agm6XEJVdZiBhI3DDZ35c+Z2J+6q2xYZjMmRJIW6rqfIeQq3eiNXWbXOmLfe7BJTItklH2D+8gjYoUOygdiKs8aKtv+GZzJySS/o4aKKKumeFFFFAFFFFAFFFN3VevdMaGjIkajvsC1trBKBJeCVuY68qfiV9AaAcVRhx14tReEui3p4La7zM5mbfHUficxusj/KnOT9B3qHuIvtxabtDb8TRluevM37SUzJILMZB7KCfjWPQhHzqm+tOJGpOJF2N21LcnJssp5GwQEIaRn4UIGAkfn1OTvU0Br6jlv3F56ZIcU9IecLjjijkqUTkk+pJp+cBIbiNSuzFHCfBLYHnkg/wpiLQHUKSe9SVwTdS3dXmScKwCBXjn/Vo9+Ml8ibLSRUBxoZAOR3pIulgjSiQ40lST6binDa0Asp5q+3COU4WnpWdRtekeucP2lq54kx6Mo+SiRW48Lr2oJP6XCmld8Hp99PuMyl5noM+nWlBMt5mEY4TlXQEjpUqTXo6IjFOg40NR94lPSFjqM8qc/SlCFa2I6wG2wlI8hTllRS23lQyo9zXKzEIT4h6eWKOzml9CNfF+72yUs4AS2o/LY1HXsccYP7FatXpy6y/DsN7ISC4rCGJPRC89gofZP8ApPantr2R7tp+4LJwAys/gap3actYWDjfarfFXpn857SPaYb0VUfg77YNhbsFqsmtzKiXCOhLH6TCPFadA2Cl4+0lWMZ2IOCds4q0li1LZtUQkTbLdYVxiK6OxXkuJ+Rwdj6GrRQFSiiigCiiigKD8Qvbd1NdnpMXR8GPZ4PPhqXIQHpKk464OUJz1xg4x1qsV7vly1FcHbhd58mfOeOVvyXS4tR+ZrhzWCjXZBis7V9ZOEDzrBZ2NDBygjyNAdaT0pz6EuCrRqOPJB/VqOFU1Umu+BK92eQv93O+1cTjao9McusrLx2GaiXDbdbUFJWkEYPWlWRhTPKe1Q7w31WgwmWFrykAcp8xUstvJeZBTgpVvvWe40beOXZHTbkJzvilpUNCzzBPSm/G5UqGFEE9qUw+4E4C/vp1PRoTrqgcwQK+BoIax5is1slx3nUcgb5NanXAokdAK5o83oh7jdcxbdKTGwr9Y/8Aq0/XrVYoqA3GSD1qYOPV/RcLo3BaVlqOe3c1EmOVobVdwRqJl8qdzo0vLPIR5dK67PqG56flIl2u4S4EpG6Xorym1D6pINcLpyFfKtSTtVgqFhdF+2FxG0z4TU+dHvkRGxRcGh4mPRxOFZ9VZqx2ifbT0Tfg01f4syxSVbFah7wwP9SRzfemvO4DPasunTaook9kLDqazaphJm2W6Q7jFUP2kV5LgHocHY+h3orx5iXSbb1KVFlvMFQwS2spyPpRUUDnzWKhWR+Kvg610QaXEnlrGKd1iti+grTG/bK+VQSdadq2hQQCVEBI7mtflXLcv7tUgeeitaJtlwSwp3EdRxznbkPn8qtJo/UTNwjIw6lQUNlA5BqjMXrViuBn9wf/AO8VWyxVdi7xMr7dSxRKkLBBBT6V1CTlIHWk5r4E1tRVdGsjseWEtE5xtTF1jqpixWmS8p0JISSVeVPKb+x+lQFxp/5O7/5UfmaQVsr5ZdVZCN6uj16uLsl3I51fZST0FcazkbUH4kUH4T86vxMWTbds5VfCr5VobJUkV0L+Ff1rS18AqTk2pGBX01971j51IQfOisqKgH//2Q==",
};
},
created() {},
async mounted() {
this.setGraphData();
},
methods: {
/**
* @description: 请求接口的方法
* @param {*} url 请求接口的url
* @param {*} params 请求接口的参数
* @return {*}
*/
callApi(url, params) {
return get(url, params);
},
openGraph() {
this.$router.pushToTab({
path: "/sample",
query: {
id: this.nodedata.rootId,
},
});
},
//默认配置
layoutsProps(seeksRGGraph) {
let _this = this;
this.$nextTick(() => {
if (_this.nodeClickBoo == true) {
let center = _this.graphOptions.layouts[1];
_this.graphOptions.layouts.splice(1, 1);
_this.graphOptions.layouts.unshift(center);
}
seeksRGGraph.setOptions(_this.graphOptions, () => {});
});
},
/**
* @description: 鼠标右键点击事件
* @param {*} node 节点名称
* @return {*}
*/
contextmenu(node) {
this.$emit("contextmenu", node);
},
/**
* @description: 初始化图谱
* @param {*}
* @return {*}
*/
async setGraphData() {
var _this = this;
let photoData; //跟节点信息对象
let rootNode = null; //创建根节点对象
let nodePhoto = null; //跟节点图片
let describe = null; //根节点姓名
let ajlbdmStr = null; // 案件类型
let ajlbdm = null; //案件类型代码
let isXsAj = null; // 是否是刑事案件
//如果存在根节点就创建
if (this.nodedata) {
if (
this.photoXhrObject &&
JSON.stringify(this.photoXhrObject) != "{}" &&
this.photoXhrObject.type.split("-").includes(this.nodedata.type)
) {
photoData = await this.callApi(
this.photoXhrObject.url,
this.photoXhrObject.params
);
let resData = photoData.data.rows || photoData.rows || photoData.data;
describe = resData?.xm || resData?.describe || resData?.ajmc;
ajlbdmStr = resData?.ajlbdmStr;
ajlbdm = resData?.ajlbdm;
isXsAj = resData?.isXsAj;
nodePhoto = resData?.edzzplj || resData?.img;
}
//如果没有调用接口或者不存在
if (!nodePhoto) {
nodePhoto = this.selectIcon(this.nodedata.type, false);
} else {
nodePhoto = "data:image/jpg;base64," + nodePhoto;
}
this.activeIdArr = [this.nodedata.name];
//创建根节点
rootNode = {
id: this.nodedata.name,
text: this.nodedata.name,
opacity: this.type == "hnthfx" ? 0 : 1,
data: this.setNodeData(
{
str: true,
parentId: this.nodedata.id,
describe: this.filterDescribe(describe),
nodePhoto: nodePhoto,
ajlbdmStr: this.filterDescribe(ajlbdmStr),
ajlbdm: this.filterDescribe(ajlbdm),
isXsAj: isXsAj,
},
this.nodedata
),
};
this.nodeArr.push(rootNode);
}
//动态调用接口初始化数据
let obj = { ...this.params };
if (isXsAj) {
obj = {
...this.params,
isXsAj,
};
}
this.callApi(this.childrenXhrStr, obj)
.then((res) => {
let responseData = res.data.rows || res.rows || res.data;
//初始化子节点
if (
responseData?.length > 0 ||
JSON.stringify(res) !== "{}" ||
this.nodedata
) {
this.genData = responseData.map((i) => ({
name: i.name,
type: i.type,
}));
//处理node
this.createNode(responseData, true);
//处理link
if (this.nodedata) {
let nodes;
let nodesAll;
if (this.type == "hnthfx") {
nodes = this.nodeArr.filter(
(i) => i.data.gen == true && i.data.parentId == "1111"
);
nodesAll = this.nodeArr.filter((i) => i.data.gen == true);
}
responseData.forEach((item) => {
if (
nodes &&
nodes.length > 0 &&
nodesAll &&
this.nodeArr.length != nodesAll.length + 1 //如果全是黑色节点不处理
) {
let sonParentNodes = nodes.find((j) => j.id == item.name);
if (sonParentNodes) return;
}
let linkObj = {
from: this.nodedata.name,
isHide: this.type == "hnthfx" ? true : false,
to: item.name,
text: item.value || "",
color: "#1789DB",
fontColor: "#000",
};
if (this.linkAll.length == 0) {
this.linkArr.push(linkObj);
this.linkAll = utils.deepClone(this.linkArr);
} else if (this.linkAll.length > 0) {
let boo = true;
this.linkAll.forEach((j) => {
if (utils.deepEqual(linkObj, j)) {
boo = false;
}
});
if (boo) this.linkArr.push(linkObj);
this.linkAll = utils.deepClone(this.linkArr);
}
});
}
//如果返回的数据有children数组 则计算link
this.createLink(responseData);
var __graph_json_data = {
rootId: "a",
nodes: [
//子节点
...this.nodeArr,
],
links: [...this.linkArr],
};
this.g_loading = false;
this.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
////////////////////////////////
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1000);
// this.layoutsProps(seeksRGGraph);
if (this.type == "shce" || this.type == "cqthfx") {
setTimeout(() => {
let arr = seeksRGGraph.getNodes();
arr.forEach((i) => {
if (i.data.type == "person" && !i.data.shcePhoto) {
let url = "/shceapi/ryksh/getQgckZp";
if (this.type == "cqthfx") url = "/api/ryksh/getQgckZp";
this.callApi(url, {
zjhm: i.id,
}).then((res) => {
if (res.data.zp) {
i.data.shcePhoto = true;
i.data.nodePhoto =
"data:image/jpg;base64," + res.data.zp;
}
});
}
});
}, 500);
} else if (this.type == "hnthfx") {
this.toolbarBoo = true;
let nodes = seeksRGGraph.getNodes();
//湖南可视化染色
setTimeout(() => {
if (nodes.length > 0) {
nodes.forEach((i) => {
if (i.data.gen == true) {
i.data.nodePhoto = this.selectIcon(
i.data.type,
false
);
i.data.str = true;
} else {
i.data.str = false;
}
if (i.data.img) {
i.data.nodePhoto =
"data:image/jpg;base64," + i.data.img;
}
});
}
}, 0);
}
}
);
} else {
this.g_loading = false;
this.$message.error("没有可展示的数据");
}
})
.catch((err) => {
console.log(err);
});
},
gainImg() {
let _this = this;
_this.photoLoading = true;
this.callApi("/hnapi/hnksh/getAndSaveImg", this.params).then((res) => {
_this.photoLoading = false;
if (res.success && res.code == 200) {
this.$message.success("获取成功");
setTimeout(() => {
_this.activeIdArr = [];
_this.nodeArr = [];
_this.linkArr = [];
_this.linkAll = [];
_this.genData = [];
_this.setGraphData();
}, 200);
} else if (res.code == 207) {
this.$notify.info({
title: "提示",
message: res.message,
duration: 3000,
});
}
});
},
/**
* @description: 判断高亮
* @param {*}
* @return {*}
*/
judgeHeightLine(node) {
let boo =
node.data.type == "lawcase" &&
this.highLightArr &&
this.highLightArr.length > 0 &&
this.highLightArr.includes(node.data.ajlbdm);
return boo;
},
//黑色背景高亮
negativeHeightLine(node) {
let boo = node.data.str;
return boo;
},
//黄色背景高亮
yellowActiveHeightLine(node) {
let boo = node.data.yellow;
return boo;
},
/**
* @description: 存储节点的各个信息
* @param {*} selfObj 自己定义的对象
* @param {*} nodeObj 节点信息
* @return {*}
*/
setNodeData(selfObj, nodeObj) {
// debugger;
let obj = {
...selfObj,
};
for (let key in nodeObj) {
if (
(obj[key] == "" || !obj[key]) &&
(nodeObj[key] || nodeObj[key] == 0)
) {
obj[key] = nodeObj[key];
}
}
return obj;
},
/**
* @description: 初始化时处理node
* @param {*} data 后台数据
* @param {*} boo 是否是初始化时自动获取数据
* @return {*}
*/
createNode(data, boo, parentId) {
let _this = this;
//先给根节点上色，在管后面的节点
data.forEach((item) => {
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, true);
if (boo && !this.nodedata && !item.img)
base64 = this.selectIcon(item.type, false);
let str;
if (!_this.nodedata && boo) {
str = this.type == "hnthfx" ? false : true;
} else {
str = this.type == "hnthfx" ? true : false;
}
this.nodeArr.push({
id: item.name,
text: item.name,
data: this.setNodeData(
{
str,
parentId: parentId || this?.nodedata?.name || 0,
describe: this.filterDescribe(item.describe),
nodePhoto: base64,
},
item
),
});
}
});
data.forEach((item) => {
if (
item.children &&
Array.isArray(item.children) &&
item.children.length > 0
) {
this.createNode(item.children, null, item.name);
}
});
},
/**
* @description: 处理link
* @param {*} data 接口返回的数据
* @param {*} parentId link的from节点id
* @return {*}
*/
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 && parentId !== item.name) {
this.linkArr.push({
from: parentId,
to: item.name,
text: item.value || "",
color: "#1789DB",
fontColor: "#000",
});
}
});
},
/**
* @description: 根据type选择节点图片
* @param {*} val 节点的type值
* @param {*} type 节点是否不是根节点
* @return {*}
*/
selectIcon(val, type) {
//type为false时 黑色
let str = "";
if (!type) str = "ash";
switch (val) {
case "person":
return require(`@/assets/img/graphEcharts/${str}person.png`);
case "car":
return require(`@/assets/img/graphEcharts/${str}car.png`);
case "phone":
return require(`@/assets/img/graphEcharts/${str}phone.png`);
case "qq":
return require(`@/assets/img/graphEcharts/${str}qq.png`);
case "wechat":
return require(`@/assets/img/graphEcharts/${str}wechat.png`);
case "imei":
return require(`@/assets/img/graphEcharts/${str}imei.png`);
case "lawcase":
return require(`@/assets/img/graphEcharts/${str}lawcase.png`);
case "weibo":
return require(`@/assets/img/graphEcharts/${str}weibo.png`);
case "bankCard":
return require(`@/assets/img/graphEcharts/${str}yinhangka.png`);
case "imsi":
return require(`@/assets/img/graphEcharts/${str}imsi.png`);
case "broadband":
return require(`@/assets/img/graphEcharts/${str}kuandai.png`);
case "thread":
return require(`@/assets/img/graphEcharts/${str}thread.png`);
case "gun":
return require(`@/assets/img/graphEcharts/${str}gun.png`);
case "ammunition":
return require(`@/assets/img/graphEcharts/${str}ammunition.png`);
case "articles":
return require(`@/assets/img/graphEcharts/${str}articles.png`);
case "email":
return require(`@/assets/img/graphEcharts/${str}email.png`);
}
},
/**
* @description: 展开收缩时候的点击
* @param {*} nodeObject 节点对象
* @return {*}
*/
nodeClick(nodeObject) {
let boo = this.activeIdArr.includes(nodeObject.id);
if (!boo) {
this.unfoldNode(nodeObject);
//展开
this.activeIdArr.push(nodeObject.id);
} else {
this.shrinkNode(nodeObject);
//收缩
let index = this.activeIdArr.findIndex((i) => i == nodeObject.id);
if (index != -1) this.activeIdArr.splice(index, 1);
}
},
/**
* @description: 处理参数
* @param {*} node 节点信息
* @param {*} paramsObj 参数格式
* @return {*}
*/
getParams(node, paramsObj) {
let obj = new Object();
if (paramsObj) {
for (let key in paramsObj) {
if (node.data[paramsObj[key]]) {
obj[key] = node.data[paramsObj[key]];
} else {
obj[key] = paramsObj[key];
}
}
}
return obj;
},
/**
* @description: 展开节点时的处理
* @param {*} node 节点对象
* @return {*}
*/
unfoldNode(node) {
let str = this.unfoldXhrStr || this.childrenXhrStr;
let obj = this.getParams(node, this.unfoldParams);
//如果点击的是根节点则用初始化接口展开
if (node.id == this.nodedata.name) {
str = this.childrenXhrStr;
obj = this.params;
if (node.data.isXsAj) {
obj = {
...this.params,
isXsAj: node.data.isXsAj,
};
}
}
this.callApi(str, obj).then((res) => {
//获取所有的节点对象
let nodeAllData = this.$refs.seeksRelationGraph.getNodes();
let nodeArr = [];
let linkArr = [];
let responseData = res.data.rows || res.rows || res.data;
if (responseData.length > 0) {
//追加data
responseData.forEach((item) => {
let index = nodeAllData.findIndex((i) => {
i.id == item.name;
});
//如果节点没在图谱出现过就追加
if (index == -1) {
let base64 = "data:image/jpg;base64," + item.img;
if (!item.img) base64 = this.selectIcon(item.type, true);
nodeArr.push({
id: item.name,
text: item.name,
data: this.setNodeData(
{
parentId: node.data.name,
describe: this.filterDescribe(item.describe),
nodePhoto: base64,
},
item
),
});
}
//追加link
let linkObj = {
from: node.data.name,
to: item.name,
text: item.value || "",
color: "#1789DB",
fontColor: "#000",
};
if (this.linkAll.length == 0) {
linkArr.push(linkObj);
this.linkAll.push(linkObj);
} else if (this.linkAll.length > 0) {
let index = this.linkAll.findIndex((i) => {
return (
i.from == linkObj.from &&
i.to == linkObj.to &&
i.text == linkObj.text
);
});
if (index < 0) {
linkArr.push(linkObj);
this.linkAll.push(linkObj);
}
}
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodeArr,
links: linkArr,
},
(seeksRGGraph) => {
///////////////////////
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1000);
setTimeout(() => {
let arr = seeksRGGraph.getNodes();
arr.forEach((i) => {
if (
(this.type == "shce" || this.type == "cqthfx") &&
i.data.type == "person" &&
!i.data.shcePhoto
) {
let url = "/shceapi/ryksh/getQgckZp";
if (this.type == "cqthfx") url = "/api/ryksh/getQgckZp";
this.callApi(url, {
zjhm: i.id,
}).then((res) => {
if (res.data.zp) {
i.data.shcePhoto = true;
i.data.nodePhoto =
"data:image/jpg;base64," + res.data.zp;
}
});
}
});
}, 10);
}
);
}
});
},
/**
* @description: 收缩节点时的处理
* @param {*} node 节点对象
* @return {*}
*/
shrinkNode(node) {
node.lot.childs.forEach((i) => {
if (i.lot.childs.length > 0) {
this.shrinkNode(i);
}
let index = this.activeIdArr.findIndex((item) => item == i.id);
if (index != -1) this.activeIdArr.splice(index, 1);
this.$refs.seeksRelationGraph.removeNodeById(i.id);
this.deleLinkAll(i.id);
});
},
/**
* @description: 删除元素后，把对应的link删除
* @param {*} id
* @return {*}
*/
deleLinkAll(id) {
let lines = this.$refs.seeksRelationGraph.getLines();
let getGraphJsonData = this.$refs.seeksRelationGraph.getGraphJsonData();
this.linkAll = [];
lines.forEach((e) => {
if (e.relations.length == 1) {
this.linkAll.push({
color: "#1789DB",
fontColor: "#000",
from: e.fromNode.id,
isHide: false,
text: e.relations[0].text,
to: e.toNode.id,
});
} else if (e.relations.length > 1) {
e.relations.forEach((j, index) => {
if (index == 0) {
this.linkAll.push({
color: "#1789DB",
fontColor: "#000",
from: e.fromNode.id,
isHide: false,
text: j.text,
to: e.toNode.id,
});
} else {
this.linkAll.push({
color: "#1789DB",
fontColor: "#000",
from: e.toNode.id,
isHide: false,
text: j.text,
to: e.fromNode.id,
});
}
});
}
});
},
/**
* @description: 过滤描述
* @param {*} str 描述字符串
* @return {*}
*/
filterDescribe(str) {
if (str) {
return str;
} else {
return "";
}
},
},
};
</script>
<style lang="scss" scoped>
$marginTop: 308px;
.seeksRelationGraph {
/deep/ {
.rel-node-peel {
border-radius: 50%;
}
.w100h100 {
width: 100%;
height: 100%;
position: relative;
color: red;
}
.redColor {
color: red !important;
}
.highlight {
border: 2px solid salmon !important;
box-shadow: 0 0 30px red !important;
border-radius: 50%;
}
.gen {
border: 2px solid #6670fb;
box-shadow: 0 0 30px #6670fb;
border-radius: 50%;
}
.yellow {
border: 4px solid yellow;
box-shadow: 0 0 30px yellow;
border-radius: 50%;
z-index: 99;
}
.backImg {
border-radius: 50%;
cursor: pointer;
}
.fontBox {
min-width: 300px;
position: absolute;
left: 50%;
top: 82px;
transform: translateX(-50%);
}
.serialNumber,
.name,
.ajlbdmStr {
text-align: center;
color: #000;
height: 20px;
line-height: 20px;
}
.rel-node {
padding: 0;
background: transparent !important;
background-color: transparent !important;
border: none;
}
.rel-node-checked {
border-radius: 50%;
}
.c-mini-toolbar {
.c-mb-button[title~="点击开始自动调整布局"] {
display: none;
}
margin-top: $marginTop !important;
border-bottom: #efefef solid 1px;
box-shadow: none;
}
}
}
.leftToolbar {
cursor: pointer;
width: 42px;
background-color: #fff;
position: absolute;
right: 6px;
top: $marginTop + 372px;
z-index: 99;
border-top: none;
border: #bbbbbb solid 1px;
> .el-button {
padding: 0;
width: 100%;
height: 42px;
border: none;
border-radius: 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-around;
/deep/ {
.el-icon-loading {
position: absolute;
top: 9px;
}
}
i {
color: #999999;
font-size: 18px;
margin-top: 4px;
margin-bottom: 4px;
}
p {
font-size: 12px;
color: #000;
}
&:hover {
background-color: #2e4e8f;
i {
color: #fff;
}
p {
color: #fff !important;
}
}
}
}
.show {
position: absolute;
right: 20px;
top: 20px;
z-index: 88;
}
</style>
src/router/modules/rightContent.js
......@@ -80,4 +80,12 @@ export default [{
},
component: () => import("@/views/relationGraph/ceshi.vue")
},
{
path: "/ceshi2",
name: "ceshi2",
meta: {
title: '关系图'
},
component: () => import("@/views/relationGraph/ceshi2.vue")
},
];
\ No newline at end of file
src/views/relationGraph/ceshi2.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-06-22 17:44:35
* @LastEditTime: 2021-11-29 13:30:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\echarts\index.vue
-->
<template>
<div id="echarts">
<RelationalGraph
:childrenXhrStr="childrenXhrStr"
:photoXhrObject="photoXhrObject"
:params="params"
:nodedata="nodedata"
:nodeClickBoo="nodeClickBoo"
:unfoldXhrStr="unfoldXhrStr"
:unfoldParams="unfoldParams"
:highLightArr="highLightArr"
:type="type"
@contextmenu="contextmenu"
/>
</div>
</template>
<script>
import GraphEcharts from "@/components/ksh/MoreDataGraphEchartsCopy.vue";
import RelationalGraph from "@/components/ksh/RelationalGraph.vue";
//base64加密方法
// import base from "@/utils/base64";
export default {
components: {
GraphEcharts,
RelationalGraph,
},
created() {
this.key = this.$route.query.key;
if (localStorage.getItem(this.key)) {
sessionStorage.setItem(this.key, localStorage.getItem(this.key));
}
localStorage.removeItem(this.key);
let routeData = JSON.parse(sessionStorage.getItem(this.key));
this.childrenXhrStr = routeData?.childrenXhrStr;
this.nodeClickBoo = routeData?.nodeClickBoo;
this.nodedata = routeData?.nodedata;
this.params = routeData?.params;
this.type = routeData?.type;
this.photoXhrObject = routeData?.photoXhrObject;
this.unfoldXhrStr = routeData?.unfoldXhrStr;
this.unfoldParams = routeData?.unfoldParams;
this.highLightArr = routeData?.highLightArr;
// console.log(this.highLightArr)
this.title = this.$route.query.title;
},
data() {
return {
data: [],
childrenData: [],
params: "",
nodedata: "",
childrenXhrStr: "",
nodeClickBoo: "",
key: "",
unfoldXhrStr: "",
unfoldParams: "",
highLightArr: [],
type: "",
};
},
methods: {
contextmenu(node) {
let _this = this;
},
filterCode(val) {
switch (val) {
case "phone":
return "001";
case "car":
return "005";
case "qq":
return "002";
case "wechat":
return "003";
case "imsi":
return "006";
case "imei":
return "007";
}
},
},
mounted() {
document.title = this.title;
},
};
</script>
<style scoped lang="scss">
#echarts{
width: 100%;
height: 100vh;
}
</style>
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