SMAirports/src/views/newBagDetails/components/baggageView.vue

<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageView">
    <el-scrollbar style="height: 100%">
      <div v-infinite-scroll="load" class="baggageView-content">
        <div v-for="(item,index) in tableData" :key="index" class="baggageView-list">
          <div class="part2">
            <div class="part2_info">
              <div class="title">
                <div class="fightNo">{{ item.flightNo }}</div>
                <div class="fightDate">{{ item.flightDate }}</div>
                <div class="fightLine">{{ item.sourceAirport }}{{ item.takeoff_terminal }} -- {{item.target_airport}}{{ item.target_terminal }}</div>
                <div class="fightTime">08:22 -- 10:22</div>
              </div>
              <div class="baggage-track-chart">
                <div class="step-line">
                  <div v-for="(line, index) in 6" :key="index" :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]" />
                </div>
                <div v-for="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.currentResult }">
                  <div class="step-circle">
                    <span class="step-name">{{ item.nodeName }}</span>
                  </div>
                  <div v-if="item.currentResult" class="step-info">
                    <div :class="statusClasses(item.currentResult)">{{ item.currentResult }}</div>
                    <span class="step-time">{{ item.processingTime }}</span>
                    <div class="step-location">{{ item.locationId }}</div>
                  </div>
                  <div v-else class="step-info">无</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import pf from '@/layout/mixin/publicFunc'
export default {
  name: 'BaggageView',
  mixins: [pf],
  props: {
    query: {
      type: Object,
      default: () => { }
    },
    tagObj: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      stepNodes: [],
      tableData: [],
      page: 0,
      pageSize: 20,
      dataContent: {},
      loading: false,
      noMore: false
    }
  },
  computed: {
    activeStepLine () {
      return function (index) {
        return this.stepNodes[index].currentResult && this.stepNodes[index + 1].currentResult
      }
    },
    statusClasses () {
      return function (status) {
        const classes = ['step-status']
        if (typeof status === 'string') {
          if (status.includes('正常') || status.includes('通过')) {
            classes.push('step-status-normal')
          } else {
            classes.push('step-status-abnormal')
          }
        }
        return classes
      }
    },
  },
  watch: {
    tagObj: {
      handler (obj) {
        this.dataContent = obj
        this.restTable()
        this.load()
      },
      deep: true
    }
  },
  created () {
    this.dataContent = this.query
  },
  mounted () {
    this.resetStepNodes()
  },
  methods: {
    //获取行李信息
    async getLuggageList (id, dataContent = this.dataContent, page, pageSize) {
      function isSameStep (code1, code2) {
        const sameStepCodes = ['ARRIVED', 'TRANSFER']
        return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
      }
      try {
        this.loading = true
        this.resetStepNodes()
        const { code, returnData } = await this.getQueryList(id, dataContent, page, pageSize)
        if (code == 0) {
          if (returnData.length === 0) {
            this.page--;
            this.noMore = true;
            this.loading = false;
          }
          returnData.forEach(({ nodeCode, nodeName, processingTime, locationId, currentResult }) => {
            const replaceIndex = this.stepNodes.findIndex(
              stepNode => stepNode.nodeCode === nodeCode || isSameStep(stepNode.nodeCode, nodeCode)
            )
            if (replaceIndex > -1) {
              this.stepNodes.splice(replaceIndex, 1, {
                nodeCode,
                nodeName,
                processingTime: processingTime?.replace('T', '\n'),
                locationId,
                currentResult
              })
            }
          })
          this.tableData.push(...returnData);
          this.loading = false;
        } else {
          this.page--;
          this.loading = false;
          this.$message.error("获取表格数据失败");
        }
      } catch (error) {
        console.log(error)
      }
    },
    restTable () {
      this.loading = false
      this.noMore = false
      this.page = 0
      this.tableData = []
    },
    load () {
      if (this.noMore || this.loading) {
        return;
      }
      this.getLuggageList(SERVICE_ID.bagDetailId, this.dataContent, ++this.page, this.pageSize);
      console.log(this.stepNodes)
    },
    resetStepNodes () {
      this.stepNodes = [
        {
          nodeCode: 'CHECKIN',
          nodeName: '值机'
        },
        {
          nodeCode: 'SECURITY',
          nodeName: '安检'
        },
        {
          nodeCode: 'SORT',
          nodeName: '分拣'
        },
        {
          nodeCode: 'LOAD',
          nodeName: '装车'
        },
        {
          nodeCode: 'INFL',
          nodeName: '装机'
        },
        {
          nodeCode: 'UNLOAD',
          nodeName: '卸机'
        },
        {
          nodeCode: 'ARRIVED',
          nodeName: '到达'
        }
      ]
    },
  }
}
</script>

<style lang="scss" scoped>
.baggageView {
  height: 100%;
  &-list {
    height: 183px;
    border-bottom: 1px solid #dfe3ea;
    padding: 30px 32px 47px 32px;
    &:last-child {
      border-bottom: none;
    }
    .part2 {
      width: 100%;
      background: #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .part2_info {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 42px;

        .title {
          width: 160px;
          margin-right: 30px;
          font-size: 14px;
          font-family: Helvetica;
          font-weight: 400;
          color: #101116;
          line-height: 1;
          .fightNo {
            font-size: 24px;
            font-family: Helvetica;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .fightDate {
            margin-bottom: 15px;
          }
          .fightLine {
            margin-bottom: 8px;
          }
        }
        .type {
          font-size: 18px;
          font-weight: bold;
          margin-right: 20px;
          .warn {
            color: #df3559;
          }
          .normal {
            color: #519f6b;
          }
        }
        .airline {
          width: 120px;
          margin-right: 20px;
        }
        .baggage-track-chart {
          flex: 1;
          height: 124px;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
        }
        .step-line {
          width: calc(100% - 80px);
          height: 10px;
          position: absolute;
          top: 16px;
          right: 0;
          left: 0;
          margin: auto;
          display: flex;
          .step-line-segment {
            width: calc(100% / 6);
            height: 100%;
            background: #afb4bf;
            &.step-line-active {
              background: #2d67e3;
            }
          }
        }
        .step-item {
          width: 80px;
          height: 100%;
          text-align: center;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          z-index: 1;
          font-family: Helvetica, "Microsoft Yahei";
          .step-circle {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #aaacb2;
            .step-name {
              color: #ffffff;
              font-size: 14px;
              font-weight: bold;
            }
          }
          .step-info {
            margin-top: 8px;
            color: #101116;
            line-height: 22px;
            .step-status {
              &-normal {
                color: #4ab36f;
              }
              &-abnormal {
                color: #e9af4b;
              }
            }
            .step-time {
              white-space: pre-line;
              font-size: 12px;
              line-height: 20px;
            }
          }
          &.active-item .step-circle {
            background: #2d67e3;
          }
        }
      }
      .btns {
        margin-top: 6px;
      }
    }
  }
}
</style>