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