行李详情页

src/components/Table/index.vue

@@ -300,7 +300,7 @@ export default {
         parmas.size = 9999
       }
       try {
-        const { code, returnData } = await Query(parmas);
+        const { code, returnData } = await Query(parmas)
         if (code == 0) {
           if (returnData.length === 0) {
             this.page--

src/views/bagDetailsPage/components/baggageList.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageList">
+    <Table style="height:100%" :msgContent="tableTag" ref="table" />
+    <div class="btns">
+      <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from '@/components/Table'
+import { exportToExcel } from '@/utils/table'
+export default {
+  name: 'BaggageList',
+  components: { Table },
+  props: ['tableDatas'],
+  data () {
+    return {
+      tableCols: [],
+      baggageTableData: [],
+      spanArr: [],
+      pos: 0,
+      loading: false,
+      dataContent: {},
+      tableTag: []
+    }
+  },
+  mounted () {
+    if (this.tableDatas?.length) {
+      this.tableDatas[0].nfilter = JSON.parse(sessionStorage.getItem('bagQueryParams')) || {}
+      this.tableTag = this.tableDatas
+    }
+  },
+  methods: {
+    exportHandler (refName, tableName) {
+      const { query } = this.$route
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const { luggageNum, carrierFlights, carrierFlightsDate } = query
+      const fileName = `${tableName}-${luggageNum}-${carrierFlights}-${carrierFlightsDate}.xlsx`
+      exportToExcel(table, tableName, fileName)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.baggageList {
+  height: 100%;
+  position: relative;
+  .btns {
+    position: absolute;
+    top: -50px;
+    right: 0px;
+    z-index: 10;
+    .r16 {
+      margin-right: 16px;
+    }
+  }
+}
+</style>

src/views/bagDetailsPage/components/baggageMessage.vue

@@ -0,0 +1,246 @@
+<template>
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageMessage">
+    <div class="baggageMessage-content">
+      <template v-if="messageList.length">
+        <el-scrollbar style="height: 100%">
+          <el-row style="margin:0" :gutter="15">
+            <el-col v-for="(message, index) in messageList" :key="index" :span="6">
+              <div class="card">
+                <div class="message-date">{{ message.readTime }}</div>
+                <div class="message-content">
+                  <el-scrollbar style="height: 100%">
+                    <div>{{ message.sourceData.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '') }}</div>
+                  </el-scrollbar>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-scrollbar>
+      </template>
+      <template v-else>
+        <el-empty :image-size="1" description="暂无数据" />
+      </template>
+    </div>
+    <div class="btns">
+      <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as XLSX from 'xlsx'
+import XLSX_STYLE from 'xlsx-style'
+import FileSaver from 'file-saver'
+export default {
+  name: 'BaggageMessage',
+  props: {
+    query: {
+      type: Object,
+      default: () => { }
+    },
+    tagObj: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data () {
+    return {
+      messageList: [],
+      loading: false,
+      dataContent: []
+    }
+  },
+  watch: {
+    tagObj: {
+      handler (obj) {
+        this.dataContent = obj
+        this.queryDetails()
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.dataContent = this.tagObj
+  },
+  mounted () {
+    this.queryDetails()
+  },
+  methods: {
+    async queryDetails () {
+      try {
+        this.loading = true
+        const { code, returnData } = await this.getQueryList(SERVICE_ID.bagDetailId, this.dataContent)
+        if (code == 0 && returnData && returnData.length) {
+          // this.messageList = [...returnData]
+          const messageDatas = [...returnData]
+          messageDatas.map(item => {
+            const { dataObjectId } = item
+            if (dataObjectId && dataObjectId.length) {
+              const len = dataObjectId.length
+              const popNums = [100, 101, 102].map(item => item.toString())
+              const target = dataObjectId.substring(len - 3, len)
+              const place = popNums.includes(target) ? '（国航）' : '（广州）'
+              item.readTime = item.readTime ? item.readTime.replace('T', ' ') + place : item.readTime
+            } else {
+              item.readTime = item.readTime ? item.readTime.replace('T', ' ') + '（广州）' : item.readTime
+            }
+          })
+          this.messageList = messageDatas
+          // this.messageList = returnData.map(message => ({
+          //   ...message,
+          //   readTime: message.readTime ? `${message.readTime.replace('T', ' ')}（广州）` : '（北京）'
+          // }))
+          this.loading = false
+        } else {
+          this.loading = false
+        }
+      } catch (error) {
+        this.loading = false
+        console.log(error)
+        this.$message.error('失败')
+      }
+    },
+    exportMessageToExcel () {
+      const xlsxDatas = [['Date & Time', 'Message']]
+      xlsxDatas.push(
+        ...this.messageList.map(message => [
+          message.readTime,
+          message.sourceData.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '')
+        ])
+      )
+      const columnWidths = []
+      xlsxDatas.forEach(row => {
+        // 计算每一列宽度，考虑换行
+        row.forEach((cell, columnIndex) => {
+          const cellWidth = Math.max(
+            ...cell
+              .toString()
+              .split('\n')
+              .map(cellRow =>
+                cellRow.split('').reduce((pre, curr) => {
+                  const letterSize = curr.charCodeAt(0) > 255 ? 2 : 1
+                  return pre + letterSize
+                }, 0)
+              )
+          )
+          if ((!columnWidths[columnIndex] && cellWidth > 0) || cellWidth > columnWidths[columnIndex]) {
+            columnWidths[columnIndex] = cellWidth
+          }
+        })
+      })
+      // 生成表格数据
+      const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
+      // 添加列宽度
+      sheet['!cols'] = columnWidths.map(width => ({
+        wch: width + 2
+      }))
+      // 表格对齐、添加边框
+      const borderStyle = {
+        style: 'medium',
+        color: {
+          rgb: 'FFFFFF'
+        }
+      }
+      const reg = /^[A-Z]+([\d]+$)/
+      for (const key in sheet) {
+        const match = reg.test(key)
+        if (match) {
+          const rowIndex = reg.exec(key)[1]
+          let cellStyle = {
+            alignment: {
+              horizontal: 'center',
+              vertical: 'center',
+              wrapText: true
+            }
+          }
+          if (Number(rowIndex) === 1) {
+            cellStyle = {
+              ...cellStyle,
+              border: {
+                top: borderStyle,
+                right: borderStyle,
+                bottom: borderStyle,
+                left: borderStyle
+              },
+              font: {
+                color: {
+                  rgb: 'FFFFFF'
+                }
+              },
+              fill: {
+                fgColor: {
+                  rgb: '3366FF'
+                }
+              }
+            }
+          } else {
+            cellStyle.alignment.horizontal = 'left'
+          }
+          sheet[key].s = cellStyle
+        }
+      }
+      // 表格数据转换
+      const workBook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workBook, sheet, '行李原始报文')
+      const tableWrite = XLSX_STYLE.write(workBook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'buffer',
+        cellStyles: true
+      })
+      // 下载表格
+      const { luggageNum, flightNo, flightDate } = this.query
+      const fileName = `行李原始报文-${luggageNum}-${flightNo}-${flightDate}.xlsx`
+      FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.baggageMessage {
+  height: 100%;
+  position: relative;
+  &-content {
+    padding: 24px;
+    height: 100%;
+  }
+  .card {
+    width: 100%;
+    height: 440px;
+    padding: 20px;
+    background: #ffffff;
+    border: 1px solid #dfe3ea;
+    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
+    margin-bottom: 12px;
+    > .message-date {
+      // width: 180px;
+      width: 200px;
+      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;
+      word-break: break-all;
+      height: calc(100% - 44px);
+    }
+  }
+  .btns {
+    position: absolute;
+    top: -50px;
+    right: 24px;
+    z-index: 10;
+    .r16 {
+      margin-right: 16px;
+    }
+  }
+}
+</style>

src/views/bagDetailsPage/components/baggageView.vue

@@ -0,0 +1,400 @@
+<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.carrierFlights || item.inflightNo }}</div>
+                <div class="fightDate">{{ item.carrierFlightsDate || item.inflightDate }}</div>
+                <div class="fightLine">{{ item.outAirport }}{{ item.takeoff_terminal }} -- {{item.landAirport}}{{ item.target_terminal }}</div>
+                <div class="fightTime">{{ item.takeTime }} -- {{ item.landTime }}</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,item.bagStatus) }]"></div>
+                </div>
+                <div v-for="(p, index) in item.bagStatus" :key="index" :class="{ 'step-item': true, 'active-item': p.timeValue }">
+                  <div class="step-circle">
+                    <span class="step-name">{{ p.nodeName }}</span>
+                  </div>
+                  <div v-if="p.timeValue || p.stateValue || p.loclValue" class="step-info">
+                    <div :class="statusClasses(p.stateValue)">{{ p.stateValue }}</div>
+                    <span class="step-time">{{ p.timeValue }}</span>
+                    <div class="step-location">{{ p.loclValue }}</div>
+                  </div>
+                  <div v-else class="step-info">无</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { Query } from '@/api/webApi'
+export default {
+  name: 'BaggageView',
+  data () {
+    return {
+      stepNodes: [
+        {
+          nodeCode: 'CHECKIN',
+          nodeName: '值机',
+          timeProp: 'checkInDate',
+          timeValue: '',
+          loclProp: 'checkInLocation',
+          loclValue: '',
+          stateProp: 'checkState',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'SECURITY',
+          nodeName: '安检',
+          timeProp: 'security_check_time',
+          timeValue: '',
+          loclProp: 'security_location',
+          loclValue: '',
+          stateProp: 'securityInspectionResults',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'SORT',
+          nodeName: '分拣',
+          timeProp: 'sorting_time',
+          timeValue: '',
+          loclProp: 'sorting_location',
+          loclValue: '',
+          stateProp: 'sortState',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'LOAD',
+          nodeName: '装车',
+          timeProp: 'loading_time',
+          timeValue: '',
+          loclProp: 'installationAddress',
+          loclValue: '',
+          stateProp: 'loadState',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'INFL',
+          nodeName: '装机',
+          timeProp: 'installation_time',
+          timeValue: '',
+          loclProp: 'installation_location',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'UNLOAD',
+          nodeName: '卸机',
+          timeProp: 'unloadtime',
+          timeValue: '',
+          loclProp: 'unloadLocation',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
+        },
+        {
+          nodeCode: 'ARRIVED',
+          nodeName: '到达',
+          timeProp: 'arrivedtime',
+          timeValue: '',
+          loclProp: 'arrviedLocation',
+          loclValue: '',
+          stateProp: 'normal',
+          stateValue: '',
+        }
+      ],
+      tableData: [],
+      tableDataCopy: [],
+      page: 0,
+      pageSize: 20,
+      dataContent: {},
+      loading: false,
+      noMore: false
+    }
+  },
+  computed: {
+    activeStepLine () {
+      return function (index, arrs) {
+        return (arrs[index].stateValue || arrs[index].loclValue || arrs[index].timeValue) && (arrs[index + 1].stateValue || arrs[index + 1].loclValue || arrs[index + 1].timeValue)
+      }
+    },
+    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
+      }
+    },
+  },
+  mounted () {
+    const bagQueryParams = JSON.parse(sessionStorage.getItem('bagQueryParams')) || ''
+    if (bagQueryParams) {
+      this.dataContent = bagQueryParams
+      this.restTable()
+      this.load()
+    }
+  },
+  methods: {
+    //获取行李信息
+    async getLuggageList (serviceid = 116, datacontent = { filter: this.dataContent }, page = ++this.page, size = this.pageSize) {
+      try {
+        this.loading = true
+        const parmas = {
+          page,
+          serviceid,
+          datacontent,
+          size,
+          event: '0'
+        }
+        const { code, returnData } = await Query(parmas)
+        if (code == 0) {
+          if (returnData.length === 0) {
+            this.page--;
+            this.noMore = true;
+            this.loading = false;
+          }
+          returnData.forEach(item => {
+            item.bagStatus = _.cloneDeep(this.stepNodes)
+          })
+          this.tableDataCopy.push(...returnData)
+          this.tableDataCopy = _.uniqBy(this.tableDataCopy, 'carrierFlights')
+          this.tableDataCopy = this.tableDataCopy.sort((a, b) => Date.parse(a.carrierFlightsDate) - Date.parse(b.carrierFlightsDate))
+          this.tableDataCopy.forEach(item => {
+            item.bagStatus.map(p => {
+              const { timeProp, loclProp, stateProp } = p
+              if (item.hasOwnProperty(timeProp) || item.hasOwnProperty(loclProp) || item.hasOwnProperty(stateProp)) {
+                p.timeValue = item[timeProp]
+                p.loclValue = item[loclProp]
+                p.stateValue = item[stateProp]
+              }
+            })
+          })
+          this.getBagTime(this.tableDataCopy)
+          this.loading = false
+        } else {
+          this.page--;
+          this.loading = false;
+          this.$message.error("获取表格数据失败");
+        }
+      } catch (error) {
+        this.loading = false;
+        console.log(error)
+      }
+    },
+    restTable () {
+      this.loading = false
+      this.noMore = false
+      this.page = 0
+      this.tableData = []
+    },
+    load () {
+      if (this.noMore || this.loading) {
+        return
+      }
+      this.getLuggageList()
+    },
+    async getBagTime (arr) {
+      const newArr = [...arr]
+      const reqUrls = []
+      newArr.forEach(item => {
+        const { carrierFlights, carrierFlightsDate, outAirport, landAirport } = item
+        const parmas = {
+          page: 1,
+          serviceid: 117,
+          datacontent: {
+            filter: {
+              carrierFlights,
+              carrierFlightsDate,
+              outAirport,
+              landAirport
+            }
+          },
+          size: 9999,
+          event: '0'
+        }
+        const reqItem = Query(parmas)
+        reqUrls.push(reqItem)
+      })
+      const allReqs = await Promise.allSettled(reqUrls)
+      allReqs.forEach((item, index) => {
+        const { status, value } = item
+        if (status == 'fulfilled') {
+          const { returnData } = value
+          const newArray = [...returnData]
+          if (newArray?.length) {
+            const itemObj = newArray[0]
+            const newObj = {}
+            const { actualTakeOffTime, estimateTakeOffTime, scheduleTakeOffTime, actualLandInTime, estimateLandInTime, scheduleLandInTime } = itemObj
+            newObj.newTakeoff_time = actualTakeOffTime ? actualTakeOffTime : estimateTakeOffTime ? estimateTakeOffTime : scheduleTakeOffTime
+            newObj.newLand_time = actualLandInTime ? actualLandInTime : estimateLandInTime ? estimateLandInTime : scheduleLandInTime
+            newObj.takeTime = newObj.newTakeoff_time ? newObj.newTakeoff_time.split('T').at(-1) : newObj.newTakeoff_time
+            newObj.landTime = newObj.newLand_time ? newObj.newLand_time.split('T').at(-1) : newObj.newLand_time
+            newArr[index] = Object.assign(newArr[index], newObj)
+          }
+        }
+      })
+      this.tableData = _.orderBy([...newArr], ["takeTime"], ["asc", "desc"]);
+    }
+  }
+}
+</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;
+          }
+          .fightTime {
+            margin-top: 13px;
+          }
+        }
+        .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>

