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.rhkb.cn/news/315937.html

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

相关文章

Spring Kafka—— KafkaListenerEndpointRegistry 隐式注册分析

由于我想在项目中实现基于 Spring kafka 动态连接 Kafka 服务&#xff0c;指定监听 Topic 并控制消费程序的启动和停止这样一个功能&#xff0c;所以就大概的了解了一下 Spring Kafka 的几个重要的类的概念&#xff0c;内容如下&#xff1a; ConsumerFactory 作用&#xff1a;…

【Linux】信号的产生

目录 一. 信号的概念signal() 函数 二. 信号的产生1. 键盘发送2. 系统调用kill()raise()abort() 3. 软件条件alarm() 4. 硬件异常除零错误:野指针: 三. 核心转储 一. 信号的概念 信号是消息的载体, 标志着不同的行为; 是进程间发送异步信息的一种方式, 属于软中断. 信号随时都…

PNPM - nodejs 包管理

文章目录 一、关于 PNPM开发动机1、节省磁盘空间2、提升安装速度3、创建一个 non-flat node_modules 文件夹 二、安装通过 npm 安装 pnpm通过 Homebrew 安装 pnpm 三、pnpm CLI1、与 npm 的差异2、参数-C <path>, --dir <path>-w, --workspace-root 3、命令4、环境…

免费语音转文字:自建Whisper,贝锐花生壳3步远程访问

Whisper是OpenAI开发的自动语音识别系统&#xff08;语音转文字&#xff09;。 OpenAI称其英文语音辨识能力已达到人类水准&#xff0c;且支持其它98中语言的自动语音辨识&#xff0c;Whisper神经网络模型被训练来运行语音辨识与翻译任务。 此外&#xff0c;与其他需要联网运行…

Blender曲线操作

1.几种常见建模方式 -多边形建模&#xff1a;Blender&#xff0c;C4D&#xff0c;3DsMax&#xff0c;MaYa -曲线&#xff1a; -曲面&#xff1a;Rhino&#xff08;Nurbs&#xff09; -雕刻&#xff1a;Blender&#xff0c;ZBrush -蜡笔&#xff1a;Blender 1&#xff09;新…

windows11家庭版开启Hyper-v

前提&#xff1a;如果在控制面板中-->程序和功能-->启用和关闭windows功能-->没有Hyper-v 1.什么是Hyper-v&#xff1f; Hyper-v分为两个部分&#xff1a;底层的虚拟机平台、上层的虚拟机管理软件 2.Hyper-v安装 2.1新建hyper.cmd文件&#xff0c;写入下面的内容&…

物联网:从电信物联开发平台AIoT获取物联设备上报数据示例

设备接入到电信AIoT物联平台后&#xff0c;可以在平台上查询到设备上报的数据。 下面就以接入的NBIOT物联远传水表为例。 在产品中选择指定设备&#xff0c;在数据查看中可以看到此设备上报的数据。 示例中这组数据是base64位加密的&#xff0c;获取后还需要转换解密。 而我…

Linux软件包管理器——yum

文章目录 1.什么是软件包1.1安装与删除命令1.2注意事项1.3查看软件包1.3.1注意事项&#xff1a; 2.关于rzsz3.有趣的Linux下的指令 -sl 1.什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一…

操作系统安全:Windows与Linux的安全标识符,身份鉴别和访问控制

「作者简介」:2022年北京冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础对安全知识体系进行总结与归纳,著作适用于快速入门的 《网络安全自学教程》,内容涵盖系统安全、信息收集等12个知识域的一百多个知识点,持续更新。 操作系统有4个安全目标…

Unity Meta Quest MR 开发(七):使用 Stencil Test 模板测试制作可以在虚拟与现实之间穿梭的 MR 传送门

文章目录 &#x1f4d5;教程说明&#x1f4d5;Stencil Test 模板测试&#x1f4d5;Stencil Shader&#x1f4d5;使用 Unity URP 渲染管线设置模板测试⭐Render Pipeline Asset 与 Universal Renderer Data⭐删除场景中的天空盒⭐设置虚拟世界的层级 Layer⭐设置模板测试 &#…

