LJ-UI/src/components/demo.vue

<template>
  <div>
    <div class="item" v-for="i in data">
      <div :style="i.children?  `transform: translateY(calc(-${(height||[])[i.id]/2}px + ${4*vw}px + 30px));` : ''"
           :class="i.children? 'item1 itemInb':'itemInb'" ref="item" @click="itemClick(i)"
      >
        <div class="icon" ref="icon" :id="i.id" :childrenId="(i.children || []).map(e=>e.id).join(',')">
          <div class="line" v-for="item in lineData[(i.id||'')]">
            <div v-if="!item.isTop" :style="`width:${item.width}px;height:${item.height}px;position: absolute;`">
              <svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
                <path
                  :d="`M0 0 Q${item.width/2} 0 ${item.width/2} ${item.height/2} ${item.width/2} ${item.height} ${item.width} ${item.height}`"
                  style="stroke: #fff; stroke-width: 2px; fill: none"
                />
              </svg>
            </div>
            <div v-else
                 :style="`width:${item.width}px;height:${item.height}px;transform: translateY(-100%);position: absolute;`"
            >
              <svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
                <path
                  :d="`M0 ${item.height} Q${item.width/2} ${item.height} ${item.width/2} ${item.height/2}   ${item.width/2} 0   ${item.width} 0`"
                  style="stroke: #fff; stroke-width: 2px; fill: none"
                />
              </svg>
            </div>
          </div>
        </div>
        <div class="span">
          <p>{{ i.name }}</p>
<!--          <p>{{ i.id }}</p>-->
<!--          <p>{{ i.id }}</p>-->
        </div>
      </div>
      <div v-if="(i.children || []).length>0"
           :style="`display: inline-block;left:calc${(index+1)*7.7}vw + ${(index+1)*24}px`"

      >
        <Tree :data="i.children" :index="index+1" ref="Tree" :vw="vw" :id="i.id" @getHeight="getHeight" @itemClick="itemClick"/>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Tree',
  props: ['data', 'index', 'vw', 'id'],
  data() {
    return {
      height: null,
      lineData: {}
    }
  },
  watch: {
    vw: {
      deep: true,
      handler() {
        this.getHeight()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight()
      this.$emit('getHeight')
    })
  },
  methods: {
    async getHeight() {
      if (this.$refs.Tree) {
        let arr = {}
        this.$refs.Tree.forEach(e => {
          arr[e.id] = e.$el.offsetHeight
        })
        this.height = arr
      }
      await this.$nextTick()
      if (this.$refs?.Tree?.[0]?.$refs) {
        let icons = this.$refs.icon
        let icon2s = this.$refs.Tree.map(com => com.$refs.icon).flat(Infinity)
        icons.forEach(e => {
          let id = e.getAttribute('id')
          let po = e.getBoundingClientRect()
          let data = {
            top: po.top + (po.height / 2),
            left: po.left + po.width,
            children: e.getAttribute('childrenId').split(',')
          }
          this.$set(this.lineData, id, icon2s.filter(el => {
            return data.children.includes(el.getAttribute('id'))
          }).map(v => {
            let po2 = v.getBoundingClientRect()
            let data2 = {
              top: po2.top + (po2.height / 2),
              left: po2.left
            }
            return {
              width: data2.left - data.left,
              height: Math.max(1, ((data.top - data2.top) > 0 ? (data.top - data2.top) : (data2.top - data.top))),
              isTop: (data.top - data2.top) > 0
            }
          }))
        })
      }
    },
    itemClick(i){
      this.$emit('itemClick',i)
    }
  }
}
</script>
<style lang="scss" scoped>

.item {
  width: auto;
  height: auto;
  position: relative;
}

.itemInb {
  display: inline-block;
  margin-right: 5vw;
}

.icon {
  width: 8vw;
  height: 8vw;
  background-image: url("~@/assets/images/electricityOne1.png");
  background-repeat: no-repeat;
  position: relative;
  background-size: 100% 100%;

  .line {
    position: absolute;
    top: 50%;
    left: 100%;
  }
}

.span {
  color: #fff;
  text-align: center;
}

.item1 {

}
</style>