From 9ca5630c876b9cdfdaf647324596fb1d0edc54a9 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Fri, 12 Dec 2025 20:15:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=9C=AA?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E6=B5=8B=E8=AF=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/device-tree/device-tree.export.vue | 475 ------------------
 1 file changed, 475 deletions(-)
 delete mode 100644 src/components/device/device-tree/device-tree.export.vue

diff --git a/src/components/device/device-tree/device-tree.export.vue b/src/components/device/device-tree/device-tree.export.vue
deleted file mode 100644
index 099b731..0000000
--- a/src/components/device/device-tree/device-tree.export.vue
+++ /dev/null
@@ -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>