修改分析设计图片

business-css/frontend/package.json

@@ -35,7 +35,8 @@
     "vue": "^3.2.40",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.1.6",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+export default {
+  name: "连接线",
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from "vue";
+import { ElForm, ElMessage, ElMessageBox, selectEmits } from "element-plus";
+const emit = defineEmits(['closeConnectingwireModel']);
+const props = defineProps({
+  connectingwireInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+})
+const connectingwireInfo:any = ref(props.connectingwireInfo);
+const connectingwireList:any = ref([
+  {
+    label: "实线",
+    strokeDasharray: "0",
+  },
+  {
+    label: "短虚线",
+    strokeDasharray: "5 5",
+  },{
+    label: "中等虚线",
+    strokeDasharray: "8 4",
+  },{
+    label: "长虚线",
+    strokeDasharray: "10 5",
+  },{
+    label: "超长虚线",
+    strokeDasharray: "15 5",
+  },{
+    label: "经典点线",
+    strokeDasharray: "2 2",
+  },{
+    label: "稀疏点线",
+    strokeDasharray: "1 5",
+  },{
+    label: "密集点线",
+    strokeDasharray: "1 2",
+  },{
+    label: "标准点划线",
+    strokeDasharray: "10 3 2 3",
+  },{
+    label: "长点划线",
+    strokeDasharray: "15 5 3 5",
+  },{
+    label: "双点划线",
+    strokeDasharray: "10 3 2 3 2 3",
+  },
+  
+  
+  {
+    label: "间隔长虚线",
+    strokeDasharray: "15 8",
+  },{
+    label: "细密虚线",
+    strokeDasharray: "3 2",
+  },{
+    label: "方块图案",
+    strokeDasharray: "8 4 1 4",
+  },{
+    label: "交替长短线",
+    strokeDasharray: "10 3 5 3",
+  },{
+    label: "渐进虚线",
+    strokeDasharray: "2 2 4 2 6 2",
+  },
+]);
+
+function connectingwireClick(row: any) {
+  connectingwireInfo.value.label = row.label
+  connectingwireInfo.value.strokeDasharray = row.strokeDasharray
+}
+function handleClose() {
+  emit("closeConnectingwireModel",false);
+}
+function confirmClick() {
+  emit("closeConnectingwireModel", connectingwireInfo.value);
+}
+const customizeInfo:any = ref({
+  label: "自定义",
+  strokeDasharray: ""
+})
+function connectingwireInput(e:any) {
+  connectingwireInfo.value.strokeDasharray = e
+}
+onMounted(() => {
+  if(connectingwireInfo.value.label === '自定义'){
+   customizeInfo.value.strokeDasharray = connectingwireInfo.value.strokeDasharray
+  }
+ 
+});
+
+</script>
+
+<template>
+  <div class="connectingwire-box">
+    <div>箭头</div>
+    <el-radio-group v-model="connectingwireInfo.arrow">
+      <el-radio label="0">无箭头</el-radio>
+      <el-radio label="1">单箭头</el-radio>
+      <el-radio label="2">双箭头</el-radio>
+    </el-radio-group>
+     <div style="margin-top: 20px;margin-bottom: 10px;">线宽</div>
+    <el-radio-group v-model="connectingwireInfo.strokeWidth">
+      <el-radio :label="1">1px</el-radio>
+      <el-radio :label="2">2px</el-radio>
+      <el-radio :label="3">3px</el-radio>
+      <el-radio :label="4">4px</el-radio>
+      <el-radio :label="5">5px</el-radio>
+      <el-radio :label="6">6px</el-radio>
+      <el-radio :label="7">7px</el-radio>
+      <el-radio :label="8">8px</el-radio>
+      <el-radio :label="9">9px</el-radio>
+      <el-radio :label="10">10px</el-radio>
+    </el-radio-group>
+    <div style="margin-top: 20px;margin-bottom: 10px;">线形</div>
+    <div class="connectingwire-ul">
+      <div class="connectingwire-li"  v-for="item in connectingwireList" :class="{'active': connectingwireInfo.label === item.label}"
+      :key="item.value" @click="connectingwireClick(item)">
+        <div>{{item.label}}</div>
+      </div>
+      <div style="display: flex;align-items: center">
+          <div  class="connectingwire-li" :class="{'active': connectingwireInfo.label === '自定义'}" @click="connectingwireClick(customizeInfo)">
+          <div>{{ customizeInfo.label }}</div>
+       
+      </div>
+         <el-input v-model="customizeInfo.strokeDasharray" @click.stop="connectingwireClick(customizeInfo)" @input="connectingwireInput" :disabled="connectingwireInfo.label !== '自定义'"
+           placeholder="请输入自定义虚线样式" style="width: 180px;"></el-input>
+      </div>
+     
+    </div>
+
+     <span class="dialog-footer"
+      style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="confirmClick">确 定</el-button>
+    </span>
+  </div>
+
+</template>
+
+<style scoped>
+.connectingwire-ul{
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.connectingwire-li{
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+  text-align: center;
+  border: 1px solid #ccc;
+  margin: 5px;
+  cursor: pointer;
+}
+.connectingwire-customize{
+  width: 200px;
+  height: 80px;
+  text-align: center;
+  border: 1px solid #ccc;
+  margin: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.connectingwire-li:hover ,.connectingwire-customize:hover{
+  border-color: #0398fc;
+}
+.connectingwire-li.active,.connectingwire-customize.active{
+  background: #0398fc;
+  color: #fff;
+}
+</style>

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

@@ -46,7 +46,7 @@ import EditdeviceModel from './editdevice.vue';
 import MaterialModels from './materialmodel.vue';
 import ChangesettingsModels from './changesettings.vue';
 
-
+import ConnectingwireModel from './connectingwire.vue';
 const emit = defineEmits([ 'closeAntvx6']);
 const props = defineProps({
   projectInfo: {
@@ -203,6 +203,7 @@ onMounted(() => {
       rowHeight: 100,
     },
     getDragNode: (sourceNode:any) => {
+      console.log('1111')
       let node:any = sourceNode
       if (node.data && node.data.lineStyle) {
       // 应用管线样式到连接线
@@ -225,13 +226,13 @@ onMounted(() => {
       setTimeout(() => {
         graph.removeNode(node)
       }, 100)
-      return
+      return null
     }
       return sourceNode.clone({ deep: true })
     },
-    getDropNode: (draggingNode) => {
+    // getDropNode: (draggingNode) => {
-    return draggingNode.clone({ deep: true })
+    //     return draggingNode.clone({ deep: true })
-  },
+    //   },
   })
 
   graph.on('node:contextmenu', ({ e, node }) => {
@@ -454,7 +455,6 @@ onMounted(() => {
 
   // undo redo
   graph.bindKey(['meta+z', 'ctrl+z'], () => {
-    debugger
     if (graph.canUndo()) {
       graph.undo()
     }
@@ -475,7 +475,6 @@ onMounted(() => {
     }
   })
   graph.bindKey('delete', () => {
-    debugger
     const cells = graph.getSelectedCells()
     if (cells.length) {
       graph.removeCells(cells)
@@ -985,13 +984,81 @@ function removeClick(){
     }, 500);
   }
 }
-function bigClick(){
+function bigClick(){  // 放大画布
   graph.zoom(0.1)
 }
-function smallClick(){
+function smallClick(){ // 缩小画布
   graph.zoom(-0.1)
 }
-
+function ConnectingwireClick(){ // 打开连接线弹窗
+  isConnectingwire.value = true;
+}
+function dialogConnectingwire(){ // 关闭连接线弹窗
+  isConnectingwire.value = false;
+}
+const connectingwireInfo:any = ref({
+  label: "实线",
+  strokeDasharray: "0",
+  arrow: "1",
+  strokeWidth: 1,
+})
+function closeConnectingwireModel(e:any){ // 关闭连接线弹窗
+  if(e != false){
+  let lineStyle:any = {
+    strokeDasharray: 0,
+    targetMarker: {},
+    sourceMarker: {}
+  }
+    if(e.arrow == 0){
+      lineStyle = {
+        sourceMarker: null,
+        strokeDasharray: e.strokeDasharray,
+        targetMarker: null
+      }
+    }
+    if(e.arrow == 1){
+      lineStyle = {
+        sourceMarker: null,
+        strokeDasharray:e.strokeDasharray,
+        targetMarker: {
+          height: 8,
+          name: "block",
+          width: 12
+        }
+      }
+    }
+    if(e.arrow == 2){
+      lineStyle = {
+        sourceMarker: {
+          height: 8,
+          name: "block",
+          width: 12
+        },
+        strokeDasharray:e.strokeDasharray,
+        targetMarker: {
+          height: 8,
+          name: "block",
+          width: 12
+        }
+      }
+    }
+    graph.options.connecting.createEdge = () => {
+      return new Shape.Edge({
+        attrs: {
+          line: {
+            stroke: '#A2B1C3',
+            strokeWidth: e.strokeWidth,
+            strokeDasharray: lineStyle.strokeDasharray,
+            targetMarker: lineStyle.targetMarker,
+            sourceMarker: lineStyle.sourceMarker
+          }
+        },
+        zIndex: 0
+      })
+    }
+  }
+  isConnectingwire.value = false;
+}
 const nodeId = ref("")
 
 
@@ -1082,6 +1149,9 @@ function closeMaterialModel(e:any){ // 关闭物料信息弹窗
   isMaterialModel.value = false;
 }
 
+const isConnectingwire = ref(false) // 是否连接线
+// const connectingwireData:any = ref([]) // 是否连接线数据
+
 const isChangesettings = ref(false)
 const changesettingsData:any = ref([]) // 是否变动设置
 function dialogChangesettings(){ // 关闭变动设置弹窗
@@ -1178,7 +1248,6 @@ const styleInfo:any = ref({
 
 function inputChange (e:any){
   let node:any =  graph.getCellById(nodeId.value)
-  debugger
   node.attr('label/text', e)
 }
 function lineChange(e:any){
@@ -1354,6 +1423,13 @@ function saveDesign() { // 保存设计
           <img v-else src="@/assets/x6/hide.png">
           <div class="operation-icon-text">显示</div>
         </div>
+
+          <div class="operation-icon-box" @click="ConnectingwireClick">
+          <img v-if="isDisplay" src="@/assets/x6/display.png">
+          <img v-else src="@/assets/x6/hide.png">
+          <div class="operation-icon-text">连接线</div>
+        </div>
+        
         <div class="operation-icon-box" @click="saveDesign">
           <img src="@/assets/x6/save.png">
           <div class="operation-icon-text">保存</div>
@@ -1451,6 +1527,18 @@ function saveDesign() { // 保存设计
       :materialInfo="materialInfo" :deviceInfo="deviceInfo" ref="ChangesettingsModel" @closeChangesettingsModel="closeChangesettingsModel"/>
     </el-dialog>
 
+
+    <el-dialog v-model="isConnectingwire" :close-on-click-modal="false" :modal="false" draggable :before-close="dialogConnectingwire" title="连接线"  append-to-body width="1014px">
+      <div style="height: calc(100vh - 200px); overflow: auto;">
+        <ConnectingwireModel v-if="isConnectingwire == true"  :connectingwireInfo="connectingwireInfo"
+        @closeConnectingwireModel="closeConnectingwireModel"/>
+      </div>
+    </el-dialog>
+
+
+
+
+
   </div>
 </template>