vue-element 蛇形时间轴

1681874876620.jpg

          <TimeLine @onClickDate="stopRoute" :okRouteList="okRouteList" :Index="8"></TimeLine>
                   :Index="8"  每行几个
                  okRouteList   数据源
                  stopRoute  点击事件 
         
                   直接 把下面的整体代码放进去 直接使用
                              -->
   

<div v-if="experienceData.length" style="width: 100%">
    <div style="width: 100%; display: flex; position: relative; margin-top: 20px">
        <div style="width: 10%; margin-left: 30px;position: relative;left: 10px;">
            <div>
                <!-- 开头 -->
                <span data-v-jzl20210826="" style="margin-top: 49.5px" class="headerRadio"></span>
                <div v-if="experienceData.length > Index"><span v-for="(num, index) in leftRows" :key="index" class="hingelisHeard" style="margin-top: 98.9px"></span></div>
                <span data-v-jzl20210826="" v-if="leftShow" style="margin-top: 98.5px" class="hingeorgerHeard"></span>
            </div>
        </div>
        <div style="width: 100%">
            <div style="display: flex" v-for="(item, index) in experienceData" :key="index">
                <div class="timeline" v-for="(v, i) in DisplayProcessing(experienceData, index + 1)" :key="i">
                    <div class="border"></div>
                    <div class="Nodes"></div>
                    <div class="timeNodes">
                        <div class="nodeTimes"></div>
                        <div class="timeContent" @click="onClickDate(v)">
                            <span>{{ v.pointName + v.id }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 10%; margin-right: 30px">
            <div>
                <!-- 第一行 -->
                <span class="hingelis" v-if="experienceData.length > Index"></span>
                <span data-v-jzl20210826="" v-if="experienceData.length <= Index" class="hingeorger"></span>
                <div v-if="experienceData.length > Index * 2"><span class="hingelis" v-for="(num, index) in rightRows" :key="index" style="margin-top: 100.3px"></span></div>
                <!-- 第二行 -->
                <span data-v-jzl20210826="" v-if="rightShow" style="margin-top: 100.3px" class="hingeorger"></span>
            </div>
        </div>
    </div>
</div>
             </template>
             <script>
              export default {
props: ['okRouteList','Index'],
data() {
    return {
        experienceData: [],
        leftRows: 0,
        rightRows: 0,
        leftShow: false,
        rightShow: false
    };
},

created() {},
watch: {
    okRouteList: {
        handler(newName, oldName) {
            this.handlerData(newName);
        },
        immediate: true
    }
},
methods: {
    handlerData(val) {
        this.experienceData = val;
        let rows = Math.ceil(this.experienceData.length / this.Index);
        this.leftRows = rows == 2 ? 0 : rows % 2 == 0 ? parseInt(rows / 2) - 1 : parseInt(rows / 2);
        this.rightRows =
            rows == 4
                ? 1
                : rows % 2 == 0
                ? parseInt(rows / 2) % 2 == 0
                    ? parseInt(rows / 2) >= 4
                        ? parseInt(rows / 2) - 1
                        : parseInt(rows / 2)
                    : parseInt(rows / 2) - 1
                : parseInt(rows / 2) - 1;
        this.leftShow = rows % 2 == 0 ? true : false;
        this.rightShow = rows == 1 ? false : rows % 2 == 1 ? true : false;
    },
    DisplayProcessing(Arg, Num) {
        //数据循环处理
        let arr = Arg.slice(this.Index * (Num - 1), this.Index * Num);
        arr = Num % 2 == 0 ? arr.reverse() : arr;
        return arr;
    },
    onClickDate(data) {
        //选择报告
        this.$emit('onClickDate', data);
    }
}
       };
        </script>
          <style scoped>
      .timeline {
width: 100%;
height: 100px;
position: relative;
   }
        .border {
width: 100%;
border-bottom: 1px solid #409eff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
         }

    .Nodes {
width: 6px;
height: 6px;
border-radius: 50%;
background: white;
border: 5px solid #1e9bff;
position: absolute;
right: 50%;
top: 50%;
transform: translate(0, -50%);
     }

 .timeNodes {
position: absolute;
text-align: center;
left: 50%;
width: 110px;
margin-left: -60px;
top: 60%;
transform: translate(0, -50%);
   }
       .timeContent {
height: 40px;
/* overflow-y: auto; */
/* overflow-x: hidden; */
margin-top: 30px;
cursor: pointer;
    }

         .nodeTimelis {
width: 70px;
/* margin-bottom: 20px; */
margin-left: 20px;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
       }
  .nodeTimelis:active {
color: #1e9bff;
}
    .nodeTimes {
margin-bottom: 0;
   }

    .btns-img {
height: 16px;
width: 16px;
    }

       .hingelis {
content: '';
display: block;
width: 100%;
height: 100.1px;
border: 1px solid #409eff;
border-radius: 0 50px 50px 0;
border-left: 0px;
margin-top: 49.5px;
    }

        .hingelisHeard {
content: '';
display: block;
width: 100%;
height: 101.1px;
border: 1px solid #409eff;
border-radius: 50px 0 0 50px;
border-right: 0px;
margin-top: 50px;
     }

        .hingeorger {
display: block;
width: 100%;
border-bottom: 1px solid #409eff;
margin: 49.5px 0;
position: relative;
      }
     .hingeorgerHeard {
display: block;
width: 100%;
border-bottom: 1px solid #409eff;
position: relative;
     }

    .hingeorgerHeard[data-v-jzl20210826]:after {
content: '';
position: absolute;
top: -4px;
left: -2px;
border-top: 5px solid transparent;
border-right: 12px solid #409eff;
border-bottom: 5px solid transparent;
      }

      .hingeorger[data-v-jzl20210826]:after {
content: '';
position: absolute;
top: -4px;
right: -2px;
border-top: 5px solid transparent;
border-left: 12px solid #409eff;
border-bottom: 5px solid transparent;
   }

      .headerRadio {
display: block;
width: 100%;
border-bottom: 1px solid #409eff;
position: relative;
    }

        .headerRadio[data-v-jzl20210826]:after {
content: '';
position: absolute;
top: -4px;
left: -2px;
width: 1px;
height: 1px;
border-radius: 50%;
background: #409eff;
border: 5px solid #409eff;
position: absolute;
right: 35px;
top: 50%;
transform: translate(0, -50%);
  }
    ::-webkit-scrollbar {
width: 3px;
height: 3px;
     }

      ::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background-color: #99a9bf;
      }

       ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background-color: #d3dce6;
       }
       </style>