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

这篇具有很好参考价值的文章主要介绍了element -ui 横向时间轴,时间轴悬浮对应日期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果:
element -ui 横向时间轴,时间轴悬浮对应日期,javascript,前端,开发语言

 <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.activities
          const { 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 = planStartTime
            list[1].done = true
          }
          if (planEndTime) {
            list[2].time = planEndTime
            list[2].done = true
          }
          if (resultRedactTime) {
            // console.log(resultRedactTime, "resultRedactTime")
            list[3].time = resultRedactTime
            list[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.activities
          const { 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 = planStartTime
            list[1].done = true
          }
          if (planEndTime) {
            list[2].time = planEndTime
            list[2].done = true
          }
          if (resultRedactTime) {
            console.log(resultRedactTime, "resultRedactTime")
            list[3].time = resultRedactTime
            list[3].done = true
          }
          this.timelineList1.push(list)
        });

        // console.log(this.timelineList, " this.timelineList")

      }
    },

style文章来源地址https://www.toymoban.com/news/detail-861681.html

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

到了这里,关于element -ui 横向时间轴,时间轴悬浮对应日期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui 时间日期选择器限制选择范围

    组件代码 场景1:设置选择今天及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择三个月之内到今天的日期 情景4: 设置选择最大范围为30天

    2024年02月12日
    浏览(10)
  • WPF实现Element UI风格的日期时间选择器

    业务开发过程中遇到一个日期范围选择的需求,和Element UI的DateTimePicker组件比较类似,由两个日历控件组成,联动选择起始时间和结束时间。 WPF中提供了一个 DatePicker 的控件,主要由 DatePickerTextBox 、 Button 和一个 Calendar 组成,其中 Calendar 是后台代码动态添加的,因此不能直

    2024年02月12日
    浏览(12)
  • Element-ui 实现多个日期时间发范围查询

    el-form-item label=\\\"生产时间\\\"             el-date-picker                 v-model=\\\"dateProduct\\\"                 style=\\\"width: 240px\\\"                 value-format=\\\"yyyy-MM-dd\\\"                 type=\\\"daterange\\\"                 range-separator=\\\"-\\\"                 start-placeholder=\\\"生产开始日期\\\"    

    2024年02月11日
    浏览(11)
  • element-ui 日期时间选择控件DateTimePicker 带快捷方式,配置默认时间

    前言:好记性不如烂笔头 带快捷方式的 可设置默认时间 js中的Date对象 setHours()方法—— Date .setHours( hour,min,sec,millisec ),如new Date().setHour(0, 0, 0),new Date().setHour(23, 59, 59) 带快捷键的,关键属性picker-options,单个日期时间的选择或者日期时间段的选择都可以用 配置:picker-optio

    2024年02月11日
    浏览(35)
  • element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间

    选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份) 例:年份选择了2022年,那么日期选择也相应显示到2022年,对月日没有要求,月日默认显示为当前日期的月日,只是年份变

    2024年02月13日
    浏览(12)
  • element-ui 日期时间选择器el-date-picker 设置禁止选择日期

    使用日期选择器时,有的时候需要禁止选择一些日期,我们可以通过快捷选项 picker-options 对象中的禁用日期属性 disabledDate 来设置。

    2024年02月11日
    浏览(17)
  • vue+element ui生成以当月日期时间为表头的table表格

    最近在写项目的时候遇到了一个新的需求,就是需要生成一个以当前月份日期时间为表头的表格,用来展示这个月的值班情况 表格上方有切换月份的按钮,切换对应的月份,表头要显示对应的月份的日期以及对应月份下面的数据,没有安排值班的日期,用/表示,属于当天的

    2024年02月08日
    浏览(16)
  • Element-UI的DateTimePicker禁用日期时间选择(type=datetime)

    \\\"date-fns\\\": \\\"^2.29.3\\\", \\\"element-ui\\\": \\\"^2.15.13\\\", 效果:    效果:

    2024年02月12日
    浏览(10)
  • element-ui时间日期选择器回显功能以及不能修改问题的解决

    地址:element-ui时间日期选择器不能修改问题的解决 - 走看看 属于是强制更改 编辑的时候,修改了时间,控制台中能看到已修改,可是页面上确没修改而且也不能删除,出现这样的问题,该如何解决? 解决方案:在获取数据回显的时候使用$set: 刚开始是直接赋值(如果不是标

    2024年02月11日
    浏览(10)
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

    设置:picker-options=\\\"pickerOptions\\\" 然后在data里面设置 源代码

    2024年02月06日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包