webSocket推送逻辑流程修改

src/App.vue

@@ -7,5 +7,34 @@
 <script setup lang="ts">
 import { ElConfigProvider } from 'element-plus';
 import { useAppStore } from '@/store/modules/app';
+import { userVersionRelation } from '@/api/user/index';
 const appStore = useAppStore();
+
+//系统更新通知
+const notice = ref({});
+const webVersion = sessionStorage.getItem('webVersion');
+if (webVersion != '' && webVersion != null) {
+  const version = JSON.parse(webVersion);
+  notice.value = ElNotification({
+    title: version.noticeTitle,
+    dangerouslyUseHTMLString: true,
+    customClass: 'notice',
+    duration: 0,
+    message: version.noticeContent.replace(/\n/g, '<br>'),
+    onClose: () => {
+      noticeCloce(version.noticeId);
+    }
+  });
+}
+function noticeCloce(id: any) {
+  //更新日志关闭事件
+  const params = {
+    noticeId: id
+  };
+  userVersionRelation(params).then((res: any) => {
+    if (res.code === 200) {
+      console.log('更新日志关闭！');
+    }
+  });
+}
 </script>

src/api/user/index.ts

@@ -27,9 +27,7 @@ export function getWeather(): AxiosPromise<[]> {
  *
  * @param queryParams
  */
-export function getUserPage(
+export function getUserPage(queryParams: UserQuery): AxiosPromise<PageResult<UserPageVO[]>> {
-  queryParams: UserQuery
-): AxiosPromise<PageResult<UserPageVO[]>> {
   return request({
     url: '/api/v1/users/page',
     method: 'get',
@@ -168,7 +166,8 @@ export function importUser(deptId: number, file: File) {
  */
 export function userVersionRelation(data: any) {
   return request({
-    url: 'model/userVersionRelation',
+    // url: 'model/userVersionRelation',
+    url: 'system/userNoticeRelation',
     method: 'post',
     data: data
   });

src/permission.ts

@@ -9,6 +9,7 @@
 import router from '@/router';
 import { useUserStoreHook } from '@/store/modules/user';
 import { usePermissionStoreHook } from '@/store/modules/permission';
+import socket from '@/utils/socket';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 NProgress.configure({ showSpinner: false }); // 进度条
@@ -34,6 +35,11 @@ router.beforeEach(async (to, from, next) => {
         if (to.matched.length === 0) {
           from.name ? next({ name: from.name }) : next('/404');
         } else {
+          console.log('切换页面发送websocket信息');
+          const exitStatu = {
+            code: 'exitDataMonitor'
+          };
+          socket.onSend(exitStatu);
           next();
         }
       } else {
@@ -43,6 +49,14 @@ router.beforeEach(async (to, from, next) => {
           accessRoutes.forEach(route => {
             router.addRoute(route);
           });
+
+          console.log('登录后链接websocket');
+          //登录后连接webSocket
+          const userStorageInfo = sessionStorage.getItem('userInfo');
+          const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
+          // const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+          const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
+          socket.initialize(wsUrl);
           next({ ...to, replace: true });
         } catch (error) {
           // 移除 token 并跳转登录页

src/store/modules/user.ts

@@ -57,10 +57,10 @@ export const useUserStore = defineStore('user', () => {
           roles.value = data.roles;
           perms.value = data.permissions;
           userInfo.value = user;
-          if (data.webVersion === null) {
+          if (data.notice === null) {
             webVersion.value = '';
           } else {
-            webVersion.value = JSON.stringify(data.webVersion);
+            webVersion.value = JSON.stringify(data.notice);
           }
           // useStorage('userInfo', user);
           resolve(data);

src/types/auto-imports.d.ts

@@ -2,11 +2,9 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
-  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -273,11 +271,9 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
-    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

src/views/dashboard/index.vue

@@ -86,13 +86,19 @@ import LineChart from './components/LineChart.vue';
 import BarChart from './components/BarChart.vue';
 import PieChart from './components/PieChart.vue';
 import avatar from '@/assets/images/avatar.png';
+import mitt from '@/plugins/bus';
+
+// import socket from '@/utils/socket';
+// const userStorageInfo = sessionStorage.getItem('userInfo');
+// const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
+// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
 
 const timer = ref();
 const isCurrentRoute = ref(true);
 const userStore = useUserStore();
 const duration = 5000;
 const userNumber = ref(2800);
-const notice = ref({});
+// const notice = ref({});
 // const vsitsNumber = transitionNum(720, 5000);
 const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 const hoursNow = useNow().value.getHours();
@@ -170,32 +176,33 @@ const timePeriod = computed(() => {
 
 onMounted(() => {
   getWeatherData();
-  const webVersion = sessionStorage.getItem('webVersion');
+  // socket.initialize(wsUrl);
-  if (webVersion != '' && webVersion != null) {
+  // const webVersion = sessionStorage.getItem('webVersion');
-    const version = JSON.parse(webVersion);
+  // if (webVersion != '' && webVersion != null) {
-    notice.value = ElNotification({
+  //   const version = JSON.parse(webVersion);
-      title: '更新日志',
+  //   notice.value = ElNotification({
-      dangerouslyUseHTMLString: true,
+  //     title: version.noticeTitle,
-      customClass: 'notice',
+  //     dangerouslyUseHTMLString: true,
-      duration: 0,
+  //     customClass: 'notice',
-      message: version.versionDesc.replace(/\n/g, '<br>'),
+  //     duration: 0,
-      onClose: () => {
+  //     message: version.noticeContent.replace(/\n/g, '<br>'),
-        noticeCloce(version.id);
+  //     onClose: () => {
-      }
+  //       noticeCloce(version.noticeId);
-    });
+  //     }
-  }
+  //   });
+  // }
 });
-function noticeCloce(id: any) {
+// function noticeCloce(id: any) {
-  //更新日志关闭事件
+//   //更新日志关闭事件
-  const params = {
+//   const params = {
-    versionId: id
+//     versionId: id
-  };
+//   };
-  userVersionRelation(params).then((res: any) => {
+//   userVersionRelation(params).then((res: any) => {
-    if (res.code === 200) {
+//     if (res.code === 200) {
-      console.log('更新日志关闭！');
+//       console.log('更新日志关闭！');
-    }
+//     }
-  });
+//   });
-}
+// }
 function getWeatherData() {
   //获取天气
   getWeather().then((res: any) => {
@@ -212,6 +219,10 @@ function getWeatherData() {
     }
   });
 }
+// mitt.on('tableMessage', (res: any) => {
+//   //监听表格数据变化
+//   console.log('noticeMessage--', res.data);
+// });
 </script>
 
 <style lang="scss" scoped>

src/views/data-visual/components/charts.vue

@@ -73,7 +73,7 @@ import PriPress from './priPress.vue';
   .flow {
     height: 421px;
     padding: 20px 27px;
-    background-color: #1A2537;
+    background-color: #1a2537;
   }
   .temp {
     margin-bottom: 28px;

src/views/data-visual/components/header.vue

@@ -14,7 +14,7 @@
         <svg-icon class="logoIcon" icon-class="BIlogo" />
       </div>
       <div class="line"></div>
-      <div class="text">生产监控大屏 - {{ deviceTitle }}</div>
+      <div class="text">运营管控平台 - {{ deviceTitle }}</div>
     </div>
     <div class="home">
       <div class="homeBtn" @click="returnBack">

src/views/data-visual/index.scss

@@ -1,8 +1,8 @@
 @import url('@/assets/fonts/font.css');
 .screenContainer {
-  position: fixed;
+  // position: fixed;
-  left: 50%;
+  // left: 50%;
-  top: 50%;
+  // top: 50%;
   transform-origin: 0 0;
   transition: 0.3s;
   color: #fff;

src/views/data-visual/index.vue

@@ -32,11 +32,11 @@ const baseHeight = 1440;
 // * 需保持的比例（默认32:9）
 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
 onMounted(() => {
-  calcRate();
+  // calcRate();
 });
 window.addEventListener('resize', () => {
   // 监听窗口改变，改变后重新获取
-  resize();
+  // resize();
 });
 function calcRate() {
   const appRef = screenRef.value;

src/views/login/index.vue

@@ -73,7 +73,9 @@
     <div class="videoCover" v-if="!videoCanPlay && settingsStore.showVideo">
       <img :style="resizeStyle" src="../../assets/images/login-bg.png" alt="视频封面" />
     </div>
-    <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.company') }} {{ $t('copyright.document') }}</div>
+    <div class="copyright">
+      Copyright © {{ $t('copyright.year') }} {{ $t('copyright.company') }} {{ $t('copyright.document') }}
+    </div>
   </div>
 </template>
 

src/views/monitoring/screen/components/main.vue

@@ -135,7 +135,7 @@ import mitt from '@/plugins/bus';
 import socket from '@/utils/socket';
 import useStorage from '@/utils/useStorage';
 import { useUserStoreHook } from '@/store/modules/user';
-import { useDateFormat } from '@vueuse/core';
+// import { useDateFormat } from '@vueuse/core';
 
 const sessionStorageIns = useStorage('sessionStorage');
 const { perms } = useUserStoreHook();
@@ -211,8 +211,8 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 // const baseApi = "http://board.heatiot.cn:8001/prod-api"//websocket链接地址，与项目接口地址一致。
 //const baseApi = import.meta.env.VITE_APP_BASE_API
 //const apiUrl = baseApi.replace(/https?:/, '');
-const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+// const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
-// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
+const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
 
 const emit = defineEmits(['tableHeaderData']);
 // const listData = ref([
@@ -258,13 +258,13 @@ const headerData = ref<HeaderVo[]>();
 onMounted(() => {
   // stationInfo();
   // tableHeader();
-  console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   console.log('aaaa', sessionStorage.getItem('currentPage'));
   tablePage.currentPage =
     sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage'));
   console.log(Number(sessionStorage.getItem('currentPage')));
   tablePage.pageSize = sessionStorage.getItem('pageSize') === null ? 10 : Number(sessionStorage.getItem('pageSize'));
-  socket.initialize(wsUrl); //初始化websocket http://
+  // socket.initialize(wsUrl); //初始化websocket http://
 });
 
 mitt.on('currentPageEmit', (res: any) => {
@@ -409,7 +409,7 @@ function tableHeader() {
 function tableDatas() {
   //获取表格数据
   // const params = menuKey.value;
-  console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   const params = {
     pageNum: tablePage.currentPage,
     pageSize: tablePage.pageSize,
@@ -424,10 +424,9 @@ function tableDatas() {
       tablePage.total = res.total;
       // gridOptions.data = res.data;
       loadingShow.value = false;
-      console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+      // console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
     }
   });
-  
 }
 
 const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => {
@@ -454,7 +453,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
 };
 
 const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
-  console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   //表单参数为object时处理
   // console.log(cellValue);
   // const iconFont=cellValue.changeProp===-1?'<i class="iconfont icon-decline" />':(cellValue.changeProp===1?'<i class="iconfont icon-rise" />':'<i/>')
@@ -473,13 +472,13 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
     ${cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'}
     </span>
     ${cellValue.canBeControl === '1' && controlPerm ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
-    console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   return cellData;
 };
 
 // 通用行合并函数（将相同多列数据合并为一行）
 const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex, column, visibleData }) => {
-  console.log('通用行合并渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('通用行合并渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   const fields = ['gTitle'];
   const cellValue = row[column.field];
   if (cellValue && fields.includes(column.field)) {
@@ -497,7 +496,7 @@ const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex,
       }
     }
   }
-  console.log('通用行合并渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
+  // console.log('通用行合并渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
 };
 
 const submitEvent: VxeFormEvents.Submit = () => {

src/views/monitoring/screen/index.vue

@@ -79,7 +79,9 @@
     </div>
     <div class="panelBtn" :class="menuShow ? 'left' : 'right'" @click="panelClick">
       <i class="iconfont icon-up" :class="!panelShow ? 'up' : 'down'"></i>
-      <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
+      <div class="copyright">
+        Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}
+      </div>
       <!-- <n-button type="info" size="tiny" ghost @click="panelClick">按钮</n-button> -->
     </div>
   </div>
@@ -135,14 +137,14 @@ window.addEventListener('resize', () => {
   console.log('监听sidebar:', sidebar.value?.offsetHeight);
 });
 
-onBeforeRouteLeave((to, from) => {
+// onBeforeRouteLeave((to, from) => {
-  //监听离开页面
+//   //监听离开页面
-  console.log('onBeforeRouteLeave--', to.path, from.path);
+//   console.log('onBeforeRouteLeave--', to.path, from.path);
-  if (to.path != from.path) {
+//   if (to.path != from.path) {
-    console.log('离开页面');
+//     console.log('离开页面');
-    socket.close(false);
+//     socket.close(false);
-  }
+//   }
-});
+// });
 
 function tableMenuData(data: any) {
   //获取菜单数据

vite.config.ts

@@ -45,7 +45,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       hmr: true, //配置HMR
       proxy: {
         '/dev-api': {
-          // target: 'http://172.1.2.39:9010/', //本地接口地址
+          // target: 'http://172.1.2.76:9010/', //本地接口地址
           // target: 'http://172.1.2.90:9010/', //本地接口地址
           target: 'http://10.10.10.56:9010/', //线上测试接口地址
           changeOrigin: true,