From 37da59952d4cf8b68942e90ab5c2a6164986b2af Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 12 九月 2025 09:32:48 +0800
Subject: [PATCH] BI大屏部署
---
src/views/reportAnalysis/dataDashboard/index.vue | 331 ++++---------------------------------------------------
1 files changed, 24 insertions(+), 307 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index da10fd7..6fe840b 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -876,229 +876,29 @@
updateTime()
timer.value = setInterval(updateTime, 1000)
}
-
-// 瀹㈡埛楗煎浘
-const initCustomerPieChart = () => {
- if (!customerPieChartRef.value) return
- const chart = echarts.init(customerPieChartRef.value)
- const option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- series: [{
- name: '瀹㈡埛鍒嗗竷',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '50%'],
- data: [
- { value: 25, name: '娼滃湪瀹㈡埛', itemStyle: { color: '#00d4ff' } },
- { value: 25, name: '鎰忓悜瀹㈡埛', itemStyle: { color: '#0099ff' } },
- { value: 25, name: '绛剧害瀹㈡埛', itemStyle: { color: '#6666ff' } },
- { value: 25, name: '娴佸け瀹㈡埛', itemStyle: { color: '#ffcc00' } }
- ],
- label: {
- show: false
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 閿�鍞煴鐘跺浘
-const initSalesBarChart = () => {
- if (!salesBarChartRef.value) return
- const chart = echarts.init(salesBarChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [{
- data: [150, 200, 180, 220, 190],
- type: 'bar',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' }
- ])
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 鏁版嵁缁熻妯悜鏌辩姸鍥�
-const initDataBarChart = () => {
- if (!dataBarChartRef.value) return
- const chart = echarts.init(dataBarChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- yAxis: {
- type: 'category',
- data: ['璁捐鏁版嵁', '璐㈠姟鏁版嵁', '鐢熶骇鏁版嵁', '鍚堝悓鏁版嵁'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- series: [{
- data: [80, 100, 120, 90],
- type: 'bar',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' }
- ])
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 璐㈠姟鍒嗘瀽闈㈢Н鍥�
-const initFinancialAreaChart = () => {
- if (!financialAreaChartRef.value) return
- const chart = echarts.init(financialAreaChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '20%'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [{
- data: [150, 180, 200, 170, 190],
- type: 'line',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
- { offset: 1, color: 'rgba(0, 212, 255, 0.1)' }
- ])
- },
- lineStyle: { color: '#00d4ff' },
- itemStyle: { color: '#00d4ff' }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 瀹炴椂鏁版嵁鎶樼嚎鍥�
-const initRealtimeLineChart = () => {
- if (!realtimeLineChartRef.value) return
- const chart = echarts.init(realtimeLineChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '20%'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [
- {
- name: '鏁版嵁1',
- data: [120, 140, 160, 130, 150],
- type: 'line',
- lineStyle: { color: '#00d4ff' },
- itemStyle: { color: '#00d4ff' }
- },
- {
- name: '鏁版嵁2',
- data: [100, 120, 140, 110, 130],
- type: 'line',
- lineStyle: { color: '#0099ff' },
- itemStyle: { color: '#0099ff' }
- }
- ]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝data-dashboard鍏冪礌
const toggleFullscreen = () => {
- const element = document.querySelector('.data-dashboard')
-
- if (!element) return
-
- 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()
- }
- }
+ const element = document.querySelector('.data-dashboard')
+
+ if (!element) return
+
+ 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()
+ }
+ }
}
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
@@ -1242,7 +1042,8 @@
<style scoped>
.data-dashboard {
position: relative;
- width: 100vw;
+ width: 100%;
+ height: 100%;
overflow: hidden;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
@@ -1280,18 +1081,6 @@
z-index: 9999;
}
-/* 鍏ㄥ睆鐘舵�佷笅鐨勫唴瀹瑰尯鍩熼�傞厤 */
-.data-dashboard:fullscreen .dashboard-content {
- height: calc(100vh - 120px);
-}
-
-.data-dashboard:-webkit-full-screen .dashboard-content {
- height: calc(100vh - 120px);
-}
-
-.data-dashboard:-ms-fullscreen .dashboard-content {
- height: calc(100vh - 120px);
-}
.dashboard-header {
position: relative;
@@ -1332,7 +1121,7 @@
display: flex;
gap: 30px;
padding: 0 30px;
- height: calc(100vh - 120px);
+ height: calc(100% - 120px);
overflow: hidden;
}
@@ -1413,21 +1202,12 @@
background-position: center;
background-repeat: no-repeat;
}
-.panel-item {
- background: rgba(0, 20, 60, 0.8);
- border: 1px solid rgba(0, 212, 255, 0.3);
- border-radius: 12px;
- padding: 30px;
- backdrop-filter: blur(10px);
- min-height: 200px;
-}
.panel-header {
background-image: url("@/assets/BI/kehuhetongback@2x.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
- height: 36px;
}
.panel-title {
@@ -1667,9 +1447,6 @@
font-size: 20px;
color: #FFFFFE;
}
-.data-statistics {
- flex: 1;
-}
.financial-header {
background-image: url("@/assets/BI/caiwufenxiback@2x.png");
background-size: 100% 100%;
@@ -1683,66 +1460,6 @@
color: #D9ECFF;
padding-left: 46px;
line-height: 36px;
-}
-.data-legend {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- margin-bottom: 20px;
-}
-
-.legend-item {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.legend-color {
- width: 12px;
- height: 12px;
- border-radius: 4px;
-}
-
-.legend-text {
- font-size: 12px;
- color: #999;
-}
-
-.horizontal-bar-chart {
- height: 150px;
-}
-
-.financial-analysis,
-.realtime-analysis {
- flex: 1;
-}
-
-.financial-tabs,
-.realtime-tabs {
- display: flex;
- gap: 16px;
- margin-bottom: 20px;
-}
-
-.tab {
- padding: 12px 24px;
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid rgba(0, 212, 255, 0.3);
- border-radius: 6px;
- color: #999;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.tab.active {
- background: rgba(0, 212, 255, 0.2);
- color: #00d4ff;
- border-color: #00d4ff;
-}
-
-.area-chart,
-.line-chart {
- height: 150px;
}
/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
--
Gitblit v1.9.3