khyznh-ui/src/components/HomeStatics/messageTable.vue

<template>
  <div
    class="countPageClass"
    style="padding-left: 1vw; padding-top: 1.5vh; padding-right: 2vw"
  >
    <div>
      <div class="title" style="padding-left: 0.5vw">车辆报站</div>
      <div
        style="margin-left: 1vw; max-height: 20vh; overflow-y: scroll"
        class="tableClass"
      >
        <div v-for="(item, index) in messageList" :key="index">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              margin-top: 20px;
            "
          >
            <div :class="item.type == '1' ? 'carClass' : 'goodClass'" style="width: 80px">
              {{ item.carNum }}
            </div>
            <div class="contentClass" style="width: 60px">{{ "即将到达" }}</div>
            <div class="stationClass">
              <el-popover placement="top-start" trigger="hover" :content="item.station">
                <template #reference
                  ><span>{{ item.station }}</span>
                </template>
              </el-popover>
            </div>
            <div class="timeClass">{{ moment(item.time).format("MM/DD HH:mm") }}</div>
          </div>
          <el-divider />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CarInfo" lang="ts">
import moment from "moment";
import { playlist } from "@/api/gpsData";

const messageList = ref([]);

const getList = () => {
  playlist().then((res) => {
    res = res.sort((a, b) => {
      return moment(b.time).unix() - moment(a.time).unix();
    });
    messageList.value = res;
  });
};

onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.countPageClass {
  height: 28vh;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);

  .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

.tableClass::-webkit-scrollbar {
  display: none;
}

.contentClass {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.stationClass {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 13px;
  color: #000000;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 44px;
  text-align: center;
}

.timeClass {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 10px;
  color: #000000;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.el-divider--horizontal {
  margin-top: 10px;
  margin-bottom: 0px;
}

.carClass {
  background: url("@/assets/images/home/Bg(2).png") no-repeat;
  background-size: 100% 100%;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  width: 5vw;
  text-align: center;
  height: 24px;
  line-height: 24px;
}

.goodClass {
  background: url("@/assets/images/home/Bg(3).png") no-repeat;
  background-size: 100% 100%;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 10px;
  color: #6a4119;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  width: 5vw;
  text-align: center;
  height: 24px;
  line-height: 24px;
}
</style>