修改拓扑图的物料颜色示例

business-css/frontend/src/components/antvx6/index.vue

@@ -44,7 +44,9 @@ const props = defineProps({
   },
 })
 
-const materialList:any = ref([]) // 物料列表
+const materialList:any = ref([]) // 模板物料颜色列表
+
+const materialColorData:any = ref([]) // 项目物料颜色
 
 function gettableData() { // 获取物料列表
   let params = {
@@ -53,6 +55,7 @@ function gettableData() { // 获取物料列表
   };
   searchMaterialsPage(params).then((result:any) => {
     materialList.value = result.records;
+    getMaterialsColor()
   }).catch((err) => {
   });
 }
@@ -81,7 +84,7 @@ let graph: Graph
 onMounted(() => {
   preWork()
   getSizeSchemaList()
-  gettableData()
+
   // #region 初始化画布 
   graph = new Graph({
     container: document.getElementById('graph-container') as HTMLElement,
@@ -549,6 +552,7 @@ onMounted(() => {
     const cells = graph.getSelectedCells()
     if (cells.length) {
       graph.removeCells(cells)
+      getMaterialsColor()
     }
   })
 
@@ -996,11 +1000,57 @@ graph.on('blank:mouseup', (e) => {
             tabDeviceNum.value++
           }
         }
+        gettableData() 
+  
       }
 
   })
 
 })
+function getMaterialsColor() {
+  let json = graph.toJSON()
+  let materialColors = []
+  for(let i = 0; i < json.cells.length; i++){
+    if(json.cells[i].materialInfo != null 
+      && json.cells[i].materialInfo.materialId != ''
+      && json.cells[i].materialInfo.iconBase64 != null
+      && json.cells[i].materialInfo.iconBase64 != ''
+    ){
+      materialColors.push(json.cells[i].materialInfo)
+    }
+  }
+  const map = new Map();
+    materialColors.forEach(item => {
+      const key = `${item.name}|${item.iconBase64}`;
+      if (!map.has(key)) {
+        map.set(key, item);
+      }
+    });
+    let result = Array.from(map.values());
+
+
+ 
+
+    result = removeDuplicates(
+      result, 
+      materialList.value
+    );
+   materialColorData.value = result
+  console.log(result)
+}
+function removeDuplicates(mainArr:any, filterArr:any) {
+  // 构建去重集合
+  const duplicateSet = new Set(
+    filterArr.map((item:any) => `${item.name}|${item.iconBase64}`)
+  );
+  
+  // 过滤主数组
+  return mainArr.filter((item:any) => {
+    const key = `${item.name}|${item.iconBase64}`;
+    return !duplicateSet.has(key);
+  });
+}
+
 const tabDeviceNum = ref(0)
 const antvStatus = ref('初始化')
 function preWork() {
@@ -1085,6 +1135,7 @@ function deleteNode() { // 删除节点
     }
   }
   antvStatus.value = '删除设备'
+    getMaterialsColor()
   isMenuShow.value = false
 }
 
@@ -1138,6 +1189,7 @@ function revokeClick(){
     graph.undo()
      setTimeout(() => {
       isLock.value = false
+      getMaterialsColor()
     }, 500);
   }
 }
@@ -1147,6 +1199,7 @@ function removeClick(){
     graph.redo()
     setTimeout(() => {
       isLock.value = false
+      getMaterialsColor()
     }, 500);
   }
 }
@@ -1613,6 +1666,7 @@ function saveDesign(is:any) { // 保存设计
           message: "保存成功",
         });
       }
+      getMaterialsColor()
     });
     if(is == true){
       antvStatus.value = '完成保存'
@@ -1989,7 +2043,7 @@ function getName(code:any) {
       </div>
       <div v-if="isExplanation == true" style="display: flex;align-items: center;">
         <div class="style-content-explanation-box">
-           <div class="style-content-box-title">物料信息</div>
+           <div class="style-content-box-title">模板物料通用颜色</div>
            <div style="display: flex;text-align: center;margin-bottom: 10px;margin-top: 10px;">
              <div style="width: 50%;">物料</div>
              <div style="width: 50%;">颜色</div>
@@ -2001,6 +2055,20 @@ function getName(code:any) {
                <div style="width: 70px;height: 20px;" :style="{backgroundColor: item.iconBase64}"></div>
              </div>
            </div>
+
+           <div class="style-content-box-title">项目物料特殊颜色</div>
+           <div style="display: flex;text-align: center;margin-bottom: 10px;margin-top: 10px;">
+            <div style="width: 50%;">物料</div>
+            <div style="width: 50%;">颜色</div>
+           </div>
+           <div v-for="(item, index) in materialColorData" :key="index" style="display: flex;text-align: center;margin-bottom: 20px;">
+             <div style="width: 50%;">{{ item.name }}</div>
+             <div style="width: 50%;display: flex;justify-content: center;">
+               <div style="width: 70px;height: 20px;" :style="{backgroundColor: item.iconBase64}"></div>
+             </div>
+           </div>
+
+           
         </div> 
         <div class="explanation-box" @click="isExplanation = false">
           <img src="@/assets/x6/expansionandcontraction-right.png">