大数据运维之数据质量管理

第1章 数据质量管理概述 1.1 数据质量管理定义 数据质量管理&#xff08;Data Quality Management&#xff09;&#xff0c;是指对数据从计划、获取、存储、共享、维护、应用、消亡生命周期的每个阶段里可能引发的各类数据质量问题&#xff0c;进行识别、度量、监控、预警等一…

使用工具速记

文章目录 一、sqlyoy登录账号信息迁移二、idea导入之前的已配置的idea信息三、设置windows UI大小四、其他 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、sqlyoy登录账号信息迁移 工具(sqlyog上面菜单栏)->导入导出详情->选择要导出的账号…

Graph Neural Networks(GNN)学习笔记

本学习笔记的组织结构是&#xff0c;先跟李沐老师学一下&#xff0c;再去kaggle上寻摸一下有没有类似的练习&#xff0c;浅做一下&#xff0c;作为一个了解。 ———————————0428更新—————————————— 课程和博客看到后面准备主要看两个&#xff1a;GCN和…

jvm知识点总结(二)

Java8默认使用的垃圾收集器是什么? Java8版本的Hotspot JVM,默认情况下使用的是并行垃圾收集器&#xff08;Parallel GC&#xff09; 如果CPU使用率飙升&#xff0c;如何排查? 1.先通过top定位到消耗最高的进程id 2.执行top -h pid单独监控该进程 3.在2中输入H&#xff…

Gin的中间件执行流程与用法

一、背景 我们在使用Gin框架进行Web开发的时候&#xff0c;基本上都会遇到登录拦截的场景。 例如某些接口必须在登录以后才能访问&#xff0c;根据登录用户的信息以及权限&#xff0c;拿到属于自己的数据, 反之&#xff0c;没登录过则直接拒绝访问。 那么我们怎么做到这些登录…

Unreal Engine添加UGameInstanceSubsystem子类

点击C类文件夹&#xff0c;在右边的区域点击鼠标右键&#xff0c;在弹出的菜单中选择“新建C类”在弹出的菜单中选中“显示所有类”&#xff0c;选择GameInstanceSubsystem作为父类, 点击“下一步”按钮输入子类名称“UVRVIUOnlineGameSubsystem”&#xff0c;选择插件作为新类…

9种单片机常用的软件架构

长文预警&#xff0c;加代码5000多字&#xff0c;写了4个多小时&#xff0c;盘软件架构&#xff0c;这篇文章就够了! 可能很多工程师&#xff0c;工作了很多年&#xff0c;都不会有软件架构的概念。 因为我在做研发工程师的第6年&#xff0c;才开始意识到这个东西&#xff0c;在…

IDEA主题美化【保姆级】

前言 一款好的 IDEA 主题虽然不能提高我们的开发效率&#xff0c;但一个舒适简单的主题可以使开发人员更舒适的开发&#xff0c;时常换一换主题可以带来不一样的体验&#xff0c;程序员的快乐就这么简单。话不多说&#xff0c;先上我自己认为好看的主题设置。 最终效果图: 原…

qt学习篇---C++基础学习

本学习笔记学习下面视频总结&#xff0c;感兴趣可以去学习。讲的很详细 【北京迅为】嵌入式学习之QT学习篇_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1tp4y1i7EJ/?spm_id_from333.337.search-card.all.click&vd_source8827cc0da16223b9f2ad8ae7111de9e2 目录 C…

使用逆滤波算法deconvwnr恢复图像回复图像时,产生了很多横竖条纹。解决办法

使用逆滤波算法deconvwnr恢复图像回复图像时&#xff0c;产生了很多横竖条纹。解决办法 原来的代码 % 清除工作空间并关闭所有图形窗口 clear; clc; close all;% 读取原始图像 original_image imread(pic3.jpg);% 显示原始图像 subplot(131); imshow(original_image); title…