manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨 可调整列宽.

Browse Source
This commit is contained in:
lijiahangmax
2025-10-18 22:21:30 +08:00
parent 0649c4e3de
commit eb18142926
46 changed files with 241 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
orion-visor-ui/src/views/asset-audit/terminal-connect-log/components/connect-log-table.vue
View File

@@ -99,12 +99,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:row-selection="rowSelection"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 连接用户 -->

4
orion-visor-ui/src/views/asset-audit/terminal-connect-session/components/connect-session-table.vue
View File

@@ -53,11 +53,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="columns"
:data="tableRenderData"
:pagination="false"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 连接用户 -->
<template #username="{ record }">
{{ record.username }}

2
orion-visor-ui/src/views/asset-audit/terminal-file-log/components/file-log-table.vue
View File

@@ -83,12 +83,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:row-selection="rowSelection"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 操作用户 -->

7
orion-visor-ui/src/views/asset/grant/components/host-group-grant.vue
View File

@@ -17,14 +17,15 @@
@on-selected="clickGroup" />
<a-divider direction="vertical" />
<!-- 主机表格 -->
<a-table class="group-main-hosts"
row-key="id"
<a-table row-key="id"
class="group-main-hosts table-resize"
:sticky-header="true"
:loading="loading"
:columns="hostColumns"
:data="selectedGroupHosts"
:pagination="false"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 空状态 -->
<template #empty>
<a-empty style="margin: 32px 0;" description="当前分组内无主机" />

5
orion-visor-ui/src/views/asset/grant/components/host-identity-grant.vue
View File

@@ -8,14 +8,15 @@
<!-- 主机身份表格 -->
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
class="host-identity-main-table"
class="table-resize host-identity-main-table"
:columns="hostIdentityColumns"
:row-selection="rowSelection"
row-class="pointer"
:sticky-header="true"
:data="hostIdentities"
:sticky-header="true"
:pagination="false"
:bordered="false"
:column-resizable="true"
@row-click="clickRow">
<!-- 类型 -->
<template #type="{ record }">

3
orion-visor-ui/src/views/asset/grant/components/host-key-grant.vue
View File

@@ -8,7 +8,7 @@
<!-- 主机密钥表格 -->
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
class="host-key-main-table"
class="table-resize host-key-main-table"
:columns="hostKeyColumns"
:row-selection="rowSelection"
row-class="pointer"
@@ -16,6 +16,7 @@
:data="hostKeys"
:pagination="false"
:bordered="false"
:column-resizable="true"
@row-click="clickRow" />
</grant-layout>
</template>

2
orion-visor-ui/src/views/asset/host-identity/components/host-identity-table.vue
View File

@@ -111,12 +111,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 类型 -->

2
orion-visor-ui/src/views/asset/host-key/components/host-key-table.vue
View File

@@ -94,12 +94,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 操作 -->

2
orion-visor-ui/src/views/asset/host-list/components/host-table.vue
View File

@@ -146,12 +146,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 主机信息 -->

2
orion-visor-ui/src/views/dashboard/workplace/components/batch-exec-table.vue
View File

@@ -13,11 +13,13 @@
<div class="card-body">
<!-- 表格 -->
<a-table row-key="id"
class="table-resize"
:loading="loading"
:columns="batchExecColumns"
:data="data.exec?.execLogList || []"
:pagination="false"
:bordered="false"
:column-resizable="true"
:scroll="{ y: 258 }">
<!-- 空状态 -->
<template #empty>

2
orion-visor-ui/src/views/dashboard/workplace/components/terminal-connect-table.vue
View File

@@ -13,11 +13,13 @@
<div class="card-body">
<!-- 表格 -->
<a-table row-key="id"
class="table-resize"
:loading="loading"
:columns="terminalLogColumns"
:data="data.terminal?.terminalConnectList || []"
:pagination="false"
:bordered="false"
:column-resizable="true"
:scroll="{ y: 258 }">
<!-- 空状态 -->
<template #empty>

