html+css+js(vue3项目)自己封装甘特图

我是个小菜鸟，代码些许粗糙，欢迎大佬指点

 

这里是HTML部分，因为我用了格式化工具，所以代码格式有点不同寻常，哈哈哈。

<div class="ganttbox">
          <div class="ganttheader">
            <div
              class="ganttheader_item"
              v-for="(item, index) in NowdayData"
              :key="index"
            >
              <div
                style="width: 100%; height: 100%"
                v-for="(value, key) in item.timer"
                :key="key"
              >
                <span class="ganttheader_item_span" style="height: 52%">{{
                  key
                }}</span>
                <div
                  style="
                    height: 1px;
                    width: 100%;
                    background: rgba(64, 158, 255, 1);
                  "
                ></div>
                <span class="ganttheader_item_span" style="height: 40%">{{
                  value
                }}</span>
              </div>
            </div>
          </div>
          <div class="ganttmain">
            <div
              class="ganttmain_item"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div
                class="ganttmain_item_main"
                v-for="(items, indexs) in NowdayData"
                :key="indexs"
              >
                <div
                  class="ganttmain_item_mains"
                  :id="'ganttmain' + indexs + '' + index + '' + index"
                ></div>
              </div>
            </div>
          </div>
        </div>

 然后这里给css部分，这里我用了scss预语言

.ganttbox {
        height: 40.625rem;
        .ganttheader {
          height: 3.125rem;
          display: flex;
          .ganttheader_item {
            width: 2.6125rem;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(64, 158, 255, 1);
            background: rgb(236, 245, 255);
            .ganttheader_item_span {
              font-size: 14px;
              display: block;
              width: 100%;
              text-align: center;
              color: #409eff;
            }
          }
        }
        .ganttmain {
          height: 37.5rem;
          overflow-y: auto;
          .ganttmain_item {
            height: 3.225rem;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            .ganttmain_item_main {
              width: 2.6125rem;
              height: 100%;
              box-sizing: border-box;
              // border: 1px solid rgba(64, 158, 255, 1);
              display: flex;
              justify-content: center;
              align-items: center;
              .ganttmain_item_mains {
                width: 100%;
                height: 1.15rem;
              }
            }
          }
        }
      }

最后是js部分,这里的数据我在最后给一部分格式，因为也是写的死数据，这个自己定义就好，关键是格式，我几乎用的都是很笨的方法封的，能跑起来就行，对吧

//甘特图数据
const tableData: any = ref(ganttudata);
const NowdayData: any = ref(getNowday());
//甘特图显示
const setganttmain_item = () => {
  tableData.value.forEach((item: any, ind: any) => {
    let result = getNonConsecutive(item.times);
    let d = document.getElementById(
      "ganttmain" + (item.times[0] - 1) + "" + ind + "" + ind
    );
    d?.classList.add("abrrl");
    let e: any = document.getElementById(
      "ganttmain" +
        (item.times[item.times.length - 1] - 1) +
        "" +
        ind +
        "" +
        ind
    );
    e?.classList.add("abrrr");

    item.times.forEach((ite: any, inde: any) => {
      let a = document.getElementById(
        "ganttmain" + (ite - 1) + "" + ind + "" + ind
      );
      a?.classList.add("abgr");
      result.forEach((it: any) => {
        let b = document.getElementById(
          "ganttmain" + (it[0] - 1) + "" + ind + "" + ind
        );
        b?.classList.add("abrrr");
        let c = document.getElementById(
          "ganttmain" + (it[1] - 1) + "" + ind + "" + ind
        );
        c?.classList.add("abrrl");
      });
    });
  });
};
onUpdated(() => {
  setganttmain_item();
});
function getNonConsecutive(arr: any) {
  var result: any = [];
  var results: any = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i + 1] - arr[i] > 1) {
      result.push(arr[i], arr[i + 1]);
      results.push(result);
      var result: any = [];
    }
  }
  return results;
}

这个是数据格式，第二个是一个获取当前月份的方法，这个随便百度一下就好啦，要的话也可以问我

//甘特图数据
const ganttudata = reactive([
  {
    majors: "aaa",
    title: "aaa",
    times: [1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 23],//每个月的第几日
  },...])

再加个效果图