feat(statioin-page): action button group
This commit is contained in:
yangsy
@@ -1,11 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { Station } from '@/apis';
|
||||
import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
|
||||
import { syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
|
||||
import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, RecordCheckExportModal, StationCard } from '@/components';
|
||||
import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
|
||||
import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
|
||||
import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
|
||||
import { useAlarmStore, useDeviceStore, usePollingStore, useSettingStore, useStationStore } from '@/stores';
|
||||
import { useMutation } from '@tanstack/vue-query';
|
||||
import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton, NCheckbox } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
const stationStore = useStationStore();
|
||||
const { stationList } = storeToRefs(stationStore);
|
||||
@@ -13,11 +14,12 @@ const deviceStore = useDeviceStore();
|
||||
const { lineDevices } = storeToRefs(deviceStore);
|
||||
const alarmStore = useAlarmStore();
|
||||
const { lineAlarmCounts } = storeToRefs(alarmStore);
|
||||
const settingStore = useSettingStore();
|
||||
const { stationGridColumns } = storeToRefs(settingStore);
|
||||
const pollingStore = usePollingStore();
|
||||
|
||||
const { error: lineDevicesQueryError } = useLineDevicesQuery();
|
||||
const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
|
||||
const settingStore = useSettingStore();
|
||||
const { stationGridColumns } = storeToRefs(settingStore);
|
||||
|
||||
watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
|
||||
if (newLineDevicesQueryError) {
|
||||
@@ -28,51 +30,157 @@ watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError,
|
||||
}
|
||||
});
|
||||
|
||||
// 操作栏
|
||||
// 当点击操作栏中的一个按钮时，其他按钮会被禁用
|
||||
type Action = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr' | null;
|
||||
const selectedAction = ref<Action>(null);
|
||||
const showOperation = ref(false);
|
||||
const stationSelectable = ref(false);
|
||||
const selectedStations = ref<Record<Station['code'], boolean>>({});
|
||||
const showActionConfirm = ref(false);
|
||||
const showDeviceExportModal = ref(false);
|
||||
const openDeviceExportModal = () => {
|
||||
showDeviceExportModal.value = true;
|
||||
const stationSelection = ref<Record<Station['code'], boolean>>({});
|
||||
// TODO: 后期导出设备也会支持选择车站，而不是目前的Modal交互
|
||||
const showIcmpExportModal = ref(false);
|
||||
const showRecordCheckExportModal = ref(false);
|
||||
const onToggleSelectAll = (checked: boolean) => {
|
||||
if (!checked) {
|
||||
stationSelection.value = {};
|
||||
} else {
|
||||
stationSelection.value = Object.fromEntries(stationList.value.map((station) => [station.code, true]));
|
||||
}
|
||||
};
|
||||
const onAction = (action: Action) => {
|
||||
selectedAction.value = action;
|
||||
if (action === 'export-icmp') {
|
||||
showIcmpExportModal.value = true;
|
||||
} else if (action === 'export-record') {
|
||||
showOperation.value = true;
|
||||
stationSelectable.value = true;
|
||||
} else if (action === 'sync-camera') {
|
||||
showOperation.value = true;
|
||||
stationSelectable.value = true;
|
||||
} else if (action === 'sync-nvr') {
|
||||
showOperation.value = true;
|
||||
stationSelectable.value = true;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
};
|
||||
const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
|
||||
mutationFn: async () => {
|
||||
const stationCodes = Object.entries(stationSelection.value)
|
||||
.filter(([, selected]) => selected)
|
||||
.map(([code]) => code);
|
||||
for (const stationCode of stationCodes) {
|
||||
await syncCameraApi({ stationCode });
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
window.$message.success('摄像机同步成功');
|
||||
pollingStore.disablePolling();
|
||||
pollingStore.enablePolling();
|
||||
onFinish();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
window.$message.error(error.message);
|
||||
onCancel();
|
||||
},
|
||||
});
|
||||
const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
|
||||
mutationFn: async () => {
|
||||
const stationCodes = Object.entries(stationSelection.value)
|
||||
.filter(([, selected]) => selected)
|
||||
.map(([code]) => code);
|
||||
for (const stationCode of stationCodes) {
|
||||
await syncNvrChannelsApi({ stationCode });
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
window.$message.info('正在同步录像机通道，可能需要一些时间');
|
||||
onFinish();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
window.$message.error(error.message);
|
||||
onCancel();
|
||||
},
|
||||
});
|
||||
const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
|
||||
const onConfirm = async () => {
|
||||
if (selectedAction.value === 'export-icmp') {
|
||||
} else if (selectedAction.value === 'export-record') {
|
||||
if (!Object.values(stationSelection.value).some((selected) => selected)) {
|
||||
window.$message.warning('请选择要导出录像诊断的车站');
|
||||
return;
|
||||
}
|
||||
showRecordCheckExportModal.value = true;
|
||||
} else if (selectedAction.value === 'sync-camera') {
|
||||
if (!Object.values(stationSelection.value).some((selected) => selected)) {
|
||||
window.$message.warning('请选择要同步摄像机的车站');
|
||||
return;
|
||||
}
|
||||
syncCamera();
|
||||
} else if (selectedAction.value === 'sync-nvr') {
|
||||
if (!Object.values(stationSelection.value).some((selected) => selected)) {
|
||||
window.$message.warning('请选择要同步录像机通道的车站');
|
||||
return;
|
||||
}
|
||||
syncNvrChannels();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
};
|
||||
const onCancel = () => {
|
||||
selectedAction.value = null;
|
||||
showOperation.value = false;
|
||||
stationSelectable.value = false;
|
||||
stationSelection.value = {};
|
||||
};
|
||||
const onFinish = onCancel;
|
||||
|
||||
// 车站卡片的事件
|
||||
const selectedStation = ref<Station>();
|
||||
const offlineDeviceTreeModalShow = ref(false);
|
||||
const deviceAlarmTreeModalShow = ref(false);
|
||||
const deviceParamsConfigModalShow = ref(false);
|
||||
const showOfflineDeviceDetailModal = ref(false);
|
||||
const showDeviceAlarmDetailModal = ref(false);
|
||||
const showDeviceParamsConfigModal = ref(false);
|
||||
const openOfflineDeviceDetailModal = (station: Station) => {
|
||||
selectedStation.value = station;
|
||||
offlineDeviceTreeModalShow.value = true;
|
||||
showOfflineDeviceDetailModal.value = true;
|
||||
};
|
||||
const openDeviceAlarmDetailModal = (station: Station) => {
|
||||
selectedStation.value = station;
|
||||
deviceAlarmTreeModalShow.value = true;
|
||||
showDeviceAlarmDetailModal.value = true;
|
||||
};
|
||||
const openDeviceParamsConfigModal = (station: Station) => {
|
||||
selectedStation.value = station;
|
||||
deviceParamsConfigModalShow.value = true;
|
||||
showDeviceParamsConfigModal.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
|
||||
<NFlex justify="space-between" align="center" style="padding: 8px 8px 0 8px">
|
||||
<!-- 工具栏 -->
|
||||
<NFlex align="center" style="padding: 8px 8px 0 8px">
|
||||
<NButtonGroup>
|
||||
<NButton secondary :focusable="false" @click="openDeviceExportModal">导出设备状态</NButton>
|
||||
<NButton v-if="false">导出录像诊断</NButton>
|
||||
<NButton v-if="false">同步摄像机</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-camera'" @click="() => onAction('sync-camera')">同步摄像机</NButton>
|
||||
<NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-nvr'" @click="() => onAction('sync-nvr')">同步录像机通道</NButton>
|
||||
</NButtonGroup>
|
||||
<NFlex v-if="showActionConfirm" size="small">
|
||||
<NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
|
||||
<NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
|
||||
</NFlex>
|
||||
<template v-if="showOperation">
|
||||
<NCheckbox label="全选" @update:checked="onToggleSelectAll" />
|
||||
<NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onConfirm">确定</NButton>
|
||||
<NButton tertiary size="small" type="tertiary" :focusable="false" @click="onCancel">取消</NButton>
|
||||
</template>
|
||||
</NFlex>
|
||||
<!-- 车站 -->
|
||||
<NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
|
||||
<NGi v-for="station in stationList" :key="station.code">
|
||||
<StationCard
|
||||
:station="station"
|
||||
:station-devices="lineDevices[station.code]"
|
||||
:station-alarm-counts="lineAlarmCounts[station.code]"
|
||||
:selectable="stationSelectable"
|
||||
v-model:selected="stationSelection[station.code]"
|
||||
@open-offline-device-detail-modal="openOfflineDeviceDetailModal"
|
||||
@open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
|
||||
@open-device-params-config-modal="openDeviceParamsConfigModal"
|
||||
@@ -82,13 +190,15 @@ const openDeviceParamsConfigModal = (station: Station) => {
|
||||
</NScrollbar>
|
||||
|
||||
<!-- 离线设备详情对话框 -->
|
||||
<OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
|
||||
<OfflineDeviceDetailModal v-model:show="showOfflineDeviceDetailModal" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
|
||||
<!-- 设备告警详情对话框 -->
|
||||
<DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
|
||||
<DeviceAlarmDetailModal v-model:show="showDeviceAlarmDetailModal" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
|
||||
<!-- 设备配置面板对话框 -->
|
||||
<DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
|
||||
<DeviceParamsConfigModal v-model:show="showDeviceParamsConfigModal" :station="selectedStation" />
|
||||
<!-- 设备状态导出对话框 -->
|
||||
<DeviceExportModal v-model:show="showDeviceExportModal" />
|
||||
<DeviceExportModal v-model:show="showIcmpExportModal" @after-leave="onFinish" />
|
||||
<!-- 录像诊断导出对话框 -->
|
||||
<RecordCheckExportModal v-model:show="showRecordCheckExportModal" :stations="stationList.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
Reference in New Issue
Block a user