OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat:仪表盘自适应取消

Browse Source
This commit is contained in:
zhongzm
2025-09-12 14:42:22 +08:00
parent c7dd92d3b3
commit 6bbd5d723e
1 changed files with 139 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/views/dashboard/overview/index.vue
View File

@@ -38,42 +38,42 @@ const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
const viewportDom = ref<HTMLElement | null>(null);
// 定义 resize 处理函数，确保能正确移除事件监听器
const handleResize = () => {
setTimeout(calculateScale, 100);
};
// 计算缩放比例的函数
const calculateScale = () => {
const container = document.querySelector('.dashboard-container') as HTMLElement;
const wrapper = document.querySelector('.dashboard-wrapper') as HTMLElement;
if (!container || !wrapper) return;
const containerWidth = 1400; // 设计宽度
const containerHeight = 900; // 设计高度
// 获取可用空间（减去padding）
const availableWidth = wrapper.clientWidth - 40;
const availableHeight = wrapper.clientHeight - 40;
// 计算缩放比例
const scaleX = availableWidth / containerWidth;
const scaleY = availableHeight / containerHeight;
// 选择较小的比例，确保内容完全可见
const scale = Math.min(scaleX, scaleY);
container.style.transform = `scale(${scale})`;
container.style.transformOrigin = 'center center';
};
// const viewportDom = ref<HTMLElement | null>(null);
//
// // 定义 resize 处理函数，确保能正确移除事件监听器
// const handleResize = () => {
// setTimeout(calculateScale, 100);
// };
//
//
//
//
//
// // 计算缩放比例的函数
// const calculateScale = () => {
// const container = document.querySelector('.dashboard-container') as HTMLElement;
// const wrapper = document.querySelector('.dashboard-wrapper') as HTMLElement;
//
// if (!container || !wrapper) return;
//
// const containerWidth = 1400; // 设计宽度
// const containerHeight = 900; // 设计高度
//
// // 获取可用空间（减去padding）
// const availableWidth = wrapper.clientWidth - 40;
// const availableHeight = wrapper.clientHeight - 40;
//
// // 计算缩放比例
// const scaleX = availableWidth / containerWidth;
// const scaleY = availableHeight / containerHeight;
//
// // 选择较小的比例，确保内容完全可见
// const scale = Math.min(scaleX, scaleY);
//
//
// container.style.transform = `scale(${scale})`;
// container.style.transformOrigin = 'center center';
// };
/**概览状态类型 */
type SkimStateType = {
@@ -114,6 +114,7 @@ let skimState: SkimStateType = reactive({
let neCascaderOptions = ref<Record<string, any>[]>([]);
/**总览节点 */
const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);
let initFlag = false;
@@ -357,22 +358,23 @@ const getPopupContainer = () => {
// 使用 ref 或其他方式来引用你的 views 容器
// 如果 views 容器直接在这个组件内部，你可以使用 ref
// 但在这个例子中，我们假设它是通过类名来获取的
return document.querySelector('.dashboard-wrapper');
// return document.querySelector('.dashboard-wrapper');
return document.querySelector('.viewport');
};
onMounted(() => {
// 使用自定义缩放方案
nextTick(() => {
// 确保DOM完全渲染
setTimeout(() => {
calculateScale();
}, 100);
// 监听窗口大小变化
window.addEventListener('resize', handleResize);
});
// // 使用自定义缩放方案
// nextTick(() => {
// // 确保DOM完全渲染
// setTimeout(() => {
// calculateScale();
// }, 100);
//
// // 监听窗口大小变化
// window.addEventListener('resize', handleResize);
// });
neInfoStore
.fnNelist()
@@ -467,14 +469,14 @@ onBeforeUnmount(() => {
clearInterval(interval5s.value);
interval5s.value = null;
initFlag = false;
// 清理事件监听和样式
window.removeEventListener('resize', handleResize);
// // 清理事件监听和样式
// window.removeEventListener('resize', handleResize);
});
</script>
<template>
<div class="dashboard-wrapper">
<div class="dashboard-container">
<!-- <div class="dashboard-wrapper">-->
<!-- <div class="dashboard-container">-->
<div class="viewport" ref="viewportDom">
<div class="brand">
<div
@@ -700,14 +702,41 @@ onBeforeUnmount(() => {
</div>
<!-- 用户行为 -->
<!-- <div class="userActivity panel">-->
<!-- <div class="inner">-->
<!-- <h3>-->
<!-- <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;-->
<!-- {{ t('views.dashboard.overview.userActivity.title') }}-->
<!-- </h3>-->
<!-- <div class="chart">-->
<!-- <UserActivity />-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="userActivity panel">
<div class="inner">
<h3>
<WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.userActivity.title') }}
<h3 style="display: flex; align-items: center">
<DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.resources.title') }}：
<a-dropdown
:trigger="['click']"
:get-Popup-Container="getPopupContainer"
>
<div class="toDeep-text">
{{ graphNodeClickID }}
<DownOutlined style="margin-left: 12px; font-size: 12px" />
</div>
<template #overlay>
<a-menu @click="fnSelectNeRe">
<a-menu-item v-for="v in onlineOtions" :key="v.value">
{{ v.label }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</h3>
<div class="chart">
<UserActivity />
<NeResources />
</div>
</div>
</div>
@@ -833,65 +862,66 @@ onBeforeUnmount(() => {
</div>
</div>
</div>
<!-- 资源情况 -->
<div class="resources panel">
<div class="inner">
<h3 style="display: flex; align-items: center">
<DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.resources.title') }}：
<a-dropdown
:trigger="['click']"
:get-Popup-Container="getPopupContainer"
>
<div class="toDeep-text">
{{ graphNodeClickID }}
<DownOutlined style="margin-left: 12px; font-size: 12px" />
</div>
<template #overlay>
<a-menu @click="fnSelectNeRe">
<a-menu-item v-for="v in onlineOtions" :key="v.value">
{{ v.label }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</h3>
<div class="chart">
<NeResources />
</div>
</div>
</div>
<!-- &lt;!&ndash; 资源情况 &ndash;&gt;-->
<!-- <div class="resources panel">-->
<!-- <div class="inner">-->
<!-- <h3 style="display: flex; align-items: center">-->
<!-- <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;-->
<!-- {{ t('views.dashboard.overview.resources.title') }}：-->
<!-- <a-dropdown-->
<!-- :trigger="['click']"-->
<!-- :get-Popup-Container="getPopupContainer"-->
<!-- >-->
<!-- <div class="toDeep-text">-->
<!-- {{ graphNodeClickID }}-->
<!-- <DownOutlined style="margin-left: 12px; font-size: 12px" />-->
<!-- </div>-->
<!-- <template #overlay>-->
<!-- <a-menu @click="fnSelectNeRe">-->
<!-- <a-menu-item v-for="v in onlineOtions" :key="v.value">-->
<!-- {{ v.label }}-->
<!-- </a-menu-item>-->
<!-- </a-menu>-->
<!-- </template>-->
<!-- </a-dropdown>-->
<!-- </h3>-->
<!-- <div class="chart">-->
<!-- <NeResources />-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</template><style lang="less" scoped>
<!-- </div>-->
<!-- </div>-->
</template>
<style lang="less" scoped>
@import url('./css/index.css');
/* Dashboard 页面专用包装器，不影响其他页面 */
.dashboard-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0b1023;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow: hidden;
box-sizing: border-box;
}
.dashboard-container {
width: 1400px;
height: 900px;
background: #0b1023;
position: relative;
overflow: visible;
flex-shrink: 0;
}
//.dashboard-wrapper {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background: #0b1023;
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 20px;
// overflow: hidden;
// box-sizing: border-box;
//}
//
//.dashboard-container {
// width: 1400px;
// height: 900px;
// background: #0b1023;
// position: relative;
// overflow: visible;
// flex-shrink: 0;
//}
.toDeep {
--editor-background-color: blue;