refactor: 移除未使用的测试组件
This commit is contained in:
yangsy
@@ -1,475 +0,0 @@
|
|||||||
<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 { sleep } from '@/utils';
|
|
||||||
import { watchDebounced, 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, onMounted, 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, initFromRoute, selectDevice, routeDevice } = 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);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initFromRoute(lineDevices.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
// lineDevices是shallowRef，因此需要深度侦听才能获取内部变化，
|
|
||||||
// 而单纯的深度侦听又可能会引发性能问题，因此尝试使用防抖侦听
|
|
||||||
watchDebounced(
|
|
||||||
lineDevices,
|
|
||||||
(newLineDevices) => {
|
|
||||||
initFromRoute(newLineDevices);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
debounce: 500,
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
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 contextmenu = ref<{ x: number; y: number; stationCode?: Station['code']; deviceType: DeviceType | null }>({ x: 0, y: 0, deviceType: null });
|
|
||||||
const showContextmenu = ref(false);
|
|
||||||
const contextmenuOptions: DropdownOption[] = [
|
|
||||||
{
|
|
||||||
label: '导出设备',
|
|
||||||
key: 'export-device',
|
|
||||||
onSelect: () => {
|
|
||||||
// 需要拿到当前选中的设备类型和车站编号
|
|
||||||
const { stationCode, deviceType } = contextmenu.value;
|
|
||||||
console.log(stationCode, deviceType);
|
|
||||||
showContextmenu.value = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const onSelectDropdownOption = (key: string, option: DropdownOption) => {
|
|
||||||
const onSelect = option['onSelect'];
|
|
||||||
if (isFunction(onSelect)) {
|
|
||||||
onSelect();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ========== 设备树节点交互 ==========
|
|
||||||
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 string;
|
|
||||||
// 区分是否需要跳转路由
|
|
||||||
if (!station.value) {
|
|
||||||
onSelectDevice(device, stationCode);
|
|
||||||
} else {
|
|
||||||
onRouteDevice(device, station.value.code);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// TODO: 支持右键点击车站导出设备列表
|
|
||||||
onContextmenu: (payload) => {
|
|
||||||
payload.stopPropagation();
|
|
||||||
payload.preventDefault();
|
|
||||||
if (!option['device']) {
|
|
||||||
const { clientX, clientY } = payload;
|
|
||||||
const stationCode = option['stationCode'] as string;
|
|
||||||
const deviceType = option['deviceType'] as DeviceType;
|
|
||||||
contextmenu.value = { x: clientX, y: clientY, stationCode, deviceType };
|
|
||||||
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: string) => {
|
|
||||||
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();
|
|
||||||
// 选择设备
|
|
||||||
// 区分是否需要跳转路由
|
|
||||||
if (!station.value) {
|
|
||||||
onSelectDevice(device, stationCode);
|
|
||||||
} else {
|
|
||||||
onRouteDevice(device, station.value.code);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
() => '查看',
|
|
||||||
);
|
|
||||||
};
|
|
||||||
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<string, 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 ?? `${device.name}`,
|
|
||||||
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 ?? `${device.name}`,
|
|
||||||
prefix: () => renderDeviceNodePrefix(device, stationCode),
|
|
||||||
suffix: () => `${device.ipAddress}`,
|
|
||||||
children: singletons.map<TreeOption>((device) => {
|
|
||||||
return {
|
|
||||||
label: `${device.name}`,
|
|
||||||
key: device.id ?? `${device.name}`,
|
|
||||||
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 ?? `${device.name}`,
|
|
||||||
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 expandedKeys = ref<string[]>();
|
|
||||||
const deviceTreeInst = useTemplateRef<TreeInst>('deviceTreeInst');
|
|
||||||
const onFoldDeviceTree = () => {
|
|
||||||
expandedKeys.value = [];
|
|
||||||
};
|
|
||||||
const onLocateDeviceTree = () => {
|
|
||||||
const stationCode = selectedStationCode.value;
|
|
||||||
const device = selectedDevice.value;
|
|
||||||
if (!stationCode || !device?.id) return;
|
|
||||||
const deviceTypeVal = tryGetDeviceType(device.deviceType);
|
|
||||||
if (!!deviceTypeVal) {
|
|
||||||
activeTab.value = deviceTypeVal;
|
|
||||||
}
|
|
||||||
|
|
||||||
const expanded = [stationCode];
|
|
||||||
if (activeTab.value === DEVICE_TYPE_LITERALS.ndmNvr) {
|
|
||||||
const nvrs = lineDevices.value[stationCode]?.[DEVICE_TYPE_LITERALS.ndmNvr];
|
|
||||||
if (nvrs) {
|
|
||||||
const clusterKeys = nvrs.filter((nvr) => !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress).map((nvr) => String(nvr.id));
|
|
||||||
expanded.push(...clusterKeys);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
expandedKeys.value = expanded;
|
|
||||||
|
|
||||||
// 由于数据量大所以开启虚拟滚动，
|
|
||||||
// 但是无法知晓NTree内部的虚拟列表容器何时创建完成，所以使用setTimeout延迟固定时间后执行滚动
|
|
||||||
scrollDeviceTreeToSelectedDevice();
|
|
||||||
};
|
|
||||||
async function scrollDeviceTreeToSelectedDevice() {
|
|
||||||
await sleep(350);
|
|
||||||
const inst = deviceTreeInst.value;
|
|
||||||
inst?.scrollTo({ key: selectedDevice?.value?.id ?? `${selectedDevice.value?.name}`, behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
</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>
|
|
||||||
<NButton text size="tiny" type="info" @click="onFoldDeviceTree" style="margin-left: auto">收起</NButton>
|
|
||||||
<NButton text size="tiny" type="info" @click="onLocateDeviceTree">定位</NButton>
|
|
||||||
</NFlex>
|
|
||||||
</div>
|
|
||||||
<!-- 设备树 -->
|
|
||||||
<div style="overflow: hidden; flex: 1 1 auto; display: flex">
|
|
||||||
<template v-if="!station">
|
|
||||||
<div style="height: 100%; flex: 0 0 auto">
|
|
||||||
<NTabs v-model:value="activeTab" animated 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'"
|
|
||||||
: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"
|
|
||||||
: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>
|
|
||||||
Reference in New Issue
Block a user