From d68acecb72087da9584f4a16e9a9d24644090af9 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 15 一月 2026 16:26:50 +0800
Subject: [PATCH] BI大屏优化提交

---
 src/views/reportAnalysis/dataDashboard/index.vue |  296 +++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 188 insertions(+), 108 deletions(-)

diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index 6fe840b..ad01f4b 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="data-dashboard">
+		<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">
@@ -12,6 +13,7 @@
 
       <!-- 椤堕儴鏍囬鏍� -->
       <div class="dashboard-header">
+        <div class="factory-name">{{ userStore.currentFactoryName }}</div>
       </div>
 
       <!-- 涓昏鍐呭鍖哄煙 -->
@@ -53,7 +55,7 @@
 
         <!-- 璐ㄩ噺缁熻 -->
 				<div class="panel-header">
-					<span class="panel-title">璐ㄩ噺缁熻</span>
+					<span class="panel-title">杩�4鏈堣川閲忕粺璁�</span>
 				</div>
 				<div class="main-panel">
 					<div class="panel-item-customers">
@@ -173,13 +175,13 @@
         </div>
 				
 				<div class="financial-header">
-					<span class="financial-title">璐㈠姟鍒嗘瀽</span>
+					<span class="financial-title">鍚勭敓浜ц鍗曠殑瀹屾垚杩涘害缁熻</span>
 				</div>
 				<div class="main-panel">
 					<div class="panel-item-customers">
 						<div class="event-header">
 							<img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />
-							<span class="event-title">缁忚惀鎴愭灉鍒嗘瀽</span>
+							<span class="event-title">缁忚惀鍒嗘瀽</span>
 						</div>
 						<Echarts ref="chart"
 										 :chartStyle="chartStyle"
@@ -190,7 +192,7 @@
 										 :xAxis="xAxis3"
 										 :yAxis="yAxis3"
 										 :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
-										 style="height: 300px"></Echarts>
+										 style="height: 170px"></Echarts>
 					</div>
 				</div>
       </div>
@@ -204,11 +206,11 @@
 				<div class="panel-item-customers">
 					<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
 						<div class="section-title">搴旀敹搴斾粯缁熻</div>
-						<el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">
-							<el-radio-button label="鎸夊懆" :value="1" />
-							<el-radio-button label="鎸夋湀" :value="2" />
-							<el-radio-button label="鎸夊搴�" :value="3" />
-						</el-radio-group>
+<!--						<el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">-->
+<!--							<el-radio-button label="鎸夊懆" :value="1" />-->
+<!--							<el-radio-button label="鎸夋湀" :value="2" />-->
+<!--							<el-radio-button label="鎸夊搴�" :value="3" />-->
+<!--						</el-radio-group>-->
 					</div>
 					<Echarts ref="chart"
 									 :color="barColors2"
@@ -225,7 +227,7 @@
 
         <!-- 鍥炴涓庡紑绁ㄥ垎鏋� -->
          <div class="panel-header">
-					<span class="panel-title">鍥炴涓庡紑绁ㄥ垎鏋�</span>
+					<span class="panel-title">杩戜竴鏈堝洖娆句笌寮�绁ㄥ垎鏋�</span>
 				</div>
         <div class="panel-item-customers" style="padding-top: 60px;">
 					<Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
@@ -233,19 +235,23 @@
 				</div>
       </div>
       </div>
+      </div>
     </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import autofit from 'autofit.js'
 import Echarts from "@/components/Echarts/echarts.vue";
+import useUserStore from '@/store/modules/user'
 import {
 	analysisCustomerContractAmounts, getAmountHalfYear,
 	homeTodos,
 	qualityStatistics,
-	statisticsReceivablePayable
+	statisticsReceivablePayable,
+	getProgressStatistics,
+  	getWorkInProcessTurnover
 } from "@/api/viewIndex.js";
 import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
 import {listCustomer} from "@/api/basicData/customerFile.js";
@@ -258,6 +264,15 @@
 
 // 鍏ㄥ睆鐩稿叧鐘舵��
 const isFullscreen = ref(false);
