khyznh-ui/src/components/Public/timeLine.vue

<template>
  <div>
    <div style="display: flex;flex-direction: row;margin-bottom:20px">
      <div v-for="(obj, index1) in list" style="width: 13vw;">
        <div style="display: flex;flex-direction: row;">
          <div style="height: 40px;">
            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 30px;" src="@/assets/images/icon/小货车.png" />
          </div>
          <!-- <div style="height: 40px;">
            <img v-if="getCurrentStation(obj.stationName, index1)" style="width: 40px;margin-left: 4vw;"
              src="@/assets/images/icon/小货车.png" />
          </div> -->
        </div>
        <!-- <div
          style="width:13vw;display: flex;flex-direction: row;  font-family: 思源黑体;font-size: 12px;font-weight: bold;color:#C0C4CC">
          <div v-show="index1 != 0">{{ formatDate(obj.planInTime) }}</div>
          <div style="padding-left: 20px;">{{ formatDate(obj.planOutTime) }}</div>
        </div> -->
      </div>
    </div>
    <div style="display: flex;flex-direction: row;padding-left: 3%;">
      <div v-for="(item, index) in list" style="width: 13vw;">
        <div>
          <div style="display: flex;flex-direction: row;">
            <div class="activitieyContent" v-if="index == 0" style="background: #06D903;">
              起
              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planOutTime)}}</div>
            </div>
            <div class="activitieyContent" v-if="index> 0 && index<list.length-1" style="">
              {{ index }}
              <div style="position: absolute;top:-26px;left:-35px;color:#C0C4CC;font-weight:bold;width:100px;display:flex;justify-content: space-evenly;">
                 <div>{{ formatDate(item.planInTime) }}</div> <div>{{ formatDate(item.planOutTime) }}</div>
              </div>
            </div>
            <div class="activitieyContent" v-if="index == list.length-1" style="background: #ad012f;">
              终
              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{ formatDate(item.planInTime)}}</div>
            </div>
            <div class="line" style="margin: 2px 4px;margin-top:13px;" v-if="index != list.length - 1"></div>
          </div>
          <div
            style="writing-mode:vertical-rl;width: 35px;line-height: 40px;font-family: 思源黑体;text-align: left;font-size: 13px;font-weight: bold;letter-spacing: 4px;margin-top: 5px;"
          >
            {{ item.stationName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>

const props = defineProps({
  list: {
    type: [Object],
    default: ""
  },
  stationInfo: {
    type: Object,
    default: ""
  }
});

const activities = [
  {
    content: '白下',
    endTime: '7:00',
    people: '五六七',
    done: true,
    color: '#06D903',
    index: '起点',
    rank: 1,
    isNow: true
  },
  {
    content: '白下',
    people: '吉吉国王',
    done: false,
    startTime: '8:00',
    endTime: '9:00',
    index: '站点1',
    color: '#409EFF',
    rank: 2
  },
  {
    content: '白下',
    people: '吉吉国王',
    done: false,
    startTime: '8:00',
    endTime: '9:00',
    index: '站点2',
    color: '#409EFF',
    rank: 3
  },
  {
    content: '白下',
    people: '吉吉国王',
    done: false,
    startTime: '8:00',
    endTime: '9:00',
    index: '站点2',
    color: '#409EFF',
    rank: 4
  },
  {
    content: '白下',
    people: '吉吉国王',
    done: false,
    startTime: '8:00',
    endTime: '9:00',
    index: '站点2',
    color: '#409EFF',
    rank: 999
  },
]

const formatDate = (value) => {
  var detaAtty = value.split(":")
  if (detaAtty.length > 1) {
    return detaAtty[0] + ":" + detaAtty[1]
  } else {
    return value
  }
}

const getCurrentStation = (name, index) => {
  var stationObj = props.stationInfo;
  if (stationObj.passStations == 'null') {
    console.log(index == 0)
    return index == 0
  } else {
        var passStationsArry = stationObj.passStations.split(",");
  }
}

onMounted(() => {
  console.log(props.stationInfo)
  // getCurrentStation()
});
</script>
<style lang="scss" scoped>
.activitieyContent {
  width: 30px;
  height: 30px;
  opacity: 1;
  background-color: #6495ED;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-family: 思源黑体;
  font-size: 12px;
  color: #ffffff;
  margin-left: 2px;
  position: relative;
}

.line {
  width: 10vw;
  height: 3px;
  border-radius: 10px;
  opacity: 1;
  background: #D8D8D8;
}
</style>