预警报警信息弹窗

public/config.js

@@ -28,6 +28,7 @@ window.SERVICE_ID = {
   dashboardDateData: 200247, // 首页-当日航班和行李数量
   dashboardMap: 200248, // 首页-行李分布
   dashboardCompanyData: 200249, // 首页-航司行李量排行
+  warningInfo: 10201, // 预警报警信息
 
   /***-----高级查询------***/
   baggageTypeId: 86, //高级查询-特殊行李类型下拉选项查询-id

src/components/WarningDialog/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <Dialog
+    :flag="warningDialogFlag"
+    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: 'alarmlog_news',
+          label: '预警报警消息',
+          minWidth: '600',
+        },
+        {
+          prop: 'alarmlog_time',
+          label: '创建时间',
+          minWidth: '160',
+        },
+      ],
+      tableData: [],
+      loading: false,
+      noMore: false,
+      page: 0,
+      pageSize: 10,
+    }
+  },
+  computed: {
+    ...mapGetters(['warningDialogFlag']),
+  },
+  watch: {
+    warningDialogFlag(flag) {
+      if (flag) {
+        this.resetTable()
+        this.load()
+        this.$nextTick(() => {
+          this.$refs['dialog']?.focus()
+        })
+      }
+    },
+  },
+  methods: {
+    dialogHide() {
+      this.$store.dispatch('app/toggleWarningDialogFlag', 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 === 'alarmlog_time') {
+        return String(cellValue ?? '').replace('T', ' ')
+      }
+      return cellValue
+    },
+    async getTableData() {
+      this.loading = true
+      try {
+        const { code, returnData, message } = await Query({
+          serviceId: SERVICE_ID.warningInfo,
+          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

@@ -79,7 +79,7 @@ export default {
   },
   components: {
     Breadcrumb,
-    Hamburger
+    Hamburger,
     // TagsView,
   },
   watch: {
@@ -126,7 +126,7 @@ export default {
       return item.parent?.path
     },
     warningClickHandler() {
-      this.$message.info('开发中')
+      this.$store.dispatch('app/toggleWarningDialogFlag', true)
     },
     messageClickHandler() {
       this.$message.info('开发中')

src/layout/index.vue

@@ -47,6 +47,7 @@
     </Dialog>
     <PassengerDialog />
     <AbnormalBaggageDialog />
+    <WarningDialog />
   </div>
 </template>
 
@@ -61,6 +62,8 @@ import Dialog from '@/layout/components/Dialog'
 import MD5 from 'blueimp-md5'
 import PassengerDialog from '@/components/PassengerDialog'
 import AbnormalBaggageDialog from '@/components/AbnormalBaggageDialog'
+import WarningDialog from '@/components/WarningDialog'
+
 export default {
   name: 'Layout',
   components: {
@@ -70,6 +73,7 @@ export default {
     Dialog,
     PassengerDialog,
     AbnormalBaggageDialog,
+    WarningDialog,
   },
   mixins: [ResizeMixin],
   data () {

src/store/getters.js

@@ -40,6 +40,7 @@ const getters = {
   abnormalBaggageQueryParams: state => state.app.abnormalBaggageQueryParams,
   savedHiddenColumnKeysMap: state => state.savedSettings.savedHiddenColumnKeysMap,
   savedTableFilterValuesMap: state => state.savedSettings.savedTableFilterValuesMap,
-  savedFormDataMap: state => state.savedSettings.savedFormDataMap
+  savedFormDataMap: state => state.savedSettings.savedFormDataMap,
+  warningDialogFlag: state => state.app.warningDialogFlag,
 }
 export default getters

src/store/modules/app.js

@@ -34,8 +34,9 @@ const state = {
     flightNO: '',
     flightDate: '',
     bagSN: '',
-    fileNumber: ''
-  }
+    fileNumber: '',
+  },
+  warningDialogFlag: false,
 }
 const mutations = {
   TOGGLE_SIDEBAR: state => {
@@ -90,6 +91,9 @@ const mutations = {
   },
   SET_ABNORMAL_BAGGAGE_QUERY_PARAMS(state, params) {
     state.abnormalBaggageQueryParams = params
+  },
+  TOGGLE_WARNING_DIALOG_FLAG(state, flag) {
+    state.warningDialogFlag = flag
   }
 }
 
@@ -136,6 +140,9 @@ const actions = {
   setAbnormalBaggageQueryParams({ commit }, params) {
     commit('SET_ABNORMAL_BAGGAGE_QUERY_PARAMS', params)
   },
+  toggleWarningDialogFlag({ commit }, flag) {
+    commit('TOGGLE_WARNING_DIALOG_FLAG', flag)
+  },
 }
 
 export default {