+
+// 缂╂斁姣斾緥
+const scaleRatio = ref(1)
+// 璁捐灏哄锛堝熀鍑嗗昂瀵革級- 鏍规嵁瀹為檯璁捐绋胯皟鏁�
+const designWidth = 1920
+const designHeight = 1080
+
+// 鐢ㄦ埛store
+const userStore = useUserStore()
 
 // 鍝嶅簲寮忔暟鎹�
 const currentTime = ref('')
@@ -407,82 +422,59 @@
 const barLegend = {
 	show: true,
 	textStyle: { color: '#B8C8E0' },
-	data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+	data: ['鍘熸潗鏂欏悎鏍兼暟', '杩囩▼鍚堟牸鏁�', '鍑轰笉鍚堟牸鏁�']
 }
 const barLegend1 = {
-	show: true,
+	show: false,
 	textStyle: { color: '#B8C8E0' },
-	data: ['鎬绘敹鍏�', '鎬绘敮鍑�', '鍑�鏀跺叆']
+	data: []
 }
 const barSeries11 = ref([
 	{
-		name: '鎬绘敹鍏�',
+		name: '鐢熶骇璁㈠崟缁熻',
 		type: 'bar',
 		barGap: 0,
 		emphasis: {
 			focus: 'series'
 		},
 		itemStyle: {
-			color: {
-				type: 'linear',
-				x: 0,
-				y: 0,
-				x2: 0,
-				y2: 1,
-				colorStops: [
-					{ offset: 1, color: '#00A4ED' },
-					{ offset: 0, color: '#4EE4FF' }
+			// 浣跨敤鍑芥暟鏍规嵁鏁版嵁绱㈠紩杩斿洖涓嶅悓棰滆壊
+			color: function(params) {
+				const colorStops = [
+					[
+						{ offset: 1, color: '#00A4ED' },
+						{ offset: 0, color: '#4EE4FF' }
+					],
+					[
+						{ offset: 1, color: '#3378FF' },
+						{ offset: 0, color: '#4E8AFF' }
+					],
+					[
+						{ offset: 1, color: '#FF6B6B' },
+						{ offset: 0, color: '#FF8E8E' }
+					],
+					[
+						{ offset: 1, color: '#537EF5' },
+						{ offset: 0, color: '#9061F8' }
+					]
 				]
+				const stops = colorStops[params.dataIndex] || colorStops[0]
+				return {
+					type: 'linear',
+					x: 0,
+					y: 0,
+					x2: 0,
+					y2: 1,
+					colorStops: stops
+				}
 			}
 		},
 		data: []
-	},
-	{
-		name: '鎬绘敮鍑�',
-		type: 'bar',
-		emphasis: {
-			focus: 'series'
-		},
-		itemStyle: {
-			color: {
-				type: 'linear',
-				x: 0,
-				y: 0,
-				x2: 0,
-				y2: 1,
-				colorStops: [
-					{ offset: 1, color: '#3378FF' },
-					{ offset: 0, color: '#4E8AFF' }
-				]
-			}
-		},
-		data: []
-	},
-	{
-		name: '鍑�鏀跺叆',
-		type: 'bar',
-		emphasis: {
-			focus: 'series'
-		},
-		itemStyle: {
-			color: {
-				type: 'linear',
-				x: 0,
-				y: 0,
-				x2: 0,
-				y2: 1,
-				colorStops: [
-					{ offset: 1, color: '#537EF5' },
-					{ offset: 0, color: '#9061F8' }
-				]
-			}
-		},
-		data: []
-	},
+	}
 ])
 const barSeries1 = ref([
 	{
-		name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+		name: '鍘熸潗鏂欏悎鏍兼暟',
 		type: 'bar',
 		barGap: 0,
 		emphasis: {
@@ -504,7 +496,7 @@
 		data: []
 	},
 	{
-		name: '杩囩▼涓嶅悎鏍兼暟',
+		name: '杩囩▼鍚堟牸鏁�',
 		type: 'bar',
 		emphasis: {
 			focus: 'series'
@@ -525,7 +517,7 @@
 		data: []
 	},
 	{
-		name: '鍑哄巶涓嶅悎鏍兼暟',
+		name: '鍑哄巶鍚堟牸鏁�',
 		type: 'bar',
 		emphasis: {
 			focus: 'series'
@@ -590,13 +582,35 @@
 // 寰呭姙浜嬮」
 const todoList = ref([])
 
-// 绐楀彛澶у皬鍙樺寲澶勭悊
-const handleResize = () => {
+// 璁＄畻缂╂斁姣斾緥
+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 scaleX = containerWidth / designWidth
+  const scaleY = containerHeight / designHeight
+  scaleRatio.value = Math.min(scaleX, scaleY)
+  
+  // 瑙﹀彂鍥捐〃resize
   charts.value.forEach(chart => {
     if (chart && chart.resize) {
       chart.resize()
     }
   })
+}
+
+// 绐楀彛澶у皬鍙樺寲澶勭悊
+const handleResize = () => {
+  // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
+  setTimeout(() => {
+    calculateScale()
+  }, 100)
 }
 
 // 閿�姣佸浘琛ㄥ疄渚�
@@ -635,15 +649,45 @@
 		qualityStatisticsObject.value.factoryNum = res.data.factoryNum
 	})
 }
-// 璐㈠姟缁熻
-const accountStatisticsInfo = () => {
-	listPageAnalysis().then((res) => {
-		xAxis3.value[0].data = res.data.days
-		barSeries11.value[0].data = res.data.totalIncome
-		barSeries11.value[1].data = res.data.totalExpense
-		barSeries11.value[2].data = res.data.netIncome
+// 鍚勭敓浜ц鍗曠殑瀹屾垚杩涘害缁熻
+const progressStatisticsInfo = () => {
+	getProgressStatistics().then((res) => {
+		console.log("鐢熶骇璁㈠崟瀹屾垚杩涘害缁熻鏁版嵁:", res)
+		
+		if (!res || !res.data) {
+			console.warn('鐢熶骇璁㈠崟瀹屾垚杩涘害缁熻鏁版嵁涓虹┖')
+			return
+		}
+		
+		// 璁剧疆X杞存暟鎹� - 浣跨敤鍒嗙被鍚嶇О
+		xAxis3.value[0].data = ['宸插畬鎴愯繘搴︽暟', '鎬昏鍗曟暟', '鏈畬鎴愯鍗曟暟', '宸插畬鎴愯鍗曟暟']
+		
+		// 璁剧疆鍗曚釜绯诲垪鐨勬暟鎹� - 姣忎釜X杞村垎绫诲搴斾竴涓��
+		if (barSeries11.value && barSeries11.value.length > 0) {
+			barSeries11.value[0].data = [
+				res.data.completedProgressCount || 0,
+				res.data.totalOrderCount || 0,
+				res.data.uncompletedOrderCount || 0,
+				res.data.completedOrderCount || 0
+			]
+		}
+		
+		console.log('鍥捐〃鏁版嵁璁剧疆瀹屾垚:', {
+			xAxis: xAxis3.value[0].data,
+			series: barSeries11.value[0]?.data
+		})
+		
+	}).catch((error) => {
+		console.error('鑾峰彇鐢熶骇璁㈠崟瀹屾垚杩涘害缁熻澶辫触:', error)
 	})
 }
+// 璐㈠姟缁熻
+// const accountStatisticsInfo = () => {
+// 	listPageAnalysis().then((res) => {
+// 		xAxis3.value[0].data = res.data.days
+// 		barSeries11.value[0].data = res.data.totalIncome
+// 	})
+// }
 const getNum = () => {
 	const params = {
 		pageNum: -1,
@@ -667,10 +711,10 @@
 	getLedgerPage(params).then((res) => {
 		equipmentNum.value = res.data.total
 	});
-	getRepairPage(params).then((res) => {
+	getRepairPage({...params, status:0}).then((res) => {
 		equipmentRepair.value = res.data.total
 	});
-	getUpkeepPage(params).then((res) => {
+	getUpkeepPage({...params, status:0}).then((res) => {
 		equipmentMaintain.value = res.data.total
 	});
 	measuringInstrumentListPage(params).then((res) => {
@@ -876,9 +920,9 @@
   updateTime()
   timer.value = setInterval(updateTime, 1000)
 }
-// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝data-dashboard鍏冪礌
+// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
 const toggleFullscreen = () => {
-	const element = document.querySelector('.data-dashboard')
+	const element = document.querySelector('.scale-container')
 	
 	if (!element) return
 	
@@ -906,7 +950,12 @@
   const fullscreenElement = document.fullscreenElement || 
                            document.webkitFullscreenElement || 
                            document.msFullscreenElement
-  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('data-dashboard')
+  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')
+  
+  // 鍏ㄥ睆鐘舵�佸彉鍖栨椂锛屽欢杩熼噸鏂拌绠楃缉鏀炬瘮渚嬶紙纭繚DOM鏇存柊瀹屾垚锛�
+  setTimeout(() => {
+    calculateScale()
+  }, 200)
 }
 
 // 鐢熷懡鍛ㄦ湡閽╁瓙
@@ -914,8 +963,11 @@
   initTime()
   // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
   nextTick(() => {
-    // 鍒濆鍖朼utofit鑷�傚簲
-    autofit.init({ dh: 1440, dw: 2560, el: '.data-dashboard', resize: true }, false)
+    // 璁＄畻鍒濆缂╂斁姣斾緥
+    calculateScale()
+    
+    // 鍒濆鍖朼utofit鑷�傚簲锛堝鏋滈渶瑕佷繚鐣檃utofit锛屽彲浠ヤ繚鐣欙紝浣嗕富瑕佺缉鏀剧敱scale-container鎺у埗锛�
+    // autofit.init({ dh: 800, dw: 1280, el: '.data-dashboard', resize: true }, false)
     
     // 娣诲姞鑷姩婊氬姩鍔ㄧ敾鏁堟灉 - 瀹㈡埛淇℃伅鍒楄〃
     const contractList = refContractList.value
@@ -975,9 +1027,13 @@
   })
   
   window.addEventListener('resize', handleResize)
+  window.addEventListener('fullscreenchange', handleFullscreenChange)
+  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
   analysisCustomer()
   qualityStatisticsInfo()
-	accountStatisticsInfo()
+	// accountStatisticsInfo()
+	progressStatisticsInfo()
   getNum()
   getLedgerNum()
   todoInfoS()
@@ -1040,44 +1096,58 @@
 </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;
+}
+
+/* 鍐呴儴鍐呭鍖哄煙 - 鍥哄畾璁捐灏哄 */
 .data-dashboard {
   position: relative;
-  width: 100%;
-	height: 100%;
-  overflow: hidden;
+  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:fullscreen {
-  width: 100%;
-  height: 100%;
+/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-container */
+.scale-container:fullscreen {
+	width: 100vw;
+	height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: inherit;
+  background-color: #000;
   z-index: 9999;
 }
 
 /* Webkit娴忚鍣ㄥ墠缂� */
-.data-dashboard:-webkit-full-screen {
-  width: 100%;
-  height: 100%;
+.scale-container:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: inherit;
+  background-color: #000;
   z-index: 9999;
 }
 
 /* MS娴忚鍣ㄥ墠缂� */
-.data-dashboard:-ms-fullscreen {
-  width: 100%;
-  height: 100%;
+.scale-container:-ms-fullscreen {
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: inherit;
+  background-color: #000;
   z-index: 9999;
 }
 
@@ -1085,11 +1155,21 @@
 .dashboard-header {
   position: relative;
   z-index: 1;
-  height: 170px;
+	height: 86px;
 	background-image: url("@/assets/BI/biaoti.png");
 	background-size: cover;
-	background-position: center;
 	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;
 }
 
 .fullscreen-btn {
@@ -1121,7 +1201,7 @@
   display: flex;
   gap: 30px;
   padding: 0 30px;
-  height: calc(100% - 120px);
+	height: calc(100% - 86px);
   overflow: hidden;
 }
 

--
Gitblit v1.9.3