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 ++++++++++++-----------
src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue | 790 ++++++++++++++++++-----------------
2 files changed, 670 insertions(+), 645 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue
index 950038e..113ee12 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue
@@ -1,8 +1,8 @@
<template>
- <div>
+ <div class="center-top-container">
<!-- 椤堕儴缁熻鍗＄墖 -->
<div class="stats-cards">
- <div class="stat-card">
+ <!-- <div class="stat-card">
<img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
<div class="card-content">
<span class="card-label">鍛樺伐鎬绘暟</span>
@@ -13,13 +13,16 @@
<span class="compare-icon">{{ staffYoY >= 0 ? '鈫�' : '鈫�' }}</span>
</div>
</div>
- </div>
+ </div> -->
<div class="stat-card">
- <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <img src="@/assets/BI/icon@2x.png"
+ alt="鍥炬爣"
+ class="card-icon" />
<div class="card-content">
<span class="card-label">瀹㈡埛鎬绘暟</span>
<span class="card-value">{{ totalCustomers }}</span>
- <div class="card-compare" :class="compareClass(customersYoY)">
+ <div class="card-compare"
+ :class="compareClass(customersYoY)">
<span>鍚屾瘮</span>
<span class="compare-value">{{ formatPercent(customersYoY) }}</span>
<span class="compare-icon">{{ customersYoY >= 0 ? '鈫�' : '鈫�' }}</span>
@@ -27,11 +30,14 @@
</div>
</div>
<div class="stat-card">
- <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <img src="@/assets/BI/icon@2x.png"
+ alt="鍥炬爣"
+ class="card-icon" />
<div class="card-content">
<span class="card-label">渚涘簲鍟嗘�绘暟</span>
<span class="card-value">{{ totalSuppliers }}</span>
- <div class="card-compare" :class="compareClass(suppliersYoY)">
+ <div class="card-compare"
+ :class="compareClass(suppliersYoY)">
<span>鍚屾瘮</span>
<span class="compare-value">{{ formatPercent(suppliersYoY) }}</span>
<span class="compare-icon">{{ suppliersYoY >= 0 ? '鈫�' : '鈫�' }}</span>
@@ -39,15 +45,12 @@
</div>
</div>
</div>
-
<!-- 璁惧缁熻 -->
<div class="equipment-stats">
<div class="equipment-header">
- <img
- src="@/assets/BI/shujutongjiicon@2x.png"
- alt="鍥炬爣"
- class="equipment-icon"
- />
+ <img src="@/assets/BI/shujutongjiicon@2x.png"
+ alt="鍥炬爣"
+ class="equipment-icon" />
<span class="equipment-title">璁惧缁熻</span>
</div>
<div class="equipment-items">
@@ -69,453 +72,462 @@
</div>
</div>
</div>
-
<!-- 浜嬩欢鍚嶇О -->
<div class="event-info">
<div class="event-header">
- <img
- src="@/assets/BI/shijianmingxiicon@2x.png"
- alt="鍥炬爣"
- class="event-icon"
- />
+ <img src="@/assets/BI/shijianmingxiicon@2x.png"
+ alt="鍥炬爣"
+ class="event-icon" />
<span class="event-title">浜嬩欢鍚嶇О</span>
</div>
<div class="event-content">
- <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList">
- <li v-for="item in todoList" :key="item.id">
- <div
- style="
+ <ul class="todo-list"
+ v-if="todoList.length > 0"
+ ref="refTodoList">
+ <li v-for="item in todoList"
+ :key="item.id">
+ <div style="
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
gap: 20px;
- "
- >
- <div class="todo-division">寰呭姙浜嬬敱锛歿{ item.approveReason }}</div>
- <div style="display: flex;justify-content: space-between;align-items: center;"
- >
+ ">
+ <div class="todo-division">寰呭姙浜嬬敱锛歿{ item.approveReason }}</div>
+ <div style="display: flex;justify-content: space-between;align-items: center;">
<div class="todo-title">鐢宠绫诲瀷锛歿{ item.approveTypeName }}</div>
<div class="todo-division">鐢宠閮ㄩ棬锛歿{ item.approveDeptName }}</div>
<div class="todo-time">{{ item.approveTime }}</div>
</div>
-
</div>
</li>
</ul>
- <div v-else style="text-align: center">鏆傛棤鏁版嵁</div>
+ <div v-else
+ style="text-align: center;color:#fff">鏆傛棤鏁版嵁</div>
</div>
</div>
</div>
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import { homeTodos, summaryStatistics } from '@/api/viewIndex.js'
-import { getLedgerPage } from '@/api/equipmentManagement/ledger.js'
-import { getRepairPage } from '@/api/equipmentManagement/repair.js'
-import { getUpkeepPage } from '@/api/equipmentManagement/upkeep.js'
-import { measuringInstrumentListPage } from '@/api/equipmentManagement/measurementEquipment.js'
+ import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+ import { homeTodos, summaryStatistics } from "@/api/viewIndex.js";
+ import { getLedgerPage } from "@/api/equipmentManagement/ledger.js";
+ import { getRepairPage } from "@/api/equipmentManagement/repair.js";
+ import { getUpkeepPage } from "@/api/equipmentManagement/upkeep.js";
+ import { measuringInstrumentListPage } from "@/api/equipmentManagement/measurementEquipment.js";
-// 缁熻鏁版嵁
-const totalStaff = ref(0)
-const totalCustomers = ref(0)
-const totalSuppliers = ref(0)
-// 鍚屾瘮
-const staffYoY = ref(0)
-const customersYoY = ref(0)
-const suppliersYoY = ref(0)
-const equipmentNum = ref(0)
-const equipmentRepair = ref(0)
-const equipmentMaintain = ref(0)
-const totalMeasuring = ref(0)
+ // 缁熻鏁版嵁
+ const totalStaff = ref(0);
+ const totalCustomers = ref(0);
+ const totalSuppliers = ref(0);
+ // 鍚屾瘮
+ const staffYoY = ref(0);
+ const customersYoY = ref(0);
+ const suppliersYoY = ref(0);
+ const equipmentNum = ref(0);
+ const equipmentRepair = ref(0);
+ const equipmentMaintain = ref(0);
+ const totalMeasuring = ref(0);
-// 寰呭姙浜嬮」
-const todoList = ref([])
-const refTodoList = ref(null)
+ // 寰呭姙浜嬮」
+ const todoList = ref([]);
+ const refTodoList = ref(null);
-const formatPercent = (val) => {
- const num = Number(val) || 0
- return `${Math.abs(num).toFixed(2)}%`
-}
+ const formatPercent = val => {
+ const num = Number(val) || 0;
+ return `${Math.abs(num).toFixed(2)}%`;
+ };
-const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
+ const compareClass = val => (val >= 0 ? "compare-up" : "compare-down");
-// 鑾峰彇鍛樺伐銆佸鎴枫�佷緵搴斿晢鏁伴噺
-const getNum = () => {
- summaryStatistics().then((res) => {
- totalStaff.value = res.data.totalStaff
- staffYoY.value = res.data.staffGrowthRate
- totalCustomers.value = res.data.totalCustomer
- customersYoY.value = res.data.customerGrowthRate
- totalSuppliers.value = res.data.totalSupplier
- suppliersYoY.value = res.data.supplierGrowthRate
- }).catch(err => {
- console.error('鑾峰彇鍩虹缁熻鏁版嵁澶辫触:', err)
- })
-}
+ // 鑾峰彇鍛樺伐銆佸鎴枫�佷緵搴斿晢鏁伴噺
+ const getNum = () => {
+ summaryStatistics()
+ .then(res => {
+ totalStaff.value = res.data.totalStaff;
+ staffYoY.value = res.data.staffGrowthRate;
+ totalCustomers.value = res.data.totalCustomer;
+ customersYoY.value = res.data.customerGrowthRate;
+ totalSuppliers.value = res.data.totalSupplier;
+ suppliersYoY.value = res.data.supplierGrowthRate;
+ })
+ .catch(err => {
+ console.error("鑾峰彇鍩虹缁熻鏁版嵁澶辫触:", err);
+ });
+ };
-// 鑾峰彇璁惧鐩稿叧鏁伴噺
-const getLedgerNum = () => {
- const params = {
- pageNum: -1,
- pageSize: -1,
- }
- getLedgerPage(params).then((res) => {
- equipmentNum.value = res.data.total
- })
- getRepairPage({ ...params, status: 0 }).then((res) => {
- equipmentRepair.value = res.data.total
- })
- getUpkeepPage({ ...params, status: 0 }).then((res) => {
- equipmentMaintain.value = res.data.total
- })
- measuringInstrumentListPage(params).then((res) => {
- totalMeasuring.value = res.data.total
- })
-}
+ // 鑾峰彇璁惧鐩稿叧鏁伴噺
+ const getLedgerNum = () => {
+ const params = {
+ pageNum: -1,
+ pageSize: -1,
+ };
+ getLedgerPage(params).then(res => {
+ equipmentNum.value = res.data.total;
+ });
+ getRepairPage({ ...params, status: 0 }).then(res => {
+ equipmentRepair.value = res.data.total;
+ });
+ getUpkeepPage({ ...params, status: 0 }).then(res => {
+ equipmentMaintain.value = res.data.total;
+ });
+ measuringInstrumentListPage(params).then(res => {
+ totalMeasuring.value = res.data.total;
+ });
+ };
-// 鍒濆鍖栧緟鍔炰簨椤瑰垪琛ㄦ粴鍔ㄥ姛鑳�
-const initTodoListScroll = () => {
- const todoListEl = refTodoList.value
- // 寮哄埗鍚敤婊氬姩锛屼笉妫�鏌ヤ换浣曟潯浠�
- if (todoListEl) {
- // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
- const scrollItems = Array.from(todoListEl.querySelectorAll('li'))
- if (scrollItems.length > 0) {
- // 纭繚鏈夎冻澶熺殑椤圭洰鐢ㄤ簬婊氬姩
- // 濡傛灉椤圭洰澶皯锛屽澶嶅埗鍑犳浠ョ‘淇濇粴鍔ㄦ晥鏋�
- if (scrollItems.length < 4) {
- const originalItems = [...scrollItems]
- for (let i = 0; i < 4; i++) {
- originalItems.forEach((item) => {
- const clone = item.cloneNode(true)
- todoListEl.appendChild(clone)
- })
- }
- // 閲嶆柊鑾峰彇鎵�鏈夐」鐩�
- scrollItems.push(
- ...Array.from(todoListEl.querySelectorAll('li')).slice(
- scrollItems.length
- )
- )
- }
- const itemHeight = scrollItems[0]?.offsetHeight || 0
- const containerHeight = todoListEl.clientHeight
- const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
-
- // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
- for (let i = 0; i < cloneCount; i++) {
- const clone = scrollItems[i % scrollItems.length].cloneNode(true)
- todoListEl.appendChild(clone)
- }
-
- let scrollPosition = 0
- const scrollSpeed = 1.5 // 澧炲姞婊氬姩閫熷害锛屼娇婊氬姩鏇村姞鏄庢樉
- const pauseTime = 3000 // 婊氬姩鏆傚仠鏃堕棿
- let isPaused = false
- let lastTimestamp = 0
-
- // 杩炵画婊氬姩鍔ㄧ敾鍑芥暟
- function scrollAnimation(timestamp) {
- if (!lastTimestamp) lastTimestamp = timestamp
- const deltaTime = timestamp - lastTimestamp
- lastTimestamp = timestamp
-
- if (!isPaused) {
- scrollPosition += scrollSpeed * (deltaTime / 16) // 鏍囧噯鍖栦负60fps鐨勯�熷害
-
- // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
- const maxScroll = Math.max(
- todoListEl.scrollHeight -
- containerHeight -
- cloneCount * itemHeight,
- itemHeight * scrollItems.length
- )
- if (scrollPosition >= maxScroll) {
- scrollPosition = 0
- todoListEl.scrollTop = 0
- } else {
- todoListEl.scrollTop = scrollPosition
+ // 鍒濆鍖栧緟鍔炰簨椤瑰垪琛ㄦ粴鍔ㄥ姛鑳�
+ const initTodoListScroll = () => {
+ const todoListEl = refTodoList.value;
+ // 寮哄埗鍚敤婊氬姩锛屼笉妫�鏌ヤ换浣曟潯浠�
+ if (todoListEl) {
+ // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
+ const scrollItems = Array.from(todoListEl.querySelectorAll("li"));
+ if (scrollItems.length > 0) {
+ // 纭繚鏈夎冻澶熺殑椤圭洰鐢ㄤ簬婊氬姩
+ // 濡傛灉椤圭洰澶皯锛屽澶嶅埗鍑犳浠ョ‘淇濇粴鍔ㄦ晥鏋�
+ if (scrollItems.length < 4) {
+ const originalItems = [...scrollItems];
+ for (let i = 0; i < 4; i++) {
+ originalItems.forEach(item => {
+ const clone = item.cloneNode(true);
+ todoListEl.appendChild(clone);
+ });
}
+ // 閲嶆柊鑾峰彇鎵�鏈夐」鐩�
+ scrollItems.push(
+ ...Array.from(todoListEl.querySelectorAll("li")).slice(
+ scrollItems.length
+ )
+ );
+ }
+ const itemHeight = scrollItems[0]?.offsetHeight || 0;
+ const containerHeight = todoListEl.clientHeight;
+ const cloneCount = Math.ceil(containerHeight / itemHeight) + 2;
+
+ // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % scrollItems.length].cloneNode(true);
+ todoListEl.appendChild(clone);
}
- todoListEl._animationFrame = requestAnimationFrame(scrollAnimation)
+ let scrollPosition = 0;
+ const scrollSpeed = 1.5; // 澧炲姞婊氬姩閫熷害锛屼娇婊氬姩鏇村姞鏄庢樉
+ const pauseTime = 3000; // 婊氬姩鏆傚仠鏃堕棿
+ let isPaused = false;
+ let lastTimestamp = 0;
+
+ // 杩炵画婊氬姩鍔ㄧ敾鍑芥暟
+ function scrollAnimation(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp;
+ const deltaTime = timestamp - lastTimestamp;
+ lastTimestamp = timestamp;
+
+ if (!isPaused) {
+ scrollPosition += scrollSpeed * (deltaTime / 16); // 鏍囧噯鍖栦负60fps鐨勯�熷害
+
+ // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
+ const maxScroll = Math.max(
+ todoListEl.scrollHeight - containerHeight - cloneCount * itemHeight,
+ itemHeight * scrollItems.length
+ );
+ if (scrollPosition >= maxScroll) {
+ scrollPosition = 0;
+ todoListEl.scrollTop = 0;
+ } else {
+ todoListEl.scrollTop = scrollPosition;
+ }
+ }
+
+ todoListEl._animationFrame = requestAnimationFrame(scrollAnimation);
+ }
+
+ // 鍚姩婊氬姩鍔ㄧ敾
+ todoListEl._animationFrame = requestAnimationFrame(scrollAnimation);
+
+ // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused;
+ }, pauseTime);
+
+ // 娓呯悊瀹氭椂鍣�
+ todoListEl._pauseTimer = pauseTimer;
}
-
- // 鍚姩婊氬姩鍔ㄧ敾
- todoListEl._animationFrame = requestAnimationFrame(scrollAnimation)
-
- // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
- const pauseTimer = setInterval(() => {
- isPaused = !isPaused
- }, pauseTime)
-
- // 娓呯悊瀹氭椂鍣�
- todoListEl._pauseTimer = pauseTimer
}
- }
-}
+ };
-// 寰呭姙浜嬮」
-const todoInfoS = () => {
- homeTodos().then((res) => {
- todoList.value = res.data
- // 鍦ㄨ幏鍙栧埌寰呭姙浜嬮」鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
- nextTick(() => {
- initTodoListScroll()
- })
- })
-}
+ // 寰呭姙浜嬮」
+ const todoInfoS = () => {
+ homeTodos().then(res => {
+ todoList.value = res.data;
+ // 鍦ㄨ幏鍙栧埌寰呭姙浜嬮」鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
+ nextTick(() => {
+ initTodoListScroll();
+ });
+ });
+ };
-onMounted(() => {
- getNum()
- getLedgerNum()
- todoInfoS()
-})
+ onMounted(() => {
+ getNum();
+ getLedgerNum();
+ todoInfoS();
+ });
-onBeforeUnmount(() => {
- // 娓呯悊寰呭姙浜嬮」鍒楄〃鐨勫姩鐢诲拰瀹氭椂鍣�
- const todoListEl = refTodoList.value
- if (todoListEl) {
- if (todoListEl._animationFrame) {
- cancelAnimationFrame(todoListEl._animationFrame)
- todoListEl._animationFrame = null
+ onBeforeUnmount(() => {
+ // 娓呯悊寰呭姙浜嬮」鍒楄〃鐨勫姩鐢诲拰瀹氭椂鍣�
+ const todoListEl = refTodoList.value;
+ if (todoListEl) {
+ if (todoListEl._animationFrame) {
+ cancelAnimationFrame(todoListEl._animationFrame);
+ todoListEl._animationFrame = null;
+ }
+ if (todoListEl._pauseTimer) {
+ clearInterval(todoListEl._pauseTimer);
+ todoListEl._pauseTimer = null;
+ }
}
- if (todoListEl._pauseTimer) {
- clearInterval(todoListEl._pauseTimer)
- todoListEl._pauseTimer = null
- }
- }
-})
+ });
</script>
<style scoped>
-.stats-cards {
- display: flex;
- gap: 30px;
-}
+ .center-top-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
-.stat-card {
- flex: 1;
- display: flex;
- align-items: center;
- background-image: url('@/assets/BI/border@2x.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- height: 142px;
-}
+ .stats-cards {
+ display: flex;
+ gap: 30px;
+ flex-shrink: 0;
+ }
-.card-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
-}
+ .stat-card {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ background-image: url("@/assets/BI/border@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 142px;
+ }
-.card-content {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
+ .card-icon {
+ width: 100px;
+ height: 100px;
+ margin: 20px 20px 0 10px;
+ }
-.card-value {
- font-weight: 500;
- font-size: 40px;
- background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
+ .card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
-.card-label {
- font-weight: 400;
- font-size: 19px;
- color: rgba(208, 231, 255, 0.7);
-}
+ .card-value {
+ font-weight: 500;
+ font-size: 40px;
+ background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
-.card-compare {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 15px;
- color: #d0e7ff;
-}
+ .card-label {
+ font-weight: 400;
+ font-size: 19px;
+ color: rgba(208, 231, 255, 0.7);
+ }
-.card-compare > span:first-child {
- font-size: 13px;
- opacity: 0.8;
-}
+ .card-compare {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 15px;
+ color: #d0e7ff;
+ }
-.compare-value {
- font-weight: 600;
-}
+ .card-compare > span:first-child {
+ font-size: 13px;
+ opacity: 0.8;
+ }
-.compare-icon {
- font-size: 14px;
- position: relative;
- top: -1px; /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
-}
+ .compare-value {
+ font-weight: 600;
+ }
-.compare-up .compare-value,
-.compare-up .compare-icon {
- color: #00c853;
-}
+ .compare-icon {
+ font-size: 14px;
+ position: relative;
+ top: -1px; /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
+ }
-.compare-down .compare-value,
-.compare-down .compare-icon {
- color: #ff5252;
-}
+ .compare-up .compare-value,
+ .compare-up .compare-icon {
+ color: #00c853;
+ }
-.equipment-stats {
- border: 1px solid #1a58b0;
- padding: 18px;
- height: 240px;
- padding-top: 0px;
-}
+ .compare-down .compare-value,
+ .compare-down .compare-icon {
+ color: #ff5252;
+ }
-.equipment-header {
- font-weight: 500;
- font-size: 21px;
- display: flex;
- border-bottom: 1px solid;
- border-image: linear-gradient(
- 270deg,
- rgba(0, 126, 255, 0) 0%,
- rgba(0, 126, 255, 0.4549) 35%,
- #007eff 78%,
- #007eff 100%
- )
- 1;
- padding-bottom: 2px;
-}
+ .equipment-stats {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ padding-top: 0px;
+ flex-shrink: 0;
+ }
-.equipment-title {
- font-weight: 500;
- font-size: 18px;
- background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- line-height: 50px;
-}
+ .equipment-header {
+ font-weight: 500;
+ font-size: 21px;
+ display: flex;
+ border-bottom: 1px solid;
+ border-image: linear-gradient(
+ 270deg,
+ rgba(0, 126, 255, 0) 0%,
+ rgba(0, 126, 255, 0.4549) 35%,
+ #007eff 78%,
+ #007eff 100%
+ )
+ 1;
+ padding-bottom: 2px;
+ }
-.equipment-icon {
- width: 50px;
- height: 50px;
-}
+ .equipment-title {
+ font-weight: 500;
+ font-size: 18px;
+ background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 50px;
+ }
-.equipment-items {
- display: flex;
- justify-content: space-around;
- gap: 30px;
-}
+ .equipment-icon {
+ width: 50px;
+ height: 50px;
+ }
-.equipment-item {
- text-align: center;
-}
+ .equipment-items {
+ display: flex;
+ justify-content: space-around;
+ gap: 30px;
+ }
-.equipment-value {
- display: block;
- font-weight: 500;
- font-size: 40px;
- color: #ffffff;
- width: 120px;
- height: 110px;
- line-height: 110px;
- background-image: url('@/assets/BI/shujutongji@2x.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- margin-bottom: 8px;
-}
+ .equipment-item {
+ text-align: center;
+ }
-.equipment-label {
- font-weight: 500;
- font-size: 16px;
- color: #fffffe;
-}
+ .equipment-value {
+ display: block;
+ font-weight: 500;
+ font-size: 40px;
+ color: #ffffff;
+ width: 120px;
+ height: 110px;
+ line-height: 110px;
+ background-image: url("@/assets/BI/shujutongji@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-bottom: 8px;
+ }
-.event-info {
- background-image: url('@/assets/BI/shijianmingchengbeijing@2x.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- padding: 20px;
- padding-top: 10px;
- height: 186px;
-}
+ .equipment-label {
+ font-weight: 500;
+ font-size: 16px;
+ color: #fffffe;
+ }
-.event-header {
- display: flex;
- align-items: center;
-}
+ .event-info {
+ background-image: url("@/assets/BI/shijianmingchengbeijing@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ padding: 20px;
+ padding-top: 10px;
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
-.event-icon {
- width: 40px;
- height: 40px;
-}
+ .event-header {
+ display: flex;
+ align-items: center;
+ height: 80px;
+ }
-.event-title {
- font-weight: 500;
- font-size: 18px;
- color: #fffffe;
- line-height: 30px;
-}
+ .event-icon {
+ width: 40px;
+ height: 40px;
+ }
-.todo-list {
- list-style: none;
- padding: 0;
- margin: 0;
- height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
- overflow: hidden;
- font-size: 15px;
-}
+ .event-title {
+ font-weight: 500;
+ font-size: 18px;
+ color: #fffffe;
+ line-height: 30px;
+ }
+ .event-content {
+ flex: 1;
+ }
-.todo-list li {
- border-radius: 8px;
- margin-bottom: 12px;
- padding: 12px 40px;
- height: 74px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
+ .todo-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ height: 100%; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
+ overflow: hidden;
+ font-size: 15px;
+ }
-.todo-title {
- font-weight: 400;
- font-size: 16px;
- color: #fffffe;
- position: relative;
-}
+ .todo-list li {
+ border-radius: 8px;
+ margin-bottom: 12px;
+ padding: 12px 40px;
+ height: 74px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .todo-title {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ position: relative;
+ }
+ .todo-division {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ position: relative;
+ }
-.todo-division {
- font-weight: 400;
- font-size: 16px;
- color: #fffffe;
- position: relative;
-}
+ .todo-division::before {
+ content: "";
+ position: absolute;
+ left: -20px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 6px;
+ height: 6px;
+ background: #498ceb;
+ border-radius: 50%;
+ }
-.todo-division::before {
- content: '';
- position: absolute;
- left: -20px;
- top: 50%;
- transform: translateY(-50%);
- width: 6px;
- height: 6px;
- background: #498ceb;
- border-radius: 50%;
-}
-
-.todo-time {
- font-weight: 400;
- font-size: 16px;
- color: #fffffe;
- background: rgba(24, 93, 190, 0.4);
-border-radius: 5px 5px 5px 5px;
-padding: 5px 10px;
-}
+ .todo-time {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ background: rgba(24, 93, 190, 0.4);
+ border-radius: 5px 5px 5px 5px;
+ padding: 5px 10px;
+ }
</style>
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