skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorganize files

Browse Source
This commit is contained in:
yangsy
2025-11-20 10:58:19 +08:00
parent cbb51aa501
commit c5c363d32c
120 changed files with 606 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/dashboard-page/device-statistic-card.vue
View File

@@ -1,9 +1,8 @@
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { LineDevices } from '@/composables/query';
import { DeviceType } from '@/enums/device-type';
import { computed, toRefs } from 'vue';
import type { LineDevices, Station } from '@/apis';
import { DeviceType } from '@/enums';
import { NCard, NGrid, NGi, NStatistic, NSpace, NButton } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{
stationList: Station[];
@@ -25,7 +24,7 @@ const onlineDeviceCount = computed(() => {
if (station.online) {
const stationDevices = lineDevices.value[station.code];
Object.values(DeviceType).forEach((deviceType) => {
const onlineDeviceList = stationDevices?.[deviceType].filter((device) => device.deviceStatus === '10') ?? [];
const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
count += onlineDeviceList.length;
});
}
@@ -39,7 +38,7 @@ const offlineDeviceCount = computed(() => {
if (station.online) {
const stationDevices = lineDevices.value[station.code];
Object.values(DeviceType).forEach((deviceType) => {
const offlineDeviceList = stationDevices?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
const offlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
count += offlineDeviceList.length;
});
}

1
src/components/dashboard-page/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as DeviceStatisticCard } from './device-statistic-card.vue';

27
src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.old.vue → src/components/device-page/device-card/__deprecated__/nvr-record-diag-card.old.vue
View File

@@ -1,17 +1,12 @@
<script setup lang="ts">
import type { NdmNvrResultVO, NdmRecordCheck, RecordInfo, RecordItem } from '@/apis/models';
import { getRecordCheckByParentId as getRecordCheckByParentIdApi, reloadAllRecordCheck as reloadAllRecordCheckApi } from '@/apis/requests';
import { getRecordCheckByParentId, reloadAllRecordCheck, type NdmNvrResultVO, type NdmRecordCheck, type RecordInfo, type RecordItem } from '@/apis';
import { useStationStore } from '@/stores';
import { downloadByData, formatDuration } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { formatDuration } from '@/utils/format-duration';
import { VideocamOutline, TimeOutline, WarningOutline, CheckmarkCircleOutline, RefreshOutline } from '@vicons/ionicons5';
import dayjs from 'dayjs';
import { destr } from 'destr';
import destr from 'destr';
import { groupBy } from 'es-toolkit';
import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm, NScrollbar } from 'naive-ui';
import { computed, onMounted, ref, toRefs } from 'vue';
import { downloadByData } from '@/utils/download';
import { DownloadOutlined } from '@vicons/antd';
import { useStationStore } from '@/stores/station';
type NvrRecordDiag = {
gbCode: string;
@@ -121,9 +116,9 @@ const recordDiagStatistics = computed(() => {
};
});
const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
const { mutate: getRecordChecks, isPending: loading } = useMutation({
mutationFn: async () => {
const recordCheckList = await getRecordCheckByParentIdApi(stationCode.value, ndmNvr.value, 90);
const recordCheckList = await getRecordCheckByParentId(stationCode.value, ndmNvr.value, 90);
return recordCheckList;
},
onSuccess: (checkList) => {
@@ -135,9 +130,9 @@ const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
},
});
const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
const { mutate: reloadAllRecordChecks, isPending: reloading } = useMutation({
mutationFn: async () => {
await reloadAllRecordCheckApi(stationCode.value, 90);
await reloadAllRecordCheck(stationCode.value, 90);
},
onSuccess: () => {
window.$message.success('正在逐步刷新中，请稍后点击刷新按钮查看');
@@ -149,7 +144,7 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
});
onMounted(() => {
getRecordCheckByParentId();
getRecordChecks();
});
const onClickExportRecordCheck = () => {
@@ -180,7 +175,7 @@ const onClickExportRecordCheck = () => {
<template #header>
<NFlex :align="'center'" :size="24">
<div>录像诊断</div>
<NPopconfirm @positive-click="() => reloadAllRecordCheck()">
<NPopconfirm @positive-click="() => reloadAllRecordChecks()">
<template #trigger>
<NButton secondary size="small" :loading="reloading">
<span>点击更新所有通道录像诊断</span>
@@ -193,7 +188,7 @@ const onClickExportRecordCheck = () => {
</NFlex>
</template>
<template #header-extra>
<NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
<NButton size="small" quaternary circle :loading="loading" @click="() => getRecordChecks()">
<template #icon>
<NIcon>
<RefreshOutline />

13
src/components/device-page/device-card/camera-card.vue
View File

@@ -1,14 +1,11 @@
<script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import { destr } from 'destr';
import type { NdmCameraDiagInfo, NdmCameraResultVO } from '@/apis';
import { useDebugModeStore } from '@/stores';
import destr from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import CameraHistoryDiagCard from './history-diag-card/camera-history-diag-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import type { NdmCameraDiagInfo } from '@/apis/domains';
import { DeviceCommonCard, DeviceHeaderCard } from './current-diag-card';
import { CameraHistoryDiagCard } from './history-diag-card';
const props = defineProps<{
stationCode: string;

7
src/components/device-page/device-card/current-diag-card/device-header-card.vue
View File

@@ -1,8 +1,7 @@
<script setup lang="ts">
import type { NdmDeviceResultVO } from '@/apis/models';
import { getDeviceDetailApi, probeDeviceApi } from '@/apis/requests';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
import { useLineDevicesStore } from '@/stores/line-devices';
import { getDeviceDetailApi, probeDeviceApi, type NdmDeviceResultVO } from '@/apis';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
import { useLineDevicesStore } from '@/stores';
import { useMutation } from '@tanstack/vue-query';
import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';

8
src/components/device-page/device-card/current-diag-card/index.ts Normal file
View File

@@ -0,0 +1,8 @@
export { default as DeviceCommonCard } from './device-common-card.vue';
export { default as DeviceHardwareCard } from './device-hardware-card.vue';
export { default as DeviceHeaderCard } from './device-header-card.vue';
export { default as NvrDiskCard } from './nvr-disk-card.vue';
export { default as NvrRecordDiagCard } from './nvr-record-diag-card.vue';
export { default as SecurityBoxCircuitCard } from './security-box-circuit-card.vue';
export { default as SecurityBoxInfoCard } from './security-box-info-card.vue';
export { default as SwitchPortCard } from './switch-port-card.vue';

16
src/components/device-page/device-card/current-diag-card/nvr-disk-card.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains';
import type { NdmNvrDiagInfo } from '@/apis';
import { HardwareChipOutline, CheckmarkCircleOutline, CloseCircleOutline, WarningOutline } from '@vicons/ionicons5';
import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{
diskHealth?: NdmNvrDiagInfo['info']['diskHealth'];
groupInfoList?: NdmNvrDiagInfo['info']['groupInfoList'];
diskHealth?: NonNullable<NdmNvrDiagInfo['info']>['diskHealth'];
groupInfoList?: NonNullable<NdmNvrDiagInfo['info']>['groupInfoList'];
}>();
const { diskHealth, groupInfoList } = toRefs(props);
@@ -153,8 +153,8 @@ const getUsageStatus = (percent: number) => {
<!-- 存储使用率 -->
<NFlex :align="'center'" :size="12">
<NText style="width: 80px; font-size: 14px">存储使用率</NText>
<NProgress :percentage="getUsagePercent(group.freeSize, group.totalSize)" :status="getUsageStatus(getUsagePercent(group.freeSize, group.totalSize))" style="flex: 1">
<div>{{ getUsagePercent(group.freeSize, group.totalSize) }}%</div>
<NProgress :percentage="getUsagePercent(group.freeSize ?? 0, group.totalSize ?? 0)" :status="getUsageStatus(getUsagePercent(group.freeSize ?? 0, group.totalSize ?? 0))" style="flex: 1">
<div>{{ getUsagePercent(group.freeSize ?? 0, group.totalSize ?? 0) }}%</div>
</NProgress>
</NFlex>
@@ -162,15 +162,15 @@ const getUsageStatus = (percent: number) => {
<div class="storage-details">
<div class="storage-item">
<span class="storage-label">总容量:</span>
<span class="storage-value">{{ formatSize(group.totalSize) }}</span>
<span class="storage-value">{{ formatSize(group.totalSize ?? 0) }}</span>
</div>
<div class="storage-item">
<span class="storage-label">已用:</span>
<span class="storage-value">{{ formatSize(group.totalSize - group.freeSize) }}</span>
<span class="storage-value">{{ formatSize((group.totalSize ?? 0) - (group.freeSize ?? 0)) }}</span>
</div>
<div class="storage-item">
<span class="storage-label">可用:</span>
<span class="storage-value">{{ formatSize(group.freeSize) }}</span>
<span class="storage-value">{{ formatSize(group.freeSize ?? 0) }}</span>
</div>
</div>
</NFlex>

10
src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
View File

@@ -1,15 +1,13 @@
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { NdmNvrResultVO, NdmRecordCheck, RecordInfo, RecordItem } from '@/apis/models';
import type { NdmNvrResultVO, NdmRecordCheck, RecordInfo, RecordItem, Station } from '@/apis';
import {
getChannelList,
getRecordCheckByParentId as getRecordCheckByParentIdApi,
reloadAllRecordCheck as reloadAllRecordCheckApi,
reloadRecordCheckByGbId as reloadRecordCheckByGbIdApi,
} from '@/apis/requests';
import { useStationStore } from '@/stores/station';
import { downloadByData } from '@/utils/download';
import { formatDuration } from '@/utils/format-duration';
} from '@/apis';
import { useStationStore } from '@/stores';
import { downloadByData, formatDuration } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { DownloadOutlined } from '@vicons/antd';
import { RefreshOutline } from '@vicons/ionicons5';

4
src/components/device-page/device-card/current-diag-card/security-box-circuit-card.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts">
import type { NdmSecurityBoxCircuit } from '@/apis/domains';
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import { probeDeviceApi, rebootSecurityBox as rebootSecurityBoxApi, turnStatus as turnStatusApi } from '@/apis/requests';
import { probeDeviceApi, rebootSecurityBox as rebootSecurityBoxApi, turnStatus as turnStatusApi, type NdmSecurityBoxCircuit, type NdmSecurityBoxResultVO } from '@/apis';
import { useMutation } from '@tanstack/vue-query';
import { PowerOutline, FlashOutline } from '@vicons/ionicons5';
import { NCard, NGrid, NGridItem, NPopover, NSwitch, NIcon, NFlex, NPopconfirm, NButton } from 'naive-ui';

4
src/components/device-page/device-card/current-diag-card/switch-port-card.vue
View File

@@ -15,8 +15,8 @@
* - 响应式数据处理和布局
*/
import type { NdmSwitchPortInfo } from '@/apis/domains';
import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
import type { NdmSwitchPortInfo } from '@/apis';
import { getPortStatusVal, transformPortSpeed } from '@/components';
import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
import { computed, toRefs } from 'vue';

11
src/components/device-page/device-card/decoder-card.vue
View File

@@ -1,16 +1,11 @@
<script setup lang="ts">
import type { NdmDecoderDiagInfo } from '@/apis/domains';
import type { NdmDecoderResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmDecoderDiagInfo, NdmDecoderResultVO } from '@/apis';
import { DecoderHistoryDiagCard, DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import DecoderHistoryDiagCard from './history-diag-card/decoder-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmDecoder: NdmDecoderResultVO;

4
src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
View File

@@ -1,12 +1,10 @@
<script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmCamera: NdmCameraResultVO;

7
src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
View File

@@ -1,13 +1,10 @@
<script setup lang="ts">
import type { NdmDecoderResultVO } from '@/apis/models';
import type { NdmDecoderResultVO } from '@/apis';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmDecoder: NdmDecoderResultVO;

5
src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@/apis/models';
import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/components/helper';
import { postNdmDeviceAlarmLogPage, type NdmDeviceAlarmLogResultVO, type NdmDeviceResultVO, type PageParams } from '@/apis';
import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/components';
import { useMutation } from '@tanstack/vue-query';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
import { h } from 'vue';

5
src/components/device-page/device-card/history-diag-card/device-status-history-diag-card.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { NdmDeviceResultVO, NdmIcmpLogResultVO, NdmIcmpLogVO, PageParams, PageResult } from '@/apis/models';
import { postIcmpLogPage } from '@/apis/requests';
import { formatDuration } from '@/utils/format-duration';
import { postIcmpLogPage, type NdmDeviceResultVO, type NdmIcmpLogResultVO, type NdmIcmpLogVO, type PageParams, type PageResult } from '@/apis';
import { formatDuration } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { NCard, NPagination, NScrollbar, NTimeline, NTimelineItem, type DatePickerProps, type PaginationProps, type TimelineItemProps } from 'naive-ui';

4
src/components/device-page/device-card/history-diag-card/device-usage-history-diag-card.vue
View File

@@ -6,8 +6,8 @@ function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
</script>
<script setup lang="ts">
import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
import { postSnmpLogPage } from '@/apis/requests';
import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis';
import { postSnmpLogPage } from '@/apis';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { destr } from 'destr';

13
src/components/device-page/device-card/history-diag-card/index.ts Normal file
View File

@@ -0,0 +1,13 @@
export { default as CameraHistoryDiagCard } from './camera-history-diag-card.vue';
export { default as DecoderHistoryDiagCard } from './decoder-history-diag-card.vue';
export { default as DeviceAlarmHistoryDiagCard } from './device-alarm-history-diag-card.vue';
export { default as DeviceStatusHistoryDiagCard } from './device-status-history-diag-card.vue';
export { default as DeviceUsageHistoryDiagCard } from './device-usage-history-diag-card.vue';
export { default as KeyboardHistoryDiagCard } from './keyboard-history-diag-card.vue';
export { default as NvrDiskHealthHistoryDiagCard } from './nvr-disk-health-history-diag-card.vue';
export { default as NvrHistoryDiagCard } from './nvr-history-diag-card.vue';
export { default as SecurityBoxHistoryDiagCard } from './security-box-history-diag-card.vue';
export { default as SecurityBoxRuntimeHistoryDiagCard } from './security-box-runtime-history-diag-card.vue';
export { default as ServerHistoryDiagCard } from './server-history-diag-card.vue';
export { default as SwitchHistoryDiagCard } from './switch-history-diag-card.vue';
export { default as SwitchPortHistoryDiagCard } from './switch-port-history-diag-card.vue';

5
src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
View File

@@ -1,11 +1,10 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import type { NdmKeyboardResultVO } from '@/apis';
import { DeviceStatusHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmKeyboard: NdmKeyboardResultVO;

10
src/components/device-page/device-card/history-diag-card/nvr-disk-health-history-diag-card.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains';
import type { NdmNvrResultVO, PageParams } from '@/apis/models';
import { postSnmpLogPage } from '@/apis/requests';
import { postSnmpLogPage, type NdmNvrDiagInfo, type NdmNvrResultVO, type PageParams } from '@/apis';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { destr } from 'destr';
@@ -90,12 +88,12 @@ const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString);
if (!diagInfo) return {};
if (typeof diagInfo !== 'object') return {};
const healthDiskCount = diagInfo.info.diskHealth.filter((health) => health === 0).length;
const totalDiskCount = diagInfo.info.diskHealth.length;
const healthDiskCount = diagInfo.info?.diskHealth?.filter((health) => health === 0).length ?? 0;
const totalDiskCount = diagInfo.info?.diskHealth?.length ?? 0;
return {
createdTime: record.createdTime,
diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`,
diskHealth: diagInfo.info.diskHealth,
diskHealth: diagInfo.info?.diskHealth ?? [],
};
});
},

9
src/components/device-page/device-card/history-diag-card/nvr-history-diag-card.vue
View File

@@ -1,15 +1,10 @@
<script setup lang="ts">
import type { NdmNvrResultVO } from '@/apis/models';
import { isNvrCluster } from '@/components/helper';
import type { NdmNvrResultVO } from '@/apis';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard, isNvrCluster, NvrDiskHealthHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
import NvrDiskHealthHistoryDiagCard from './nvr-disk-health-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmNvr: NdmNvrResultVO;

8
src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
View File

@@ -1,14 +1,10 @@
<script setup lang="ts">
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import type { NdmSecurityBoxResultVO } from '@/apis';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard, SecurityBoxRuntimeHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
import SecurityBoxRuntimeHistoryDiagCard from './security-box-runtime-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmSecurityBox: NdmSecurityBoxResultVO;

16
src/components/device-page/device-card/history-diag-card/security-box-runtime-history-diag-card.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts">
import type { NdmSecurityBoxCircuit, NdmSecurityBoxDiagInfo } from '@/apis/domains';
import type { NdmSecurityBoxResultVO, PageParams } from '@/apis/models';
import { postSnmpLogPage } from '@/apis/requests';
import { postSnmpLogPage, type NdmSecurityBoxCircuit, type NdmSecurityBoxDiagInfo, type NdmSecurityBoxResultVO, type PageParams } from '@/apis';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import destr from 'destr';
@@ -63,7 +61,7 @@ const tableColumns: DataTableColumns<SecurityBoxRuntimeRowData> = [
key: 'temperature',
render(rowData) {
const { info } = rowData.diagInfo;
const boxInfo = info.at(0);
const boxInfo = info?.at(0);
if (!boxInfo) return '';
return boxInfo.temperature;
},
@@ -73,7 +71,7 @@ const tableColumns: DataTableColumns<SecurityBoxRuntimeRowData> = [
key: 'humidity',
render(rowData) {
const { info } = rowData.diagInfo;
const boxInfo = info.at(0);
const boxInfo = info?.at(0);
if (!boxInfo) return '';
return boxInfo.humidity;
},
@@ -83,9 +81,9 @@ const tableColumns: DataTableColumns<SecurityBoxRuntimeRowData> = [
key: 'fanSpeeds',
render(rowData) {
const { info } = rowData.diagInfo;
const boxInfo = info.at(0);
const boxInfo = info?.at(0);
if (!boxInfo) return '';
return h('pre', {}, { default: () => boxInfo.fanSpeeds.join('\n') });
return h('pre', {}, { default: () => boxInfo.fanSpeeds?.join('\n') ?? '' });
},
},
// { title: '开关状态', key: 'switches' },
@@ -94,7 +92,7 @@ const tableColumns: DataTableColumns<SecurityBoxRuntimeRowData> = [
key: 'circuits',
render(rowData) {
const { info } = rowData.diagInfo;
const boxInfo = info.at(0);
const boxInfo = info?.at(0);
if (!boxInfo) return '';
return h(
NButton,
@@ -103,7 +101,7 @@ const tableColumns: DataTableColumns<SecurityBoxRuntimeRowData> = [
type: 'info',
size: 'small',
onClick: () => {
modalTableData.value = boxInfo.circuits.map((circuit, index) => ({ ...circuit, number: index + 1 }));
modalTableData.value = boxInfo.circuits?.map((circuit, index) => ({ ...circuit, number: index + 1 })) ?? [];
modalShow.value = true;
},
},

7
src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
View File

@@ -1,13 +1,10 @@
<script setup lang="ts">
import type { NdmServerResultVO } from '@/apis/models';
import type { NdmServerResultVO } from '@/apis';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmServer: NdmServerResultVO;

8
src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
View File

@@ -1,14 +1,10 @@
<script setup lang="ts">
import type { NdmSwitchResultVO } from '@/apis/models';
import type { NdmSwitchResultVO } from '@/apis';
import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard, SwitchPortHistoryDiagCard } from '@/components';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
import SwitchPortHistoryDiagCard from './switch-port-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmSwitch: NdmSwitchResultVO;

12
src/components/device-page/device-card/history-diag-card/switch-port-history-diag-card.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import type { NdmSwitchDiagInfo, NdmSwitchPortInfo } from '@/apis/domains';
import type { NdmSwitchResultVO, PageParams } from '@/apis/models';
import { postSnmpLogPage } from '@/apis/requests';
import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
import { postSnmpLogPage, type NdmSwitchDiagInfo, type NdmSwitchPortInfo, type NdmSwitchResultVO, type PageParams } from '@/apis';
import { getPortStatusVal, transformPortSpeed } from '@/components';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import destr from 'destr';
@@ -66,8 +64,8 @@ const tableColumns: DataTableColumns<SwitchPortRowData> = [
render(rowData) {
const { diagInfo } = rowData;
const { info } = diagInfo;
const { overFlowPorts } = info;
return h('pre', {}, { default: () => overFlowPorts.join('\n') });
const { overFlowPorts } = info ?? {};
return h('pre', {}, { default: () => overFlowPorts?.join('\n') ?? '' });
},
},
{
@@ -84,7 +82,7 @@ const tableColumns: DataTableColumns<SwitchPortRowData> = [
if (!diagInfo) return;
modalShow.value = true;
console.log('查看', diagInfo);
modalTableData.value = diagInfo.info.portInfoList;
modalTableData.value = diagInfo.info?.portInfoList ?? [];
},
},
{ default: () => '查看' },

10
src/components/device-page/device-card/index.ts Normal file
View File

@@ -0,0 +1,10 @@
export { default as CameraCard } from './camera-card.vue';
export { default as DecoderCard } from './decoder-card.vue';
export { default as KeyboardCard } from './keyboard-card.vue';
export { default as NvrCard } from './nvr-card.vue';
export { default as SecurityBoxCard } from './security-box-card.vue';
export { default as ServerCard } from './server-card.vue';
export { default as SwitchCard } from './switch-card.vue';
export * from './current-diag-card';
export * from './history-diag-card';

8
src/components/device-page/device-card/keyboard-card.vue
View File

@@ -1,12 +1,10 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmKeyboardResultVO } from '@/apis';
import { DeviceHeaderCard, KeyboardHistoryDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import KeyboardHistoryDiagCard from './history-diag-card/keyboard-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmKeyboard: NdmKeyboardResultVO;

14
src/components/device-page/device-card/nvr-card.vue
View File

@@ -1,19 +1,11 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains';
import type { NdmNvrResultVO } from '@/apis/models';
import { isNvrCluster } from '@/components/helper';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmNvrDiagInfo, NdmNvrResultVO } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, isNvrCluster, NvrDiskCard, NvrHistoryDiagCard, NvrRecordDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import NvrDiskCard from './current-diag-card/nvr-disk-card.vue';
import NvrRecordDiagCard from './current-diag-card/nvr-record-diag-card.vue';
import NvrHistoryDiagCard from './history-diag-card/nvr-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmNvr: NdmNvrResultVO;

13
src/components/device-page/device-card/security-box-card.vue
View File

@@ -1,18 +1,11 @@
<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo } from '@/apis/domains';
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxHistoryDiagCard, SecurityBoxInfoCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import SecurityBoxInfoCard from './current-diag-card/security-box-info-card.vue';
import SecurityBoxCircuitCard from './current-diag-card/security-box-circuit-card.vue';
import SecurityBoxHistoryDiagCard from './history-diag-card/security-box-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmSecurityBox: NdmSecurityBoxResultVO;

10
src/components/device-page/device-card/server-card.vue
View File

@@ -1,15 +1,11 @@
<script setup lang="ts">
import type { NdmServerDiagInfo } from '@/apis/domains';
import type { NdmServerResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmServerDiagInfo, NdmServerResultVO } from '@/apis';
import { DeviceHardwareCard, DeviceHeaderCard, ServerHistoryDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import ServerHistoryDiagCard from './history-diag-card/server-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmServer: NdmServerResultVO;

11
src/components/device-page/device-card/switch-card.vue
View File

@@ -1,16 +1,11 @@
<script setup lang="ts">
import type { NdmSwitchDiagInfo } from '@/apis/domains';
import type { NdmSwitchResultVO } from '@/apis/models';
import { useDebugModeStore } from '@/stores/debug-mode';
import type { NdmSwitchDiagInfo, NdmSwitchResultVO } from '@/apis';
import { DeviceHardwareCard, DeviceHeaderCard, SwitchHistoryDiagCard, SwitchPortCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import SwitchPortCard from './current-diag-card/switch-port-card.vue';
import SwitchHistoryDiagCard from './history-diag-card/switch-history-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmSwitch: NdmSwitchResultVO;

8
src/components/device-page/device-tree.vue
View File

@@ -9,11 +9,9 @@ const deviceTabPanes = Object.keys(DeviceType).map((key) => {
</script>
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
import { isNvrCluster } from '@/components/helper';
import type { LineDevices } from '@/composables/query';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type';
import type { LineDevices, NdmDeviceResultVO, NdmNvrResultVO, Station } from '@/apis';
import { isNvrCluster } from '@/components';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums';
import { destr } from 'destr';
import {
NButton,

4
src/components/device-page/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from './device-card';
export { default as DeviceRenderer } from './device-renderer.vue';
export { default as DeviceTree } from './device-tree.vue';

2
src/components/global/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as SettingsDrawer } from './settings-drawer.vue';
export { default as ThemeSwitch } from './theme-switch.vue';

19
src/components/global/settings-drawer.vue
View File

@@ -1,20 +1,17 @@
<script setup lang="ts">
import type { VersionInfo } from '@/apis';
import { ThemeSwitch } from '@/components';
import { STATION_LIST_QUERY_KEY } from '@/constants';
import { useDebugModeStore, useLayoutStore, useQueryControlStore } from '@/stores';
import { getAppEnvConfig } from '@/utils';
import { useQueryClient } from '@tanstack/vue-query';
import { useEventListener } from '@vueuse/core';
import axios from 'axios';
import { NButton, NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInput, NInputNumber, NModal, NRadio, NRadioGroup, NText } from 'naive-ui';
import { useLayoutStore } from '@/stores/layout';
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';
import axios from 'axios';
import type { VersionInfo } from '@/apis/domains/version-info';
import { useQueryControlStore } from '@/stores/query-control';
import { useQueryClient } from '@tanstack/vue-query';
import { STATION_LIST_QUERY_KEY } from '@/constants';
import { useDebugModeStore } from '@/stores/debug-mode';
import { getAppEnvConfig } from '@/utils/env';
import { useEventListener } from '@vueuse/core';
import { useRoute } from 'vue-router';
import ThemeSwitch from './theme-switch.vue';
const route = useRoute();
const show = defineModel<boolean>('show');

2
src/components/global/theme-switch.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useThemeStore } from '@/stores/theme';
import { useThemeStore } from '@/stores';
import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
import { NIcon, NSwitch } from 'naive-ui';
import { storeToRefs } from 'pinia';

5
src/components/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export * from './dashboard-page';
export * from './device-page';
export * from './global';
export * from './helper';
export * from './station-page';

24
src/components/dashboard-page/device-alarm-detail-modal.vue → src/components/station-page/device-alarm-detail-modal.vue
View File

@@ -1,18 +1,22 @@
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
import type { StationAlarmCounts } from '@/composables/query';
import { FaultLevel } from '@/enums/fault-level';
import { AlarmType } from '@/enums/alarm-type';
import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
import { useQueryControlStore } from '@/stores/query-control';
import { downloadByData } from '@/utils/download';
import {
ndmDeviceAlarmLogDefaultExportByTemplate,
postNdmDeviceAlarmLogPage,
type NdmDeviceAlarmLogPageQuery,
type NdmDeviceAlarmLogResultVO,
type NdmDeviceAlarmLogVO,
type PageQueryExtra,
type Station,
type StationAlarmCounts,
} from '@/apis';
import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, type DeviceTypeVal } from '@/enums';
import { useQueryControlStore } from '@/stores';
import { downloadByData } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
import { computed, h, reactive, ref, toRefs, watch } from 'vue';
import { renderAlarmDateCell, renderDeviceTypeCell, renderAlarmTypeCell, renderFaultLevelCell } from '../helper';
interface Props {
station?: Station;

5
src/components/dashboard-page/device-params-config-modal.vue → src/components/station-page/device-params-config-modal.vue
View File

@@ -68,9 +68,8 @@ const getItemSuffix = (name: string) => {
</script>
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import { postDefParameterPage, putDefParameter } from '@/apis/requests';
import { useQueryControlStore } from '@/stores/query-control';
import { postDefParameterPage, putDefParameter, type Station } from '@/apis';
import { useQueryControlStore } from '@/stores';
import { useMutation } from '@tanstack/vue-query';
import { NForm, NFormItemGi, NGrid, NInputNumber, NModal, NTabPane, NTabs, NTimePicker, NSpin, NFlex } from 'naive-ui';
import { ref, toRefs, watch } from 'vue';

4
src/components/station-page/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { default as DeviceAlarmDetailModal } from './device-alarm-detail-modal.vue';
export { default as DeviceParamsConfigModal } from './device-params-config-modal.vue';
export { default as OfflineDeviceDetailModal } from './offline-device-detail-modal.vue';
export { default as StationCard } from './station-card.vue';

11
src/components/dashboard-page/offline-device-detail-modal.vue → src/components/station-page/offline-device-detail-modal.vue
View File

@@ -1,11 +1,8 @@
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import type { NdmDeviceVO } from '@/apis/models';
import type { StationDevices } from '@/composables/query';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal } from '@/enums/device-type';
import { useQueryControlStore } from '@/stores/query-control';
import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree } from 'naive-ui';
import type { TreeOption, TreeOverrideNodeClickBehavior, TreeProps } from 'naive-ui';
import type { NdmDeviceVO, Station, StationDevices } from '@/apis';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal } from '@/enums';
import { useQueryControlStore } from '@/stores';
import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
import { computed, h, ref, toRefs, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

11
src/components/dashboard-page/station-card.vue → src/components/station-page/station-card.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import type { Station } from '@/apis/domains';
import { DeviceType } from '@/enums/device-type';
import { type StationAlarmCounts, type StationDevices } from '@/composables/query';
import type { Station, StationAlarmCounts, StationDevices } from '@/apis';
import { DeviceType } from '@/enums';
import { MoreOutlined, EllipsisOutlined } from '@vicons/antd';
import axios from 'axios';
import { NCard, NTag, NButton, NIcon, useThemeVars, NFlex, NText, NTooltip, NDropdown, type DropdownOption } from 'naive-ui';
@@ -24,7 +23,7 @@ const { station, stationDevices, stationAlarmCounts } = toRefs(props);
const onlineDeviceCount = computed(() => {
let count = 0;
Object.values(DeviceType).forEach((deviceType) => {
const onlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '10') ?? [];
const onlineDeviceList = stationDevices.value?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
count += onlineDeviceList.length;
});
return count;
@@ -32,7 +31,7 @@ const onlineDeviceCount = computed(() => {
const offlineDeviceCount = computed(() => {
let count = 0;
Object.values(DeviceType).forEach((deviceType) => {
const offlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
const offlineDeviceList = stationDevices.value?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
count += offlineDeviceList.length;
});
return count;
@@ -40,7 +39,7 @@ const offlineDeviceCount = computed(() => {
const deviceCount = computed(() => {
let count = 0;
Object.values(DeviceType).forEach((deviceType) => {
count += stationDevices.value?.[deviceType].length ?? 0;
count += stationDevices.value?.[deviceType]?.length ?? 0;
});
return count;
});