实现一个地铁线路站点

实现一个车站站点的逻辑， 设置每个站点的宽为100px，用圈圈表示站点，站点周围的虚线使用定位，并且它们的宽度为父站点的宽度，还需要使站点处圈圈的背景色为白色，覆盖圈圈处的白色虚线，当点击高亮时给圈圈加上橙色的border，最后循环使用计时器让每一站点自动高亮显示。

<template>
  <div>
    <el-form ref="queryForm" :model="queryParams" inline>
      <el-form-item label="线路选择" prop="projectId">
        <el-cascader
          v-model="queryParams.projectId"
          :options="cityList"
          :props="props"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-button @click="startRun">{{ inspectText }}</el-button>
    </el-form>
    <!--站点线-->
    <div class="timeLine" style="overflow: hidden">
      <div class="ul_box">
        <div class="dashline" v-if="lineList.length > 0"></div>
        <ul class="station" ref="myStation">
          <li class="station_item" v-for="(item, index) in lineList" :key="index">
            <!--圈圈节点-->
            <div
              @click="changeActive(item, index)"
              @mouseenter="stopRun"
              :class="['station_node', { active: index == activeIndex }]"
            ></div>
            <!--线-->
            <div class="station_item_line"></div>
            <!--文本-->
            <div class="station_item_text" :class="textStyle(item.stationName)">
              {{ item.stationName }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "station",
  components: {},
  data() {
    return {
      queryParams: {},
      props: {
        expandTrigger: "hover",
        emitPath: false,
      },
      cityList: [
        {
          children: [
            {
              label: "南京1号线",
              value: '1-1',
            },
          ],
          label: "南京",
          value: "1",
        },
      ],
      activeIndex: -1,
      lineList: [
        { id: 0, stationName: "三山街" },
        { id: 1, stationName: "张府园" },
        { id: 2, stationName: "新街口" },
        { id: 3, stationName: "珠江路" },
        { id: 4, stationName: "鼓楼" },
        { id: 5, stationName: "玄武门" },
      ],
      flag: false,
    };
  },
  created() {
    //获取后端接口信息
  },
  computed: {
    inspectText() {
      const text = this.flag ? "结束巡检" : "开始巡检";
      return text;
    },
  },
  methods: {
    startRun() {
      this.flag = !this.flag;
      if (this.flag) {
        // console.log("开始");
        this.timer = setInterval(() => {
          this.activeIndex++;
          if (this.activeIndex >= this.lineList.length) {
            this.activeIndex = 0;
          }
          const value = this.lineList[this.activeIndex];
          this.changeActive(value, this.activeIndex);
        }, 5000);
      } else {
        this.stopRun();
      }
    },
    stopRun() {
      // console.log("结束");
      clearInterval(this.timer);
      this.flag = false;
    },
    changeActive(item, index) {
      this.$emit("changeStation", item);
      this.activeIndex = index;
    }
  },
};
</script>

<style lang="scss" scoped>
.ul_box {
  width: 100%;
  float: left;
  overflow: hidden;
}
// 线的宽度
.station_item {
  display: inline-block;
  position: relative;
  width: 100px;
}
// 圆形的样式
.station_node {
  box-sizing: border-box;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #e4e7ed;
  cursor: pointer;
}
//点击高亮时
.station_node.active {
  border: 6px solid #f68720;
}
.dashline {
  float: left;
  width: 80px;
  height: 10px;
  border-bottom: 2px dashed #e4e7ed;
}
// 线的样式
.station_item_line {
  position: absolute;
  left: 0px;
  top: 10px;
  height: 10px;
  width: 100%;
  border-top: 2px dashed #e4e7ed;
  pointer-events: none;
}
.station_item_text {
  margin-top: 10px;
  color: #fff;
  font-size: 12px;
}
</style>