修改服务

src/views/dataAccessPage/components/accessPageNode.vue

@@ -146,7 +146,7 @@ export default {
             isLine: false,
             isDel: false
           }
-          // returnData.push(lineData)
+          //returnData.push(lineData)
           const newItems = _.orderBy([...returnData], ['executionorder'], ['asc'])
           this.nodeItems = [...this.nodeItems, ...newItems, {
             algorithmdescription: '结束',

src/views/dataAccessPage/components/accessPageNodeBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="accessPageNodeBtn">
+  <div class="accessPageNodeBtn" :class="['accessPageNodeBtn'+nodeItem.algorithmlibraryid+'']">
     <template v-if="!nodeItem.startid && !nodeItem.endid">
       <div class="accessPageNodeBtn-txt">
         <el-button @click="handleEdit" round>{{ nodeTxt }}</el-button>
@@ -17,7 +17,7 @@
       </div>
     </template>
     <template v-else>
-      <data-line :node-item="nodeItem" @handleEdit="handleEdit" />
+      <data-line :node-item="nodeItem" @handleEdit="handleEdit" @handleDel="handleDel" />
     </template>
   </div>
 </template>

src/views/dataAccessPage/components/accessPageNodeLine.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="accessPageNodeLine">
     <div class="accessPageNodeLine-txt">
-      <el-button @click="handleEdit" round>{{ nodeItem.algorithmdescription }}</el-button>
+      <el-button @click="handleEdit" round>{{ nodeItem.algorithmdescription }}
+      </el-button>
+      <div @click="handleDel" class="accessPageNodeLine-del">
+        <i class="el-icon-error"></i>
+      </div>
     </div>
-    <div class="accessPageNodeLine-right"></div>
+    <div :style="{'width':boxWidth + 'px','left':-(boxWidth - 76) + 'px'}" class="accessPageNodeLine-right"></div>
     <div class="accessPageNodeLine-top"></div>
     <div :style="{'height':getLineLength + 'px','top':-getLineLength + 'px'}" class="accessPageNodeLine-line"></div>
-    <div :style="{'top':-getLineLength + 'px'}" class="accessPageNodeLine-left"></div>
+    <div :style="{'top':-getLineLength + 'px','width':(boxWidth - 96)+'px'}" class="accessPageNodeLine-left"></div>
     <div :style="{'top':-(getLineLength + 7) + 'px'}" class="accessPageNodeLine-sck">
       <i class="el-icon-caret-bottom"></i>
     </div>
@@ -24,12 +28,13 @@ export default {
   },
   data () {
     return {
-      nodeItems: JSON.parse(sessionStorage.getItem('accessNodes')) || []
+      nodeItems: JSON.parse(sessionStorage.getItem('accessNodes')) || [],
+      boxWidth: null
     }
   },
   computed: {
     getLineLength () {
-      const defaultlen = 100
+      const defaultlen = 115
       if (!this.nodeItems.length) return defaultlen
       const { startid, endid } = this.nodeItem
       const stertindex = _.findIndex(this.nodeItems, function (o) { return o.algorithmlibraryid == startid })
@@ -41,9 +46,25 @@ export default {
       }
     }
   },
+  async mounted () {
+    const res = await this.getLineWidth()
+    const { startid } = this.nodeItem
+    const parentWidth = document.querySelector('.accessPageNodeBtn' + startid)?.clientWidth || 100
+    this.boxWidth = parentWidth ? parentWidth + 30 : res
+  },
   methods: {
     handleEdit () {
       this.$emit('handleEdit', this.nodeItem)
+    },
+    handleDel () {
+      this.$emit('handleDel', this.nodeItem)
+    },
+    async getLineWidth () {
+      let width = null
+      await this.$nextTick(() => {
+        width = document.querySelector('.accessPageNodeLine')?.clientWidth
+      })
+      return width
     }
   }
 }
@@ -55,6 +76,19 @@ export default {
   top: -134px;
   right: -100%;
   z-index: 10;
+  &-del {
+    position: absolute;
+    top: 5px;
+    right: -26px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #ccc;
+    transition: all 0.3s;
+    z-index: 10;
+    &:hover {
+      color: rgb(243, 37, 9);
+    }
+  }
   &-right {
     height: 1px;
     background-color: #ccc;