From 2b2cd8357357685ef8bca6a29db2e0ecefbc9567 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期四, 23 四月 2026 09:06:45 +0800
Subject: [PATCH] Merge branch 'dev_河南_鹤壁天沐玻璃厂' of http://114.132.189.42:9002/r/product-inventory-management into dev_河南_鹤壁天沐玻璃厂
---
src/views/reportAnalysis/dataDashboard/index.vue | 525 +++++++++++++++++++++++++++++----------------------------
1 files changed, 269 insertions(+), 256 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index 67a700f..61f8959 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -1,291 +1,304 @@
<template>
<div class="scale-container">
- <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
- <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
- <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず'">
- <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
- </svg>
- <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
- </svg>
- </button>
-
- <!-- 椤堕儴鏍囬鏍� -->
- <div class="dashboard-header">
- <div class="factory-name">鍩虹鏁版嵁</div>
- </div>
-
- <!-- 涓昏鍐呭鍖哄煙 -->
- <div class="dashboard-content">
- <!-- 宸︿晶鍖哄煙 -->
- <div class="left-panel">
- <LeftTop />
-
- <LeftBottom />
- </div>
-
- <!-- 涓棿鍖哄煙 -->
- <div class="center-panel">
- <CenterTop />
-
- <CenterBottom />
- </div>
-
- <!-- 鍙充晶鍖哄煙 -->
- <div class="right-panel">
- <RightTop />
-
- <RightBottom />
- </div>
- </div>
+ <div class="data-dashboard"
+ :style="{ transform: `scale(${scaleRatio})` }">
+ <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
+ <button class="fullscreen-btn"
+ @click="toggleFullscreen"
+ :title="isFullscreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず'">
+ <svg v-if="!isFullscreen"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2">
+ <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+ </svg>
+ <svg v-else
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2">
+ <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+ </svg>
+ </button>
+ <!-- 椤堕儴鏍囬鏍� -->
+ <div class="dashboard-header">
+ <div class="factory-name">鍩虹鏁版嵁</div>
+ </div>
+ <!-- 涓昏鍐呭鍖哄煙 -->
+ <div class="dashboard-content">
+ <!-- 宸︿晶鍖哄煙 -->
+ <div class="left-panel">
+ <LeftTop />
+ <LeftBottom />
+ </div>
+ <!-- 涓棿鍖哄煙 -->
+ <div class="center-panel">
+ <CenterTop />
+ <!-- <CenterBottom /> -->
+ </div>
+ <!-- 鍙充晶鍖哄煙 -->
+ <div class="right-panel">
+ <RightTop />
+ <RightBottom />
+ </div>
+ </div>
</div>
</div>
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import autofit from 'autofit.js'
-import LeftTop from './components/basic/left-top.vue'
-import LeftBottom from './components/basic/left-bottom.vue'
-import CenterTop from './components/basic/center-top.vue'
-import CenterBottom from './components/basic/center-bottom.vue'
-import RightTop from './components/basic/right-top.vue'
-import RightBottom from './components/basic/right-bottom.vue'
-import useUserStore from '@/store/modules/user'
+ import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+ import autofit from "autofit.js";
+ import LeftTop from "./components/basic/left-top.vue";
+ import LeftBottom from "./components/basic/left-bottom.vue";
+ import CenterTop from "./components/basic/center-top.vue";
+ import CenterBottom from "./components/basic/center-bottom.vue";
+ import RightTop from "./components/basic/right-top.vue";
+ import RightBottom from "./components/basic/right-bottom.vue";
+ import useUserStore from "@/store/modules/user";
-// 鍏ㄥ睆鐩稿叧鐘舵��
-const isFullscreen = ref(false);
+ // 鍏ㄥ睆鐩稿叧鐘舵��
+ const isFullscreen = ref(false);
-// 缂╂斁姣斾緥
-const scaleRatio = ref(1)
-// 璁捐灏哄锛堝熀鍑嗗昂瀵革級- 鏍规嵁瀹為檯璁捐绋胯皟鏁�
-const designWidth = 1920
-const designHeight = 1080
+ // 缂╂斁姣斾緥
+ const scaleRatio = ref(1);
+ // 璁捐灏哄锛堝熀鍑嗗昂瀵革級- 鏍规嵁瀹為檯璁捐绋胯皟鏁�
+ const designWidth = 1920;
+ const designHeight = 1080;
-// 鐢ㄦ埛store
-const userStore = useUserStore()
+ // 鐢ㄦ埛store
+ const userStore = useUserStore();
-// 璁＄畻缂╂斁姣斾緥
-const calculateScale = () => {
- const container = document.querySelector('.scale-container')
- if (!container) return
+ // 璁＄畻缂╂斁姣斾緥
+ const calculateScale = () => {
+ const container = document.querySelector(".scale-container");
+ if (!container) return;
- // 鑾峰彇瀹瑰櫒鐨勫疄闄呭昂瀵�
- const rect = container.getBoundingClientRect?.()
- const containerWidth = container.clientWidth || rect?.width || window.innerWidth
- const containerHeight = container.clientHeight || rect?.height || window.innerHeight
+ // 鑾峰彇瀹瑰櫒鐨勫疄闄呭昂瀵�
+ const rect = container.getBoundingClientRect?.();
+ const containerWidth =
+ container.clientWidth || rect?.width || window.innerWidth;
+ const containerHeight =
+ container.clientHeight || rect?.height || window.innerHeight;
- // 璁＄畻瀹介珮缂╂斁姣斾緥锛屽彇杈冨皬鍊间互淇濊瘉鍐呭瀹屾暣鏄剧ず锛堢瓑姣旂缉鏀撅級
- const scaleX = containerWidth / designWidth
- const scaleY = containerHeight / designHeight
- scaleRatio.value = Math.min(scaleX, scaleY)
-}
+ // 璁＄畻瀹介珮缂╂斁姣斾緥锛屽彇杈冨皬鍊间互淇濊瘉鍐呭瀹屾暣鏄剧ず锛堢瓑姣旂缉鏀撅級
+ const scaleX = containerWidth / designWidth;
+ const scaleY = containerHeight / designHeight;
+ scaleRatio.value = Math.min(scaleX, scaleY);
+ };
-// 绐楀彛澶у皬鍙樺寲澶勭悊
-const handleResize = () => {
- // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
- setTimeout(() => {
- calculateScale()
- }, 100)
-}
+ // 绐楀彛澶у皬鍙樺寲澶勭悊
+ const handleResize = () => {
+ // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
+ setTimeout(() => {
+ calculateScale();
+ }, 100);
+ };
-// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
-const toggleFullscreen = () => {
- const element = document.querySelector('.scale-container')
+ // 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
+ const toggleFullscreen = () => {
+ const element = document.querySelector(".scale-container");
- if (!element) return
+ if (!element) return;
- if (!isFullscreen.value) {
- if (element.requestFullscreen) {
- element.requestFullscreen()
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen()
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen()
+ if (!isFullscreen.value) {
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ }
}
- } else {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
+ };
+
+ // 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
+ const handleFullscreenChange = () => {
+ const fullscreenElement =
+ document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.msFullscreenElement;
+ isFullscreen.value =
+ fullscreenElement &&
+ fullscreenElement.classList.contains("scale-container");
+
+ // 鍏ㄥ睆鐘舵�佸彉鍖栨椂锛屽欢杩熼噸鏂拌绠楃缉鏀炬瘮渚嬶紙纭繚DOM鏇存柊瀹屾垚锛�
+ setTimeout(() => {
+ calculateScale();
+ }, 200);
+ };
+
+ // 鐢熷懡鍛ㄦ湡閽╁瓙
+ onMounted(() => {
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
+ nextTick(() => {
+ // 璁＄畻鍒濆缂╂斁姣斾緥
+ calculateScale();
+ });
+
+ window.addEventListener("resize", handleResize);
+ window.addEventListener("fullscreenchange", handleFullscreenChange);
+ window.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+ window.addEventListener("MSFullscreenChange", handleFullscreenChange);
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener("resize", handleResize);
+ window.removeEventListener("fullscreenchange", handleFullscreenChange);
+ window.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+ window.removeEventListener("MSFullscreenChange", handleFullscreenChange);
+ // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
+ if (window._autofitUpdateHandler) {
+ window.removeEventListener("resize", window._autofitUpdateHandler);
+ delete window._autofitUpdateHandler;
}
- }
-}
-
-// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
-const handleFullscreenChange = () => {
- const fullscreenElement = document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.msFullscreenElement
- isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')
-
- // 鍏ㄥ睆鐘舵�佸彉鍖栨椂锛屽欢杩熼噸鏂拌绠楃缉鏀炬瘮渚嬶紙纭繚DOM鏇存柊瀹屾垚锛�
- setTimeout(() => {
- calculateScale()
- }, 200)
-}
-
-// 鐢熷懡鍛ㄦ湡閽╁瓙
-onMounted(() => {
- // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
- nextTick(() => {
- // 璁＄畻鍒濆缂╂斁姣斾緥
- calculateScale()
- })
-
- window.addEventListener('resize', handleResize)
- window.addEventListener('fullscreenchange', handleFullscreenChange)
- window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
- window.addEventListener('MSFullscreenChange', handleFullscreenChange)
-})
-
-onBeforeUnmount(() => {
- window.removeEventListener('resize', handleResize)
- window.removeEventListener('fullscreenchange', handleFullscreenChange)
- window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
- window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
- // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
- if (window._autofitUpdateHandler) {
- window.removeEventListener('resize', window._autofitUpdateHandler)
- delete window._autofitUpdateHandler
- }
- // 鍏抽棴autofit
- autofit.off()
-})
+ // 鍏抽棴autofit
+ autofit.off();
+ });
</script>
<style scoped>
-/* 澶栭儴缂╂斁瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
-.scale-container {
-position: relative;
-width: 100%;
-/* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
-height: calc(100vh - 84px);
-display: flex;
-align-items: center;
-justify-content: center;
-background-color: #000;
-overflow: hidden;
-}
+ /* 澶栭儴缂╂斁瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
+ .scale-container {
+ position: relative;
+ width: 100%;
+ /* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
+ height: calc(100vh - 84px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #000;
+ overflow: hidden;
+ }
-/* 鍐呴儴鍐呭鍖哄煙 - 鍥哄畾璁捐灏哄 */
-.data-dashboard {
-position: relative;
-width: 1920px;
-height: 1080px;
-background-image: url("@/assets/BI/backImage@2x.png");
-background-size: cover;
-background-position: center;
-background-repeat: no-repeat;
-transform-origin: center center;
-}
+ /* 鍐呴儴鍐呭鍖哄煙 - 鍥哄畾璁捐灏哄 */
+ .data-dashboard {
+ position: relative;
+ width: 1920px;
+ height: 1080px;
+ background-image: url("@/assets/BI/backImage@2x.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transform-origin: center center;
+ }
-/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-container */
-.scale-container:fullscreen {
-width: 100vw;
-height: 100vh;
-margin: 0;
-padding: 0;
-background-color: #000;
-z-index: 9999;
-}
+ /* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-container */
+ .scale-container:fullscreen {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ z-index: 9999;
+ }
-/* Webkit娴忚鍣ㄥ墠缂� */
-.scale-container:-webkit-full-screen {
-width: 100vw;
-height: 100vh;
-margin: 0;
-padding: 0;
-background-color: #000;
-z-index: 9999;
-}
+ /* Webkit娴忚鍣ㄥ墠缂� */
+ .scale-container:-webkit-full-screen {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ z-index: 9999;
+ }
-/* MS娴忚鍣ㄥ墠缂� */
-.scale-container:-ms-fullscreen {
-width: 100vw;
-height: 100vh;
-margin: 0;
-padding: 0;
-background-color: #000;
-z-index: 9999;
-}
+ /* MS娴忚鍣ㄥ墠缂� */
+ .scale-container:-ms-fullscreen {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ z-index: 9999;
+ }
+ .dashboard-header {
+ position: relative;
+ z-index: 1;
+ height: 86px;
+ background-image: url("@/assets/BI/biaoti.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
-.dashboard-header {
-position: relative;
-z-index: 1;
-height: 86px;
-background-image: url("@/assets/BI/biaoti.png");
-background-size: cover;
-background-repeat: no-repeat;
-display: flex;
-align-items: center;
-justify-content: center;
-}
+ .factory-name {
+ font-weight: 600;
+ font-size: 52px;
+ color: #ffffff;
+ top: 16px;
+ position: absolute;
+ }
-.factory-name {
-font-weight: 600;
-font-size: 52px;
-color: #FFFFFF;
-top: 16px;
-position: absolute;
-}
+ .fullscreen-btn {
+ position: absolute;
+ top: 10px;
+ left: 20px;
+ width: 40px;
+ height: 40px;
+ background: rgba(0, 20, 60, 0.8);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ border-radius: 6px;
+ color: #00d4ff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
+ z-index: 10000;
+ }
-.fullscreen-btn {
-position: absolute;
-top: 10px;
-left: 20px;
-width: 40px;
-height: 40px;
-background: rgba(0, 20, 60, 0.8);
-border: 1px solid rgba(0, 212, 255, 0.3);
-border-radius: 6px;
-color: #00d4ff;
-cursor: pointer;
-display: flex;
-align-items: center;
-justify-content: center;
-transition: all 0.3s;
-z-index: 10000;
-}
+ .fullscreen-btn:hover {
+ background: rgba(0, 30, 90, 0.9);
+ border-color: rgba(0, 212, 255, 0.5);
+ }
-.fullscreen-btn:hover {
-background: rgba(0, 30, 90, 0.9);
-border-color: rgba(0, 212, 255, 0.5);
-}
+ .dashboard-content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ gap: 30px;
+ padding: 0 30px;
+ height: calc(100% - 86px);
+ overflow: hidden;
+ }
-.dashboard-content {
-position: relative;
-z-index: 1;
-display: flex;
-gap: 30px;
-padding: 0 30px;
-height: calc(100% - 86px);
-overflow: hidden;
-}
+ /* 纭繚鍚勯潰鏉胯兘澶熸纭樉绀� */
+ .left-panel,
+ .center-panel,
+ .right-panel {
+ overflow: hidden;
+ }
-/* 纭繚鍚勯潰鏉胯兘澶熸纭樉绀� */
-.left-panel, .center-panel, .right-panel {
-overflow: hidden;
-}
+ .left-panel,
+ .right-panel {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 520px;
+ }
-.left-panel,
-.right-panel {
-flex: 1;
-display: flex;
-flex-direction: column;
-gap: 24px;
-width: 520px;
-}
-
-.center-panel {
-flex: 1.5;
-display: flex;
-flex-direction: column;
-gap: 20px;
-}
-
+ .center-panel {
+ flex: 1.5;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3