2
orion-visor-ui/src/views/dashboard/workplace/components/user-login-table.vue
View File

@@ -12,11 +12,13 @@
</div>
<div class="card-body">
<a-table row-key="id"
class="table-resize"
:loading="loading"
:columns="userLoginColumns"
:data="data.infra?.loginHistoryList || []"
:pagination="false"
:bordered="false"
:column-resizable="true"
:scroll="{ y: 388 }">
<!-- 登录设备 -->
<template #content="{ record }">

4
orion-visor-ui/src/views/exec/exec-command-log/components/exec-command-host-log-table.vue
View File

@@ -2,13 +2,15 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="hostColumns"
:data="row.hosts"
:expandable="expandable"
:scroll="{ y: '100%' }"
:pagination="false"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 执行主机 -->
<template #hostName="{ record }">
<span class="table-cell-value span-blue">

6
orion-visor-ui/src/views/exec/exec-command-log/components/exec-command-log-table.vue
View File

@@ -106,6 +106,7 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
@@ -113,14 +114,15 @@
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)"
@expand="loadExecHost">
<!-- 展开表格 -->
<template #expand-row="{ record }">
<exec-command-host-log-table :row="record"
@view-command="s => emits('viewCommand', s)"
@view-params="s => emits('viewParams', s)"
@view-command="(s: any) => emits('viewCommand', s)"
@view-params="(s: any) => emits('viewParams', s)"
@refresh-host="refreshExecHost" />
</template>
<!-- 执行命令 -->

4
orion-visor-ui/src/views/exec/exec-job-log/components/exec-job-host-log-table.vue
View File

@@ -2,13 +2,15 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="hostColumns"
:data="row.hosts"
:expandable="expandable"
:scroll="{ y: '100%' }"
:pagination="false"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 执行主机 -->
<template #hostName="{ record }">
<span class="table-cell-value span-blue">

2
orion-visor-ui/src/views/exec/exec-job-log/components/exec-job-log-table.vue
View File

@@ -97,6 +97,7 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
@@ -104,6 +105,7 @@
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)"
@expand="loadExecHost">

2
orion-visor-ui/src/views/exec/exec-job/components/exec-job-table.vue
View File

@@ -89,12 +89,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- cron -->

2
orion-visor-ui/src/views/exec/exec-template/components/exec-template-table.vue
View File

@@ -76,12 +76,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 模板命令 -->

2
orion-visor-ui/src/views/exec/upload-task/components/upload-task-table.vue
View File

@@ -106,12 +106,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 上传路径 -->

46
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-clear-modal.vue
View File

