修改x6添加节点样式

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

@@ -26,6 +26,14 @@ import img5 from '@/assets/x6/5.png'
 import img6 from '@/assets/x6/6.png'
 import img7 from '@/assets/x6/7.png'
 
+import img11 from '@/assets/x6/11.png'
+import img22 from '@/assets/x6/22.png'
+import img33 from '@/assets/x6/33.png'
+import img44 from '@/assets/x6/44.png'
+import img55 from '@/assets/x6/55.png'
+import img66 from '@/assets/x6/66.png'
+import img77 from '@/assets/x6/77.png'
+
 import line1 from '@/assets/x6/line1.png'
 import line2 from '@/assets/x6/line2.png'
 import line3 from '@/assets/x6/line3.png'
@@ -200,14 +208,28 @@ onMounted(() => {
     const pos = node.position?.() || { x: 0, y: 0 }
     showContextMenu(pos.x, pos.y)
   })
+
   function showContextMenu(x: number, y: number) {
     left.value = x + 260
     top.value = y - 50
-
     isMenuShow.value = true
-    // 创建并显示上下文菜单
-    // 包含箭头样式选项
   }
+  graph.on('node:click', (row:any) => {
+
+    let node:any = row.node
+  
+    if( node.store.data.shape == 'rect'){
+      nodeId.value = node.id
+      styleInfo.value = {
+        name: node.store.data.attrs.label.text,
+        color: node.store.data.attrs.body.stroke,
+        line: node.store.data.attrs.body.strokeDasharray == ''?'实线':'虚线',
+        width: node.store.data.attrs.body.strokeWidth,
+        remark: node.store.data.remark
+      }
+    }
+    row.e.preventDefault()
+  })
   // 监听Stencil内部的Dnd事件
 
   document
