Skip to content

F
founder_vue
Commit de7c8220 by liyuhang19990520
Options

cqksh

parent ddb85d5d
Showing with 987 additions and 363 deletions
dist.zip
No preview for this file type
src/components/SearchGraph.vue
<!--
* @Author: your name
* @Date: 2021-07-20 14:38:05
* @LastEditTime: 2021-08-18 17:36:33
* @LastEditTime: 2022-01-10 14:42:43
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\yppt\argxfx.vue
......@@ -278,6 +278,16 @@ export default {
};
let key = util.uuid();
localStorage.setItem(key, JSON.stringify(obj));
if (this.type == "cqcsksh") {
this.$router.pushToTab({
path: "/ceshi5",
query: {
key: key,
title: this.$route.meta.title,
},
});
return;
}
this.$router.pushToTab({
path: "/echarts",
query: {
......
src/layout/CqMain.vue
<!--
* @Author: your name
* @Date: 2021-07-20 14:08:33
* @LastEditTime: 2021-12-23 20:20:38
* @LastEditTime: 2022-01-10 14:31:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\layout\main.vue
......@@ -96,6 +96,12 @@ export default {
index: "cqThkshfx",
disabled: false,
},
{
id: "cqcsksh",
label: "重庆可视化分析",
index: "cqcsksh",
disabled: false,
},
],
},
{
......
src/router/modules/cqContent.js
/*
* @Author: your name
* @Date: 2021-07-20 14:42:16
* @LastEditTime: 2021-12-14 09:56:17
* @LastEditTime: 2022-01-10 14:32:15
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\rightContent.js
......@@ -88,6 +88,14 @@ const createArr = [
},
component: () => import("@/views/cqksh/module/cqThkshfx.vue")
},
{
path: "/cqcsksh",
name: "cqcsksh",
meta: {
title: '重庆可视化分析'
},
component: () => import("@/views/cqksh/module/cqcsksh.vue")
},
]
const carryArr = [
{
......
src/setting.js
/*
* @Author: your name
* @Date: 2021-06-20 11:48:40
* @LastEditTime: 2021-12-23 23:02:13
* @LastEditTime: 2022-01-10 18:12:45
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \control_platform\src\settings.js
......
src/utils/gxt.js
......@@ -5703,8 +5703,8 @@ if (false) {(function () {
doLayout() {
let arr = []
this.graphData.nodes.forEach(el=>{
console.log(el,'elellelelel')
console.log(el.offset_x,el.offset_x,'offsetxxxxxxxxxxxxxxxxxxxx')
// console.log(el,'elellelelel')
// console.log(el.offset_x,el.offset_x,'offsetxxxxxxxxxxxxxxxxxxxx')
})
if (this.graphSetting.layouter && this.graphData.rootNode) {
console.log('需要布局的节点数量：', this.graphData.nodes.length);
......
src/views/ceshi/ceshi5.vue
<!--
* @Author: your name
* @Date: 2021-12-13 09:55:45
* @LastEditTime: 2021-12-15 17:52:32
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\ceshi\ceshi5.vue
-->
<template>
<div>
<!-- 关系图 -->
<div ref="myPage" style="height: calc(100vh)" @click="isShowNodeMenuPanel = false">
<div
v-loading="g_loading"
style="width: 100%; height: 99vh; position: relative"
@click="isShowNodeMenuPanel = false"
>
<div style="width: 100%; height: 100%; position: relative" ref="myPage">
<SeeksRelationGraph
class="seeksRelationGraph"
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
:on-node-click="nodeClick"
>
<div
slot="node"
slot-scope="{ node }"
@contextmenu.prevent.stop="showNodeMenus(node, $event)"
@contextmenu.prevent.stop="contextmenu(node, $event)"
@mousedown="isShowNodeMenuPanel = false"
:class="{
w100h100: true,
gen: negativeHeightLine(node),
highlight: judgeHeightLine(node) || node.data.red,
yellow: yellowActiveHeightLine(node),
select: selectNodeName == node.id,
}"
>
<div
......@@ -32,27 +31,46 @@
}"
></div>
<div class="fontBox">
<p v-if="node.data.name">
<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">
<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">
<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>
</div>
<!-- 一键关联 自动挖掘-->
<div class="btnGroup">
<el-button type="primary">一键关联</el-button>
<el-button type="primary">自动挖掘</el-button>
</div>
<!-- 右键菜单 -->
<div
v-show="isShowNodeMenuPanel"
@click="isShowNodeMenuPanel = false"
:style="{
left: nodeMenuPanelPosition.x + 'px',
top: nodeMenuPanelPosition.y + 'px',
......@@ -76,337 +94,630 @@
>
对这个节点进行操作：
</div>
<div class="c-node-menu-item" @click.stop="btnClick('0')">历史照片</div>
<div class="c-node-menu-item">详情</div>
<div class="c-node-menu-item">标注</div>
<div class="c-node-menu-item">聚拢</div>
<div class="c-node-menu-item" @click="btn1()">复制账号</div>
<div class="c-node-menu-item" @click="btn2()">
{{ extrudeBoo ? "取消标注" : "标注" }}
</div>
<div class="c-node-menu-item" @click="btn3()">展开</div>
<div class="c-node-menu-item" @click="btn4(true)">收缩</div>
</div>
<div class="tableBox" v-if="tableShow" v-show="tableShow3">
<div>
<div class="header">
<span>基本信息</span>
<i class="el-icon-remove" @click="tableShow3 = !tableShow3"></i>
</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleTabsClick">
<el-tab-pane
:label="item.fuwuName"
:name="item.name"
v-for="item in tabsArr"
:key="item.name"
></el-tab-pane>
</el-tabs>
<div class="search">
<span>关键词：</span>
<el-input placeholder="请输入内容" v-model="input4">
<i
slot="suffix"
class="el-input__icon el-icon-search"
@click="searchTableData"
></i>
</el-input>
</div>
<el-table
:data="tableData"
style="width: 100%"
border
header-row-class-name="tableHeader"
:key="key"
>
<el-table-column label="序号" align="center">
<template slot-scope="scope">
<div>{{ scope.$index + 1 }}</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称" align="center">
<template slot-scope="scope">
<div>{{ selectType(scope.row.type) }}</div>
</template>
</el-table-column>
<el-table-column prop="name" label="值" align="center">
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="text"
size="small"
>{{
nodeNameArr.includes(scope.row.name) ? "取消上图" : "上图"
}}</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 节点表格 -->
<div class="nodeTable" v-if="showNodeTable">
<h3>基本信息</h3>
<div class="nodeSearch">
<el-form ref="form" :model="formData" label-width="100px">
<el-form-item label="关键词" class="demo-input-suffix zdycol3" prop="nodeSearch">
<el-input v-model="formData.nodeSearch">
<i slot="suffix" class="el-input__icon el-icon-search searchIcon"></i>
</el-input>
</el-form-item>
<el-form-item label="日期范围" class="demo-input-suffix zdycol3" prop="daterange">
<el-date-picker
v-model="formData.daterange"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</el-form>
<div class="tableBox2" v-if="tableShow2" v-show="tableShow3">
<div class="header">
<span>目的标识号：{{ leftClickObj.id }}</span>
<i class="el-icon-remove" @click="tableShow3 = !tableShow3"></i>
</div>
<el-table
ref="nodeTable"
:data="nodeTableData"
tooltip-effect="dark"
@selection-change="selectionChange"
:data="tableData2"
style="width: 100%"
@selection-change="selectNodeTableChange"
ref="mutipleTable"
:key="key2"
border
header-row-class-name="tableHeader"
>
<el-table-column prop="$index" label="序号" width="55" align="center">
</el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
label="名称"
width="150"
show-overflow-tooltip
prop="fuwuName"
label="服务名称"
align="center"
>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column
prop="status"
label="数值"
width="150"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button type="text" size="medium" v-if="scope.row.tagStr">审批</el-button>
<span v-else>
<el-button type="text" size="medium">查看</el-button>
<el-button
type="text"
size="medium"
v-if="!scope.row.upFlag"
@click="()=>{
scope.row.upFlag = !scope.row.upFlag;
shangtu(scope.row)
}"
>上图</el-button>
<el-button
type="text"
size="medium"
v-else
@click="()=>{
scope.row.upFlag = !scope.row.upFlag;
quxiao(scope.row)
}"
>取消上图</el-button>
</span>
</template>
></el-table-column>
<el-table-column prop="status" label="状态" align="center">
</el-table-column>
</el-table>
<div class="bottomBtn">
<el-button type="primary" @click="saveServe()">确认</el-button>
<el-button type="danger" @click="notServe()">取消</el-button>
</div>
</div>
<!-- 缩略图弹框 -->
<photoDialog
v-if="dialogVisible"
:photoData="photoData"
:dialogVisible="dialogVisible"
@handleSure="dialogVisible = false"
@handleClose="dialogVisible = false"
<div
class="hiddenChunk"
v-show="!tableShow3"
@click="tableShow3 = !tableShow3"
>
</photoDialog>
<i class="el-icon-circle-plus"></i>
</div>
</div>
</template>
<script>
import photoDialog from './components/photoDialog.vue'
import { get } from "@/utils/http.js";
import utils from "@/utils/util.js";
import SeeksRelationGraph from "@/utils/gxt.js";
// import SeeksRelationGraph from "@/utils/gxt.js";
export default {
name: "rCom",
components: { SeeksRelationGraph, photoDialog },
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
data() {
return {
formData:{
nodeSearch: "", //第一个表格查询条件
daterange: "", //第一个表格查询时间段条件
},
isShowCodePanel: false,
isShowNodeMenuPanel: false,
nodeMenuPanelPosition: { x: 0, y: 0 },
g_loading: false,
demoname: "---",
activeTabName: "case1",
distanceCoefficient: 1,
graphOptions: {
//关系图谱基础配置
defaultJunctionPoint: "border",
defaultNodeBorderWidth: 0,
allowShowMiniToolBar: false,
defaultNodeColor: "rgba(238, 178, 94, 1)",
// allowSwitchLineShape: true,
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultLineShape: 1,
// 这里可以参考"Graph 图谱"中的参数进行设置
layouts: [
{
label: "中心图",
layoutName: "center",
layoutClassName: "seeks-layout-center",
distance_coefficient: "0.8",
label: "自动布局",
layoutName: "force",
layoutClassName: "seeks-layout-force",
},
],
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置
},
nodedata: {
//初始化根节点信息
children: true,
id: 0,
name: "500000202101010001",
type: "person",
},
params: {
//初始化根节点信息
objectType: "person",
objectValue: "500000202101010001",
parentId: 0,
},
showNodeTable: false, //节点表格是否显示
nodeTableData: [
//节点表格数据
data: [],
childrenData: [],
params: "",
nodedata: "",
childrenXhrStr: "",
nodeClickBoo: "",
key: "",
unfoldXhrStr: "",
unfoldParams: "",
highLightArr: [],
type: "",
nodeArr: [],
linkArr: [],
key: 1,
key2: 1,
//右键点击后的节点
rightClickObj: {},
//左键点击后的节点
leftClickObj: {},
//标注的节点
extrudeArr: [],
//节点是否标注
extrudeBoo: false,
//点击节点后的table数据
tableData: [],
//点击节点后算子中心数据
tableData2: [
{
id:'1',
$index: "1",
name: "用户账号",
status: "sunfloweru",
tagStr:true,//是否需要审批
upFlag:false,//是否上图
type:"",
hasChild:false,
fuwuName: "多维串并",
status: "运行",
name: "1",
},
{
id:'e2230efca97c4fbe',
$index: "2",
name: "用户账号",
status: "sunfloweru",
tagStr:false,
upFlag:false,
type:"",
hasChild:true,
fuwuName: "现场前科",
status: "运行",
name: "2",
},
{
id:'e57f6e4bcc174efe',
$index: "3",
name: "用户账号",
status: "sunfloweru",
tagStr:false,
upFlag:false,
type:"",
hasChild:false,
fuwuName: "串并研判",
status: "运行",
name: "3",
},
{
fuwuName: "深度筛选",
status: "运行",
name: "4",
},
],
isShowNodeMenuPanel:false,//右键菜单
nodeMenuPanelPosition: { x: 0, y: 0 },//右键菜单的位置
currentNode:{},//当前点击的节点
dialogVisible:false,//图片弹框显隐
photoData:[
{
id:0,
text:"历史身份证",
url:require("@/assets/img/graphEcharts/lawcase.png"),
srcList:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']
},
{
id:1,
text:"标采",
url:require("@/assets/img/graphEcharts/lawcase.png"),
srcList:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']
},
{
id:2,
text:"刑案系统人员",
url:require("@/assets/img/graphEcharts/lawcase.png"),
srcList:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']
},
],
clinetArr:[],//存储当前元素的x,y值
cunData: [],//存储上图的节点
//表格筛选
input4: "",
//假数据综合
dataAll: {
gen: [
{
name: "15110332798",
type: "phone",
},
{
name: "晋D85728",
type: "car",
},
{
name: "1092678146",
type: "qq",
},
{
name: "founder123",
type: "wechat",
},
],
founder123: [
{
name: "140428199905209832",
type: "person",
},
{
name: "8765421",
type: "phone",
},
],
},
//假数据
dataSet: {
gen: [
{
name: "15110332798",
type: "phone",
},
{
name: "晋D85728",
type: "car",
},
{
name: "1092678146",
type: "qq",
},
{
name: "founder123",
type: "wechat",
},
],
founder123: [
{
name: "140428199905209832",
type: "person",
},
{
name: "8765421",
type: "phone",
},
],
},
//基本信息表是否显示
tableShow: false,
//算子中心表是否显示
tableShow2: false,
//两个表的显示和隐藏
tableShow3: true,
//上图数据的name集合
nodeNameArr: [],
//筛选条件为空后表格数据出现
tableAllData: [],
//算子筛选表
tableSelect: [],
//默认勾选的算子表
defaultCheck: [],
//tabs选中的内容
activeName: "",
//算子表勾选后的节点集合
tableDataList: [],
//控制tabs数组
tabsArr: [],
//左键选中的节点
selectNodeName: "",
};
},
create() {},
mounted() {
this.showSeeksGraph();
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;
},
async mounted() {
this.setGraphData();
},
methods: {
//节点点击事件
onNodeClick(nodeObject, $event) {
this.currentNode = nodeObject;
this.showNodeTable = true;
handleTabsClick(tab, event) {
let index = this.tabsArr.findIndex((i) => i.name == this.activeName);
this.tableData = this.tableDataList.slice(index, index + 1);
// this.key++;
},
//线的点击事件
onLineClick() {},
//初始化图谱
showSeeksGraph() {
var _this = this;
let photoData; //跟节点信息对象
let rootNode = null; //创建根节点对象
let nodePhoto = null; //跟节点图片
let describe = null; //根节点姓名
let ajlbdmStr = null; // 案件类型
let ajlbdm = null; //案件类型代码
let isXsAj = null; // 是否是刑事案件
var __graph_json_data = {
rootId: "2",
nodes: [
// 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
{
id: this.params.objectValue,
name: this.params.objectValue,
data: {
nodePhoto: this.selectIcon(this.params.objectType, false),
parentId: this.params.parentId,
type: this.params.objectType,
describe: describe,
ajlbdmStr: ajlbdmStr,
ajlbdm: ajlbdm,
isXsAj: isXsAj,
hasChild:true,
},
},
],
links: [],
selectionChange(arr) {
this.tableSelect = arr;
},
saveServe() {
console.log(this.tableSelect);
if (this.tableSelect.length <= 0) {
this.$message.error("请选择计算方式");
return;
}
//点击确定后裁剪假数据并且将节点选中的算子表存起来
this.tableData = [];
this.tableDataList = [];
this.tabsArr = this.tableSelect;
this.activeName = this.tabsArr[0].name;
if (this.leftClickObj.data.str) {
let index = this.tableSelect.length;
let arr = this.dataAll.gen.slice(0, index);
this.$set(this.dataSet, "gen", arr);
this.tableDataList = this.dataSet.gen;
this.tableData = this.tableDataList.slice(0, 1);
} else {
let index = this.tableSelect.length;
let newArr = this.dataAll[this.leftClickObj.id] || [];
let arr = newArr.slice(0, index);
this.$set(this.dataSet, this.leftClickObj.id, arr);
this.tableDataList = this.dataSet[this.leftClickObj.id];
this.tableData = this.tableDataList.slice(0, 1);
}
//勾选过的存起来反显
let checkIndex = this.defaultCheck.findIndex(
(i) => i.key == this.leftClickObj.id
);
let obj = {
key: this.leftClickObj.id,
value: this.tableSelect,
};
//初始化节点
this.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
}
if (checkIndex >= 0) {
this.$set(this.defaultCheck, checkIndex, obj);
} else {
this.defaultCheck.push(obj);
}
this.tableShow2 = false;
this.tableShow = true;
this.key2++;
this.tableAllData = JSON.parse(JSON.stringify(this.tableData || []));
},
notServe() {
this.tableShow2 = false;
},
searchTableData() {
if (this.input4.trim()) {
this.tableData = this.tableData.filter((i) => {
return i.name.indexOf(this.input4) >= 0;
});
} else {
this.tableData = this.tableAllData;
}
},
btn1() {
const _input = document.createElement("input");
// 设置内容
_input.value = this.rightClickObj.text;
// 添加临时实例
document.body.appendChild(_input);
// 选择实例内容
_input.select();
// 执行复制
document.execCommand("Copy");
document.body.removeChild(_input);
this.$message.success("复制成功");
},
btn2() {
let id = this.rightClickObj.id;
let boo = this.extrudeArr.includes(id);
let obj = this.$refs.seeksRelationGraph.getNodeById(id);
if (!boo) {
this.$set(obj.data, "red", true);
this.extrudeArr.push(id);
} else {
this.$set(obj.data, "red", false);
let index = this.extrudeArr.indexOf(id);
this.extrudeArr.splice(index, 1);
}
},
btn3() {
let childsArray;
let nodes = this.$refs.seeksRelationGraph.getNodes();
if (this.rightClickObj.data.str) {
childsArray = this.dataSet.gen;
} else {
childsArray = this.dataSet[this.rightClickObj.text];
}
let usableList = childsArray.filter((i) =>
this.nodeNameArr.includes(i.name)
);
usableList.forEach((i) => {
let index = nodes.findIndex((j) => j.id == i.name);
if (index < 0) {
let nodearr = [
{
id: i.name,
text: i.name,
data: this.setNodeData(
{
str: false,
parentId: this.rightClickObj.text,
nodePhoto: this.selectIcon(i.type, true),
name: i.name,
},
this.nodedata
),
},
];
let linkarr = [{ from: this.rightClickObj.text, to: i.name }];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
}
});
},
btn4(type, childs) {
let array;
if (type) {
array = this.rightClickObj.lot.childs;
} else {
array = childs;
}
if (array && array.length > 0) {
array.forEach((e) => {
this.$refs.seeksRelationGraph.removeNodeById(e.id);
let index = this.nodeNameArr.indexOf(e.id);
if (index >= 0 && !type) this.nodeNameArr.splice(index, 1);
this.btn4(false, e.lot.childs);
});
}
},
//右键点击事件
showNodeMenus(nodeObject, $event) {
console.log(nodeObject,'nodeObjectnodeObject')
this.currentNode = nodeObject;
selectType(type) {
switch (type) {
case "person":
return "身份证号";
case "car":
return "车牌号";
case "phone":
return "手机号";
case "qq":
return "qq号";
case "wechat":
return "微信号";
case "imei":
return "imei号";
case "lawcase":
return "案件编号";
case "weibo":
return "微博号";
case "bankCard":
return "银行卡号";
case "imsi":
return "imsi号";
}
},
/**
* @description: 鼠标右键点击事件
* @param {*} node 节点名称
* @return {*}
*/
contextmenu(nodeObject, $event) {
this.rightClickObj = nodeObject;
this.extrudeBoo = this.extrudeArr.includes(this.rightClickObj.id);
var _base_position = this.$refs.myPage.getBoundingClientRect();
this.isShowNodeMenuPanel = true;
this.nodeMenuPanelPosition.x = $event.clientX;
this.nodeMenuPanelPosition.y = $event.clientY;
this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x;
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y;
// this.mutipleTableShow(nodeObject);
},
//节点表格选中数据
selectNodeTableChange(selection) {},
//查看历史照片
btnClick(type){
this.isShowNodeMenuPanel = false
if(type == '0'){
this.dialogVisible = true
}
handleClick(row) {
let boo = this.nodeNameArr.includes(row.name);
if (!boo) {
let nodearr = [
{
id: row.name,
text: row.name,
data: this.setNodeData(
{
str: false,
parentId: this.leftClickObj.text,
nodePhoto: this.selectIcon(row.type, true),
name: row.name,
},
this.nodedata
),
},
];
let linkarr = [{ from: this.leftClickObj.text, to: row.name }];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
this.nodeNameArr.push(row.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
} else {
let node = this.$refs.seeksRelationGraph.getNodeById(row.name);
this.removeNode(node.lot.childs, "cancelAbove");
this.$refs.seeksRelationGraph.removeNodeById(row.name);
let index = this.nodeNameArr.indexOf(row.name);
this.nodeNameArr.splice(index, 1);
}
},
//上图
shangtu(row){
console.log(row,'------------')
console.log( this.$refs.seeksRelationGraph.getNodes(),' this.$refs.seeksRelationGraph.getNodes()')
this.clinetArr = []
this.$refs.seeksRelationGraph.getNodes().forEach(el=>{
let obj = {
id:el.id,
x:el.x,
y:el.y
}
this.clinetArr.push(obj)
})
let self = this;
let nodearr = [
{ id: row.id,
name: row.name,
data: {
nodePhoto: this.selectIcon(row.type, false),
parentId: row.parentId?row.parentId:"",
type: row.type?row.type:"",
describe: row.describe?row.describe:"",
ajlbdmStr: row.ajlbdmStr?row.ajlbdmStr:"",
ajlbdm: row.ajlbdm?row.ajlbdm:"",
isXsAj: row.isXsAj?row.isXsAj:"",
}
},
];
let linkarr = [{ from: this.currentNode.id, to: row.id, text: "关联次数" }];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
self.cunData = seeksRGGraph.getNodes().map((i) => i.id);
}
);
if(this.clinetArr.length>0){
this.$refs.seeksRelationGraph.getNodes().map(el=>{
let obj = this.clinetArr.filter(item=>item.id == el.id)[0]
if(obj){
el.x = obj.x
el.y = obj.y
}
})
//删除节点集合的子节点
removeNode(childs, type) {
let _this = this;
if (childs && childs.length > 0) {
childs.forEach((i) => {
_this.$refs.seeksRelationGraph.removeNodeById(i.id);
if (type == "cancelAbove") {
let index = _this.nodeNameArr.indexOf(i.id);
if (index > 0) _this.nodeNameArr.splice(index, 1);
}
_this.removeNode(i.lot.childs, "cancelAbove");
});
}
},
/**
* @description: 初始化图谱
* @param {*}
* @return {*}
*/
async setGraphData() {
var _this = this;
//如果存在根节点就创建
if (this.nodedata) {
//创建根节点
var 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(this.nodedata.describe),
nodePhoto: this.selectIcon(this.nodedata.type, false),
},
this.nodedata
),
};
this.nodeArr.push(rootNode);
var __graph_json_data = {
rootId: "a",
nodes: [
//子节点
...this.nodeArr,
],
links: [...this.linkArr],
};
this.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
this.nodeNameArr.push(this.nodedata.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1000);
}
);
}
},
//取消上图
quxiao(row){
this.clinetArr = []
this.$refs.seeksRelationGraph.getNodes().forEach(el=>{
let obj = {
id:el.id,
x:el.x,
y:el.y
/**
* @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) {
let obj = {
...selfObj,
};
for (let key in nodeObj) {
if (
(obj[key] == "" || !obj[key]) &&
(nodeObj[key] || nodeObj[key] == 0)
) {
obj[key] = nodeObj[key];
}
this.clinetArr.push(obj)
})
let self = this;
this.$refs.seeksRelationGraph.removeNodeById(row.id);
self.cunData = this.$refs.seeksRelationGraph.getNodes().map((i) => i.id);
}
return obj;
},
/**
* @description: 根据type选择节点图片
......@@ -453,100 +764,313 @@ export default {
return require(`@/assets/img/graphEcharts/${str}email.png`);
}
},
//左键点击节点后
nodeClick(nodeObject) {
this.leftClickObj = nodeObject;
this.selectNodeName = nodeObject.id;
this.mutipleTableShow(nodeObject);
},
//左键点击或者右键点击后表格变化状况
mutipleTableShow(nodeObject) {
this.tableShow = false;
this.tableShow2 = true;
this.$nextTick(() => {
this.$refs.mutipleTable.clearSelection();
this.tableSelect = [];
let id = nodeObject.id;
let obj = this.defaultCheck.find((i) => i.key == id);
if (obj && obj.value && obj.value.length > 0) {
obj.value.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
}
});
},
/**
* @description: 过滤描述
* @param {*} str 描述字符串
* @return {*}
*/
filterDescribe(str) {
if (str) {
return str;
} else {
return "";
}
},
},
};
</script>
<style lang="scss" scoped>
.fontBox {
p {
text-align: center;
}
}
$marginTop: 308px;
.seeksRelationGraph {
/deep/ {
.rel-node-peel {
border-radius: 50%;
}
.w100h100 {
width: 100%;
height: 100%;
position: relative;
color: red;
}
.rel-node-peel {
.redColor {
color: red !important;
}
.highlight {
// border: 2px solid salmon !important;
box-shadow: 0 0 30px red !important;
border-radius: 50%;
}
.rel-node {
.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: 1px solid #ccc !important;
border: none;
}
.rel-node-checked {
border-radius: 50%;
box-shadow: none;
> .w100h100 {
border-radius: 50%;
}
}
.rel-node:hover {
box-shadow: 0px 0px 10px #000;
.c-mini-toolbar {
.c-mb-button[title~="点击开始自动调整布局"] {
display: none;
}
margin-top: $marginTop !important;
border-bottom: #efefef solid 1px;
box-shadow: none;
}
}
}
.btnGroup{
.select {
border-radius: 50% !important;
border: 2px solid rgb(255, 0, 255) !important;
}
.leftToolbar {
cursor: pointer;
width: 42px;
background-color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 998;
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;
}
}
}
}
.nodeTable {
.tableBox {
width: 500px;
position: absolute;
top: 20px;
right: 0;
z-index: 998;
background: #fff;
border: 1px solid #409eff;
padding: 0 10px;
h3 {
padding: 10px;
background: #409eff;
top: 0;
z-index: 1000;
padding: 15px;
> div {
border: 1px solid #e4e7ed;
}
.header {
display: flex;
justify-content: space-between;
background-color: #6791ba;
color: #fff;
font-weight: 600;
font-size: 18px;
padding: 0 15px;
align-items: center;
i {
font-size: 15px;
font-weight: 400;
cursor: pointer;
}
}
.nodeSearch {
width: 500px;
padding: 10px;
.search {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 10px;
// background-color: rgb(248, 237, 237);
.el-icon-search {
cursor: pointer;
}
span {
vertical-align: middle;
color: #000;
font-size: 15px;
font-weight: 600;
width: 80px;
}
/deep/.el-input {
width: 80%;
.searchIcon {
cursor: pointer;
}
.el-input {
width: calc(90% - 100px);
}
/deep/.el-range-editor{
width: 80%;
}
}
.tableBox2 {
width: 500px;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
padding: 15px;
padding-bottom: 0;
.bottomBtn {
background-color: #fff;
border: 1px solid #ebeef5;
border-top: none;
text-align: center;
padding: 10px 0;
z-index: 1000;
.el-button {
margin: 0 20px;
}
}
.footer {
padding: 10px;
border-bottom: 1px solid #ebeef5;
.header {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
background-color: #6791ba;
color: #fff;
font-weight: 600;
font-size: 18px;
padding: 10px 15px 10px 15px;
i {
font-size: 18px;
font-weight: 400;
cursor: pointer;
}
}
.edit {
color: #409eff;
cursor: pointer;
display: inline-block;
margin-right: 5px;
.search {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 10px;
// background-color: rgb(248, 237, 237);
.el-icon-search {
cursor: pointer;
}
span {
color: #000;
font-size: 15px;
font-weight: 600;
width: 80px;
}
.el-input {
width: calc(90% - 100px);
}
}
}
.c-node-menu-item {
line-height: 30px;
padding-left: 10px;
.el-table {
/deep/ .tableHeader {
th {
color: #000;
background-color: #c4cbce;
}
}
}
.search {
background-color: #fff;
}
.el-tabs /deep/ .el-tabs__header {
margin-bottom: 0 !important;
}
.hiddenChunk {
width: 50px;
height: 50px;
z-index: 1000;
align-items: center;
justify-content: center;
display: flex;
background-color: #6791ba;
cursor: pointer;
color: #444444;
font-size: 14px;
border-top: #efefef solid 1px;
position: absolute;
top: 18px;
right: 17px;
border-radius: 50%;
i {
font-size: 20px;
color: #fff;
}
}
.c-node-menu-item:hover {
background-color: rgba(66, 187, 66, 0.2);
.show {
position: absolute;
right: 20px;
top: 20px;
z-index: 88;
}
.c-node-menu-item {
padding: 0 10px;
&:hover {
background-color: rgba($color: #000000, $alpha: 0.1);
}
}
</style>
src/views/cqksh/module/cqcsksh.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-07-20 14:38:05
* @LastEditTime: 2022-01-10 14:38:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\yppt\argxfx.vue
-->
<template>
<div>
<SearchGraph
:type="type"
:formProp="formProp"
:formData="form"
childrenXhrStr="/api/ksh/getRAGx"
:photoXhrObject="photoXhrObject"
:nodeClickBoo="true"
placeholder="请输入证件号"
:params="params"
:nodedata="nodedata"
:unfoldParams="unfoldParams"
/>
</div>
</template>
<script>
import SearchGraph from "@c/SearchGraph.vue";
export default {
components: { SearchGraph },
data() {
return {
type: "cqcsksh",
photoXhrObject: {
url: "/api/ksh/getRyJbXx",
type: "person",
params: {
zjhm: "name",
},
},
formProp: [
{
id: "zjhm",
type: "text",
placeholder: "请输入证件号",
col: "3",
rules: [
{
required: true,
message: "请输入证件号",
trigger: "blur",
},
],
},
],
form: {
zjhm: "",
},
nodedata: {
type: "person",
id: 0,
name: "zjhm",
children: true,
},
params: {
objectValue: "zjhm",
objectType: "person",
parentId: 0,
},
unfoldParams: {
objectValue: "name",
objectType: "type",
parentId: "parentId",
},
};
},
};
</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