当前位置:   article > 正文

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

element 时间轴

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

 <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

data:

const activities = [
  {
    content: '',
    time: '',
    done: false,
    id: '',
    lineId: '',
    lineName: '',
    planId: '',

  },
  {
    content: '计划开始时间',
    time: '',
    done: false,
  },
  {
    content: '结果编制时间',
    time: '',
    done: false,
  },
  {
    content: '结果编制时间',
    time: '',
    done: false,
  },
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

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

      }
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/791653
推荐阅读
相关标签
  

闽ICP备14008679号