From b84381aed646d7b1caf822c72d28635df51ea827 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 20 一月 2026 11:27:08 +0800
Subject: [PATCH] fix: 合并军泰BI大屏
---
src/views/reportAnalysis/dataDashboard/index.vue | 1179 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 727 insertions(+), 452 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index da10fd7..566d7ea 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>
<!-- 涓昏鍐呭鍖哄煙 -->
@@ -20,40 +22,50 @@
<div class="left-panel">
<!-- 瀹㈡埛淇℃伅缁熻鍒嗘瀽 -->
<div class="panel-header">
- <span class="panel-title">瀹㈡埛淇℃伅缁熻鍒嗘瀽</span>
+ <span class="panel-title">鍦ㄥ埗鍝佺粺璁″垎鏋�</span>
</div>
<div class="panel-item-customers">
- <div class="panel-title-second">
- <div class="panel-title-icon"></div>
- <div class="total-customers">
- <span class="label">鎬诲悎鍚岄噾棰�(鍏�)</span>
- <span class="value">{{sum}}</span>
+ <div class="quality-cards">
+ <div class="quality-cardSec">
+ <div class="quality-card one"></div>
+ <div class="quality-cardTitle">
+ <div>鎬诲湪鍒舵暟閲�</div>
+ <div>{{workInProcessStatistics.totalQuantity}}浠�</div>
+ </div>
</div>
-<!-- <div class="jiantou"></div>-->
+ <div class="quality-cardSec">
+ <div class="quality-card two"></div>
+ <div class="quality-cardTitle">
+ <div>骞冲潎鍛ㄨ浆澶╂暟</div>
+ <div>{{workInProcessStatistics.avgTurnoverDays}}澶�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card three"></div>
+ <div class="quality-cardTitle">
+ <div>鍛ㄨ浆鏁堢巼</div>
+ <div>{{workInProcessStatistics.turnoverEfficiency}}%</div>
+ </div>
+ </div>
</div>
- <!-- 楗煎浘鍖哄煙 -->
- <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 82%;margin-top: 20px">
- <div style="width: 240px; height: 240px; background-image: url('/src/assets/BI/zonghetongbingtubiankuang@2x.png'); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;">
- <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"
- :series="materialPieSeries"
- :tooltip="pieTooltip"
- :options="{backgroundColor: 'transparent'}"
- style="margin-left: 5px;"></Echarts>
- </div>
- <ul class="contract-list" style="margin: 0; padding: 0; display: flex; flex-direction: column;justify-content: space-around; height: 100%; overflow-y: auto; scroll-behavior: smooth;" ref="refContractList">
- <li v-for="item in materialPieSeries[0].data" :key="item.name" style="list-style: none; margin-bottom: 12px;">
- <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
- <div class="line" :style="{color: item.itemStyle.color}">鈻� {{item.name}}</div>
- <div style="font-weight: 700;font-size: 16px;color: #85B1E4;">锟{item.value}}</div>
- </div>
- </li>
- </ul>
+ <!-- 宸ュ簭鍦ㄥ埗鍝佹暟閲忔煴鐘跺浘 -->
+ <div style="height: 82%;margin-top: 20px">
+ <Echarts ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="workInProcessBarLegend"
+ :series="workInProcessBarSeries"
+ :tooltip="tooltip"
+ :xAxis="workInProcessXAxis"
+ :yAxis="workInProcessYAxis"
+ :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
+ style="height: 100%"></Echarts>
</div>
</div>
<!-- 璐ㄩ噺缁熻 -->
<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">
@@ -61,21 +73,21 @@
<div class="quality-cardSec">
<div class="quality-card one"></div>
<div class="quality-cardTitle">
- <div>鍘熸潗鏂欏凡妫�娴嬫暟</div>
+ <div>鍘熸潗鏂欐鏁�</div>
<div>{{qualityStatisticsObject.supplierNum}}浠�</div>
</div>
</div>
<div class="quality-cardSec">
<div class="quality-card two"></div>
<div class="quality-cardTitle">
- <div>杩囩▼妫�楠屾暟閲�</div>
+ <div>杩囩▼妫�鏁�</div>
<div>{{qualityStatisticsObject.processNum}}浠�</div>
</div>
</div>
<div class="quality-cardSec">
<div class="quality-card three"></div>
<div class="quality-cardTitle">
- <div>鍑哄巶宸叉鏁伴噺</div>
+ <div>鍑哄巶妫�鏁�</div>
<div>{{qualityStatisticsObject.factoryNum}}浠�</div>
</div>
</div>
@@ -173,24 +185,76 @@
</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 class="order-statistics-cards" style="margin-bottom: 0px;">
+ <div class="quality-cardSec">
+ <div class="quality-card four"></div>
+ <div class="quality-cardTitle">
+ <div>鎬昏鍗曟暟</div>
+ <div>{{orderStatisticsObject.totalOrderCount}}浠�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card five"></div>
+ <div class="quality-cardTitle">
+ <div>鏈畬鎴愯鍗曟暟</div>
+ <div>{{orderStatisticsObject.uncompletedOrderCount}}浠�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card six"></div>
+ <div class="quality-cardTitle">
+ <div>閮ㄥ垎瀹屾垚璁㈠崟鏁�</div>
+ <div>{{orderStatisticsObject.partialCompletedOrderCount}}浠�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card seven"></div>
+ <div class="quality-cardTitle">
+ <div>宸插畬鎴愯鍗曟暟</div>
+ <div>{{orderStatisticsObject.completedOrderCount}}浠�</div>
+ </div>
+ </div>
</div>
- <Echarts ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend1"
- :series="barSeries11"
- :tooltip="tooltip"
- :xAxis="xAxis3"
- :yAxis="yAxis3"
- :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
- style="height: 300px"></Echarts>
+ <div class="progress-table-container" ref="progressTableRef" style="margin-top: 0px;" @scroll="handleTableScroll">
+ <table class="progress-table">
+ <thead>
+ <tr>
+ <th>鐢熶骇璁㈠崟鍙�</th>
+ <th>浜у搧鍚嶇О</th>
+ <th>瑙勬牸</th>
+ <th>闇�姹傛暟閲�</th>
+ <th>瀹屾垚鏁伴噺</th>
+ <th>瀹屾垚杩涘害</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ v-for="(item, index) in progressTableData"
+ :key="index"
+ :ref="el => setRowRef(el, index)"
+ :class="{ 'row-under-header': isRowUnderHeader(index) }"
+ >
+ <td>{{ item.npsNo || '-' }}</td>
+ <td>{{ item.productCategory || '-' }}</td>
+ <td>{{ item.specificationModel || '-' }}</td>
+ <td>{{ item.quantity || 0 }}</td>
+ <td>{{ item.completeQuantity || 0 }}</td>
+ <td>
+ <el-progress
+ :percentage="calculateProgress(item)"
+ :color="progressColor(calculateProgress(item))"
+ :status="calculateProgress(item) >= 100 ? 'success' : ''"
+ :stroke-width="8"
+ />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
@@ -204,11 +268,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 +289,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 +297,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";
@@ -255,9 +323,19 @@
import {getUpkeepPage} from "@/api/equipmentManagement/upkeep.js";
import {measuringInstrumentListPage} from "@/api/equipmentManagement/measurementEquipment.js";
import {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";
+import {productOrderListPage} from "@/api/productionManagement/productionOrder.js";
// 鍏ㄥ睆鐩稿叧鐘舵��
const isFullscreen = ref(false);
+
+// 缂╂斁姣斾緥
+const scaleRatio = ref(1)
+// 璁捐灏哄锛堝熀鍑嗗昂瀵革級- 鏍规嵁瀹為檯璁捐绋胯皟鏁�
+const designWidth = 1920
+const designHeight = 1080
+
+// 鐢ㄦ埛store
+const userStore = useUserStore()
// 鍝嶅簲寮忔暟鎹�
const currentTime = ref('')
@@ -273,11 +351,17 @@
const realtimeLineChartRef = ref(null)
const refContractList = ref(null)
const refTodoList = ref(null)
+const progressTableRef = ref(null)
const timerScroll = ref(null)
+const progressTableScrollTimer = ref(null)
+const isTableScrolling = ref(false)
+const tableScrollTimeout = ref(null)
+const tableRowRefs = ref([])
+const rowsUnderHeader = ref(new Set())
const chartStylePie = {
- width: '140%',
- height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+ width: '100%',
+ height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
}
const materialPieSeries = ref([
{
@@ -321,6 +405,21 @@
supplierNum: 0,
processNum: 0,
factoryNum: 0,
+})
+
+// 璁㈠崟缁熻瀵硅薄
+const orderStatisticsObject = ref({
+ totalOrderCount: 0,
+ uncompletedOrderCount: 0,
+ partialCompletedOrderCount: 0,
+ completedOrderCount: 0,
+})
+
+// 鍦ㄥ埗鍝佸懆杞粺璁″璞�
+const workInProcessStatistics = ref({
+ totalQuantity: 0,
+ avgTurnoverDays: 0,
+ turnoverEfficiency: 0,
})
const chartStyle = {
width: '100%',
@@ -407,82 +506,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 +580,7 @@
data: []
},
{
- name: '杩囩▼涓嶅悎鏍兼暟',
+ name: '杩囩▼鍚堟牸鏁�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -525,7 +601,7 @@
data: []
},
{
- name: '鍑哄巶涓嶅悎鏍兼暟',
+ name: '鍑哄巶鍚堟牸鏁�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -587,16 +663,113 @@
axisLabel: { color: '#B8C8E0' }
}]
+// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
+const workInProcessXAxis = ref([{
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: []
+}])
+const workInProcessYAxis = [{
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' },
+ name: ''
+}]
+const workInProcessBarLegend = {
+ show: false,
+ textStyle: { color: '#B8C8E0' },
+ data: []
+}
+const workInProcessBarSeries = ref([
+ {
+ name: '鍦ㄥ埗鍝佹暟閲�',
+ type: 'bar',
+ barWidth: 25, // 鍥哄畾鏌辩姸鍥惧搴︿负40px
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: '#4EE4FF' },
+ { offset: 1, color: '#00A4ED' }
+ ]
+ }
+ },
+ label: {
+ show: true,
+ position: 'top',
+ color: '#B8C8E0'
+ },
+ data: []
+ }
+])
+
// 寰呭姙浜嬮」
const todoList = ref([])
-// 绐楀彛澶у皬鍙樺寲澶勭悊
-const handleResize = () => {
+// 鐢熶骇璁㈠崟瀹屾垚杩涘害琛ㄦ牸鏁版嵁
+const progressTableData = ref([])
+
+// 璁＄畻瀹屾垚杩涘害鐧惧垎姣�
+const calculateProgress = (item) => {
+ if (!item) return 0
+ // 浼樺厛浣跨敤completionStatus瀛楁
+ if (item.completionStatus !== undefined && item.completionStatus !== null) {
+ const percentage = Number(item.completionStatus)
+ if (isNaN(percentage)) return 0
+ return Math.min(Math.max(Math.round(percentage), 0), 100)
+ }
+ // 濡傛灉娌℃湁completionStatus锛屽垯鏍规嵁瀹屾垚鏁伴噺鍜岄渶姹傛暟閲忚绠�
+ if (!item.quantity || item.quantity === 0) return 0
+ const percentage = (item.completeQuantity || 0) / item.quantity * 100
+ return Math.min(Math.max(Math.round(percentage), 0), 100)
+}
+
+// 鏍规嵁杩涘害鐧惧垎姣旇繑鍥為鑹�
+const progressColor = (percentage) => {
+ const p = percentage || 0
+ if (p < 30) return "#f56c6c"
+ if (p < 50) return "#e6a23c"
+ if (p < 80) return "#409eff"
+ return "#67c23a"
+}
+
+// 璁＄畻缂╂斁姣斾緥
+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)
}
// 閿�姣佸浘琛ㄥ疄渚�
@@ -621,6 +794,43 @@
}))
})
}
+// 鍦ㄥ埗鍝佸懆杞粺璁�
+const workInProcessTurnoverInfo = () => {
+ getWorkInProcessTurnover().then((res) => {
+ console.log("鍦ㄥ埗鍝佸懆杞粺璁℃暟鎹�:", res)
+
+ if (!res || !res.data) {
+ console.warn('鍦ㄥ埗鍝佸懆杞粺璁℃暟鎹负绌�')
+ return
+ }
+
+ // 浠庢帴鍙ｈ幏鍙栫粺璁℃暟鎹�
+ workInProcessStatistics.value = {
+ totalQuantity: res.data.totalOrderCount || 0,
+ avgTurnoverDays: res.data.averageTurnoverDays || 0,
+ turnoverEfficiency: res.data.turnoverEfficiency || 0,
+ }
+
+ // 璁剧疆宸ュ簭鏌辩姸鍥炬暟鎹�
+ // X杞达細processDetails (宸ュ簭璇︽儏鏁扮粍)
+ // Y杞达細processQuantityDetails (宸ュ簭鏁伴噺璇︽儏鏁扮粍)
+ if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
+ // 璁剧疆X杞存暟鎹紙宸ュ簭鍚嶇О锛�
+ workInProcessXAxis.value[0].data = res.data.processDetails
+ } else {
+ workInProcessXAxis.value[0].data = []
+ }
+
+ if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {
+ // 璁剧疆Y杞存暟鎹紙鍦ㄥ埗鍝佹暟閲忥級
+ workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
+ } else {
+ workInProcessBarSeries.value[0].data = []
+ }
+ }).catch((error) => {
+ console.error('鑾峰彇鍦ㄥ埗鍝佸懆杞粺璁″け璐�:', error)
+ })
+}
// 璐ㄦ缁熻
const qualityStatisticsInfo = () => {
qualityStatistics().then((res) => {
@@ -635,15 +845,44 @@
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
+ }
+
+ // 浠庢帴鍙ｈ幏鍙栫粺璁℃暟鎹�
+ orderStatisticsObject.value = {
+ totalOrderCount: res.data.totalOrderCount || 0,
+ uncompletedOrderCount: res.data.uncompletedOrderCount || 0,
+ partialCompletedOrderCount: res.data.partialCompletedOrderCount || 0,
+ completedOrderCount: res.data.completedOrderCount || 0
+ }
+ progressTableData.value = res.data.completedOrderDetails || []
+ // 閲嶇疆琛屽紩鐢�
+ tableRowRefs.value = []
+ rowsUnderHeader.value.clear()
+
+ // 鍦ㄨ幏鍙栧埌鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
+ nextTick(() => {
+ initProgressTableScroll()
+ })
+ }).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 +906,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) => {
@@ -778,6 +1017,163 @@
// 鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
const autoSwitchTimer = ref(null)
+
+// 璁剧疆琛屽紩鐢�
+const setRowRef = (el, index) => {
+ if (el) {
+ tableRowRefs.value[index] = el
+ }
+}
+
+// 鍒ゆ柇琛屾槸鍚﹀湪琛ㄥご涓嬫柟
+const isRowUnderHeader = (index) => {
+ return rowsUnderHeader.value.has(index)
+}
+
+// 澶勭悊琛ㄦ牸婊氬姩浜嬩欢
+const handleTableScroll = () => {
+ const tableContainer = progressTableRef.value
+ if (!tableContainer) return
+
+ const thead = tableContainer.querySelector('thead')
+ if (!thead) return
+
+ const theadHeight = thead.offsetHeight
+ const containerRect = tableContainer.getBoundingClientRect()
+ const containerTop = containerRect.top
+ const theadBottom = containerTop + theadHeight
+
+ // 娓呯┖涔嬪墠鐨勮褰�
+ rowsUnderHeader.value.clear()
+
+ // 妫�鏌ユ瘡涓�琛屾槸鍚﹀湪琛ㄥご涓嬫柟锛堣琛ㄥご閬尅锛�
+ tableRowRefs.value.forEach((row, index) => {
+ if (row) {
+ const rowRect = row.getBoundingClientRect()
+ const rowTop = rowRect.top
+ const rowBottom = rowRect.bottom
+
+ // 濡傛灉琛屼笌琛ㄥご鏈夐噸鍙狅紙琛屽湪琛ㄥご涓嬫柟琚伄鎸★級
+ // 琛岀殑椤堕儴鍦ㄨ〃澶村簳閮ㄤ笅鏂癸紝浣嗚鐨勫簳閮ㄥ湪琛ㄥご搴曢儴涓婃柟锛岃鏄庤閬尅
+ if (rowTop < theadBottom && rowBottom > containerTop) {
+ rowsUnderHeader.value.add(index)
+ }
+ }
+ })
+
+ // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+ if (tableScrollTimeout.value) {
+ clearTimeout(tableScrollTimeout.value)
+ }
+
+ // 婊氬姩鍋滄鍚庢竻绌烘贰鍖栨爣璁�
+ tableScrollTimeout.value = setTimeout(() => {
+ rowsUnderHeader.value.clear()
+ }, 150)
+}
+
+// 鍒濆鍖栫敓浜ц鍗曡繘搴﹁〃鏍兼粴鍔ㄥ姛鑳�
+const initProgressTableScroll = () => {
+ const tableContainer = progressTableRef.value
+ if (!tableContainer) return
+
+ // 娓呯悊涔嬪墠鐨勬粴鍔ㄥ姩鐢诲拰瀹氭椂鍣�
+ if (progressTableScrollTimer.value) {
+ cancelAnimationFrame(progressTableScrollTimer.value)
+ progressTableScrollTimer.value = null
+ }
+ if (tableContainer._pauseTimer) {
+ clearInterval(tableContainer._pauseTimer)
+ tableContainer._pauseTimer = null
+ }
+
+ const tbody = tableContainer.querySelector('tbody')
+ if (!tbody) return
+
+ // 娓呯悊涔嬪墠鍙兘瀛樺湪鐨勫厠闅嗚锛堜繚鐣欏師濮嬫暟鎹锛�
+ // 鍘熷鏁版嵁琛岀殑鏁伴噺搴旇绛変簬 progressTableData.value.length
+ const originalCount = progressTableData.value.length
+ const allRows = Array.from(tbody.querySelectorAll('tr'))
+ if (allRows.length > originalCount) {
+ // 绉婚櫎鎵�鏈夎秴杩囧師濮嬫暟閲忕殑琛岋紙杩欎簺鏄厠闅嗙殑琛岋級
+ for (let i = originalCount; i < allRows.length; i++) {
+ allRows[i].remove()
+ }
+ }
+
+ const scrollItems = Array.from(tbody.querySelectorAll('tr'))
+ if (scrollItems.length === 0) return
+
+ // 鑾峰彇鍘熷鏁版嵁椤规暟閲�
+ const originalItemCount = scrollItems.length
+
+ // 璁＄畻瀹瑰櫒楂樺害鍜岃〃澶撮珮搴�
+ const thead = tableContainer.querySelector('thead')
+ const theadHeight = thead ? thead.offsetHeight : 40
+ const containerHeight = tableContainer.clientHeight
+ const visibleHeight = containerHeight - theadHeight
+
+ // 璁＄畻鍘熷鏁版嵁鐨勬�婚珮搴�
+ const itemHeight = scrollItems[0]?.offsetHeight || 40
+ const totalContentHeight = itemHeight * originalItemCount
+
+ // 濡傛灉鏁版嵁閲忎笉澶燂紝瀹瑰櫒鍙互瀹屽叏鏄剧ず鎵�鏈夋暟鎹紝灏变笉闇�瑕佹粴鍔ㄥ拰鍏嬮殕
+ if (totalContentHeight <= visibleHeight) {
+ // 鏁版嵁閲忓皯锛屼笉闇�瑕佹粴鍔紝鐩存帴杩斿洖
+ return
+ }
+
+ // 鏁版嵁閲忚冻澶燂紝闇�瑕佹粴鍔紝杩涜鍏嬮殕浠ュ疄鐜版棤缂濇粴鍔�
+ const cloneCount = Math.ceil(visibleHeight / itemHeight) + 2
+
+ // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % originalItemCount].cloneNode(true)
+ tbody.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)
+
+ // 璁＄畻鏈�澶ф粴鍔ㄤ綅缃紙鍘熷鍐呭鐨勯珮搴︼級
+ const maxScroll = itemHeight * originalItemCount
+
+ // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
+ if (scrollPosition >= maxScroll) {
+ scrollPosition = 0
+ tableContainer.scrollTop = 0
+ } else {
+ tableContainer.scrollTop = scrollPosition
+ }
+ }
+
+ progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
+ }
+
+ // 鍚姩婊氬姩鍔ㄧ敾
+ progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
+
+ // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused
+ }, pauseTime)
+
+ // 娓呯悊瀹氭椂鍣�
+ tableContainer._pauseTimer = pauseTimer
+}
+
// 鍒濆鍖栧緟鍔炰簨椤瑰垪琛ㄦ粴鍔ㄥ姛鑳�
const initTodoListScroll = () => {
const todoList = refTodoList.value
@@ -876,229 +1272,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鍏冪礌
+// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
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('.scale-container')
+
+ 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()
+ }
+ }
}
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
@@ -1106,7 +1302,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)
}
// 鐢熷懡鍛ㄦ湡閽╁瓙
@@ -1114,8 +1315,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
@@ -1175,9 +1379,14 @@
})
window.addEventListener('resize', handleResize)
+ window.addEventListener('fullscreenchange', handleFullscreenChange)
+ window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+ window.addEventListener('MSFullscreenChange', handleFullscreenChange)
analysisCustomer()
+ workInProcessTurnoverInfo()
qualityStatisticsInfo()
- accountStatisticsInfo()
+ // accountStatisticsInfo()
+ progressStatisticsInfo()
getNum()
getLedgerNum()
todoInfoS()
@@ -1218,6 +1427,25 @@
}
}
+ // 娓呯悊鐢熶骇璁㈠崟杩涘害琛ㄦ牸鐨勫姩鐢诲拰瀹氭椂鍣�
+ const progressTable = progressTableRef.value
+ if (progressTable) {
+ if (progressTableScrollTimer.value) {
+ cancelAnimationFrame(progressTableScrollTimer.value)
+ progressTableScrollTimer.value = null
+ }
+ if (progressTable._pauseTimer) {
+ clearInterval(progressTable._pauseTimer)
+ progressTable._pauseTimer = null
+ }
+ }
+
+ // 娓呯悊琛ㄦ牸婊氬姩瀹氭椂鍣�
+ if (tableScrollTimeout.value) {
+ clearTimeout(tableScrollTimeout.value)
+ tableScrollTimeout.value = null
+ }
+
// 娓呯悊鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
if (autoSwitchTimer.value) {
clearInterval(autoSwitchTimer.value)
@@ -1240,67 +1468,80 @@
</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: 100vw;
- 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;
}
-/* 鍏ㄥ睆鐘舵�佷笅鐨勫唴瀹瑰尯鍩熼�傞厤 */
-.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;
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 {
@@ -1332,7 +1573,7 @@
display: flex;
gap: 30px;
padding: 0 30px;
- height: calc(100vh - 120px);
+ height: calc(100% - 86px);
overflow: hidden;
}
@@ -1403,7 +1644,33 @@
}
.quality-card.three {
background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
-
+}
+
+/* 璁㈠崟缁熻鍗＄墖鏍峰紡 */
+.order-statistics-cards {
+ display: flex;
+ gap: 12px;
+ width: 100%;
+ height: 94px;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.quality-card.four {
+ background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
+}
+
+.quality-card.five {
+ background-image: url("@/assets/BI/guochengyijianicon@2x.png");
+}
+
+.quality-card.six {
+ background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
+}
+
+.quality-card.seven {
+ background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
}
.panel-title-icon {
width: 60px;
@@ -1413,21 +1680,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 +1925,6 @@
font-size: 20px;
color: #FFFFFE;
}
-.data-statistics {
- flex: 1;
-}
.financial-header {
background-image: url("@/assets/BI/caiwufenxiback@2x.png");
background-size: 100% 100%;
@@ -1684,66 +1939,6 @@
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;
-}
/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
.custom-radio-group :deep(.el-radio-button__inner) {
@@ -1758,4 +1953,84 @@
border-color: rgba(255, 255, 255, 0.5);
box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.5);
}
+
+/* 鐢熶骇璁㈠崟杩涘害琛ㄦ牸鏍峰紡 */
+.progress-table-container {
+ height: 250px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin-top: 10px;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE鍜孍dge */
+}
+
+.progress-table-container::-webkit-scrollbar {
+ display: none; /* Chrome銆丼afari鍜孫pera */
+}
+
+.progress-table {
+ width: 100%;
+ border-collapse: collapse;
+ color: #B8C8E0;
+ font-size: 12px;
+ table-layout: fixed;
+}
+
+.progress-table thead {
+ position: sticky;
+ top: 0;
+ background-color: rgba(26, 88, 176, 0.9);
+ z-index: 10;
+}
+
+.progress-table th {
+ padding: 8px 6px;
+ text-align: left;
+ font-weight: 500;
+ border-bottom: 1px solid rgba(184, 200, 224, 0.3);
+ color: #B8C8E0;
+ font-size: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.progress-table th:nth-child(1) { width: 15%; } /* 鐢熶骇璁㈠崟鍙� */
+.progress-table th:nth-child(2) { width: 15%; } /* 浜у搧鍚嶇О */
+.progress-table th:nth-child(3) { width: 15%; } /* 瑙勬牸 */
+.progress-table th:nth-child(4) { width: 12%; } /* 闇�姹傛暟閲� */
+.progress-table th:nth-child(5) { width: 12%; } /* 瀹屾垚鏁伴噺 */
+.progress-table th:nth-child(6) { width: 31%; } /* 瀹屾垚杩涘害 */
+
+.progress-table td {
+ padding: 8px 6px;
+ border-bottom: 1px solid rgba(184, 200, 224, 0.1);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 12px;
+ transition: opacity 0.3s ease;
+}
+
+.progress-table tbody tr:hover {
+ background-color: rgba(184, 200, 224, 0.1);
+}
+
+.progress-table tbody tr.row-under-header {
+ opacity: 0.5;
+}
+
+/* el-progress 缁勪欢鏍峰紡璋冩暣 */
+.progress-table :deep(.el-progress) {
+ width: 100%;
+}
+
+.progress-table :deep(.el-progress-bar__outer) {
+ background-color: rgba(184, 200, 224, 0.2);
+}
+
+.progress-table :deep(.el-progress__text) {
+ color: #B8C8E0;
+ font-size: 11px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3