CABaggageData2.0/src/views/baggageManagement/components/baggage/index.vue

<!--
 * @Author: your name
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-05-06 10:25:52
 * @LastEditors: your name
 * @Description: 行李视图
-->
<template>
  <div class="baggage-view">
    <div class="part1">
      <div class="title">
        <span>行李基本信息</span>
        <el-radio-group
          v-model="infoBtn"
          class="radioBtn"
          size="mini"
          fill="#FFFFFF"
          text-color="#28344D"
        >
          <el-radio-button
            v-for="item in infoRadios"
            :key="item"
            :label="item"
          />
        </el-radio-group>
      </div>
      <div class="part1_info">
        <el-row :gutter="12">
          <!-- 第一行 -->
          <el-col :span="3"><span class="label">行李牌号：</span><span class="content">{{ baggageBasicInfo.bagNo }}</span></el-col>
          <el-col :span="4"><span class="label">企业或团队名称：</span><span class="content">{{ baggageBasicInfo.teamOrGroup }}</span></el-col>
          <el-col :span="3"><span class="label">值机位置：</span><span class="content">{{ baggageBasicInfo.checkInLocation }}</span></el-col>
          <el-col :span="3"><span class="label">特殊行李类型：</span><span class="content">{{ baggageBasicInfo.specialType }}</span></el-col>
          <el-col :span="4"><span class="label">PNR编号：</span><span class="content">{{ baggageBasicInfo.PNR }}</span></el-col>
          <el-col :span="4"><span class="label">旅客姓名大写拼音：</span><span class="content">{{ baggageBasicInfo.name }}</span></el-col>
          <el-col :span="3"><span class="label">装载序列号：</span><span class="content">{{ baggageBasicInfo.loadSequenceIndex }}</span></el-col>
          <!-- 第二行 -->
          <el-col :span="3"><span class="label">总件数：</span><span class="content">{{ baggageBasicInfo.totalNumber }}</span></el-col>
          <el-col :span="4"><span class="label">总重量：</span><span class="content">{{ baggageBasicInfo.totalWeight }}</span></el-col>
          <el-col :span="3"><span class="label">尺寸：</span><span class="content">{{ baggageBasicInfo.size }}</span></el-col>
          <el-col :span="3"><span class="label">外部特征描述：</span><span class="content">{{ baggageBasicInfo.externalCharacterization }}</span></el-col>
          <el-col :span="4"><span class="label">常旅客号：</span><span class="content">{{ baggageBasicInfo.frequentFlyerNumber }}</span></el-col>
          <el-col :span="4"><span class="label">常旅客级别：</span><span class="content">{{ baggageBasicInfo.frequentFlyerClass }}</span></el-col>
          <el-col :span="3"><span class="label">是否取消值机：</span><span class="content">{{ baggageBasicInfo.whetherToCancelTheCheckIn }}</span></el-col>
          <!-- 第三行 -->
          <el-col :span="3"><span class="label">是否可装载：</span><span class="content">{{ baggageBasicInfo.isItLoadable }}</span></el-col>
          <el-col :span="4"><span class="label">是否可运输：</span><span class="content">{{ baggageBasicInfo.isItTransportable }}</span></el-col>
          <el-col :span="3"><span class="label">行李激活状态：</span><span class="content">{{ baggageBasicInfo.activeState }}</span></el-col>
          <el-col :span="3"><span class="label">无BSM状态：</span><span class="content">{{ baggageBasicInfo.noBSM }}</span></el-col>
          <el-col :span="4"><span class="label">中转标记：</span><span class="content">{{ baggageBasicInfo.transitSign }}</span></el-col>
          <el-col :span="4"><span class="label">速运标记：</span><span class="content">{{ baggageBasicInfo.expressSign }}</span></el-col>
          <el-col :span="3"><span class="label">破损标记：</span><span class="content">{{ baggageBasicInfo.brokenSign }}</span></el-col>
          <!-- 第四行 -->
          <el-col :span="3"><span class="label">投诉标记：</span><span class="content">{{ baggageBasicInfo.complaintSign }}</span></el-col>
          <el-col :span="4"><span class="label">赔偿标记：</span><span class="content">{{ baggageBasicInfo.compensationSign }}</span></el-col>
        </el-row>
      </div>
    </div>
    <div
      v-if="infoBtn === infoRadios[0]"
      class="part2"
    >
      <div class="part2_info">
        <div
          style="width: 120px"
          class="title"
        >行李跟踪信息</div>
        <div
          v-if="infoBtn === infoRadios[0]"
          class="type normal"
        >
          {{ baggageBasicInfo.BagStatus }}
        </div>
        <div
          v-if="infoBtn === infoRadios[0]"
          class="step"
        >
          <div class="baggage-track-chart">
            <div class="stepLine">
              <div
                :style="{ width: lineWidth }"
                class="stepLineBlue"
              />
            </div>
            <div
              v-for="(item, index) in stepData"
              :key="index"
              class="stepItem"
              :class="{ activeItem: item.NodeNameEN }"
            >
              <span class="head">
                <!-- {{ item.airPort }} -->
                <!-- <span v-if="item.airPort && item.nodeName !== ''">-</span> -->
                <span>{{ item.NodeNameEN }}</span>
              </span>
              <span>{{ item.DealTime }}</span>
              <!-- <span>{{ item.time }}</span> -->
            </div>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
        />
        <el-button
          class="btn-set"
          type="primary"
          icon="el-icon-s-tools"
          size="mini"
          @click="show"
        />
      </div>
    </div>
    <div
      v-if="infoBtn == infoRadios[0]"
      class="part3"
    >
      <el-table
        ref="table"
        :data="baggageTableData"
        size="mini"
        border
        stripe
        fit
        :header-cell-style="{ color: '#101116' }"
      >
        <el-table-column
          v-for="item in tableColsCopy"
          :key="item.index"
          :prop="item.prop"
          :label="item.name"
          :align="item.align"
          :width="item.width + 'px'"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </div>

    <div
      v-if="infoBtn === infoRadios[1]"
      class="part4"
    >
      <header class="head">
        <div class="title">行李跟踪信息</div>
        <div class="btns">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="mini"
          />
          <el-button
            class="btn-set"
            type="primary"
            icon="el-icon-s-tools"
            size="mini"
          />
        </div>
      </header>
      <main class="main">
        <template v-if="messageList.length">
          <el-row
            :gutter="24"
            type="flex"
          >
            <el-col
              v-for="(message, index) in messageList"
              :key="index"
              :span="6"
            >
              <div class="card">
                <div class="message-date">{{ message.date }}</div>
                <div class="message-content">
                  {{ message.content.replace(/\s+/g, "").split(".").join("\n.") }}
                  <!-- BSM <br>
              .V/1LHRB <br>
              .F/XX1640/08APR/PEK/Y <br>
              .O/ZZ941/08APR/DXB/E <br>
              .N/0666826758001 <br>
              .D/SELF//08APR/110023L//PEK30113 <br>
              .S/N/32L/C/030//Y/I <br>
              .W/K/l/0 <br>
              .P/1CUI/DI ENDBSM<br> -->
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <el-empty
            :image-size="1"
            description="暂无数据"
          />
        </template>
      </main>
    </div>
    <!--列设置-->
    <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'name',
              children: 'children',
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { queryMap, myQuery } from '@/api/dataIntegration'
import { BaggageMessageQuery } from '@/api/flight'
import tableColsMixin from '../../mixins/tableCols'