@@ -220,6 +242,9 @@ onMounted(() => {
     if(isLock.value == true){
       return
     }
+
+
+
     const { node } = args
     
     // 检查是否是管线节点
@@ -246,25 +271,19 @@ onMounted(() => {
       }, 100)
     } else {
       if(node.store && node.store.data && node.store.data.shape === 'rect'){
+        nodeId.value = node.id
+        styleInfo.value = {
+            name: node.store.data.attrs.label.text,
+            color: '#ff0000',
+            line: '虚线',
+            width: node.store.data.attrs.body.strokeWidth,
+            remark: ''
+
+        }
+      node.store.data.remark = ''
         return
       }
-      nodeId.value = node.id
+
-      if(node.store.data.attrs.text.text == '扁平槽'){
-        deviceTypetype.value = 'FlatTank' 
-      }else if(node.store.data.attrs.text.text == '圆柱槽'){
-        deviceTypetype.value = 'CylindricalTank'
-      }else if(node.store.data.attrs.text.text == '环形槽'){
-        deviceTypetype.value = 'AnnularTank'
-      }else if(node.store.data.attrs.text.text == '管束槽'){
-        deviceTypetype.value = 'TubeBundleTank'
-      }else if(node.store.data.attrs.text.text == '萃取柱'){
-        deviceTypetype.value = 'ExtractionColumn'
-      }else if(node.store.data.attrs.text.text == '流化床'){
-        deviceTypetype.value = 'FluidizedBed'
-      }else if(node.store.data.attrs.text.text == '锥底环形槽'){
-        deviceTypetype.value = 'ACFTank'
-      }
-      // 设置固定大小
       node.size(160, 160)
       // 去掉背景节点
       node.attr('body/fill', 'none')
@@ -272,12 +291,102 @@ onMounted(() => {
       node.attr('image/refX', 0)
       node.attr('image/refY', 0)
       // node.attr('label/refX', 40)
-      node.attr('label/refY', 160)
+
       node.attr('image/width', 160)      // 修改宽度
       node.attr('image/height', 160)     // 修改高度
+
+
+      nodeId.value = node.id
+       if(node.store.data.attrs.text.text == '圆柱槽'){
+        deviceTypetype.value = 'CylindricalTank'
+        node.size(110, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img11)    
+        node.attr('image/width', 105)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+      }else if(node.store.data.attrs.text.text == '扁平槽'){
+        deviceTypetype.value = 'FlatTank' 
+
+        node.size(130, 80)
+        const width = node.size().width
+        node.attr('image/xlink:href', img22)    
+        node.attr('image/width', 130)     
+        node.attr('image/height', 80)   
+        node.attr('label/refY', 85)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+
+
+      }else if(node.store.data.attrs.text.text == '环形槽'){
+        deviceTypetype.value = 'AnnularTank'
+
+        node.size(110, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img33)    
+        node.attr('image/width', 105)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+
+
+      }else if(node.store.data.attrs.text.text == '管束槽'){
+        deviceTypetype.value = 'TubeBundleTank'
+        node.size(110, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img44)    
+        node.attr('image/width', 105)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+      }else if(node.store.data.attrs.text.text == '萃取柱'){
+        deviceTypetype.value = 'ExtractionColumn'
+
+        node.size(30, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img55)    
+        node.attr('image/width', 30)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+
+
+      }else if(node.store.data.attrs.text.text == '流化床'){
+        deviceTypetype.value = 'FluidizedBed'
+        node.size(80, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img66)    
+        node.attr('image/width', 80)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+      }else if(node.store.data.attrs.text.text == '锥底环形槽'){
+        deviceTypetype.value = 'ACFTank'
+        node.size(80, 140)
+        const width = node.size().width
+        node.attr('image/xlink:href', img77)    
+        node.attr('image/width', 80)     
+        node.attr('image/height', 135)   
+        node.attr('label/refY', 140)
+        node.attr('label/refX', width/2)
+        node.attr('label/textAnchor', 'middle')
+      }
+      // 设置固定大小
+    
       // 删除节点上的文字
-      node.attr('text/text', '')
+      // node.attr('text/text', '')
-      node.attr('label/text', '')
+      // node.attr('label/text', '')
+
+
+
+
+
       isAdddevice.value = true
 
 
@@ -312,6 +421,7 @@ onMounted(() => {
 
   // undo redo
   graph.bindKey(['meta+z', 'ctrl+z'], () => {
+    debugger
     if (graph.canUndo()) {
       graph.undo()
     }
@@ -331,9 +441,8 @@ onMounted(() => {
       graph.select(nodes)
     }
   })
-
+  graph.bindKey('delete', () => {
-  // delete
+    debugger
-  graph.bindKey('backspace', () => {
     const cells = graph.getSelectedCells()
     if (cells.length) {
       graph.removeCells(cells)
@@ -396,10 +505,19 @@ graph.on('blank:mouseup', (e) => {
     attrs: {
       body: {
         fill: 'transparent', 
-        stroke: '#999',
+        stroke: '#ff0000',
         strokeWidth: 1,
         strokeDasharray: '5 5', // 设置虚线样式
       },
+      label: {
+        text: '系统边界',
+        refX: '50%',
+        refY: -15,
+        textAnchor: 'middle',
+        dominantBaseline: 'middle',  // 文本自身的垂直居中
+        fontSize: 15,
+        fill: '#333333'
+      }
     },
   })
 
@@ -818,7 +936,11 @@ function closeAntvx6() {
 
 function revokeClick(){
   if (graph.canUndo()) {
+     isLock.value = true
     graph.undo()
+     setTimeout(() => {
+      isLock.value = false
+    }, 500);
   }
 }
 function removeClick(){
@@ -1014,6 +1136,44 @@ function getBias(formula:any){
 
 }
 
+const styleInfo:any = ref({
+  name: '',
+  color: '#409EFF',
+  line: '',
+  width: '',
+  remark: ''
+})
+
+function inputChange (e:any){
+  let node:any =  graph.getCellById(nodeId.value)
+  debugger
+  node.attr('label/text', e)
+}
+function lineChange(e:any){
+  let node:any =  graph.getCellById(nodeId.value)
+  if(e == '实线'){
+    node.attr('body/strokeDasharray', '')
+  }else{
+    node.attr('body/strokeDasharray', '5 5')
+  }
+  
+}
+function widthChange(e:any){
+  let node:any =  graph.getCellById(nodeId.value)
+  node.attr('body/strokeWidth', e)
+}
+
+function colorChangs(e:any){
+  let node:any =  graph.getCellById(nodeId.value)
+  node.attr('body/stroke', e)
+}
+
+function remarkChange(e:any){
+  let node:any =  graph.getCellById(nodeId.value)
+  node.store.data.remark = e
+}
+
+
 
 function saveDesign() { // 保存设计
   try {
@@ -1178,8 +1338,8 @@ function saveDesign() { // 保存设计
           <img src="@/assets/x6/del.png" alt="图标" title="删除"  style="cursor: pointer;"
           @click="deleteNode">
       </div>
-      <!-- <div class="line-style-box">
+      <div class="line-style-box">
-        <div class="DisplaySettingsButton">显示设置</div>
+        <!-- <div class="DisplaySettingsButton">显示设置</div> -->
          <div class="expansionandcontraction-box" v-if="isExpansionandcontraction == false" @click="isExpansionandcontraction = true">
           <img src="@/assets/x6/expansionandcontraction-left.png">
         </div>
@@ -1189,10 +1349,46 @@ function saveDesign() { // 保存设计
           </div>
           <div class="style-content-box">
             <div class="style-content-box-title">样式</div>
+            <div class="style-content-box-display">
+              <div class="style-content-box-key">名称</div>
+               <el-input v-model="styleInfo.name" style="width:200px" placeholder="" @input="inputChange"></el-input>
+            </div>
+            <div class="style-content-box-display">
+              <div class="style-content-box-key">线形</div>
+              <el-select v-model="styleInfo.line" style="width:200px" @change="lineChange">
+                <el-option  label="实线" value="实线" />
+                <el-option  label="虚线" value="虚线" />
+              </el-select>
+            
+            </div>
+            <div class="style-content-box-display">
+              <div class="style-content-box-key">线宽</div>
+               <el-select v-model="styleInfo.width" style="width:200px" @change="widthChange">
+               
+                 <el-option  label="1" value="1" />
+                <el-option  label="2" value="2" />
+                <el-option  label="3" value="3" />
+                <el-option  label="4" value="4" />
+                <el-option  label="5" value="5" />
+                <el-option  label="6" value="6" />
+                <el-option  label="7" value="7" />
+                <el-option  label="8" value="8" />
+                <el-option  label="9" value="9" />
+                <el-option  label="10" value="10" />
+              </el-select>
+            </div>
+            <div class="style-content-box-display">
+              <div class="style-content-box-key">边线颜色</div>
+               <el-color-picker v-model="styleInfo.color" @change="colorChangs"></el-color-picker>
+            </div>
+            <div class="style-content-box-display" style="align-items: self-start;">
+              <div class="style-content-box-key" style="padding-top: 5px;">描述信息</div>
+               <el-input type="textarea" :rows="4" v-model="styleInfo.remark" style="width:200px" @input="remarkChange"></el-input>
+            </div>
           </div>
         </div>
         
-      </div> -->
+      </div>
     </div>
     <Createscenario v-if="dialogVisible" :projectInfo="projectInfo" @closeCreatescenario ="closeCreatescenario"/>
     <el-dialog v-model="isScenario" :close-on-click-modal="false"
@@ -1529,4 +1725,20 @@ function saveDesign() { // 保存设计
 .x6-graph-grid {
   background-image: none !important;
 }
+.style-content-box-display{
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+  
+}
+.style-content-box-key{
+  width: 80px;
+  text-align: right;
+  font-family: '微软雅黑';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #808080;
+  padding-right: 10px;
+}
 </style>

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

@@ -114,7 +114,7 @@ function addAttrText(item:any,index:any){
   graph.addNode({
     shape: 'rect-text',
     x: item.position.x ,
-    y: item.position.y + 180,
+    y: item.position.y + 160,
     width: 100,
     height: 30,
     attrs: {
@@ -136,7 +136,7 @@ function addAttrText(item:any,index:any){
   graph.addNode({
     shape: 'image-node',
     x: item.position.x + 135 ,
-    y: item.position.y + 186,
+    y: item.position.y + 166,
     width: 14,
     height: 14,
     correlationId: item.id,
@@ -155,7 +155,7 @@ function addAttrText(item:any,index:any){
   graph.addNode({
     shape: 'image-node',
     x: item.position.x + 110 ,
-    y: item.position.y + 186,
+    y: item.position.y + 166,
     width: 14,
     height: 14,
     correlationId: item.id,
@@ -256,7 +256,7 @@ function appendAttrText(item:any,data:any){
     graph.addNode({
       shape: 'rect-text',
       x: item.position.x,
-      y: item.position.y + 203 + i * 25,
+      y: item.position.y + 183 + i * 25,
       width: 260,
       height: 30,
       // label:  data[i].name + '：' + data[i].value,

business-css/frontend/src/views/component/scenario/condition.vue

@@ -458,7 +458,7 @@ function getDeviceInfo(e:any){ // 获取设备信息
   }
   .segmentation-content{
     width: 590px;
-    height: calc(100vh - 420px);
+    height: calc(100vh - 530px);
     background: rgba(250, 250, 250, 1);
     box-sizing: border-box;
     border: 1px solid rgba(242, 242, 242, 1);

business-css/frontend/src/views/component/scenario/createscenario.vue

@@ -115,7 +115,7 @@ function submitClick(){
       emit("closeCreatescenario",false)
       ElMessage({
         type: "success", 
-        message: "新增失败",
+        message: "新增成功",
       });
     }
   })

business-css/frontend/src/views/component/scenario/index.vue

@@ -402,9 +402,9 @@ function changeShowResult(isShow:any){ // 切换显示结果模型
               <img  src="@/assets/table/see.png" alt="" title="查看始发事件" v-if="scope.row.status != 0"
                 @click="departureClick(scope.row,'查看初始条件')" style="cursor: pointer; ">
 
-              <img  src="@/assets/table/moni.png" alt="" title="模拟计算" v-if="scope.row.status == 0"
+              <img  src="@/assets/table/moni.png" alt="" title="模拟计算" v-if="scope.row.status == 0|| scope.row.status == 1"
                 @click="confirmationAnalysis(scope.row)" style="cursor: pointer; ">
-              <img  src="@/assets/table/moni_disabled.png" alt="" title="查看始发事件" v-if="scope.row.status != 0">
+              <img  src="@/assets/table/moni_disabled.png" alt="" title="查看始发事件" v-if="scope.row.status != 0 &&scope.row.status != 1">
 
               <img  src="@/assets/table/result.png" alt="" title="计算结果" v-if="scope.row.status == 2"
                 @click="resultClick(scope.row)" style="cursor: pointer; ">