550 lines
20 KiB
Vue
550 lines
20 KiB
Vue
<script setup lang="ts">
|
||
import { initStationDevices, type NdmDeviceResultVO, type NdmNvrResultVO, type Station } from '@/apis';
|
||
import { useDeviceTree } from '@/composables';
|
||
import { DEVICE_TYPE_NAMES, DEVICE_TYPE_LITERALS, tryGetDeviceType, type DeviceType } from '@/enums';
|
||
import { isNvrCluster } from '@/helpers';
|
||
import { useDeviceStore, useStationStore } from '@/stores';
|
||
import { watchImmediate } from '@vueuse/core';
|
||
import destr from 'destr';
|
||
import { isFunction } from 'es-toolkit';
|
||
import {
|
||
NButton,
|
||
NDropdown,
|
||
NFlex,
|
||
NInput,
|
||
NRadio,
|
||
NRadioGroup,
|
||
NTab,
|
||
NTabs,
|
||
NTag,
|
||
NTree,
|
||
useThemeVars,
|
||
type DropdownOption,
|
||
type TagProps,
|
||
type TreeInst,
|
||
type TreeOption,
|
||
type TreeOverrideNodeClickBehavior,
|
||
type TreeProps,
|
||
} from 'naive-ui';
|
||
import { storeToRefs } from 'pinia';
|
||
import { computed, h, nextTick, onBeforeUnmount, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
|
||
|
||
const props = defineProps<{
|
||
station?: Station; // 支持渲染指定车站的设备树
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
selectDevice: [device: NdmDeviceResultVO, stationCode: Station['code']];
|
||
}>();
|
||
|
||
const { station } = toRefs(props);
|
||
|
||
const themeVars = useThemeVars();
|
||
|
||
const {
|
||
// 设备选择
|
||
selectedStationCode,
|
||
selectedDeviceType,
|
||
selectedDevice,
|
||
selectDevice,
|
||
routeDevice,
|
||
// 设备管理
|
||
exportDevice,
|
||
exportDeviceTemplate,
|
||
importDevice,
|
||
deleteDevice,
|
||
} = useDeviceTree();
|
||
|
||
const onSelectDevice = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
|
||
selectDevice(device, stationCode);
|
||
emit('selectDevice', device, stationCode);
|
||
};
|
||
|
||
const onRouteDevice = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
|
||
routeDevice(device, stationCode, { path: '/device' });
|
||
emit('selectDevice', device, stationCode);
|
||
};
|
||
|
||
const stationStore = useStationStore();
|
||
const { stations } = storeToRefs(stationStore);
|
||
const deviceStore = useDeviceStore();
|
||
const { lineDevices } = storeToRefs(deviceStore);
|
||
|
||
const deviceTabPanes = Object.values(DEVICE_TYPE_LITERALS).map((deviceType) => ({
|
||
name: deviceType,
|
||
tab: DEVICE_TYPE_NAMES[deviceType],
|
||
}));
|
||
const activeTab = ref<DeviceType>(deviceTabPanes.at(0)!.name);
|
||
watchImmediate(selectedDeviceType, (newDeviceType) => {
|
||
if (newDeviceType) {
|
||
activeTab.value = newDeviceType;
|
||
}
|
||
});
|
||
|
||
const selectedKeys = computed(() => (selectedDevice.value?.id ? [selectedDevice.value.id] : undefined));
|
||
watch([selectedKeys, selectedDevice, selectedStationCode], ([, device, code]) => {
|
||
if (device && code) {
|
||
onSelectDevice(device, code);
|
||
}
|
||
});
|
||
|
||
const abortController = ref(new AbortController());
|
||
const contextmenu = ref<{ x: number; y: number; stationCode?: Station['code']; deviceType?: DeviceType | null; device?: NdmDeviceResultVO }>({ x: 0, y: 0, deviceType: null });
|
||
const showContextmenu = ref(false);
|
||
const contextmenuOptions = computed<DropdownOption[]>(() => [
|
||
{
|
||
label: '导出设备',
|
||
key: 'export-device',
|
||
show: !!contextmenu.value.deviceType,
|
||
onSelect: () => {
|
||
const { stationCode, deviceType } = contextmenu.value;
|
||
// console.log(stationCode, deviceType);
|
||
showContextmenu.value = false;
|
||
if (!stationCode || !deviceType) return;
|
||
abortController.value.abort();
|
||
abortController.value = new AbortController();
|
||
exportDevice({ deviceType, stationCode, signal: abortController.value.signal });
|
||
},
|
||
},
|
||
{
|
||
label: '导入设备',
|
||
key: 'import-device',
|
||
show: !!contextmenu.value.deviceType,
|
||
onSelect: () => {
|
||
const { stationCode, deviceType } = contextmenu.value;
|
||
// console.log(stationCode, deviceType);
|
||
showContextmenu.value = false;
|
||
if (!stationCode || !deviceType) return;
|
||
abortController.value.abort();
|
||
abortController.value = new AbortController();
|
||
importDevice({ deviceType, stationCode, signal: abortController.value.signal });
|
||
},
|
||
},
|
||
{
|
||
label: '下载导入模板',
|
||
key: 'export-template',
|
||
// 导出模板功能有缺陷，暂时不展示
|
||
show: false,
|
||
onSelect: () => {
|
||
const { stationCode, deviceType } = contextmenu.value;
|
||
// console.log(stationCode, deviceType);
|
||
showContextmenu.value = false;
|
||
if (!stationCode || !deviceType) return;
|
||
abortController.value.abort();
|
||
abortController.value = new AbortController();
|
||
exportDeviceTemplate({ deviceType, stationCode, signal: abortController.value.signal });
|
||
},
|
||
},
|
||
{
|
||
label: '删除设备',
|
||
key: 'delete-device',
|
||
show: !!contextmenu.value.device,
|
||
onSelect: () => {
|
||
const { stationCode, device } = contextmenu.value;
|
||
// console.log(stationCode, device);
|
||
showContextmenu.value = false;
|
||
if (!stationCode || !device) return;
|
||
const id = device.id;
|
||
const deviceType = tryGetDeviceType(device.deviceType);
|
||
if (!id || !deviceType) return;
|
||
window.$dialog.destroyAll();
|
||
window.$dialog.warning({
|
||
title: '删除设备',
|
||
content: `确认删除设备 ${device.name || device.deviceId || device.id} 吗？`,
|
||
positiveText: '确认',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
abortController.value.abort();
|
||
abortController.value = new AbortController();
|
||
deleteDevice({ id, deviceType, stationCode, signal: abortController.value.signal });
|
||
},
|
||
});
|
||
},
|
||
},
|
||
]);
|
||
const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
||
const onSelect = option['onSelect'];
|
||
if (isFunction(onSelect)) {
|
||
onSelect();
|
||
}
|
||
};
|
||
onBeforeUnmount(() => {
|
||
abortController.value.abort();
|
||
});
|
||
|
||
// ========== 设备树节点交互 ==========
|
||
const override: TreeOverrideNodeClickBehavior = ({ option }) => {
|
||
const hasChildren = (option.children?.length ?? 0) > 0;
|
||
const isDeviceNode = !!option['device'];
|
||
if (hasChildren || !isDeviceNode) {
|
||
return 'toggleExpand';
|
||
} else {
|
||
return 'none';
|
||
}
|
||
};
|
||
const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
|
||
return {
|
||
onDblclick: (payload) => {
|
||
if (option['device']) {
|
||
payload.stopPropagation();
|
||
const device = option['device'] as NdmDeviceResultVO;
|
||
const stationCode = option['stationCode'] as Station['code'];
|
||
// 区分是否需要跳转路由
|
||
// 当 props.station 存在时，说明当前是单独渲染车站的设备树，需要跳转路由到设备诊断页面
|
||
if (!station.value) {
|
||
onSelectDevice(device, stationCode);
|
||
} else {
|
||
onRouteDevice(device, stationCode);
|
||
}
|
||
}
|
||
},
|
||
onContextmenu: (payload) => {
|
||
payload.stopPropagation();
|
||
payload.preventDefault();
|
||
const { clientX, clientY } = payload;
|
||
const stationCode = option['stationCode'] as Station['code'];
|
||
const deviceType = option['deviceType'] as DeviceType | undefined;
|
||
const device = option['device'] as NdmDeviceResultVO | undefined;
|
||
contextmenu.value = { x: clientX, y: clientY, stationCode, deviceType, device };
|
||
showContextmenu.value = true;
|
||
},
|
||
};
|
||
};
|
||
|
||
// ========== 设备树数据 ==========
|
||
const renderStationNodePrefix = (station: Station) => {
|
||
const { online } = station;
|
||
const tagType: TagProps['type'] = online ? 'success' : 'error';
|
||
const tagText = online ? '在线' : '离线';
|
||
return h(NTag, { type: tagType, size: 'tiny' }, () => tagText);
|
||
};
|
||
const renderIcmpStatistics = (onlineCount: number, offlineCount: number, count: number) => {
|
||
return h('span', null, [
|
||
'(',
|
||
h('span', { style: { color: themeVars.value.successColor } }, `${onlineCount}`),
|
||
'/',
|
||
h('span', { style: { color: themeVars.value.errorColor } }, `${offlineCount}`),
|
||
'/',
|
||
`${count}`,
|
||
')',
|
||
]);
|
||
};
|
||
const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: Station['code']) => {
|
||
const renderViewDeviceButton = (device: NdmDeviceResultVO, stationCode: string) => {
|
||
return h(
|
||
NButton,
|
||
{
|
||
text: true,
|
||
size: 'tiny',
|
||
type: 'info',
|
||
style: {
|
||
marginRight: 8,
|
||
} as CSSProperties,
|
||
onClick: (e: MouseEvent) => {
|
||
e.stopPropagation();
|
||
// 选择设备
|
||
// 区分是否需要跳转路由
|
||
// 当 props.station 存在时，说明当前是单独渲染车站的设备树，需要跳转路由到设备诊断页面
|
||
if (!station.value) {
|
||
onSelectDevice(device, stationCode);
|
||
} else {
|
||
onRouteDevice(device, stationCode);
|
||
}
|
||
},
|
||
},
|
||
() => '查看',
|
||
);
|
||
};
|
||
const renderDeviceStatusTag = (device: NdmDeviceResultVO) => {
|
||
const { deviceStatus } = device;
|
||
const color = deviceStatus === '10' ? themeVars.value.successColor : deviceStatus === '20' ? themeVars.value.errorColor : themeVars.value.warningColor;
|
||
return h('div', { style: { color } }, { default: () => '◉' });
|
||
};
|
||
return h(NFlex, { size: 'small' }, { default: () => [renderViewDeviceButton(device, stationCode), renderDeviceStatusTag(device)] });
|
||
};
|
||
// 全线设备树
|
||
const lineDeviceTreeData = computed<Record<Station['code'], TreeOption[]>>(() => {
|
||
const treeData: Record<string, TreeOption[]> = {};
|
||
deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
|
||
treeData[paneName] = stations.value.map<TreeOption>((station) => {
|
||
const { name: stationName, code: stationCode } = station;
|
||
const devices = lineDevices.value[stationCode]?.[paneName] ?? ([] as NdmDeviceResultVO[]);
|
||
const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
|
||
const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
|
||
// 对于录像机，需要根据clusterList字段以分号分隔设备IP，进一步形成子树结构
|
||
if (paneName === DEVICE_TYPE_LITERALS.ndmNvr) {
|
||
const nvrs = devices as NdmNvrResultVO[];
|
||
const nvrClusters: NdmNvrResultVO[] = [];
|
||
const nvrSingletons: NdmNvrResultVO[] = [];
|
||
for (const device of nvrs) {
|
||
if (isNvrCluster(device)) {
|
||
nvrClusters.push(device);
|
||
} else {
|
||
nvrSingletons.push(device);
|
||
}
|
||
}
|
||
return {
|
||
label: stationName,
|
||
key: stationCode,
|
||
prefix: () => renderStationNodePrefix(station),
|
||
suffix: () => renderIcmpStatistics(onlineDevices?.length ?? 0, offlineDevices?.length ?? 0, devices?.length ?? 0),
|
||
children: nvrClusters.map<TreeOption>((nvrCluster) => {
|
||
return {
|
||
label: `${nvrCluster.name}`,
|
||
key: nvrCluster.id ?? `${nvrCluster.name}`,
|
||
prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
|
||
suffix: () => `${nvrCluster.ipAddress}`,
|
||
children: nvrSingletons.map<TreeOption>((nvr) => {
|
||
return {
|
||
label: `${nvr.name}`,
|
||
key: nvr.id ?? `${nvr.name}`,
|
||
prefix: () => renderDeviceNodePrefix(nvr, stationCode),
|
||
suffix: () => `${nvr.ipAddress}`,
|
||
// 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
|
||
stationCode,
|
||
device: nvr,
|
||
};
|
||
}),
|
||
// 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
|
||
stationCode,
|
||
device: nvrCluster,
|
||
};
|
||
}),
|
||
stationCode,
|
||
deviceType: activeTab.value,
|
||
};
|
||
}
|
||
return {
|
||
label: stationName,
|
||
key: stationCode,
|
||
prefix: () => renderStationNodePrefix(station),
|
||
suffix: () => renderIcmpStatistics(onlineDevices?.length ?? 0, offlineDevices?.length ?? 0, devices?.length ?? 0),
|
||
children:
|
||
lineDevices.value[stationCode]?.[paneName]?.map<TreeOption>((dev) => {
|
||
const device = dev as NdmDeviceResultVO;
|
||
return {
|
||
label: `${device.name}`,
|
||
key: `${device.id}`,
|
||
prefix: () => renderDeviceNodePrefix(device, stationCode),
|
||
suffix: () => `${device.ipAddress}`,
|
||
// 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
|
||
stationCode,
|
||
device,
|
||
};
|
||
}) ?? [],
|
||
stationCode,
|
||
deviceType: activeTab.value,
|
||
};
|
||
});
|
||
});
|
||
return treeData;
|
||
});
|
||
// 车站设备树
|
||
const stationDeviceTreeData = computed<TreeOption[]>(() => {
|
||
const stationCode = station.value?.code;
|
||
if (!stationCode) return [];
|
||
return Object.values(DEVICE_TYPE_LITERALS).map<TreeOption>((deviceType) => {
|
||
const stationDevices = lineDevices.value[stationCode] ?? initStationDevices();
|
||
const onlineCount = stationDevices[deviceType].filter((device) => device.deviceStatus === '10').length;
|
||
const offlineCount = stationDevices[deviceType].filter((device) => device.deviceStatus === '20').length;
|
||
if (deviceType === DEVICE_TYPE_LITERALS.ndmNvr) {
|
||
const nvrs = stationDevices[deviceType] as NdmNvrResultVO[];
|
||
const clusters = nvrs.filter((nvr) => isNvrCluster(nvr));
|
||
const singletons = nvrs.filter((nvr) => !isNvrCluster(nvr));
|
||
return {
|
||
label: `${DEVICE_TYPE_NAMES[deviceType]}`,
|
||
key: deviceType,
|
||
suffix: () => renderIcmpStatistics(onlineCount, offlineCount, nvrs.length),
|
||
children: clusters.map<TreeOption>((device) => {
|
||
return {
|
||
label: `${device.name}`,
|
||
key: `${device.id}`,
|
||
prefix: () => renderDeviceNodePrefix(device, stationCode),
|
||
suffix: () => `${device.ipAddress}`,
|
||
children: singletons.map<TreeOption>((device) => {
|
||
return {
|
||
label: `${device.name}`,
|
||
key: `${device.id}`,
|
||
prefix: () => renderDeviceNodePrefix(device, stationCode),
|
||
suffix: () => `${device.ipAddress}`,
|
||
stationCode,
|
||
device,
|
||
};
|
||
}),
|
||
stationCode,
|
||
device,
|
||
};
|
||
}),
|
||
stationCode,
|
||
deviceType,
|
||
};
|
||
}
|
||
return {
|
||
label: `${DEVICE_TYPE_NAMES[deviceType]}`,
|
||
key: deviceType,
|
||
suffix: () => renderIcmpStatistics(onlineCount, offlineCount, stationDevices[deviceType].length),
|
||
children: stationDevices[deviceType].map<TreeOption>((device) => {
|
||
return {
|
||
label: `${device.name}`,
|
||
key: `${device.id}`,
|
||
prefix: () => renderDeviceNodePrefix(device, stationCode),
|
||
suffix: () => `${device.ipAddress}`,
|
||
stationCode,
|
||
device,
|
||
};
|
||
}),
|
||
stationCode,
|
||
deviceType,
|
||
};
|
||
});
|
||
});
|
||
|
||
// ========== 设备树搜索 ==========
|
||
const searchInput = ref('');
|
||
const statusInput = ref('');
|
||
// 设备树将搜索框和单选框的值都交给NTree的pattern属性
|
||
// 但是如果一个车站下没有匹配的设备，那么这个车站节点也不会显示
|
||
const searchPattern = computed(() => {
|
||
const search = searchInput.value;
|
||
const status = statusInput.value;
|
||
if (!search && !status) return ''; // 如果pattern非空会导致NTree组件认为筛选完成，UI上发生全量匹配
|
||
return JSON.stringify({ search: searchInput.value, status: statusInput.value });
|
||
});
|
||
const searchFilter = (pattern: string, node: TreeOption): boolean => {
|
||
const { search, status } = destr<{ search: string; status: string }>(pattern);
|
||
const device = node['device'] as NdmDeviceResultVO | undefined;
|
||
const { name, ipAddress, deviceId, deviceStatus } = device ?? {};
|
||
const searchMatched = (name ?? '').includes(search) || (ipAddress ?? '').includes(search) || (deviceId ?? '').includes(search);
|
||
const statusMatched = status === '' || status === deviceStatus;
|
||
return searchMatched && statusMatched;
|
||
};
|
||
|
||
// ========== 设备树交互 ==========
|
||
const animated = ref(true);
|
||
const expandedKeys = ref<string[]>([]);
|
||
const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
|
||
const onFoldDeviceTree = () => {
|
||
expandedKeys.value = [];
|
||
};
|
||
const onLocateDeviceTree = async () => {
|
||
if (!selectedStationCode.value) return;
|
||
if (!selectedDevice.value) return;
|
||
const deviceType = tryGetDeviceType(selectedDevice.value.deviceType);
|
||
if (!deviceType) return;
|
||
if (!deviceTreeInst.value) return;
|
||
|
||
animated.value = false;
|
||
|
||
// 定位设备类型
|
||
activeTab.value = deviceType;
|
||
|
||
// 展开选择的车站
|
||
expandedKeys.value = [selectedStationCode.value];
|
||
|
||
// 当选择录像机时，如果不是集群，进一步展开该录像机所在的集群节点
|
||
if (deviceType === DEVICE_TYPE_LITERALS.ndmNvr) {
|
||
const stationDevices = lineDevices.value[selectedStationCode.value];
|
||
if (stationDevices) {
|
||
const selectedNvr = selectedDevice.value as NdmNvrResultVO;
|
||
if (!isNvrCluster(selectedNvr)) {
|
||
const nvrs = stationDevices[DEVICE_TYPE_LITERALS.ndmNvr];
|
||
const clusters = nvrs.filter((nvr) => isNvrCluster(nvr) && nvr.clusterList?.includes(selectedNvr.clusterList ?? ''));
|
||
expandedKeys.value.push(...clusters.map((nvr) => `${nvr.id}`));
|
||
}
|
||
}
|
||
}
|
||
|
||
// 等待设备树展开完成，滚动到选择的设备
|
||
await nextTick();
|
||
deviceTreeInst.value.scrollTo({ key: `${selectedDevice.value.id}`, behavior: 'smooth' });
|
||
|
||
animated.value = true;
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div style="height: 100%; display: flex; flex-direction: column">
|
||
<!-- 搜索和筛选 -->
|
||
<div style="padding: 12px; flex: 0 0 auto">
|
||
<NInput v-model:value="searchInput" placeholder="搜索设备名称、设备ID或IP地址" clearable />
|
||
<NFlex align="center">
|
||
<NRadioGroup v-model:value="statusInput">
|
||
<NRadio value="">全部</NRadio>
|
||
<NRadio value="10">在线</NRadio>
|
||
<NRadio value="20">离线</NRadio>
|
||
</NRadioGroup>
|
||
<template v-if="!station">
|
||
<NButton text size="tiny" type="info" @click="onFoldDeviceTree" style="margin-left: auto">收起</NButton>
|
||
<NButton text size="tiny" type="info" @click="onLocateDeviceTree">定位</NButton>
|
||
</template>
|
||
</NFlex>
|
||
</div>
|
||
<!-- 设备树 -->
|
||
<div
|
||
style="overflow: hidden; flex: 1 1 auto; display: flex"
|
||
:style="{
|
||
// 当右键菜单显示时，禁用设备树的点击事件，避免在打开菜单时仍能点击设备树节点
|
||
'pointer-events': showContextmenu ? 'none' : 'auto',
|
||
}"
|
||
>
|
||
<template v-if="!station">
|
||
<div style="height: 100%; flex: 0 0 auto">
|
||
<NTabs v-model:value="activeTab" type="line" placement="left" style="height: 100%">
|
||
<NTab v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab"></NTab>
|
||
</NTabs>
|
||
</div>
|
||
<div style="min-width: 0; flex: 1 1 auto">
|
||
<NTree
|
||
style="height: 100%"
|
||
v-model:expanded-keys="expandedKeys"
|
||
block-line
|
||
block-node
|
||
show-line
|
||
virtual-scroll
|
||
:ref="'deviceTreeInst'"
|
||
:animated="animated"
|
||
:selected-keys="selectedKeys"
|
||
:data="lineDeviceTreeData[activeTab]"
|
||
:show-irrelevant-nodes="false"
|
||
:pattern="searchPattern"
|
||
:filter="searchFilter"
|
||
:override-default-node-click-behavior="override"
|
||
:node-props="nodeProps"
|
||
:default-expand-all="false"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<NTree
|
||
style="height: 100%"
|
||
block-line
|
||
block-node
|
||
show-line
|
||
virtual-scroll
|
||
:data="stationDeviceTreeData"
|
||
:animated="animated"
|
||
:show-irrelevant-nodes="false"
|
||
:pattern="searchPattern"
|
||
:filter="searchFilter"
|
||
:override-default-node-click-behavior="override"
|
||
:node-props="nodeProps"
|
||
:default-expand-all="false"
|
||
/>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<NDropdown
|
||
placement="bottom-start"
|
||
trigger="manual"
|
||
:show="showContextmenu"
|
||
:x="contextmenu.x"
|
||
:y="contextmenu.y"
|
||
:options="contextmenuOptions"
|
||
@select="onSelectDropdownOption"
|
||
@clickoutside="() => (showContextmenu = false)"
|
||
/>
|
||
</template>
|
||
|
||
<style scoped lang="scss"></style>
|