element -ui 横向时间轴,时间轴悬浮对应日期

效果:
在这里插入图片描述

 <el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label="周期性巡视" name="zqxxs" key="zqxxs" class="scrollable-tab-pane"><div v-if="timelineList == ''"style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;"><p style="color: #32bfb0;">当前没有周期性巡视数据</p></div><div class="timelineProcessBox" v-for="(item, index) in timelineList" :key="index"><div style="margin-right: 20px;color: #797979;">{{ index + 1 }}</div><div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div><el-timeline class="timeline"><el-timeline-item class="lineitem" placement="top":class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"v-for="(activity, activityIndex) in item" :key="activityIndex" :hide-timestamp="true":timestamp="activity.time"><el-tooltip slot="dot" class="item" effect="dark" :disabled="!activity.done":content="activity.time" placement="top-start"><div class="dot"></div></el-tooltip><span style="display: flex; flex-direction: column"><span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">{{ activity.content }}</span></span></el-timeline-item></el-timeline></div></el-tab-pane><el-tab-pane label="临时性巡视" name="second" key="second" class="scrollable-tab-pane"><div v-if="timelineList1 == ''"style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;"><p style="color: #32bfb0;">当前没有临时性巡视数据</p></div><div class="timelineProcessBox" v-for="(item, index) in timelineList1" :key="index"><div style="margin-right: 20px;color: #797979;">{{ index + 1 }}</div><div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div><el-timeline class="timeline"><el-timeline-item class="lineitem" placement="top":class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"v-for="(activity, activityIndex) in item" :key="activityIndex" :hide-timestamp="true":timestamp="activity.time"><el-tooltip slot="dot" class="item" effect="dark" :disabled="!activity.done":content="activity.time" placement="top-start"><div class="dot"></div></el-tooltip><span style="display: flex; flex-direction: column"><span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">{{ activity.content }}</span></span></el-timeline-item></el-timeline></div></el-tab-pane></el-tabs>

data:

const activities = [{content: '',time: '',done: false,id: '',lineId: '',lineName: '',planId: '',},{content: '计划开始时间',time: '',done: false,},{content: '结果编制时间',time: '',done: false,},{content: '结果编制时间',time: '',done: false,},
]

methods

