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.
1238 lines
36 KiB
1238 lines
36 KiB
<template>
|
|
<div class="knowledge-graph-container">
|
|
<Menu :initial-active="4"/>
|
|
|
|
<div class="control-panel">
|
|
<div class="panel-header-container">
|
|
<div class="panel-header">
|
|
<span class="header-title custom-title-style">图谱样式控制</span>
|
|
<i class="el-icon-setting setting-icon" style="color: #94a3b8; cursor: pointer;"></i>
|
|
</div>
|
|
<div class="header-line"></div>
|
|
</div>
|
|
|
|
<div class="tag-filters">
|
|
<div
|
|
v-for="tag in ['疾病','药品','检查','症状','其他']"
|
|
:key="tag"
|
|
class="tag-pill"
|
|
:class="{ 'is-active': activeTags === tag }"
|
|
@click="handleTagClick(tag)"
|
|
>
|
|
{{ tag }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">节点控制</div>
|
|
|
|
<div class="form-group-flex">
|
|
<label class="checkbox-label">显示节点标签</label>
|
|
<input v-model="nodeShowLabel" type="checkbox" class="theme-checkbox"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>字体名称:</label>
|
|
<select v-model="nodeFontFamily">
|
|
<option value="Microsoft YaHei, sans-serif">微软雅黑</option>
|
|
<option value="SimSun, serif">宋体（SimSun）</option>
|
|
<option value="SimHei, sans-serif">黑体（SimHei）</option>
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>字体大小:</label>
|
|
<div class="slider-wrapper">
|
|
<input v-model.number="nodeFontSize" type="range" min="10" max="24" step="1" class="theme-slider"/>
|
|
<span class="val-text-black">{{ nodeFontSize }}px</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-picker-item">
|
|
<label>字体颜色:</label>
|
|
<div class="color-picker-border">
|
|
<input v-model="nodeFontColor" type="color" class="square-picker"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>图形:</label>
|
|
<select v-model="nodeShape">
|
|
<option value="circle">圆形</option>
|
|
<option value="diamond">菱形</option>
|
|
<option value="triangle">三角形</option>
|
|
<option value="rect">矩形</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>尺寸:</label>
|
|
<input
|
|
:value="nodeSize"
|
|
type="number"
|
|
placeholder="30-100"
|
|
@blur="validateNodeSize($event)"
|
|
@keyup.enter="$event.target.blur()"
|
|
/>
|
|
</div>
|
|
|
|
<div class="color-picker-item">
|
|
<label>填充颜色:</label>
|
|
<div class="color-picker-border">
|
|
<input v-model="nodeFill" type="color" class="square-picker"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-picker-item">
|
|
<label>边框颜色:</label>
|
|
<div class="color-picker-border">
|
|
<input v-model="nodeStroke" type="color" class="square-picker"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>边框尺寸:</label>
|
|
<input
|
|
:value="nodeLineWidth"
|
|
type="number"
|
|
placeholder="1-5"
|
|
@blur="validateNodeLineWidth($event)"
|
|
@keyup.enter="$event.target.blur()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">连边控制</div>
|
|
|
|
<div class="form-group-flex">
|
|
<label class="checkbox-label">显示连边标签</label>
|
|
<input v-model="edgeShowLabel" type="checkbox" class="theme-checkbox"/>
|
|
</div>
|
|
<div class="form-group-flex">
|
|
<label class="checkbox-label">显示端点箭头</label>
|
|
<input v-model="edgeEndArrow" type="checkbox" class="theme-checkbox"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>字体名称:</label>
|
|
<select v-model="edgeFontFamily">
|
|
<option value="Microsoft YaHei, sans-serif">微软雅黑</option>
|
|
<option value="SimSun, serif">宋体</option>
|
|
<option value="SimHei, sans-serif">黑体</option>
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>字体大小:</label>
|
|
<div class="slider-wrapper">
|
|
<input v-model.number="edgeFontSize" type="range" min="8" max="16" step="1" class="theme-slider"/>
|
|
<span class="val-text-black">{{ edgeFontSize }}px</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-picker-item">
|
|
<label>字体颜色:</label>
|
|
<div class="color-picker-border">
|
|
<input v-model="edgeFontColor" type="color" class="square-picker"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>连边类型:</label>
|
|
<select v-model="edgeType">
|
|
<option value="line">直线</option>
|
|
<option value="polyline">折线</option>
|
|
<option value="cubic">贝塞尔曲线</option>
|
|
<option value="quadratic">二次贝塞尔曲线</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>线粗细:</label>
|
|
<input
|
|
:value="edgeLineWidth"
|
|
type="number"
|
|
placeholder="1-5"
|
|
@blur="validateEdgeLineWidth($event)"
|
|
@keyup.enter="$event.target.blur()"
|
|
/>
|
|
</div>
|
|
|
|
<div class="color-picker-item">
|
|
<label>线条颜色:</label>
|
|
<div class="color-picker-border">
|
|
<input v-model="edgeStroke" type="color" class="square-picker"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-footer">
|
|
<button class="btn-confirm-save" @click="handleSaveClick">保存当前配置</button>
|
|
<button class="btn-reset-style" @click="resetStyle">重置样式</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref="graphContainer" class="graph-container" id="container"></div>
|
|
|
|
<div class="config-list-panel">
|
|
<div class="panel-header-container">
|
|
<div class="panel-header">
|
|
<span class="header-title custom-title-style">图谱方案管理</span>
|
|
<div class="header-actions">
|
|
<i class="el-icon-refresh refresh-icon" title="刷新列表" @click="fetchConfigs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="header-line"></div>
|
|
</div>
|
|
|
|
<div class="config-list">
|
|
<div v-if="styleGroups.length === 0" class="empty-text">暂无保存的方案</div>
|
|
|
|
<el-collapse v-model="activeCollapseNames">
|
|
<el-collapse-item v-for="group in styleGroups" :key="group.id" :name="group.id">
|
|
<template #title>
|
|
<div class="group-header-slot">
|
|
<input type="checkbox" :value="group.id" v-model="checkedGroupIds" @click.stop class="config-checkbox"
|
|
style="margin-right: 8px;"/>
|
|
<span class="group-name-text">
|
|
{{ group.group_name }}
|
|
<span v-if="isGroupFullyApplied(group)" style="color: #1559f3; font-size: 10px; margin-left: 5px;">(已应用全案)</span>
|
|
</span>
|
|
|
|
<el-button
|
|
v-if="!isGroupFullyApplied(group)"
|
|
size="small"
|
|
type="primary"
|
|
plain
|
|
@click.stop="applyWholeGroup(group)">应用全案
|
|
</el-button>
|
|
<el-button
|
|
v-else
|
|
size="small"
|
|
type="info"
|
|
plain
|
|
@click.stop="cancelWholeGroup(group)">取消全案
|
|
</el-button>
|
|
|
|
<i class="el-icon-delete group-del" @click.stop="deleteGroup(group.id)"></i>
|
|
</div>
|
|
</template>
|
|
|
|
<div
|
|
v-for="item in group.configs"
|
|
:key="item.id"
|
|
class="config-card"
|
|
:class="{
|
|
'card-using': usingConfigIds.includes(item.id),
|
|
'card-checked': checkedConfigIds.includes(item.id)
|
|
}"
|
|
@click="toggleApplyConfig(item)"
|
|
>
|
|
<div class="card-left">
|
|
<div class="checkbox-wrapper">
|
|
<input type="checkbox" :value="item.id" v-model="checkedConfigIds" @click.stop
|
|
class="config-checkbox"/>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-title-row">
|
|
<span class="card-name">{{ item.canvas_name }}</span>
|
|
<span v-if="usingConfigIds.includes(item.id)" class="status-badge">已应用</span>
|
|
</div>
|
|
<span class="card-tag">标签: {{ item.current_label }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<i class="el-icon-delete delete-icon" @click.stop="deleteSingleConfig(item.id)"></i>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
|
|
<div class="batch-actions-fixed">
|
|
<div class="selection-info" v-if="checkedConfigIds.length > 0 || checkedGroupIds.length > 0">
|
|
已选中 {{ checkedConfigIds.length }} 项配置 / {{ checkedGroupIds.length }} 个方案
|
|
</div>
|
|
<div class="batch-button-group">
|
|
<button class="btn-batch-delete-final"
|
|
:disabled="checkedConfigIds.length === 0 && checkedGroupIds.length === 0"
|
|
@click="handleUnifiedBatchDelete">批量删除所选
|
|
</button>
|
|
<button v-if="checkedConfigIds.length > 0 || checkedGroupIds.length > 0" class="btn-clear-selection"
|
|
@click="clearSelection">清空已选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog v-model="saveDialogVisible" title="保存样式至方案" width="400px">
|
|
<el-form label-width="80px">
|
|
<el-form-item label="所属方案">
|
|
<el-select
|
|
v-model="saveForm.group_name"
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
placeholder="请选择或输入新方案名"
|
|
style="width: 100%"
|
|
>
|
|
<el-option v-for="g in existingGroups" :key="g.id" :label="g.group_name" :value="g.group_name"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="配置名称">
|
|
<el-input v-model="saveForm.canvas_name" placeholder="请输入配置名称"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="saveDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="confirmSave">确定保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {Graph} from '@antv/g6';
|
|
import Menu from "@/components/Menu.vue";
|
|
import {
|
|
saveGraphStyle,
|
|
getGroupedGraphStyleList,
|
|
getGraphStyleGroups,
|
|
deleteGraphStyle,
|
|
batchDeleteGraphStyle,
|
|
deleteGraphStyleGroup
|
|
} from '@/api/style';
|
|
import {ElMessageBox, ElMessage} from 'element-plus';
|
|
import {markRaw} from 'vue';
|
|
|
|
const tagToLabelMap = {
|
|
'疾病': 'Disease', '症状': 'Symptom', '病因': 'Cause', '药品': 'Drug', '科室': 'Department', '检查': 'Check','其他':'Other'
|
|
};
|
|
|
|
const INITIAL_FILL_MAP = {
|
|
'Disease': '#EF4444', 'Drug': '#91cc75', 'Symptom': '#fac858', 'Check': '#336eee',
|
|
'Cause': '#59d1d4', 'Department': '#59d1d4', 'Other': '#59d1d4'
|
|
};
|
|
const INITIAL_STROKE_MAP = {
|
|
'Disease': '#B91C1C', 'Drug': '#047857', 'Symptom': '#B45309', 'Check': '#1D4ED8',
|
|
'Cause': '#40999b', 'Department': '#40999b', 'Other': '#40999b'
|
|
};
|
|
|
|
export default {
|
|
name: 'GraphDemo',
|
|
components: {Menu},
|
|
data() {
|
|
return {
|
|
activeTags: '疾病',
|
|
styleGroups: [],
|
|
existingGroups: [],
|
|
activeCollapseNames: [],
|
|
checkedConfigIds: [],
|
|
checkedGroupIds: [],
|
|
usingConfigIds: [],
|
|
saveDialogVisible: false,
|
|
saveForm: {group_name: '', canvas_name: ''},
|
|
tagStyles: {
|
|
'Disease': this.getInitialTagParams('Disease'),
|
|
'Symptom': this.getInitialTagParams('Symptom'),
|
|
'Cause': this.getInitialTagParams('Cause'),
|
|
'Drug': this.getInitialTagParams('Drug'),
|
|
'Department': this.getInitialTagParams('Department'),
|
|
'DiseaseSite': this.getInitialTagParams('DiseaseSite'),
|
|
'Check': this.getInitialTagParams('Check'),
|
|
'Other': this.getInitialTagParams('Other'),
|
|
},
|
|
nodeShowLabel: true,
|
|
nodeFontFamily: 'Microsoft YaHei, sans-serif',
|
|
nodeFontSize: 12,
|
|
nodeFontColor: '#ffffff',
|
|
nodeShape: 'circle',
|
|
nodeSize: 50,
|
|
nodeFill: '#EF4444',
|
|
nodeStroke: '#B91C1C',
|
|
nodeLineWidth: 2,
|
|
edgeShowLabel: true,
|
|
edgeEndArrow: true,
|
|
edgeFontFamily: 'Microsoft YaHei, sans-serif',
|
|
edgeFontSize: 10,
|
|
edgeFontColor: '#666666',
|
|
edgeType: 'line',
|
|
edgeLineWidth: 2,
|
|
edgeStroke: '#EF4444', // 初始同步节点颜色
|
|
defaultData: {
|
|
nodes: [
|
|
{id: "node1", data: {name: "霍乱", label: "Disease"}},
|
|
{id: "node2", data: {name: "腹泻", label: "Symptom"}},
|
|
{id: "node3", data: {name: "脱水", label: "Disease"}},
|
|
{id: "node4", data: {name: "呕吐", label: "Disease"}},
|
|
{id: "node5", data: {name: "由霍乱弧菌感染所致", label: "Cause"}},
|
|
{id: "node6", data: {name: "复方磺胺甲噁唑", label: "Drug"}},
|
|
{id: "node7", data: {name: "消化系统", label: "DiseaseSite"}},
|
|
{id: "node8", data: {name: "传染科", label: "Department"}},
|
|
{id: "node9", data: {name: "代谢性 酸中毒", label: "Disease"}},
|
|
{id: "node10", data: {name: "急性肾衰竭", label: "Disease"}},
|
|
{id: "node11", data: {name: "检查项目", label: "Check"}}
|
|
],
|
|
edges: [
|
|
{id: "e1", source: "node1", target: "node2", data: {relationship: {properties: {label: "症状与体征"}}}},
|
|
{id: "e2", source: "node1", target: "node3", data: {relationship: {properties: {label: "并发症"}}}},
|
|
{id: "e3", source: "node1", target: "node4", data: {relationship: {properties: {label: "并发症"}}}},
|
|
{id: "e4", source: "node1", target: "node5", data: {relationship: {properties: {label: "病因"}}}},
|
|
{id: "e5", source: "node1", target: "node6", data: {relationship: {properties: {label: "治疗方案"}}}},
|
|
{id: "e6", source: "node1", target: "node7", data: {relationship: {properties: {label: "病变部位"}}}},
|
|
{id: "e7", source: "node1", target: "node8", data: {relationship: {properties: {label: "科室"}}}},
|
|
{id: "e8", source: "node1", target: "node9", data: {relationship: {properties: {label: "并发症"}}}},
|
|
{id: "e9", source: "node1", target: "node10", data: {relationship: {properties: {label: "并发症"}}}},
|
|
{id: "e10", source: "node1", target: "node11", data: {relationship: {properties: {label: "检查"}}}}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// 新增：监听方案勾选，同步勾选其下的所有画布
|
|
checkedGroupIds(newGroupIds) {
|
|
// 遍历所有方案
|
|
this.styleGroups.forEach(group => {
|
|
const isGroupChecked = newGroupIds.includes(group.id);
|
|
const childIds = group.configs.map(c => c.id);
|
|
|
|
if (isGroupChecked) {
|
|
// 如果方案被勾选，将子画布 ID 全部加入 checkedConfigIds (去重)
|
|
this.checkedConfigIds = Array.from(new Set([...this.checkedConfigIds, ...childIds]));
|
|
} else {
|
|
// 如果方案取消勾选，将子画布 ID 从 checkedConfigIds 中移除
|
|
this.checkedConfigIds = this.checkedConfigIds.filter(id => !childIds.includes(id));
|
|
}
|
|
});
|
|
},
|
|
// 监听节点填充色，强制同步线条色
|
|
nodeFill(newVal) {
|
|
this.edgeStroke = newVal;
|
|
},
|
|
nodeShowLabel: 'syncAndRefresh', nodeFontFamily: 'syncAndRefresh', nodeFontSize: 'syncAndRefresh',
|
|
nodeFontColor: 'syncAndRefresh', nodeShape: 'syncAndRefresh', nodeSize: 'syncAndRefresh',
|
|
nodeStroke: 'syncAndRefresh', nodeLineWidth: 'syncAndRefresh',
|
|
edgeShowLabel: 'syncAndRefresh', edgeEndArrow: 'syncAndRefresh', edgeFontFamily: 'syncAndRefresh',
|
|
edgeFontSize: 'syncAndRefresh', edgeFontColor: 'syncAndRefresh', edgeType: 'syncAndRefresh',
|
|
edgeLineWidth: 'syncAndRefresh', edgeStroke: 'syncAndRefresh'
|
|
},
|
|
|
|
created() {
|
|
this._graph = null;
|
|
this._nodeLabelMap = new Map();
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.initGraph();
|
|
this.fetchConfigs();
|
|
window.addEventListener('resize', this.handleResize);
|
|
}, 300);
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
if (this._graph) {
|
|
this._graph.destroy();
|
|
this._graph = null;
|
|
}
|
|
window.removeEventListener('resize', this.handleResize);
|
|
},
|
|
methods: {
|
|
validateNodeSize(event) {
|
|
const inputVal = event.target.value;
|
|
const val = parseInt(inputVal);
|
|
if (isNaN(val) || val < 30 || val > 100) {
|
|
ElMessage({ message: `节点尺寸请输入 30 到 100 之间的数字`, type: 'warning', duration: 1500 });
|
|
event.target.value = this.nodeSize;
|
|
return;
|
|
}
|
|
this.nodeSize = val;
|
|
this.syncAndRefresh();
|
|
},
|
|
validateNodeLineWidth(event) {
|
|
const inputVal = event.target.value;
|
|
const val = parseInt(inputVal);
|
|
if (isNaN(val) || val < 1 || val > 5) {
|
|
ElMessage({ message: `边框尺寸请输入 1 到 5 之间的数字`, type: 'warning', duration: 1500 });
|
|
event.target.value = this.nodeLineWidth;
|
|
return;
|
|
}
|
|
this.nodeLineWidth = val;
|
|
this.syncAndRefresh();
|
|
},
|
|
validateEdgeLineWidth(event) {
|
|
const inputVal = event.target.value;
|
|
const val = parseInt(inputVal);
|
|
if (isNaN(val) || val < 1 || val > 5) {
|
|
ElMessage({ message: `线条粗细请输入 1 到 5 之间的数字`, type: 'warning', duration: 1500 });
|
|
event.target.value = this.edgeLineWidth;
|
|
return;
|
|
}
|
|
this.edgeLineWidth = val;
|
|
this.syncAndRefresh();
|
|
},
|
|
getInitialTagParams(label) {
|
|
const fill = INITIAL_FILL_MAP[label] || '#59d1d4';
|
|
return {
|
|
nodeShowLabel: true, nodeFontFamily: 'Microsoft YaHei, sans-serif', nodeFontSize: 12, nodeFontColor: '#ffffff',
|
|
nodeShape: 'circle', nodeSize: 60, nodeFill: fill,
|
|
nodeStroke: INITIAL_STROKE_MAP[label] || '#40999b', nodeLineWidth: 2, edgeShowLabel: true, edgeEndArrow: true,
|
|
edgeFontFamily: 'Microsoft YaHei, sans-serif', edgeFontSize: 10, edgeFontColor: '#666666', edgeType: 'line',
|
|
edgeLineWidth: 2, edgeStroke: fill // 初始线条颜色同步填充色
|
|
};
|
|
},
|
|
handleTagClick(tag) {
|
|
this.activeTags = tag;
|
|
const label = tagToLabelMap[tag];
|
|
const style = this.tagStyles[label];
|
|
if (style) Object.assign(this, style);
|
|
},
|
|
syncAndRefresh() {
|
|
const label = tagToLabelMap[this.activeTags];
|
|
if (label) {
|
|
this.tagStyles[label] = {
|
|
nodeShowLabel: this.nodeShowLabel, nodeFontFamily: this.nodeFontFamily, nodeFontSize: this.nodeFontSize,
|
|
nodeFontColor: this.nodeFontColor, nodeShape: this.nodeShape, nodeSize: this.nodeSize,
|
|
nodeFill: this.nodeFill, nodeStroke: this.nodeStroke, nodeLineWidth: this.nodeLineWidth,
|
|
edgeShowLabel: this.edgeShowLabel, edgeEndArrow: this.edgeEndArrow, edgeFontFamily: this.edgeFontFamily,
|
|
edgeFontSize: this.edgeFontSize, edgeFontColor: this.edgeFontColor, edgeType: this.edgeType,
|
|
edgeLineWidth: this.edgeLineWidth, edgeStroke: this.edgeStroke
|
|
};
|
|
}
|
|
this.updateAllElements();
|
|
},
|
|
initGraph() {
|
|
const container = this.$refs.graphContainer;
|
|
if (!container || container.clientWidth === 0) return;
|
|
this.defaultData.nodes.forEach(n => this._nodeLabelMap.set(n.id, n.data?.label));
|
|
if (this._graph) this._graph.destroy();
|
|
const graph = new Graph({
|
|
container, width: container.clientWidth, height: container.clientHeight || 600,
|
|
layout: {type: 'radial', unitRadius: 100, preventOverlap: true, nodeSpacing: 50},
|
|
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'hover-activate'],
|
|
autoFit: 'center', animation: true
|
|
});
|
|
this._graph = markRaw(graph);
|
|
this.updateAllElements();
|
|
},
|
|
updateAllElements() {
|
|
if (!this._graph) return;
|
|
const labelToAppliedConfigMap = {};
|
|
this.styleGroups.forEach(group => {
|
|
group.configs.forEach(conf => {
|
|
if (this.usingConfigIds.includes(conf.id)) {
|
|
const labelEn = tagToLabelMap[conf.current_label];
|
|
if (labelEn) labelToAppliedConfigMap[labelEn] = conf.styles;
|
|
}
|
|
});
|
|
});
|
|
|
|
const hexToRgba = (hex, opacity) => {
|
|
if (!hex) return 'rgba(182, 178, 178, 0.5)';
|
|
if (hex.startsWith('rgba')) return hex;
|
|
let r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
};
|
|
|
|
const nodes = this.defaultData.nodes.map(node => {
|
|
const labelEn = node.data?.label || '';
|
|
const s = labelToAppliedConfigMap[labelEn] || this.tagStyles[labelEn];
|
|
return {
|
|
...node, type: s?.nodeShape || 'circle',
|
|
style: {
|
|
size: this.safeNum(s?.nodeSize, 60), fill: s?.nodeFill, stroke: s?.nodeStroke,
|
|
lineWidth: this.safeNum(s?.nodeLineWidth, 2), labelText: s?.nodeShowLabel ? (node.data?.name || '') : '',
|
|
labelFill: s?.nodeFontColor || '#ffffff', labelFontSize: this.safeNum(s?.nodeFontSize, 12),
|
|
labelFontFamily: s?.nodeFontFamily || 'Microsoft YaHei', labelPlacement: 'center', labelWordWrap: true,
|
|
labelMaxWidth: '150%', labelMaxLines: 3, labelTextOverflow: 'ellipsis', labelTextAlign: 'center',
|
|
}
|
|
};
|
|
});
|
|
|
|
const edges = this.defaultData.edges.map(edge => {
|
|
const sLabel = this._nodeLabelMap.get(edge.source);
|
|
// 获取源节点对应的样式（可能是方案里的，也可能是实时调整的）
|
|
const s = labelToAppliedConfigMap[sLabel] || this.tagStyles[sLabel] || this;
|
|
|
|
// 线条颜色直接取该标签配置下的 edgeStroke
|
|
const strokeColor = hexToRgba(s.edgeStroke, 0.6);
|
|
|
|
return {
|
|
...edge, type: s.edgeType || 'line',
|
|
style: {
|
|
stroke: strokeColor,
|
|
lineWidth: this.safeNum(s.edgeLineWidth, 2),
|
|
endArrow: s.edgeEndArrow,
|
|
labelText: s.edgeShowLabel ? (edge.data?.relationship?.properties?.label || '') : '',
|
|
labelFill: s.edgeFontColor || '#666',
|
|
labelFontSize: this.safeNum(s.edgeFontSize, 10),
|
|
labelFontFamily: s.edgeFontFamily || 'Microsoft YaHei',
|
|
labelBackground: true,
|
|
labelBackgroundFill: '#fff',
|
|
labelBackgroundOpacity: 0.7
|
|
}
|
|
};
|
|
});
|
|
|
|
this._graph.setData({nodes, edges});
|
|
this._graph.render();
|
|
},
|
|
safeNum(val, defaultVal = 1) {
|
|
const n = Number(val);
|
|
return isNaN(n) ? defaultVal : n;
|
|
},
|
|
async fetchConfigs() {
|
|
try {
|
|
const res = await getGroupedGraphStyleList();
|
|
if (res.code === 200) {
|
|
this.styleGroups = res.data.map(group => ({
|
|
...group, configs: group.configs.map(conf => ({
|
|
...conf, styles: typeof conf.styles === 'string' ? JSON.parse(conf.styles) : conf.styles
|
|
}))
|
|
}));
|
|
}
|
|
} catch (err) {
|
|
console.error("加载配置失败:", err);
|
|
}
|
|
},
|
|
async fetchGroupNames() {
|
|
const res = await getGraphStyleGroups();
|
|
if (res.code === 200) this.existingGroups = res.data;
|
|
},
|
|
toggleApplyConfig(item) {
|
|
const idx = this.usingConfigIds.indexOf(item.id);
|
|
if (idx > -1) {
|
|
this.usingConfigIds.splice(idx, 1);
|
|
} else {
|
|
this.styleGroups.forEach(g => {
|
|
g.configs.forEach(c => {
|
|
if (this.usingConfigIds.includes(c.id) && c.current_label === item.current_label) {
|
|
this.usingConfigIds = this.usingConfigIds.filter(id => id !== c.id);
|
|
}
|
|
});
|
|
});
|
|
this.usingConfigIds.push(item.id);
|
|
}
|
|
this.updateAllElements();
|
|
},
|
|
applyWholeGroup(group) {
|
|
const idsToApply = group.configs.map(c => c.id);
|
|
group.configs.forEach(conf => {
|
|
this.styleGroups.forEach(g => {
|
|
g.configs.forEach(c => {
|
|
if (c.current_label === conf.current_label) this.usingConfigIds = this.usingConfigIds.filter(id => id !== c.id);
|
|
});
|
|
});
|
|
});
|
|
this.usingConfigIds = Array.from(new Set([...this.usingConfigIds, ...idsToApply]));
|
|
this.updateAllElements();
|
|
ElMessage.success(`方案【${group.group_name}】已应用`);
|
|
},
|
|
cancelWholeGroup(group) {
|
|
const idsToCancel = group.configs.map(c => c.id);
|
|
this.usingConfigIds = this.usingConfigIds.filter(id => !idsToCancel.includes(id));
|
|
this.updateAllElements();
|
|
},
|
|
isGroupFullyApplied(group) {
|
|
if (!group.configs || group.configs.length === 0) return false;
|
|
return group.configs.every(c => this.usingConfigIds.includes(c.id));
|
|
},
|
|
handleSaveClick() {
|
|
this.fetchGroupNames();
|
|
|
|
// 使用 Date.now() 获取当前 13 位毫秒时间戳
|
|
this.saveForm.canvas_name = Date.now().toString();
|
|
this.saveDialogVisible = true;
|
|
},
|
|
async confirmSave() {
|
|
const payload = {
|
|
canvas_name: this.saveForm.canvas_name, group_name: this.saveForm.group_name, current_label: this.activeTags,
|
|
styles: {...this.tagStyles[tagToLabelMap[this.activeTags]]}
|
|
};
|
|
const res = await saveGraphStyle(payload);
|
|
if (res.code === 200) {
|
|
ElMessage.success("保存成功");
|
|
this.saveDialogVisible = false;
|
|
this.fetchConfigs();
|
|
}
|
|
},
|
|
resetStyle() {
|
|
const labelEn = tagToLabelMap[this.activeTags];
|
|
const initial = this.getInitialTagParams(labelEn);
|
|
this.tagStyles[labelEn] = initial;
|
|
Object.assign(this, initial);
|
|
this.updateAllElements();
|
|
ElMessage.info(`已重置【${this.activeTags}】样式`);
|
|
},
|
|
async deleteSingleConfig(id) {
|
|
try {
|
|
await ElMessageBox.confirm('确定删除此配置吗？');
|
|
const res = await deleteGraphStyle(id);
|
|
if (res.code === 200) {
|
|
this.usingConfigIds = this.usingConfigIds.filter(cid => cid !== id);
|
|
this.fetchConfigs();
|
|
this.updateAllElements();
|
|
}
|
|
} catch (err) {}
|
|
},
|
|
async deleteGroup(groupId) {
|
|
try {
|
|
await ElMessageBox.confirm('确定删除整个方案吗？');
|
|
const res = await deleteGraphStyleGroup(groupId);
|
|
if (res.code === 200) {
|
|
this.fetchConfigs();
|
|
this.updateAllElements();
|
|
}
|
|
} catch (err) {}
|
|
},
|
|
async handleUnifiedBatchDelete() {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
'确定执行批量删除吗？',
|
|
'批量删除', // 这里添加标题
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
// 确保标题和内容对齐
|
|
distinguishCancelAndClose: true,
|
|
}
|
|
);
|
|
for (const gid of this.checkedGroupIds) await deleteGraphStyleGroup(gid);
|
|
if (this.checkedConfigIds.length > 0) await batchDeleteGraphStyle({ids: this.checkedConfigIds});
|
|
this.clearSelection();
|
|
this.fetchConfigs();
|
|
this.updateAllElements();
|
|
} catch (e) {}
|
|
},
|
|
clearSelection() {
|
|
this.checkedConfigIds = [];
|
|
this.checkedGroupIds = [];
|
|
},
|
|
handleResize() {
|
|
if (this._graph && this.$refs.graphContainer) this._graph.setSize(this.$refs.graphContainer.clientWidth, this.$refs.graphContainer.clientHeight);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
/* 精准控制“应用全案”按钮 */
|
|
.group-header-slot .el-button--primary.is-plain {
|
|
background-color: #1559f3 !important;
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.group-header-slot .el-button--primary.is-plain:hover {
|
|
opacity: 0.8;
|
|
background-color: #1559f3 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* 精准控制弹窗中的“确定保存”按钮 */
|
|
.el-dialog__footer .el-button--primary {
|
|
background-color: #1559f3 !important;
|
|
border-color: #1559f3 !important;
|
|
color: #ffffff !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-dialog__footer .el-button--primary:hover {
|
|
opacity: 0.8;
|
|
background-color: #1559f3 !important;
|
|
border-color: #1559f3 !important;
|
|
}
|
|
|
|
.control-panel::-webkit-scrollbar {
|
|
display: none !important;
|
|
}
|
|
|
|
.control-panel {
|
|
scrollbar-width: none !important; /* Firefox */
|
|
-ms-overflow-style: none !important; /* IE */
|
|
}
|
|
|
|
.knowledge-graph-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
background-color: #f8fafc;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.control-panel {
|
|
width: 260px;
|
|
background: #ffffff;
|
|
border-right: 1px solid #e2e8f0;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.config-list-panel {
|
|
width: 280px;
|
|
background: #ffffff;
|
|
border-left: 1px solid #e2e8f0;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.panel-header-container {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header-line {
|
|
height: 1px;
|
|
background-color: #e2e8f0;
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-title-style {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #1157f3;
|
|
}
|
|
|
|
/* --- 修改后的标签过滤样式 --- */
|
|
.tag-filters {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.tag-pill {
|
|
flex-shrink: 0;
|
|
padding: 0 10px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
background-color: #959390;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
user-select: none;
|
|
border: 1px solid transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tag-pill:hover {
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tag-pill.is-active {
|
|
background-color: #4a68db; /* 选中颜色 */
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 10px rgba(74, 104, 219, 0.3);
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #334155;
|
|
margin-bottom: 12px;
|
|
padding-left: 12px;
|
|
position: relative;
|
|
line-height: 1;
|
|
}
|
|
|
|
.section-title::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #1559f3;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.form-group-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
font-size: 14px;
|
|
margin-bottom: 12px;
|
|
color: #475569;
|
|
}
|
|
|
|
.checkbox-label {
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.theme-checkbox {
|
|
accent-color: #1559f3;
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group, .color-picker-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group label, .color-picker-item label {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-group select, .form-group input[type="number"] {
|
|
flex: 1;
|
|
padding: 5px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.slider-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* 滑块轨道样式 */
|
|
.theme-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 6px;
|
|
background: #dde5f3;
|
|
border-radius: 10px;
|
|
outline: none;
|
|
}
|
|
|
|
/* 中间的小圆点样式 */
|
|
.theme-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #1559f3;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 中间的小圆点样式 */
|
|
.theme-slider::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #1559f3;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 右侧数值样式 */
|
|
.val-text-black {
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
min-width: 35px;
|
|
}
|
|
|
|
.color-picker-border {
|
|
padding: 3px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
}
|
|
|
|
.square-picker {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.button-footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.btn-confirm-save {
|
|
background: #1559f3;
|
|
color: #fff;
|
|
border: none;
|
|
flex: 1;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-reset-style {
|
|
background: #fff;
|
|
color: #1559f3;
|
|
border: 1px solid #1559f3;
|
|
flex: 1;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.graph-container {
|
|
flex: 1;
|
|
background: #fff;
|
|
}
|
|
|
|
.config-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.config-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: #f8fafc;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.config-card:hover {
|
|
border-color: #1559f3;
|
|
}
|
|
|
|
.card-using {
|
|
border-color: #1559f3;
|
|
background: #eff6ff !important;
|
|
border-width: 1.5px;
|
|
}
|
|
|
|
.card-checked {
|
|
border-left: 4px solid #ef4444;
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
padding-right: 8px;
|
|
border-right: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.config-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: #ef4444;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.card-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-name {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 10px;
|
|
background: #1559f3;
|
|
color: white;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.card-tag {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.delete-icon {
|
|
color: #94a3b8;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.delete-icon:hover {
|
|
color: #ef4444;
|
|
background: #fee2e2;
|
|
}
|
|
|
|
.batch-actions-fixed {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #ffffff;
|
|
padding: 15px;
|
|
border-top: 2px solid #e2e8f0;
|
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.selection-info {
|
|
font-size: 13px;
|
|
color: #ef4444;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.batch-button-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-batch-delete-final {
|
|
flex: 2;
|
|
padding: 10px;
|
|
background: #ef4444;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-batch-delete-final:disabled {
|
|
background: #fca5a5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-clear-selection {
|
|
flex: 1;
|
|
padding: 10px;
|
|
background: #fff;
|
|
color: #64748b;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.empty-text {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.refresh-icon {
|
|
cursor: pointer;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.refresh-icon:hover {
|
|
color: #1559f3;
|
|
}
|
|
|
|
.group-header-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.group-name-text {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
color: #334155;
|
|
}
|
|
|
|
.group-del {
|
|
margin-left: 10px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.group-del:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
:deep(.el-collapse-item__header) {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* 统一修改所有弹窗和消息框的标题与取消按钮 */
|
|
:deep(.el-dialog__title),
|
|
:deep(.el-message-box__title) {
|
|
color: #000000 !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
:deep(.el-dialog__header),
|
|
:deep(.el-message-box__header) {
|
|
text-align: left !important;
|
|
}
|
|
|
|
:deep(.el-dialog__footer .el-button:first-child),
|
|
:deep(.el-message-box__btns .el-button:first-child) {
|
|
background-color: #e6e6e6 !important;
|
|
border-color: #e6e6e6 !important;
|
|
color: #333 !important;
|
|
}
|
|
:deep(.el-message-box__btns .el-button--primary) {
|
|
background-color: #1559f3 !important;
|
|
border-color: #1559f3 !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.el-message-box__header {
|
|
text-align: left !important;
|
|
padding-top: 15px !important;
|
|
}
|
|
|
|
.el-message-box__title {
|
|
color: #000000 !important;
|
|
font-weight: 500 !important;
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
/* 之前讨论过的按钮颜色也请确保保留在此 */
|
|
.el-message-box__btns .el-button--primary {
|
|
background-color: #1559f3 !important;
|
|
border-color: #1559f3 !important;
|
|
}
|
|
</style>
|
|
|