Browse Source

部分修改

develop
fuguobin 9 months ago
parent
commit
e80b69e588
  1. 52
      src/App.vue
  2. 12
      src/permission.ts
  3. 2
      src/views/dashboard/components/BarChart.vue
  4. 22
      src/views/dashboard/components/LineChart.vue
  5. 63
      src/views/dashboard/components/PieChart.vue
  6. 7
      src/views/data-visual/components/hxPress.vue
  7. 7
      src/views/data-visual/components/hxTemp.vue
  8. 7
      src/views/data-visual/components/priPress.vue
  9. 7
      src/views/data-visual/components/priTemp.vue
  10. 7
      src/views/data-visual/components/secPress.vue
  11. 7
      src/views/data-visual/components/secTemp.vue
  12. 6
      src/views/data-visual/index.scss
  13. 4
      src/views/data-visual/index.vue
  14. 2
      src/views/monitoring/components/header.vue
  15. 6
      src/views/monitoring/screen/components/main.vue
  16. 16
      src/views/monitoring/screen/index.vue

52
src/App.vue

@ -11,30 +11,30 @@ 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('更新日志关闭!');
}
});
}
// 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>

12
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地址
socket.initialize(wsUrl);
// const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
// socket.initialize(wsUrl);
next({ ...to, replace: true });
} catch (error) {
// 移除 token 并跳转登录页

2
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>

22
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,

63
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',
field1: '158889',
field2: '2024-01-25'
name: '换热站2',
field1: '15888',
field2: '568',
field3: '2024-01-26'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站3',
field1: '25889',
field2: '798',
field3: '2024-01-27'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站4',
field1: '8889',
field2: '256',
field3: '2024-02-01'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站5',
field1: '58889',
field2: '753',
field3: '2024-02-02'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站6',
field1: '15889',
field2: '953',
field3: '2024-02-10'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站7',
field1: '1988',
field2: '653',
field3: '2024-02-11'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站8',
field1: '7889',
field2: '746',
field3: '2024-02-12'
},
{
name: '换热站1',
field1: '158889',
field2: '2024-01-25'
name: '换热站9',
field1: '1899',
field2: '258',
field3: '2024-02-23'
}
]);

7
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'
}

7
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'
}

7
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'
}

7
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'
}

7
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'
}

7
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'
}

6
src/views/data-visual/index.scss

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

4
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;

2
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;
}
});
});

6
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://10.10.10.56:9010/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 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) => {

16
src/views/monitoring/screen/index.vue

@ -137,14 +137,14 @@ window.addEventListener('resize', () => {
console.log('监听sidebar:', sidebar.value?.offsetHeight);
});
// onBeforeRouteLeave((to, from) => {
// //
// console.log('onBeforeRouteLeave--', to.path, from.path);
// if (to.path != from.path) {
// console.log('');
// socket.close(false);
// }
// });
onBeforeRouteLeave((to, from) => {
//
console.log('onBeforeRouteLeave--', to.path, from.path);
if (to.path != from.path) {
console.log('离开页面');
socket.close(false);
}
});
function tableMenuData(data: any) {
//

Loading…
Cancel
Save