src/views/bagDetailsPage/index.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="newBagDetails">
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newBagDetails-info">
+      <div class="newBagDetails-info-look">
+        <el-row :gutter="20">
+          <el-col :span="4">
+            <div class="flex-wrap">
+              <el-tooltip class="item" effect="dark" :content="passengerName" placement="top">
+                <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
+              </el-tooltip>
+              <el-button type="text">查看</el-button>
+            </div>
+          </el-col>
+          <el-col :span="20">
+            <el-scrollbar>
+              <div class="tags-view-wrapper">
+                <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}-<el-button @click.stop="getImg(item)" type="text">照片</el-button></div>
+              </div>
+            </el-scrollbar>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="newBagDetails-info-details">
+        <div class="newBagDetails-info-details-msgs">
+          <el-scrollbar style="height: 100%;">
+            <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
+              <el-col :span="3" class="msgs-list" v-for="(item,index) in msgs1" :key="index">{{ item.columnLabel }}：
+                <el-tooltip class="item" effect="dark" :content="item.value+''" placement="top">
+                  <span>{{ item.value }}</span>
+                </el-tooltip>
+              </el-col>
+            </el-row>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+    <div class="newBagDetails-contents">
+      <div class="newBagDetails-contents-tabs flex-wrap">
+        <div class="newBagDetails-contents-tabs-title">行李跟踪信息</div>
+        <div class="newBagDetails-contents-tabs-btns flex-wrap">
+          <div v-for="(item,index) in tabMenu" @click="tabClick(item,index)" :key="index" :class="index == tabIndex ? 'is-active' : ''" class="newBagDetails-contents-tabs-btns-bt">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="newBagDetails-contents-page">
+        <component ref="dataChild" :tableDatas="tableDatas" :is="componentName"></component>
+      </div>
+    </div>
+    <Dialog :flag="imgFlag" width="600px" class="dialog-check-img">
+      <div class="dialog-wrapper">
+        <div class="title">照片预览</div>
+        <div style="height: 600px;padding: 0 20px 0 20px;">
+          <el-scrollbar style="height: 100%;">
+            <el-row :gutter="20">
+              <el-col style="margin-bottom: 20px;" v-for="(item,index) in srcUrl" :key="index" :span="8">
+                <template v-if="isBase64(item.picData)">
+                  <el-image style="height:100px;width: 100%;" :src="item.picData" :preview-src-list="srcList">
+                  </el-image>
+                </template>
+                <template v-else>
+                  <el-image style="height:100px;width: 100%;" :src="'data:image/gif;base64,'+item.picData" :preview-src-list="srcList">
+                  </el-image>
+                </template>
+              </el-col>
+            </el-row>
+          </el-scrollbar>
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" @click="imgFlag = false" type="primary">确定</el-button>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
+import baggageView from './components/baggageView.vue'
+import baggageList from './components/baggageList.vue'
+import baggageMessage from './components/baggageMessage.vue'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { getAuthData, formatOrder, listToTree } from '@/utils/validate'
+import { getToken } from '@/utils/auth'
+import { Query } from '@/api/webApi'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'NewBagDetails',
+  components: { ScrollPane, baggageView, baggageList, baggageMessage, Dialog },
+  data () {
+    return {
+      infoArrs: [],
+      passenger_name: '',
+      detailsArr: [],
+      activeIndex: null,
+      msgs1: [],
+      tableCols: [],
+      tabMenu: [
+        {
+          key: 'baggageView',
+          name: '行李流程图'
+        },
+        {
+          key: 'baggageList',
+          name: '行李流程列表信息'
+        },
+        {
+          key: 'baggageMessage',
+          name: '行李报文'
+        },
+      ],
+      tabIndex: 0,
+      componentName: 'baggageView',
+      query: '',
+      passengerName: '',
+      PNRNO: '',
+      tagObj: {},
+      tableDatas: [],
+      tableDatas5Id: '',
+      loading: false,
+      queryObj: {},
+      imgFlag: false,
+      srcList: [],
+      srcUrl: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs']),
+  },
+  mounted () {
+    const { query } = this.$route
+    //获取页面配置
+    const { auth_id } = this.$route.meta
+    //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
+    const pageAuths = this.authArrs
+    if (!pageAuths.length) return
+    //获取当前页面权限类型
+    const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
+    if (!pageAuthArrs.length) return
+    //获取table权限
+    const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
+    if (!pageAuthtables.length) return
+    //获取行李信息表
+    const bagInfoTable = pageAuthtables.filter(item => item.serviceid == 115)
+    this.tableDatas = pageAuthtables.filter(item => item.serviceid == 116)
+    this.query = { ...query }
+    this.getPageTableSetting(bagInfoTable)
+  },
+  methods: {
+    isBase64 (base) {
+      if (base.includes('base64')) {
+        return true
+      } else {
+        return false
+      }
+    },
+    //根据页面table设置数据
+    getPageTableSetting (pageAuthtables) {
+      const pageAuths = this.authArrs ?? []
+      const authTableObj = pageAuthtables[0]
+      //获取当前页面table的配置
+      const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, nfilter, selected, triggerserviceid } = authTableObj
+
+      const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
+      this.getColumnData(serviceid, tableColumnArrs)
+    },
+    //获取表头数据
+    getColumnData (serviceid, columnArrs = []) {
+      const returnData = [...columnArrs]
+      const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay)
+      const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
+      this.tableCols = tableColsCopyOrder
+      this.queryTableData(serviceid, this.query)
+    },
+    setTableLocalData (key, data) {
+      sessionStorage.setItem(key, JSON.stringify(data))
+    },
+    //获取表头数据
+    async queryTableData (serviceid, dataParmas) {
+      this.loading = true
+      try {
+        const datacontent = { filter: dataParmas }
+        const parmas = {
+          page: 1,
+          serviceid,
+          datacontent,
+          size: 9999,
+          event: '0'
+        }
+        const { code, returnData } = await Query(parmas)
+        if (code == 0) {
+          if (returnData?.length) {
+            const ndata = []
+            const bagInfo = [...returnData][0]
+            const { luggageNum, PNRNO } = bagInfo
+            this.passengerName = bagInfo['passengerName'] || ''
+            this.PNRNO = bagInfo['PNRNO'] || ''
+            if (PNRNO) {
+              this.queryObj = {
+                luggageNum,
+                PNRNO
+              }
+            } else {
+              this.queryObj = { ...this.query }
+            }
+            const bagInfoArr = Object.entries(bagInfo)
+            this.tableCols.map(({ pagecode, pagename }) => {
+              bagInfoArr.map(item => {
+                const [key, value] = item
+                if (pagecode == key) {
+                  ndata.push({
+                    columnLabel: pagename,
+                    key,
+                    value
+                  })
+                }
+              })
+            })
+            this.msgs1 = [...ndata]
+            this.setTableLocalData('bagQueryParams', this.queryObj)
+            this.getLuggageNums()
+            this.loading = false
+          }
+        } else {
+          this.loading = false
+          this.$message.error("获取表头数据失败")
+        }
+      } catch (error) {
+        this.loading = false
+        console.log(error)
+      }
+    },
+    //获取行李号
+    async getLuggageNums () {
+      try {
+        const { carrierFlights, carrierFlightsDate } = this.query
+        let parmObj = null
+        if (this.PNRNO) {
+          parmObj = {
+            PNRNO: this.PNRNO,
+            passengerName: this.passengerName,
+            carrierFlights,
+            carrierFlightsDate
+          }
+        } else {
+          parmObj = { ...this.query }
+        }
+        const datacontent = { filter: parmObj }
+        const parmas = {
+          page: 1,
+          serviceid: 126,
+          datacontent,
+          size: 9999,
+          event: '0'
+        }
+        const { code, returnData } = await Query(parmas)
+        if (code == 0 && returnData && returnData.length) {
+          this.detailsArr = _.uniqBy([...returnData], 'luggageNum')
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    tagClick (item, index) {
+      const { luggageNum, carrierFlights, carrierFlightsDate, PNRNO, passengerName } = item
+      if (PNRNO) {
+        this.tagObj = {
+          PNRNO,
+          passengerName,
+          luggageNum
+        }
+      } else {
+        this.tagObj = {
+          luggageNum,
+          carrierFlights,
+          carrierFlightsDate
+        }
+      }
+      this.activeIndex = index
+      this.setTableLocalData('bagQueryParams', this.tagObj)
+      this.queryTableData(115, this.tagObj)
+    },
+    tabClick (item, index) {
+      if (item.key == 'baggageList' || item.key == 'baggageMessage') {
+        let parmObj = null
+        const { luggageNum } = this.query
+        if (this.PNRNO) {
+          parmObj = {
+            PNRNO: this.PNRNO,
+            passengerName: this.passengerName,
+            luggageNum
+          }
+        } else {
+          parmObj = { ...this.query }
+        }
+        this.tagObj = parmObj
+      }
+      this.setTableLocalData('bagQueryParams', this.tagObj)
+      setTimeout(() => {
+        this.tabIndex = index
+        this.componentName = item.key
+      }, 10);
+    },
+    async getImg (item) {
+      const { luggageNum, carrierFlightsDate } = item
+      const { code, returnData } = await this.getQueryList(SERVICE_ID.baggageImage, { luggageNum, carrierFlightsDate })
+      if (code == 0 && returnData && returnData.length) {
+        const urls = []
+        this.imgFlag = true
+        this.srcUrl = returnData
+        const datas = [...returnData]
+        datas.forEach(item => {
+          if (item.picData.includes('base64')) {
+            urls.push(item.picData)
+          } else {
+            urls.push('data:image/gif;base64,' + item.picData)
+          }
+        })
+        this.srcList = urls
+      } else {
+        this.$message.warning('暂无照片')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.newBagDetails {
+  height: calc(100vh - 90px);
+  padding: 12px;
+  &-info {
+    height: 200px;
+    background: #051436;
+    color: #fff;
+    font-size: 14px;
+    &-look {
+      padding: 0 32px;
+      height: 64px;
+      line-height: 64px;
+      background: #041741;
+      &-name {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #ffffff;
+        margin-right: 7px;
+        max-width: 101px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: inline-block;
+      }
+      .el-scrollbar {
+        height: 64px;
+        ::-webkit-scrollbar {
+          height: 0;
+        }
+        .tags-view-wrapper {
+          display: flex;
+          .tags-view-item {
+            position: relative;
+            cursor: pointer;
+            height: 64px;
+            line-height: 64px;
+            // border: 1px solid #767eba;
+            // border-radius: 4px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #aaacb2;
+            margin-right: 100px;
+            &:last-child {
+              margin-right: 0;
+            }
+            &.active {
+              color: #fff;
+              position: relative;
+              &::after {
+                position: absolute;
+                content: "";
+                width: 100%;
+                left: 0;
+                bottom: 0;
+                height: 3px;
+                background: #2d67e3;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-details {
+      position: relative;
+      padding: 0 32px;
+      height: 136px;
+      &-tags {
+        height: 32px;
+        line-height: 32px;
+      }
+      &-msgs {
+        padding: 12px 0;
+        height: 135px;
+        ::v-deep .el-scrollbar__wrap {
+          overflow-x: hidden;
+        }
+        ::v-deep .el-scrollbar__bar.is-horizontal {
+          height: 0 !important;
+        }
+        &-l1 {
+          .msgs-list {
+            margin-bottom: 22px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+  &-contents {
+    margin-top: 8px;
+    background-color: #fff;
+    height: calc(100% - 208px);
+    &-tabs {
+      line-height: 65px;
+      padding: 0 32px;
+      border-bottom: 1px solid #dfe3ea;
+      &-title {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        margin-right: 92px;
+      }
+      &-btns {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #afb4bf;
+        &-bt {
+          margin-right: 55px;
+          cursor: pointer;
+          position: relative;
+          &:last-child {
+            margin-right: 0;
+          }
+          &.is-active {
+            color: #303133;
+            &::after {
+              position: absolute;
+              content: "";
+              width: 100%;
+              left: 0;
+              bottom: 0;
+              height: 3px;
+              background: #2d67e3;
+            }
+          }
+        }
+      }
+    }
+    &-page {
+      height: calc(100% - 66px);
+    }
+  }
+}
+</style>