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

<template>
  <div>
    <div style="display: flex;flex-direction: row;margin-top:10px;margin-bottom: 3px;">
      <div v-for="(obj, index1) in list" style="width: 13vw;">
        <div style="display: flex;flex-direction: row;width: 13vw">
          <div style="height: 40px;">
            <!-- {{ index1 }} -->
            <img v-if="index1 == carIndex" style="width: 30px;margin-left: 2vw;" src="@/assets/images/icon/小货车.png" />
          </div>
          <div style="height: 40px;">
            <img v-if="index1 + 0.5 == Number(carIndex)" style="width: 30px;margin-left: 7vw;"
              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 style="width: 13vw;">
          <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;width:100px;text-align: left;left:-10px">{{ gettoptxt(item)  }}</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>{{ gettoptxt(item)  }}</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;width:100px;text-align: left;left:-10px;font-weight: bold;">{{ gettoptxt(item)  }}</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>

import {getCurrentInstance} from 'vue'

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

const internalInstance = getCurrentInstance();

const gettoptxt = (item) => {
  var counttext = "";
  if (props.parentdata.peoplecount != undefined) {
     counttext=  (Object.keys(props.parentdata.peoplecount).indexOf(item.stationName) != -1 ? `上:${props.parentdata.peoplecount[item.stationName].totalin}  下:${props.parentdata.peoplecount[item.stationName].totalout}` : ``)

    //   console.log(item.stationName)
    //  console.log(props.parentdata.peoplecount)
  }

  return (item.planInTime != undefined && item.planInTime != null && item.planInTime.indexOf(":")!= -1 ? (formatDate(item.planInTime)+"  ") : '') +counttext;
  // return counttext;
}

const carIndex = ref(-1)

// setTimeout(() => {
//   internalInstance.ctx.$forceUpdate();
// }, 2000);


// watch(() => props.peoplecount, (val) => {
//   console.log('发生变化咯',props,val)
// })

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 = () => {
  console.log(props.stationInfo)
  var stationObj = props.stationInfo;
  // var stationObj = {
  //   currentStation: ",大洋里,化蛟,高坂",
  //   passStations: ",葛藤坪,溪柄,扆山,田坂,后岐,黄兰,大洋里"
  // }
  var list = props.list
  if (stationObj.passStations == 'null') {
    carIndex.value = 0
    // return index == 0
  } else {
    var passStationsArry = stationObj.passStations.split(",");
    if (stationObj.currentStation == "null" || stationObj.currentStation == "") {
      for (var index in list) {
        if (passStationsArry[passStationsArry.length - 1] == list[index].stationName) {
          if (index == list.length - 1) {
            carIndex.value = index
          } else {
            carIndex.value = Number(index) + 0.5
          }
          console.log(carIndex.value)
        }
      }
    } else {
      if (stationObj.currentStation.split(",").length == 1) {
        for (var index in list) {
          if (stationObj.currentStation == list[index].stationName) {
            carIndex.value = index
          }
        }
      } else {
        var currentStations = stationObj.currentStation.split(",");
        const arry = currentStations.filter((item) => !passStationsArry.some((obj) => item === obj))
        if (arry.length == 1) {
          for (var index in list) {
            if (arry[0] == list[index].stationName) {
              carIndex.value = index
            }
          }
        } else {
          lineList:
          for (var i in props.list) {
            for (var j in arry) {
              if (props.list[i].stationName == arry[j]) {
                carIndex.value = i
                break lineList;
              }
            }
          }
        }
      }

    }
  }
}

onMounted(() => {
  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>