修改x6页面

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

@@ -46,6 +46,7 @@ const props = defineProps({
     default: {}
   },
 })
+const isLock = ref(false) // 是否锁定
 const deviceTypetype:any = ref('') // 设备类型
 const isAdddevice = ref(false) // 是否添加设备
 const isEditdevice = ref(false) // 是否编辑设备
@@ -56,53 +57,12 @@ const isDisplay = ref(true) // 是否显示
 const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮
 // 为了协助代码演示
 let graph: Graph
-let currentArrowStyle = 'single' // 默认单箭头
-let currentLineStyle = 'solid' // 默认实线
-
-// 设置箭头样式
-// function setArrowStyle(style: 'single' | 'double' | 'none', lineStyle: 'solid' | 'dashed' = 'solid') {
-//   currentArrowStyle = style
-//   currentLineStyle = lineStyle
-//   // 重新配置连接线
-//   graph.options.connecting.createEdge = () => {
-//     const edge = new Shape.Edge({
-//       attrs: {
-//         line: {
-//           stroke: '#A2B1C3',
-//           strokeWidth: 2,
-//           strokeDasharray: lineStyle === 'dashed' ? 5 : 0,
-//           targetMarker: style === 'none' ? null : {
-//             name: 'block',
-//             width: 12,
-//             height: 8,
-//           },
-//           sourceMarker: style === 'double' ? {
-//             name: 'block',
-//             width: 12,
-//             height: 8,
-//           } : null,
-//         },
-//       },
-//       zIndex: 0,
-//     })
-//     return edge
-//   }
-// }
-
 onMounted(() => {
   preWork()
-  if(projectInfo.value.topology != null && projectInfo.value.topology != ''){
-
-  }
-  
-
   // #region 初始化画布 
   graph = new Graph({
     container: document.getElementById('graph-container') as HTMLElement,
     grid: true,
-    background: {
-      color: '#ffffff' // Set a solid color background instead of an image
-    },
     mousewheel: {
       enabled: true,
       zoomAtMousePosition: true,
@@ -249,18 +209,7 @@ onMounted(() => {
     // 包含箭头样式选项
   }
   // 监听Stencil内部的Dnd事件
-  stencil.on('dnd:start', (args:any) => {
-    console.log('Stencil节点开始拖拽', args)
-  })
 
-
-  stencil.on('dnd:drag', (args:any) => {
-    console.log('Stencil节点拖拽中', args)
-  })
-
-  stencil.on('dnd:end', (args:any) => {
-    console.log('Stencil节点结束拖拽', args)
-  })
   document
     .getElementById('stencil')
     ?.appendChild(stencil.container as HTMLElement)
@@ -268,6 +217,9 @@ onMounted(() => {
     // 监听Graph中节点创建事件
   graph.on('node:added', (args:any) => {
     console.log('节点已添加到画布', args)
+    if(isLock.value == true){
+      return
+    }
     const { node } = args
     
     // 检查是否是管线节点
@@ -312,8 +264,6 @@ onMounted(() => {
       }else if(node.store.data.attrs.text.text == '锥底环形槽'){
         deviceTypetype.value = 'ACFTank'
       }
-    
-   
       // 设置固定大小
       node.size(160, 160)
       // 去掉背景节点
@@ -321,13 +271,13 @@ 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)     // 修改高度
       // 删除节点上的文字
       node.attr('text/text', '')
       node.attr('label/text', '')
-
-
       isAdddevice.value = true
 
 
@@ -848,8 +798,12 @@ function copyNode() { // 复制节点
       const newNode = selectedNode.value.clone()
       // 设置新位置（偏移50px）
       newNode.position(position.x + 50, position.y + 50)
+      deviceTypetype.value = newNode.store.data.deviceInfo.type
       // 添加到画布
       graph.addNode(newNode)
+        // 
+      // :deviceId="nodeId" :projectInfo="projectInfo"
+      //     :deviceTypetype="deviceTypetype"
        isMenuShow.value = false 
     } catch (error) {
       console.error('节点复制失败:', error)
@@ -863,13 +817,17 @@ function closeAntvx6() {
 }
 
 function revokeClick(){
-   if (graph.canUndo()) {
+  if (graph.canUndo()) {
-      graph.undo()
+    graph.undo()
-    }
+  }
 }
 function removeClick(){
   if (graph.canRedo()) {
+    isLock.value = true
     graph.redo()
+    setTimeout(() => {
+      isLock.value = false
+    }, 500);
   }
 }
 function bigClick(){
@@ -906,7 +864,9 @@ const selectedDevice = ref({})
 function closeAdddevice(e:any){ // 关闭新增设备弹窗
   selectedDevice.value = e
   let retrievedNode:any = graph.getCellById(nodeId.value)
-  retrievedNode.store.data.deviceInfo = e
+   retrievedNode.attr('text/text', e.name)
+   retrievedNode.attr('label/text', e.name)
+   retrievedNode.store.data.deviceInfo = e
   saveDesign()
   isAdddevice.value = false;
 }
@@ -925,6 +885,9 @@ function closeEditdevice(e:any){ // 关闭编辑设备弹窗
   selectedDevice.value = e
   let retrievedNode:any = graph.getCellById(nodeId.value)
   retrievedNode.store.data.deviceInfo = e
+  retrievedNode.attr('label/refY', 160)
+   retrievedNode.attr('text/text', e.name)
+   retrievedNode.attr('label/text', e.name)
   isEditdevice.value = false;
   saveDesign()
 }
@@ -1080,6 +1043,7 @@ function saveDesign() { // 保存设计
                 // type: getName(key).type,
                 // parentName : getName(key).type == 'device' ? '('+item.deviceName  +')' : '('+item.materialName +')',
                 // parentId : getName(key).type == 'device' ? item.deviceId : item.materialId
+
                 if(cells[i].changesettings[j].deviceMaterialData[k] == null){
                      return
                 }
@@ -1105,18 +1069,20 @@ function saveDesign() { // 保存设计
            
           }
         }
-
+        if(cells[i].deviceInfo != null){
-        devices.push({
+          devices.push({
-          deviceId:cells[i].id,
+            deviceId:cells[i].id,
-          name:cells[i].deviceInfo.name,
+            name:cells[i].deviceInfo.name,
-          type:cells[i].deviceInfo.type,
+            type:cells[i].deviceInfo.type,
-          properties:{},
+            properties:{},
-          material: cells[i].materialInfo != null ? {
+            material: cells[i].materialInfo != null ? {
-            materialId:cells[i].id,
+              materialId:cells[i].id,
-            name:cells[i].materialInfo.name,
+              name:cells[i].materialInfo.name,
-            properties:tempData
+              properties:tempData
-          }:{}
+            }:{}
-        })
+          })
+        }
+        
       }
     }
     console.log(devices)
@@ -1160,21 +1126,7 @@ function saveDesign() { // 保存设计
 </script>
  
 <template>
-  <div class="app-layout x6-container-editbox" @click="isMenuShow = false">
+  <div class="app-layout" @click="isMenuShow = false">
-    <!-- <div class="toolbar">
-      <div class="style-group">
-        <h4>实线</h4>
-        <button @click="setArrowStyle('single', 'solid')">单箭头</button>
-        <button @click="setArrowStyle('double', 'solid')">双箭头</button>
-        <button @click="setArrowStyle('none', 'solid')">无箭头</button>
-      </div>
-      <div class="style-group">
-        <h4>虚线</h4>
-        <button @click="setArrowStyle('single', 'dashed')">单箭头虚线</button>
-        <button @click="setArrowStyle('double', 'dashed')">双箭头虚线</button>
-        <button @click="setArrowStyle('none', 'dashed')">无箭头虚线</button>
-      </div>
-    </div> -->
     <div class="antvx6-header">
       <div class="header-left-box">
         <div class="return-icon-box" @click="closeAntvx6"  title="返回工作台">

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

@@ -39,6 +39,8 @@ const props = defineProps({
     default: ''
   }
 })
+const sliderIndex = ref<any>(0) // 选中时间
+const sliderValues = ref<any>([]) // 时间轴
 const deviceTypetype:any = ref('') // 设备类型
 const isAdddevice = ref(false) // 是否添加设备
 const isEditdevice = ref(false) // 是否编辑设备
@@ -59,45 +61,56 @@ function getScenarioResults(){
     pageNum:1,
     pageSize:999
   }).then((res:any) => {
-    console.log(res.data.records)
-
     scenarioResults.value = groupByDeviceId(res.data.records)
     for (const key in scenarioResults.value) {
       if (!Object.hasOwn(scenarioResults.value, key)) continue;
-      
+      let tempSliderValues  = []
       const element = scenarioResults.value[key];
-
+      sliderValues.value = []
       for(let i = 0;i<customImageData.value.length;i++){
+       
         if(key == customImageData.value[i].id){
+
           customImageData.value[i].scenarioResults = element
-         addAttrText(customImageData.value[i])
+         
+          for(let j = 0;j<element.length;j++){
+            tempSliderValues.push(element[j].step)
+            sliderMarks.value[j] = element[j].step + ''
+          }
+          sliderIndex.value = customImageData.value[i].scenarioResults.length - 1
+          selecteTime.value = customImageData.value[i].scenarioResults[sliderIndex.value].step
+          sliderValues.value = tempSliderValues
+         addAttrText(customImageData.value[i],sliderIndex.value)
         }
        }
     }
   })
 }
-function addAttrText(item:any){
+function addAttrText(item:any,index:any){
-  graph.addNode({
+  // graph.addNode({
-    shape: 'rect-text',
+  //   shape: 'rect-text',
-    x: item.position.x ,
+  //   x: item.position.x ,
-    y: item.position.y + 150,
+  //   y: item.position.y + 150,
-    width: 100,
+  //   width: 100,
-    height: 40,
+  //   height: 40,
-    attrs: {
+  //   attrs: {
-      body: {
+  //     body: {
-        stroke: 'transparent',
+  //       stroke: 'transparent',
-        fill: 'transparent',
+  //       fill: 'transparent',
-        strokeWidth: 1,
+  //       strokeWidth: 1,
-      },
+  //     },
-      label: {
+  //     label: {
-        textAnchor: 'left',
+  //       textAnchor: 'left',
-        refX: 0,
+  //       refX: 0,
-        text: item.deviceInfo.name,
+  //       text: item.deviceInfo.name,
-        fill:  '#363636', 
+  //       fill:  '#363636', 
-        fontSize: 16,
+  //       fontSize: 16,
-      }
+  //     }
-    },
+  //   },
-  })
+  // })
+  if(item.scenarioResults[index] == null){
+    return
+  }
   graph.addNode({
     shape: 'rect-text',
     x: item.position.x ,
@@ -113,8 +126,8 @@ function addAttrText(item:any){
       label: {
         textAnchor: 'left',
         refX: 0,
-        text:  'keff：' + item.scenarioResults[item.scenarioResults.length - 1].keffValue,
+        text:  'keff：' + item.scenarioResults[index].keffValue,
-        fill:  item.scenarioResults[item.scenarioResults.length - 1].keffValue > 0.98 ? '#ff4d4f' : '#363636', 
+        fill:  item.scenarioResults[index].keffValue > 0.98 ? '#ff4d4f' : '#363636', 
         fontSize: 14,
       }
     },
@@ -159,8 +172,8 @@ function addAttrText(item:any){
     },
   })
   let tempData:any = []
-  if(item.scenarioResults[item.scenarioResults.length - 1].attrState){
+  if(item.scenarioResults[index].attrState){
-    let attrState = JSON.parse(item.scenarioResults[item.scenarioResults.length - 1].attrState)
+    let attrState = JSON.parse(item.scenarioResults[index].attrState)
     for (const key in attrState) {
       if (!Object.hasOwn(attrState, key)) continue;
       const element = attrState[key];
@@ -605,7 +618,6 @@ onMounted(() => {
            customImageData.value.push(topology.designData[i])
         }
       }
-      console.log(topology.designData)
       graph.fromJSON(topology.designData);
       getScenarioResults()
     }
@@ -663,7 +675,6 @@ function isDisplayClick(){
     isDisplay.value = false
       let tempGraph:any =   graph.toJSON().cells
       for(let i = 0;i<tempGraph.length;i++){
-        console.log(tempGraph[i])
         if(tempGraph[i].shape == 'rect-text' || tempGraph[i].shape == 'image-node'){
           graph.removeCell(tempGraph[i].id)
         }
@@ -674,7 +685,7 @@ function isDisplayClick(){
       if (!Object.hasOwn(scenarioResults.value, key)) continue;
       for(let i = 0;i<customImageData.value.length;i++){
         if(key == customImageData.value[i].id){
-          addAttrText(customImageData.value[i])
+          addAttrText(customImageData.value[i],sliderIndex.value)
         }
       }
     }
@@ -682,6 +693,49 @@ function isDisplayClick(){
 
 }
 
+
+
+
+function refreshClick(value:any){
+    let tempGraph:any =   graph.toJSON().cells
+    for(let i = 0;i<tempGraph.length;i++){
+
+      if(tempGraph[i].shape == 'rect-text' || tempGraph[i].shape == 'image-node'){
+        graph.removeCell(tempGraph[i].id)
+      }
+    }
+    for (const key in scenarioResults.value) {
+      if (!Object.hasOwn(scenarioResults.value, key)) continue;
+      for(let i = 0;i<customImageData.value.length;i++){
+        if(key == customImageData.value[i].id){
+          const targetIndex = customImageData.value[i].scenarioResults.findIndex((item:any) => item.step === value);
+          sliderIndex.value = targetIndex
+          addAttrText(customImageData.value[i],targetIndex)
+        }
+      }
+    }
+}
+const selecteTime = ref<any>(0) // 选中时间
+const formatTooltip = (val: number) => {
+  return sliderValues.value[val]
+}
+function handleTimeChange(value:any){ // 时间改变
+  console.log(selecteTime.value)
+  refreshClick(sliderValues.value[value])
+ const index = sliderValues.value.findIndex((val:any) => val === value);
+  if (index !== -1) {
+    // debugger
+    
+  }
+
+
+
+
+}
+
+let sliderMarks:any =ref({
+}) 
+
 </script>
  
 <template>
@@ -734,6 +788,20 @@ function isDisplayClick(){
     <el-dialog v-model="isEchartsModel" :close-on-click-modal="false" :modal="false" draggable :before-close="dialogEchartsModel" title="设备分析图像"  append-to-body width="1430px">
       <EchartsModels  v-if="isEchartsModel" :deviceId="deviceId" :scenarioId="scenarioId"/>
     </el-dialog>
+ <div 
+    style="width: 100%;position: absolute;bottom: 20px;z-index: 10; display: flex; justify-content: center;">
+    <el-slider v-if="sliderValues.length>0" v-model="selecteTime"  :format-tooltip="formatTooltip" 
+      :min="0"
+      :max="sliderValues.length - 1"
+      :step="1"
+      :marks="sliderMarks"
+      show-stops  size="large"
+      @change="handleTimeChange"
+        style="width: 80%;"
+      />
+  </div>
+    
+
   </div>
 </template>
  

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

@@ -462,10 +462,10 @@ function changeShowResult(isShow:any){ // 切换显示结果模型
     <el-dialog v-model="isShowResult" :close-on-click-modal="false"
     :modal="false" draggable :before-close="handleResultClose" :title="title"
       append-to-body width="calc(100% - 100px)" class="resultmodel-dialog-box">
-       <div style="display: flex; margin-bottom: 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;padding-top: 10px;">
+       <div style="display: flex; margin-bottom: 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;padding-top: 10px;padding-left: 10px;">
           <div @click="changeShowResult(0)" class="adddevice_navigation_left" :class="{'adddevice_navigation_activeleft':isEchartsModel == 0}">图形化</div>
           <div @click="changeShowResult(1)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 1}">列表</div>
-            <div @click="changeShowResult(2)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 1}">图形</div>
+            <div @click="changeShowResult(2)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 2}">图形</div>
         </div>
 
       <Viewx6  v-if="isShowResult && isEchartsModel == 0 " :projectId="projectInfo.projectId" :scenarioId="scenarioId"/>