添加行李报文错误信息

public/config.js

@@ -29,6 +29,7 @@ window.SERVICE_ID = {
   dashboardMap: 200248, // 首页-行李分布
   dashboardCompanyData: 200249, // 首页-航司行李量排行
   warningInfo: 10201, // 预警报警信息
+  errorInfo: 10202, // 行李报文错误信息
   dashboardDateFlightData: 200301, // 首页-当日进出港航班数
   dashboardDateBaggageData: 200302, // 首页-当日行李量
   dashboardHourBaggageIn: 200303, // 首页-每日小时行李量-进港

src/components/ErrorDialog/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <Dialog :flag="errorDialogFlag" width="900px">
+    <div id="warningDialog" ref="dialog" :tabindex="0" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" @keyup.esc="dialogHide">
+      <div class="title">
+        <span>行李报文错误信息</span>
+        <i class="el-icon-close" @click="dialogHide" />
+      </div>
+      <div class="content">
+        <el-table ref="table" v-el-table-infinite-scroll="load" height="400px" class="table" :data="tableData" border stripe fit>
+          <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :align="column.align || 'center'" :formatter="formatter" />
+        </el-table>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog'
+import { mapGetters } from 'vuex'
+import { Query } from '@/api/webApi'
+
+export default {
+  name: 'WarningDialog',
+  components: { Dialog },
+  data () {
+    return {
+      tableColumns: [
+        {
+          prop: 'luggageNum',
+          label: '行李号',
+        },
+        {
+          prop: 'dataType',
+          label: '报文类型',
+        },
+        {
+          prop: 'errMessage',
+          label: '错误信息',
+        },
+        {
+          prop: 'sourceData',
+          label: '原始报文',
+        },
+        {
+          prop: 'readTime',
+          label: '读取时间',
+        },
+      ],
+      tableData: [],
+      loading: false,
+      noMore: false,
+      page: 0,
+      pageSize: 10,
+    }
+  },
+  computed: {
+    ...mapGetters(['errorDialogFlag']),
+  },
+  watch: {
+    errorDialogFlag (flag) {
+      if (flag) {
+        this.resetTable()
+        this.load()
+        this.$nextTick(() => {
+          this.$refs['dialog']?.focus()
+        })
+      }
+    },
+  },
+  methods: {
+    dialogHide () {
+      this.$store.dispatch('app/toggleErrorDialogFlag', false)
+    },
+    load () {
+      if (this.loading || this.noMore) {
+        return
+      }
+      this.getTableData()
+    },
+    resetTable () {
+      this.page = 0
+      this.loading = false
+      this.noMore = false
+      this.tableData = []
+    },
+    formatter (row, column, cellValue, index) {
+      if (column.property === 'readTime') {
+        return String(cellValue ?? '').replace('T', ' ')
+      }
+      return cellValue
+    },
+    async getTableData () {
+      this.loading = true
+      try {
+        const { code, returnData, message } = await Query({
+          serviceId: SERVICE_ID.errorInfo,
+          dataContent: {},
+          page: ++this.page,
+          pageSize: this.pageSize,
+          event: '0',
+        })
+        if (String(code) !== '0') {
+          throw new Error(message || '获取数据失败')
+        }
+        if (!returnData.length) {
+          this.page--
+          this.noMore = true
+          this.loading = false
+          return
+        }
+        this.tableData.push(...returnData)
+      } catch (error) {
+        this.page--
+        this.$message.error(error.message || '失败')
+      }
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#warningDialog {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    .el-icon-close {
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    margin: 0;
+    ::v-deep .el-table {
+      .cell {
+        padding: 0;
+        text-align: center;
+        font-size: 14px;
+        font-family: Helvetica, "Microsoft YaHei";
+        letter-spacing: 0;
+      }
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        .cell {
+          font-weight: bold;
+          color: #101116;
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/components/Navbar.vue

@@ -13,6 +13,9 @@
         <div class="log_name">{{ pageTitle }}</div>
       </div>
       <div class="right-menu">
+        <div @click="errorClickHandler" class="header-btn">
+          <span style="color: #fff;font-size: 20px;" class="el-icon-message-solid"></span>
+        </div>
         <div class="header-btn" @click="warningClickHandler">
           <img src="@/assets/index/ic_warning_top.png" alt="预警" class="header-btn-img" />
         </div>
@@ -125,10 +128,13 @@ export default {
     goBackHandler (item) {
       return item.parent?.path
     },
-    warningClickHandler() {
+    errorClickHandler () {
+      this.$store.dispatch('app/toggleErrorDialogFlag', true)
+    },
+    warningClickHandler () {
       this.$store.dispatch('app/toggleWarningDialogFlag', true)
     },
-    messageClickHandler() {
+    messageClickHandler () {
       this.$message.info('开发中')
     }
   }
@@ -229,7 +235,7 @@ export default {
           height: 100%;
         }
         &::after {
-          content: '';
+          content: "";
           display: none;
           width: 7px;
           height: 7px;

src/layout/index.vue

@@ -48,6 +48,7 @@
     <PassengerDialog />
     <AbnormalBaggageDialog />
     <WarningDialog />
+    <ErrorDialog />
   </div>
 </template>
 
@@ -63,7 +64,7 @@ import MD5 from 'blueimp-md5'
 import PassengerDialog from '@/components/PassengerDialog'
 import AbnormalBaggageDialog from '@/components/AbnormalBaggageDialog'
 import WarningDialog from '@/components/WarningDialog'
-
+import ErrorDialog from '@/components/ErrorDialog'
 export default {
   name: 'Layout',
   components: {
@@ -74,6 +75,7 @@ export default {
     PassengerDialog,
     AbnormalBaggageDialog,
     WarningDialog,
+    ErrorDialog
   },
   mixins: [ResizeMixin],
   data () {

src/store/getters.js

@@ -42,5 +42,6 @@ const getters = {
   savedTableFilterValuesMap: state => state.savedSettings.savedTableFilterValuesMap,
   savedFormDataMap: state => state.savedSettings.savedFormDataMap,
   warningDialogFlag: state => state.app.warningDialogFlag,
+  errorDialogFlag: state => state.app.errorDialogFlag
 }
 export default getters

src/store/modules/app.js

@@ -37,6 +37,7 @@ const state = {
     fileNumber: '',
   },
   warningDialogFlag: false,
+  errorDialogFlag: false,
 }
 const mutations = {
   TOGGLE_SIDEBAR: state => {
@@ -73,76 +74,82 @@ const mutations = {
     state.systemSet = systemSet
     Cookies.set('systemSet', systemSet)
   },
-  SET_QUERY_FORM(state, form) {
+  SET_QUERY_FORM (state, form) {
     state.queryForm = form
     sessionStorage.setItem('queryForm', JSON.stringify(form))
   },
   EXPAND_SIDEBAR: (state, expandFlag) => {
     state.sidebar.expand = expandFlag
   },
-  TOGGLE_PASSENGER_DIALOG_FLAG(state, flag) {
+  TOGGLE_PASSENGER_DIALOG_FLAG (state, flag) {
     state.passengerDialogFlag = flag
   },
-  SET_PASSENGER_QUERY_PARAMS(state, params) {
+  SET_PASSENGER_QUERY_PARAMS (state, params) {
     state.passengerQueryParams = params
   },
-  TOGGLE_ABNORMAL_BAGGAGE_DIALOG_FLAG(state, flag) {
+  TOGGLE_ABNORMAL_BAGGAGE_DIALOG_FLAG (state, flag) {
     state.abnormalBaggageDialogFlag = flag
   },
-  SET_ABNORMAL_BAGGAGE_QUERY_PARAMS(state, params) {
+  SET_ABNORMAL_BAGGAGE_QUERY_PARAMS (state, params) {
     state.abnormalBaggageQueryParams = params
   },
-  TOGGLE_WARNING_DIALOG_FLAG(state, flag) {
+  TOGGLE_WARNING_DIALOG_FLAG (state, flag) {
     state.warningDialogFlag = flag
+  },
+  TOGGLE_ERROR_DIALOG_FLAG (state, flag) {
+    state.errorDialogFlag = flag
   }
 }
 
 const actions = {
-  toggleSideBar({ commit }) {
+  toggleSideBar ({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
-  closeSideBar({ commit }, { withoutAnimation }) {
+  closeSideBar ({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },
-  toggleDevice({ commit }, device) {
+  toggleDevice ({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   },
-  toggleDialog({ commit }, dialog) {
+  toggleDialog ({ commit }, dialog) {
     commit('TOGGLE_DIALOG', dialog)
   },
-  togglePwdflag({ commit }, pwdflag) {
+  togglePwdflag ({ commit }, pwdflag) {
     commit('TOGGLE_PWDFLAG', pwdflag)
   },
-  toggleOutflag({ commit }, outflag) {
+  toggleOutflag ({ commit }, outflag) {
     commit('TOGGLE_OUTFLAG', outflag)
   },
-  toggleOutcheck({ commit }, outcheck) {
+  toggleOutcheck ({ commit }, outcheck) {
     commit('TOGGLE_OUTCHECK', outcheck)
   },
-  getSystemSet({ commit }, systemSet) {
+  getSystemSet ({ commit }, systemSet) {
     commit('SYSTEM_SET', systemSet)
   },
-  setQueryForm({ commit }, form) {
+  setQueryForm ({ commit }, form) {
     commit('SET_QUERY_FORM', form)
   },
-  expandSidebar({ commit }, expandFlag) {
+  expandSidebar ({ commit }, expandFlag) {
     commit('EXPAND_SIDEBAR', expandFlag)
   },
-  togglePassengerDialogFlag({ commit }, flag) {
+  togglePassengerDialogFlag ({ commit }, flag) {
     commit('TOGGLE_PASSENGER_DIALOG_FLAG', flag)
   },
-  setPassengerQueryParams({ commit }, params) {
+  setPassengerQueryParams ({ commit }, params) {
     commit('SET_PASSENGER_QUERY_PARAMS', params)
   },
-  toggleAbnormalBaggageDialogFlag({ commit }, flag) {
+  toggleAbnormalBaggageDialogFlag ({ commit }, flag) {
     commit('TOGGLE_ABNORMAL_BAGGAGE_DIALOG_FLAG', flag)
   },
-  setAbnormalBaggageQueryParams({ commit }, params) {
+  setAbnormalBaggageQueryParams ({ commit }, params) {
     commit('SET_ABNORMAL_BAGGAGE_QUERY_PARAMS', params)
   },
-  toggleWarningDialogFlag({ commit }, flag) {
+  toggleWarningDialogFlag ({ commit }, flag) {
     commit('TOGGLE_WARNING_DIALOG_FLAG', flag)
   },
+  toggleErrorDialogFlag ({ commit }, flag) {
+    commit('TOGGLE_ERROR_DIALOG_FLAG', flag)
+  },
 }
 
 export default {