feat: sync-camera-result-modal

src/apis/model/biz/entity/index.ts

@@ -15,4 +15,5 @@ export * from './alarm';
 export * from './log';
 export * from './other';
 export * from './storage';
+export * from './upper-ndm';
 export * from './video';

src/apis/model/biz/entity/upper-ndm/index.ts

@@ -0,0 +1,2 @@
+export * from './sync-camera-result';
+export * from './sync-camera-result-detail';

src/apis/model/biz/entity/upper-ndm/sync-camera-result-detail.ts

@@ -0,0 +1,6 @@
+export interface SyncCameraResultDetail {
+  name: string;
+  deviceId: string;
+  ipAddress: string;
+  gbCode: string;
+}

src/apis/model/biz/entity/upper-ndm/sync-camera-result.ts

@@ -0,0 +1,10 @@
+import type { SyncCameraResultDetail } from './sync-camera-result-detail';
+
+export interface SyncCameraResult {
+  stationCode: string;
+  startTime: string;
+  endTime: string;
+  insertList: SyncCameraResultDetail[];
+  updateList: SyncCameraResultDetail[];
+  deleteList: SyncCameraResultDetail[];
+}

src/components/station-page/index.ts

@@ -4,3 +4,4 @@ export { default as DeviceParamsConfigModal } from './device-params-config-modal
 export { default as OfflineDeviceDetailModal } from './offline-device-detail-modal.vue';
 export { default as RecordCheckExportModal } from './record-check-export-modal.vue';
 export { default as StationCard } from './station-card.vue';
+export { default as SyncCameraResultModal } from './sync-camera-result-modal.vue';

src/components/station-page/sync-camera-result-modal.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { watchDebounced } from '@vueuse/core';
+import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+import { useStationStore } from '@/stores';
+import { storeToRefs } from 'pinia';
+import type { Station, SyncCameraResult } from '@/apis';
+import { DeleteFilled, EditFilled, PlusCircleFilled } from '@vicons/antd';
+
+const props = defineProps<{
+  syncCameraResult: Record<Station['code'], SyncCameraResult>;
+}>();
+
+const emit = defineEmits<{
+  'after-leave': [];
+}>();
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+
+const { syncCameraResult } = toRefs(props);
+
+const show = ref(false);
+
+watchDebounced(
+  [syncCameraResult],
+  ([result]) => {
+    show.value = Object.keys(result).length > 0;
+  },
+  {
+    debounce: 500,
+    deep: true,
+  },
+);
+
+const onAfterLeave = () => {
+  emit('after-leave');
+};
+
+const syncList = computed(() => {
+  return Object.values(syncCameraResult.value).map((sync) => {
+    const { stationCode, startTime, endTime, insertList, updateList, deleteList } = sync;
+    const stationName = stationList.value.find((station) => station.code === stationCode)?.name;
+    return { stationName, startTime, endTime, insertList, updateList, deleteList };
+  });
+});
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" title="摄像机同步结果" style="width: 600px" @after-leave="onAfterLeave">
+    <NScrollbar style="max-height: 400px">
+      <NList hoverable clickable>
+        <NListItem v-for="{ stationName, endTime, insertList, updateList, deleteList } in syncList" :key="stationName">
+          <NThing title-independent>
+            <template #header>
+              <NText strong>{{ stationName }}</NText>
+            </template>
+            <template #header-extra>
+              <NText depth="3"> {{ endTime }} 完成 </NText>
+            </template>
+            <NFlex justify="space-around" :size="24" style="margin-top: 8px">
+              <NStatistic label="新增">
+                <template #prefix>
+                  <NIcon :component="PlusCircleFilled" />
+                </template>
+                {{ insertList.length }}
+              </NStatistic>
+              <NStatistic label="更新">
+                <template #prefix>
+                  <NIcon :component="EditFilled" />
+                </template>
+                {{ updateList.length }}
+              </NStatistic>
+              <NStatistic label="删除">
+                <template #prefix>
+                  <NIcon :component="DeleteFilled" />
+                </template>
+                {{ deleteList.length }}
+              </NStatistic>
+            </NFlex>
+          </NThing>
+        </NListItem>
+      </NList>
+    </NScrollbar>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

src/composables/stomp/index.ts

@@ -1,5 +1,5 @@
-import type { NdmDeviceAlarmLogResultVO } from '@/apis';
+import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
-import { TOPIC_DEVICE_ALARM } from '@/constants';
+import { TOPIC_DEVICE_ALARM, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
 import { useAlarmStore } from '@/stores';
 import { Client } from '@stomp/stompjs';
 import { destr } from 'destr';
@@ -19,6 +19,8 @@ export const useStompClient = () => {
   const { unreadAlarmCount } = storeToRefs(alarmStore);
   const stompClient = ref<Client | null>(null);
 
+  const syncCameraResult = ref<Record<Station['code'], SyncCameraResult>>({});
+
   onMounted(() => {
     stompClient.value = new Client({
       brokerURL: getBrokerUrl(),
@@ -33,10 +35,15 @@ export const useStompClient = () => {
             unreadAlarmCount.value++;
           }
         });
+        stompClient.value?.subscribe(SYNC_CAMERA_STATUS_TOPIC, (message) => {
+          const { stationCode, startTime, endTime, insertList, updateList, deleteList } = destr<SyncCameraResult>(message.body);
+          syncCameraResult.value[stationCode] = { stationCode, startTime, endTime, insertList, updateList, deleteList };
+        });
       },
       onDisconnect: () => {
         console.log('Stomp连接断开');
         stompClient.value?.unsubscribe(TOPIC_DEVICE_ALARM);
+        stompClient.value?.unsubscribe(SYNC_CAMERA_STATUS_TOPIC);
       },
       onStompError: (frame) => {
         console.log('Stomp错误', frame);
@@ -57,5 +64,10 @@ export const useStompClient = () => {
 
   return {
     stompClient,
+
+    syncCameraResult,
+    afterCheckSyncCamera: () => {
+      syncCameraResult.value = {};
+    },
   };
 };

src/constants/stomp.ts

@@ -1 +1,3 @@
 export const TOPIC_DEVICE_ALARM = '/topic/deviceAlarm';
+
+export const SYNC_CAMERA_STATUS_TOPIC = '/topic/syncCameraStatus';

src/layouts/app-layout.vue

@@ -5,7 +5,7 @@ function renderIcon(icon: Component): () => VNode {
 </script>
 
 <script setup lang="ts">
-import { SettingsDrawer } from '@/components';
+import { SettingsDrawer, SyncCameraResultModal } from '@/components';
 import { useStompClient } from '@/composables';
 import { useLineStationsQuery } from '@/composables';
 import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
@@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia';
 import { computed, h, onBeforeMount, ref, watch, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
-useStompClient();
+const { syncCameraResult, afterCheckSyncCamera } = useStompClient();
 
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
@@ -205,7 +205,10 @@ const openSettingsDrawer = () => {
       </NLayout>
     </NLayout>
   </NScrollbar>
+
   <SettingsDrawer v-model:show="settingsDrawerShow" />
+
+  <SyncCameraResultModal :sync-camera-result="syncCameraResult" @after-leave="afterCheckSyncCamera" />
 </template>
 
 <style scoped lang="scss">