export default {
  name: 'BaggageView',
  components: {
    Dialog
  },
  mixins: [tableColsMixin],
  data() {
    return {
      departureAirport: '',
      landingAirport: '',
      queryData: {},
      baggageBasicInfo: {
        BagSN: '3666149457',
        SpecialType: null,
        PassengerInfoStatus: null,
        PassengerNameUpcase: 'AIJIAMEI',
        bagExcType: null,
        TeamOrGroup: null,
        PNR: null,
        BagStatus: null
      },
      dialogVisibledele: false,
      active: 2,
      infoBtn: '跟踪信息',
      infoRadios: ['跟踪信息', '跟踪报文'],
      messageList: [
        // {
        //   content: `BSM
        //     .V/1LHRB
        //     .F/XX1640/08APR/PEK/Y
        //     .O/ZZ941/08APR/DXB/E
        //     .N/0666826758001
        //     .D/SELF//08APR/110023L//PEK30113
        //     .S/N/32L/C/030//Y/I
        //     .W/K/l/0
        //     .P/1CUI/DI ENDBSM`,
        //   date: '2022-04-25 12:42:38:00'
        // }
      ],
      checkList: [],
      stepData: new Array(11).fill({}),
      tableCols: [
        {
          name: '航班号',
          prop: 'flightNo',
          align: 'center'
        },
        { name: '航班日期', prop: 'flightDate', align: 'center', width: 103 },
        {
          name: '起飞航站\n预计起飞时间',
          prop: 'departureAirport',
          align: 'center',
          width: 111
        },
        {
          name: '目的航站\n预计降落时间',
          prop: 'landingAirport',
          align: 'center',
          sortable: 'custom',
          width: 111
        },
        { name: '旅客仓位', prop: 'passengerCompartment', align: 'center' },
        { name: '旅客座位号', prop: 'passengerSeatNumber', align: 'center', width: 101 },
        { name: '值机序号', prop: 'passengerCheckInNumber', align: 'center' },
        { name: '节点标识', prop: 'nodeCode', align: 'center', width: 102 },
        { name: '节点名称', prop: 'nodeName', align: 'center' },
        { name: '位置标识', prop: 'locationCode', align: 'center' },
        // { name: '位置码', prop: '', align: 'center' },
        { name: '位置描述', prop: 'locationRemark', align: 'center' },
        { name: '读取时间', prop: 'dealTime', align: 'center' },
        { name: '结果', prop: 'status', align: 'center' },
        { name: '次级代码', prop: 'secondaryCode', align: 'center' },
        { name: '操作人', prop: 'AgentCode', align: 'center' },
        { name: '设备ID', prop: 'DeviceCode', align: 'center' },
        { name: '发往位置', prop: 'toLocation', align: 'center' },
        { name: '发往位置描述', prop: 'toLocationMark', align: 'center', width: 113 },
        { name: '装载序号', prop: 'LoadSN', align: 'center' },
        { name: '容器编号', prop: 'U_Device_ID', align: 'center' }
      ],
      baggageTableData: [],
      spanArr: [],
      pos: 0
    }
  },
  computed: {
    lineWidth() {
      return ((this.stepData.filter(item => item.NodeNameEN).length - 1) * 100) / 10.0 + '%'
    }
  },
  // watch: {
  //   infoBtn(val) {
  //     if (val === '跟踪报文') {
  //       const { BagSN: bagNo, FlightNO: flightNo, FlightDate: flightDate } = this.queryData
  //       const params = { flightNo, flightDate, bagNo }
  //       this.baggageMessageQuery(params)
  //     }
  //   }
  // },
  mounted() {
    this.queryData = this._.cloneDeep(this.$route.query)
    // console.log(this.queryData)
    this.queryBaggageAll()
  },
  methods: {
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex < 4) {
    //     const _row = this.spanArr[rowIndex]
    //     const _col = _row > 0 ? 1 : 0
    //     // console.log(`rowspan:${_row} colspan:${_col}`)
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     }
    //   }
    // },
    // 行李详情基础信息
    queryBaggageBasicInfo(dataContent) {
      return myQuery(queryMap.baggageBasicInfoByID, ...dataContent)
    },
    // 行李详情追踪链
    queryBaggageTrack(dataContent) {
      return myQuery(queryMap.baggageTrackByID, ...dataContent)
    },
    // 行李详情表格
    queryBaggageDetails(dataContent) {
      return myQuery(queryMap.baggageDetailsByID, ...dataContent)
    },
    async queryBaggageAll(queryData = this.queryData) {
      const { FlightNO, FlightDate, BagSN } = queryData
      const dataContent = [FlightNO, FlightDate, BagSN]
      try {
        const [baggageBasicInfo, baggageTrack, baggageDetails] = await Promise.all([
          this.queryBaggageBasicInfo(dataContent),
          this.queryBaggageTrack(dataContent),
          this.queryBaggageDetails(new Array(6).fill(dataContent).flat())
        ])
        baggageBasicInfo.length && (this.baggageBasicInfo = baggageBasicInfo[0])
        this._.sortBy(baggageTrack, item => item.DealTime).forEach((item, index) => {
          item.NodeNameEN && this.stepData.splice(index, 1, item)
        })
        this.baggageTableData = baggageDetails.map(item => {
          item['dealTime'] = item['dealTime'].split('T')[1]
          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'].split('T')[1]}`
          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'].split('T')[1]}`
          return item
        })
      } catch (error) {
        console.log('错误', error)
      }
    },
    async baggageMessageQuery(params) {
      try {
        const result = await BaggageMessageQuery(params)
        // console.log(result.returnData)
        this.messageList = result.returnData
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss">
.radioBtn {
  padding: 5px;
  background: #000d2a;
  .el-radio-button__inner {
    background: #000d2a;
    color: #fff;
    border: none;
    font-weight: bold;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border: none;
  }
}
</style>
<style lang="scss" scoped>
.baggage-view {
  width: 100%;
  height: calc(100vh - 81px);
  overflow: hidden;
  background: #dfe3ea;
  padding: 8px 8px 0;
  .part1 {
    width: 100%;
    height: 232px;
    background: #041741;
    padding: 16px 30px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      width: 320px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .part1_info {
      width: 100%;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      > .el-row > .el-col {
        height: 38px;
        line-height: 38px;
        display: flex;
        .label {
          flex-basis: 126px;
          text-align: right;
        }
        .content {
          flex: 1;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .part2 {
    margin: 8px 0;
    width: 100%;
    padding: 24px 30px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .part2_info {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-right: 42px;
      }
      .type {
        font-size: 18px;
        font-weight: bold;
        margin-right: 80px;
      }
      .warn {
        color: #df3559;
      }
      .normal {
        color: #519f6b;
      }
      .step {
        height: 80px;
        width: 1430px;
        position: relative;
        .baggage-track-chart {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
        }
        .stepLine {
          width: 100%;
          height: 20px;
          background: #afb4bf;
          position: absolute;
          top: 50%;
          margin-top: -10px;
          border-radius: 10px;
          .stepLineBlue {
            position: absolute;
            height: 100%;
            z-index: 1;
            background: #041741;
            border-radius: 10px;
          }
        }
        .stepItem {
          width: 80px;
          height: 80px;
          background: #afb4bf;
          border-radius: 50%;
          z-index: 1;
          text-align: center;
          font-weight: bold;
          color: #ffffff;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-content: space-around;
          align-items: center;
          // padding-top: 19px;
          justify-content: center;
          .head {
            font-size: 14px;
          }
        }
        .activeItem {
          background: #041741;
        }
      }
    }
  }
  .part3 {
    width: 100%;
    height: calc(100% - 232px - 146px);
    ::v-deep .el-table {
      width: 100%;
      height: 100%;
      .el-table__cell {
        background: #f0f3f7;
      }
      &.el-table--striped {
        .el-table__body tr.el-table__row--striped td.el-table__cell,
        .el-table__header .el-table__cell {
          background: #ffffff;
        }
      }
      .cell {
        word-spacing: 0;
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        font-weight: 400;
        color: #303133;
        white-space: pre-line;
      }
    }
  }
  .part4 {
    width: 100%;
    height: calc(100vh - 81px - 232px);
    .head {
      padding: 16px 24px 11px 30px;
      background: transparent;
      display: flex;
      justify-content: space-between;
      .title {
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }
    }
    .main {
      height: calc(100% - 57px);
      overflow-y: auto;
      overflow-x: hidden;
      ::v-deep .el-row {
        flex-wrap: wrap;
        .card {
          width: 100%;
          min-height: 330px;
          padding: 24px 0 0 32px;
          background: #ffffff;
          box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
          margin-bottom: 24px;
          > .message-date {
            width: 160px;
            height: 26px;
            line-height: 14px;
            font-size: 14px;
            font-family: Helvetica;
            color: #afb4bf;
            border-bottom: 1px solid #afb4bf;
            margin-bottom: 18px;
          }
          > .message-content {
            white-space: pre-line;
            line-height: 24px;
            font-size: 14px;
            color: #303133;
          }
        }
      }
    }
  }
  .btns {
    height: 30px;
    display: flex;
    .el-button {
      margin-left: 10px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep .dialog-check-cols .el-tree {
  &.has-children .el-tree-node > .el-tree-node__children {
    display: flex;
    flex-wrap: wrap;
  }
  &.no-children {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>