From 7972a9b96ccec053cb34a7c31008c5c98c87ad9b Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 20 一月 2026 17:45:17 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/assets/images/chartCard3.svg | 1
src/assets/images/chartCard2.svg | 1
src/views/reportAnalysis/reportManagement/index.vue | 1997 +++++++++++++++++++++++++++++++++++-----------------
src/api/personnelManagement/staffAnalytics.js | 26
src/assets/images/chartCard.svg | 1
src/views/personnelManagement/analytics/index.vue | 216 ++--
6 files changed, 1,475 insertions(+), 767 deletions(-)
diff --git a/src/api/personnelManagement/staffAnalytics.js b/src/api/personnelManagement/staffAnalytics.js
new file mode 100644
index 0000000..83eb375
--- /dev/null
+++ b/src/api/personnelManagement/staffAnalytics.js
@@ -0,0 +1,26 @@
+import request from "@/utils/request.js";
+
+// 绂昏亴鍘熷洜鍒嗘瀽
+export function findStaffLeaveReasonAnalysis() {
+ return request({
+ url: "/staff/analytics/reason",
+ method: "get"
+ });
+}
+
+// 12涓湀鍛樺伐娴佸姩娴佸け鐜囧垎鏋�
+export function findStaffAnalysisMonthlyTurnoverRateFor12Months() {
+ return request({
+ url: "/staff/analytics/monthly_turnover_rate",
+ method: "get"
+ });
+}
+
+export function findStaffAnalysisTotalStatistic() {
+ return request({
+ url: "/staff/analytics/total_statistic",
+ method: "get"
+ });
+}
+
+
diff --git a/src/assets/images/chartCard.svg b/src/assets/images/chartCard.svg
new file mode 100644
index 0000000..32d48b1
--- /dev/null
+++ b/src/assets/images/chartCard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><mask id="master_svg0_88_35670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#FFFFFF" fill-opacity="1"/></mask><clipPath id="master_svg1_88_35666"><rect x="7" y="7" width="27" height="27" rx="0"/></clipPath><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg3_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient></defs><g mask="url(#master_svg0_88_35670)"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#0092FF" fill-opacity="1"/><g clip-path="url(#master_svg1_88_35666)"><path d="M21.175671875,27.58515925L14.263672875000001,27.58515925C13.750673275,27.58515925,13.426672974999999,27.24765625,13.426672974999999,26.74815725C13.426672974999999,26.23515525,13.764173075,25.911160250000002,14.263672875000001,25.911160250000002L21.351173875,25.911160250000002C21.688676875,24.89865825,22.188173875,23.88615425,22.863174875,23.211156250000002L14.263672875000001,23.211156250000002C13.750673275,23.211156250000002,13.426672974999999,22.87365525,13.426672974999999,22.37415225C13.426672974999999,21.87465325,13.764173075,21.537155249999998,14.263672875000001,21.537155249999998L25.738675875,21.537155249999998C26.251674875,21.37515325,26.751174875,21.37515325,27.088676875,21.37515325C28.438678875,21.37515325,29.626676875,21.88815525,30.625678875,22.549656249999998L30.625678875,13.072656349999999C30.625678875,11.38515625,29.275674875,10.03515625,27.588174875,10.03515625L27.075177875,10.03515625L27.075177875,13.24815675C27.075177875,14.935656550000001,25.725173875,16.285657450000002,24.037676875000002,16.285657450000002L16.113174475,16.285657450000002C14.425674475000001,16.272157149999998,13.075673375000001,14.922158249999999,13.075673375000001,13.23465635L13.075673375000001,10.03515625L12.238672475,10.03515625C10.551171974999999,10.03515625,9.201171875,11.38515625,9.201171875,13.072656349999999L9.201171875,29.94765825C9.201171875,31.63515625,10.551171974999999,32.985161250000004,12.238672475,32.985161250000004L25.576673875,32.985161250000004C23.200674875,32.485662250000004,21.337675875000002,30.28515825,21.175671875,27.58515925Z" fill="url(#master_svg2_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/><path d="M16.1124145625,14.764538762499999L24.0504169625,14.764538762499999C24.8874170625,14.764538762499999,25.5624140625,14.0895385625,25.5624140625,13.252537762500001L25.5624140625,10.0395388625L22.5249171625,10.0395388625C22.3629159625,8.8650390625,21.3369150625,7.8525390625,19.986915562500002,7.8525390625C18.7989153625,7.8525390625,17.7864150625,8.8650390625,17.6244149625,10.0395388625L14.5869140625,10.0395388625L14.5869140625,13.252537762500001C14.5869140625,14.0895385625,15.2619143725,14.764538762499999,16.1124145625,14.764538762499999ZM30.7869150625,24.3900370625C29.9499160625,23.3775360625,28.5999220625,22.7025380625,27.2499170625,22.7025380625L26.412916062500003,22.7025380625C25.8999180625,22.7025380625,25.5759160625,22.8780390625,25.0629190625,23.2155400625C24.0504169625,23.7285370625,23.1999158625,24.7275330625,22.700415562499998,25.9155390625C22.5384173625,26.4285390625,22.5384173625,26.9280380625,22.5384173625,27.4275380625L22.5384173625,27.5895390625C22.700415562499998,30.1275410625,24.7254170625,31.9770390625,27.1014200625,31.9770390625C28.4514180625,31.9770390625,29.8014230625,31.3020400625,30.6384180625,30.2895320625C31.3134210625,29.4525340625,31.6509170625,28.4265380625,31.6509170625,27.2520330625C31.8129160625,26.2395310625,31.2999250625,25.2270370625,30.7869150625,24.3900370625ZM29.7879200625,26.5770380625L27.0879160625,29.2770390625C26.7504160625,29.6145400625,26.412916062500003,29.6145400625,26.0754160625,29.2770390625L24.387915562499998,27.5895390625C24.0504169625,27.2520370625,24.0504169625,26.9145390625,24.387915562499998,26.5770380625C24.725415062499998,26.2395380625,25.0629150625,26.2395400625,25.4004160625,26.5770380625L26.2374170625,27.4140400625L26.5749150625,27.7515370625L28.7619150625,25.5645350625C29.0994140625,25.2270370625,29.4369190625,25.2270370625,29.774416062500002,25.5645350625C30.1119160625,25.9020370625,30.1119160625,26.2395380625,29.7879200625,26.5770380625Z" fill="url(#master_svg3_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/chartCard2.svg b/src/assets/images/chartCard2.svg
new file mode 100644
index 0000000..ff67331
--- /dev/null
+++ b/src/assets/images/chartCard2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><mask id="master_svg0_88_35670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#FFFFFF" fill-opacity="1"/></mask><clipPath id="master_svg1_88_35666"><rect x="7" y="7" width="27" height="27" rx="0"/></clipPath><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg3_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient></defs><g mask="url(#master_svg0_88_35670)"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#5EB334" fill-opacity="1"/><g clip-path="url(#master_svg1_88_35666)"><path d="M21.175671875,27.58515925L14.263672875000001,27.58515925C13.750673275,27.58515925,13.426672974999999,27.24765625,13.426672974999999,26.74815725C13.426672974999999,26.23515525,13.764173075,25.911160250000002,14.263672875000001,25.911160250000002L21.351173875,25.911160250000002C21.688676875,24.89865825,22.188173875,23.88615425,22.863174875,23.211156250000002L14.263672875000001,23.211156250000002C13.750673275,23.211156250000002,13.426672974999999,22.87365525,13.426672974999999,22.37415225C13.426672974999999,21.87465325,13.764173075,21.537155249999998,14.263672875000001,21.537155249999998L25.738675875,21.537155249999998C26.251674875,21.37515325,26.751174875,21.37515325,27.088676875,21.37515325C28.438678875,21.37515325,29.626676875,21.88815525,30.625678875,22.549656249999998L30.625678875,13.072656349999999C30.625678875,11.38515625,29.275674875,10.03515625,27.588174875,10.03515625L27.075177875,10.03515625L27.075177875,13.24815675C27.075177875,14.935656550000001,25.725173875,16.285657450000002,24.037676875000002,16.285657450000002L16.113174475,16.285657450000002C14.425674475000001,16.272157149999998,13.075673375000001,14.922158249999999,13.075673375000001,13.23465635L13.075673375000001,10.03515625L12.238672475,10.03515625C10.551171974999999,10.03515625,9.201171875,11.38515625,9.201171875,13.072656349999999L9.201171875,29.94765825C9.201171875,31.63515625,10.551171974999999,32.985161250000004,12.238672475,32.985161250000004L25.576673875,32.985161250000004C23.200674875,32.485662250000004,21.337675875000002,30.28515825,21.175671875,27.58515925Z" fill="url(#master_svg2_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/><path d="M16.1124145625,14.764538762499999L24.0504169625,14.764538762499999C24.8874170625,14.764538762499999,25.5624140625,14.0895385625,25.5624140625,13.252537762500001L25.5624140625,10.0395388625L22.5249171625,10.0395388625C22.3629159625,8.8650390625,21.3369150625,7.8525390625,19.986915562500002,7.8525390625C18.7989153625,7.8525390625,17.7864150625,8.8650390625,17.6244149625,10.0395388625L14.5869140625,10.0395388625L14.5869140625,13.252537762500001C14.5869140625,14.0895385625,15.2619143725,14.764538762499999,16.1124145625,14.764538762499999ZM30.7869150625,24.3900370625C29.9499160625,23.3775360625,28.5999220625,22.7025380625,27.2499170625,22.7025380625L26.412916062500003,22.7025380625C25.8999180625,22.7025380625,25.5759160625,22.8780390625,25.0629190625,23.2155400625C24.0504169625,23.7285370625,23.1999158625,24.7275330625,22.700415562499998,25.9155390625C22.5384173625,26.4285390625,22.5384173625,26.9280380625,22.5384173625,27.4275380625L22.5384173625,27.5895390625C22.700415562499998,30.1275410625,24.7254170625,31.9770390625,27.1014200625,31.9770390625C28.4514180625,31.9770390625,29.8014230625,31.3020400625,30.6384180625,30.2895320625C31.3134210625,29.4525340625,31.6509170625,28.4265380625,31.6509170625,27.2520330625C31.8129160625,26.2395310625,31.2999250625,25.2270370625,30.7869150625,24.3900370625ZM29.7879200625,26.5770380625L27.0879160625,29.2770390625C26.7504160625,29.6145400625,26.412916062500003,29.6145400625,26.0754160625,29.2770390625L24.387915562499998,27.5895390625C24.0504169625,27.2520370625,24.0504169625,26.9145390625,24.387915562499998,26.5770380625C24.725415062499998,26.2395380625,25.0629150625,26.2395400625,25.4004160625,26.5770380625L26.2374170625,27.4140400625L26.5749150625,27.7515370625L28.7619150625,25.5645350625C29.0994140625,25.2270370625,29.4369190625,25.2270370625,29.774416062500002,25.5645350625C30.1119160625,25.9020370625,30.1119160625,26.2395380625,29.7879200625,26.5770380625Z" fill="url(#master_svg3_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/chartCard3.svg b/src/assets/images/chartCard3.svg
new file mode 100644
index 0000000..0e8ce16
--- /dev/null
+++ b/src/assets/images/chartCard3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><mask id="master_svg0_88_35670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#FFFFFF" fill-opacity="1"/></mask><clipPath id="master_svg1_88_35666"><rect x="7" y="7" width="27" height="27" rx="0"/></clipPath><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg3_88_26531"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="98.57142567634583%" stop-color="#F0FBFF" stop-opacity="1"/></linearGradient></defs><g mask="url(#master_svg0_88_35670)"><ellipse cx="20" cy="20" rx="20" ry="20" fill="#8000FF" fill-opacity="1"/><g clip-path="url(#master_svg1_88_35666)"><path d="M21.175671875,27.58515925L14.263672875000001,27.58515925C13.750673275,27.58515925,13.426672974999999,27.24765625,13.426672974999999,26.74815725C13.426672974999999,26.23515525,13.764173075,25.911160250000002,14.263672875000001,25.911160250000002L21.351173875,25.911160250000002C21.688676875,24.89865825,22.188173875,23.88615425,22.863174875,23.211156250000002L14.263672875000001,23.211156250000002C13.750673275,23.211156250000002,13.426672974999999,22.87365525,13.426672974999999,22.37415225C13.426672974999999,21.87465325,13.764173075,21.537155249999998,14.263672875000001,21.537155249999998L25.738675875,21.537155249999998C26.251674875,21.37515325,26.751174875,21.37515325,27.088676875,21.37515325C28.438678875,21.37515325,29.626676875,21.88815525,30.625678875,22.549656249999998L30.625678875,13.072656349999999C30.625678875,11.38515625,29.275674875,10.03515625,27.588174875,10.03515625L27.075177875,10.03515625L27.075177875,13.24815675C27.075177875,14.935656550000001,25.725173875,16.285657450000002,24.037676875000002,16.285657450000002L16.113174475,16.285657450000002C14.425674475000001,16.272157149999998,13.075673375000001,14.922158249999999,13.075673375000001,13.23465635L13.075673375000001,10.03515625L12.238672475,10.03515625C10.551171974999999,10.03515625,9.201171875,11.38515625,9.201171875,13.072656349999999L9.201171875,29.94765825C9.201171875,31.63515625,10.551171974999999,32.985161250000004,12.238672475,32.985161250000004L25.576673875,32.985161250000004C23.200674875,32.485662250000004,21.337675875000002,30.28515825,21.175671875,27.58515925Z" fill="url(#master_svg2_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/><path d="M16.1124145625,14.764538762499999L24.0504169625,14.764538762499999C24.8874170625,14.764538762499999,25.5624140625,14.0895385625,25.5624140625,13.252537762500001L25.5624140625,10.0395388625L22.5249171625,10.0395388625C22.3629159625,8.8650390625,21.3369150625,7.8525390625,19.986915562500002,7.8525390625C18.7989153625,7.8525390625,17.7864150625,8.8650390625,17.6244149625,10.0395388625L14.5869140625,10.0395388625L14.5869140625,13.252537762500001C14.5869140625,14.0895385625,15.2619143725,14.764538762499999,16.1124145625,14.764538762499999ZM30.7869150625,24.3900370625C29.9499160625,23.3775360625,28.5999220625,22.7025380625,27.2499170625,22.7025380625L26.412916062500003,22.7025380625C25.8999180625,22.7025380625,25.5759160625,22.8780390625,25.0629190625,23.2155400625C24.0504169625,23.7285370625,23.1999158625,24.7275330625,22.700415562499998,25.9155390625C22.5384173625,26.4285390625,22.5384173625,26.9280380625,22.5384173625,27.4275380625L22.5384173625,27.5895390625C22.700415562499998,30.1275410625,24.7254170625,31.9770390625,27.1014200625,31.9770390625C28.4514180625,31.9770390625,29.8014230625,31.3020400625,30.6384180625,30.2895320625C31.3134210625,29.4525340625,31.6509170625,28.4265380625,31.6509170625,27.2520330625C31.8129160625,26.2395310625,31.2999250625,25.2270370625,30.7869150625,24.3900370625ZM29.7879200625,26.5770380625L27.0879160625,29.2770390625C26.7504160625,29.6145400625,26.412916062500003,29.6145400625,26.0754160625,29.2770390625L24.387915562499998,27.5895390625C24.0504169625,27.2520370625,24.0504169625,26.9145390625,24.387915562499998,26.5770380625C24.725415062499998,26.2395380625,25.0629150625,26.2395400625,25.4004160625,26.5770380625L26.2374170625,27.4140400625L26.5749150625,27.7515370625L28.7619150625,25.5645350625C29.0994140625,25.2270370625,29.4369190625,25.2270370625,29.774416062500002,25.5645350625C30.1119160625,25.9020370625,30.1119160625,26.2395380625,29.7879200625,26.5770380625Z" fill="url(#master_svg3_88_26531)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/views/personnelManagement/analytics/index.vue b/src/views/personnelManagement/analytics/index.vue
index 091156d..086dad8 100644
--- a/src/views/personnelManagement/analytics/index.vue
+++ b/src/views/personnelManagement/analytics/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="app-container analytics-container">
+ <div class="app-container analytics-container" v-loading="loading">
<!-- 鍏抽敭鎸囨爣鍗＄墖 -->
<el-row :gutter="20" class="metrics-cards">
@@ -11,7 +11,7 @@
<component :is="item.icon" />
</el-icon>
</div>
- <div class="card-info">
+ <div class="card-info">
<div class="card-number">
<el-skeleton-item v-if="loading" variant="text" style="width: 60px; height: 32px;" />
<span v-else>{{ item.value }}{{ item.unit }}</span>
@@ -64,21 +64,6 @@
<!-- 绗簩琛屽浘琛� -->
<el-row :gutter="20" class="charts-section">
- <!-- 缂栧埗杈炬垚鐜� -->
- <el-col :span="12">
- <el-card class="chart-card">
- <template #header>
- <div class="card-header">
- <span>缂栧埗杈炬垚鐜�</span>
- <el-tag type="warning">鍚勯儴闂ㄥ姣�</el-tag>
- </div>
- </template>
- <div class="chart-container">
- <div ref="staffingChartRef" class="chart"></div>
- </div>
- </el-card>
- </el-col>
-
<!-- 鍛樺伐娴佸け鍘熷洜鍒嗘瀽 -->
<el-col :span="12">
<el-card class="chart-card">
@@ -98,19 +83,15 @@
</template>
<script setup>
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
-import {
- Refresh,
- User,
- TrendCharts,
- DataAnalysis,
- PieChart,
- ArrowUp,
- ArrowDown
-} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
-import { staffOnJobListPage } from '@/api/personnelManagement/staffOnJob.js'
+import {listDept} from "@/api/system/dept.js";
+import {
+ findStaffAnalysisMonthlyTurnoverRateFor12Months,
+ findStaffLeaveReasonAnalysis,
+ findStaffAnalysisTotalStatistic
+} from "@/api/personnelManagement/staffAnalytics.js";
// 鍝嶅簲寮忔暟鎹�
const loading = ref(false)
@@ -151,14 +132,6 @@
trend: 0
},
{
- label: '缂栧埗杈炬垚鐜�',
- value: 0,
- unit: '%',
- icon: 'DataAnalysis',
- type: 'success',
- trend: 0
- },
- {
label: '鍦ㄨ亴鍛樺伐鏁�',
value: 0,
unit: '浜�',
@@ -171,16 +144,56 @@
// 閮ㄩ棬鏁版嵁
const departmentData = ref([])
+// 鍛樺伐娴佸け鍘熷洜鍒嗘瀽鏁版嵁
+const staffLeaveReasons = ref([])
+// 12涓湀鍛樺伐娴佸姩娴佸け鐜囧垎鏋愭暟鎹�
+const turnoverRateStatistics = ref([])
-// 鑾峰彇鍦ㄨ亴鍛樺伐鏁�
-const getStaffCount = async () => {
+// 鑾峰彇閮ㄩ棬鏁版嵁
+const getDepartmentData = async () => {
try {
- const res = await staffOnJobListPage({ staffState: 1, current: 1, size: 1 })
+ const res = await listDept()
if (res && res.data) {
- keyMetrics.value[3].value = res.data.total || 0
+ departmentData.value = res.data
}
} catch (error) {
- console.error('鑾峰彇鍦ㄨ亴鍛樺伐鏁板け璐�:', error)
+ console.error('鑾峰彇閮ㄩ棬鏁版嵁澶辫触:', error)
+ }
+}
+
+const getStaffLeaveReasonAnalysis = async () => {
+ try {
+ const res = await findStaffLeaveReasonAnalysis()
+ if (res && res.data) {
+ staffLeaveReasons.value = res.data || []
+ }
+ } catch (error) {
+ console.error('鑾峰彇鍛樺伐娴佸け鍘熷洜鍒嗘瀽澶辫触:', error)
+ }
+}
+
+// 淇敼涓鸿繑鍥濸romise鐨勫紓姝ュ嚱鏁�
+const getMonthlyTurnoverRateFor12Months = async () => {
+ try {
+ const res = await findStaffAnalysisMonthlyTurnoverRateFor12Months()
+ if (res && res.data) {
+ turnoverRateStatistics.value = res.data || []
+ }
+ } catch (error) {
+ console.error('鑾峰彇12涓湀鍛樺伐娴佸姩娴佸け鐜囧垎鏋愭暟鎹け璐�:', error)
+ }
+}
+
+const getStaffAnalysisTotalStatistic = async () => {
+ try {
+ const res = await findStaffAnalysisTotalStatistic()
+ if (res && res.data) {
+ keyMetrics.value[0].value = res.data.totalFlowRate || 0
+ keyMetrics.value[1].value = res.data.totalTurnoverRate || 0
+ keyMetrics.value[2].value = res.data.currentOnJobCount || 0
+ }
+ } catch (error) {
+ console.error('鑾峰彇鍛樺伐鍒嗘瀽鎬荤粺璁℃暟鎹け璐�:', error)
}
}
@@ -213,49 +226,28 @@
}
}
-// 鐢熸垚妯℃嫙鏁版嵁
-const generateMockData = () => {
- // 鐢熸垚鍏抽敭鎸囨爣鏁版嵁
- keyMetrics.value[0].value = (Math.random() * 5 + 2).toFixed(1)
- keyMetrics.value[0].trend = (Math.random() * 3 - 1.5).toFixed(1)
-
- keyMetrics.value[1].value = (Math.random() * 3 + 1).toFixed(1)
- keyMetrics.value[1].trend = (Math.random() * 2 - 1).toFixed(1)
-
- keyMetrics.value[2].value = (Math.random() * 15 + 85).toFixed(1)
- keyMetrics.value[2].trend = (Math.random() * 3 - 1.5).toFixed(1)
-
- // 鐢熸垚閮ㄩ棬鏁版嵁
- const departments = ['鎶�鏈儴', '閿�鍞儴', '浜轰簨閮�', '璐㈠姟閮�', '鐢熶骇閮�', '甯傚満閮�']
- departmentData.value = departments.map(dept => ({
- department: dept,
- currentStaff: Math.floor(Math.random() * 30 + 20),
- plannedStaff: Math.floor(Math.random() * 10 + 35),
- staffingRate: Math.floor(Math.random() * 20 + 80),
- turnoverRate: (Math.random() * 4 + 1).toFixed(1),
- attritionRate: (Math.random() * 2 + 0.5).toFixed(1),
- newHires: Math.floor(Math.random() * 5 + 1),
- resignations: Math.floor(Math.random() * 3 + 1),
- status: Math.random() > 0.7 ? '寮傚父' : '姝ｅ父'
- }))
-}
-
-// 鍒锋柊鏁版嵁
+// 淇敼涓哄紓姝ュ嚱鏁帮紝纭繚鏁版嵁鍔犺浇瀹屾垚鍚庡啀娓叉煋鍥捐〃
const refreshData = async () => {
- loading.value = true
try {
- // 妯℃嫙API璋冪敤寤惰繜
- await new Promise(resolve => setTimeout(resolve, 500))
-
- generateMockData()
+ loading.value = true
+
+ // 绛夊緟鎵�鏈夋暟鎹姞杞藉畬鎴�
+ await Promise.all([
+ getDepartmentData(),
+ getStaffLeaveReasonAnalysis(),
+ getMonthlyTurnoverRateFor12Months(),
+ getStaffAnalysisTotalStatistic()
+ ])
+
+ await nextTick()
renderAllCharts()
-
+
if (!autoRefreshEnabled.value) {
ElMessage.success('鏁版嵁鍒锋柊鎴愬姛')
}
} catch (error) {
- console.error('鍒锋柊鏁版嵁澶辫触:', error)
- ElMessage.error('鍒锋柊鏁版嵁澶辫触')
+ console.error('鏁版嵁鍒锋柊澶辫触:', error)
+ ElMessage.error('鏁版嵁鍒锋柊澶辫触')
} finally {
loading.value = false
}
@@ -276,8 +268,9 @@
if (attritionChartRef.value) {
attritionChart = echarts.init(attritionChartRef.value)
}
-
- renderAllCharts()
+
+ // 鍒濆鍖栨椂涔熷厛鍔犺浇鏁版嵁鍐嶆覆鏌撳浘琛�
+ refreshData()
}, 300)
}
@@ -289,14 +282,15 @@
renderAttritionChart()
}
-// 娓叉煋鍛樺伐娴佸姩鐜囪秼鍔垮浘
+// 淇敼涓轰娇鐢ˋPI杩斿洖鐨勫疄闄呮暟鎹�
const renderTurnoverChart = () => {
if (!turnoverChart) return
-
- const months = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
- const turnoverData = months.map(() => (Math.random() * 5 + 2).toFixed(1))
- const attritionData = months.map(() => (Math.random() * 3 + 1).toFixed(1))
-
+
+ // 浣跨敤API杩斿洖鐨勫疄闄呮暟鎹�
+ const months = turnoverRateStatistics.value.map(item => item.month)
+ const turnoverData = turnoverRateStatistics.value.map(item => item.flowRate || 0)
+ const attritionData = turnoverRateStatistics.value.map(item => item.turnoverRate || 0)
+
const option = {
title: {
text: '鍛樺伐娴佸姩鐜囪秼鍔�',
@@ -346,19 +340,19 @@
}
]
}
-
+
turnoverChart.setOption(option)
}
// 娓叉煋閮ㄩ棬浜哄憳鍒嗗竷鍥�
const renderDepartmentChart = () => {
if (!departmentChart) return
-
+
const data = departmentData.value.map(item => ({
- name: item.department,
- value: item.currentStaff
+ name: item.deptName,
+ value: item.staffCount
}))
-
+
const option = {
title: {
text: '閮ㄩ棬浜哄憳鍒嗗竷',
@@ -391,17 +385,17 @@
}
]
}
-
+
departmentChart.setOption(option)
}
// 娓叉煋缂栧埗杈炬垚鐜囧浘
const renderStaffingChart = () => {
if (!staffingChart) return
-
- const departments = departmentData.value.map(item => item.department)
+
+ const departments = departmentData.value.map(item => item.deptName)
const rates = departmentData.value.map(item => item.staffingRate)
-
+
const option = {
title: {
text: '缂栧埗杈炬垚鐜�',
@@ -445,17 +439,17 @@
}
]
}
-
+
staffingChart.setOption(option)
}
// 娓叉煋鍛樺伐娴佸け鍘熷洜鍒嗘瀽鍥�
const renderAttritionChart = () => {
if (!attritionChart) return
-
- const reasons = ['钖祫寰呴亣', '鑱屼笟鍙戝睍', '宸ヤ綔鐜', '涓汉鍘熷洜', '鍏朵粬']
- const data = reasons.map(() => Math.floor(Math.random() * 20 + 5))
-
+
+ const reasons = staffLeaveReasons.value.map(item => item.reasonText)
+ const data = staffLeaveReasons.value.map(item => item.count)
+
const option = {
title: {
text: '鍛樺伐娴佸け鍘熷洜鍒嗘瀽',
@@ -491,14 +485,12 @@
}
]
}
-
+
attritionChart.setOption(option)
}
-
+
// 鐢熷懡鍛ㄦ湡
onMounted(() => {
- generateMockData()
- getStaffCount()
initCharts()
startAutoRefresh()
})
@@ -663,32 +655,32 @@
.analytics-container {
padding: 10px;
}
-
+
.page-header {
padding: 15px;
}
-
+
.page-header h2 {
font-size: 24px;
}
-
+
.header-controls {
flex-direction: column;
gap: 15px;
}
-
+
.refresh-btn {
margin-left: 0;
}
-
+
.metrics-cards .el-col {
margin-bottom: 15px;
}
-
+
.charts-section .el-col {
margin-bottom: 20px;
}
-
+
.chart-container {
height: 300px;
}
@@ -698,11 +690,11 @@
.page-header h2 {
font-size: 20px;
}
-
+
.card-number {
font-size: 24px;
}
-
+
.chart-container {
height: 250px;
}
diff --git a/src/views/reportAnalysis/reportManagement/index.vue b/src/views/reportAnalysis/reportManagement/index.vue
index 2adfb54..4c73f7f 100644
--- a/src/views/reportAnalysis/reportManagement/index.vue
+++ b/src/views/reportAnalysis/reportManagement/index.vue
@@ -1,715 +1,1402 @@
<template>
- <div class="report-management">
- <!-- 绛涢�夋潯浠� -->
- <el-card class="filter-card" shadow="never">
- <el-form :model="filterForm" inline>
- <el-form-item label="鏃堕棿鑼冨洿">
- <el-date-picker
- style="width: 300px"
- v-model="filterForm.dateRange"
- type="daterange"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- @change="handleFilterChange"
- />
- </el-form-item>
- <el-form-item label="鎶ヨ〃绫诲瀷">
- <el-select v-model="filterForm.reportType" placeholder="璇烽�夋嫨鎶ヨ〃绫诲瀷" @change="handleFilterChange" style="width: 300px">
- <el-option label="鏍峰搧杩涘害鎶ヨ〃" value="sample" />
- <el-option label="璁惧浣跨敤鎶ヨ〃" value="equipment" />
- <el-option label="妫�娴嬮」鐩姤琛�" value="inspection" />
- <el-option label="棰嗙敤璁板綍鎶ヨ〃" value="usage" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleFilterChange">鏌ヨ</el-button>
- <el-button @click="resetFilter">閲嶇疆</el-button>
- <el-button type="success" @click="exportReport">瀵煎嚭鎶ヨ〃</el-button>
- </el-form-item>
- </el-form>
- </el-card>
-
- <!-- 缁熻鍗＄墖 -->
- <div class="statistics-cards">
- <el-row :gutter="20">
- <el-col :span="6">
- <el-card class="stat-card" shadow="hover">
- <div class="stat-content">
- <div class="stat-icon">
- <el-icon><Box /></el-icon>
- </div>
- <div class="stat-info">
- <div class="stat-number">{{ statistics.totalSamples }}</div>
- <div class="stat-label">鎬绘牱鍝佹暟</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stat-card" shadow="hover">
- <div class="stat-content">
- <div class="stat-icon">
- <el-icon><Tools /></el-icon>
- </div>
- <div class="stat-info">
- <div class="stat-number">{{ statistics.activeEquipment }}</div>
- <div class="stat-label">鍦ㄧ敤璁惧</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stat-card" shadow="hover">
- <div class="stat-content">
- <div class="stat-icon">
- <el-icon><Document /></el-icon>
- </div>
- <div class="stat-info">
- <div class="stat-number">{{ statistics.completedInspections }}</div>
- <div class="stat-label">宸插畬鎴愭娴�</div>
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="stat-card" shadow="hover">
- <div class="stat-content">
- <div class="stat-icon">
- <el-icon><ShoppingCart /></el-icon>
- </div>
- <div class="stat-info">
- <div class="stat-number">{{ statistics.totalUsage }}</div>
- <div class="stat-label">鎬婚鐢ㄦ鏁�</div>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
-
- <!-- 鍥捐〃鍖哄煙 -->
- <div class="charts-container">
- <el-row :gutter="20">
- <!-- 鏍峰搧杩涘害鍥捐〃 -->
- <el-col :span="12">
- <el-card class="chart-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>鏍峰搧杩涘害缁熻</span>
- <el-button link @click="refreshSampleChart">鍒锋柊</el-button>
- </div>
- </template>
- <div ref="sampleChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
-
- <!-- 璁惧浣跨敤鍥捐〃 -->
- <el-col :span="12">
- <el-card class="chart-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>璁惧浣跨敤鐜囩粺璁�</span>
- <el-button link @click="refreshEquipmentChart">鍒锋柊</el-button>
- </div>
- </template>
- <div ref="equipmentChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
- </el-row>
-
- <el-row :gutter="20" style="margin-top: 20px;">
- <!-- 妫�娴嬮」鐩粺璁� -->
- <el-col :span="12">
- <el-card class="chart-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>妫�娴嬮」鐩垎甯�</span>
- <el-button link @click="refreshInspectionChart">鍒锋柊</el-button>
- </div>
- </template>
- <div ref="inspectionChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
-
- <!-- 棰嗙敤璁板綍瓒嬪娍 -->
- <el-col :span="12">
- <el-card class="chart-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>棰嗙敤璁板綍瓒嬪娍</span>
- <el-button link @click="refreshUsageChart">鍒锋柊</el-button>
- </div>
- </template>
- <div ref="usageChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
- </el-row>
- </div>
-
- <!-- 璇︾粏鏁版嵁琛ㄦ牸 -->
- <el-card class="table-card" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>璇︾粏鏁版嵁</span>
- <div>
- <el-button type="primary" size="small" @click="refreshTable">鍒锋柊</el-button>
- <el-button type="success" size="small" @click="exportTable">瀵煎嚭</el-button>
- </div>
- </div>
- </template>
-
- <el-table
- :data="tableData"
- style="width: 100%"
- v-loading="tableLoading"
- stripe
- border
- >
- <el-table-column prop="id" label="缂栧彿" width="80" />
- <el-table-column prop="name" label="鍚嶇О" />
- <el-table-column prop="status" label="鐘舵��">
- <template #default="scope">
- <el-tag :type="getStatusType(scope.row.status)">
- {{ scope.row.status }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="progress" label="杩涘害">
- <template #default="scope">
- <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.progress)" />
- </template>
- </el-table-column>
- <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
- <el-table-column prop="updateTime" label="鏇存柊鏃堕棿" width="180" />
- <el-table-column label="鎿嶄綔" width="150" fixed="right">
- <template #default="scope">
- <el-button link size="small" @click="viewDetail(scope.row)">鏌ョ湅</el-button>
- <el-button link size="small" @click="editItem(scope.row)">缂栬緫</el-button>
- </template>
- </el-table-column>
- </el-table>
-
- <div class="pagination-container">
- <el-pagination
- v-model:current-page="pagination.currentPage"
- v-model:page-size="pagination.pageSize"
- :page-sizes="[10, 20, 50, 100]"
- :total="pagination.total"
- layout="total, sizes, prev, pager, next, jumper"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- </el-card>
- </div>
+ <div class="report-management">
+ <!-- 鍥捐〃鍖哄煙 -->
+ <div class="charts-container">
+ <el-row :gutter="20">
+ <!-- 鍚勭被鍨嬪畬鎴愭暟閲� -->
+ <el-col :span="9">
+ <el-card class="chart-card"
+ shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <div class="chart-title-line"></div>
+ <span>鍚勭被鍨嬪畬鎴愭暟閲�</span>
+ </div>
+ </template>
+ <div class="top-container">
+ <div class="typeNum">
+ <div class="typeNum-left">
+ <img src="~@/assets/images/chartCard.svg"
+ alt="鍥捐〃"
+ style="width: 40px; height: 40px; object-fit: contain;">
+ <div class="typeNum-left-text">鍘熸潗鏂�</div>
+ </div>
+ <div class="typeNum-center">
+ <div class="typeNum-leftLine">-</div>
+ <div class="typeNum-rightLine"></div>
+ </div>
+ <div class="typeNum-right">
+ <div class="typeNum-right-top">
+ <div class="typeNum-right-top-name">鎬绘暟閲�</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="typeNum">
+ <div class="typeNum-left">
+ <img src="~@/assets/images/chartCard2.svg"
+ alt="鍥捐〃"
+ style="width: 40px; height: 40px; object-fit: contain;">
+ <div class="typeNum-left-text"
+ style="color: #5EB334;">鍗婃垚鍝�</div>
+ </div>
+ <div class="typeNum-center">
+ <div class="typeNum-leftLine2">-</div>
+ <div class="typeNum-rightLine2"></div>
+ </div>
+ <div class="typeNum-right">
+ <div class="typeNum-right-top">
+ <div class="typeNum-right-top-name">鎬绘暟閲�</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="typeNum">
+ <div class="typeNum-left">
+ <img src="~@/assets/images/chartCard3.svg"
+ alt="鍥捐〃"
+ style="width: 40px; height: 40px; object-fit: contain;">
+ <div class="typeNum-left-text"
+ style="color: #8000FF;">鎴愬搧</div>
+ </div>
+ <div class="typeNum-center">
+ <div class="typeNum-leftLine3">-</div>
+ <div class="typeNum-rightLine3"></div>
+ </div>
+ <div class="typeNum-right">
+ <div class="typeNum-right-top">
+ <div class="typeNum-right-top-name">鎬绘暟閲�</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">2099 <span class="unit">涓�</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ <!-- 璐ㄦ鍚堟牸鐜� -->
+ <el-col :span="15">
+ <el-card class="chart-card"
+ shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <div class="chart-title-line"></div>
+ <span>璐ㄦ鍚堟牸鐜�</span>
+ </div>
+ </template>
+ <div class="top-container flex-center">
+ <div class="quality-card blue-card">
+ <div class="quality-card-title">
+ <img src="~@/assets/images/chartCard.svg"
+ alt="鍘熸潗鏂�"
+ style="width: 24px; height: 24px; margin-right: 8px;">
+ 鍘熸潗鏂欏悎鏍肩巼
+ </div>
+ <div class="quality-card-content">
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label blue-label">瀹屾垚鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="materialCompletionChart"></div>
+ </div>
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label green-label">鍚堟牸鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="materialQualityChart"></div>
+ </div>
+ </div>
+ </div>
+ <div class="quality-card green-card">
+ <div class="quality-card-title">
+ <img src="~@/assets/images/chartCard2.svg"
+ alt="鍗婃垚鍝�"
+ style="width: 24px; height: 24px; margin-right: 8px;">
+ 鍗婃垚鍝佸悎鏍肩巼
+ </div>
+ <div class="quality-card-content">
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label blue-label">瀹屾垚鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="semiCompletionChart"></div>
+ </div>
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label green-label">鍚堟牸鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="semiQualityChart"></div>
+ </div>
+ </div>
+ </div>
+ <div class="quality-card purple-card">
+ <div class="quality-card-title">
+ <img src="~@/assets/images/chartCard3.svg"
+ alt="鎴愬搧"
+ style="width: 24px; height: 24px; margin-right: 8px;">
+ 鎴愬搧鍚堟牸鐜�
+ </div>
+ <div class="quality-card-content">
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label blue-label">瀹屾垚鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="finalCompletionChart"></div>
+ </div>
+ <div class="quality-item">
+ <div>
+ <div class="quality-item-label green-label">鍚堟牸鐜�</div>
+ <div class="quality-item-tip">鍗犳瘮</div>
+ <div class="quality-item-value">80%</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="finalQualityChart"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="charts-container">
+ <el-row :gutter="20">
+ <!-- 璐ㄦ鍚堟牸鐜� -->
+ <el-col :span="24">
+ <el-card class="chart-card"
+ shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <div class="chart-title-line"></div>
+ <span>璐ㄦ鍚堟牸鐜�</span>
+ </div>
+ </template>
+ <div class="chart-container-line">
+ <div class="container-line-left">
+ <div style="height: 100%; width: 100%;"
+ ref="usageChartRef">
+ </div>
+ </div>
+ <div class="container-line-right">
+ <div style="height: 80%; width: 100%;"
+ ref="inspectionChartRef">
+ </div>
+ <div class="container-line-right-bottom">
+ <div class="inspection-chart-box">
+ <div class="chart-box-title">鍘熸潗鏂欐娊妫�鏁�</div>
+ <div class="chart-box-num">600</div>
+ </div>
+ <div class="inspection-chart-box">
+ <div class="chart-box-title">鍗婃垚鍝佹娊妫�鏁�</div>
+ <div class="chart-box-num">200</div>
+ </div>
+ <div class="inspection-chart-box">
+ <div class="chart-box-title">鎴愬搧鎶芥鏁�</div>
+ <div class="chart-box-num">200</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- </div> -->
+ <!-- <div ref="sampleChartRef"
+ class="chart-container"></div> -->
+ <div class="yearchange">
+ <div style="margin-right: 8px;font-size: 14px;">骞翠唤:</div>
+ <el-date-picker v-model="value3"
+ size="mini"
+ :clearable="false"
+ style="width: 60px;"
+ type="year"
+ :disabled-date="disabledDate"
+ placeholder="">
+ </el-date-picker>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="charts-container">
+ <el-row :gutter="20">
+ <!-- 鏍峰搧杩涘害鍥捐〃 -->
+ <el-col :span="12">
+ <el-card class="chart-card"
+ shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <div class="chart-title-line"></div>
+ <span>璐ㄩ噺瀹屾垚鏄庣粏</span>
+ </div>
+ </template>
+ <div ref="equipmentChartRef"
+ class="chart-container"></div>
+ </el-card>
+ </el-col>
+ <!-- 璁惧浣跨敤鍥捐〃 -->
+ <el-col :span="12">
+ <el-card class="chart-card"
+ shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <div class="chart-title-line"></div>
+ <span>妫�娴嬮」鐩垎绫�</span>
+ </div>
+ </template>
+ <div class="chart-container-line">
+ <div class="container-line2-left">
+ <div class="info-box">
+ <div class="info-box-header">椤圭洰鍒嗗竷</div>
+ <div class="info-line">
+ <div class="info-icon"
+ style="background-color: #165DFF"></div>
+ <div class="info-line-title">鐗╃悊鎬ц兘</div>
+ <div class="info-line-value1">30%</div>
+ <div class="info-line-value2">300</div>
+ </div>
+ <div class="info-line">
+ <div class="info-icon"
+ style="background-color: #14C9C9;"></div>
+ <div class="info-line-title">鐗╃悊鎬ц兘</div>
+ <div class="info-line-value1">30%</div>
+ <div class="info-line-value2">300</div>
+ </div>
+ <div class="info-line">
+ <div class="info-icon"
+ style="background-color: #F7BA1E;"></div>
+ <div class="info-line-title">鐗╃悊鎬ц兘</div>
+ <div class="info-line-value1">30%</div>
+ <div class="info-line-value2">300</div>
+ </div>
+ <div class="info-line">
+ <div class="info-icon"
+ style="background-color: #722ED1;"></div>
+ <div class="info-line-title">鐗╃悊鎬ц兘</div>
+ <div class="info-line-value1">30%</div>
+ <div class="info-line-value2">300</div>
+ </div>
+ <div class="info-line">
+ <div class="info-icon"
+ style="background-color: #3491FA;"></div>
+ <div class="info-line-title">鐗╃悊鎬ц兘</div>
+ <div class="info-line-value1">30%</div>
+ <div class="info-line-value2">300</div>
+ </div>
+ </div>
+ </div>
+ <div ref="sampleChartRef"
+ style="height: 100%; width: 50%;"
+ class="chart-container"></div>
+ </div>
+ <!-- Tab 閫夋嫨鍣� -->
+ <div class="tab-selector">
+ <div class="tab-item"
+ :class="{ active: activeTab === 'raw' }"
+ @click="activeTab = 'raw'">鍘熸潗鏂�</div>
+ <div class="tab-item"
+ :class="{ active: activeTab === 'semi' }"
+ @click="activeTab = 'semi'">鍗婃垚鍝�</div>
+ <div class="tab-item"
+ :class="{ active: activeTab === 'final' }"
+ @click="activeTab = 'final'">鎴愬搧</div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
</template>
<script setup>
-import { ref, reactive, onMounted, nextTick } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import * as echarts from 'echarts'
-import { Box, Tools, Document, ShoppingCart } from '@element-plus/icons-vue'
+ import { ref, reactive, onMounted, nextTick } from "vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ import * as echarts from "echarts";
+ import { Box, Tools, Document, ShoppingCart } from "@element-plus/icons-vue";
-// 鍝嶅簲寮忔暟鎹�
-const filterForm = reactive({
- dateRange: [],
- reportType: 'sample'
-})
+ // 鍝嶅簲寮忔暟鎹�
+ const filterForm = reactive({
+ dateRange: [],
+ reportType: "sample",
+ });
-const statistics = reactive({
- totalSamples: 1250,
- activeEquipment: 45,
- completedInspections: 890,
- totalUsage: 2340
-})
+ const statistics = reactive({
+ totalSamples: 1250,
+ activeEquipment: 45,
+ completedInspections: 890,
+ totalUsage: 2340,
+ });
-const tableData = ref([])
-const tableLoading = ref(false)
-const pagination = reactive({
- currentPage: 1,
- pageSize: 20,
- total: 0
-})
+ const tableData = ref([]);
+ const tableLoading = ref(false);
+ const pagination = reactive({
+ currentPage: 1,
+ pageSize: 20,
+ total: 0,
+ });
-// 鍥捐〃寮曠敤
-const sampleChartRef = ref(null)
-const equipmentChartRef = ref(null)
-const inspectionChartRef = ref(null)
-const usageChartRef = ref(null)
+ // 鍒濆鍖栧勾浠戒负褰撳墠骞翠唤锛堜娇鐢―ate瀵硅薄锛�
+ const currentYear = new Date().getFullYear();
+ const value3 = ref(new Date(currentYear, 0, 1));
-// 鍥捐〃瀹炰緥
-let sampleChart = null
-let equipmentChart = null
-let inspectionChart = null
-let usageChart = null
+ // 闄愬埗鏃ユ湡閫夋嫨锛屼笉鍏佽閫夋嫨浠婂勾涔嬪悗鐨勫勾浠�
+ const disabledDate = time => {
+ const currentYear = new Date().getFullYear();
+ return time.getFullYear() > currentYear;
+ };
-// 鍒濆鍖栨暟鎹�
-const initData = () => {
- // 妯℃嫙琛ㄦ牸鏁版嵁
- tableData.value = [
- {
- id: 'SP001',
- name: '鏍峰搧A-001',
- type: '閲戝睘鏉愭枡',
- status: '妫�娴嬩腑',
- progress: 75,
- createTime: '2025-01-15 09:30:00',
- updateTime: '2025-01-20 14:20:00'
- },
- {
- id: 'SP002',
- name: '鏍峰搧B-002',
- type: '濉戞枡鍒跺搧',
- status: '宸插畬鎴�',
- progress: 100,
- createTime: '2025-01-10 10:15:00',
- updateTime: '2025-01-18 16:45:00'
- },
- {
- id: 'SP003',
- name: '鏍峰搧C-003',
- type: '鐢靛瓙鍏冧欢',
- status: '寰呮娴�',
- progress: 0,
- createTime: '2025-01-22 08:45:00',
- updateTime: '2025-01-22 08:45:00'
- },
- {
- id: 'EQ001',
- name: '妫�娴嬭澶嘇',
- type: '鍏夎氨浠�',
- status: '浣跨敤涓�',
- progress: 60,
- createTime: '2025-01-05 14:20:00',
- updateTime: '2025-01-20 11:30:00'
- },
- {
- id: 'EQ002',
- name: '妫�娴嬭澶嘊',
- type: '鏄惧井闀�',
- status: '绌洪棽',
- progress: 0,
- createTime: '2025-01-08 16:10:00',
- updateTime: '2025-01-19 09:15:00'
- }
- ]
-
- pagination.total = tableData.value.length
-}
+ // Tab 閫夋嫨鍣ㄥ綋鍓嶆縺娲婚」
+ const activeTab = ref("raw");
-// 鍒濆鍖栨牱鍝佽繘搴﹀浘琛�
-const initSampleChart = () => {
- if (sampleChartRef.value) {
- sampleChart = echarts.init(sampleChartRef.value)
- const option = {
- title: {
- show: false
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '鏍峰搧鐘舵��',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- { value: 450, name: '宸插畬鎴�' },
- { value: 320, name: '妫�娴嬩腑' },
- { value: 280, name: '寰呮娴�' },
- { value: 200, name: '宸叉殏鍋�' }
- ]
- }
- ]
- }
- sampleChart.setOption(option)
- }
-}
+ // 鍥捐〃寮曠敤
+ const sampleChartRef = ref(null);
+ const equipmentChartRef = ref(null);
+ const inspectionChartRef = ref(null);
+ const usageChartRef = ref(null);
-// 鍒濆鍖栬澶囦娇鐢ㄥ浘琛�
-const initEquipmentChart = () => {
- if (equipmentChartRef.value) {
- equipmentChart = echarts.init(equipmentChartRef.value)
- const option = {
- title: {
- show: false
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- xAxis: {
- type: 'category',
- data: ['鍏夎氨浠�', '鏄惧井闀�', '纭害璁�', '鎷夊姏鏈�', '鍐插嚮鏈�', '閲戠浉浠�']
- },
- yAxis: {
- type: 'value',
- name: '浣跨敤鐜�(%)'
- },
- series: [
- {
- name: '浣跨敤鐜�',
- type: 'bar',
- data: [85, 60, 75, 90, 45, 70],
- itemStyle: {
- color: function(params) {
- const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0']
- return colors[params.dataIndex]
- }
- }
- }
- ]
- }
- equipmentChart.setOption(option)
- }
-}
+ // 璐ㄦ鍚堟牸鐜囧浘琛ㄥ紩鐢�
+ const materialCompletionChart = ref(null);
+ const materialQualityChart = ref(null);
+ const semiCompletionChart = ref(null);
+ const semiQualityChart = ref(null);
+ const finalCompletionChart = ref(null);
+ const finalQualityChart = ref(null);
-// 鍒濆鍖栨娴嬮」鐩浘琛�
-const initInspectionChart = () => {
- if (inspectionChartRef.value) {
- inspectionChart = echarts.init(inspectionChartRef.value)
- const option = {
- title: {
- show: false
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '妫�娴嬮」鐩�',
- type: 'pie',
- radius: '50%',
- data: [
- { value: 335, name: '鐗╃悊鎬ц兘' },
- { value: 310, name: '鍖栧鍒嗘瀽' },
- { value: 234, name: '灏哄娴嬮噺' },
- { value: 135, name: '澶栬妫�鏌�' },
- { value: 148, name: '鍏朵粬妫�娴�' }
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- }
- inspectionChart.setOption(option)
- }
-}
+ // 鍥捐〃瀹炰緥
+ let sampleChart = null;
+ let equipmentChart = null;
+ let inspectionChart = null;
+ let usageChart = null;
-// 鍒濆鍖栭鐢ㄨ褰曞浘琛�
-const initUsageChart = () => {
- if (usageChartRef.value) {
- usageChart = echarts.init(usageChartRef.value)
- const option = {
- title: {
- show: false
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['棰嗙敤娆℃暟', '褰掕繕娆℃暟']
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '棰嗙敤娆℃暟',
- type: 'line',
- stack: 'Total',
- data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
- },
- {
- name: '褰掕繕娆℃暟',
- type: 'line',
- stack: 'Total',
- data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320]
- }
- ]
- }
- usageChart.setOption(option)
- }
-}
+ // 璐ㄦ鍚堟牸鐜囧浘琛ㄥ疄渚�
+ let materialCompletionChartInstance = null;
+ let materialQualityChartInstance = null;
+ let semiCompletionChartInstance = null;
+ let semiQualityChartInstance = null;
+ let finalCompletionChartInstance = null;
+ let finalQualityChartInstance = null;
-// 浜嬩欢澶勭悊鍑芥暟
-const handleFilterChange = () => {
- ElMessage.success('绛涢�夋潯浠跺凡鏇存柊')
- // 杩欓噷鍙互鏍规嵁绛涢�夋潯浠堕噸鏂板姞杞芥暟鎹�
-}
+ // 鍒濆鍖栨暟鎹�
+ const initData = () => {
+ // 妯℃嫙琛ㄦ牸鏁版嵁
+ tableData.value = [
+ {
+ id: "SP001",
+ name: "鏍峰搧A-001",
+ type: "閲戝睘鏉愭枡",
+ status: "妫�娴嬩腑",
+ progress: 75,
+ createTime: "2025-01-15 09:30:00",
+ updateTime: "2025-01-20 14:20:00",
+ },
+ {
+ id: "SP002",
+ name: "鏍峰搧B-002",
+ type: "濉戞枡鍒跺搧",
+ status: "宸插畬鎴�",
+ progress: 100,
+ createTime: "2025-01-10 10:15:00",
+ updateTime: "2025-01-18 16:45:00",
+ },
+ {
+ id: "SP003",
+ name: "鏍峰搧C-003",
+ type: "鐢靛瓙鍏冧欢",
+ status: "寰呮娴�",
+ progress: 0,
+ createTime: "2025-01-22 08:45:00",
+ updateTime: "2025-01-22 08:45:00",
+ },
+ {
+ id: "EQ001",
+ name: "妫�娴嬭澶嘇",
+ type: "鍘熸潗鏂�",
+ status: "浣跨敤涓�",
+ progress: 60,
+ createTime: "2025-01-05 14:20:00",
+ updateTime: "2025-01-20 11:30:00",
+ },
+ {
+ id: "EQ002",
+ name: "妫�娴嬭澶嘊",
+ type: "鍗婃垚鍝�",
+ status: "绌洪棽",
+ progress: 0,
+ createTime: "2025-01-08 16:10:00",
+ updateTime: "2025-01-19 09:15:00",
+ },
+ ];
-const resetFilter = () => {
- filterForm.dateRange = []
- filterForm.reportType = 'sample'
- ElMessage.info('绛涢�夋潯浠跺凡閲嶇疆')
-}
+ pagination.total = tableData.value.length;
+ };
-const exportReport = () => {
- ElMessage.success('鎶ヨ〃瀵煎嚭鍔熻兘寮�鍙戜腑...')
-}
+ // 鍒濆鍖栨牱鍝佽繘搴﹀浘琛�
+ const initSampleChart = () => {
+ if (sampleChartRef.value) {
+ sampleChart = echarts.init(sampleChartRef.value);
+ const option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ },
+ // legend: {
+ // orient: "vertical",
+ // left: "left",
+ // },
+ series: [
+ {
+ name: "鏍峰搧鐘舵��",
+ type: "pie",
+ radius: ["40%", "80%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: "18",
+ fontWeight: "bold",
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 450, name: "宸插畬鎴�" },
+ { value: 320, name: "妫�娴嬩腑" },
+ { value: 280, name: "寰呮娴�" },
+ { value: 200, name: "宸叉殏鍋�" },
+ ],
+ },
+ ],
+ };
+ sampleChart.setOption(option);
+ }
+ };
-const refreshSampleChart = () => {
- initSampleChart()
- ElMessage.success('鏍峰搧杩涘害鍥捐〃宸插埛鏂�')
-}
+ // 鍒濆鍖栬澶囦娇鐢ㄥ浘琛�
+ const initEquipmentChart = () => {
+ if (equipmentChartRef.value) {
+ equipmentChart = echarts.init(equipmentChartRef.value);
+ const option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ grid: {
+ left: "1%",
+ right: "1%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ legend: {
+ data: ["鍘熸潗鏂�", "鍗婃垚鍝�", "鎴愬搧"], // 鍥句緥鏁版嵁
+ icon: ["circle", "circle", "circle"],
+ itemWidth: 10, // 璁剧疆鍥炬爣瀹藉害
+ itemHeight: 10,
+ itemGap: 30,
+ right: 10,
+ },
+ xAxis: {
+ type: "category",
+ data: [
+ value3.value.getFullYear() + "-1",
+ value3.value.getFullYear() + "-2",
+ value3.value.getFullYear() + "-3",
+ value3.value.getFullYear() + "-4",
+ value3.value.getFullYear() + "-5",
+ value3.value.getFullYear() + "-6",
+ value3.value.getFullYear() + "-7",
+ value3.value.getFullYear() + "-8",
+ value3.value.getFullYear() + "-9",
+ value3.value.getFullYear() + "-10",
+ value3.value.getFullYear() + "-11",
+ value3.value.getFullYear() + "-12",
+ ], // 鏀逛负鍗佷簩涓湀
+ },
+ yAxis: {
+ type: "value",
+ name: "鏁�(涓�)",
+ },
+ series: [
+ {
+ name: "鍘熸潗鏂�",
+ type: "bar",
+ barWidth: "15%",
+ data: [85, 75, 80, 85, 90, 88, 92, 87, 89, 91, 93, 95],
+ itemStyle: {
+ color: "#409EFF",
+ },
+ },
+ {
+ name: "鍗婃垚鍝�",
+ type: "bar",
+ barWidth: "15%",
-const refreshEquipmentChart = () => {
- initEquipmentChart()
- ElMessage.success('璁惧浣跨敤鍥捐〃宸插埛鏂�')
-}
+ data: [60, 65, 70, 68, 72, 75, 78, 80, 79, 82, 84, 85],
+ itemStyle: {
+ color: "#67C23A",
+ },
+ },
+ {
+ name: "鎴愬搧",
+ type: "bar",
+ barWidth: "15%",
-const refreshInspectionChart = () => {
- initInspectionChart()
- ElMessage.success('妫�娴嬮」鐩浘琛ㄥ凡鍒锋柊')
-}
+ data: [75, 78, 80, 82, 85, 83, 86, 88, 87, 89, 90, 92],
+ itemStyle: {
+ color: "#E6A23C",
+ },
+ },
+ ],
+ };
+ equipmentChart.setOption(option);
+ }
+ };
-const refreshUsageChart = () => {
- initUsageChart()
- ElMessage.success('棰嗙敤璁板綍鍥捐〃宸插埛鏂�')
-}
+ // 鍒濆鍖栨娴嬮」鐩浘琛�
+ const initInspectionChart = () => {
+ if (inspectionChartRef.value) {
+ inspectionChart = echarts.init(inspectionChartRef.value);
+ const option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: "item",
+ },
+ series: [
+ {
+ type: "pie",
+ radius: "80%",
+ data: [
+ { value: 335, name: "鍘熸潗鏂�", itemStyle: { color: "#1890FF" } },
+ { value: 310, name: "鍗婃垚鍝�", itemStyle: { color: "#F7BA1E" } },
+ { value: 234, name: "鎴愬搧", itemStyle: { color: "#14C9C9" } },
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ };
+ inspectionChart.setOption(option);
+ }
+ };
-const refreshTable = () => {
- tableLoading.value = true
- setTimeout(() => {
- tableLoading.value = false
- ElMessage.success('琛ㄦ牸鏁版嵁宸插埛鏂�')
- }, 1000)
-}
+ // 鍒濆鍖栭鐢ㄨ褰曞浘琛�
+ const initUsageChart = () => {
+ // 妫�鏌ュ浘琛ㄥ鍣ㄦ槸鍚﹀瓨鍦�
+ if (usageChartRef.value) {
+ // 鍒濆鍖� ECharts 瀹炰緥
+ usageChart = echarts.init(usageChartRef.value);
+ // 閰嶇疆鍥捐〃閫夐」
+ const option = {
+ // 鏍囬閰嶇疆锛堥殣钘忥級
+ title: {
+ show: false,
+ },
-const exportTable = () => {
- ElMessage.success('琛ㄦ牸瀵煎嚭鍔熻兘寮�鍙戜腑...')
-}
+ // 缃戞牸閰嶇疆锛堣皟鏁磋竟璺濓級
+ grid: {
+ left: "1%",
+ right: "4%",
+ bottom: "3%",
+ top: "14%",
+ containLabel: true,
+ },
+ // 鎻愮ず妗嗛厤缃�
+ tooltip: {
+ trigger: "axis", // 瑙﹀彂绫诲瀷涓哄潗鏍囪酱瑙﹀彂
+ },
+ // 鍥句緥閰嶇疆
+ legend: {
+ data: ["鍘熸潗鏂�", "鍗婃垚鍝�", "鎴愬搧"], // 鍥句緥鏁版嵁
+ icon: ["circle", "circle", "circle"],
+ itemWidth: 10, // 璁剧疆鍥炬爣瀹藉害
+ itemHeight: 10,
+ itemGap: 30,
+ },
+ // X杞撮厤缃�
+ xAxis: {
+ type: "category", // 绫诲埆杞�
+ boundaryGap: false, // 鍧愭爣杞翠袱杈圭暀鐧界瓥鐣�
+ data: [
+ value3.value.getFullYear() + "-1",
+ value3.value.getFullYear() + "-2",
+ value3.value.getFullYear() + "-3",
+ value3.value.getFullYear() + "-4",
+ value3.value.getFullYear() + "-5",
+ value3.value.getFullYear() + "-6",
+ value3.value.getFullYear() + "-7",
+ value3.value.getFullYear() + "-8",
+ value3.value.getFullYear() + "-9",
+ value3.value.getFullYear() + "-10",
+ value3.value.getFullYear() + "-11",
+ value3.value.getFullYear() + "-12",
+ ], // X杞存暟鎹�
+ },
+ // Y杞撮厤缃�
+ yAxis: {
+ type: "value", // 鏁板�艰酱
+ name: "鍗曚綅锛�%",
+ },
+ // 绯诲垪鏁版嵁
+ series: [
+ {
+ name: "鍘熸潗鏂�", // 绯诲垪鍚嶇О
+ type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
+ stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "none",
+ itemStyle: {
+ color: "#1890FF", // 璁剧疆杩欐潯绾跨殑棰滆壊
+ },
+ data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330], // 棰嗙敤娆℃暟鏁版嵁
+ },
+ {
+ name: "鍗婃垚鍝�", // 绯诲垪鍚嶇О
+ type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
+ stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "none",
+ itemStyle: {
+ color: "#F7BA1E", // 璁剧疆杩欐潯绾跨殑棰滆壊
+ },
+ data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320], // 褰掕繕娆℃暟鏁版嵁
+ },
+ {
+ name: "鎴愬搧", // 绯诲垪鍚嶇О
+ type: "line", // 鍥捐〃绫诲瀷涓烘姌绾垮浘
+ stack: "Total", // 鍫嗗彔鍚嶇О
+ symbol: "none",
+ itemStyle: {
+ color: "#14C9C9", // 璁剧疆杩欐潯绾跨殑棰滆壊
+ },
+ data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320], // 褰掕繕娆℃暟鏁版嵁
+ },
+ ],
+ };
+ // 灏嗛厤缃簲鐢ㄥ埌鍥捐〃
+ usageChart.setOption(option);
+ }
+ };
-const handleSizeChange = (val) => {
- pagination.pageSize = val
- // 閲嶆柊鍔犺浇鏁版嵁
-}
+ // 鍒濆鍖栬川妫�鍚堟牸鐜囧浘琛�
+ const initQualityChart = (chartRef, color) => {
+ if (chartRef.value) {
+ const chart = echarts.init(chartRef.value);
+ const option = {
+ series: [
+ {
+ type: "pie",
+ radius: ["45%", "90%"],
+ itemStyle: {
+ borderColor: "#f5f5f5",
+ // borderWidth: 2,
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 0.8, itemStyle: { color: color } },
+ { value: 0.2, itemStyle: { color: "#f5f5f5" } },
+ ],
+ },
+ ],
+ };
+ chart.setOption(option);
+ return chart;
+ }
+ return null;
+ };
-const handleCurrentChange = (val) => {
- pagination.currentPage = val
- // 閲嶆柊鍔犺浇鏁版嵁
-}
+ // 鍒濆鍖栨墍鏈夎川妫�鍚堟牸鐜囧浘琛�
+ const initAllQualityCharts = () => {
+ materialCompletionChartInstance = initQualityChart(
+ materialCompletionChart,
+ "#1890ff"
+ );
+ materialQualityChartInstance = initQualityChart(
+ materialQualityChart,
+ "#52c41a"
+ );
+ semiCompletionChartInstance = initQualityChart(
+ semiCompletionChart,
+ "#1890ff"
+ );
+ semiQualityChartInstance = initQualityChart(semiQualityChart, "#52c41a");
+ finalCompletionChartInstance = initQualityChart(
+ finalCompletionChart,
+ "#1890ff"
+ );
+ finalQualityChartInstance = initQualityChart(finalQualityChart, "#722ed1");
+ };
-const getStatusType = (status) => {
- const statusMap = {
- '宸插畬鎴�': 'success',
- '妫�娴嬩腑': 'warning',
- '寰呮娴�': 'info',
- '宸叉殏鍋�': 'danger',
- '浣跨敤涓�': 'primary',
- '绌洪棽': 'info'
- }
- return statusMap[status] || 'info'
-}
+ // 浜嬩欢澶勭悊鍑芥暟
+ const handleFilterChange = () => {
+ ElMessage.success("绛涢�夋潯浠跺凡鏇存柊");
+ // 杩欓噷鍙互鏍规嵁绛涢�夋潯浠堕噸鏂板姞杞芥暟鎹�
+ };
-const getProgressStatus = (progress) => {
- if (progress === 100) return 'success'
- if (progress >= 80) return 'warning'
- if (progress >= 50) return ''
- return 'exception'
-}
+ const resetFilter = () => {
+ filterForm.dateRange = [];
+ filterForm.reportType = "sample";
+ ElMessage.info("绛涢�夋潯浠跺凡閲嶇疆");
+ };
-const viewDetail = (row) => {
- ElMessage.info(`鏌ョ湅璇︽儏: ${row.name}`)
-}
+ const exportReport = () => {
+ ElMessage.success("鎶ヨ〃瀵煎嚭鍔熻兘寮�鍙戜腑...");
+ };
-const editItem = (row) => {
- ElMessage.info(`缂栬緫椤圭洰: ${row.name}`)
-}
+ const refreshSampleChart = () => {
+ initSampleChart();
+ ElMessage.success("鏍峰搧杩涘害鍥捐〃宸插埛鏂�");
+ };
-// 鐢熷懡鍛ㄦ湡
-onMounted(() => {
- initData()
- nextTick(() => {
- initSampleChart()
- initEquipmentChart()
- initInspectionChart()
- initUsageChart()
- })
-
- // 鐩戝惉绐楀彛澶у皬鍙樺寲锛岄噸鏂拌皟鏁村浘琛ㄥぇ灏�
- window.addEventListener('resize', () => {
- sampleChart?.resize()
- equipmentChart?.resize()
- inspectionChart?.resize()
- usageChart?.resize()
- })
-})
+ const refreshEquipmentChart = () => {
+ initEquipmentChart();
+ ElMessage.success("璁惧浣跨敤鍥捐〃宸插埛鏂�");
+ };
+
+ const refreshInspectionChart = () => {
+ initInspectionChart();
+ ElMessage.success("妫�娴嬮」鐩浘琛ㄥ凡鍒锋柊");
+ };
+
+ const refreshUsageChart = () => {
+ initUsageChart();
+ ElMessage.success("棰嗙敤璁板綍鍥捐〃宸插埛鏂�");
+ };
+
+ const refreshTable = () => {
+ tableLoading.value = true;
+ setTimeout(() => {
+ tableLoading.value = false;
+ ElMessage.success("琛ㄦ牸鏁版嵁宸插埛鏂�");
+ }, 1000);
+ };
+
+ const exportTable = () => {
+ ElMessage.success("琛ㄦ牸瀵煎嚭鍔熻兘寮�鍙戜腑...");
+ };
+
+ const handleSizeChange = val => {
+ pagination.pageSize = val;
+ // 閲嶆柊鍔犺浇鏁版嵁
+ };
+
+ const handleCurrentChange = val => {
+ pagination.currentPage = val;
+ // 閲嶆柊鍔犺浇鏁版嵁
+ };
+
+ const getStatusType = status => {
+ const statusMap = {
+ 宸插畬鎴�: "success",
+ 妫�娴嬩腑: "warning",
+ 寰呮娴�: "info",
+ 宸叉殏鍋�: "danger",
+ 浣跨敤涓�: "primary",
+ 绌洪棽: "info",
+ };
+ return statusMap[status] || "info";
+ };
+
+ const getProgressStatus = progress => {
+ if (progress === 100) return "success";
+ if (progress >= 80) return "warning";
+ if (progress >= 50) return "";
+ return "exception";
+ };
+
+ const viewDetail = row => {
+ ElMessage.info(`鏌ョ湅璇︽儏: ${row.name}`);
+ };
+
+ const editItem = row => {
+ ElMessage.info(`缂栬緫椤圭洰: ${row.name}`);
+ };
+
+ // 鐢熷懡鍛ㄦ湡
+ onMounted(() => {
+ initData();
+ nextTick(() => {
+ initSampleChart();
+ initEquipmentChart();
+ initInspectionChart();
+ initUsageChart();
+ initAllQualityCharts();
+ });
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲锛岄噸鏂拌皟鏁村浘琛ㄥぇ灏�
+ window.addEventListener("resize", () => {
+ sampleChart?.resize();
+ equipmentChart?.resize();
+ inspectionChart?.resize();
+ usageChart?.resize();
+
+ // 璋冩暣璐ㄦ鍚堟牸鐜囧浘琛ㄥぇ灏�
+ materialCompletionChartInstance?.resize();
+ materialQualityChartInstance?.resize();
+ semiCompletionChartInstance?.resize();
+ semiQualityChartInstance?.resize();
+ finalCompletionChartInstance?.resize();
+ finalQualityChartInstance?.resize();
+ });
+ });
</script>
<style scoped>
-.report-management {
- padding: 20px;
- background-color: #f5f5f5;
- min-height: 100vh;
-}
+ .report-management {
+ padding: 20px;
+ background-color: #f5f5f5;
+ min-height: 100vh;
+ /* height: 87vh;
+ overflow: hidden; */
+ }
-.page-header {
- margin-bottom: 20px;
- text-align: center;
-}
+ .page-header {
+ margin-bottom: 20px;
+ text-align: center;
+ }
-.page-header h2 {
- color: #303133;
- margin-bottom: 8px;
- font-size: 24px;
- font-weight: 600;
-}
+ .page-header h2 {
+ color: #303133;
+ margin-bottom: 8px;
+ font-size: 24px;
+ font-weight: 600;
+ }
-.page-header p {
- color: #909399;
- font-size: 14px;
- margin: 0;
-}
+ .page-header p {
+ color: #909399;
+ font-size: 14px;
+ margin: 0;
+ }
-.filter-card {
- margin-bottom: 20px;
-}
+ .filter-card {
+ margin-bottom: 20px;
+ }
-.statistics-cards {
- margin-bottom: 20px;
-}
+ .statistics-cards {
+ margin-bottom: 20px;
+ }
-.stat-card {
- height: 120px;
-}
+ .stat-card {
+ height: 120px;
+ }
-.stat-content {
- display: flex;
- align-items: center;
- height: 100%;
-}
+ .stat-content {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
-.stat-icon {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 20px;
- font-size: 24px;
- color: white;
-}
+ .stat-icon {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 20px;
+ font-size: 24px;
+ color: white;
+ }
-.stat-card:nth-child(1) .stat-icon {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
+ .stat-card:nth-child(1) .stat-icon {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ }
-.stat-card:nth-child(2) .stat-icon {
- background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
+ .stat-card:nth-child(2) .stat-icon {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ }
-.stat-card:nth-child(3) .stat-icon {
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
+ .stat-card:nth-child(3) .stat-icon {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ }
-.stat-card:nth-child(4) .stat-icon {
- background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-}
+ .stat-card:nth-child(4) .stat-icon {
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+ }
-.stat-info {
- flex: 1;
-}
+ .stat-info {
+ flex: 1;
+ }
-.stat-number {
- font-size: 28px;
- font-weight: bold;
- color: #303133;
- margin-bottom: 8px;
-}
+ .stat-number {
+ font-size: 28px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 8px;
+ }
-.stat-label {
- font-size: 14px;
- color: #909399;
-}
+ .stat-label {
+ font-size: 14px;
+ color: #909399;
+ }
-.charts-container {
- margin-bottom: 20px;
-}
+ .charts-container {
+ /* margin-bottom: 20px; */
+ position: relative;
+ }
-.chart-card {
- margin-bottom: 20px;
-}
+ .chart-card {
+ margin-bottom: 20px;
+ }
+ .container-line-right-bottom {
+ height: 20%;
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ /* background-color: #5b3f3f; */
+ }
+ .card-header {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ font-family: Source Han Sans, Source Han Sans;
+ font-weight: 700;
+ font-size: 18px;
+ color: #000000;
+ /* line-height: 27px; */
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+ .chart-title-line {
+ width: 6px;
+ height: 22px;
+ background-color: #161a9a;
+ margin-right: 16px;
+ border-radius: 3px;
+ }
-.card-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
+ .chart-container {
+ height: 250px;
+ width: 100%;
+ }
+ .chart-container-line {
+ height: 250px;
+ width: 100%;
+ display: flex;
+ position: relative;
+ }
-.chart-container {
- height: 300px;
- width: 100%;
-}
+ /* Tab 閫夋嫨鍣ㄦ牱寮� */
+ .tab-selector {
+ position: absolute;
+ top: 20px;
+ right: 40px;
+ display: flex;
+ border: 1px solid #dcdfe6;
+ border-radius: 4px;
+ overflow: hidden;
+ }
-.table-card {
- margin-bottom: 20px;
-}
+ .tab-item {
+ padding: 4px 12px;
+ cursor: pointer;
+ font-size: 14px;
+ color: #606266;
+ background-color: #fff;
+ border-right: 1px solid #dcdfe6;
+ transition: all 0.3s;
+ }
-.pagination-container {
- margin-top: 20px;
- text-align: right;
-}
+ .tab-item:last-child {
+ border-right: none;
+ }
-:deep(.el-card__header) {
- padding: 15px 20px;
- border-bottom: 1px solid #ebeef5;
- background-color: #fafafa;
-}
+ .tab-item:hover {
+ color: #409eff;
+ }
-:deep(.el-card__body) {
- padding: 20px;
-}
+ .tab-item.active {
+ color: #fff;
+ background-color: #409eff;
+ }
+ .container-line-left {
+ height: 100%;
+ width: 66%;
+ }
+ .container-line-right {
+ height: 100%;
+ width: 34%;
+ }
+ .container-line2-left {
+ height: 100%;
+ width: 50%;
+ }
+ .info-box {
+ width: 92%;
+ margin-left: 4%;
+ height: 100%;
+ background-color: #f7f8fa;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ }
+ .info-box-header {
+ width: 100%;
+ margin-left: 20px;
+ color: #1d2129;
+ font-size: 16px;
+ font-weight: 500;
+ }
-:deep(.el-table) {
- margin-bottom: 20px;
-}
+ .info-line {
+ width: 100%;
+ display: flex;
+ padding-left: 20px;
+ align-items: center;
+ }
+ .info-icon {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+ .info-line-title {
+ font-size: 12px;
+ color: #4e5969;
+ flex: 1;
+ }
+ .info-line-value1 {
+ font-size: 12px;
+ color: #3d3d3d;
+ color: #1d2129;
+ font-weight: 500;
+ margin-right: 15%;
+ }
+ .info-line-value2 {
+ font-size: 12px;
+ color: #3d3d3d;
+ color: #1d2129;
+ font-weight: 500;
+ margin-right: 10%;
+ }
+ .top-container {
+ height: 130px;
+ width: 100%;
+ display: flex;
+ }
+ .typeNum {
+ height: 100%;
+ width: 33.33%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .typeNum-left {
+ font-size: 12px;
+ color: #909399;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ .typeNum-left-text {
+ font-size: 12px;
+ color: #3491fa;
+ font-weight: 500;
+ margin-top: 5px;
+ }
+ .table-card {
+ margin-bottom: 20px;
+ }
+ .typeNum-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+ }
+ .typeNum-leftLine {
+ color: #3491fa;
+ font-size: 12px;
+ }
+ .typeNum-rightLine {
+ border-top: 1px solid #3491fa;
+ border-left: 1px solid #3491fa;
+ border-bottom: 1px solid #3491fa;
+ height: 80px;
+ width: 8px;
+ }
+ .typeNum-leftLine2 {
+ color: #5eb334;
+ font-size: 12px;
+ }
+ .typeNum-rightLine2 {
+ border-top: 1px solid #3491fa;
+ border-left: 1px solid #5eb334;
+ border-bottom: 1px solid #5eb334;
+ height: 80px;
+ width: 8px;
+ }
+ .typeNum-leftLine3 {
+ color: #8000ff;
+ font-size: 12px;
+ }
+ .typeNum-rightLine3 {
+ border-top: 1px solid #8000ff;
+ border-left: 1px solid #8000ff;
+ border-bottom: 1px solid #8000ff;
+ height: 80px;
+ width: 8px;
+ }
+ .typeNum-right {
+ margin-left: 10px;
+ display: flex;
+ flex-direction: column;
+ height: 90%;
+ justify-content: space-between;
+ }
+ .typeNum-right-top-name {
+ font-weight: 400;
+ font-size: 12px;
+ color: #3d3d3d;
+ }
+ .typeNum-right-top-text {
+ font-weight: 400;
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.85);
+ margin-top: 5px;
+ }
+ .unit {
+ font-size: 12px;
+ color: #3d3d3d;
+ }
+ .inspection-chart-box {
+ height: 50px;
+ width: 30%;
+ background-color: #f7f8fa;
+ border-radius: 8px;
+ padding-left: 15px;
+ }
+ .chart-box-title {
+ font-size: 12px;
+ color: #4e5969;
+ margin-top: 5px;
+ }
+ .unit {
+ font-size: 12px;
+ color: #3d3d3d;
+ }
+ .chart-box-num {
+ font-size: 18px;
+ color: #000;
+ margin-top: 5px;
+ font-weight: 500;
+ }
+ /* 璐ㄦ鍚堟牸鐜囧崱鐗囨牱寮� */
+ .top-container鍚堟牸鐜� {
+ height: 130px;
+ width: 100%;
+ display: flex;
+ gap: 15px;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .flex-center {
+ justify-content: space-evenly;
+ }
+ .quality-card {
+ /* flex: 1; */
+ width: 32%;
+ /* height: 100px; */
+ border-radius: 8px;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ }
-:deep(.el-progress) {
- margin: 0;
-}
+ .blue-card {
+ background-color: #e6f7ff;
+ }
-:deep(.el-tag) {
- margin: 0;
-}
+ .green-card {
+ background-color: #f6ffed;
+ color: #000000;
+ }
+
+ .purple-card {
+ background-color: #f9f0ff;
+ }
+
+ .quality-card-title {
+ font-size: 14px;
+ font-weight: 500;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ }
+
+ .quality-item-tip {
+ font-size: 12px;
+ color: #666666;
+ margin-bottom: 3px;
+ }
+ .blue-label {
+ color: #1890ff;
+ }
+ .green-label {
+ color: #52c41a;
+ }
+
+ .quality-card-title {
+ color: #000;
+ font-weight: bold;
+ }
+
+ .quality-card-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ }
+
+ .quality-item {
+ display: flex;
+ /* flex-direction: column; */
+ align-items: center;
+ justify-content: center;
+ margin-top: 5px;
+ flex: 1;
+ }
+
+ .quality-item-label {
+ font-size: 12px;
+ /* color: #666; */
+ margin-bottom: 4px;
+ }
+
+ .quality-item-value {
+ font-size: 20px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ }
+
+ .quality-item-chart {
+ width: 60px;
+ height: 60px;
+ margin-left: 10px;
+ }
+ /* .flex-center {
+ justify-content: space-evenly;
+ } */
+
+ .blue-chart {
+ /* background-color: rgba(24, 144, 255, 0.1); */
+ }
+
+ .green-chart {
+ /* background-color: rgba(82, 196, 26, 0.1); */
+ }
+
+ .purple-chart {
+ /* background-color: rgba(114, 46, 209, 0.1); */
+ }
+
+ .chart-ring {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ border: 15px solid transparent;
+ position: relative;
+ }
+
+ .blue-chart .chart-ring {
+ border-top-color: #1890ff;
+ border-right-color: #1890ff;
+ border-bottom-color: #1890ff;
+ transform: rotate(45deg);
+ }
+
+ .green-chart .chart-ring {
+ border-top-color: #52c41a;
+ border-right-color: #52c41a;
+ border-bottom-color: #52c41a;
+ transform: rotate(45deg);
+ }
+
+ .purple-chart .chart-ring {
+ border-top-color: #722ed1;
+ border-right-color: #722ed1;
+ border-bottom-color: #722ed1;
+ transform: rotate(45deg);
+ }
+
+ .pagination-container {
+ margin-top: 20px;
+ text-align: right;
+ }
+ .yearchange {
+ position: absolute;
+ right: 40px;
+ top: 20px;
+ display: flex;
+ align-items: center;
+ /* width: 60px; */
+ }
+
+ :deep(.el-card__header) {
+ padding: 15px 20px;
+ border-bottom: 1px solid #ffffff;
+ background-color: #ffffff;
+ }
+
+ :deep(.el-card__body) {
+ padding: 20px;
+ }
+
+ :deep(.el-table) {
+ margin-bottom: 20px;
+ }
+
+ :deep(.el-progress) {
+ margin: 0;
+ }
+
+ :deep(.el-tag) {
+ margin: 0;
+ }
+ :deep(.el-input__prefix) {
+ display: none !important;
+ }
</style>
--
Gitblit v1.9.3