Browse Source

部分接口数据修改

develop
fuguobin 9 months ago
parent
commit
09b1a238b2
  1. 64
      src/App.vue
  2. 9
      src/api/table/types.ts
  3. 12
      src/permission.ts
  4. 6
      src/store/modules/date.js
  5. 28
      src/store/modules/user.ts
  6. 2
      src/types/auto-imports.d.ts
  7. 11
      src/utils/request.ts
  8. 4
      src/utils/socket.ts
  9. 5
      src/views/dashboard/components/BarChart.vue
  10. 16
      src/views/dashboard/components/LineChart.vue
  11. 13
      src/views/dashboard/index.scss
  12. 71
      src/views/dashboard/index.vue
  13. 8
      src/views/data-visual/components/hxPress.vue
  14. 8
      src/views/data-visual/components/hxTemp.vue
  15. 16
      src/views/data-visual/components/table.vue
  16. 6
      src/views/data-visual/index.scss
  17. 4
      src/views/data-visual/index.vue
  18. 14
      src/views/monitoring/screen/components/main.vue
  19. 16
      src/views/monitoring/screen/index.vue

64
src/App.vue

@ -8,33 +8,43 @@
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from 'element-plus';
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { userVersionRelation } from '@/api/user/index'; import { userVersionRelation } from '@/api/user/index';
import mitt from '@/plugins/bus';
const appStore = useAppStore(); const appStore = useAppStore();
// mitt.on('noticeMessage', (res: any) => {
// const notice = ref({}); //
// const webVersion = sessionStorage.getItem('webVersion'); console.log('noticeMessage:', res);
// if (webVersion != '' && webVersion != null) { noticeFn(res);
// const version = JSON.parse(webVersion); });
// notice.value = ElNotification({
// title: version.noticeTitle, function noticeFn(data: any) {
// dangerouslyUseHTMLString: true, //
// customClass: 'notice', const notice = ref({});
// duration: 0, const webVersion = data.data;
// message: version.noticeContent.replace(/\n/g, '<br>'), console.log('webVersion:', webVersion);
// onClose: () => { if (Object.keys(webVersion).length != 0 && webVersion != null) {
// noticeCloce(version.noticeId); const version = JSON.parse(webVersion);
// } notice.value = ElNotification({
// }); title: version.noticeTitle,
// } dangerouslyUseHTMLString: true,
// function noticeCloce(id: any) { customClass: 'notice',
// // duration: 0,
// const params = { message: version.noticeContent.replace(/\n/g, '<br>'),
// noticeId: id onClose: () => {
// }; noticeCloce(version.noticeId);
// userVersionRelation(params).then((res: any) => { }
// if (res.code === 200) { });
// console.log(''); }
// } }
// }); function noticeCloce(id: any) {
// } //
const params = {
noticeId: id
};
userVersionRelation(params).then((res: any) => {
if (res.code === 200) {
console.log('更新日志关闭!');
}
});
}
</script> </script>

9
src/api/table/types.ts

