Skip to content

F
founder_vue
Commit 99c9097a by liyuhang19990520
Options

测试demo

parent de7c8220
Showing with 260 additions and 73 deletions
src/views/ceshi/ceshi5.vue
......@@ -9,13 +9,15 @@
class="seeksRelationGraph"
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="nodeClick"
:on-line-click="lineClick"
>
<div
slot="node"
slot-scope="{ node }"
@contextmenu.prevent.stop="contextmenu(node, $event)"
@mousedown="isShowNodeMenuPanel = false"
@dblclick="dbClick(node)"
@click="nodeClick(node)"
:class="{
w100h100: true,
gen: negativeHeightLine(node),
......@@ -30,8 +32,8 @@
background: 'url(' + node.data.nodePhoto + ') 0 0 / cover',
}"
></div>
<div class="fontBox">
<p
<div class="fontBox" @click.stop="() => {}">
<span
v-if="node.data.name"
:class="{
serialNumber: true,
......@@ -41,7 +43,7 @@
}"
>
{{ node.data.name }}
</p>
</span>
<p
v-if="node.data.describe"
:class="{
......@@ -107,16 +109,8 @@
<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>
<span>关键词(值)：</span>
<el-input placeholder="请输入内容" v-model="input4">
<i
slot="suffix"
......@@ -132,7 +126,7 @@
header-row-class-name="tableHeader"
:key="key"
>
<el-table-column label="序号" align="center">
<el-table-column label="序号" align="center" width="55">
<template slot-scope="scope">
<div>{{ scope.$index + 1 }}</div>
</template>
......@@ -144,6 +138,23 @@
</el-table-column>
<el-table-column prop="name" label="值" align="center">
</el-table-column>
<el-table-column
prop="source"
label="数据来源"
sortable
align="center"
>
</el-table-column>
<el-table-column prop="name" label="关系" align="center">
<template slot-scope="scope">
<el-button
@click="tableLineClick(scope.row)"
type="text"
size="small"
>{{ getValue(scope.row.value) }}</el-button
>
</template>
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope">
<el-button
......@@ -187,6 +198,50 @@
<el-button type="danger" @click="notServe()">取消</el-button>
</div>
</div>
<div class="tableBox3" v-if="tableShow4">
<div class="header">
<span>关系详情</span>
<i class="el-icon-error" @click="tableShow4 = false"></i>
</div>
<el-table
:data="tableData3"
style="width: 100%"
ref="mutipleTable"
max-height="300px"
border
header-row-class-name="tableHeader"
>
<el-table-column label="序号" align="center" width="55">
<template slot-scope="scope">
<div>{{ scope.$index + 1 }}</div>
</template>
</el-table-column>
<el-table-column
prop="lei1"
label="类型1"
align="center"
></el-table-column>
<el-table-column
prop="zhi1"
label="值"
align="center"
></el-table-column>
<el-table-column
prop="lei2"
label="类型2"
align="center"
></el-table-column>
<el-table-column
prop="zhi2"
label="值2"
align="center"
></el-table-column>
<el-table-column prop="relation" label="关系" align="center">
</el-table-column>
<el-table-column prop="time" label="时间" align="center">
</el-table-column>
</el-table>
</div>
<div
class="hiddenChunk"
v-show="!tableShow3"
......@@ -201,6 +256,7 @@
import { get } from "@/utils/http.js";
import utils from "@/utils/util.js";
import SeeksRelationGraph from "@/utils/gxt.js";
var time = null; // 在这里定义time 为null
// import SeeksRelationGraph from "@/utils/gxt.js";
export default {
name: "SeeksRelationGraphDemo",
......@@ -278,6 +334,7 @@ export default {
name: "4",
},
],
tableData3: [],
//表格筛选
input4: "",
//假数据综合
......@@ -286,61 +343,44 @@ export default {
{
name: "15110332798",
type: "phone",
value: [{ time: "2022-1-10", text: "联系方式" }],
},
{
name: "晋D85728",
type: "car",
value: [{ time: "2021-12-14", text: "骑车" }],
},
{
name: "1092678146",
type: "qq",
value: [
{ time: "2022-1-13", text: "嫌疑人联系方式之一" },
{ time: "2021-12-23", text: "诈骗案使用qq号" },
],
},
{
name: "founder123",
type: "wechat",
value: [{ time: "2022-1-13", text: "微信" }],
},
],
founder123: [
{
name: "140428199905209832",
type: "person",
value: [{ time: "2022-1-3", text: "身份证" }],
},
{
name: "8765421",
type: "phone",
value: [{ time: "2022-1-9", text: "电话" }],
},
],
},
//假数据
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",
},
],
gen: [],
founder123: [],
},
//基本信息表是否显示
tableShow: false,
......@@ -348,6 +388,8 @@ export default {
tableShow2: false,
//两个表的显示和隐藏
tableShow3: true,
//关系表
tableShow4: false,
//上图数据的name集合
nodeNameArr: [],
//筛选条件为空后表格数据出现
......@@ -356,14 +398,12 @@ export default {
tableSelect: [],
//默认勾选的算子表
defaultCheck: [],
//tabs选中的内容
activeName: "",
//算子表勾选后的节点集合
tableDataList: [],
//控制tabs数组
tabsArr: [],
//左键选中的节点
selectNodeName: "",
//模拟双击事件
clickTimes: 0,
//单击还是双击
leftClickType: ''
};
},
created() {
......@@ -389,38 +429,48 @@ export default {
this.setGraphData();
},
methods: {
handleTabsClick(tab, event) {
let index = this.tabsArr.findIndex((i) => i.name == this.activeName);
this.tableData = this.tableDataList.slice(index, index + 1);
// this.key++;
getValue(arr) {
let textMap = arr.map((i) => i.text);
return textMap.length > 0 ? textMap[0] : "";
},
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);
//给表格插入选择好服务的节点
this.tableData = this.dataSet.gen;
//插入表格的数据来源
this.tableData.forEach((i, index) => {
this.$set(
this.tableData[index],
"source",
this.tableSelect[index].fuwuName
);
});
} 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);
this.tableData = this.dataSet[this.leftClickObj.id];
this.tableData.forEach((i, index) => {
this.$set(
this.tableData[index],
"source",
this.tableSelect[index].fuwuName
);
});
}
//勾选过的存起来反显
let checkIndex = this.defaultCheck.findIndex(
......@@ -444,6 +494,9 @@ export default {
notServe() {
this.tableShow2 = false;
},
dbClick(node) {
console.log(node);
},
searchTableData() {
if (this.input4.trim()) {
this.tableData = this.tableData.filter((i) => {
......@@ -482,17 +535,20 @@ export default {
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];
}
//usableList 为筛选出上过图的数据
let usableList = childsArray.filter((i) =>
//this.nodeNameArr为上图的name值集合
this.nodeNameArr.includes(i.name)
);
usableList.forEach((i) => {
//图上面没有出现过节点后添加节点和关系
let index = nodes.findIndex((j) => j.id == i.name);
if (index < 0) {
let nodearr = [
......@@ -505,12 +561,20 @@ export default {
parentId: this.rightClickObj.text,
nodePhoto: this.selectIcon(i.type, true),
name: i.name,
type: i.type,
},
this.nodedata
),
},
];
let linkarr = [{ from: this.rightClickObj.text, to: i.name }];
let textMap = i.value.map((i) => i.text);
let linkarr = [
{
from: this.rightClickObj.text,
to: i.name,
text: textMap.length > 0 ? textMap[0] : "",
},
];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -592,12 +656,20 @@ export default {
parentId: this.leftClickObj.text,
nodePhoto: this.selectIcon(row.type, true),
name: row.name,
type: row.type,
},
this.nodedata
),
},
];
let linkarr = [{ from: this.leftClickObj.text, to: row.name }];
let textMap = row.value.map((i) => i.text);
let linkarr = [
{
from: this.leftClickObj.text,
to: row.name,
text: textMap.length > 0 ? textMap[0] : "",
},
];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -764,17 +836,79 @@ export default {
return require(`@/assets/img/graphEcharts/${str}email.png`);
}
},
//点击表格后的关系事件
tableLineClick(toNode) {
console.log(toNode);
this.tableData3 = [];
let fromNode = this.leftClickObj;
let relationList = toNode.value;
relationList.forEach((i, index) => {
let relationObj = {
lei1: this.selectType(fromNode.data.type),
zhi1: fromNode.data.name,
lei2: this.selectType(toNode.type),
zhi2: toNode.name,
relation: i.text,
time: i.time,
};
this.$set(this.tableData3, index, relationObj);
});
this.tableShow4 = true;
},
//点击线以后的事件
lineClick(lineObject) {
this.tableData3 = [];
let fromNode = lineObject.fromNode;
let toNode = lineObject.toNode;
let arr = [...this.dataAll.gen, ...this.dataAll.founder123];
let obj = arr.find((i) => i.name == toNode.id);
let relationList = obj.value;
relationList.forEach((i, index) => {
let relationObj = {
lei1: this.selectType(fromNode.data.type),
zhi1: fromNode.data.name,
lei2: this.selectType(toNode.data.type),
zhi2: toNode.data.name,
relation: i.text,
time: i.time,
};
this.$set(this.tableData3, index, relationObj);
});
this.tableShow4 = true;
},
//左键点击节点后
nodeClick(nodeObject) {
this.leftClickObj = nodeObject;
this.selectNodeName = nodeObject.id;
this.mutipleTableShow(nodeObject);
nodeClick(nodeObject, $event) {
let _this = this;
this.clickTimes++;
if (this.clickTimes === 2) {
//当点击次数为2
this.clickTimes = 0; //记得清零
this.leftClickType = 'dbclick';
// 触发双击事件...
_this.leftClickObj = nodeObject;
_this.selectNodeName = nodeObject.id;
_this.mutipleTableShow(nodeObject, "dbclick");
}
setTimeout(function () {
if (_this.clickTimes === 1) {
_this.clickTimes = 0; // 单击清零
this.leftClickType = 'click';
// 触发单击事件...
_this.leftClickObj = nodeObject;
_this.selectNodeName = nodeObject.id;
_this.mutipleTableShow(nodeObject, "click");
}
}, 250);
},
//左键点击或者右键点击后表格变化状况
mutipleTableShow(nodeObject) {
mutipleTableShow(nodeObject, type) {
this.tableShow = false;
this.tableShow2 = true;
this.$nextTick(() => {
if (type == "dbclick") {
// selectTable
return;
}
this.$refs.mutipleTable.clearSelection();
this.tableSelect = [];
let id = nodeObject.id;
......@@ -841,12 +975,15 @@ $marginTop: 308px;
cursor: pointer;
}
.fontBox {
min-width: 300px;
min-width: auto;
position: absolute;
left: 50%;
top: 82px;
transform: translateX(-50%);
}
.serialNumber {
white-space: nowrap;
}
.serialNumber,
.name,
.ajlbdmStr {
......@@ -930,7 +1067,7 @@ $marginTop: 308px;
}
}
.tableBox {
width: 500px;
width: 700px;
position: absolute;
right: 0;
top: 0;
......@@ -967,7 +1104,7 @@ $marginTop: 308px;
color: #000;
font-size: 15px;
font-weight: 600;
width: 80px;
width: 100px;
}
.el-input {
width: calc(90% - 100px);
......@@ -1021,7 +1158,50 @@ $marginTop: 308px;
color: #000;
font-size: 15px;
font-weight: 600;
width: 80px;
width: 100px;
}
.el-input {
width: calc(90% - 100px);
}
}
}
.tableBox3 {
width: 700px;
position: absolute;
left: 0;
bottom: 0;
z-index: 1000;
padding: 15px;
padding-bottom: 0;
.header {
display: flex;
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;
}
}
.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: 100px;
}
.el-input {
width: calc(90% - 100px);
......@@ -1036,6 +1216,14 @@ $marginTop: 308px;
background-color: #c4cbce;
}
}
/deep/ .caret-wrapper {
.ascending {
border-bottom-color: #000;
}
.descending {
border-top-color: #000;
}
}
}
.search {
background-color: #fff;
......
src/views/ceshi/cqceshi.vue
......@@ -394,7 +394,6 @@ export default {
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y;
},
btn1() {
console.log(111111, this.currentNode);
const _input = document.createElement("input");
// 设置内容
_input.value = this.currentNode.text;
......
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