From b7604dde06685e5c42a6f7d375a26741c7b600fd Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 15:49:43 +0800
Subject: [PATCH] fix: 基础大屏页面重构90%
---
src/views/reportAnalysis/dataDashboard/index.vue | 2059 ++++------------------------------------------------------
1 files changed, 159 insertions(+), 1,900 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index 5c318c8..d1bd0d9 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -1,329 +1,62 @@
<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="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">{{ userStore.currentFactoryName }}</div>
- </div>
-
- <!-- 涓昏鍐呭鍖哄煙 -->
- <div class="dashboard-content">
- <!-- 宸︿晶鍖哄煙 -->
- <div class="left-panel">
- <!-- 瀹㈡埛淇℃伅缁熻鍒嗘瀽 -->
- <div class="panel-header">
- <span class="panel-title">鍦ㄥ埗鍝佺粺璁″垎鏋�</span>
- </div>
- <div class="panel-item-customers">
- <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="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="height: 70%">
- <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">杩�4鏈堣川閲忕粺璁�</span>
- </div>
- <div class="main-panel">
- <div class="panel-item-customers">
- <div class="quality-cards">
- <div class="quality-cardSec">
- <div class="quality-card one"></div>
- <div class="quality-cardTitle">
- <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>{{qualityStatisticsObject.processNum}}浠�</div>
- </div>
- </div>
- <div class="quality-cardSec">
- <div class="quality-card three"></div>
- <div class="quality-cardTitle">
- <div>鍑哄巶妫�鏁�</div>
- <div>{{qualityStatisticsObject.factoryNum}}浠�</div>
- </div>
- </div>
- </div>
- <Echarts ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend"
- :series="barSeries1"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
- style="height: 260px"></Echarts>
- </div>
- </div>
- </div>
-
- <!-- 涓棿鍖哄煙 -->
- <div class="center-panel">
- <!-- 椤堕儴缁熻鍗＄墖 -->
- <div class="stats-cards">
- <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 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">{{totalCustomers}}</span>
- </div>
- </div>
- <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">{{totalSuppliers}}</span>
- </div>
- </div>
- </div>
-
- <!-- 璁惧缁熻 -->
- <div class="equipment-stats">
- <div class="equipment-header">
- <img src="@/assets/BI/shujutongjiicon@2x.png" alt="鍥炬爣" class="equipment-icon" />
- <span class="equipment-title">璁惧缁熻</span>
- </div>
- <div class="equipment-items">
- <div class="equipment-item">
- <span class="equipment-value">{{equipmentNum}}</span>
- <span class="equipment-label">璁惧鎬绘暟</span>
- </div>
- <div class="equipment-item">
- <span class="equipment-value">{{equipmentRepair}}</span>
- <span class="equipment-label">寰呯淮淇澶�</span>
- </div>
- <div class="equipment-item">
- <span class="equipment-value">{{equipmentMaintain}}</span>
- <span class="equipment-label">寰呬繚鍏昏澶�</span>
- </div>
- <div class="equipment-item">
- <span class="equipment-value">{{totalMeasuring}}</span>
- <span class="equipment-label">璁￠噺鍣ㄥ叿鎬绘暟</span>
- </div>
- </div>
- </div>
-
- <!-- 浜嬩欢鍚嶇О -->
- <div class="event-info">
- <div class="event-header">
- <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="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">
- <div style="display: flex;justify-content: space-between;align-items: center;">
- <div class="todo-title">寰呭姙缂栧彿锛歿{item.approveId}}</div>
- <div class="todo-division">閮ㄩ棬锛歿{item.approveDeptName}}</div>
- <div class="todo-time">{{item.approveTime}}</div>
- </div>
- <div class="todo-division">寰呭姙浜嬬敱锛歿{item.approveReason}}</div>
- </div>
- </li>
- </ul>
- <div v-else style="text-align: center">
- 鏆傛棤鏁版嵁
- </div>
- </div>
- </div>
-
- <div class="financial-header">
- <span class="financial-title">鍚勭敓浜ц鍗曠殑瀹屾垚杩涘害缁熻</span>
- </div>
- <div class="main-panel">
- <div class="panel-item-customers">
- <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>
- <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>
-
- <!-- 鍙充晶鍖哄煙 -->
- <div class="right-panel">
- <!-- 搴旀敹搴斾粯缁熻 -->
- <div class="panel-header">
- <span class="panel-title">搴旀敹搴斾粯缁熻</span>
- </div>
- <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>-->
- </div>
- <Echarts ref="chart"
- :color="barColors2"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend2"
- :series="barSeries"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
- style="height: 260px"></Echarts>
- </div>
-
- <!-- 鍥炴涓庡紑绁ㄥ垎鏋� -->
- <div class="panel-header">
- <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"
- :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" :options="{backgroundColor: 'transparent', textStyle: {color: '#FFFFFF'}}" style="height: 270px;"></Echarts>
- </div>
- </div>
- </div>
- </div>
+ <!-- 椤堕儴鏍囬鏍� -->
+ <div class="dashboard-header">
+ <div class="factory-name">{{ userStore.currentFactoryName }}</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 * as echarts from 'echarts'
-import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
-import Echarts from "@/components/Echarts/echarts.vue";
+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 {
- analysisCustomerContractAmounts, getAmountHalfYear,
- homeTodos,
- qualityStatistics,
- statisticsReceivablePayable,
- getProgressStatistics,
- getWorkInProcessTurnover
-} from "@/api/viewIndex.js";
-import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
-import {listCustomer} from "@/api/basicData/customerFile.js";
-import {listSupplier} from "@/api/basicData/supplierManageFile.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 {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";
-import {productOrderListPage} from "@/api/productionManagement/productionOrder.js";
// 鍏ㄥ睆鐩稿叧鐘舵��
const isFullscreen = ref(false);
@@ -337,431 +70,20 @@
// 鐢ㄦ埛store
const userStore = useUserStore()
-// 鍝嶅簲寮忔暟鎹�
-const currentTime = ref('')
-const currentDate = ref('')
-const timer = ref(null)
-const charts = ref([])
-
-// 鍥捐〃寮曠敤
-const customerPieChartRef = ref(null)
-const salesBarChartRef = ref(null)
-const dataBarChartRef = ref(null)
-const financialAreaChartRef = ref(null)
-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: '100%',
- height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-const materialPieSeries = ref([
- {
- type: 'pie',
- radius: ['0%', '90%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 0
- },
- label: {
- show: false
- },
- data: []
- }
-])
-const pieLegend = reactive({
- show: false,
-})
-const sum = ref(0)
-const totalStaff = ref(0)
-const totalCustomers = ref(0)
-const totalSuppliers = ref(0)
-const yny = ref(0)
-const chain = ref(0)
-const equipmentNum = ref(0)
-const equipmentRepair = ref(0)
-const equipmentMaintain = ref(0)
-const totalMeasuring = ref(0)
-const pieTooltip = reactive({
- trigger: 'item',
- formatter: function (params) {
- // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
- const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
- return `<div style="color: #B8C8E0">${description} ${params.value}鍏� ${params.percent}%</div>`;
- },
- position: 'right'
-})
-
-const qualityStatisticsObject = ref({
- 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%',
- height: '150%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-const barSeries = ref([
- {
- name: '搴斾粯閲戦',
- type: 'bar',
- data: [],
- label: {
- show: true,
- },
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#00A4ED' },
- { offset: 1, color: '#4EE4FF' }
- ])
- }
- },
- {
- name: '搴旀敹閲戦',
- type: 'bar',
- data: [],
- label: {
- show: true,
- },
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#537EF5' },
- { offset: 1, color: '#9061F8' }
- ])
- }
- }
-])
-const radio1 = ref(1)
-const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
-}
-const lineLegend = {
- show: true,
- textStyle: { color: '#B8C8E0' },
- data: ['寮�绁�', '鍥炴']
-}
-const lineSeries = ref([
- {
- type: 'line',
- data: [],
- label: {
- show: true
- },
- showSymbol: true, // 鏄剧ず鍦嗙偣
- },
-])
-const tooltipLine = {
- trigger: 'axis',
-}
-const yAxis2 = ref([
- {
- type: 'value',
- }
-])
-const xAxis2 = ref([
- {
- type: 'category',
- data: [],
- axisLabel: {
- interval: 0,
- formatter: function(value) {
- return value.replace(/~/g, '\n');
- },
- }
- }
-])
-const barLegend2 = {
- show: true,
- textStyle: { color: '#B8C8E0' },
- data: ['搴斾粯閲戦', '搴旀敹閲戦']
-}
-const barLegend = {
- show: true,
- textStyle: { color: '#B8C8E0' },
- data: ['鍘熸潗鏂欏悎鏍兼暟', '杩囩▼鍚堟牸鏁�', '鍑轰笉鍚堟牸鏁�']
-}
-const barLegend1 = {
- show: false,
- textStyle: { color: '#B8C8E0' },
- data: []
-}
-const barSeries11 = ref([
- {
- name: '鐢熶骇璁㈠崟缁熻',
- type: 'bar',
- barGap: 0,
- emphasis: {
- focus: 'series'
- },
- itemStyle: {
- // 浣跨敤鍑芥暟鏍规嵁鏁版嵁绱㈠紩杩斿洖涓嶅悓棰滆壊
- 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: []
- }
-])
-const barSeries1 = ref([
- {
- 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' }
- ]
- }
- },
- 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 tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: function (params) {
- let result = params[0].axisValueLabel + '<br/>';
- params.forEach(item => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`;
- });
- return result;
- }
-}
-const xAxis = [{
- type: 'value',
-}]
-const yAxis = [{
- type: 'category',
- data: ['搴旀敹搴斾粯缁熻']
-}]
-const xAxis1 = ref([{
- type: 'category',
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- data: []
-}])
-const yAxis1 = [{
- type: 'value',
- axisLabel: { color: '#B8C8E0' }
-}]
-const xAxis3 = ref([{
- type: 'category',
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- data: []
-}])
-const yAxis3 = [{
- type: 'value',
- 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 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 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()
- }
- })
}
// 绐楀彛澶у皬鍙樺寲澶勭悊
@@ -772,529 +94,29 @@
}, 100)
}
-// 閿�姣佸浘琛ㄥ疄渚�
-const disposeCharts = () => {
- charts.value.forEach(chart => {
- if (chart && chart.dispose) {
- chart.dispose()
- }
- })
- charts.value = []
-}
-// 鍚堝悓閲戦
-const analysisCustomer = () => {
- analysisCustomerContractAmounts().then((res) => {
- sum.value = res.data.sum
- yny.value = res.data.yny
- chain.value = res.data.chain
- // 涓烘瘡涓暟鎹」鍒嗛厤闅忔満棰滆壊
- materialPieSeries.value[0].data = res.data.item.map(item => ({
- ...item,
- itemStyle: { color: getRandomColor() }
- }))
- })
-}
-// 鍦ㄥ埗鍝佸懆杞粺璁�
-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) => {
- res.data.item.forEach(item => {
- xAxis1.value[0].data.push(item.date)
- barSeries1.value[0].data.push(item.supplierNum)
- barSeries1.value[1].data.push(item.processNum)
- barSeries1.value[2].data.push(item.factoryNum)
- })
- qualityStatisticsObject.value.supplierNum = res.data.supplierNum
- qualityStatisticsObject.value.processNum = res.data.processNum
- qualityStatisticsObject.value.factoryNum = res.data.factoryNum
- })
-}
-// 鍚勭敓浜ц鍗曠殑瀹屾垚杩涘害缁熻
-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,
- pageSize: -1,
- }
- staffOnJobListPage({...params, staffState: 1}).then(res => {
- totalStaff.value = res.data.total
- })
- listCustomer(params).then((res) => {
- totalCustomers.value = res.total;
- });
- listSupplier(params).then((res) => {
- totalSuppliers.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 todoInfoS = () => {
- homeTodos().then((res) => {
- todoList.value = res.data
- // 鍦ㄨ幏鍙栧埌寰呭姙浜嬮」鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
- nextTick(() => {
- initTodoListScroll()
- })
- })
-}
-// 搴斾粯搴旀敹缁熻
-const statisticsReceivable = (type) => {
- statisticsReceivablePayable({type: radio1.value}).then((res) => {
- // 璁剧疆搴斾粯閲戦鏁版嵁
- barSeries.value[0].data = [
- { value: res.data.payableMoney }
- ]
- // 璁剧疆搴旀敹閲戦鏁版嵁
- barSeries.value[1].data = [
- { value: res.data.receivableMoney }
- ]
- })
-}
-const getAmountHalfYearNum = async () => {
- const res = await getAmountHalfYear()
- console.log(res)
- const monthName = []
- const receiptAmount = []
- const invoiceAmount = []
- res.data.forEach(item => {
- monthName.push(item.month)
- receiptAmount.push(item.receiptAmount)
- invoiceAmount.push(item.invoiceAmount)
- })
- // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
- xAxis2.value[0].data = monthName
- xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
- lineSeries.value = [
- {
- name: '寮�绁�',
- type: 'line',
- data: receiptAmount,
- stack: 'Total',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(131, 207, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(186, 228, 255, 1)'
- }
- ])
- },
- itemStyle: {
- color: '#2D99FF',
- borderColor: '#2D99FF'
- },
- emphasis: {
- focus: 'series'
- },
- lineStyle: {
- width: 0
- },
- showSymbol: true,
- },
- {
- name: '鍥炴',
- type: 'line',
- data: invoiceAmount,
- stack: 'Total',
- lineStyle: {
- width: 0
- },
- itemStyle: {
- color: '#83CFFF',
- borderColor: '#83CFFF'
- },
- showSymbol: true,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(54, 153, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(89, 169, 254, 1)'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- }
- ]
-}
-
-// 鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
-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
- // 寮哄埗鍚敤婊氬姩锛屼笉妫�鏌ヤ换浣曟潯浠�
- if (todoList) {
- // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
- const scrollItems = Array.from(todoList.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)
- todoList.appendChild(clone)
- })
- }
- // 閲嶆柊鑾峰彇鎵�鏈夐」鐩�
- scrollItems.push(...Array.from(todoList.querySelectorAll('li')).slice(scrollItems.length));
- }
- const itemHeight = scrollItems[0]?.offsetHeight || 0
- const containerHeight = todoList.clientHeight
- const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
-
- // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
- for (let i = 0; i < cloneCount; i++) {
- const clone = scrollItems[i % scrollItems.length].cloneNode(true)
- todoList.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(todoList.scrollHeight - containerHeight - cloneCount * itemHeight, itemHeight * scrollItems.length)
- if (scrollPosition >= maxScroll) {
- scrollPosition = 0
- todoList.scrollTop = 0
- } else {
- todoList.scrollTop = scrollPosition
- }
- }
-
- todoList._animationFrame = requestAnimationFrame(scrollAnimation)
- }
-
- // 鍚姩婊氬姩鍔ㄧ敾
- todoList._animationFrame = requestAnimationFrame(scrollAnimation)
-
- // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
- const pauseTimer = setInterval(() => {
- isPaused = !isPaused
- }, pauseTime)
-
- // 娓呯悊瀹氭椂鍣�
- todoList._pauseTimer = pauseTimer
- }
- }
-}
-const getRandomColor = () => {
- // 鐢熸垚娴呰壊锛歊銆丟銆丅 鍒嗛噺閮藉湪 150-255 涔嬮棿
- const r = Math.floor(Math.random() * 106) + 150; // 150-255
- const g = Math.floor(Math.random() * 106) + 150; // 150-255
- const b = Math.floor(Math.random() * 106) + 150; // 150-255
- // 灏� RGB 杞崲涓哄崄鍏繘鍒堕鑹�
- return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
-}
-
-// 鏇存柊鏃堕棿
-const updateTime = () => {
- const now = new Date()
- currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
- currentDate.value = now.toLocaleDateString('zh-CN', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- weekday: 'long'
- })
-}
-
-// 鍒濆鍖栨椂闂�
-const initTime = () => {
- updateTime()
- timer.value = setInterval(updateTime, 1000)
-}
// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
const toggleFullscreen = () => {
- 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()
- }
- }
+ 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()
+ }
+ }
}
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
@@ -1303,7 +125,7 @@
document.webkitFullscreenElement ||
document.msFullscreenElement
isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')
-
+
// 鍏ㄥ睆鐘舵�佸彉鍖栨椂锛屽欢杩熼噸鏂拌绠楃缉鏀炬瘮渚嬶紙纭繚DOM鏇存柊瀹屾垚锛�
setTimeout(() => {
calculateScale()
@@ -1312,146 +134,19 @@
// 鐢熷懡鍛ㄦ湡閽╁瓙
onMounted(() => {
- initTime()
- // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
nextTick(() => {
// 璁＄畻鍒濆缂╂斁姣斾緥
calculateScale()
-
- // 鍒濆鍖朼utofit鑷�傚簲锛堝鏋滈渶瑕佷繚鐣檃utofit锛屽彲浠ヤ繚鐣欙紝浣嗕富瑕佺缉鏀剧敱scale-container鎺у埗锛�
- // autofit.init({ dh: 800, dw: 1280, el: '.data-dashboard', resize: true }, false)
-
- // 娣诲姞鑷姩婊氬姩鍔ㄧ敾鏁堟灉 - 瀹㈡埛淇℃伅鍒楄〃
- const contractList = refContractList.value
- if (contractList && contractList.scrollHeight > contractList.clientHeight) {
- // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
- const scrollItems = Array.from(contractList.querySelectorAll('li'))
- const itemHeight = scrollItems[0]?.offsetHeight || 0
- const containerHeight = contractList.clientHeight
- const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
-
- // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
- for (let i = 0; i < cloneCount; i++) {
- const clone = scrollItems[i % scrollItems.length].cloneNode(true)
- contractList.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鐨勯�熷害
-
- // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
- if (scrollPosition >= contractList.scrollHeight - containerHeight - cloneCount * itemHeight) {
- scrollPosition = 0
- contractList.scrollTop = 0
- } else {
- contractList.scrollTop = scrollPosition
- }
- }
-
- timerScroll.value = requestAnimationFrame(scrollAnimation)
- }
-
- // 鍚姩婊氬姩鍔ㄧ敾
- timerScroll.value = requestAnimationFrame(scrollAnimation)
-
- // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
- const pauseTimer = setInterval(() => {
- isPaused = !isPaused
- }, pauseTime)
-
- // 娓呯悊瀹氭椂鍣�
- contractList._pauseTimer = pauseTimer
- }
-
- // 寰呭姙浜嬮」鍒楄〃婊氬姩鍔熻兘宸茬Щ鑷硉odoInfoS鍑芥暟涓紝鍦ㄨ幏鍙栨暟鎹悗鍒濆鍖�
})
-
+
window.addEventListener('resize', handleResize)
window.addEventListener('fullscreenchange', handleFullscreenChange)
window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
window.addEventListener('MSFullscreenChange', handleFullscreenChange)
- analysisCustomer()
- workInProcessTurnoverInfo()
- qualityStatisticsInfo()
- // accountStatisticsInfo()
- progressStatisticsInfo()
- getNum()
- getLedgerNum()
- todoInfoS()
- statisticsReceivable()
- getAmountHalfYearNum()
-
- // 璁剧疆鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣紝姣�10绉掑垏鎹竴娆�
- autoSwitchTimer.value = setInterval(() => {
- // 寰幆鍒囨崲锛�1(鍛�) -> 2(鏈�) -> 3(瀛ｅ害) -> 1(鍛�)
- radio1.value = radio1.value === 3 ? 1 : radio1.value + 1
- statisticsReceivable()
- }, 10000) // 10绉掑垏鎹竴娆�
})
onBeforeUnmount(() => {
- if (timer.value) {
- clearInterval(timer.value)
- }
- if (timerScroll.value) {
- cancelAnimationFrame(timerScroll.value)
- }
- // 娓呯悊婊氬姩鍒楄〃鐨勬殏鍋滃畾鏃跺櫒
- const contractList = refContractList.value
- if (contractList && contractList._pauseTimer) {
- clearInterval(contractList._pauseTimer)
- }
-
- // 娓呯悊寰呭姙浜嬮」鍒楄〃鐨勫姩鐢诲拰瀹氭椂鍣�
- const todoList = refTodoList.value
- if (todoList) {
- if (todoList._animationFrame) {
- cancelAnimationFrame(todoList._animationFrame)
- todoList._animationFrame = null
- }
- if (todoList._pauseTimer) {
- clearInterval(todoList._pauseTimer)
- todoList._pauseTimer = null
- }
- }
-
- // 娓呯悊鐢熶骇璁㈠崟杩涘害琛ㄦ牸鐨勫姩鐢诲拰瀹氭椂鍣�
- 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)
- autoSwitchTimer.value = null
- }
-
window.removeEventListener('resize', handleResize)
window.removeEventListener('fullscreenchange', handleFullscreenChange)
window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
@@ -1461,7 +156,6 @@
window.removeEventListener('resize', window._autofitUpdateHandler)
delete window._autofitUpdateHandler
}
- disposeCharts()
// 鍏抽棴autofit
autofit.off()
})
@@ -1470,74 +164,74 @@
<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;
+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;
+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;
+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;
+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;
+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;
+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-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 16px;
@@ -1545,492 +239,57 @@
}
.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;
+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);
+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;
+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;
+overflow: hidden;
}
.left-panel,
.right-panel {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 24px;
- width: 520px;
+flex: 1;
+display: flex;
+flex-direction: column;
+gap: 24px;
+width: 520px;
}
.center-panel {
- flex: 1.5;
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-.panel-item-customers {
- border: 1px solid #1A58B0;
- padding: 18px;
- width: 100%;
- height: 540px;
-}
-.panel-title-second {
- height: 60px;
- display: flex;
- gap: 12px;
- margin-bottom: 20px;
- align-items: center;
-}
-.quality-cards {
- display: flex;
- gap: 12px;
- width: 100%;
- height: 54px;
- justify-content: space-between;
- align-items: center;
-}
-.quality-cardSec {
- display: flex;
-}
-.quality-cardTitle {
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-}
-.quality-card {
- width: 80px;
- height: 60px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
-}
-.quality-card.one {
- background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
-}
-.quality-card.two {
- background-image: url("@/assets/BI/guochengyijianicon@2x.png");
-}
-.quality-card.three {
- background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
+flex: 1.5;
+display: flex;
+flex-direction: column;
+gap: 20px;
}
-/* 璁㈠崟缁熻鍗＄墖鏍峰紡 */
-.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;
- height: 60px;
- background-image: url("@/assets/BI/hetongicon.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.panel-header {
- background-image: url("@/assets/BI/kehuhetongback@2x.png");
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.panel-title {
- width: 100%;
- font-weight: 500;
- font-size: 16px;
- color: #D9ECFF;
- padding-left: 46px;
- line-height: 36px;
-}
-.total-customers {
- background-image: url("@/assets/BI/hetongjineback@2x.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- width: 90%;
- height: 60px;
- display: flex;
- align-items: center;
- padding: 0 20px;
- gap: 20px;
-}
-
-.total-customers .label {
- font-weight: 500;
- font-size: 16px;
- color: #FFFFFF;
-}
-
-.total-customers .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;
-}
-
-.contract-list {
- margin-top: 16px;
- font-size: 14px;
- color: #666;
- list-style: none;
- padding: 0;
- height: 82%;
- overflow-y: auto;
- width: 460px;
- /* 闅愯棌婊氬姩鏉′絾淇濈暀婊氬姩鍔熻兘 */
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE鍜孍dge */
-}
-
-/* Chrome銆丼afari鍜孫pera */
-.contract-list::-webkit-scrollbar {
- display: none;
-}
-.line {
- position: relative;
- width: 230px;
-}
-.line::after {
- content: '';
- position: absolute;
- right: 2px;
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: #C9C5C5;
- border-radius: 2px;
-}
-.contract-list li {
- margin-top: 10px;
-}
-.stats-cards {
- display: flex;
- gap: 30px;
-}
-
-.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-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
-}
-
-.card-content {
- display: flex;
- flex-direction: column;
- gap: 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-label {
- font-weight: 400;
- font-size: 19px;
- color: rgba(208,231,255,0.7);
-}
-
-.equipment-stats {
- border: 1px solid #1A58B0;
- padding: 18px;
- height: 240px;
-}
-.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-title {
- font-weight: 500;
- font-size: 21px;
- background: linear-gradient(360deg, #056DFF 0%, #43E8FC 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- line-height: 50px;
-}
-.equipment-icon {
- width: 50px;
- height: 50px;
-}
-.equipment-items {
- display: flex;
- justify-content: space-around;
- gap: 30px;
-}
-
-.equipment-item {
- text-align: center;
-}
-
-.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-label {
- font-weight: 500;
- font-size: 21px;
- color: #FFFFFE;
-}
-
-.event-info {
- background-image: url("@/assets/BI/shijianmingchengbeijing@2x.png");
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- padding: 20px;
- height: 186px;
-}
-.event-header {
- display: flex;
- align-items: center;
-}
-.event-icon {
- width: 40px;
- height: 40px;
-}
-.event-title {
- font-weight: 500;
- font-size: 24px;
- color: #FFFFFE;
- line-height: 30px;
-}
-.todo-list {
- list-style: none;
- padding: 0;
- margin: 0;
- height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
- overflow: hidden;
- font-size: 15px;
-}
-.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: 20px;
- color: #FFFFFE;
- position: relative;
-}
-.todo-title::before {
- content: ''; /* 蹇呴渶锛岃〃绀鸿繖閲屾湁涓�涓唴瀹� */
- position: absolute;
- left: -10px; /* 瀹氫綅鍒板乏渚� */
- top: 50%; /* 鍨傜洿灞呬腑 */
- transform: translateY(-50%); /* 寰皟鍨傜洿灞呬腑 */
- width: 6px; /* 鍦嗙殑鐩村緞 */
- height: 6px; /* 鍦嗙殑鐩村緞 */
- background: #498CEB;
- border-radius: 50%; /* 璁╁叾鍙樻垚鍦嗗舰 */
-}
-.todo-division {
- font-weight: 400;
- font-size: 20px;
- color: #FFFFFE;
-}
-.todo-time {
- font-weight: 400;
- font-size: 20px;
- color: #FFFFFE;
-}
-.financial-header {
- background-image: url("@/assets/BI/caiwufenxiback@2x.png");
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
-}
-.financial-title {
- width: 100%;
- font-weight: 500;
- font-size: 16px;
- color: #D9ECFF;
- padding-left: 46px;
- line-height: 36px;
-}
-
-/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
-.custom-radio-group :deep(.el-radio-button__inner) {
- background-color: transparent;
- color: white;
- border-color: rgba(255, 255, 255, 0.3);
-}
-
-.custom-radio-group :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
- background-color: rgba(255, 255, 255, 0.2);
- color: white;
- border-color: rgba(255, 255, 255, 0.5);
- box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.5);
-}
-
-/* 鐢熶骇璁㈠崟杩涘害琛ㄦ牸鏍峰紡 */
-.progress-table-container {
- height: 200px;
- 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