@ -3,7 +3,7 @@
*/ */
export interface TableVo { export interface TableVo {
id: string; id: string;
deviceuuid: string; assetInfo: assetInfoVo;
areaid: string; areaid: string;
C018: object; C018: object;
C019: object; C019: object;
@ -57,6 +57,13 @@ export interface TableVo {
C048: object; C048: object;
} }
export interface assetInfoVo {
assetStatus: string;
id: number;
title: string;
assetCode: string;
}
/** /**
* *
*/ */

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 并跳转登录页

6
src/store/modules/date.js

@ -7,9 +7,10 @@ const useCounter = defineStore('date', {
state: () => ({ state: () => ({
deptIdStr: '', deptIdStr: '',
dateStr: '', dateStr: '',
noticeStr: {},
orgStr: { orgStr: {
title: '', title: '',
uuid: '' assetCode: ''
} }
}), }),
@ -28,6 +29,9 @@ const useCounter = defineStore('date', {
dateStore(val) { dateStore(val) {
this.dateStr = val; this.dateStr = val;
}, },
noticeStore(val) {
this.noticeStr = val;
},
orgStore(val) { orgStore(val) {
this.orgStr = val; this.orgStr = val;
} }

28
src/store/modules/user.ts

@ -16,7 +16,7 @@ export const useUserStore = defineStore('user', () => {
const userInfo = useSessionStorage('userInfo', {}); const userInfo = useSessionStorage('userInfo', {});
const nickname = ref(''); const nickname = ref('');
const avatar = ref(''); const avatar = ref('');
const webVersion = useSessionStorage('webVersion', ''); // const webVersion = useSessionStorage('webVersion', '');
const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限 const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限 const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
@ -57,11 +57,11 @@ export const useUserStore = defineStore('user', () => {
roles.value = data.roles; roles.value = data.roles;
perms.value = data.permissions; perms.value = data.permissions;
userInfo.value = user; userInfo.value = user;
if (data.notice === null) { // if (data.notice === null) {
webVersion.value = ''; // webVersion.value = '';
} else { // } else {
webVersion.value = JSON.stringify(data.notice); // webVersion.value = JSON.stringify(data.notice);
} // }
// useStorage('userInfo', user); // useStorage('userInfo', user);
resolve(data); resolve(data);
}) })
@ -88,12 +88,16 @@ export const useUserStore = defineStore('user', () => {
// 重置 // 重置
function resetToken() { function resetToken() {
token.value = ''; return new Promise<void>(resolve => {
userInfo.value = {}; token.value = '';
nickname.value = ''; userInfo.value = {};
avatar.value = ''; nickname.value = '';
roles.value = []; avatar.value = '';
perms.value = []; roles.value = [];
perms.value = [];
resetRouter();
resolve();
});
} }
return { return {
token, token,

2
src/types/auto-imports.d.ts

@ -6,6 +6,7 @@ declare global {
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification'] const ElNotification: typeof import('element-plus/es')['ElNotification']
const NEllipsis: typeof import('naive-ui')['NEllipsis']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('vue')['computed'] const computed: typeof import('vue')['computed']
@ -276,6 +277,7 @@ declare module 'vue' {
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']> 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 asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']> readonly computed: UnwrapRef<typeof import('vue')['computed']>

11
src/utils/request.ts

@ -8,7 +8,7 @@
*/ */
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios'; import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { useUserStoreHook } from '@/store/modules/user'; import { useUserStoreHook } from '@/store/modules/user';
import { getUrlRouter } from '@/utils/index'; // import { getUrlRouter } from '@/utils/index';
import { useDateFormat } from '@vueuse/core'; import { useDateFormat } from '@vueuse/core';
// 创建 axios 实例 // 创建 axios 实例
@ -48,11 +48,10 @@ service.interceptors.response.use(
confirmButtonText: '确定', confirmButtonText: '确定',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
localStorage.clear(); const userStore = useUserStoreHook();
sessionStorage.clear(); userStore.resetToken().then(() => {
if (getUrlRouter()[0] != 'login') { location.reload();
window.location.href = '/'; });
}
}); });
} else if (code === 500) { } else if (code === 500) {
ElMessage({ message: msg || '未知错误', type: 'error' }); ElMessage({ message: msg || '未知错误', type: 'error' });

4
src/utils/socket.ts

@ -7,8 +7,8 @@
* Description:websocket方法封装 * Description:websocket方法封装
*/ */
import type { Action } from 'element-plus'; import type { Action } from 'element-plus';
import { useSessionStorage } from '@vueuse/core';
import mitt from '@/plugins/bus'; import mitt from '@/plugins/bus';
class WebSocketService { class WebSocketService {
url: string; url: string;
websocket: WebSocket | null; websocket: WebSocket | null;
@ -94,6 +94,8 @@ class WebSocketService {
}); });
} }
console.log(response.msg); console.log(response.msg);
} else if (response.code === 'notice') {
mitt.emit('noticeMessage', response);
} }
} }
} }

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

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

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

