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,一经查实,立即删除!

相关文章

【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…

通过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;同时…

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

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

玩转微服务-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、…

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;中…

电商技术揭秘三十一:智能风控与反欺诈技术

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

C++必修:从C到C++的过渡(下)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. 缺省参数 1.1. 缺省参数的使用 缺省参数是声明或定义函数时为函数的参数指定…

Java基础之JVM对象内存分配机制简介

一 对象内存分配 1.1 运行时数据区域 1.2 常见java应用启动JVM参数&#xff1a; -Xss&#xff1a;每个线程的栈大小(单位kb)-Xms&#xff1a;堆的初始大小&#xff0c;默认物理内存的1/64,示例&#xff1a;-Xms:4g -Xms:10m-Xmx&#xff1a;堆的最大可用大小&#xff0c;默认物…

(Java)队列

一.概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾&#xff08;Tail/Rear&#xff09; 出队列&#xff1a;进行删…

数据的正态性检验

正态性检验 判断 pd.Series 数据是否符合正态分布&#xff0c;可以采用以下几种方法。 计算偏度 偏度&#xff08;Skewness&#xff09;是衡量数据分布对称性的统计量。如果偏度大于 0&#xff0c;则数据分布是右偏的&#xff08;正偏斜&#xff09;&#xff1b;如果偏度小于…

时尚新选择,小塔RFID技术重塑样衣管理

在时尚领域&#xff0c;样衣是创意与工艺的完美结合&#xff0c;每一件都承载着设计师的心血与期待。然而&#xff0c;当这些珍贵的样版在传统的管理体系下流转时&#xff0c;样版管理成为一个令人头疼的问题。手动记录、盘点和样板追溯成为常态&#xff0c;但这种方式容易出错…

Web前端开发之HTML_1

第一个前端程序VS Code安装VS Code 快捷键 1. 第一个前端程序 使用记事本&#xff0c;新建一个文本文档&#xff0c;重命名为Welcome.html&#xff0c;如下图&#xff1a; 用记事本打开文档&#xff0c;内容输入如下&#xff1a; <html> <head> <t…