告警大屏完成

src/main.ts

@@ -1,4 +1,4 @@
-import {createApp} from 'vue'
+import { createApp,ref, onBeforeUnmount} from 'vue'
 import App from './App.vue'
 import router from './router';
 import ElementPlus from 'element-plus';
@@ -13,11 +13,11 @@ import '@kjgl77/datav-vue3/dist/style.css';
 
 
 const app = createApp(App)
-const globalWebSocket = useGlobalWebSocket(); 
-app.provide('globalWebSocket',globalWebSocket);
+const globalWebSocket = useGlobalWebSocket();
+app.provide('globalWebSocket', globalWebSocket);
 // app.provide('axios', axiosInstance);
 app.use(ElementPlus, { locale: zhCn });
-app.use (router);
+app.use(router);
 app.use(DataVVue3);
 
 // 导航守卫，检查登录状态
@@ -41,4 +41,37 @@ router.beforeEach((to, from, next) => {
     }
 });
 
+// 定义转换函数
+app.config.globalProperties.xToh = (px: number): string => {
+    const vh = (px / window.innerHeight) * 100;
+    return `${vh}vh`;
+};
+
+app.config.globalProperties.xTow = (px: number): string => {
+    const vw = (px / window.innerWidth) * 100;
+    return `${vw}vw`;
+};
+
+app.config.globalProperties.vhToPx = (vh: number): number => {
+    return (vh / 100) * window.innerHeight;
+};
+
+app.config.globalProperties.vwToPx = (vw: number): number => {
+    return (vw / 100) * window.innerWidth;
+};
+
+// 响应式处理
+const updateDimensions = () => {
+    app.config.globalProperties.windowHeight = window.innerHeight;
+    app.config.globalProperties.windowWidth = window.innerWidth;
+};
+
+window.addEventListener('resize', updateDimensions);
+updateDimensions(); // 初始化
+
+// 清理事件监听器
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateDimensions);
+});
+
 app.mount('#app')