@@ -10,7 +10,7 @@
ok-text="清理"
:ok-button-props="{ disabled: loading }"
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
:on-before-ok="handleOk"
@close="handleClose">
<a-spin class="full" :loading="loading">
<a-form :model="formModel"
@@ -23,12 +23,13 @@
placeholder="请选择处理状态"
allow-clear />
</a-form-item>
<!-- 告警主机 -->
<a-form-item field="hostId" label="告警主机">
<host-selector v-model="formModel.hostId"
placeholder="请选择告警主机"
hide-button
allow-clear />
<!-- 告警来源 -->
<a-form-item field="agentKey" label="告警来源">
<!-- 选择告警来源 -->
<monitor-host-selector v-if="sourceType === AlarmSourceType.HOST"
v-model="formModel.agentKey"
placeholder="请选择告警来源"
allow-clear />
</a-form-item>
<!-- 告警级别 -->
<a-form-item field="alarmLevel" label="告警级别">
@@ -58,7 +59,7 @@
allow-clear />
</a-form-item>
<!-- 数据集 -->
<a-form-item field="metricsId" label="数据集">
<a-form-item field="metricsMeasurement" label="数据集">
<a-select v-model="formModel.metricsMeasurement"
:options="toOptions(MetricsMeasurementKey)"
placeholder="数据集"
@@ -85,12 +86,6 @@
hide-button
allow-clear />
</a-form-item>
<!-- agentKey -->
<a-form-item field="agentKey" label="agentKey">
<a-input v-model="formModel.agentKey"
placeholder="请输入agentKey"
allow-clear />
</a-form-item>
<!-- 告警时间 -->
<a-form-item field="createTimeRange" label="告警时间">
<a-range-picker v-model="formModel.createTimeRange"
@@ -118,21 +113,25 @@
import useVisible from '@/hooks/visible';
import { Message, Modal } from '@arco-design/web-vue';
import { useDictStore } from '@/store';
import { maxClearLimit, HandleStatusKey, AlarmLevelKey, MetricsMeasurementKey, FalseAlarmKey } from '../types/const';
import { maxClearLimit, HandleStatusKey, AlarmLevelKey, MetricsMeasurementKey, FalseAlarmKey, AlarmSourceType } from '../types/const';
import { assignOmitRecord } from '@/utils';
import UserSelector from '@/components/user/user/selector/index.vue';
import HostSelector from '@/components/asset/host/selector/index.vue';
import MonitorMetricsSelector from '@/components/monitor/metrics/selector/index.vue';
import AlarmPolicySelector from '@/components/monitor/alarm-policy/selector/index.vue';
import MonitorHostSelector from '@/components/monitor/host/selector/index.vue';
const { toOptions } = useDictStore();
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const props = defineProps<{
sourceType: string;
}>();
const defaultForm = (): AlarmEventQueryRequest => {
return {
id: undefined,
hostId: undefined,
sourceType: undefined,
agentKey: undefined,
policyId: undefined,
metricsId: undefined,
@@ -160,7 +159,7 @@
defineExpose({ open });
// 确定
const handlerOk = async () => {
const handleOk = async () => {
if (!formModel.value.limit) {
Message.error('请输入数量限制');
return false;
@@ -170,7 +169,7 @@
// 获取总数量
const { data } = await getAlarmEventCount(formModel.value);
if (data) {
// 清理
// 清空
doClear(data);
} else {
// 无数据
@@ -195,9 +194,7 @@
const { data } = await clearMonitorAlarmEvent(formModel.value);
Message.success(`已成功清理 ${data} 条数据`);
emits('clear');
// 清空
setVisible(false);
handlerClear();
handleClose();
} catch (e) {
} finally {
setLoading(false);
@@ -208,11 +205,12 @@
// 关闭
const handleClose = () => {
handlerClear();
handleClear();
setVisible(false);
};
// 清空
const handlerClear = () => {
const handleClear = () => {
setLoading(false);
};

13
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-handle-modal.vue
View File

@@ -10,7 +10,7 @@
ok-text="处理"
:ok-button-props="{ disabled: loading }"
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
:on-before-ok="handleOk"
@close="handleClose">
<a-spin class="full" :loading="loading">
<a-form ref="formRef"
@@ -90,7 +90,7 @@
defineExpose({ open });
// 确定
const handlerOk = async () => {
const handleOk = async () => {
setLoading(true);
try {
// 验证参数
@@ -102,8 +102,7 @@
await handleAlarmEvent(formModel.value);
Message.success('已处理');
emits('handled', { ...formModel.value });
// 清空
handlerClear();
handleClose();
return true;
} catch (e) {
return false;
@@ -114,13 +113,13 @@
// 关闭
const handleClose = () => {
handlerClear();
handleClear();
setVisible(false);
};
// 清空
const handlerClear = () => {
const handleClear = () => {
setLoading(false);
setVisible(false);
};
</script>

89
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-table-base.vue
View File

@@ -16,7 +16,7 @@
<a-button v-if="showClearButton"
v-permission="['monitor:alarm-event:management:clear']"
status="danger"
@click="$emit('openClear', formModel)">
@click="openClear">
清理
<template #icon>
<icon-close />
@@ -26,7 +26,7 @@
<a-button v-permission="['monitor:alarm-event:handle']"
type="primary"
:disabled="selectedKeys.length === 0"
@click="$emit('openHandle', selectedKeys)">
@click="openHandle(selectedKeys)">
处理告警
<template #icon>
<icon-play-arrow-fill />
@@ -65,32 +65,36 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
:scroll="{ x: 'auto' }"
@page-change="(page: number) => $emit('query', page, pagination.pageSize)"
@page-size-change="(size: number) => $emit('query', 1, size)">
<!-- 主机信息 -->
<template #hostInfo="{ record }">
<!-- 来源信息 -->
<template #sourceInfo="{ record }">
<div class="info-wrapper">
<div class="info-item">
<!-- 主机名称 -->
<div v-if="record.sourceType === AlarmSourceType.HOST && record.sourceInfo?.name" class="info-item">
<span class="info-label">主机名称</span>
<span class="info-value text-copy text-ellipsis"
:title="record.hostName"
@click="copy(record.hostName, true)">
{{ record.hostName }}
:title="record.sourceInfo.name"
@click="copy(record.sourceInfo.name, true)">
{{ record.sourceInfo.name }}
</span>
</div>
<div class="info-item">
<!-- 主机地址 -->
<div v-if="record.sourceType === AlarmSourceType.HOST && record.sourceInfo?.address" class="info-item">
<span class="info-label">主机地址</span>
<span class="info-value span-blue text-copy text-ellipsis"
:title="record.hostAddress"
@click="copy(record.hostAddress, true)">
{{ record.hostAddress }}
:title="record.sourceInfo.address"
@click="copy(record.sourceInfo.address, true)">
{{ record.sourceInfo.address }}
</span>
</div>
</div>
@@ -147,7 +151,7 @@
<a-button v-permission="['monitor:alarm-event:handle']"
type="text"
size="mini"
@click="$emit('openHandle', [record.id])">
@click="openHandle([record.id])">
处理
</a-button>
<!-- 更多 -->
@@ -171,6 +175,13 @@
</div>
</template>
</a-table>
<!-- 处理模态框-->
<alarm-event-handle-modal ref="handleModal"
@handled="alarmHandled" />
<!-- 清理模态框-->
<alarm-event-clear-modal ref="clearModal"
:source-type="sourceType"
@clear="emits('reload')" />
</a-card>
</template>
@@ -181,28 +192,33 @@
</script>
<script lang="ts" setup>
import type { PaginationProps } from '@arco-design/web-vue';
import type { MetricsQueryResponse } from '@/api/monitor/metrics';
import type { AlarmEventQueryRequest, AlarmEventQueryResponse, AlarmEventHandleRequest } from '@/api/monitor/alarm-event';
import { h, ref } from 'vue';
import { batchDeleteAlarmEvent, setAlarmEventFalse } from '@/api/monitor/alarm-event';
import { Message, Modal, Space, Tag, type PaginationProps } from '@arco-design/web-vue';
import { Message, Modal, Space, Tag } from '@arco-design/web-vue';
import {
FalseAlarm,
HandleStatusKey,
FalseAlarmKey,
MetricsMeasurementKey,
AlarmLevelKey,
TriggerConditionKey
} from '@/views/monitor/alarm-event/types/const';
TriggerConditionKey,
AlarmSourceType
} from '../types/const';
import { useRowSelection, useTableColumns } from '@/hooks/table';
import { copy } from '@/hooks/copy';
import { useQueryOrder, DESC } from '@/hooks/query-order';
import { useDictStore, useCacheStore, useUserStore } from '@/store';
import { MetricsUnit, MetricUnitFormatter } from '@/utils/metrics';
import TableAdjust from '@/components/app/table-adjust/index.vue';
import AlarmEventClearModal from './alarm-event-clear-modal.vue';
import AlarmEventHandleModal from './alarm-event-handle-modal.vue';
const props = defineProps<{
tableName: string;
sourceType: string;
columns: any[];
tableData: AlarmEventQueryResponse[];
loading: boolean;
@@ -212,25 +228,38 @@
}>();
const emits = defineEmits<{
openHandle: [ids: number[]];
openClear: [formData: AlarmEventQueryRequest];
reload: [];
setLoading: [loading: boolean];
query: [page?: number, pageSize?: number];
}>();
const rowSelection = useRowSelection();
const userStore = useUserStore();
const cacheStore = useCacheStore();
const queryOrder = useQueryOrder(props.tableName, DESC);
const { tableColumns, columnsHook } = useTableColumns(props.tableName, props.columns);
const { monitorMetrics } = useCacheStore();
const { getDictValue } = useDictStore();
const handleModal = ref();
const clearModal = ref();
const selectedKeys = ref<Array<number>>([]);
// 告警处理回调
const alarmHandled = (request: Required<AlarmEventHandleRequest>) => {
props.tableData.filter(s => (request.idList || []).includes(s.id)).forEach(s => {
s.handleTime = request.handleTime;
s.handleStatus = request.handleStatus;
s.handleRemark = request.handleRemark;
s.handleUserId = userStore.id as number;
s.handleUsername = userStore.username as string;
});
selectedKeys.value = [];
};
// 获取指标名称
const getMetricsField = (metricsId: number, field: string) => {
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
};
return (cacheStore.monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
};
// 提取标签
const extraTags = (record: AlarmEventQueryResponse) => {
@@ -303,19 +332,15 @@
});
};
// 告警处理回调
const alarmHandled = (request: Required<AlarmEventHandleRequest>) => {
props.tableData.filter(s => (request.idList || []).includes(s.id)).forEach(s => {
s.handleTime = request.handleTime;
s.handleStatus = request.handleStatus;
s.handleRemark = request.handleRemark;
s.handleUserId = userStore.id as number;
s.handleUsername = userStore.username as string;
});
selectedKeys.value = [];
// 打开处理
const openHandle = (idList: Array<number>) => {
handleModal.value.open(idList);
};
defineExpose({ alarmHandled });
// 打开清理
const openClear = () => {
clearModal.value.open(props.formModel);
};
</script>

55
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-table.vue
View File

@@ -13,12 +13,13 @@
placeholder="请选择处理状态"
allow-clear />
</a-form-item>
<!-- 告警主机 -->
<a-form-item field="hostId" label="告警主机">
<host-selector v-model="formModel.hostId"
placeholder="请选择告警主机"
hide-button
allow-clear />
<!-- 告警来源 -->
<a-form-item field="agentKey" label="告警来源">
<!-- 选择告警来源 -->
<monitor-host-selector v-if="sourceType === AlarmSourceType.HOST"
v-model="formModel.agentKey"
placeholder="请选择告警来源"
allow-clear />
</a-form-item>
<!-- 告警级别 -->
<a-form-item field="alarmLevel" label="告警级别">
@@ -75,12 +76,6 @@
hide-button
allow-clear />
</a-form-item>
<!-- agentKey -->
<a-form-item field="agentKey" label="agentKey">
<a-input v-model="formModel.agentKey"
placeholder="请输入agentKey"
allow-clear />
</a-form-item>
<!-- 告警时间 -->
<a-form-item field="createTimeRange" label="告警时间">
<a-range-picker v-model="formModel.createTimeRange"
@@ -92,7 +87,7 @@
</query-header>
</a-card>
<!-- 表格 -->
<alarm-event-table-base ref="eventTable"
<alarm-event-table-base :source-type="sourceType"
:table-name="TableName"
:columns="columns"
:table-data="tableRenderData"
@@ -100,9 +95,8 @@
:form-model="formModel"
:pagination="pagination"
:show-clear-button="true"
@open-handle="emits('openHandle', $event)"
@open-clear="emits('openClear', formModel)"
@set-loading="setLoading"
@reload="reload"
@query="fetchTableData" />
</template>
@@ -113,25 +107,26 @@
</script>
<script lang="ts" setup>
import type { AlarmEventQueryRequest, AlarmEventQueryResponse, AlarmEventHandleRequest } from '@/api/monitor/alarm-event';
import type { AlarmEventQueryRequest, AlarmEventQueryResponse } from '@/api/monitor/alarm-event';
import { reactive, ref, onMounted } from 'vue';
import { getAlarmEventPage } from '@/api/monitor/alarm-event';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { TableName, FalseAlarm, HandleStatusKey, FalseAlarmKey, MetricsMeasurementKey, AlarmLevelKey } from '../types/const';
import { TableName, FalseAlarm, HandleStatusKey, FalseAlarmKey, MetricsMeasurementKey, AlarmLevelKey, AlarmSourceType } from '../types/const';
import { useTablePagination } from '@/hooks/table';
import { useRoute } from 'vue-router';
import { useDictStore } from '@/store';
import { useDictStore, useUserStore } from '@/store';
import { useQueryOrder, DESC } from '@/hooks/query-order';
import UserSelector from '@/components/user/user/selector/index.vue';
import HostSelector from '@/components/asset/host/selector/index.vue';
import MonitorMetricsSelector from '@/components/monitor/metrics/selector/index.vue';
import AlarmPolicySelector from '@/components/monitor/alarm-policy/selector/index.vue';
import AlarmEventTableBase from './alarm-event-table-base.vue';
import MonitorHostSelector from '@/components/monitor/host/selector/index.vue';
const emits = defineEmits(['openHandle', 'openClear']);
const props = defineProps<{
sourceType: string;
}>();
const eventTable = ref();
const pagination = useTablePagination();
const { toOptions } = useDictStore();
const { loading, setLoading } = useLoading();
@@ -139,8 +134,8 @@
const tableRenderData = ref<Array<AlarmEventQueryResponse>>([]);
const formModel = reactive<AlarmEventQueryRequest>({
id: undefined,
sourceType: props.sourceType,
agentKey: undefined,
hostId: undefined,
policyId: undefined,
metricsId: undefined,
metricsMeasurement: undefined,
@@ -158,12 +153,7 @@
fetchTableData();
};
// 告警处理回调
const alarmHandled = (request: Required<AlarmEventHandleRequest>) => {
eventTable.value.alarmHandled(request);
};
defineExpose({ reload, alarmHandled });
defineExpose({ reload });
// 加载数据
const doFetchTableData = async (request: AlarmEventQueryRequest) => {
@@ -186,10 +176,17 @@
};
onMounted(() => {
const key = useRoute().query.key as string;
const route = useRoute();
const key = route.query.key as string;
if (key) {
formModel.id = Number.parseInt(key);
}
// 当前用户
const action = route.query.action as string;
if (action === 'self') {
formModel.handleUserId = useUserStore().id;
}
// 查询数据
fetchTableData();
});

20
orion-visor-ui/src/views/monitor/alarm-event/index.vue
View File

@@ -1,15 +1,7 @@
<template>
<div class="layout-container" v-if="render">
<!-- 列表-表格 -->
<alarm-event-table ref="table"
@open-handle="(e: any) => handleModal.open(e)"
@open-clear="(e: any) => clearModal.open(e)" />
<!-- 处理模态框-->
<alarm-event-handle-modal ref="handleModal"
@handled="(e: any) => table.alarmHandled(e)" />
<!-- 清理模态框-->
<alarm-event-clear-modal ref="clearModal"
@clear="() => table.reload()" />
<alarm-event-table :source-type="AlarmSourceType.HOST" />
</div>
</template>
@@ -22,20 +14,18 @@
<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue';
import { useDictStore, useCacheStore } from '@/store';
import { dictKeys } from './types/const';
import { dictKeys, AlarmSourceType } from './types/const';
import AlarmEventTable from './components/alarm-event-table.vue';
import AlarmEventClearModal from './components/alarm-event-clear-modal.vue';
import AlarmEventHandleModal from './components/alarm-event-handle-modal.vue';
const render = ref(false);
const table = ref();
const handleModal = ref();
const clearModal = ref();
onBeforeMount(async () => {
const cacheStore = useCacheStore();
// 加载告警策略
await cacheStore.loadMonitorAlarmPolicy();
// 加载指标列表
await cacheStore.loadMonitorMetricsList();
// 加载字典值
const dictStore = useDictStore();
await dictStore.loadKeys(dictKeys);
render.value = true;

6
orion-visor-ui/src/views/monitor/alarm-event/types/const.ts
View File

@@ -11,6 +11,12 @@ export const FalseAlarm = {
FALSE: 0,
};
// 告警来源类型
export const AlarmSourceType = {
HOST: 'HOST',
UPTIME: 'UPTIME',
};
// 告警条件 字典项
export const TriggerConditionKey = 'alarmTriggerCondition';

6
orion-visor-ui/src/views/monitor/alarm-event/types/table.columns.ts
View File

@@ -11,9 +11,9 @@ const columns = [
fixed: 'left',
default: true,
}, {
title: '主机信息',
dataIndex: 'hostInfo',
slotName: 'hostInfo',
title: '来源信息',
dataIndex: 'sourceInfo',
slotName: 'sourceInfo',
width: 248,
align: 'left',
fixed: 'left',

2
orion-visor-ui/src/views/monitor/alarm-policy/components/alarm-policy-table.vue
View File

@@ -60,11 +60,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 策略名称 -->

6
orion-visor-ui/src/views/monitor/alarm-rule/components/alarm-rule-form-drawer.vue
View File

@@ -214,7 +214,7 @@
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const { monitorMetrics } = useCacheStore();
const cacheStore = useCacheStore();
const { getDictValue, toOptions } = useDictStore();
const title = ref<string>();
@@ -250,7 +250,7 @@
return;
}
// 获取数据集
const measurementValue = (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.measurement;
const measurementValue = (cacheStore.monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.measurement;
if (!measurementValue) {
hasTags.value = false;
return;
@@ -321,7 +321,7 @@
return '';
}
// 读取指标单位
const unit = (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.unit;
const unit = (cacheStore.monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.unit;
if (!unit) {
return '';
}

8
orion-visor-ui/src/views/monitor/alarm-rule/components/alarm-rule-table.vue
View File

@@ -52,11 +52,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="false"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 指标标签 -->
<template #tags="{ record }">
<a-tag v-if="record.allEffect === 1">
@@ -165,7 +167,7 @@
const { loading, setLoading } = useLoading();
const { hasPermission } = usePermission();
const { monitorMetrics } = useCacheStore();
const cacheStore = useCacheStore();
const { toOptions, getDictValue } = useDictStore();
const { tableColumns, columnsHook } = useTableColumns(TableName, columns);
@@ -203,7 +205,7 @@
// 获取指标名称
const getMetricsField = (metricsId: number, field: string) => {
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
return (cacheStore.monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
};
// 切换规则开关

2
orion-visor-ui/src/views/monitor/alarm-rule/index.vue
View File

@@ -35,7 +35,9 @@
};
onBeforeMount(async () => {
// 加载规则列表
await useCacheStore().loadMonitorMetricsList();
// 加载字典值
const dictStore = useDictStore();
await dictStore.loadKeys(dictKeys);
render.value = true;

4
orion-visor-ui/src/views/monitor/metrics/components/metrics-table.vue
View File

@@ -66,11 +66,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 数据集 -->
@@ -81,7 +83,7 @@
</template>
<!-- 指标项 -->
<template #value="{ record }">
<span class="span-blue text-copy" @click="copy(record.measurement, true)">
<span class="span-blue text-copy" @click="copy(record.value, true)">
{{ record.value }}
</span>
</template>

19
orion-visor-ui/src/views/monitor/monitor-detail/compoments/metrics-chart.vue
View File

@@ -5,7 +5,7 @@
:loading="loading"
:bordered="false"
:header-style="{ height: '48px', padding: '8px 16px 0 16px', borderBottom: 'none' }"
:body-style="{ padding: '0 0 0 16px', height: 'calc(100% - 48px)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }">
:body-style="{ padding: '0', height: 'calc(100% - 48px)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }">
<!-- 标题 -->
<template #title>
<div class="chart-title">
@@ -61,7 +61,7 @@
}
return {
grid: {
left: 64,
left: 68,
right: 24,
top: 28,
bottom: 32,
@@ -73,6 +73,14 @@
zoomOnMouseWheel: true,
moveOnMouseMove: true,
}],
legend: {
show: props.option.legend === true,
type: 'scroll',
padding: [4, 8, 8, 8],
textStyle: {
color: themeTextColor,
}
},
tooltip: {
trigger: 'axis',
appendToBody: true,
@@ -182,13 +190,6 @@
},
},
},
legend: {
show: props.option.legend === true,
type: 'scroll',
textStyle: {
color: themeTextColor,
}
},
series: series.value.map((s, index) => {
let colors = props.option.colors[index];
return createTimeSeries({

2
orion-visor-ui/src/views/monitor/monitor-host/components/monitor-host-table.vue
View File

@@ -121,6 +121,7 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="hostId"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
@@ -128,6 +129,7 @@
:row-class="setRowClassName"
:row-selection="rowSelection"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 主机信息 -->

2
orion-visor-ui/src/views/system/dict-key/components/dict-key-table.vue
View File

@@ -90,12 +90,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 配置项 -->

4
orion-visor-ui/src/views/system/dict-value/components/dict-value-table.vue
View File

@@ -76,16 +76,18 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 配置项 -->
<template #keyName="{record}">
<template #keyName="{ record }">
{{ record.keyName }}<span style="margin: 0 4px;">-</span>{{ record.keyDescription }}
</template>
<!-- 配置值 -->

5
orion-visor-ui/src/views/system/menu/components/menu-table.vue
View File

@@ -83,13 +83,14 @@
<!-- 表格 -->
<a-card class="general-card table-card">
<a-table row-key="id"
class="table-wrapper-16"
ref="tableRef"
class="table-wrapper-16 table-resize"
:loading="fetchLoading"
:pagination="false"
:columns="columns"
:data="tableRenderData"
:bordered="false">
:bordered="false"
:column-resizable="true">
<!-- 菜单名称 -->
<template #menuName="{ record }">
<span class="ml8">{{ record.name }}</span>

2
orion-visor-ui/src/views/system/notify-template/components/notify-template-table.vue
View File

@@ -80,11 +80,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 渠道类型 -->

2
orion-visor-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
View File

@@ -2,11 +2,13 @@
<!-- 表格 -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 操作模块 -->

2
orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
View File

@@ -54,12 +54,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:row-selection="rowSelection"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 操作模块 -->

2
orion-visor-ui/src/views/user/role/components/role-table.vue
View File

@@ -66,11 +66,13 @@
<!-- table -->
<a-table row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 编码 -->

4
orion-visor-ui/src/views/user/user/components/user-table.vue
View File

@@ -101,12 +101,14 @@
<a-table v-model:selected-keys="selectedKeys"
row-key="id"
ref="tableRef"
class="table-resize"
:loading="loading"
:columns="tableColumns"
:row-selection="rowSelection"
:data="tableRenderData"
:pagination="pagination"
:bordered="false"
:column-resizable="true"
@page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size: number) => fetchTableData(1, size)">
<!-- 用户名 -->
@@ -126,7 +128,7 @@
:unchecked-text="getDictValue(userStatusKey, UserStatus.DISABLED)"
:checked-value="UserStatus.ENABLED"
:unchecked-value="UserStatus.DISABLED"
:before-change="(s) => updateStatus(record.id, s as number)" />
:before-change="(s: any) => updateStatus(record.id, s as number)" />
<!-- 无修改权限 -->
<span v-else>
<span class="circle" :style="{