From c4e7a4be56f5fa865843574b6f0ad91f1861f1b9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 11 十二月 2025 17:07:20 +0800
Subject: [PATCH] 1.润泰-BI大屏展示修改
---
src/views/reportAnalysis/dataDashboard/index.vue | 392 +++++++++----------------------------------------------
1 files changed, 69 insertions(+), 323 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index da10fd7..56bcb7a 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -12,6 +12,7 @@
<!-- 椤堕儴鏍囬鏍� -->
<div class="dashboard-header">
+ <div class="factory-name">{{ userStore.currentFactoryName }}</div>
</div>
<!-- 涓昏鍐呭鍖哄煙 -->
@@ -98,13 +99,13 @@
<div class="center-panel">
<!-- 椤堕儴缁熻鍗＄墖 -->
<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>
<span class="card-value">{{totalStaff}}</span>
</div>
- </div>
+ </div> -->
<div class="stat-card">
<img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
<div class="card-content">
@@ -173,14 +174,14 @@
</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>
- </div>
+<!-- <div class="event-header">-->
+<!-- <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />-->
+<!-- <span class="event-title">缁忚惀鎴愭灉鍒嗘瀽</span>-->
+<!-- </div>-->
<Echarts ref="chart"
:chartStyle="chartStyle"
:grid="grid"
@@ -241,9 +242,10 @@
import { ref, 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,
+ homeTodos, productionStatistics,
qualityStatistics,
statisticsReceivablePayable
} from "@/api/viewIndex.js";
@@ -258,6 +260,9 @@
// 鍏ㄥ睆鐩稿叧鐘舵��
const isFullscreen = ref(false);
+
+// 鐢ㄦ埛store
+const userStore = useUserStore()
// 鍝嶅簲寮忔暟鎹�
const currentTime = ref('')
@@ -412,11 +417,11 @@
const barLegend1 = {
show: true,
textStyle: { color: '#B8C8E0' },
- data: ['鎬绘敹鍏�', '鎬绘敮鍑�', '鍑�鏀跺叆']
+ data: ['寰呯敓浜�', '鐢熶骇涓�', '宸茬敓浜�']
}
const barSeries11 = ref([
{
- name: '鎬绘敹鍏�',
+ name: '寰呯敓浜�',
type: 'bar',
barGap: 0,
emphasis: {
@@ -438,7 +443,7 @@
data: []
},
{
- name: '鎬绘敮鍑�',
+ name: '鐢熶骇涓�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -459,7 +464,7 @@
data: []
},
{
- name: '鍑�鏀跺叆',
+ name: '宸茬敓浜�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -644,6 +649,15 @@
barSeries11.value[2].data = res.data.netIncome
})
}
+// 璐㈠姟缁熻
+const productionStatisticsInfo = () => {
+ productionStatistics().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 getNum = () => {
const params = {
pageNum: -1,
@@ -667,10 +681,14 @@
getLedgerPage(params).then((res) => {
equipmentNum.value = res.data.total
});
- getRepairPage(params).then((res) => {
+ getRepairPage({pageNum: -1,
+ pageSize: -1, status: 0}).then((res) => {
+ console.log(999,res)
equipmentRepair.value = res.data.total
});
- getUpkeepPage(params).then((res) => {
+ getUpkeepPage({pageNum: -1,
+ pageSize: -1, status: 0}).then((res) => {
+ console.log(123,res)
equipmentMaintain.value = res.data.total
});
measuringInstrumentListPage(params).then((res) => {
@@ -876,229 +894,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()
+ }
+ }
}
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
@@ -1115,7 +933,7 @@
// 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
nextTick(() => {
// 鍒濆鍖朼utofit鑷�傚簲
- autofit.init({ dh: 1440, dw: 2560, el: '.data-dashboard', resize: true }, false)
+ autofit.init({ dh: 1080, dw: 1920, el: '.data-dashboard', resize: true }, false)
// 娣诲姞鑷姩婊氬姩鍔ㄧ敾鏁堟灉 - 瀹㈡埛淇℃伅鍒楄〃
const contractList = refContractList.value
@@ -1177,6 +995,7 @@
window.addEventListener('resize', handleResize)
analysisCustomer()
qualityStatisticsInfo()
+ productionStatisticsInfo()
accountStatisticsInfo()
getNum()
getLedgerNum()
@@ -1242,8 +1061,8 @@
<style scoped>
.data-dashboard {
position: relative;
- width: 100vw;
- overflow: hidden;
+ width: 100%;
+ height: 100%;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
@@ -1280,18 +1099,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;
@@ -1301,6 +1108,17 @@
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: 32px;
+position: absolute;
}
.fullscreen-btn {
@@ -1332,7 +1150,7 @@
display: flex;
gap: 30px;
padding: 0 30px;
- height: calc(100vh - 120px);
+ height: calc(100% - 120px);
overflow: hidden;
}
@@ -1413,21 +1231,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 +1476,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 +1489,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