实现一个地铁线路站点

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

<template><div><el-form ref="queryForm" :model="queryParams" inline><el-form-item label="线路选择" prop="projectId"><el-cascaderv-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>

实现一个地铁线路站点相关推荐

python统计爬取全国地铁线路站点
结果:输出json文件,格式如下图代码: # coding=utf-8 import requests from bs4 import BeautifulSoup import json impor ...
Python爬取全国地铁站点、地铁线路和发车时刻
爬取全国地铁站点.地铁线路和发车时刻的方法. 一.两种爬取方法概述 (一)html页面爬取 1. 为了收集全国地铁线路的发车时刻信息,刚开始尝试的方法如下: (1)找到每个城市的地铁官网,如& ...
官宣|深圳新增6条新建地铁线路和100个站点
深圳市规划和自然资源局近日发布了<深圳市轨道交通四期车站选址方案>新增6条新建地铁线路和100个站点正式官宣. 本次规划涉及6号线支线.12号线.13号线.14号线.16号线.20号线一期 ...
DayDayUp：上海地铁线路高清图、1~17号地铁线路各站点名称及对应路线集合之详细攻略
DayDayUp:上海地铁线路高清图.1~17号地铁线路各站点名称及对应路线集合之详细攻略目录上海高清地铁线路图集合 1.实时查询地铁线人流量拥挤度 1.1.网页端查询 1.2.手机APP端查询 ...
【数据分享】全国地铁站点及其地铁线路数据
本文中向大家分享一下全国各地区的地铁站点数据以及地铁线路的数据.所有数据已经制作完毕,但目前暂不清楚数据的具体时间,各数据已经按照不同城市进行划分,每个城市内包含所有的地铁站点以及地铁线路数据.数据的 ...
Kettle【实践 08】全国地铁线路信息及线路站点座标数据获取脚本及技巧说明（云资源分享:完整ktr脚本及20221008最新数据SQL）
资源链接在文章末尾,包含文件: 1.介绍地铁线路及站点数据在某些业务场景下是挺有用的,具体使用这里不是重点,脚本使用到的转换步骤有: 生成记录 HTTP web service 过滤数据增加常量 ...
java地铁线路规划_地铁线路规划——简单分析
计算地铁线路最短路径我们要将地铁线路信息等用一个文本文件的形式保存起来,应保存的信息应包括地铁线路名称.各个地铁站点的名称以及车站换乘信息,使得应用程序可以通过读取这个文件,就能掌握关于北京地铁线路 ...
石家庄地铁线路查询系统
石家庄地铁线路查询系统开发: 合作人:张旺数据库的设计为:建立了一张表,有line_id(路线号).stop_id(站号).stop_name(站名).change(某站可换乘的线号)这几列. st ...
预培训个人项目（地铁线路规划）
预培训个人项目(地铁线路规划) 1.需求需求1 用户可以通过命令行启动这个程序.程序在启动时,会读取不同命令对应的命令行参数.对于地铁线路信息图,我们约定它采用参数 -map 作为标志.程序启动时需 ...

实现一个地铁线路站点

实现一个地铁线路站点相关推荐

最新文章

热门文章