async handleClick(tab, event) {if (tab.label == '周期性巡视') {this.timelineList = [];const { data: gmData } = await xsjcgz({ tourType: "周期性巡视" });this.zqxxsList = gmData.data;this.zqxxsList.forEach(item => {let list = this.activitiesconst { resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;list[0].id = item.id;list[0].lineId = item.lineId;list[0].lineName = item.lineName;list[0].planId = item.planId;if (planPublishTime) {list[0].time = planPublishTime;list[0].done = true;}if (planStartTime) {list[1].time = planStartTimelist[1].done = true}if (planEndTime) {list[2].time = planEndTimelist[2].done = true}if (resultRedactTime) {// console.log(resultRedactTime, "resultRedactTime")list[3].time = resultRedactTimelist[3].done = true}this.timelineList.push(list)});}else if (tab.label == '临时性巡视') {this.timelineList1 = [];const { data: gmData } = await xsjcgz({ tourType: "临时性巡视" });this.zqxxsList = gmData.data;this.zqxxsList.forEach(item => {let list = this.activitiesconst { resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;list[0].id = item.id;list[0].lineId = item.lineId;list[0].lineName = item.lineName;list[0].planId = item.planId;if (planPublishTime) {list[0].time = planPublishTime;list[0].done = true;}if (planStartTime) {list[1].time = planStartTimelist[1].done = true}if (planEndTime) {list[2].time = planEndTimelist[2].done = true}if (resultRedactTime) {console.log(resultRedactTime, "resultRedactTime")list[3].time = resultRedactTimelist[3].done = true}this.timelineList1.push(list)});// console.log(this.timelineList, " this.timelineList")}},

style

<style lang="scss" scoped>
.scrollable-tab-pane {height: 300px;/* 设置固定高度 */overflow-y: auto;/* 垂直滚动条 */
}.timelineProcessBox {width: 64rem;height: 50px;border: 1px solid #60d6cd;// background: rgba($color: #3bcdc2, $alpha: 0.3);background: #eff8f8;border-radius: 6px;margin-bottom: 20px;padding: 20px;box-sizing: content-box;display: flex;align-items: center;.button1 {display: flex;align-items: center;justify-content: center;color: #0e8ca1;font-weight: bold;font-size: 18px;border: 1px solid #666;width: 120px;height: 40px;border-radius: 5px;}.timeline {display: flex;flex: 1;margin: 40px auto;.lineitem {transform: translateX(50%);width: 22%;}}
}//圆点样式
.dot {border-bottom: 4px solid #3bcdc2 !important;background: #fff;width: 11px;height: 11px;border-radius: 50%;border: 4px solid #3bcdc2;
}// 流程线条样式
::v-deep .el-timeline-item__tail {border-left: none !important;border-top: 4px solid #e4e7ed !important;width: 100% !important;position: absolute !important;top: 0px;
}::v-deep .el-timeline-item__wrapper {padding-left: 0;position: absolute !important;top: 20px !important;transform: translateX(-50%) !important;text-align: center !important;
}::v-deep .el-timeline-item__timestamp {font-size: 14px;
}::v-deep .el-timeline-item__dot {margin-top: -10px;
}.el-timeline-item-active {::v-deep .el-timeline-item__node {background-color: #06b6a9 !important;}::v-deep .el-timeline-item__tail {border-color: #06b6a9 !important;}// &:last-child {//   ::v-deep .el-timeline-item__tail {//     border-color: #e4e7ed !important;//   }// }}//选项卡右侧
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {float: right;
}// 有active样式的下一个li
.el-timeline-item-active+li {::v-deep .el-timeline-item__node {background-color: "#000";}}
</style>
<style lang="scss" scoped>
.el-dialog3 .el-dialog__header {/* display: none; */pointer-events: fill;
}.el-dialog3 .el-dialog {height: 80% !important;overflow: auto;
}.tubiao {overflow-y: auto;width: 1820px;height: 61rem;/* 设置一个固定的高度 */margin: auto;
}.list-title {padding: 20px 0 20px 0;
}.el-col1 {margin-left: 50px;
}.left_div2 {height: 28rem;
}.timeaxis {width: 800px;height: 200px;margin-top: 30px;
}.box {float: left;width: 180px;
}.circular {border: 2px solid #67c23a;width: 10px;height: 10px;border-radius: 10px;background: white;margin: auto;margin-bottom: -4px;position: relative;top: -8px;left: 85px;
}.item {border-bottom: 1px solid #409eff;position: relative;.left {position: absolute;left: 55px;top: -25px;}.center {position: absolute;left: 165px;top: -26px;}
}.item2 {position: relative;.bottom {position: absolute;left: 75px;top: 0px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828429.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序员视角下的AIGC技术:现状、挑战与未来展望

在当今科技日新月异的时代&#xff0c;人工智能生成内容(AIGC)技术正在以前所未有的速度改变着内容创作的格局。作为一名程序员&#xff0c;我密切关注这一领域的发展&#xff0c;并试图从技术角度剖析其现状&#xff0c;探讨未来的趋势。 AIGC技术的发展现状 目前&#xff0…

【11-Ⅱ】Head First Java 学习笔记

HeadFirst Java 本人有C语言基础&#xff0c;通过阅读Java廖雪峰网站&#xff0c;简单速成了java&#xff0c;但对其中一些入门概念有所疏漏&#xff0c;阅读本书以弥补。 第一章 Java入门 第二章 面向对象 第三章 变量 第四章 方法操作实例变量 第五章 程序实战 第六章 Java…

vlan的学习笔记2(vlan间通信)

1.使用路由器的物理接口 原理&#xff1a;在二层交换机上配置VLAN&#xff0c;每个VLAN单独使用一个交换机接口与路由器互联。路由器使用两个物理接口&#xff0c;分别作为VLAN 10及VLAN 20内PC的默认网关&#xff0c;使用路由器的物理接口实现VLAN之间的通信。 实验1&#x…

EasyCVR视频汇聚平台无法自动播放视频的原因排查与解决

国标GB28181协议EasyCVR安防视频监控平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流…

手撕sql面试题:根据分数进行排名,不使用窗口函数

分享一道面试题&#xff1a; 有一个分数表id 是该表的主键。该表的每一行都包含了一场考试的分数。Score 是一个有两位小数点的浮点值。 以下是表结构和数据&#xff1a; Create table Scores ( id int(11) NOT NULL AUTO_INCREMENT, score DECIMAL(3,2), PRIMARY KEY…

Git和SVN有什么区别?

Git和SVN都是版本控制系统&#xff0c;它们都是用来帮助团队协同开发&#xff0c;管理代码版本的。但是&#xff0c;git和svn在实现方式&#xff0c;使用方法&#xff0c;特性等方面都存在一些差异 分布式 vs 集中式 这是二者之间最大的区别。Git是分布式版本控制系统&#xff…

Java23种设计模式-结构型模式之桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;&#xff1a;将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。 通常以下角色&#xff1a; 角色1.抽象类&#xff08;Abstraction&#xff09;&#xff1a;定义抽象接口。 角色2.扩展抽象类&#xff08;Refin…

通过nrm管理源地址

安装nrm npm install -g nrm版本及帮助 Options:-V, --version 查看版本号-h, --help 帮助命令如下图 常用命令 Commands:ls 全部注册数据源列表current [options] 显示当前使用的…

ICCV2023人脸识别TransFace论文及代码学习笔记

论文链接&#xff1a;https://arxiv.org/pdf/2308.10133.pdf 代码链接&#xff1a;GitHub - DanJun6737/TransFace: Code of TransFace 背景 尽管ViTs在多种视觉任务中展示了强大的表示能力&#xff0c;但作者发现&#xff0c;当应用于具有极大数据集的人脸识别场景时&#…

SpringMVC 源码剖析

SpringMVC 源码剖析 0 从源码角度分析SpringMVC执行流程 // 前端控制器&#xff0c;SpringMVC最核心的类 public class DispatcherServlet extends FrameworkServlet {// 前端控制器最核心的方法&#xff0c;这个方法是负责处理请求的&#xff0c;一次请求&#xff0c;调用一次…

C语言趣味代码(三)

这一篇主要围绕写一个程序---寻找数字 来写&#xff0c;在这篇我会详细和大家介绍基本实现以及它的改良版&#xff0c;还有相关知识的拓展&#xff0c;干货绝对满满。 1. 寻找数字 在这一主题下&#xff0c;我们会编写一些代码&#xff0c;来锻炼玩家的反应力&#xff0c;同时…

【python源码解析】深入 Pandas BlockManager 的数据结构和初始化过程

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

Vue2学习笔记(尚硅谷天禹老师)

目录 一、入门案例 二、模板语法 三、数据绑定 四、el和data的两种写法 五、MVVM模型 六、Object.defineproperty方法 七、Vue中响应式原理 八、数据代理 九、methods配置项 十、Vue中的事件处理 十一、Vue中的键盘事件 十二、计算属性 十三、监视属性watch 十四、绑定Class样式…

数据库构建中的三范式设计(附SQL实例说明)

数据库构建中的三范式&#xff08;附SQL实例说明&#xff09; 设计数据库时遵循三范式&#xff08;1NF、2NF、3NF&#xff09;是关系型数据库设计中用于减少数据冗余、提高数据一致性的理论基础。 第一范式&#xff1a;任何一张表必须有主键&#xff0c;每个字段原子性不可再分…

主控制文件(项目的开始)食用顺序_3

遇到问题加QQ群聊 群主在线解答 点击加入群聊【星辰开发】 该文档 如有更新 会直接修改此文档 目前版本 2024.4.23 本项目需求 控制文件 尽量不修改 代码要简介快速 控制文件代码如下 from flask import Flask, request# 三种事件扩展包 自行创建 import Group # 群聊事…

玩转微服务-SonarQube

这里写目录标题 第一节 SonarQube1.1 简介1.2 四个组成部分1.2.1 SonarQube服务器1.2.2 SonarQube数据库1.2.3 插件1.2.4 Scanner 1.3 工作流程 第二节 SonarQube的安装2.1 安装2.2 插件 第三节 P3C规范3.1 简介3.2 SonarQube 配置 P3C规范3.3 IDEA配置 P3C规范 第四节 Maven项…

Mybatis-动态SQL

黑马程序员JavaWeb开发教程 文章目录 一、Mybatis-XML映射文件1、XML映射文件&#xff08;1&#xff09;规范&#xff08;2&#xff09;MybatisX 二、Mybatis-动态SQL-if1、动态SQL2、 标签<if><where>3、示例 三、Mybatis-动态SQL-foreach根据 id 批量删除员工1、…

踩坑npm install qrcodejs2和crypto-js

在VSCode输入以下命令时&#xff1a; npm run dev 报错找不到crypto-js依赖。 通过以下命令安装crypto-js依赖。 npm install --save crypto-js 然后再次运行启动命令继续报错&#xff0c;这次报错找不到qrcodejs2依赖&#xff0c;通过以下命令安装qrcodejs2依赖&#xff…

iOS - 多线程-atomic

文章目录 iOS - 多线程-atomic1. 源码分析1.1 get方法1.2 set方法 2. 一般不使用atomic的原因 iOS - 多线程-atomic atomic用于保证属性setter、getter的原子性操作&#xff0c;相当于在getter和setter内部加了线程同步的锁可以参考源码objc4的objc-accessors.mm它并不能保证使…

刚刚,ChatGPT重大更新!GPT-4更加聪明,已成毕业论文撰写润色修改最佳利器!

今天ChatGPT Plus版本做了升级。GPT-4增强了记忆功能&#xff0c;能够通过你的多次对话了解你的意图&#xff0c;并提供合适的回应&#xff0c;总结一句话就是&#xff1a;更加懂你&#xff01; ChatGPT到底能干什么&#xff1f;我简单总结一下&#xff1a; 翻译&#xff1a;中…