部分修改

src/App.vue

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

src/permission.ts

@@ -9,7 +9,7 @@
 import router from '@/router';
 import { useUserStoreHook } from '@/store/modules/user';
 import { usePermissionStoreHook } from '@/store/modules/permission';
-import socket from '@/utils/socket';
+// import socket from '@/utils/socket';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 NProgress.configure({ showSpinner: false }); // 进度条
@@ -35,11 +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信息');
+          // console.log('切换页面发送websocket信息');
           const exitStatu = {
             code: 'exitDataMonitor'
           };
-          socket.onSend(exitStatu);
+          // socket.onSend(exitStatu);
           next();
         }
       } else {
@@ -50,13 +50,13 @@ router.beforeEach(async (to, from, next) => {
             router.addRoute(route);
           });
 
-          console.log('登录后链接websocket');
+          // 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地址
+          // const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
-          socket.initialize(wsUrl);
+          // socket.initialize(wsUrl);
           next({ ...to, replace: true });
         } catch (error) {
           // 移除 token 并跳转登录页

src/views/dashboard/components/BarChart.vue

@@ -1,7 +1,7 @@
 <!--  线 + 柱混合图 -->
 <template>
   <el-card>
-    <template #header> 进回均温排行 </template>
+    <template #header> 一网均温排行 </template>
     <div :id="id" :class="className" :style="{ height, width }" />
   </el-card>
 </template>

src/views/dashboard/components/LineChart.vue

@@ -1,7 +1,7 @@
 <!--  线 + 柱混合图 -->
 <template>
   <el-card>
-    <template #header> 一网进回水 </template>
+    <template #header> 一网温度 </template>
     <div :id="id" :class="className" :style="{ height, width }" />
   </el-card>
 </template>
@@ -56,7 +56,9 @@ const options = {
   dataset: {
     source: [
       ['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
-      ['日均温', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 52]
+      ['进温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55],
+      ['回温', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20],
+      ['均温', 52, 77, 75, 70.1, 53.4, 50, 40]
     ]
   },
   xAxis: {
@@ -97,6 +99,22 @@ const options = {
     }
   ],
   series: [
+    {
+      type: 'line',
+      smooth: true,
+      seriesLayoutBy: 'row',
+      emphasis: {
+        focus: 'series'
+      }
+    },
+    {
+      type: 'line',
+      smooth: true,
+      seriesLayoutBy: 'row',
+      emphasis: {
+        focus: 'series'
+      }
+    },
     {
       type: 'line',
       smooth: true,

src/views/dashboard/components/PieChart.vue

@@ -1,11 +1,12 @@
 <!--  线 + 柱混合图 -->
 <template>
   <el-card>
-    <template #header> 累计热量 </template>
+    <template #header> 累计参数 </template>
     <div class="table">
       <div class="header">
         <span class="cell">名称</span>
         <span class="cell">累计热量</span>
+        <span class="cell">累计流量</span>
         <span class="cell">时间</span>
       </div>
       <vue3-seamless-scroll class="wrapper" :list="waterData" :step="1" hover wheel>
@@ -13,6 +14,7 @@
           <span class="cell">{{ item.name }}</span>
           <span class="cell">{{ item.field1 }}</span>
           <span class="cell">{{ item.field2 }}</span>
+          <span class="cell">{{ item.field3 }}</span>
         </div>
       </vue3-seamless-scroll>
     </div>
@@ -47,47 +49,56 @@ const waterData = ref([
   {
     name: '换热站1',
     field1: '158889',
-    field2: '2024-01-25'
+    field2: '25632',
+    field3: '2024-01-25'
   },
   {
-    name: '换热站1',
+    name: '换热站2',
-    field1: '158889',
+    field1: '15888',
-    field2: '2024-01-25'
+    field2: '568',
+    field3: '2024-01-26'
   },
   {
-    name: '换热站1',
+    name: '换热站3',
-    field1: '158889',
+    field1: '25889',
-    field2: '2024-01-25'
+    field2: '798',
+    field3: '2024-01-27'
   },
   {
-    name: '换热站1',
+    name: '换热站4',
-    field1: '158889',
+    field1: '8889',
-    field2: '2024-01-25'
+    field2: '256',
+    field3: '2024-02-01'
   },
   {
-    name: '换热站1',
+    name: '换热站5',
-    field1: '158889',
+    field1: '58889',
-    field2: '2024-01-25'
+    field2: '753',
+    field3: '2024-02-02'
   },
   {
-    name: '换热站1',
+    name: '换热站6',
-    field1: '158889',
+    field1: '15889',
-    field2: '2024-01-25'
+    field2: '953',
+    field3: '2024-02-10'
   },
   {
-    name: '换热站1',
+    name: '换热站7',
-    field1: '158889',
+    field1: '1988',
-    field2: '2024-01-25'
+    field2: '653',
+    field3: '2024-02-11'
   },
   {
-    name: '换热站1',
+    name: '换热站8',
-    field1: '158889',
+    field1: '7889',
-    field2: '2024-01-25'
+    field2: '746',
+    field3: '2024-02-12'
   },
   {
-    name: '换热站1',
+    name: '换热站9',
-    field1: '158889',
+    field1: '1899',
-    field2: '2024-01-25'
+    field2: '258',
+    field3: '2024-02-23'
   }
 ]);
 

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

@@ -1003,6 +1003,13 @@ const options = {
   },
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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

@@ -497,6 +497,13 @@ const options = {
   },
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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

@@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
 const options = {
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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

@@ -17,6 +17,13 @@ const isCurrentRoute = ref(true);
 const options = {
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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

@@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
 const options = {
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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

@@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
 const options = {
   tooltip: {
     trigger: 'axis',
+    borderColor: 'gray',
+    backgroundColor: 'rgba(36, 52, 78, 0.8)',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 0 80px rgba(0, 0, 0, 0.25)',
+    textStyle: {
+      color: '#fff'
+    },
     axisPointer: {
       type: 'cross'
     }

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/monitoring/components/header.vue

@@ -228,9 +228,11 @@ onMounted(() => {
   routerType.value = route.query?.id === undefined ? '0' : '1';
   getWeatherData();
   document.body.addEventListener('mousedown', function () {
+    if (alarsRef.value != null) {
       console.log('鼠标按下');
       alarsRef.value.play();
       alarsRef.value.muted = false;
+    }
   });
 });
 

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

@@ -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([
@@ -264,7 +264,7 @@ onMounted(() => {
     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) => {

src/views/monitoring/screen/index.vue

@@ -137,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) {
   //获取菜单数据