xiangan_pc/src/components/360View/time-line-follow-up.vue

<template>
  <div class="component-container time-line">
    <div v-if="timeAxisData.length>0" class="scroll-father">
      <div v-for="(itemData, itemDataIndex) in timeAxisData" :key="itemDataIndex" class="time-line-item">
        <!-- 节点 -->
        <div class="time-line-item-node">
          <i v-show="false" class="node" />
          <div class="node" :class="itemCurrentIndex == itemDataIndex ? 'nodeActive' : ''" />
        </div>
        <!-- 节点尾 -->
        <div class="time-line-item-tail" />
        <!-- 内容 -->
        <div class="time-line-item-wrapper">
          <!-- 抬头 -->
          <div class="time-line-item-wrapper-title">
            <span class="title">
              <span class="title-time">{{ itemData.dateStr ? $options.filters.dateFilterTwo( itemData.dateStr): '空 ' }}</span>
            </span>
          </div>
          <!-- 内容 -->
          <div
            v-for="(item2, itemListIndex) in itemData.dataList"
            :key="itemListIndex"
            class="time-line-item-wrapper-item"
            :class="itemCurrentIndex == itemDataIndex && itemListCurrentIndex==itemListIndex ? 'activeTitle' : ''"
            @click="sclectMentItem(item2,itemDataIndex,itemListIndex)"
          >
            <svg-icon
              :icon-class="item2.formName.includes('电话随访') ? 'icon-record-microphone':
                (item2.formName.includes('短信随访') ? 'icon-message-three' :
                  (item2.formName.includes('门诊随访') ? 'icon-hospital-one' : 'icon-hospital-one'))"
              :class="itemCurrentIndex == itemDataIndex && itemListCurrentIndex==itemListIndex ? 'activeTitle' : 'svg-gray'"
            />
            <span class="time-line-item-wrapper-item-title">{{ item2.formName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty">空</div>
  </div>
</template>

<script>

export default {
  name: 'TimeLine',
  props: {
    timeAxisData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      itemCurrentIndex: 0,
      itemListCurrentIndex: 0
    }
  },
  watch: {
    timeAxisData(val) {
      this.timeAxisData = val
    }
  },
  created() {
    console.log(this.timeAxisData)
    this.itemListCurrentIndex = window.sessionStorage.getItem('itemListIndex') ? window.sessionStorage.getItem('itemListIndex') : 0
    this.itemCurrentIndex = window.sessionStorage.getItem('itemCurrentIndex') ? window.sessionStorage.getItem('itemCurrentIndex') : 0
  },
  methods: {
    // 点击子节点
    sclectMentItem(item2, itemDataIndex, itemListIndex) {
      this.itemCurrentIndex = itemDataIndex
      this.itemListCurrentIndex = itemListIndex
      this.$emit('refreshDataList', item2)
      window.sessionStorage.setItem('itemListIndex', itemListIndex)
      window.sessionStorage.setItem('itemCurrentIndex', itemDataIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.empty {
  color: #000;
}
.time-line {
  width: 180px;
  margin: 0;
  font-size: 14px;
  color: #000;

  .time-line-item-wrapper-item-title{
    vertical-align: middle;
  }
  .time-line-year {
    position: relative;
    height: 50px;
    .time-line-item-date {
      position: relative;
    }
    // 年份
    .time-line-background {
      position: absolute;
      top: 26px;
      left: -20px;
      padding-left: 15px;
      width: 93px;
      height: 32px;
      transform: skew(-30deg);
      line-height: 32px;
      font-size: 16px;
      font-style: oblique;
      font-family: fantasy;
      background: linear-gradient(
        210deg,
        rgba(0, 70, 251, 0.6) 0%,
        rgba(49, 107, 255, 0.1) 100%
      );
      letter-spacing: 1px;
    }
  }

  .time-line-item {
    position: relative;
    padding-bottom: 10px;

    // 节点
    .time-line-item-node {
      z-index: 3;
      display: inline-block;
      position: absolute;
      left: 1px;
      top: 7px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 15px;
      background: #FFFFFF;
      box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.2);

      .node {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        // background-color: #959595;
      }
    }
    // wrapper
    .time-line-item-wrapper {
      position: relative;
      padding-left: 80px;
      top: 3px;
      left: -56px;
      z-index:999;

      // 抬头
      .time-line-item-wrapper-title {
        color: #000;
        width: 110px;

        .title-date {
          display: inline-block;
          padding-right: 30px;
          margin-left: -70px;
          color: #ecb36d;
        }
        .title {
          display: inline-block;
          color: #000;
          cursor: pointer;
          border-radius: 3px;
          font-size: 16px;
          .title-time {
            padding-right: 16px;
            color: #000;
            letter-spacing: 0;
          }
        }
      }

      // 内容
      .time-line-item-wrapper-item {
        cursor: pointer;
        padding: 6px 2px;
        background: rgba(255, 255, 255, 0.2);
        color: #000;
        width: 140px;
        letter-spacing: .1em;
        border-radius: 3px;
        font-size: 14px;
        .svg-icon {
          margin-right: 8px;
        }
      }
      .time-line-item-wrapper-item:hover {
        background: #d2e4ff;
        color: #1c69dc;
        .svg-microphone,.svg-message-three,.svg-hospital-one {
          color: #1c69dc;
        }
      }
      .activeTitle {
         color: #1c69dc;
         font-weight: 700;
      }
    }

    .transitionCon {
      position: relative;
    }
  }
}

// 节点尾（竖线）
.time-line-item-tail {
  position: absolute;
  left: 8px;
  top: -9px;
  height: 100%;
  border-left: 3px solid;
  border-color: #EBF6FF;
}

.nodeActive {
  background-color: #3e9fff !important;
}
.scroll-father {
  height: calc(100vh - 26px - 32px - 42px - 54px - 32px - 50px);
  overflow-y: auto;
}

</style>
<style lang="scss">
.time-line {
  overflow: hidden;
  .el-scrollbar__view {
   height: 100%;
  }
  .el-collapse {
    border: none;
  }
  .el-collapse-item__header {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    display: block;
    height: 32px;
  }
  .el-icon-arrow-right:before {
    content: "";
  }
  .el-collapse-item__wrap {
    background-color: rgba(0, 0, 0, 0);
    border: none;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
    line-height:0;
  }
  .svg-gray {
    color: #97AECE;
  }
}
</style>