admin-vben5/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue

<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';

import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
import { ref, watch } from 'vue';

import {
  useVbenVxeGrid,
  vxeCheckboxChecked,
  type VxeGridProps,
} from '#/adapter/vxe-table';

import { commonDownloadExcel } from '#/utils/file/download';
import { renderDict } from '#/utils/render';

import { columns, querySchema } from './data';
import warningModal from './warning-modal.vue';
import warningDetail from './warning-detail.vue';
import LevelSettingModal from './level-setting-modal.vue';
import imgPng from '../../../../assets/algorithmManagement/image.png';

// 假数据
const mockData = ref([
  {
    id: 1,
    alarmId: 'JWD-3434234',
    alarmTime: '2025.07.21 12:20',
    level: '特大',
    alarmType: '越界侦测',
    description: '温度高于80度发生火宅',
    location: '1栋3号电梯旁',
    processingStatus: '待分配',
    processingDetails: '',
    processingTime: '',
  },
  {
    id: 2,
    alarmId: 'JWD-3434235',
    alarmTime: '2025.07.21 11:15',
    level: '重要',
    alarmType: '异常行为',
    description: '人员异常聚集',
    location: '2栋大厅',
    processingStatus: '待分配',
    processingDetails: '已派人员前往处理',
    processingTime: '2025.07.21 11:30',
  },
  {
    id: 3,
    alarmId: 'JWD-3434236',
    alarmTime: '2025.07.21 10:45',
    level: '一般',
    alarmType: '设备故障',
    description: '摄像头离线',
    location: '3栋走廊',
    processingStatus: '待分配',
    processingDetails: '已修复设备',
    processingTime: '2025.07.21 11:00',
  },
  {
    id: 4,
    alarmId: 'JWD-3434236',
    alarmTime: '2025.07.21 10:45',
    level: '一般',
    alarmType: '设备故障',
    description: '摄像头离线',
    location: '3栋走廊',
    processingStatus: '待分配',
    processingDetails: '等待接受',
    processingTime: '2025.07.21 11:00',
  },
]);

const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 100,
    componentProps: {
      allowClear: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};

const gridOptions: VxeGridProps = {
  columns,
  height: 'auto',
  data: mockData.value,
  pagerConfig: {
    currentPage: 1,
    pageSize: 10,
    total: mockData.value.length,
  },
  rowConfig: {
    keyField: 'id',
  },
  id: 'video-warning-processing-index',
};

const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 监听数据变化，强制重新渲染表格
const tableKey = ref(0);
watch(
  mockData,
  () => {
    tableKey.value++;
  },
  { deep: true },
);

const [WarningModal, modalApi] = useVbenModal({
  connectedComponent: warningModal,
});

const [WarningDetail, detailApi] = useVbenModal({
  connectedComponent: warningDetail,
});

const [LevelSettingModalComp, levelModalApi] = useVbenModal({
  connectedComponent: LevelSettingModal,
});

// 级别设置
function handleLevelSetting(row: any) {
  levelModalApi.setData({ id: row.id, level: row.level, data: mockData.value });
  levelModalApi.open();
}

// 查看详情
async function handleView(row: any) {
  detailApi.setData({ id: row.id, data: mockData.value });
  detailApi.open();
}

// 编辑
async function handleEdit(row: any) {
  modalApi.setData({ id: row.id, data: mockData.value });
  modalApi.open();
}

// 分配处理
function handleAssign(row: any) {
  Modal.confirm({
    title: '分配处理',
    content: `确定要分配预警 ${row.alarmId} 给处理人员吗？`,
    onOk() {
      // 模拟分配处理
      const index = mockData.value.findIndex((item: any) => item.id === row.id);
      if (index !== -1) {
        // mockData.value[index].processingStatus = '处理中';
        // mockData.value[index].processingDetails = '已分配给处理人员';
        // mockData.value[index].processingTime = new Date().toLocaleString();
        tableApi.query();
      }
    },
  });
}

// 删除
async function handleDelete(row: any) {
  const index = mockData.value.findIndex((item: any) => item.id === row.id);
  if (index !== -1) {
    mockData.value.splice(index, 1);
    await tableApi.query();
  }
}

// 批量删除
function handleMultiDelete() {
  const rows = tableApi.grid.getCheckboxRecords();
  const ids = rows.map((row: any) => row.id);
  Modal.confirm({
    title: '提示',
    okType: 'danger',
    content: `确认删除选中的${ids.length}条记录吗？`,
    onOk: async () => {
      ids.forEach((id) => {
        const index = mockData.value.findIndex((item: any) => item.id === id);
        if (index !== -1) {
          mockData.value.splice(index, 1);
        }
      });
      await tableApi.query();
    },
  });
}
</script>
<template>
  <Page :auto-content-height="true">
    <BasicTable
      :key="tableKey"
      class="flex-1 overflow-hidden"
      table-title="视频预警处理"
    >
      <template #toolbar-tools>
        <Space>
          <a-button
            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['video:warning:remove']"
            @click="handleMultiDelete"
          >
            {{ $t('pages.common.delete') }}
          </a-button>
        </Space>
      </template>
      <template #action="{ row }">
        <Space>
          <!-- <ghost-button
            v-access:code="['video:warning:level']"
            @click.stop="handleLevelSetting(row)"
          >
            级别设置
          </ghost-button> -->
          <ghost-button
            v-access:code="['video:warning:view']"
            @click.stop="handleView(row)"
          >
            {{ $t('pages.common.info') }}
          </ghost-button>
          <ghost-button
            v-access:code="['video:warning:edit']"
            @click.stop="handleEdit(row)"
          >
            {{ $t('pages.common.edit') }}
          </ghost-button>
          <ghost-button
            v-access:code="['video:warning:assign']"
            @click.stop="handleAssign(row)"
            :disabled="row.processingStatus === '已完成'"
          >
            分配处理
          </ghost-button>
          <Popconfirm
            :get-popup-container="getVxePopupContainer"
            placement="left"
            title="确认删除？"
            @confirm="handleDelete(row)"
          >
            <ghost-button
              danger
              v-access:code="['video:warning:remove']"
              @click.stop=""
            >
              {{ $t('pages.common.delete') }}
            </ghost-button>
          </Popconfirm>
        </Space>
      </template>
    </BasicTable>
    <WarningModal @reload="tableApi.query()" />
    <WarningDetail />
    <LevelSettingModalComp @reload="tableKey++" />
  </Page>
</template>
<style scoped lang="scss">
.ant-table-wrapper {
  .ant-table-thead > tr > th {
    background-color: #fafafa;
    font-weight: 600;
  }
}

.ant-pagination {
  .ant-pagination-item-active {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
</style>