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

feat: 车站卡片布局列数自适应

Browse Source
This commit is contained in:
yangsy
2026-01-21 15:23:08 +08:00
parent 6771abec31
commit 82789c78a9
1 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/station/station-page.vue
View File

@@ -4,11 +4,11 @@ import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExport
import { useBatchActions, useLineDevicesQuery } from '@/composables'; import { useBatchActions, useLineDevicesQuery } from '@/composables';
import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores'; import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
import { useMutation } from '@tanstack/vue-query'; import { useMutation } from '@tanstack/vue-query';
import { objectEntries } from '@vueuse/core'; import { objectEntries, useElementSize } from '@vueuse/core';
import { isCancel } from 'axios'; import { isCancel } from 'axios';
import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui'; import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { computed, ref } from 'vue'; import { computed, ref, useTemplateRef } from 'vue';
const settingStore = useSettingStore(); const settingStore = useSettingStore();
const { stationGridCols } = storeToRefs(settingStore); const { stationGridCols } = storeToRefs(settingStore);
@@ -22,6 +22,21 @@ const { lineDevices } = storeToRefs(deviceStore);
const alarmStore = useAlarmStore(); const alarmStore = useAlarmStore();
const { lineAlarms } = storeToRefs(alarmStore); const { lineAlarms } = storeToRefs(alarmStore);
const STATION_CARD_MIN_WIDTH = 230;
const STATION_GRID_PADDING = 8;
const STATION_GRID_GAP = 6;
const STATION_GRID_REF_NAME = 'stationGridRef';
const stationGridRef = useTemplateRef<HTMLDivElement>(STATION_GRID_REF_NAME);
const { width: stationGridWidth } = useElementSize(stationGridRef);
// 计算合适的车站布局列数
const actualStationGridColumns = computed(() => {
const currentStationCardWidth = (stationGridWidth.value - STATION_GRID_PADDING * 2 - (stationGridCols.value - 1) * STATION_GRID_GAP) / stationGridCols.value;
// 当卡片宽度大于最小宽度时，说明用户的设置没有问题，直接返回列数
if (currentStationCardWidth > STATION_CARD_MIN_WIDTH) return stationGridCols.value;
// 否则，说明用户的设置不合适，需要根据当前布局宽度重新计算列数
return Math.floor((stationGridWidth.value - STATION_GRID_PADDING * 2 + STATION_GRID_GAP) / STATION_CARD_MIN_WIDTH);
});
const showIcmpExportModal = ref(false); const showIcmpExportModal = ref(false);
const showRecordCheckExportModal = ref(false); const showRecordCheckExportModal = ref(false);
@@ -155,7 +170,7 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
<template> <template>
<NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%"> <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
<!-- 工具栏 --> <!-- 工具栏 -->
<NFlex align="center" style="padding: 8px 8px 0 8px"> <NFlex align="center" :style="{ padding: `${STATION_GRID_PADDING}px ${STATION_GRID_PADDING}px 0 ${STATION_GRID_PADDING}px` }">
<NButtonGroup> <NButtonGroup>
<template v-for="batchAction in batchActions" :key="batchAction.key"> <template v-for="batchAction in batchActions" :key="batchAction.key">
<NButton :secondary="!batchAction.active" :focusable="false" @click="() => toggleSelectAction(batchAction)">{{ batchAction.label }}</NButton> <NButton :secondary="!batchAction.active" :focusable="false" @click="() => toggleSelectAction(batchAction)">{{ batchAction.label }}</NButton>
@@ -174,19 +189,21 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
</NFlex> </NFlex>
<!-- 车站 --> <!-- 车站 -->
<NGrid :cols="stationGridCols" :x-gap="6" :y-gap="6" style="padding: 8px"> <div :ref="STATION_GRID_REF_NAME">
<NGridItem v-for="station in stations" :key="station.code"> <NGrid :cols="actualStationGridColumns" :x-gap="STATION_GRID_GAP" :y-gap="STATION_GRID_GAP" :style="{ padding: `${STATION_GRID_PADDING}px` }">
<StationCard <NGridItem v-for="station in stations" :key="station.code">
:station="station" <StationCard
:devices="lineDevices[station.code] ?? initStationDevices()" :station="station"
:alarms="lineAlarms[station.code] ?? initStationAlarms()" :devices="lineDevices[station.code] ?? initStationDevices()"
:selectable="!!selectableStations.find((selectable) => selectable.code === station.code)" :alarms="lineAlarms[station.code] ?? initStationAlarms()"
v-model:selected="stationSelection[station.code]" :selectable="!!selectableStations.find((selectable) => selectable.code === station.code)"
@click-detail="onClickDetail" v-model:selected="stationSelection[station.code]"
@click-config="onClickConfig" @click-detail="onClickDetail"
/> @click-config="onClickConfig"
</NGridItem> />
</NGrid> </NGridItem>
</NGrid>
</div>
</NScrollbar> </NScrollbar>
<IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" /> <IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" />