BigScreen/src/views/home/leftbox/historyAlarm.vue

<template>
  <div class="absolute top-10px right-15px">
    <n-button class="bg-#389bff94" size="small" @click="historyAlarm">历史告警</n-button>
  </div>
  <n-modal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    title="告警记录"
    size="huge"
    :style="{
      marginTop: '10%',
      width: '50%'
    }"
    :bordered="false"
  >
    <n-data-table :columns="columns" :data="data" max-height="500px" bordered />
    <div class="flex justify-end mt-2">
      <n-pagination
        v-model:page="pagination.page"
        :page-sizes="pagination.pageSizes"
        :page-count="pagination.pageSize"
        :on-update:page="pagination.onChange"
        :on-update:page-size="pagination.onUpdatePageSize"
        show-quick-jumper
        show-size-picker
      />
    </div>
  </n-modal>
</template>

<script setup>
  import { NButton, NModal, NDataTable, NPagination, useModal } from 'naive-ui'
  import { Events } from '@/utils/enum'
  import dayjs from 'dayjs'
  import { h } from 'vue'

  const modal = useModal()
  const { API_ALARM_HISTORY_GET } = useRequest()
  const showModal = ref(false)

  function createColumns({ handleSubmit }) {
    return [
      {
        title: '事件名称',
        key: 'eventTypeId',
        render(row) {
          return h('span', Events[row.eventTypeId])
        }
      },
      {
        title: '事件时间',
        key: 'haveTime',
        render(row) {
          return dayjs(parseInt(`${row.haveTime}`.padEnd(13, '0'))).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      {
        title: '核验结果',
        key: 'handled',
        render(row) {
          const t = { 0: '未处理', 1: '已处理', 2: '误报' }
          return h('span', t[row.handled])
        }
      },
      {
        title: '可信度',
        key: 'score'
      },
      {
        title: '操作',
        key: 'actions',
        render(row) {
          return h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: 'small',
              onClick: () => handleSubmit(row)
            },
            { default: () => '查看' }
          )
        }
      }
    ]
  }

  function historyAlarm() {
    showModal.value = true
  }

  const data = ref([])
  const columns = createColumns({
    handleSubmit(row) {
      modal.create({
        title: '事件详情',
        preset: 'card',
        style: {
          marginTop: '10%'
        },
        content: () =>
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } }, [
            h('span', {}, `事件名称：${Events[row.eventTypeId] ? Events[row.eventTypeId] : ''}`),
            h(
              'span',
              {},
              `事件时间：${dayjs(parseInt(`${row.haveTime}`.padEnd(13, '0'))).format('YYYY-MM-DD HH:mm:ss')}`
            ),
            h('span', { style: { 'white-space': 'pre-wrap' } }, `事件描述：${row.handledDetail}`)
          ])
      })
    }
  })

  const pagination = reactive({
    page: 1,
    pageSize: 10,
    showSizePicker: true,
    pageSizes: [10, 50, 100],
    onChange: (page) => {
      pagination.page = page
      init()
    },
    onUpdatePageSize: (pageSize) => {
      pagination.pageSize = pageSize
      pagination.page = 1
      console.log(123)

      init()
    }
  })

  const init = async () => {
    const res = await API_ALARM_HISTORY_GET({
      page: pagination.page,
      page_size: pagination.pageSize
    })
    data.value = res?.items || []
    pagination.total = res?.total
    pagination.page = res?.page
    pagination.pageSize = res?.pageSize
    console.log(res)
  }
  onMounted(() => {
    init()
  })
</script>