refactor: 重构项目结构
- 优化 `车站-设备-告警` 轮询机制 - 改进设备卡片的布局 - 支持修改设备 - 告警轮询中获取完整告警数据 - 车站告警详情支持导出完整的 `今日告警列表` - 支持将状态持久化到 `IndexedDB` - 新增轮询控制 (调试模式) - 新增离线开发模式 (调试模式) - 新增 `IndexedDB` 数据控制 (调试模式)
This commit is contained in:
yangsy
164
src/components/device/device-card/ndm-server/server-update.vue
Normal file
164
src/components/device/device-card/ndm-server/server-update.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
detailMediaServerApi,
|
||||
detailVideoServerApi,
|
||||
icmpEntityByDeviceId,
|
||||
updateMediaServerApi,
|
||||
updateVideoServerApi,
|
||||
type NdmMediaServerUpdateVO,
|
||||
type NdmServerResultVO,
|
||||
type NdmServerUpdateVO,
|
||||
type NdmVideoServerUpdateVO,
|
||||
type Station,
|
||||
} from '@/apis';
|
||||
import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
|
||||
import { useDeviceStore } from '@/stores';
|
||||
import { parseErrorFeedback } from '@/utils';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { isCancel } from 'axios';
|
||||
import destr from 'destr';
|
||||
import { isString } from 'es-toolkit';
|
||||
import { NButton, NCard, NFlex, NForm, NFormItem, NFormItemGi, NGrid, NInput, NSwitch, type FormInst, type FormRules } from 'naive-ui';
|
||||
import { computed, onBeforeUnmount, ref, toRefs, useTemplateRef, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
ndmDevice: NdmServerResultVO;
|
||||
station: Station;
|
||||
}>();
|
||||
|
||||
const deviceStore = useDeviceStore();
|
||||
|
||||
const { ndmDevice, station } = toRefs(props);
|
||||
|
||||
const localDevice = ref<NdmServerUpdateVO>({ ...ndmDevice.value });
|
||||
watch(ndmDevice, (newDevice) => {
|
||||
localDevice.value = { ...newDevice };
|
||||
});
|
||||
|
||||
const canEditDeviceId = computed(() => {
|
||||
const { deviceId } = ndmDevice.value;
|
||||
if (!isString(deviceId)) return true;
|
||||
if (deviceId.length === 0) return true;
|
||||
return false;
|
||||
});
|
||||
|
||||
const validatorAbortController = ref<AbortController>(new AbortController());
|
||||
const abortController = ref<AbortController>(new AbortController());
|
||||
|
||||
const formInst = useTemplateRef<FormInst>('formInst');
|
||||
const formRules: FormRules = {
|
||||
deviceId: {
|
||||
trigger: ['input'],
|
||||
asyncValidator: async (rule, value: string) => {
|
||||
await validateDeviceIdDuplicated({ deviceId: value }).catch((error) => {
|
||||
if (isCancel(error)) return;
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const { mutateAsync: validateDeviceIdDuplicated } = useMutation({
|
||||
mutationFn: async (params: { deviceId?: string }) => {
|
||||
const { deviceId } = params;
|
||||
if (!deviceId) throw new Error('请输入设备ID');
|
||||
|
||||
const deviceIdPattern = /^\d{4}(09|11)\d{4}$/;
|
||||
if (!deviceIdPattern.test(deviceId)) throw new Error('设备ID不符合规范');
|
||||
|
||||
validatorAbortController.value.abort();
|
||||
validatorAbortController.value = new AbortController();
|
||||
|
||||
const icmpEntities = await icmpEntityByDeviceId(deviceId, {
|
||||
stationCode: station.value.code,
|
||||
signal: validatorAbortController.value.signal,
|
||||
});
|
||||
if (icmpEntities.length > 0) throw new Error('该设备ID已存在');
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: updateDevice, isPending } = useMutation({
|
||||
mutationFn: async () => {
|
||||
await formInst.value?.validate().catch(() => {
|
||||
window.$message.error('表单验证失败');
|
||||
return;
|
||||
});
|
||||
|
||||
abortController.value.abort();
|
||||
abortController.value = new AbortController();
|
||||
|
||||
const deviceType = tryGetDeviceType(localDevice.value.deviceType);
|
||||
const stationCode = station.value.code;
|
||||
const signal = abortController.value.signal;
|
||||
if (deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer) {
|
||||
await updateMediaServerApi(localDevice.value as NdmMediaServerUpdateVO, { stationCode, signal });
|
||||
return await detailMediaServerApi(`${localDevice.value.id}`, { stationCode, signal });
|
||||
} else if (deviceType === DEVICE_TYPE_LITERALS.ndmVideoServer) {
|
||||
await updateVideoServerApi(`${localDevice.value.id}`, localDevice.value as NdmVideoServerUpdateVO, { stationCode, signal });
|
||||
return await detailVideoServerApi(`${localDevice.value.id}`, { stationCode, signal });
|
||||
} else {
|
||||
throw new Error('不是服务器设备');
|
||||
}
|
||||
},
|
||||
onSuccess: (newDevice) => {
|
||||
localDevice.value = { ...newDevice };
|
||||
deviceStore.patchDevice(station.value.code, { ...newDevice });
|
||||
},
|
||||
onError: (error) => {
|
||||
if (isCancel(error)) return;
|
||||
console.error(error);
|
||||
const errorFeedback = parseErrorFeedback(error);
|
||||
window.$message.error(errorFeedback);
|
||||
},
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
validatorAbortController.value.abort();
|
||||
abortController.value.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard hoverable size="small">
|
||||
<template #default>
|
||||
<NForm size="small" ref="formInst" :model="localDevice" :rules="formRules">
|
||||
<NGrid>
|
||||
<NFormItemGi span="8" label-placement="left" label="ICMP启用">
|
||||
<NSwitch :value="destr(localDevice.icmpEnabled)" @update:value="(enabled: boolean) => (localDevice.icmpEnabled = enabled)" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="8" label-placement="left" label="SNMP启用">
|
||||
<NSwitch :value="destr(localDevice.snmpEnabled)" @update:value="(enabled: boolean) => (localDevice.snmpEnabled = enabled)" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
<NFormItem label-placement="left" label="设备ID" path="deviceId">
|
||||
<NInput v-model:value="localDevice.deviceId" :disabled="!canEditDeviceId" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="设备名称">
|
||||
<NInput v-model:value="localDevice.name" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="设备厂商">
|
||||
<NInput v-model:value="localDevice.manufacturer" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="型号">
|
||||
<NInput v-model:value="localDevice.model" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="团体字符串">
|
||||
<NInput v-model:value="localDevice.community" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="设备描述">
|
||||
<NInput v-model:value="localDevice.description" />
|
||||
</NFormItem>
|
||||
<NFormItem label-placement="left" label="上游设备">
|
||||
<NInput v-model:value="localDevice.linkDescription" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</template>
|
||||
<template #action>
|
||||
<NFlex justify="end">
|
||||
<NButton secondary size="small" :loading="isPending" @click="() => updateDevice()">更新</NButton>
|
||||
</NFlex>
|
||||
</template>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user