pipeline_disinfection_front_end/src/App.vue

<template>
  <router-view></router-view>
  <my-modal type="info" icon="warning"
    v-model:visible="deviceAlert.visible"
    :content="deviceAlert.content"
    @ok="actionDeviceAlertOk"
  ></my-modal>
</template>
<script setup>
import { useWebSocketStore } from '@/store'
import { onMounted, ref } from 'vue';
/** @var {webSocketStore} */
const webSocketStore = useWebSocketStore();
/** @var {Object} */
const deviceAlert = ref({
    visible: false,
    content: '',
    key : null,
});
// on mounted
onMounted(mounted);

// on mounted
function mounted() {
    webSocketStore.registerEventHandler('AlertEvent', handleAlertEvent);
}

// handle alert event
async function handleAlertEvent(data) {
    deviceAlert.value.visible = true;
    deviceAlert.value.content = data.displayInfo;
    deviceAlert.value.key = data.alertContext;
    await webSocketStore.call('AlertEventFrontEndConfirm', {alertContext:data.alertContext});
}

// action device alert ok
async function actionDeviceAlertOk() {
    await webSocketStore.call('AlertEventUsrConfirm', {alertContext:deviceAlert.value.key});
}

</script>