You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1095 lines
28 KiB
1095 lines
28 KiB
<template>
|
|
<div class="about">
|
|
<HeaderInfo style="height: 5.65vw;float: left;"></HeaderInfo>
|
|
<leftInfo @show="isZhe" style="width: 5vw;position: absolute;top: 5.35vw;position: absolute;z-index:100;"
|
|
:leftNum="3" :zhedie="zhedie"></leftInfo>
|
|
<div v-if="zhedie == 0" @click="this.zhedie = 1"
|
|
style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius: 0 50% 50% 0;z-index: 1000;bottom:45%;left:5vw;cursor: pointer">
|
|
<img src="../assets/img2/close3.png" style="width: 60%;object-fit: contain;">
|
|
</div>
|
|
<div v-if="zhedie == 1" @click="this.zhedie = 0"
|
|
style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius: 0 50% 50% 0;z-index: 1000;bottom:49%;left:0vw;cursor: pointer">
|
|
<img src="../assets/img2/open3.png" style="width: 60%;object-fit: contain;margin-top: 1.8vw;">
|
|
</div>
|
|
<div class="rightBox">
|
|
<div class="graphGround">
|
|
<div class="graphHeader">
|
|
<!-- <div class="gjz">-->
|
|
<!-- <div class="gjzText">关键字:</div>-->
|
|
<!-- <input class="gjzInput" placeholder="请输入关键字" v-model="keywords" />-->
|
|
<!-- <div @click="getInfo2"-->
|
|
<!-- style="width: 4vw;height: 1.5vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height:1.5vw; height: 1.5vw;text-align: center;border-radius:2vw;margin-top: 0.25vw;cursor: pointer;">-->
|
|
<!-- 查询-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<div class="jiedianInfo">
|
|
<img src="../assets/img2/dingwei.png"
|
|
style="width: 2vw;object-fit: contain;position: absolute;z-index: 2000;top: 1vw;right: 2vw;cursor: pointer;"
|
|
@click="opending">
|
|
<div class="selectListInfo" v-if="isDing"
|
|
style="z-index: 2000;
|
|
max-height:35vw;
|
|
border-radius: 1vw;
|
|
background-color: rgba(76,100,233,0.71) ;position:absolute;right: 4vw;top: 2vw;font-size: 0.9vw;overflow-y: scroll;margin-left: 1vw;margin-right: 1vw;">
|
|
<div
|
|
style="font-size: 1.1vw;color: #ffffff;width:130%;background-color: rgba(32,51,162,0.71) ;
|
|
text-align: center;height: 2.2vw;line-height: 2vw;margin-left: -13%;padding-top: 2%;letter-spacing: 3px;">
|
|
图谱快速定位
|
|
</div>
|
|
<el-tree :data="this.data1" :props="defaultProps" class="flow-tree" accordion @node-click="goCenter"
|
|
style="padding: 1.2vw 0;" node-key="id" ref="tree" highlight-current>
|
|
<template #default="{ node }">
|
|
<span class="custom-tree-node" style="display: flex;flex-direction: row;" v-if="node.level == 1">
|
|
<div class="lineInfo" style="width: 0.2vw;height: 0.8vw; box-shadow: #FFFFFF 0px 0px 4px 1px;
|
|
background: rgb(255, 255, 255);display: inline-block;
|
|
margin-top: 0.6vw;margin-right: 0.5vw;"></div>
|
|
<div class="label" style="font-size: 1.1vw;cursor: pointer;line-height: 2vw;">{{ node.label }}</div>
|
|
</span>
|
|
<span class="custom-tree-node" v-if="node.level == 2" style="border-top: none !important;">
|
|
<div class="lineInfo"
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
|
|
</div>
|
|
<div class="label"
|
|
style="font-size: 1vw;cursor: pointer;margin-left: 0.5vw;color: rgb(236,236,236);line-height: 2vw;">
|
|
{{ node.label }}</div>
|
|
</span>
|
|
<span class="custom-tree-node" v-if="node.level == 3">
|
|
<div class="lineInfo"
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
|
|
</div>
|
|
<div class="label"
|
|
style="font-size: 0.9vw;cursor: pointer;margin-left: 1vw;color: rgb(236,236,236);line-height: 2vw;">
|
|
{{ node.label }}</div>
|
|
</span>
|
|
<span class="custom-tree-node" v-if="node.level == 4">
|
|
<div class="lineInfo"
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
|
|
</div>
|
|
<div class="label"
|
|
style="font-size: 0.8vw;cursor: pointer;margin-left: 1.5vw;color: rgb(236,236,236);line-height: 2vw;">
|
|
{{ node.label }}</div>
|
|
</span>
|
|
<span class="custom-tree-node" v-if="node.level == 5">
|
|
<div class="lineInfo"
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
|
|
</div>
|
|
<div class="label"
|
|
style="font-size: 0.7vw;cursor: pointer;margin-left: 2vw;color: rgb(236,236,236);line-height: 2vw;">
|
|
{{ node.label }}</div>
|
|
</span>
|
|
<span class="custom-tree-node" v-if="node.level == 6">
|
|
<div class="lineInfo"
|
|
style="width: 0.15vw;height: 2vw; rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
|
|
</div>
|
|
<div class="label" style="font-size: 0.6vw;cursor: pointer;margin-left: 2.5vw;line-height: 2vw;">{{
|
|
node.label }}</div>
|
|
</span>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="graphContent">
|
|
<div :class="full ? 'full-screen' : 'show-box'">
|
|
<div style="width: 100%;height: 100%;">
|
|
<div class="gContainer">
|
|
<RelationGraph ref="graphRef" :options="testoptions" :on-node-click="onNodeClick" :on-line-click="onLineClick"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background-color: transparent;height: 20%;width: 40%;position: absolute;top: 1vw;right: 0;"></div>
|
|
|
|
<el-drawer v-model="drawer" title="相关文档" direction="rtl" size="30%" :modal="false" :wrapperClosable="false"
|
|
:append-to-body="true" style="position: fixed;right: 0;background-color: rgba(76, 100, 233, 0.71);top: 5.35vw;height: 91%;color: #fff">
|
|
<el-table :data="tableData" style="width: 95%;margin-left: 2.5%;height: 97%; background: transparent;" v-if="drawer">
|
|
<el-table-column prop="title" label="文档名称" style="padding-bottom: 2vh;">
|
|
<template #default="scope">
|
|
<div @click="goArticle(scope.row)" style="cursor: pointer; padding: 8px;">
|
|
{{scope.row.title}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-drawer>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import RelationGraph, { RGJsonData, RGOptions } from 'relation-graph-vue3';
|
|
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
|
|
import { config } from '@/assets/defaultConfig.js'
|
|
import { demoData } from '@/assets/demo2.js'
|
|
import HeaderInfo from "@/components/UseAll/headerInfo.vue";
|
|
import leftInfo from "@/components/UseAll/leftInfo.vue";
|
|
import {getAllTitle, getDocInfo, getTitleBySamll} from "@/api/api/doc";
|
|
import {getDocInfoBylinkIds, getDomainGraphTest, getKeyWorlds, getpoinAll, getpoinByName} from "@/api/api/graph";
|
|
import { Picture } from "@element-plus/icons-vue";
|
|
import { selectAticleByRelation } from '@/api/api/article'
|
|
|
|
export default {
|
|
components: {
|
|
leftInfo,
|
|
HeaderInfo,
|
|
Picture,
|
|
RelationGraph
|
|
},
|
|
data() {
|
|
return {
|
|
getpoinName :"模糊综合评价方法",
|
|
// testoptions: {
|
|
// debug: true,
|
|
// backgrounImageNoRepeat: true,
|
|
// moveToCenterWhenRefresh: true,
|
|
// zoomToFitWhenRefresh: true,
|
|
// useAnimationWhenRefresh: false,
|
|
// defaultLineColor: 'rgba(255, 255, 255, 0.6)',
|
|
// defaultNodeColor: 'rgba(255, 255, 255, 0.6)',
|
|
// defaultNodeBorderWidth: 1,
|
|
// defaultNodeBorderColor: 'rgba(255, 255, 255, 0.3)',
|
|
// defaultNodeFontColor: '#1b7702',
|
|
// defaultNodeShape: 0,
|
|
// defaultNodeWidth: 100,
|
|
// defaultNodeHeight: 100,
|
|
// toolBarDirection: 'h',
|
|
// toolBarPositionH: 'right',
|
|
// toolBarPositionV: 'bottom',
|
|
// defaultPloyLineRadius: 300,
|
|
// defaultLineShape: 1,
|
|
// layout: {
|
|
// layoutName: 'force',
|
|
// from: 'center',
|
|
// maxLayoutTimes: 100, // 设置为0表示不自动布局
|
|
// // 或者调整力导向布局参数使其更稳定
|
|
// force_node_repulsion: 7000, // 增加节点斥力
|
|
// force_line_elastic: 0.01, // 减小线条弹性
|
|
// force_gravity_center: 0.01, // 减小重力中心
|
|
// force_no_overlap: 0.5, // 防止重叠
|
|
// force_is_3d: false,
|
|
// force_center: [0, 0],
|
|
// force_auto_restart: false // 禁止自动重新启动布局
|
|
// }
|
|
// },
|
|
testoptions: {
|
|
debug: true,
|
|
backgrounImageNoRepeat: true,
|
|
moveToCenterWhenRefresh: true,
|
|
zoomToFitWhenRefresh: true,
|
|
useAnimationWhenRefresh: false,
|
|
|
|
defaultLineColor: 'rgba(255, 255, 255, 0.6)',
|
|
defaultNodeColor: 'rgba(255, 255, 255, 0.6)',
|
|
defaultNodeBorderWidth: 1,
|
|
defaultNodeBorderColor: 'rgba(255, 255, 255, 0.3)',
|
|
defaultNodeFontColor: '#fff',
|
|
defaultNodeShape: 0,
|
|
defaultNodeWidth: 100,
|
|
defaultNodeHeight: 100,
|
|
|
|
toolBarDirection: 'h',
|
|
toolBarPositionH: 'right',
|
|
toolBarPositionV: 'bottom',
|
|
|
|
// ✅ 正确设置：使用贝塞尔曲线
|
|
defaultLineShape: 1, // 2 = 贝塞尔曲线（Bezier），3 = 平滑曲线
|
|
|
|
layout: {
|
|
layoutName: 'force',
|
|
from: 'center',
|
|
maxLayoutTimes: 300,
|
|
force_node_repulsion: 10000,
|
|
force_line_elastic: 0.05,
|
|
force_gravity_center: 0.05,
|
|
force_no_overlap: 1.0,
|
|
force_is_3d: false,
|
|
force_center: [0, 0],
|
|
force_auto_restart: false
|
|
}
|
|
},
|
|
direction: "rtl",
|
|
// visGraph实例对象
|
|
visGraph: null,
|
|
visLayout: null,//布局对象
|
|
layoutLoopName: null,//布局循环对象
|
|
// visGraph可视化交互配置
|
|
config,
|
|
//示例数据
|
|
demoData,
|
|
circleBgImage: require('@/assets/images/circle.png'),//节点背景图片
|
|
// visGraph创建节点和连线数据集
|
|
graphData: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
nodeList: [],
|
|
linkList: [],
|
|
graphLegend: [
|
|
//{type:'图例一',color:'rgb(233,120,120)',show:true}
|
|
],//图例数组，根据数据的节点类型生成
|
|
knowlegeInfo: {//图谱信息，需要服务端查询后赋值
|
|
name: '公司网络图谱',
|
|
tag: '公司',
|
|
desc: '某某公司图谱信息',
|
|
nodeNum: 7,
|
|
relationNum: 9,
|
|
permission: '私有'
|
|
},
|
|
properShow: false,//属性展示配置
|
|
tipLayer: { //提示层配置
|
|
show: false, //是否显示提示层
|
|
header: '提示信息', // 提示表头
|
|
data: [] //提示内部的数据
|
|
},
|
|
graphOptions: {
|
|
debug: false,
|
|
lineUseTextPath: true,
|
|
layout: {
|
|
layoutName: 'tree',
|
|
from: 'top',
|
|
levelDistance: 200, // 层与层之间的垂直间距
|
|
nodeDistance: 150, // 同一层级的水平间距
|
|
min_per_width: 120, // 最小水平间距（固定值）
|
|
max_per_width: 120, // 最大水平间距（固定值，强制均匀分布）
|
|
min_per_height: 300, // 最小垂直间距（固定值）
|
|
max_per_height: 300, // 最大垂直间距（固定值，强制对齐）
|
|
disableDrag: true, // 禁止拖动节点（可选）
|
|
align: 'center', // 居中排列
|
|
fixed: false, // 允许自动布局调整
|
|
},
|
|
defaultlineWidth: 2,
|
|
defaultLineShape: 1,
|
|
defaultNodeShape: 0,
|
|
defaultLineFontSize: 80,
|
|
defaultNodeBorderWidth: 0,
|
|
defaultNodeFontColor: '#ffffff',
|
|
defaultLineColor: 'rgb(255,255,255)',
|
|
defaultNodeColor: 'rgba(0, 206, 209, 1)',
|
|
lineLengths: 100,
|
|
defaultNodeFontSize: '20px', // 全局默认字体大小
|
|
toolBarPositionH: 'right',
|
|
toolBarPositionV: 'top',
|
|
disableNodeClickEffect: true,
|
|
},
|
|
currentNode: {}, // 选中的节点对象
|
|
attrbutes: [],//选中节点或连线的属性列表
|
|
currentLink: {},// 选中的连线对象
|
|
//节点详细信息弹框
|
|
showNodeInfoDialog: false,
|
|
//关系连线信息弹层
|
|
showLinkInfoDialog: false,
|
|
//属性节点详细弹层控制开关
|
|
showProperNodeInfo: false,
|
|
properNode: {},//属性节点
|
|
currentLayoutType: 'frDirect',//当前布局类型，用于区分是否可以拖动
|
|
loading: true,
|
|
|
|
|
|
data: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
data1: [
|
|
{
|
|
docTitle: '模型',
|
|
level:1,
|
|
level2: [
|
|
{docTitle: '演化博弈推演决策模型'},
|
|
{docTitle: '模糊综合评价方法'},
|
|
{docTitle: '数据包络评估方法'},
|
|
{docTitle: '湿热指数计算方法'}
|
|
]
|
|
},
|
|
{
|
|
docTitle: '装备',
|
|
level:1,
|
|
level2: [
|
|
{docTitle: ''}
|
|
]
|
|
}
|
|
],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'docTitle',
|
|
level: 'titleLevel',
|
|
docLevel: 'docLevel',
|
|
},
|
|
names: ['0级', '一级', '二级', '三级', '四级', '五级', '六级'],
|
|
labels: ['0', '1', '2', '3', '4', '5', '6'],
|
|
linkTypes: ['info', 'type', 'locate', 'export'],
|
|
zhedie: 0,
|
|
isLoginShow: false,
|
|
jiedianType: 0,
|
|
totalNum: 0,
|
|
selectInfo: "",
|
|
viewerData: {
|
|
total: 25,
|
|
limit: 10,
|
|
skip: 0,
|
|
links: {
|
|
previous: undefined,
|
|
next: function () {
|
|
},
|
|
},
|
|
},
|
|
gg: [],
|
|
graphNodes: [],
|
|
graphEdges: [],
|
|
currentNodeId: '', //当期选中节点id
|
|
vertexData: '', //节点详细数据
|
|
full: false, //是否全屏,
|
|
simpleData: {},
|
|
keywords: '',
|
|
userNameInfo: '',
|
|
docList: [],
|
|
drawer: false,
|
|
tableData: [],
|
|
isDing: false,
|
|
|
|
// graphData:[],
|
|
nodes: [],
|
|
links: [],
|
|
|
|
width: 2000,
|
|
height: 1000,
|
|
svg: null,
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
handleNodeClick(node) {
|
|
console.log(node);
|
|
},
|
|
goCenter(node) {
|
|
if (node.level == 1)
|
|
return
|
|
this.getpoinName = node.docTitle
|
|
this.getPointData()
|
|
},
|
|
opending() {
|
|
if (this.isDing == true) {
|
|
this.isDing = !this.isDing;
|
|
} else {
|
|
this.isDing = !this.isDing;
|
|
}
|
|
},
|
|
isZhe(zhedie) {
|
|
this.zhedie = zhedie;
|
|
},
|
|
onLineClick(lineObject, linkObject, event) {
|
|
getDocInfoBylinkIds(linkObject.relations[0].data.uuids).then((res)=>{
|
|
this.drawer = true
|
|
this.tableData = res
|
|
})
|
|
|
|
},
|
|
onNodeClick(nodeObject, $event) {
|
|
this.$router.push({
|
|
name: 'pointInfo', // 对应路由中定义的 name
|
|
params: { id: nodeObject.id }
|
|
})
|
|
},
|
|
goArticle(row){
|
|
console.log(row.id)
|
|
this.$router.push({
|
|
path: '/pointArticleInfo',
|
|
query: {
|
|
id: row.id
|
|
}
|
|
})
|
|
},
|
|
getColor(type){
|
|
let res = "rgb(227,203,0)"
|
|
if (type=="author"){
|
|
res = "#ff8c00"
|
|
}
|
|
if (type=="agency"){
|
|
res = "rgb(64, 158, 255)"
|
|
}
|
|
if (type=="keyword"){
|
|
res = "#ffd602"
|
|
}
|
|
return res
|
|
},
|
|
getPointData(){
|
|
getpoinByName(this.getpoinName).then((res) => {
|
|
let nodes = [];
|
|
let links = [];
|
|
|
|
// Step 1: 统计每个节点的 totalNum（所有关联边的 data.num 之和）
|
|
const totalNumMap = {}; // { nodeId: totalNum }
|
|
console.log(res.links)
|
|
res.links.forEach(link => {
|
|
const from = link.from;
|
|
const to = link.to;
|
|
const num = link.num || 0; // 安全取值
|
|
console.log(num)
|
|
|
|
// 无向图：from 和 to 都累加 num
|
|
totalNumMap[from] = (totalNumMap[from] || 0) + num;
|
|
totalNumMap[to] = (totalNumMap[to] || 0) + num;
|
|
});
|
|
|
|
// 确保孤立节点也有默认值（避免 undefined）
|
|
res.nodes.forEach(node => {
|
|
if (!totalNumMap[node.id]) {
|
|
totalNumMap[node.id] = 0;
|
|
}
|
|
});
|
|
|
|
// Step 2: 生成节点，宽高根据 totalNum 动态计算
|
|
for (let i = 0; i < res.nodes.length; i++) {
|
|
const node = res.nodes[i];
|
|
|
|
// 跳过关键词节点且 text 不匹配的情况
|
|
if (node.type === "keyword" && node.text !== this.getpoinName) {
|
|
continue;
|
|
}
|
|
|
|
// 获取该节点的总 num 值
|
|
const totalNum = totalNumMap[node.id];
|
|
|
|
// 根据 totalNum 计算尺寸（可调参数）
|
|
const baseSize = 120; // 最小尺寸
|
|
const sizePerNum = 40; // 每单位 num 增加的尺寸
|
|
const maxSize = 300; // 最大尺寸限制
|
|
|
|
let width = baseSize + sizePerNum * totalNum;
|
|
width = Math.min(width, maxSize); // 限制最大值
|
|
const height = width; // 保持正方形
|
|
|
|
const t_data = {
|
|
id: node.id,
|
|
text: node.text,
|
|
width: width,
|
|
height: height,
|
|
color: this.getColor(node.type),
|
|
fontColor: '#fff',
|
|
styleClass:"nodeClass"
|
|
};
|
|
|
|
nodes.push(t_data);
|
|
}
|
|
|
|
// Step 3: 正常生成边（保持不变）
|
|
for (let i = 0; i < res.links.length; i++) {
|
|
const link = res.links[i];
|
|
const t_line = {
|
|
from: link.from,
|
|
to: link.to,
|
|
text: link.text,
|
|
data: {
|
|
uuids: link.uuids,
|
|
num: link.num
|
|
}
|
|
};
|
|
links.push(t_line);
|
|
}
|
|
|
|
|
|
|
|
var data = {
|
|
nodes:nodes,
|
|
links:links
|
|
}
|
|
|
|
this.$refs.graphRef.setJsonData(data);
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getPointData()
|
|
getTitleBySamll().then((res)=>{
|
|
let data = res
|
|
data.mxMap["level"] = 1
|
|
data.mxMap["docTitle"] = data.mxMap["name"]
|
|
data.zbMap["level"] = 1
|
|
data.zbMap["docTitle"] = data.zbMap["name"]
|
|
data.zhibMap["level"] = 1
|
|
data.zhibMap["docTitle"] = data.zhibMap["name"]
|
|
this.data1 = []
|
|
this.data1.push(data.mxMap)
|
|
this.data1.push(data.zbMap)
|
|
this.data1.push(data.zhibMap)
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.nodeClass{
|
|
font-size: 30px;
|
|
}
|
|
/*****页面主要布局样式定义******/
|
|
.graph-nav {
|
|
height: 80px;
|
|
background-color: #fff;
|
|
line-height: 26px;
|
|
font-size: 13px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.graph-area {
|
|
position: relative;
|
|
height: calc(100% - 105px);
|
|
padding: 0;
|
|
background-color: #fafafa;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
/******工具栏*******/
|
|
.toolbar {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
background: #efefef;
|
|
}
|
|
|
|
.toolbar .toolbar-item {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #888;
|
|
border-bottom: 1px solid #ddd;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toolbar .toolbar-item:hover {
|
|
color: deepskyblue;
|
|
}
|
|
|
|
/*******图例区域样式定义*****/
|
|
.legend-wrap {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.legend-wrap>.legend-item {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.legend-item>.item-dot {
|
|
float: left;
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 10px;
|
|
background-color: rgb(210, 210, 210);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.legend-item>.item-label {
|
|
display: inline-block;
|
|
float: left;
|
|
margin-left: 5px;
|
|
max-width: 120px;
|
|
}
|
|
|
|
/*****节点弹出鼠标提示层样式*****/
|
|
.tip-wrap {
|
|
position: absolute;
|
|
width: 350px;
|
|
height: auto;
|
|
min-height: 150px;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 10px #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tip-wrap>.tip-header {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.tip-wrap>.tip-body {
|
|
padding: 0 10px 10px;
|
|
}
|
|
|
|
/*****右键菜单样式******/
|
|
.right-menu-layer {
|
|
position: absolute;
|
|
width: 100px;
|
|
z-index: 5;
|
|
display: none;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: #fafafa;
|
|
border: 1px solid #e1e2e2;
|
|
box-shadow: 0 0 5px #ddd;
|
|
padding: 5px 3px;
|
|
}
|
|
|
|
.right-menu-layer button {
|
|
display: block;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
background: transparent;
|
|
border: none;
|
|
color: #444;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.right-menu-layer button>i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.right-menu-layer button:hover {
|
|
color: slateblue;
|
|
}
|
|
|
|
.right-menu-layer button:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.box-card {
|
|
box-shadow: 0 0 3px #d4c8c8;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.gContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 45vw;
|
|
}
|
|
|
|
.about {
|
|
width: 100%;
|
|
height: 100%;
|
|
/*background-image: url("../assets/img1/graphback.jpg");*/
|
|
/* 背景图垂直、水平均居中 */
|
|
background-position: center center;
|
|
/* 背景图不平铺 */
|
|
background-repeat: no-repeat;
|
|
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
|
|
background-attachment: fixed;
|
|
/* 让背景图基于容器大小伸缩 */
|
|
background-size: cover;
|
|
/* 设置背景颜色，背景图加载过程中会显示背景色 */
|
|
}
|
|
|
|
|
|
.rightBox {
|
|
width: 100%;
|
|
height: 95%;
|
|
top: 5.35vw;
|
|
position: absolute;
|
|
background-color: #2d3562;
|
|
}
|
|
|
|
|
|
.graphGround {
|
|
width: 100%;
|
|
height: 100%;
|
|
/*background-color: #0AB7FD;*/
|
|
border-radius: 2vw;
|
|
}
|
|
|
|
.graphHeader {
|
|
/*float: left;*/
|
|
width: 95%;
|
|
height: 5%;
|
|
background-color: transparent;
|
|
margin-left: 6vw;
|
|
margin-top: 0.5vw;
|
|
/*border-radius: 2vw 2vw 0 0;*/
|
|
}
|
|
|
|
.graphHeader1 {
|
|
/*float: left;*/
|
|
width: 90%;
|
|
height: 5%;
|
|
background-color: transparent;
|
|
margin-left: 1.5vw;
|
|
margin-top: 0.5vw;
|
|
/*border-radius: 2vw 2vw 0 0;*/
|
|
}
|
|
|
|
.graphContent {
|
|
width: 100%;
|
|
height: 94%;
|
|
background: transparent;
|
|
/* border: 1px solid #04538e; */
|
|
position: relative;
|
|
margin-top: 0%;
|
|
}
|
|
|
|
|
|
.gjz {
|
|
width: 25%;
|
|
height: 2vw;
|
|
float: left;
|
|
margin-right: 20%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.gjzText {
|
|
float: left;
|
|
font-size: 1vw;
|
|
height: 100%;
|
|
line-height: 2vw;
|
|
color: #ffffff;
|
|
font-family: '微软雅黑';
|
|
letter-spacing: 0.1vw;
|
|
}
|
|
|
|
.gjzInput {
|
|
width: 60%;
|
|
height: 1.6vw;
|
|
border-radius: 2vw;
|
|
border: #ffffff 1px solid;
|
|
background: transparent;
|
|
text-indent: 4px;
|
|
color: #ffffff;
|
|
font-size: 0.9vw;
|
|
margin: 0.2vw 0;
|
|
}
|
|
|
|
.jiedianInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
.jiedian {
|
|
width: 15vw;
|
|
height: 100%;
|
|
float: left;
|
|
margin-left: 26vw;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.jiedian1 {
|
|
width: 15vw;
|
|
height: 100%;
|
|
float: left;
|
|
margin-left: 32vw;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.jiedianText {
|
|
float: left;
|
|
font-size: 1.2vw;
|
|
color: #ffffff;
|
|
font-family: '微软雅黑';
|
|
margin-right: 8%;
|
|
letter-spacing: 0.1vw;
|
|
}
|
|
|
|
select {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.jiedianList {
|
|
width: 8vw;
|
|
height: 75%;
|
|
margin-top: 1.5%;
|
|
/*box-shadow: rgba(92, 228, 229, 0.31) 1px 1px 8px 0px;*/
|
|
border-radius: 2vw;
|
|
border: #ffffff 1px solid;
|
|
background: transparent;
|
|
outline: none;
|
|
/* 鼠标移上，变小手 */
|
|
cursor: pointer;
|
|
float: left;
|
|
/* 清除默认的箭头样式 */
|
|
}
|
|
|
|
.jiedianNum {
|
|
height: 1.5vw;
|
|
width: 30%;
|
|
margin-left: 1%;
|
|
border: none;
|
|
border-radius: 2vw;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
text-indent: 2px;
|
|
}
|
|
|
|
/*.jiansuo {*/
|
|
/* width: 7%;*/
|
|
/* height: 80%;*/
|
|
/* line-height: 1.8vw;*/
|
|
/* background-color: transparent;*/
|
|
/* float: right;*/
|
|
/* margin-top: 0.2%;*/
|
|
/* margin-right: 1%;*/
|
|
/* border-radius: 2vw;*/
|
|
/* text-align: center;*/
|
|
/* color: #ffffff;*/
|
|
/* border: #ffffff 1px solid;*/
|
|
/* font-size: 1vw;*/
|
|
/*}*/
|
|
|
|
.custom-menu {
|
|
position: absolute;
|
|
padding: 5px 0px;
|
|
background-color: rgba(84, 92, 100, 0.8);
|
|
top: 100px;
|
|
left: 100px;
|
|
border-radius: 5px;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.icon1 {
|
|
margin-left: 45%;
|
|
;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.icon2 {
|
|
margin-left: 45%;
|
|
cursor: pointer;
|
|
font-size: 2px;
|
|
color: #ffffff;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.custom-menu div {
|
|
padding: 5px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-menu div span {
|
|
font-family: '微软雅黑';
|
|
font-size: 12px;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.custom-menu div span:hover {
|
|
cursor: pointer;
|
|
color: orange;
|
|
}
|
|
|
|
.loadPng {
|
|
position: absolute;
|
|
right: 3vw;
|
|
top: 1vw;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
font-size: 1.5vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
loadPng:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.screenPng {
|
|
position: absolute;
|
|
right: 1vw;
|
|
top: 2vh;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
font-size: 1.5vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.screenPng:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.show-box {
|
|
position: relative;
|
|
background: transparent;
|
|
/*border: 1px solid #04538e;*/
|
|
border-radius: 5px;
|
|
height: calc(100%);
|
|
/*border-radius: 0 0 2vw 2vw;*/
|
|
}
|
|
|
|
.full-screen {
|
|
position: fixed;
|
|
background: #2d3562;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.other {
|
|
width: 2vw;
|
|
height: 3vw;
|
|
z-index: 100;
|
|
bottom: 4vw;
|
|
position: absolute;
|
|
/*background-color: red;*/
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.rel-node-checked {
|
|
transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
|
|
box-shadow: 0 0 20px 15px #C0FFF9FF !important;
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
font-size: 1vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 12vw;
|
|
height: 2vw;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style>
|
|
.rel-node-checked {
|
|
transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
|
|
box-shadow: 0 0 20px 15px #C0FFF9FF !important;
|
|
}
|
|
|
|
.el-tree-node__content:hover {
|
|
background: rgba(255, 255, 255, 0.21);
|
|
font-weight: 550;
|
|
|
|
.lineInfo {
|
|
background: #0012ff !important;
|
|
}
|
|
}
|
|
|
|
.el-tree--highlight-current {
|
|
.el-tree-node.is-current>.el-tree-node__content {
|
|
background-color: rgba(255, 255, 255, 0.21);
|
|
color: #fff;
|
|
|
|
.lineInfo {
|
|
background: #0012ff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tree-node__content {
|
|
color: #ffffff;
|
|
height: 2vw !important;
|
|
padding-left: 2vw !important;
|
|
padding-right: 2vw !important;
|
|
|
|
}
|
|
|
|
.el-tree-node {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-tree-node__children {
|
|
overflow: visible !important
|
|
}
|
|
|
|
.el-tree-node__expand-icon {
|
|
position: absolute !important;
|
|
right: 10% !important;
|
|
width: 1vw;
|
|
height: 1vw;
|
|
}
|
|
|
|
.el-tree-node is-expanded is-focusable .el-tree-node__label {
|
|
padding-left: 15px !important;
|
|
}
|
|
|
|
.el-tree-node__expand-icon {
|
|
margin-top: 5px;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.el-tree-node__expand-icon.is-leaf {
|
|
display: none;
|
|
}
|
|
|
|
/* 三角图标 展开 */
|
|
.el-tree-node__expand-icon.expanded {
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.label {
|
|
font-size: 1vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 12vw;
|
|
height: 2vw;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* .gContainer :deep(.relation-graph) :deep(.rel-map) {
|
|
background-color: #2d3562 !important;
|
|
} */
|
|
|
|
.gContainer .relation-graph .rel-map,
|
|
.relation-graph .rel-map,
|
|
.rel-map {
|
|
background-color: #2d3562 !important;
|
|
}
|
|
|
|
.el-drawer__title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 90%;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-drawer__close-btn {
|
|
width: 1.5vw;
|
|
}
|
|
|
|
.el-drawer__header {
|
|
display: flex;
|
|
}
|
|
|
|
.el-table__header {
|
|
width: 100%;
|
|
}
|
|
|
|
td{
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
tr {
|
|
margin-bottom: 2vh;
|
|
}
|
|
.el-tree--highlight-current {
|
|
background: no-repeat;
|
|
}
|
|
</style>
|
|
|