From 5b1de6eb3e13067e67cc83fa4f3f7852cb5be578 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 11 十二月 2025 17:09:45 +0800
Subject: [PATCH] 1.安佑-BI大屏展示修改
---
src/views/reportAnalysis/dataDashboard/index.vue | 941 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 526 insertions(+), 415 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index 9848898..afc4bee 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -1,36 +1,36 @@
<template>
- <div class="data-dashboard">
- <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
- <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="data-dashboard">
+ <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
+ <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="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>
-<!-- <div class="jiantou"></div>-->
+ <!-- <div class="jiantou"></div>-->
</div>
<!-- 楗煎浘鍖哄煙 -->
<div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 82%;margin-top: 20px">
@@ -50,11 +50,52 @@
</li>
</ul>
</div>
- </div>
-
- <!-- 璐ㄩ噺缁熻 -->
- <div class="panel-header">
- <span class="panel-title">璐ㄩ噺缁熻</span>
+ </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="panel-header">
+ <span class="panel-title">杩�4涓湀浠撳簱缁熻</span>
</div>
<div class="main-panel">
<div class="panel-item-customers">
@@ -62,24 +103,24 @@
<div class="quality-cardSec">
<div class="quality-card one"></div>
<div class="quality-cardTitle">
- <div>鍘熸潗鏂欏凡妫�娴嬫暟</div>
- <div>{{qualityStatisticsObject.supplierNum}}浠�</div>
+ <div>鍏ュ簱鏁伴噺</div>
+ <div>{{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>{{factoryNum}}浠�</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 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"
@@ -93,85 +134,110 @@
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 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>
+ </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">{{noWorkListLength}}</span>
+ <span class="equipment-label">寰呮帓浜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{workListLength}}</span>
+ <span class="equipment-label">宸叉帓浜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{noListPageProcessLength}}</span>
+ <span class="equipment-label">寰呮姤宸�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{listPageProcessLength}}</span>
+ <span class="equipment-label">宸叉姤宸�</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">{{rawMaterialQualifiedRate}}%</span>
+ <span class="equipment-label">鍘熸潗鏂欏悎鏍肩巼</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{processQualifiedRate}}%</span>
+ <span class="equipment-label">杩囩▼鍚堟牸鐜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{factoryQualifiedRate}}%</span>
+ <span class="equipment-label">鍑哄巶鍚堟牸鐜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{inventoryTurnoverRate}}%</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>
@@ -191,31 +257,31 @@
:xAxis="xAxis3"
:yAxis="yAxis3"
:options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
- style="height: 300px"></Echarts>
+ style="height: 280px"></Echarts>
</div>
</div>
- </div>
-
- <!-- 鍙充晶鍖哄煙 -->
- <div class="right-panel">
- <!-- 搴旀敹搴斾粯缁熻 -->
+ </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>
+ <!-- <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"
+ :legend="barLegend2"
:series="barSeries"
:tooltip="tooltip"
:xAxis="xAxis"
@@ -223,18 +289,18 @@
:options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
style="height: 260px"></Echarts>
</div>
-
- <!-- 鍥炴涓庡紑绁ㄥ垎鏋� -->
- <div class="panel-header">
+
+ <!-- 鍥炴涓庡紑绁ㄥ垎鏋� -->
+ <div class="panel-header">
<span class="panel-title">鍥炴涓庡紑绁ㄥ垎鏋�</span>
</div>
- <div class="panel-item-customers" style="padding-top: 60px;">
+ <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>
+ :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" :options="{backgroundColor: 'transparent', textStyle: {color: '#FFFFFF'}}" style="height: 270px;"></Echarts>
</div>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
@@ -245,7 +311,7 @@
import useUserStore from '@/store/modules/user'
import {
analysisCustomerContractAmounts, getAmountHalfYear,
- homeTodos,
+ homeTodos, inventoryStatistics, qualityProductQualifiedRate,
qualityStatistics,
statisticsReceivablePayable
} from "@/api/viewIndex.js";
@@ -257,6 +323,8 @@
import {getUpkeepPage} from "@/api/equipmentManagement/upkeep.js";
import {measuringInstrumentListPage} from "@/api/equipmentManagement/measurementEquipment.js";
import {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";
+import {workListPage} from "@/api/productionManagement/productionReporting.js";
+import {listPageProcess} from "@/api/productionManagement/operationScheduling.js";
// 鍏ㄥ睆鐩稿叧鐘舵��
const isFullscreen = ref(false);
@@ -312,6 +380,16 @@
const equipmentRepair = ref(0)
const equipmentMaintain = ref(0)
const totalMeasuring = ref(0)
+const rawMaterialQualifiedRate = ref(0)
+const processQualifiedRate = ref(0)
+const factoryQualifiedRate = ref(0)
+const inventoryTurnoverRate = ref(0)
+const noWorkListLength = ref(0)
+const workListLength = ref(0)
+const noListPageProcessLength = ref(0)
+const listPageProcessLength = ref(0)
+const supplierNum = ref(0)
+const factoryNum = ref(0)
const pieTooltip = reactive({
trigger: 'item',
formatter: function (params) {
@@ -371,7 +449,7 @@
}
const lineLegend = {
show: true,
- textStyle: { color: '#B8C8E0' },
+ textStyle: { color: '#B8C8E0' },
data: ['寮�绁�', '鍥炴']
}
const lineSeries = ref([
@@ -408,11 +486,6 @@
show: true,
textStyle: { color: '#B8C8E0' },
data: ['搴斾粯閲戦', '搴旀敹閲戦']
-}
-const barLegend = {
- show: true,
- textStyle: { color: '#B8C8E0' },
- data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
}
const barLegend1 = {
show: true,
@@ -485,9 +558,14 @@
data: []
},
])
+const barLegend = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺']
+}
const barSeries1 = ref([
{
- name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ name: '鍏ュ簱鏁伴噺',
type: 'bar',
barGap: 0,
emphasis: {
@@ -509,7 +587,7 @@
data: []
},
{
- name: '杩囩▼涓嶅悎鏍兼暟',
+ name: '鍑哄簱鏁伴噺',
type: 'bar',
emphasis: {
focus: 'series'
@@ -524,27 +602,6 @@
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' }
]
}
},
@@ -597,21 +654,21 @@
// 绐楀彛澶у皬鍙樺寲澶勭悊
const handleResize = () => {
- charts.value.forEach(chart => {
- if (chart && chart.resize) {
- chart.resize()
- }
- })
+ charts.value.forEach(chart => {
+ if (chart && chart.resize) {
+ chart.resize()
+ }
+ })
}
// 閿�姣佸浘琛ㄥ疄渚�
const disposeCharts = () => {
- charts.value.forEach(chart => {
- if (chart && chart.dispose) {
- chart.dispose()
- }
- })
- charts.value = []
+ charts.value.forEach(chart => {
+ if (chart && chart.dispose) {
+ chart.dispose()
+ }
+ })
+ charts.value = []
}
// 鍚堝悓閲戦
const analysisCustomer = () => {
@@ -640,6 +697,27 @@
qualityStatisticsObject.value.factoryNum = res.data.factoryNum
})
}
+// 浜у搧鍚堟牸鐜�
+const qualityProductQualifiedRateInfo = () => {
+ qualityProductQualifiedRate().then((res) => {
+ rawMaterialQualifiedRate.value = res.data.rawMaterialQualifiedRate
+ processQualifiedRate.value = res.data.processQualifiedRate
+ factoryQualifiedRate.value = res.data.factoryQualifiedRate
+ inventoryTurnoverRate.value = res.data.inventoryTurnoverRate
+ })
+}
+// 浜у搧鍚堟牸鐜�
+const inventoryStatisticsInfo = () => {
+ inventoryStatistics().then((res) => {
+ supplierNum.value = res.data.supplierNum
+ factoryNum.value = res.data.factoryNum
+ 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.factoryNum)
+ })
+ })
+}
// 璐㈠姟缁熻
const accountStatisticsInfo = () => {
listPageAnalysis().then((res) => {
@@ -649,6 +727,36 @@
barSeries11.value[2].data = res.data.netIncome
})
}
+// 鐢熶骇鏁版嵁
+const workListPageInfo = () => {
+ const params = {
+ current: -1,
+ size: -1,
+ status: 3
+ }
+ const params1 = {
+ current: -1,
+ size: -1,
+ status: 1
+ }
+ // 宸叉姤宸ユ煡璇�
+ workListPage(params).then(res => {
+ workListLength.value = res.data.records.length
+ })
+ // 宸叉帓浜ф煡璇�
+ listPageProcess(params).then(res => {
+ listPageProcessLength.value = res.data.records.length
+ })
+ // 寰呮姤宸ユ煡璇�
+ workListPage(params1).then(res => {
+ noWorkListLength.value = res.data.records.length
+ })
+ // 寰呮帓浜ф煡璇�
+ listPageProcess(params1).then(res => {
+ noListPageProcessLength.value = res.data.records.length
+ })
+}
+
const getNum = () => {
const params = {
pageNum: -1,
@@ -669,7 +777,7 @@
pageNum: -1,
pageSize: -1,
}
- getLedgerPage(params).then((res) => {
+ getLedgerPage({}).then((res) => {
equipmentNum.value = res.data.total
});
getRepairPage(params).then((res) => {
@@ -866,20 +974,20 @@
// 鏇存柊鏃堕棿
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 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)
+ updateTime()
+ timer.value = setInterval(updateTime, 1000)
}
// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝data-dashboard鍏冪礌
const toggleFullscreen = () => {
@@ -908,146 +1016,149 @@
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
const handleFullscreenChange = () => {
- const fullscreenElement = document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.msFullscreenElement
- isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('data-dashboard')
+ const fullscreenElement = document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.msFullscreenElement
+ isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('data-dashboard')
}
// 鐢熷懡鍛ㄦ湡閽╁瓙
onMounted(() => {
- initTime()
- // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
- nextTick(() => {
- // 鍒濆鍖朼utofit鑷�傚簲
- autofit.init({ dh: 1080, dw: 1920, 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)
- analysisCustomer()
- qualityStatisticsInfo()
+ initTime()
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
+ nextTick(() => {
+ // 鍒濆鍖朼utofit鑷�傚簲
+ autofit.init({ dh: 1080, dw: 1920, 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)
+ analysisCustomer()
+ // qualityStatisticsInfo()
+ qualityProductQualifiedRateInfo()
+ inventoryStatisticsInfo()
accountStatisticsInfo()
- getNum()
- getLedgerNum()
- todoInfoS()
+ workListPageInfo()
+ 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绉掑垏鎹竴娆�
+
+ // 璁剧疆鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣紝姣�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
- }
- }
-
- // 娓呯悊鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
- if (autoSwitchTimer.value) {
- clearInterval(autoSwitchTimer.value)
- autoSwitchTimer.value = null
- }
-
- window.removeEventListener('resize', handleResize)
- window.removeEventListener('fullscreenchange', handleFullscreenChange)
- window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
- window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
- // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
- if (window._autofitUpdateHandler) {
- window.removeEventListener('resize', window._autofitUpdateHandler)
- delete window._autofitUpdateHandler
- }
- disposeCharts()
- // 鍏抽棴autofit
- autofit.off()
+ 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
+ }
+ }
+
+ // 娓呯悊鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
+ if (autoSwitchTimer.value) {
+ clearInterval(autoSwitchTimer.value)
+ autoSwitchTimer.value = null
+ }
+
+ window.removeEventListener('resize', handleResize)
+ window.removeEventListener('fullscreenchange', handleFullscreenChange)
+ window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+ window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+ // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
+ if (window._autofitUpdateHandler) {
+ window.removeEventListener('resize', window._autofitUpdateHandler)
+ delete window._autofitUpdateHandler
+ }
+ disposeCharts()
+ // 鍏抽棴autofit
+ autofit.off()
})
</script>
<style scoped>
.data-dashboard {
- position: relative;
- width: 100%;
+ position: relative;
+ width: 100%;
height: 100%;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
@@ -1057,114 +1168,114 @@
/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 */
.data-dashboard:fullscreen {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: inherit;
- z-index: 9999;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
}
/* Webkit娴忚鍣ㄥ墠缂� */
.data-dashboard:-webkit-full-screen {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: inherit;
- z-index: 9999;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
}
/* MS娴忚鍣ㄥ墠缂� */
.data-dashboard:-ms-fullscreen {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: inherit;
- z-index: 9999;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
}
.dashboard-header {
- position: relative;
- z-index: 1;
- height: 170px;
+ position: relative;
+ z-index: 1;
+ height: 170px;
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;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.factory-name {
- font-weight: 600;
-font-size: 52px;
-color: #FFFFFF;
-top: 32px;
-position: absolute;
+ font-weight: 600;
+ font-size: 52px;
+ color: #FFFFFF;
+ top: 32px;
+ position: absolute;
}
.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% - 120px);
- overflow: hidden;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ gap: 30px;
+ padding: 0 30px;
+ height: calc(100% - 120px);
+ 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;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
width: 520px;
}
.center-panel {
- flex: 1.5;
- display: flex;
- flex-direction: column;
- gap: 20px;
+ flex: 1.5;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
}
.panel-item-customers {
border: 1px solid #1A58B0;
padding: 18px;
width: 100%;
- height: 540px;
+ height: 520px;
}
.panel-title-second {
height: 60px;
@@ -1297,40 +1408,40 @@
margin-top: 10px;
}
.stats-cards {
- display: flex;
- gap: 30px;
+ display: flex;
+ gap: 30px;
}
.stat-card {
- flex: 1;
- display: flex;
- align-items: center;
+ 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;
+ height: 142px;
}
.card-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
+ width: 100px;
+ height: 100px;
+ margin: 20px 20px 0 10px;
}
.card-content {
- display: flex;
- flex-direction: column;
+ 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;
+ background: linear-gradient(360deg, #008BFD 0%, #FFFFFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
.card-label {
@@ -1341,8 +1452,8 @@
.equipment-stats {
border: 1px solid #1A58B0;
- padding: 18px;
- height: 240px;
+ padding: 18px;
+ height: 240px;
}
.equipment-header {
font-weight: 500;
@@ -1366,17 +1477,17 @@
height: 50px;
}
.equipment-items {
- display: flex;
- justify-content: space-around;
- gap: 30px;
+ display: flex;
+ justify-content: space-around;
+ gap: 30px;
}
.equipment-item {
- text-align: center;
+ text-align: center;
}
.equipment-value {
- display: block;
+ display: block;
font-weight: 500;
font-size: 40px;
color: #FFFFFF;
@@ -1387,7 +1498,7 @@
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
- margin-bottom: 8px;
+ margin-bottom: 8px;
}
.equipment-label {
@@ -1401,8 +1512,8 @@
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
- padding: 20px;
- height: 186px;
+ padding: 20px;
+ height: 186px;
}
.event-header {
display: flex;
@@ -1419,12 +1530,12 @@
line-height: 30px;
}
.todo-list {
- list-style: none;
- padding: 0;
- margin: 0;
- height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
- overflow: hidden;
- font-size: 15px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
+ overflow: hidden;
+ font-size: 15px;
}
.todo-list li {
border-radius: 8px;
@@ -1479,15 +1590,15 @@
/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
.custom-radio-group :deep(.el-radio-button__inner) {
- background-color: transparent;
- color: white;
- border-color: rgba(255, 255, 255, 0.3);
+ 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);
+ 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);
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3