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. 8
      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 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> </script>

12
src/permission.ts

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

2
src/views/dashboard/components/BarChart.vue

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

22
src/views/dashboard/components/LineChart.vue

@ -1,7 +1,7 @@
<!-- 线 + 柱混合图 --> <!-- 线 + 柱混合图 -->
<template> <template>
<el-card> <el-card>
<template #header> 一网进回水 </template> <template #header> 一网温度 </template>
<div :id="id" :class="className" :style="{ height, width }" /> <div :id="id" :class="className" :style="{ height, width }" />
</el-card> </el-card>
</template> </template>
@ -56,7 +56,9 @@ const options = {
dataset: { dataset: {
source: [ source: [
['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'], ['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: { xAxis: {
@ -97,6 +99,22 @@ const options = {
} }
], ],
series: [ series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: {
focus: 'series'
}
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: {
focus: 'series'
}
},
{ {
type: 'line', type: 'line',
smooth: true, smooth: true,

63
src/views/dashboard/components/PieChart.vue

@ -1,11 +1,12 @@
<!-- 线 + 柱混合图 --> <!-- 线 + 柱混合图 -->
<template> <template>
<el-card> <el-card>
<template #header> 累计热量 </template> <template #header> 累计参数 </template>
<div class="table"> <div class="table">
<div class="header"> <div class="header">
<span class="cell">名称</span> <span class="cell">名称</span>
<span class="cell">累计热量</span> <span class="cell">累计热量</span>
<span class="cell">累计流量</span>
<span class="cell">时间</span> <span class="cell">时间</span>
</div> </div>
<vue3-seamless-scroll class="wrapper" :list="waterData" :step="1" hover wheel> <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.name }}</span>
<span class="cell">{{ item.field1 }}</span> <span class="cell">{{ item.field1 }}</span>
<span class="cell">{{ item.field2 }}</span> <span class="cell">{{ item.field2 }}</span>
<span class="cell">{{ item.field3 }}</span>
</div> </div>
</vue3-seamless-scroll> </vue3-seamless-scroll>
</div> </div>
@ -47,47 +49,56 @@ const waterData = ref([
{ {
name: '换热站1', name: '换热站1',
field1: '158889', 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'
} }
]); ]);

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

@ -1003,6 +1003,13 @@ const options = {
}, },
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

@ -497,6 +497,13 @@ const options = {
}, },
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

@ -17,6 +17,13 @@ const isCurrentRoute = ref(true);
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

@ -18,6 +18,13 @@ const isCurrentRoute = ref(true);
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', 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: { axisPointer: {
type: 'cross' type: 'cross'
} }

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

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

4
src/views/data-visual/index.vue

@ -32,11 +32,11 @@ const baseHeight = 1440;
// * 32:9 // * 32:9
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
onMounted(() => { onMounted(() => {
// calcRate(); calcRate();
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// //
// resize(); resize();
}); });
function calcRate() { function calcRate() {
const appRef = screenRef.value; const appRef = screenRef.value;

8
src/views/monitoring/components/header.vue

@ -228,9 +228,11 @@ onMounted(() => {
routerType.value = route.query?.id === undefined ? '0' : '1'; routerType.value = route.query?.id === undefined ? '0' : '1';
getWeatherData(); getWeatherData();
document.body.addEventListener('mousedown', function () { document.body.addEventListener('mousedown', function () {
console.log('鼠标按下'); if (alarsRef.value != null) {
alarsRef.value.play(); console.log('鼠标按下');
alarsRef.value.muted = false; 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 = "http://board.heatiot.cn:8001/prod-api"//websocket
//const baseApi = import.meta.env.VITE_APP_BASE_API //const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, ''); //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 emit = defineEmits(['tableHeaderData']);
// const listData = ref([ // const listData = ref([
@ -264,7 +264,7 @@ onMounted(() => {
sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage')); sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage'));
console.log(Number(sessionStorage.getItem('currentPage'))); console.log(Number(sessionStorage.getItem('currentPage')));
tablePage.pageSize = sessionStorage.getItem('pageSize') === null ? 10 : Number(sessionStorage.getItem('pageSize')); 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) => { 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); 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) { function tableMenuData(data: any) {
// //

Loading…
Cancel
Save