all

vue/src/system/GraphQA.vue

@@ -130,12 +130,8 @@ export default {
   },
   // =======================================================================
 
-  mounted() {
+  async mounted() {
-    this.$nextTick(() => {
+    await this.getDefault()
-      setTimeout(() => {
-        this.getDefault()
-      }, 300);
-    });
     // =============== 👇【新增】页面加载时从 localStorage 恢复数据 ===============
     this.restoreDataFromLocalStorage();
     // =======================================================================
@@ -277,13 +273,12 @@ export default {
       // === 1. 构建 nodeId → label 映射 ===
       const nodeIdToEnLabel = {};
       data.nodes.forEach(node => {
-        nodeIdToEnLabel[node.id] = node.data.label; // e.g. "Disease"
+        nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
       });
       // === 2. 处理节点：根据自身 label 设置样式 ===
       const updatedNodes = data.nodes.map(node => {
-        const enLabel = node.data.label;
+        const enLabel = node.data.type;
-        const zhLabel = this.enToZhLabelMap[enLabel] || '其他'; // 默认回退到“其他”
+        const styleConf = this.parsedStyles[enLabel] || {};
-        const styleConf = this.parsedStyles[zhLabel] || {};
         return {
           ...node,
           type: styleConf.nodeShape || this.nodeShape,
@@ -304,8 +299,7 @@ export default {
       const updatedEdges = data.edges.map(edge => {
         console.log(edge)
         const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
-        const sourceZhLabel = this.enToZhLabelMap[sourceEnLabel] || '其他';
+        const styleConf = this.parsedStyles[sourceEnLabel] || {};
-        const styleConf = this.parsedStyles[sourceZhLabel] || {};
 
         return {
           ...edge,
@@ -342,14 +336,16 @@ export default {
         this._graph.destroy()
         this._graph = null;
       }
+      console.log(data)
       // === 1. 构建 nodeId → label 映射 ===
       const nodeIdToEnLabel = {};
       data.nodes.forEach(node => {
-        nodeIdToEnLabel[node.id] = node.type; // e.g. "Disease"
+        nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
       });
+      console.log(nodeIdToEnLabel)
       // === 2. 处理节点：根据自身 label 设置样式 ===
       const updatedNodes = data.nodes.map(node => {
-        const enLabel = node.data.label;
+        const enLabel = node.data.type;
         const styleConf = this.parsedStyles[enLabel] || {};
         return {
           ...node,
@@ -478,7 +474,6 @@ export default {
           edge: {
             style: {
               labelText: (d) => {
-                console.log(d)
                 return d.data.label},
               // stroke: (d) => {
               //   const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID

vue/src/system/GraphStyle.vue

@@ -52,7 +52,8 @@
         <div class="color-picker-item">
           <label>字体颜色</label>
           <div class="color-picker-border">
-            <input v-model="nodeFontColor" type="color" class="square-picker"/>
+            <el-color-picker v-model="nodeFontColor" show-alpha class="square-picker"/>
+<!--            <input v-model="nodeFontColor" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -80,14 +81,16 @@
         <div class="color-picker-item">
           <label>填充颜色</label>
           <div class="color-picker-border">
-            <input v-model="nodeFill" type="color" class="square-picker"/>
+            <el-color-picker v-model="nodeFill" show-alpha class="square-picker"/>
+<!--            <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"/>
+            <el-color-picker v-model="nodeStroke" show-alpha class="square-picker"/>
+<!--            <input v-model="nodeStroke" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -136,7 +139,8 @@
         <div class="color-picker-item">
           <label>字体颜色</label>
           <div class="color-picker-border">
-            <input v-model="edgeFontColor" type="color" class="square-picker"/>
+            <el-color-picker v-model="edgeFontColor" class="square-picker" show-alpha />
+<!--            <input v-model="edgeFontColor" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -164,7 +168,8 @@
         <div class="color-picker-item">
           <label>线条颜色</label>
           <div class="color-picker-border">
-            <input v-model="edgeStroke" type="color" class="square-picker"/>
+            <el-color-picker v-model="edgeStroke" class="square-picker" show-alpha />
+<!--            <input v-model="edgeStroke" type="color" class="square-picker"/>-->
           </div>
         </div>
       </div>
@@ -507,6 +512,7 @@ export default {
     },
     syncAndRefresh() {
       const label = tagToLabelMap[this.activeTags];
+      console.log(this.nodeFill)
       if (label) {
         this.tagStyles[label] = {
           nodeShowLabel: this.nodeShowLabel, nodeFontFamily: this.nodeFontFamily, nodeFontSize: this.nodeFontSize,
@@ -744,16 +750,7 @@ export default {
 
         // 4. 【新增】拦截逻辑：如果标签不全，弹出提示并返回
         if (missingTags.length > 0) {
-          return ElMessageBox.alert(
+          return   ElMessage.warning('该方案配置不完整，无法应用。目前缺少：'+missingTags.join('、'));
-              `该方案配置不完整，无法应用。必须配齐 5 个核心标签。` +
-              `<br/>目前缺失：<b style="color: #f56c6c">${missingTags.join('、')}</b>`,
-              '校验未通过',
-              {
-                confirmButtonText: '我知道了',
-                dangerouslyUseHTMLString: true,
-                type: 'warning'
-              }
-          );
         }
         //  获取当前正在使用的所有标签名（用于外部排他）
         const currentlyUsingLabels = [];
@@ -902,11 +899,7 @@ export default {
           .some(g => g.configs.some(c => this.usingConfigIds.includes(c.id)));
 
       if (isAnyCheckedConfigUsing || isAnyCheckedGroupUsing) {
-        return ElMessageBox.alert(
+        return ElMessage.warning('选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。');
-            '选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。',
-            '无法执行删除',
-            { type: 'error', confirmButtonText: '我知道了' }
-        );
       }
 
       // 3. 最小保留数判断 (针对方案组)
@@ -1144,9 +1137,11 @@ export default {
 .form-group select, .form-group input[type="number"] {
   flex: 1;
   padding: 5px;
-  border: 1px solid #e2e8f0;
+  border: none;
   border-radius: 4px;
   width: 100px;
+  box-shadow: 0 0 0 2px #EBF0FF;
+  outline: none;
 }
 
 .slider-wrapper {
@@ -1178,14 +1173,11 @@ export default {
 
 .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;
 }
@@ -1489,7 +1481,6 @@ export default {
 <style>
 .el-message-box__header {
   text-align: left !important;
-  padding-top: 15px !important;
 }
 
 .el-message-box__title {
@@ -1502,4 +1493,5 @@ export default {
   background-color: #1559f3 !important;
   border-color: #1559f3 !important;
 }
+
 </style>

vue/src/system/KGData.vue

@@ -656,8 +656,8 @@ onMounted(() => {
 .folder-tab-item { padding: 8px 20px; font-size: 12px; color: #86909c; cursor: pointer; background-color: #ecf2ff; border: 1px solid #dcdfe6; border-bottom: none; border-radius: 8px 8px 0 0; }
 .folder-tab-item.active { background-color: #f1f6ff !important; color: #2869ff; font-weight: bold; border: 2px solid #6896ff; border-bottom: 2px solid #ffffff; margin-bottom: -1px; z-index: 3; }
 .data-card-container { background: #ffffff; border-radius: 30px; padding: 20px 20px; box-shadow: 2px -1px 14px 4px #E1EAFF; border: 1px solid #eff4ff; position: relative; z-index: 4; }
-.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
+.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px;gap: 20px }
-.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;margin-right: 20px; }
+.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;}
 .input-group-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; }
 .filter-label-text { font-size: 14px; color: #165dff; font-weight: 600; flex-shrink: 0; }
 .search-input,.input-group-inline :deep(.el-input) { width: 200px !important;box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
@@ -817,18 +817,7 @@ onMounted(() => {
   min-height: 300px;
 }
 
-.filter-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-}
 
-.filter-inputs {
-  display: flex;
-  gap: 35px;
-  flex-wrap: nowrap;
-}
 
 .input-group-inline {
   display: flex;
@@ -845,9 +834,6 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-.search-input, .search-select {
-  width: 160px !important;
-}
 
 .btn-search-ref {
   background: #165dff !important;