Commit 0b46422a by lp784568205

修改重庆可视化关系图关系

parent 297d5634
......@@ -102,7 +102,12 @@
<!-- <div class="c-node-menu-item" @click="btn3()">展开</div>-->
<!-- <div class="c-node-menu-item" @click="btn4(true)">收缩</div>-->
</div>
<div class="tableBox" v-loading="t_loading" v-if="tableShow" v-show="tableShow3">
<div
class="tableBox"
v-loading="t_loading"
v-if="tableShow"
v-show="tableShow3"
>
<div class="backIcon" @click="changeToModdel">
<span style="display: block; position: relative; left: 20px"
>算例中心</span
......@@ -256,7 +261,7 @@
<el-table
@selection-change="selectionChange"
:data="tableData2"
style="width: 100%;height:403px;"
style="width: 100%; height: 403px"
ref="mutipleTable"
:key="key2"
border
......@@ -639,6 +644,8 @@ export default {
tloadingIndex: 0,
//选择的模型的数组
selectChoice: [],
//判断页面的值
xxzjbh: "",
};
},
watch: {
......@@ -677,7 +684,8 @@ export default {
// console.log(this.highLightArr)
this.title = this.$route.query.title;
console.log(this.params);
this.xxzjbh = "helloWorld" + Date.parse(new Date());
console.log(this.xxzjbh);
// postJson("http://localhost:8080" + this.childrenXhrStr,this.params).then((res) => {
// if(res.code == 200 && res.success == true) {
// console.log(res)
......@@ -719,6 +727,7 @@ export default {
modelType: this.activeName,
page: val,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
console.log(res.data.rows);
debugger;
......@@ -748,11 +757,14 @@ export default {
this.currentLineObject.fromNode.id +
":" +
this.currentLineObject.toNode.id;
getRelationsInfoList({ objectValue: str, page: val, rows: 5 }).then(
(res) => {
getRelationsInfoList({
objectValue: str,
page: val,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
this.tableData3 = res.data.rows;
}
);
});
},
mouseUp() {
console.log("mouseup");
......@@ -844,6 +856,7 @@ export default {
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
......@@ -902,13 +915,20 @@ export default {
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
{
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: row.name,
// text: textMap.length > 0 ? textMap[0] : "",
to: item.name,
text: row.value,
},
];
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -981,6 +1001,7 @@ export default {
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
......@@ -1039,14 +1060,22 @@ export default {
// debugger
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
{
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: row.name,
// text: textMap.length > 0 ? textMap[0] : "",
to: item.name,
text: row.value,
},
];
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -1138,6 +1167,7 @@ export default {
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
item.tableData = res.data.rows;
item.total = res.data.total;
......@@ -1240,12 +1270,20 @@ export default {
];
let textMap = i.value.map((i) => i.text);
let linkarr = [
{
from: this.rightClickObj.text,
to: i.name,
text: textMap.length > 0 ? textMap[0] : "",
},
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -1351,13 +1389,20 @@ export default {
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
{
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: row.name,
// text: textMap.length > 0 ? textMap[0] : "",
to: item.name,
text: row.value,
},
];
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -1619,8 +1664,12 @@ export default {
this.tableData3 = [];
this.currentLineObject = lineObject;
var str = lineObject.fromNode.id + ":" + lineObject.toNode.id;
getRelationsInfoList({ objectValue: str, page: 1, rows: 5 }).then(
(res) => {
getRelationsInfoList({
objectValue: str,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (
res.code == 200 &&
res.success == true &&
......@@ -1652,8 +1701,7 @@ export default {
});
this.tableShow4 = true;
}
}
);
});
setTimeout(() => {
this.tloadingIndex--;
}, 1000);
......@@ -1781,6 +1829,7 @@ export default {
modelType: goodss.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
......@@ -1850,13 +1899,20 @@ export default {
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
{
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: row.name,
// text: textMap.length > 0 ? textMap[0] : "",
to: item.name,
text: row.value,
},
];
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
......@@ -2058,6 +2114,7 @@ export default {
// modelType: goodss.name,
// page: 1,
// rows: 5,
// xxzjbh: this.xxzjbh,
// }).then((res) => {
// if (res.code == 200 && res.success == true) {
// console.log(res)
......
<template>
<div
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-line-click="lineClick"
:on-node-click="nodeClick"
>
<div
slot="node"
slot-scope="{ node }"
@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,
isSelect: judgeIsSelect(node),
}"
>
<div
class="w100h100 backImg"
:style="{
background: 'url(' + node.data.nodePhoto + ') 0 0 / cover',
}"
></div>
<div class="fontBox" @click.stop="() => {}">
<span
v-if="node.data.name"
:class="{
serialNumber: true,
redColor: node.data.isXsAj
? node.data.isXsAj == '1'
: judgeHeightLine(node),
}"
>
{{ node.data.name }}
</span>
<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>
</div>
<div
v-show="isShowNodeMenuPanel"
@click="isShowNodeMenuPanel = false"
:style="{
left: nodeMenuPanelPosition.x + 'px',
top: nodeMenuPanelPosition.y + 'px',
}"
style="
z-index: 999;
padding: 10px;
background-color: #ffffff;
border: #eeeeee solid 1px;
box-shadow: 0px 0px 8px #cccccc;
position: absolute;
"
>
<div
style="
line-height: 25px;
padding-left: 10px;
color: #888888;
font-size: 12px;
"
>
对这个节点进行操作:
</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-loading="t_loading"
v-if="tableShow"
v-show="tableShow3"
>
<div class="backIcon" @click="changeToModdel">
<span style="display: block; position: relative; left: 20px"
>算例中心</span
>
</div>
<div class="backIcon2">
<span style="display: block; position: relative; left: 20px"
>结果列表</span
>
</div>
<div>
<div class="header">
<span>结果列表:{{ leftClickObj.id }}</span>
<i class="el-icon-remove" @click="tableShow3 = !tableShow3"></i>
</div>
<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>
<div class="buttonBox">
<el-radio-group v-model="activeName" size="mini">
<el-radio-button
v-for="item in runlist"
:label="item.name"
:key="item.name"
:disabled="item.disabledRadio"
@change="buttonClick"
>
{{ item.labelName }}
</el-radio-button>
</el-radio-group>
</div>
<div
style="width: 570px; height: 300px"
v-for="item in runlist"
:key="item.name"
v-show="item.name == activeName"
>
<!-- <el-tabs type="border-card" @tab-click="tabClick" v-model="activeName">-->
<!-- <el-tab-pane :label="item.fuwuName" :name="item.name"-->
<!-- v-for="item in runlist" :key="item.name" disabled>-->
<el-table
:data="item.tableData"
style="width: 100%; height: 300px"
border
header-row-class-name="tableHeader"
:key="key"
>
<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="name"
label="名称"
align="center"
width="105"
>
<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="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"
width="150"
>
<template slot-scope="scope">
<el-button
v-if="nodeNameArr[0] != scope.row.name"
@click="handleClick(scope.row)"
type="text"
size="small"
>{{
nodeNameArr.includes(scope.row.name) ? "取消上图" : "上图"
}}
</el-button>
<el-button
v-if="
scope.row.type == 'lawcase' || scope.row.type == 'person'
"
@click="toDAright(scope.row)"
type="text"
size="small"
>档案
</el-button>
</template>
</el-table-column>
</el-table>
<div
class="table-pagination"
v-if="item.pageShow"
style="background-color: #fff"
>
<el-pagination
:page-size="10"
@current-change="currentChange"
:total="item.total"
:current-page="item.page"
></el-pagination>
</div>
</div>
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
</div>
</div>
<div class="tableBox2" v-if="tableShow2" v-show="tableShow3">
<div class="backIcon2">
<span style="display: block; position: relative; left: 20px"
>算例中心</span
>
</div>
<div class="backIcon" @click="saveServe()">
<span style="display: block; position: relative; left: 20px"
>结果列表</span
>
</div>
<div class="header">
<span>算例中心:{{ leftClickObj.id }}</span>
<i class="el-icon-remove" @click="tableShow3 = !tableShow3"></i>
</div>
<el-table
@selection-change="selectionChange"
:data="tableData2"
style="width: 100%; height: 403px"
ref="mutipleTable"
:key="key2"
border
header-row-class-name="tableHeader"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column
prop="fuwuName"
label="服务名称"
align="center"
></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>
<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%"
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="zhi1"-->
<!-- label="操作1"-->
<!-- align="center"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- v-if="scope.row.objectFromType == '4255'|| scope.row.objectFromType == '1'"-->
<!-- @click="toDAleft(scope.row)"-->
<!-- type="text"-->
<!-- size="small"-->
<!-- >档案-->
<!-- </el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
prop="time1"
label="首次关联时间"
align="center"
></el-table-column>
<el-table-column
prop="time2"
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="zhi2"-->
<!-- label="操作2"-->
<!-- align="center"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- v-if="scope.row.objectToType == '4255' || scope.row.objectToType == '1'"-->
<!-- @click="toDAleft(scope.row)"-->
<!-- type="text"-->
<!-- size="small"-->
<!-- >档案-->
<!-- </el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<el-pagination
:page-size="5"
@current-change="currentChangeLeft"
:total="total"
:current-page="page"
></el-pagination>
</div>
<div
class="hiddenChunk"
v-show="!tableShow3"
@click="tableShow3 = !tableShow3"
>
<i class="el-icon-circle-plus"></i>
</div>
</div>
</template>
<script>
import { get, post, postJson } from "@/utils/http.js";
import utils from "@/utils/util.js";
import SeeksRelationGraph from "@/utils/gxt.js";
import jquery from "jquery";
import { getPersonInfo, getRelationsInfoList } from "../../api/cqksh";
var time = null; // 在这里定义time 为null
export default {
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
data() {
return {
isShowCodePanel: false,
isShowNodeMenuPanel: false,
nodeMenuPanelPosition: { x: 0, y: 0 },
g_loading: false,
t_loading: false,
demoname: "---",
activeTabName: "case1",
distanceCoefficient: 1,
graphOptions: {
defaultNodeBorderWidth: 0,
defaultNodeColor: "rgba(238, 178, 94, 1)",
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultLineShape: 1,
layouts: [
{
label: "自动布局",
layoutName: "force",
layoutClassName: "seeks-layout-force",
},
],
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置
},
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: [
{
fuwuName: "人案类型",
labelName: "",
status: "运行",
name: "001",
tableData: [],
page: 1,
total: -1,
pageShow: false,
disabledRadio: true,
},
{
fuwuName: "网安模型",
labelName: "",
status: "运行",
name: "002",
tableData: [],
page: 1,
total: -1,
pageShow: false,
disabledRadio: true,
},
{
fuwuName: "高危机主模型",
labelName: "",
status: "运行",
name: "003",
tableData: [],
page: 1,
total: -1,
pageShow: false,
disabledRadio: true,
},
// {
// fuwuName: "同行同住模型",
// labelName: "同行同住模型",
// status: "运行",
// name: "004",
// tableData: [],
// page: 1,
// total: -1,
// pageShow: false,
// disabledRadio: true,
// },
// {
// fuwuName: "寄递信息模型",
// labelName: "",
// status: "运行",
// name: "005",
// tableData: [],
// page: 1,
// total: -1,
// pageShow: false,
// disabledRadio: true,
// },
{
fuwuName: "多维串并模型",
labelName: "",
status: "运行",
name: "006",
tableData: [],
page: 1,
total: -1,
pageShow: false,
disabledRadio: true,
},
// {
// fuwuName: "同案同伙模型",
// labelName: "",
// status: "运行",
// name: "007",
// tableData: [],
// page: 1,
// total: -1,
// disabledRadio: true,
// },
// {
// fuwuName: "现场前科模型",
// labelName: "",
// status: "运行",
// name: "008",
// tableData: [],
// page: 1,
// total: -1,
// pageShow: false,
// disabledRadio: true,
// },
// {
// fuwuName: "轨迹关联案件模型",
// labelName: "",
// status: "运行",
// name: "009",
// tableData: [],
// page: 1,
// total: -1,
// pageShow: false,
// disabledRadio: true,
// },
{
fuwuName: "标采信息模型",
labelName: "",
status: "运行",
name: "010",
tableData: [],
page: 1,
total: -1,
pageShow: false,
disabledRadio: true,
},
],
tableData3: [],
//表格筛选
input4: "",
//假数据综合
dataAll: {
gen: [
// {
// 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: [],
founder123: [],
},
//基本信息表是否显示
tableShow: false,
//算子中心表是否显示
tableShow2: false,
//两个表的显示和隐藏
tableShow3: true,
//关系表
tableShow4: false,
//上图数据的name集合
nodeNameArr: [],
//筛选条件为空后表格数据出现
tableAllData: [],
//算子筛选表
tableSelect: [],
//默认勾选的算子表
defaultCheck: [],
//双击时找到的子节点的父级
fatherSelect: [],
//默认当前的tab
defaultTab: [],
//最后一次选择的模型
latestSelectModel: [],
//左键选中的节点
selectNodeName: "",
//模拟双击事件
clickTimes: 0,
//单击还是双击
leftClickType: "",
//单击后保存表格选中状态
clickTableSelect: [],
rootTableSelect: [],
//分页方法
total: 0,
page: 1,
currentLineObject: {},
//运行的列表
runlist: [],
activeName: "001",
//控制界面是否显示
loadingIndex: 0,
tloadingIndex: 0,
//选择的模型的数组
selectChoice: [],
//判断页面的值
xxzjbh: "",
};
},
watch: {
loadingIndex() {
if (this.loadingIndex <= 0) {
this.g_loading = false;
} else {
this.g_loading = true;
}
},
tloadingIndex() {
if (this.tloadingIndex <= 0) {
this.t_loading = false;
} else {
this.t_loading = true;
}
},
},
created() {
let self = this;
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;
console.log(this.params);
this.xxzjbh = "helloWorld" + Date.parse(new Date());
console.log(this.xxzjbh);
// postJson("http://localhost:8080" + this.childrenXhrStr,this.params).then((res) => {
// if(res.code == 200 && res.success == true) {
// console.log(res)
// this.dataAll.gen = [ ...res.data.rows,...this.dataAll.gen ]
// }
// })
},
async mounted() {
this.setGraphData();
},
methods: {
//深克隆
deepClone(obj) {
var good = {};
for (let key in obj) {
good[key] = obj[key];
}
return good;
},
//分页方法
currentChange(val) {
let self = this;
// const loading = this.$loading({
// lock: true,
// text: "正在加载...",
// spinner: "el-icon-loading",
// background: "reba(255,255,255,0.7)",
// })
self.tloadingIndex++;
debugger;
console.log(val);
console.log(this.activeName);
console.log(this.defaultTab); //this.defaultTab.name 002
console.log(parseInt(this.defaultTab.name));
console.log(this.runlist);
getPersonInfo({
objectType: this.leftClickObj.data.type,
objectValue: this.leftClickObj.id,
modelType: this.activeName,
page: val,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
console.log(res.data.rows);
debugger;
self.runlist.map((good) => {
if (good.name == self.activeName) {
good.tableData = res.data.rows;
}
setTimeout(() => {
self.tloadingIndex--;
}, 1000);
});
// self.runlist[self.activeName].tableData = res.data.rows;
// runlist[0].tableData
// let usableList = childsArray.filter((i) =>
// //this.nodeNameArr为上图的name值集合
// this.nodeNameArr.includes(i.name)
// );
// setTimeout(() => {
// // loading.close()
// },1000)
});
// this.g_loading = false
},
currentChangeLeft(val) {
var str =
this.currentLineObject.fromNode.id +
":" +
this.currentLineObject.toNode.id;
getRelationsInfoList({
objectValue: str,
page: val,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
this.tableData3 = res.data.rows;
});
},
mouseUp() {
console.log("mouseup");
},
getValue(arr) {
// let textMap = arr.map((i) => i.value);
// return textMap.length > 0 ? textMap[0] : "";
},
selectionChange(arr) {
debugger;
let selectArr = JSON.parse(JSON.stringify(arr));
let AllArr = JSON.parse(JSON.stringify(this.tableData2));
AllArr.map((good) => {
selectArr.map((item) => {
if (good.name == item.name) {
good.disabledRadio = false;
}
});
});
this.selectChoice = arr;
this.tableSelect = AllArr;
debugger;
},
saveServe() {
// const loading = this.$loading({
// lock: true,
// text: "正在加载...",
// spinner: "el-icon-loading",
// background: "reba(255,255,255,0.7)",
// })
// this.g_loading = true
let self = this;
self.tloadingIndex++;
this.runlist = [];
if (this.selectChoice.length <= 0) {
this.$message.error("请选择计算方式");
// loading.close();
self.tloadingIndex--;
return;
}
//点击确定后裁剪假数据并且将节点选中的算子表存起来
this.tableData = [];
debugger;
//单击点击确认后存储选中状态,以便双击时获取
if (this.leftClickType == "click") {
this.clickTableSelect = this.tableSelect;
}
debugger;
this.latestSelectModel = this.tableSelect;
if (this.leftClickObj.data.str) {
this.rootTableSelect = this.tableSelect;
// let index = this.tableSelect.length;
//从所有假数据中切割长度复制给 真正展示的假数据
// let arr = this.dataAll.gen.slice(0, index);
// this.$set(this.dataSet, "gen", arr);
// //给表格插入选择好服务的节点
// this.tableData = this.dataSet.gen;
// //插入表格的数据来源
// this.tableData.forEach((i, index) => {
// this.$set(
// this.tableData[index],
// "source",
// this.tableSelect[index].fuwuName
// );
// });
debugger;
this.defaultCheck.map((item) => {
if (item.key == this.leftClickObj.id) {
item.value.map((secondItem, secondIndex) => {
if (secondItem.labelName != secondItem.fuwuName) {
this.tableSelect[secondIndex].disabledRadio = false;
}
});
}
});
this.tableSelect.map((item, index) => {
// debugger
// if(item.total != -1) {
// item.disabledRadio = false
// }
if (item.disabledRadio == false) {
this.tloadingIndex++;
getPersonInfo({
objectType: this.params.objectType,
objectValue: this.params.objectValue,
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
if (res.data.rows != null) {
res.data.rows.map((good) => {
good.source = item.fuwuName;
});
item.page = 1;
// item.total = res.data.total;
this.$set(this.tableSelect[index], "total", res.data.total);
}
item.tableData = res.data.rows;
this.$nextTick(function () {
item.pageShow = true;
});
if (res.data.total !== null) {
item.labelName = item.fuwuName + "(" + res.data.total + ")";
} else {
item.labelName = item.fuwuName + "(0)";
}
// if (index == 0) {
this.activeName = this.selectChoice[0].name;
// }
console.log(item);
if (
item.total &&
item.tableData != null &&
res.data.rows.length <= 5 &&
res.data.total != 0
) {
item.tableData.forEach((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),
nodePhoto:
row.type == "person" && row.img && row.img != ""
? "data:image/jpg;base64," + row.img
: this.selectIcon(row.type, true),
name: row.name,
type: row.type,
red: row.red,
},
this.nodedata
),
},
];
// debugger
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
this.nodeNameArr.push(row.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
} else {
}
});
}
} else {
item.tableData = [];
item.labelName = item.fuwuName + "(0)";
item.toal = 0;
}
});
} else {
item.labelName = item.fuwuName;
}
self.tloadingIndex--;
});
self.runlist = [...self.tableSelect];
setTimeout(() => {
// loading.close()
// this.g_loading = false;
self.tloadingIndex--;
}, 1000);
console.log(self.runlist);
} else {
debugger;
// 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.tableData = this.dataSet[this.leftClickObj.id];
// this.tableData.forEach((i, index) => {
// this.$set(
// this.tableData[index],
// "source",
// this.tableSelect[index].fuwuName
// );
// });
self.runlist = [];
this.defaultCheck.map((item) => {
if (item.key == this.leftClickObj.id) {
item.value.map((secondItem, secondIndex) => {
if (secondItem.labelName != secondItem.fuwuName) {
this.tableSelect[secondIndex].disabledRadio = false;
}
});
}
});
this.tableSelect.map((item, index) => {
//通过每次计算完会赋值的labelName判断节点是否计算过
// debugger
// if(item.total != -1) {
// item.disabledRadio = false
// }
if (item.disabledRadio == false) {
self.tloadingIndex++;
getPersonInfo({
objectType: this.leftClickObj.data.type,
objectValue: this.leftClickObj.id,
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
if (res.data.rows != null) {
res.data.rows.map((good) => {
good.source = item.fuwuName;
});
item.page = 1;
// item.total = res.data.total;
this.$set(this.tableSelect[index], "total", res.data.total);
}
item.tableData = res.data.rows;
if (res.data.total !== null) {
item.labelName = item.fuwuName + "(" + res.data.total + ")";
} else {
item.labelName = item.fuwuName + "(0)";
}
this.$nextTick(function () {
item.pageShow = true;
});
// if (index == 0) {
this.activeName = this.selectChoice[0].name;
// }
if (
item.total &&
item.tableData.length <= 5 &&
item.total != 0
) {
console.log(5644444444444444, item.tableData);
item.tableData.map((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),
nodePhoto:
row.type == "person" && row.img && row.img != ""
? "data:image/jpg;base64," + row.img
: this.selectIcon(row.type, true),
name: row.name,
type: row.type,
describe: row.describe,
red: row.red,
},
this.nodedata
),
},
];
// debugger
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
this.nodeNameArr.push(row.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
} else {
}
});
}
self.tloadingIndex--;
} else {
item.tableData = [];
item.labelName = item.fuwuName + "(0)";
item.toal = 0;
self.tloadingIndex--;
}
});
} else {
item.labelName = item.fuwuName;
}
});
self.runlist = self.tableSelect;
setTimeout(() => {
// loading.close()
// this.g_loading = false;
self.tloadingIndex--;
}, 1000);
console.log(self.runlist);
}
//勾选过的存起来反显
let checkIndex = this.defaultCheck.findIndex(
(i) => i.key == this.leftClickObj.id
);
let obj = {
key: this.leftClickObj.id,
value: self.tableSelect,
changed: true,
};
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(self.tableData || []));
},
notServe() {
this.tableShow2 = false;
},
buttonClick(val) {
console.log(val);
},
tabClick(tab, event) {
// debugger
console.log(tab, event);
this.defaultTab = tab;
},
searchTableData() {
// debugger
if (this.input4.trim()) {
this.runlist.map((item) => {
if (item.name == this.activeName) {
item.tableData = item.tableData.filter((i) => {
return i.name.indexOf(this.input4) >= 0;
});
item.total = item.tableData.length;
}
});
// this.runlist[].tableData = this.runlist[].tableData.filter((i) => {
// return i.name.indexOf(this.input4) >= 0;
// });
} else {
// this.tableData = this.tableAllData;
this.runlist.map((item) => {
if (item.name == this.activeName) {
getPersonInfo({
objectType: this.leftClickObj.data.type,
objectValue: this.leftClickObj.id,
modelType: item.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
item.tableData = res.data.rows;
item.total = res.data.total;
});
}
});
}
},
changeToModdel() {
let _this = this;
var nodeObject = this.leftClickObj;
this.tableShow = false;
this.tableShow2 = true;
debugger;
this.$nextTick(() => {
debugger;
_this.$refs.mutipleTable.clearSelection();
this.tableSelect = [];
debugger;
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);
// });
// }
if (this.selectChoice && this.selectChoice.length > 0) {
this.selectChoice.forEach((i) => {
// if(i.disabledRadio == false) {
debugger;
_this.$refs.mutipleTable.toggleRowSelection(i, true);
// }
});
}
});
},
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];
}
//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 = [
{
id: i.name,
text: i.name,
data: this.setNodeData(
{
str: false,
parentId: this.rightClickObj.text,
nodePhoto: this.selectIcon(i.type, true),
name: i.name,
describe: i.describe,
type: i.type,
red: row.red,
},
this.nodedata
),
},
];
let textMap = i.value.map((i) => i.text);
let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
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);
});
}
},
selectType(type) {
switch (type) {
case "person":
return "身份证号";
case "car":
return "车牌号";
case "phone":
return "手机号";
case "kddh":
return "快递单号";
case "qq":
return "qq号";
case "wechat":
return "微信号";
case "imei":
return "imei号";
case "lawcase":
return "案件编号";
case "waother":
return "网安关系";
case "dwcbwp":
return "物品编号";
case "xckybh":
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 - _base_position.x;
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y;
// this.mutipleTableShow(nodeObject); /////后续可能会用
},
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),
nodePhoto:
row.type == "person" && row.img && row.img != ""
? "data:image/jpg;base64," + row.img
: this.selectIcon(row.type, true),
name: row.name,
type: row.type,
describe: row.describe,
red: row.red,
},
this.nodedata
),
},
];
// debugger
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
this.nodeNameArr.push(row.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
} else {
debugger;
let node = this.$refs.seeksRelationGraph.getNodeById(row.name);
// if (node.lot.childs.length > 0) {
// node.lot.childs.map((item) => {
// let index = this.nodeNameArr.indexOf(item.id);
// this.nodeNameArr.splice(index, 1);
// })
// }
if (node.lot.childs.length != 0) {
this.$message.warning(`${row.name}节点存在子节点,无法取消上图`);
} else {
this.removeNode(node.lot.childs, "cancelAbove");
this.$refs.seeksRelationGraph.removeNodeById(row.name);
let index = this.nodeNameArr.indexOf(row.name);
this.nodeNameArr.splice(index, 1);
}
}
},
//删除节点集合的子节点
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 {*}
*/
callApi(url, params) {
return get(url, params);
},
async setGraphData() {
var _this = this;
//如果存在根节点就创建
if (_this.nodedata) {
//创建根节点
// debugger
var photoGot = "";
// photoData = await this.callApi(
// this.photoXhrObject.url,
// this.photoXhrObject.params
// );
// photoGot = photoData.data.rows || photoData.rows || photoData.data;
if (this.nodedata.type == "person") {
// debugger;
var photoData = await this.callApi("/api/ksh/getRyJbXx", {
zjhm: this.params.objectValue,
});
if (
photoData.data.rows.edzzplj &&
photoData.data.rows.edzzplj != ""
) {
photoGot = "data:image/jpg;base64," + photoData.data.rows.edzzplj;
} else {
photoGot = _this.selectIcon(this.nodedata.type, false);
}
} else {
photoGot = _this.selectIcon(this.nodedata.type, false);
}
// debugger
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),
nodePhoto: photoGot,
},
_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);
}
);
// debugger
// _this.mutipleTableShow(rootNode, "click");
setTimeout(function () {
_this.leftClickType = "click";
// 触发单击事件...
// debugger;
_this.leftClickObj = rootNode;
_this.selectNodeName = rootNode.id;
_this.mutipleTableShow(rootNode, "click");
}, 250);
}
},
/**
* @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;
},
judgeIsSelect(node) {
let boo = true;
this.defaultCheck.map((item) => {
if (item.key == node.id) {
boo = false;
}
});
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];
}
}
return obj;
},
/**
* @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 "kddh":
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 "waother":
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`);
case "dwcbwp":
return require(`@/assets/img/graphEcharts/${str}wp.png`);
case "xckybh":
return require(`@/assets/img/graphEcharts/${str}lawcase.png`);
}
},
//点击表格后的关系事件
tableLineClick(toNode) {
// debugger
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) {
// debugger
this.tloadingIndex++;
var resData = [];
this.tableData3 = [];
this.currentLineObject = lineObject;
var str = lineObject.fromNode.id + ":" + lineObject.toNode.id;
getRelationsInfoList({
objectValue: str,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (
res.code == 200 &&
res.success == true &&
res.data.rows !== null &&
res.data.totals !== 0
) {
console.log(res);
resData = res.data.rows;
this.total = res.data.total;
let fromNode = lineObject.fromNode;
let toNode = lineObject.toNode;
let relationList = resData;
// debugger
relationList.forEach((i, index) => {
var timeS = this.formatTime(i.first_timestamp);
var timeE = this.formatTime(i.timestamp);
let relationObj = {
lei1: i.objectFromTypeName,
zhi1: i.objectFromValue,
lei2: i.objectToTypeName,
zhi2: i.objectToValue,
objectFromType: i.objectFromType,
objectToType: i.objectToType,
time1: timeS,
time2: timeE,
};
this.$set(this.tableData3, index, relationObj);
});
this.tableShow4 = true;
}
});
setTimeout(() => {
this.tloadingIndex--;
}, 1000);
// let arr = [...this.dataAll.gen, ...this.dataAll.founder123];
// arr = resData
// let obj = arr.find((i) => i.name == toNode.id);
// let relationList = obj.value;
},
//左下角跳转档案
toDAleft(data) {
console.log(data);
if (data.objectFromType == "4255") {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ajda?zjhm=${data.zhi1}`,
"_blank"
);
} else if ((data.objectFromType = "1")) {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ryda?zjhm=${data.zhi1}`,
"_blank"
);
} else if (data.objectToType == "4255") {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ajda?zjhm=${data.zhi2}`,
"_blank"
);
} else if (data.objectToType == "1") {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ryda?zjhm=${data.zhi2}`,
"_blank"
);
}
},
//右上角跳转档案
toDAright(data) {
console.log(data);
if (data.type == "lawcase") {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ajda?zjhm=${data.name}`,
"_blank"
);
} else if ((data.type = "person")) {
window.open(
`http://zhyy.xzxt.xz.cq:8080/#/ryda?zjhm=${data.name}`,
"_blank"
);
}
},
//转换时间
formatTime(date) {
var d = new Date(date);
var td = [d.getFullYear(), d.getMonth() + 1, d.getDate()]
.map((n) => {
n = n.toString();
return n[1] ? n : "0" + n;
})
.join("-");
var tt = [d.getHours(), d.getMinutes(), d.getSeconds()]
.map((n) => {
n = n.toString();
return n[1] ? n : "0" + n;
})
.join(":");
return td + " " + tt;
},
//左键点击节点后
nodeClick(nodeObject, $event) {
let _this = this;
this.clickTimes++;
_this.leftClickObj = nodeObject;
console.log($event.type);
debugger;
//判断节点是否计算过
let id = nodeObject.id;
let boolMath = false;
let boolMathIndex = 0;
_this.defaultCheck.map((item, index) => {
if (id == item.key) {
boolMath = true;
boolMathIndex = index;
}
});
if (
this.clickTimes == 2 &&
this.defaultCheck.length != 0 &&
this.defaultCheck[0].value.length > 0
) {
//双击
this.clickTimes = 0;
if (_this.tableShow == false && _this.tableShow2 == true) {
//算例中心
if (boolMath == true) {
this.defaultCheck[boolMathIndex].value.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
if (this.latestSelectModel && this.latestSelectModel.length > 0) {
this.latestSelectModel.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
}
}
} else if (this.tableShow == true && this.tableShow2 == false) {
//结果列表
if (boolMath == true) {
//计算过
// this.runlist = [ ...this.defaultCheck[boolMathIndex].value]
this.runlist = JSON.parse(
JSON.stringify(this.defaultCheck[boolMathIndex].value)
);
} else {
//没计算过
this.tableSelect = JSON.parse(
JSON.stringify(this.latestSelectModel)
);
this.tableSelect.map((goodss, index) => {
if (goodss.disabledRadio == false) {
_this.tloadingIndex++;
getPersonInfo({
objectType: this.leftClickObj.data.type,
objectValue: this.leftClickObj.id,
modelType: goodss.name,
page: 1,
rows: 5,
xxzjbh: this.xxzjbh,
}).then((res) => {
if (res.code == 200 && res.success == true) {
console.log(res);
if (res.data.rows != null) {
res.data.rows.map((good) => {
good.source = goodss.fuwuName;
});
goodss.page = 1;
// item.total = res.data.total;
this.$set(
this.tableSelect[index],
"total",
res.data.total
);
}
goodss.tableData = res.data.rows;
if (res.data.total !== null) {
goodss.labelName =
goodss.fuwuName + "(" + res.data.total + ")";
} else {
goodss.labelName = goodss.fuwuName + "(0)";
}
this.$nextTick(function () {
goodss.pageShow = true;
});
// if (index == 0) {
this.activeName = this.selectChoice[0].name;
// }
console.log(goodss);
if (
goodss.total &&
goodss.total != null &&
goodss.tableData != null &&
goodss.tableData.length > 0 &&
res.data.rows.length <= 5 &&
res.data.total != 0
) {
goodss.tableData.forEach((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),
nodePhoto:
row.type == "person" &&
row.img &&
row.img != ""
? "data:image/jpg;base64," + row.img
: this.selectIcon(row.type, true),
name: row.name,
type: row.type,
describe: row.describe,
red: row.red,
},
this.nodedata
),
},
];
// debugger
// let textMap = row.value.map((i) => i.text);
// debugger
let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
];
row.link.map((item) => {
linkarr.push({
from: this.leftClickObj.text,
to: item.name,
text: row.value,
});
});
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
this.nodeNameArr.push(row.name);
setTimeout(() => {
seeksRGGraph.graphSetting.layouter.stop();
}, 1500);
}
);
} else {
}
});
}
// _this.mutipleTableShow(nodeObject, "click");
_this.tloadingIndex--;
} else {
goodss.tableData = [];
goodss.labelName = goodss.fuwuName + "(0)";
goodss.toal = 0;
_this.tloadingIndex--;
}
});
} else {
goodss.labelName = goodss.fuwuName;
}
});
_this.runlist = [..._this.tableSelect];
//勾选过的存起来反显
let checkIndex = _this.defaultCheck.findIndex(
(i) => i.key == _this.leftClickObj.id
);
let obj = {
key: _this.leftClickObj.id,
value: _this.tableSelect,
changed: false,
};
if (checkIndex >= 0) {
if (_this.defaultCheck[checkIndex].changed == true) {
obj.changed = true;
} else {
obj.changed = false;
}
_this.$set(_this.defaultCheck, checkIndex, obj);
} else {
this.defaultCheck.push(obj);
}
}
}
} else if (this.clickTimes === 2 && this.defaultCheck.length == 0) {
//无法双击
this.clickTimes = 0;
this.$message.error("请选择根节点模型并计算");
}
setTimeout(function () {
if (_this.clickTimes == 1) {
//单击
debugger;
_this.clickTimes = 0; // 单击清零
_this.leftClickType = "click";
// 触发单击事件...
_this.leftClickObj = nodeObject;
_this.selectNodeName = nodeObject.id;
// _this.mutipleTableShow(nodeObject, "click");
if (_this.tableShow == false && _this.tableShow2 == true) {
//算例中心
if (boolMath == true) {
this.defaultCheck[boolMathIndex].value.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
if (
_this.latestSelectModel &&
_this.latestSelectModel.length > 0
) {
_this.latestSelectModel.forEach((i) => {
_this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
}
}
} else if (_this.tableShow == true && _this.tableShow2 == false) {
//结果列表
if (boolMath == true) {
debugger;
// this.runlist = [ ...this.defaultCheck[boolMathIndex].value]
_this.runlist = JSON.parse(
JSON.stringify(_this.defaultCheck[boolMathIndex].value)
);
} else {
debugger;
_this.tableSelect = JSON.parse(
JSON.stringify(_this.latestSelectModel)
);
_this.tableSelect.map((item) => {
item.disabledRadio = true;
item.tableData = [];
item.labelName = item.fuwuName;
item.total = 0;
});
_this.runlist = [..._this.tableSelect];
// let checkIndex = this.defaultCheck.findIndex(
// (i) => i.key == this.leftClickObj.id
// );
// let obj = {
// key: this.leftClickObj.id,
// value: _this.tableSelect,
// changed: false,
// };
// if (checkIndex >= 0) {
// this.$set(this.defaultCheck, checkIndex, obj);
// } else {
// this.defaultCheck.push(obj);
// }
}
}
}
}, 250);
//之前的代码
// if (this.clickTimes === 2 && this.defaultCheck.length != 0 && this.defaultCheck[0].value.length > 0) {
// _this.loadingIndex++;
// debugger;
// //当点击次数为2
// _this.clickTimes = 0; //记得清零
// _this.leftClickType = "dbclick";
// // 触发双击事件...
// _this.leftClickObj = nodeObject;
// _this.selectNodeName = nodeObject.id;
// //判断是否改过
// var isBreak = false;
// this.defaultCheck.map((item, indexI) => {
// if (item.key == nodeObject.id && item.changed == true) {
// isBreak = true;
// } else if (item.key == nodeObject.id && item.changed == false) {
// }
// })
// debugger
// if (isBreak == false) {
// debugger;
// //找父级
// // this.latestSelectModel.map((item, indexI) => {
// // item.tableData.forEach((good, indexG) => {
// // if (good.tableData != null && good.tableData.length > 0) {
// // good.tableData.map((thirdItem) => {
// // if (thirdItem.name == nodeObject.id) {
// // this.latestSelectModel = item.value;
// // }
// // })
// // }
// // })
// // })
// // // debugger
// // console.log(this.latestSelectModel)
// // var fat = []
// // for (let key in this.fatherSelect) {
// // fat[key] = this.fatherSelect[key]
// // }
// // console.log(fat)
// // var fat = JSON.parse(JSON.stringify(this.fatherSelect))
// // this.runlist = [];
// // _this.runlist.splice(0, _this.runlist.length)
// // _this.runlist = fat
// // this.tableSelect = this.clickTableSelect; toggleRowSelection
// _this.tableSelect = _this.latestSelectModel;
// } else {
// // debugger;
// // _this.mutipleTableShow(nodeObject, "click");
// // this.$refs.mutipleTable.clearSelection();
// _this.tableSelect = [];
// let id = nodeObject.id;
// // let obj = _this.defaultCheck.find((i) => i.key == id);
// _this.defaultCheck.map((item) => {
// if (item.key == id) {
// obj = item;
// }
// })
// // debugger;
// this.tableSelect = obj.value;
// // if (obj && obj.value && obj.value.length > 0) {
// // obj.value.forEach((i) => {
// // _this.$refs.mutipleTable.toggleRowSelection(i, true);
// //
// // });
// // }
// }
//
// // this.g_loading = true;
//
// // debugger;
//
// _this.tableSelect.map((goodss, index) => {
// _this.loadingIndex++;
// getPersonInfo({
// objectType: this.leftClickObj.data.type,
// objectValue: this.leftClickObj.id,
// modelType: goodss.name,
// page: 1,
// rows: 5,
// xxzjbh: this.xxzjbh,
// }).then((res) => {
// if (res.code == 200 && res.success == true) {
// console.log(res)
// if (res.data.rows != null) {
// res.data.rows.map((good) => {
// good.source = goodss.fuwuName
// })
// goodss.page = 1;
// // item.total = res.data.total;
// this.$set(this.tableSelect[index], "total", res.data.total)
// }
// goodss.tableData = res.data.rows;
//
// if (res.data.total !== null) {
// goodss.labelName = goodss.fuwuName + "(" + res.data.total + ")"
// } else {
// goodss.labelName = goodss.fuwuName + "(0)"
// }
// this.$nextTick(function () {
// goodss.pageShow = true;
// })
// if (index == 0) {
// this.activeName = this.selectChoice[0].name
// }
// console.log(goodss)
// if (goodss.total && goodss.total !=null && goodss.tableData !=null && goodss.tableData.length > 0 && res.data.total <= 5 && res.data.total != 0) {
// goodss.tableData.forEach((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),
// nodePhoto: (row.type == 'person' && row.img && row.img != '') ? "data:image/jpg;base64," + row.img : this.selectIcon(row.type, true),
// name: row.name,
// type: row.type,
// describe: row.describe,
// red: row.red,
// },
// this.nodedata
// ),
// },
// ];
// // debugger
// // let textMap = row.value.map((i) => i.text);
// // debugger
// let linkarr = [
// {
// from: this.leftClickObj.text,
// to: row.name,
// // text: textMap.length > 0 ? textMap[0] : "",
// text: row.value,
// },
// ];
// this.$refs.seeksRelationGraph.appendJsonData(
// {
// nodes: nodearr,
// links: linkarr,
// },
// (seeksRGGraph) => {
// this.nodeNameArr.push(row.name);
// setTimeout(() => {
// seeksRGGraph.graphSetting.layouter.stop();
// }, 1500);
// }
// );
// } else {
// }
// })
// }
// _this.mutipleTableShow(nodeObject, "click");
// _this.loadingIndex--;
// } else {
// goodss.tableData = []
// goodss.labelName = goodss.fuwuName + "(0)"
// goodss.toal = 0
// _this.loadingIndex--;
// }
// })
//
// })
// _this.runlist = [..._this.latestSelectModel];
// setTimeout(() => {
// // loading.close()
// // this.g_loading = false
// _this.loadingIndex--;
// }, 2000)
// console.log(_this.runlist)
//
// //勾选过的存起来反显
// let checkIndex = this.defaultCheck.findIndex(
// (i) => i.key == this.leftClickObj.id
// );
// // var boolean = false
// // this.defaultCheck.map((agood) => {
// // if(agood.id == this.leftClickObj.id && agood.changed == true) {
// // boolean == true;
// // } else {}
// // })
// let obj = {
// key: this.leftClickObj.id,
// value: this.tableSelect,
// changed: false,
// };
//
// if (checkIndex >= 0) {
// if (this.defaultCheck[checkIndex].changed == true) {
// obj.changed = true;
// } else {
// obj.changed = false;
// }
// // if (this.defaultCheck[checkIndex].changed == true) {
// // obj.changed = true;
// // } else {
// // obj.changed = false;
// // }
// this.$set(this.defaultCheck, checkIndex, obj);
// } else {
// this.defaultCheck.push(obj);
// }
// _this.tableShow3 = true;
// // _this.tableShow2 = false;
// // _this.tableShow = true;
// this.key2++;
// // this.tableAllData = JSON.parse(JSON.stringify(this.tableData || []));
// // debugger
// // _this.tableShow2 = false;
//
// // this.tableShow = true;
//
// // _this.mutipleTableShow(nodeObject, "dbclick");
// } else if (this.clickTimes === 2 && this.defaultCheck.length == 0) {
// this.clickTimes = 0;
// // debugger
// this.$message.error("请选择根节点模型并计算")
// }
// setTimeout(function () {
// if (_this.clickTimes === 1) {
// _this.clickTimes = 0; // 单击清零
// _this.leftClickType = "click";
// // 触发单击事件...
// // debugger;
// _this.leftClickObj = nodeObject;
// _this.selectNodeName = nodeObject.id;
// _this.mutipleTableShow(nodeObject, "click");
// }
// }, 250);
},
//左键点击后表格变化状况
mutipleTableShow(nodeObject, type) {
// debugger
this.tableShow = false;
this.tableShow2 = true;
let _this = this;
this.$nextTick(() => {
debugger;
_this.$refs.mutipleTable.clearSelection();
this.tableSelect = [];
if (type == "dbclick") {
_this.clickTableSelect.forEach((i) => {
_this.$refs.mutipleTable.toggleRowSelection(i, true);
});
return;
}
// debugger
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);
// });
// } else {
// }
let boolMath = false;
let boolIndex = 0;
_this.defaultCheck.map((item, index) => {
if (item.key == id) {
boolMath = true;
boolIndex = index;
}
});
if (boolMath == true) {
this.defaultCheck[boolIndex].value.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
if (this.latestSelectModel && this.latestSelectModel.length > 0) {
this.latestSelectModel.forEach((i) => {
this.$refs.mutipleTable.toggleRowSelection(i, true);
});
} else {
}
}
});
},
/**
* @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 !important;
}
.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: auto;
position: absolute;
left: 50%;
top: 82px;
transform: translateX(-50%);
}
.serialNumber {
white-space: nowrap;
}
.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%;
> .w100h100 {
border-radius: 50%;
}
}
.c-mini-toolbar {
.c-mb-button[title~="点击开始自动调整布局"] {
display: none;
}
margin-top: $marginTop !important;
border-bottom: #efefef solid 1px;
box-shadow: none;
}
}
}
.select {
border-radius: 50% !important;
border: 2px solid rgb(255, 0, 255) !important;
}
.isSelect {
box-shadow: 0 0 30px #3678fd;
border-radius: 50%;
z-index: 88;
}
.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;
}
}
}
}
.tableBox {
width: 570px;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
padding: 15px;
.buttonBox {
width: 570px;
z-index: 999;
background-color: #fff;
}
.backIcon {
width: 20px;
position: absolute;
left: -30px;
z-index: 999;
top: 108px;
height: 60px;
line-height: 15px;
text-align: center;
cursor: pointer;
color: #ccc;
font-size: 14px;
/*padding-top: 10px;*/
border-right: 22px solid #6791ba;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-left: none;
}
.backIcon :hover {
color: #fff;
/*border-right: 22px solid #409eff;*/
/*border-bottom: 9px solid transparent;*/
/*border-top: 9px solid transparent;*/
/*border-left: none;*/
}
.backIcon2 {
width: 20px;
position: absolute;
left: -30px;
z-index: 999;
top: 188px;
height: 60px;
line-height: 15px;
text-align: center;
cursor: default;
color: #fff;
/*background-color: #6791ba;*/
font-size: 14px;
border-left: none;
border-right: 22px solid #409eff;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
}
> 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;
}
}
.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);
}
}
}
.tableBox2 {
width: 570px;
position: absolute;
right: 0;
top: 0;
z-index: 1000;
padding: 15px;
padding-bottom: 0;
.backIcon {
width: 20px;
position: absolute;
left: -30px;
z-index: 999;
top: 188px;
height: 60px;
line-height: 15px;
text-align: center;
cursor: pointer;
color: #ccc;
/*background-color: #6791ba;*/
font-size: 14px;
border-right: 22px solid #6791ba;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-left: none;
}
.backIcon :hover {
color: #fff;
}
.backIcon2 {
width: 20px;
position: absolute;
left: -30px;
z-index: 999;
top: 108px;
height: 60px;
line-height: 15px;
text-align: center;
cursor: default;
color: #fff;
/*background-color: #6791ba;*/
font-size: 14px;
border-right: 22px solid #409eff;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-left: none;
}
.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;
}
}
.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);
}
}
}
.tableBox3 {
width: 1000px;
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);
}
}
}
.el-table {
/deep/ .tableHeader {
th {
color: #000;
background-color: #c4cbce;
}
}
/deep/ .caret-wrapper {
.ascending {
border-bottom-color: #000;
}
.descending {
border-top-color: #000;
}
}
}
.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;
position: absolute;
top: 18px;
right: 17px;
border-radius: 50%;
i {
font-size: 20px;
color: #fff;
}
}
.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);
}
}
/*/deep/ .el-table__row {*/
/* height: 20px;*/
/*}*/
/deep/ .el-table .el-table__cell {
padding: 5px 0;
}
</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