@ -1,9 +1,6 @@
<!-- 线 + 柱混合图 --> <!-- 线 + 柱混合图 -->
<template> <template>
<el-card> <div :id="id" :class="className" :style="{ height, width }" />
<template #header> 一网温度 </template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -58,7 +55,8 @@ const options = {
['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'],
['进温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55], ['进温', 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], ['回温', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20],
['均温', 52, 77, 75, 70.1, 53.4, 50, 40] ['进温均温', 52, 77, 75, 70.1, 53.4, 50, 40],
['回温均温', 40, 52, 61, 49, 20.4, 61.8, 10]
] ]
}, },
xAxis: { xAxis: {
@ -115,6 +113,14 @@ const options = {
focus: 'series' focus: 'series'
} }
}, },
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: {
focus: 'series'
}
},
{ {
type: 'line', type: 'line',
smooth: true, smooth: true,

13
src/views/dashboard/index.scss

@ -11,9 +11,9 @@
margin-right: 10px; margin-right: 10px;
} }
.info { .info {
.name{ .name {
font-size: 1.4rem; font-size: 1.4rem;
span{ span {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
@ -57,7 +57,7 @@
} }
span { span {
font-size: 28px; font-size: 28px;
i{ i {
font-style: normal; font-style: normal;
} }
} }
@ -84,9 +84,10 @@
// } // }
// } // }
} }
.statistics{ .statistics {
:deep(.el-card){ margin-bottom: 15px;
.el-card__header{ :deep(.el-card) {
.el-card__header {
font-size: 1.4rem; font-size: 1.4rem;
} }
} }

71
src/views/dashboard/index.vue

@ -62,13 +62,22 @@
<section class="statistics"> <section class="statistics">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<LineChart id="lineChart" height="300px" width="100%" /> <el-card>
<template #header> 一网温度 </template>
<LineChart id="lineChart" height="300px" width="100%" />
</el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<BarChart id="barChart" height="300px" width="100%" /> <el-card>
<template #header> 一网进温排行 </template>
<BarChart id="barChart" height="300px" width="100%" />
</el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<PieChart id="pieChart" height="300px" width="100%" /> <el-card>
<template #header> 一网回温排行 </template>
<BarChart id="barCharts" height="300px" width="100%" />
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</section> </section>
@ -98,7 +107,7 @@ const isCurrentRoute = ref(true);
const userStore = useUserStore(); const userStore = useUserStore();
const duration = 5000; const duration = 5000;
const userNumber = ref(2800); const userNumber = ref(2800);
const notice = ref({}); // const notice = ref({});
// const vsitsNumber = transitionNum(720, 5000); // const vsitsNumber = transitionNum(720, 5000);
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
const hoursNow = useNow().value.getHours(); const hoursNow = useNow().value.getHours();
@ -122,7 +131,7 @@ interface CardData {
const cardData: CardData[] = [ const cardData: CardData[] = [
{ {
id: '1', id: '1',
title: '供热面积', title: '正在报警数量/报警总数量',
value: 50000, value: 50000,
time: 5000, time: 5000,
colors: ['#ec4786', '#b955a4'], colors: ['#ec4786', '#b955a4'],
@ -131,7 +140,7 @@ const cardData: CardData[] = [
}, },
{ {
id: '2', id: '2',
title: '产热量', title: '产热量',
value: 200, value: 200,
time: 5000, time: 5000,
colors: ['#865ec0', '#5144b4'], colors: ['#865ec0', '#5144b4'],
@ -177,32 +186,32 @@ const timePeriod = computed(() => {
onMounted(() => { onMounted(() => {
getWeatherData(); getWeatherData();
// socket.initialize(wsUrl); // socket.initialize(wsUrl);
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 = {
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() { function getWeatherData() {
// //
getWeather().then((res: any) => { getWeather().then((res: any) => {

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

@ -1067,15 +1067,15 @@ onMounted(() => {
}); });
watchEffect(() => { watchEffect(() => {
const dataStr = counterStore.orgStr; const dataStr = counterStore.orgStr;
if (dataStr.uuid != '') { if (dataStr.assetCode != '') {
deviceUuid.value = dataStr.uuid; deviceUuid.value = dataStr.assetCode;
getDeviceInfo(); getDeviceInfo();
} }
}); });
function getDeviceInfo() { function getDeviceInfo() {
//线 //线
const params = { const params = {
deviceUuid: deviceUuid.value assetCode: deviceUuid.value
}; };
getPressChart(params).then((res: any) => { getPressChart(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
@ -1096,7 +1096,7 @@ const debounceClick = debounce(() => {
function getDevicePolling() { function getDevicePolling() {
//线 //线
const params = { const params = {
deviceUuid: deviceUuid.value assetCode: deviceUuid.value
}; };
getPressChartPolling(params).then((res: any) => { getPressChartPolling(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {

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

@ -561,15 +561,15 @@ onMounted(() => {
}); });
watchEffect(() => { watchEffect(() => {
const dataStr = counterStore.orgStr; const dataStr = counterStore.orgStr;
if (dataStr.uuid != '') { if (dataStr.assetCode != '') {
deviceUuid.value = dataStr.uuid; deviceUuid.value = dataStr.assetCode;
getDeviceInfo(); getDeviceInfo();
} }
}); });
function getDeviceInfo() { function getDeviceInfo() {
//线 //线
const params = { const params = {
deviceUuid: deviceUuid.value assetCode: deviceUuid.value
}; };
getTempChart(params).then((res: any) => { getTempChart(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
@ -590,7 +590,7 @@ const debounceClick = debounce(() => {
function getDevicePolling() { function getDevicePolling() {
//线 //线
const params = { const params = {
deviceUuid: deviceUuid.value assetCode: deviceUuid.value
}; };
getTempChartPolling(params).then((res: any) => { getTempChartPolling(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {

16
src/views/data-visual/components/table.vue

@ -22,17 +22,17 @@
show-overflow show-overflow
@cell-dblclick="cellDBLClickEvent" @cell-dblclick="cellDBLClickEvent"
> >
<template #deviceuuid_default="{ row }"> <template #assetInfo_default="{ row }">
<div class="title"> <div class="title">
<svg-icon <svg-icon
icon-class="warning_lights" icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: green" style="fill: currentColor; width: 15px; height: 15px; color: green"
v-if="row.deviceuuid.deviceStatus === 0" v-if="row.assetInfo.assetStatus === '0'"
/> />
<svg-icon <svg-icon
icon-class="warning_lights" icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: red" style="fill: currentColor; width: 15px; height: 15px; color: red"
v-if="row.deviceuuid.deviceStatus === 2" v-if="row.assetInfo.assetStatus === '2'"
/> />
</div> </div>
</template> </template>
@ -162,18 +162,18 @@ function tableDatas() {
// tableData.value=oldData // tableData.value=oldData
tableData.value = res.rows; tableData.value = res.rows;
if (res.rows.length != 0) { if (res.rows.length != 0) {
counterStore.orgStore(res.rows[0].deviceuuid); counterStore.orgStore(res.rows[0].assetInfo);
} else { } else {
counterStore.orgStore({ counterStore.orgStore({
title: '', title: '',
uuid: '' assetCode: ''
}); });
} }
tableStoreCounter.tableDataAction(res.rows); tableStoreCounter.tableDataAction(res.rows);
tablePage.total = res.total; tablePage.total = res.total;
// gridOptions.data = res.data; // gridOptions.data = res.data;
loadingShow.value = false; loadingShow.value = false;
tableDataClick(); // tableDataClick();
// console.log(':', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); // console.log(':', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
} }
}); });
@ -208,7 +208,7 @@ function tableDataPolling() {
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => { const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => {
// //
console.log('cellData--', row, column); console.log('cellData--', row, column);
counterStore.orgStore(row.deviceuuid); counterStore.orgStore(row.assetInfo);
}; };
const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => { const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
// //
@ -222,7 +222,7 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
}; };
function urvesClick(row: any) { function urvesClick(row: any) {
//线 //线
counterStore.orgStore(row.deviceuuid); counterStore.orgStore(row.assetInfo);
} }
onUnmounted(() => { onUnmounted(() => {

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;

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

@ -36,19 +36,19 @@
show-overflow show-overflow
@cell-dblclick="cellDBLClickEvent" @cell-dblclick="cellDBLClickEvent"
> >
<template #deviceuuid_default="{ row }"> <template #assetInfo_default="{ row }">
<div class="title"> <div class="title">
<svg-icon <svg-icon
icon-class="warning_lights" icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: green" style="fill: currentColor; width: 15px; height: 15px; color: green"
v-if="row.deviceuuid.deviceStatus === 0" v-if="row.assetInfo.assetStatus === '0'"
/> />
<svg-icon <svg-icon
icon-class="warning_lights" icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: red" style="fill: currentColor; width: 15px; height: 15px; color: red"
v-if="row.deviceuuid.deviceStatus === 2" v-if="row.assetInfo.assetStatus === '2'"
/> />
<span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span> <span class="name" @click.native="nameClick(row.assetInfo)">{{ row.gTitle }}</span>
</div> </div>
</template> </template>
<template #pager> <template #pager>
@ -211,7 +211,7 @@ 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']);
@ -259,12 +259,12 @@ onMounted(() => {
// stationInfo(); // stationInfo();
// tableHeader(); // 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')); // console.log('aaaa', sessionStorage.getItem('currentPage'));
tablePage.currentPage = tablePage.currentPage =
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