服务管理添加循环

src/views/dataAccessPage/components/accessPageNode.vue

@@ -133,12 +133,27 @@ export default {
           break
         case 'nodedata':
           //executionorder
+          const lineData = {
+            "algorithmlibraryid": 357,
+            "preconditions": null,
+            "algorithmsourcelibraryid": 129,
+            "serviceid": 155,
+            "executionorder": "d2",
+            "computingexpression": null,
+            "algorithmdescription": "循环-查询10次",
+            startid: 355,
+            endid: 352,
+            isLine: false,
+            isDel: false
+          }
+          returnData.push(lineData)
           const newItems = _.orderBy([...returnData], ['executionorder'], ['asc'])
           this.nodeItems = [...this.nodeItems, ...newItems, {
             algorithmdescription: '结束',
             isLine: false,
             isDel: false
           }]
+          sessionStorage.setItem('accessNodes', JSON.stringify(this.nodeItems))
           break
         default:
           break;

src/views/dataAccessPage/components/accessPageNodeBtn.vue

@@ -1,27 +1,33 @@
 <template>
   <div class="accessPageNodeBtn">
-    <div class="accessPageNodeBtn-txt">
-      <el-button @click="handleEdit" round>{{ nodeTxt }}</el-button>
-    </div>
-    <div v-if="isLine" class="accessPageNodeBtn-line">
-      <div @click="handleAdd" class="accessPageNodeBtn-line-add">
-        <i class="el-icon-circle-plus"></i>
+    <template v-if="!nodeItem.startid && !nodeItem.endid">
+      <div class="accessPageNodeBtn-txt">
+        <el-button @click="handleEdit" round>{{ nodeTxt }}</el-button>
       </div>
-      <div v-if="isDel" @click="handleDel" class="accessPageNodeBtn-line-del">
-        <i class="el-icon-error"></i>
+      <div v-if="isLine" class="accessPageNodeBtn-line">
+        <div @click="handleAdd" class="accessPageNodeBtn-line-add">
+          <i class="el-icon-circle-plus"></i>
+        </div>
+        <div v-if="isDel" @click="handleDel" class="accessPageNodeBtn-line-del">
+          <i class="el-icon-error"></i>
+        </div>
       </div>
-    </div>
-    <div class="accessPageNodeBtn-sck">
-      <i class="el-icon-caret-bottom"></i>
-    </div>
+      <div class="accessPageNodeBtn-sck">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+    </template>
+    <template v-else>
+      <data-line :node-item="nodeItem" @handleEdit="handleEdit" />
+    </template>
   </div>
 </template>
 
 <script>
 import PublicPageDialog from '@/components/PublicPageDialog'
+import dataLine from './accessPageNodeLine.vue'
 export default {
   name: 'AccessPageNodeBtn',
-  components: { PublicPageDialog },
+  components: { PublicPageDialog, dataLine },
   props: {
     nodeTxt: {
       type: String,

src/views/dataAccessPage/components/accessPageNodeLine.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="accessPageNodeLine">
+    <div class="accessPageNodeLine-txt">
+      <el-button @click="handleEdit" round>{{ nodeItem.algorithmdescription }}</el-button>
+    </div>
+    <div 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 + 7) + 'px'}" class="accessPageNodeLine-sck">
+      <i class="el-icon-caret-bottom"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AccessPageNodeLine',
+  props: {
+    nodeItem: {
+      type: Object,
+      default: () => new Object()
+    },
+  },
+  data () {
+    return {
+      nodeItems: JSON.parse(sessionStorage.getItem('accessNodes')) || []
+    }
+  },
+  computed: {
+    getLineLength () {
+      const defaultlen = 100
+      if (!this.nodeItems.length) return defaultlen
+      const { startid, endid } = this.nodeItem
+      const stertindex = _.findIndex(this.nodeItems, function (o) { return o.algorithmlibraryid == startid })
+      const endindex = _.findIndex(this.nodeItems, function (o) { return o.algorithmlibraryid == endid })
+      if (stertindex != -1 || endindex != -1) {
+        return (stertindex - endindex) * 134 - 15
+      } else {
+        return defaultlen
+      }
+    }
+  },
+  methods: {
+    handleEdit () {
+      this.$emit('handleEdit', this.nodeItem)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.accessPageNodeLine {
+  position: absolute;
+  top: -134px;
+  right: -100%;
+  z-index: 10;
+  &-right {
+    height: 1px;
+    background-color: #ccc;
+    position: absolute;
+    bottom: -70px;
+    width: calc(100% + 135px);
+    left: -200px;
+    z-index: 10;
+  }
+  &-top {
+    position: absolute;
+    width: 1px;
+    background-color: #ccc;
+    height: 70px;
+    right: calc(50% - 5px);
+    bottom: -70px;
+    z-index: 10;
+  }
+  &-line {
+    position: absolute;
+    width: 1px;
+    background: #ccc;
+    right: calc(50% - 5px);
+  }
+  &-left {
+    height: 1px;
+    background-color: #ccc;
+    position: absolute;
+    width: calc(100% + 30px);
+    left: -95px;
+    z-index: 10;
+  }
+  &-sck {
+    color: #ccc;
+    position: absolute;
+    left: -100px;
+    z-index: 10;
+    transform: rotate(90deg);
+  }
+}
+</style>