|
|
@@ -84,9 +84,9 @@
|
|
|
<span class="step-name">{{ item.nodeName }}</span>
|
|
|
</div>
|
|
|
<div class="step-info">
|
|
|
- <!-- <div class="step-status">{{ item.status }}</div> -->
|
|
|
+ <div :class="statusClasses(item.status)">{{ item.status }}</div>
|
|
|
<span class="step-time">{{ item.processingTime }}</span>
|
|
|
- <!-- <div class="step-location">{{ item.location }}</div> -->
|
|
|
+ <div class="step-location">{{ item.locationId }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -94,13 +94,13 @@
|
|
|
<div class="btns">
|
|
|
<img
|
|
|
class="btn-square btn-shadow"
|
|
|
- src="../../../../assets/baggage/ic_export.png"
|
|
|
+ src="@/assets/baggage/ic_export.png"
|
|
|
title="导出"
|
|
|
@click="exportHandler('table', '行李节点列表')"
|
|
|
>
|
|
|
<img
|
|
|
class="btn-square btn-shadow"
|
|
|
- src="../../../../assets/baggage/ic_setting.png"
|
|
|
+ src="@/assets/baggage/ic_setting.png"
|
|
|
title="列设置"
|
|
|
@click="show"
|
|
|
>
|
|
|
@@ -157,7 +157,7 @@
|
|
|
<div class="btns">
|
|
|
<img
|
|
|
class="btn-square btn-shadow"
|
|
|
- src="../../../../assets/baggage/ic_export.png"
|
|
|
+ src="@/assets/baggage/ic_export.png"
|
|
|
title="导出"
|
|
|
@click="exportMessageToExcel"
|
|
|
>
|
|
|
@@ -235,6 +235,9 @@ import { myQuery } from '@/api/dataIntegration'
|
|
|
import { BaggageMessageQuery } from '@/api/flight'
|
|
|
import tableColsMixin from '../../mixins/tableCols'
|
|
|
import { throttledExportToExcel } from '@/utils/table'
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
+import XLSX_STYLE from 'xlsx-style'
|
|
|
+import FileSaver from 'file-saver'
|
|
|
|
|
|
export default {
|
|
|
name: 'BaggageView',
|
|
|
@@ -348,12 +351,9 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
baggageBasicInfo: {},
|
|
|
- dialogVisibledele: false,
|
|
|
- active: 2,
|
|
|
infoBtn: '',
|
|
|
infoRadios: ['跟踪信息', '跟踪报文'],
|
|
|
messageList: [],
|
|
|
- checkList: [],
|
|
|
stepNodes: [],
|
|
|
tableCols: [
|
|
|
{
|
|
|
@@ -404,6 +404,19 @@ export default {
|
|
|
return this.stepNodes[index].processingTime && this.stepNodes[index + 1].processingTime
|
|
|
}
|
|
|
},
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
formattedBaggageInfo() {
|
|
|
return function (prop) {
|
|
|
const value = this.baggageBasicInfo[prop]
|
|
|
@@ -481,6 +494,9 @@ export default {
|
|
|
this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
|
|
|
this.$refs['table']?.doLayout()
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ this.stopLoopAll()
|
|
|
+ },
|
|
|
methods: {
|
|
|
startQueryDetails() {
|
|
|
this.queryDetails()
|
|
|
@@ -608,11 +624,102 @@ export default {
|
|
|
},
|
|
|
exportHandler(refName, tableName) {
|
|
|
const table = this.$refs[refName].$el.cloneNode(true)
|
|
|
- const fileName = `${tableName}-${this.queryData.bagSN}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
|
|
|
+ const { bagSN, flightNO, flightDate } = this.queryData
|
|
|
+ const fileName = `${tableName}-${bagSN}-${flightNO}-${flightDate}.xlsx`
|
|
|
throttledExportToExcel(table, tableName, fileName)
|
|
|
},
|
|
|
exportMessageToExcel() {
|
|
|
- this.$message.info('开发中')
|
|
|
+ const xlsxDatas = [['Date & Time', 'Message']]
|
|
|
+ xlsxDatas.push(
|
|
|
+ ...this.messageList.map(message => [
|
|
|
+ message.date,
|
|
|
+ message.dataContent.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 { bagSN, flightNO, flightDate } = this.queryData
|
|
|
+ const fileName = `行李原始报文-${bagSN}-${flightNO}-${flightDate}.xlsx`
|
|
|
+ FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
|
|
|
},
|
|
|
// 行李详情基础信息
|
|
|
queryBaggageBasicInfo(dataContent) {
|
|
|
@@ -714,7 +821,7 @@ export default {
|
|
|
try {
|
|
|
const result = await this.queryBaggageTrack(this.selectedAirline.split(','))
|
|
|
this.resetStepNodes()
|
|
|
- result.forEach(({ nodeCode, nodeName, processingTime }) => {
|
|
|
+ result.forEach(({ nodeCode, nodeName, processingTime, locationId, status }) => {
|
|
|
const replaceIndex = this.stepNodes.findIndex(
|
|
|
stepNode => stepNode.nodeCode === nodeCode || isSameStep(stepNode.nodeCode, nodeCode)
|
|
|
)
|
|
|
@@ -722,7 +829,9 @@ export default {
|
|
|
this.stepNodes.splice(replaceIndex, 1, {
|
|
|
nodeCode,
|
|
|
nodeName,
|
|
|
- processingTime: processingTime.replace('T', '\n')
|
|
|
+ processingTime: processingTime.replace('T', '\n'),
|
|
|
+ locationId,
|
|
|
+ status
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
@@ -878,7 +987,7 @@ export default {
|
|
|
width: 80px;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -899,9 +1008,19 @@ export default {
|
|
|
.step-info {
|
|
|
margin-top: 15px;
|
|
|
color: #101116;
|
|
|
- line-height: 1;
|
|
|
+ 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 {
|
