前端鱼骨图组件

需求来了后网上没有搜的合适的例子,要不就是调用第三方库,所以打算自己写一个鱼骨图,样式什么的可以根据自己的需要再慢慢调一下

<template>
  <div class="box" :style="{ height: 'calc(100vh - 140px)' }">
    <div class="mainLine">
      <div class="topbox" v-for="(item, index) in fallData.topData" :key="index">
        <div class="threeTop"></div>
        <el-button
          v-if="isEdit"
          @click="reduceData(1, index)"
          class="deletebtn"
          type="danger"
          icon="el-icon-delete"
          circle
        ></el-button>
        <div class="title">
          <span v-if="!isEdit">{{ item.topTitle }}</span> <el-input v-else v-model="item.topTitle" />
        </div>
        <div class="content">
          <span v-if="!isEdit">{{ item.content }}</span> <el-input v-else v-model="item.content" />
        </div>
      </div>
      <el-button
        v-if="isEdit"
        @click="addData(1)"
        class="bottomadd"
        type="primary"
        icon="el-icon-circle-plus-outline"
        circle
      ></el-button>
      <el-button
        v-if="isEdit"
        @click="addData(2)"
        class="add"
        type="primary"
        icon="el-icon-circle-plus-outline"
        circle
      ></el-button>
      <div class="jiantou"></div>

      <div class="size">
        <span v-if="!isEdit">{{ fallData.title }} </span> <el-input v-else v-model="fallData.title" />
      </div>
    </div>
    <div class="mainLineSecond">
      <div class="bottombox" v-for="(item, index) in fallData.bottomData" :key="index">
        <div class="threeBottom"></div>
        <el-button
          v-if="isEdit"
          @click="reduceData(2, index)"
          class="deletebtnbottom"
          type="danger"
          icon="el-icon-delete"
          circle
        ></el-button>
        <div class="titleBottom">
          <span v-if="!isEdit">{{ item.topTitle }}</span> <el-input v-else v-model="item.topTitle" />
        </div>
        <div class="contentBottom">
          <span v-if="!isEdit">{{ item.content }}</span> <el-input v-else v-model="item.content" />
        </div>
      </div>
    </div>
    <div class="btnbox">
      <el-button type="primary" @click="handleEdit" size="medium ">编 辑 </el-button>
      <el-button type="primary" @click="SubmitEvent" size="medium ">保 存 </el-button>
    </div>
  </div>
</template>

<script>



export default {
  name: "partystatistics",

  components: {

  },
  data () {
    return {
      isEdit: false,
      fallData: {
        title: "鱼骨图主标题",
        topData: [
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
        ],
        bottomData: [
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
          {
            topTitle: '测试',
            content: '描述'
          },
        ]
      }

    }
  },
  methods: {
    handleEdit () {
      this.isEdit = true
    },
    SubmitEvent () {
      console.log(this.fallData)
      this.isEdit = false
    },
    reduceData (val, index) {
      if (val === 1) {
        this.fallData.topData.splice(index, 1)
      } else {
        this.fallData.bottomData.splice(index, 1)
      }

    },
    addData (val) {
      if (val === 1) {
        this.fallData.topData.push({
          topTitle: '',
          content: ''
        })
      } else {
        this.fallData.bottomData.push({
          topTitle: '',
          content: ''
        })
      }
    }
  }
}
</script>
<style scoped  lang="less" >
.box {
  width: 100%;
  background: #ffffff;
  height: 500px;
  position: relative;
}
.mainLine {
  top: 50%;
  left: 44%;
  transform: translate(-50%, -50%);
  text-align: center;
  position: relative;
  height: 10px;
  background: #000;
  width: 80%;
  display: flex;
  justify-content: space-around;
  .jiantou {
    position: absolute;
    width: 40px;
    height: 40px;
    right: -20px;
    transform: rotate(90deg);
    top: -15px;
    background: #000;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .add {
    position: absolute;
    width: 40px;
    height: 40px;
    right: -130px;
    top: -100px;
  }
  .bottomadd {
    position: absolute;
    width: 40px;
    height: 40px;
    right: -130px;
    top: 60px;
  }
  .size {
    position: absolute;
    right: -140px;
    width: 100px;
    height: 40px;
    color: #000;
  }
}
.topbox {
  position: relative;
  width: 5px;
  height: 230px;
  background: #000;
  transform: rotate(25deg);

  .threeTop {
    position: absolute;
    width: 20px;
    background: #000;
    right: -7px;
    transform: rotate(0deg);
    top: -10px;
    height: 20px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .deletebtn {
    position: absolute;
    bottom: 45px;
    left: -50px;
    transform: rotate(-25deg);
  }
  .title {
    text-align: left;
    position: absolute;
    bottom: 0px;
    color: #000;
    transform: rotate(-25deg);
    width: 100px;
  }
  .content {
    text-align: left;
    position: absolute;
    bottom: 120px;
    left: 6px;
    color: #000;
    transform: rotate(-25deg);
    width: 100px;
  }
}
.bottombox {
  position: relative;
  width: 5px;
  height: 230px;
  background: #000;
  margin-left: 140px;
  margin-top: -173px;
  transform: rotate(150deg);
  .threeBottom {
    position: absolute;
    width: 20px;
    background: #000;
    right: -7px;
    transform: rotate(0deg);
    top: -10px;
    height: 20px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .deletebtnbottom {
    position: absolute;
    bottom: 45px;
    left: 10px;
    transform: rotate(210deg);
  }
  .titleBottom {
    text-align: left;
    position: absolute;
    bottom: 0px;
    left: -100px;
    color: #000;
    transform: rotate(-150deg);
    width: 100px;
  }
  .contentBottom {
    text-align: left;
    position: absolute;
    bottom: 100px;
    color: #000;
    left: -100px;
    transform: rotate(-150deg);
    width: 100px;
  }
}
.mainLineSecond {
  top: 50%;
  transform: translate(-28px, -60px);
  text-align: center;
  position: relative;
  height: 0px;
  background: #000;
  width: 80%;
  display: flex;
  justify-content: space-around;
}
.btnbox {
  width: 100%;

  display: flex;
  padding: 20px;
  justify-content: end;
}
</style>