From d3d2f9861c3d4bccfb9594b7efd76e62d3b44b65 Mon Sep 17 00:00:00 2001
From: yuan <123@>
Date: 星期三, 03 六月 2026 16:41:31 +0800
Subject: [PATCH] feat: 添加合格率计算及显示功能
---
src/views/reportAnalysis/reportManagement/index.vue | 758 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 410 insertions(+), 348 deletions(-)
diff --git a/src/views/reportAnalysis/reportManagement/index.vue b/src/views/reportAnalysis/reportManagement/index.vue
index 8cd237f..221ef86 100644
--- a/src/views/reportAnalysis/reportManagement/index.vue
+++ b/src/views/reportAnalysis/reportManagement/index.vue
@@ -1,315 +1,327 @@
<template>
- <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">{{ getInspectStatValue(0, 'totalCount') }} <span class="unit">涓�</span></div>
+ <div class="scale-container">
+ <div class="report-management-container"
+ :style="{ transform: `scale(${scaleRatio})` }">
+ <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>
- <div class="typeNum-right-bottom">
- <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'completedCount') }} <span class="unit">涓�</span>
+ </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">{{ getInspectStatValue(0, 'totalCount') }} <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(0, 'completedCount') }} <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">{{ getInspectStatValue(1, 'totalCount') }} <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'completedCount') }} <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">{{ getInspectStatValue(2, 'totalCount') }} <span class="unit">涓�</span></div>
+ </div>
+ <div class="typeNum-right-bottom">
+ <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
+ <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'completedCount') }} <span class="unit">涓�</span>
+ </div>
+ </div>
</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">{{ getInspectStatValue(1, 'totalCount') }} <span class="unit">涓�</span></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>
- <div class="typeNum-right-bottom">
- <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">{{ getInspectStatValue(1, 'completedCount') }} <span class="unit">涓�</span>
+ </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">{{ getPassRateStatValue(0, 'completionRate') }}</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">{{ getPassRateStatValue(0, 'passRate') }}</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">{{ getPassRateStatValue(1, 'completionRate') }}</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">{{ getPassRateStatValue(1, 'passRate') }}</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">{{ getPassRateStatValue(2, 'completionRate') }}</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">{{ getPassRateStatValue(2, 'passRate') }}</div>
+ </div>
+ <div class="quality-item-chart"
+ ref="finalQualityChart"></div>
+ </div>
</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">{{ getInspectStatValue(2, 'totalCount') }} <span class="unit">涓�</span></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>
- <div class="typeNum-right-bottom">
- <div class="typeNum-right-top-name">宸插畬鎴愭暟</div>
- <div class="typeNum-right-top-text">{{ getInspectStatValue(2, 'completedCount') }} <span class="unit">涓�</span>
+ </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">{{ getYearlyStatValue(0, 'totalCount') }}</div>
+ </div>
+ <div class="inspection-chart-box">
+ <div class="chart-box-title">鍗婃垚鍝佹�绘暟</div>
+ <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div>
+ </div>
+ <div class="inspection-chart-box">
+ <div class="chart-box-title">鎴愬搧鎬绘暟</div>
+ <div class="chart-box-num">{{ getYearlyStatValue(2, 'totalCount') }}</div>
+ </div>
</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">{{ getPassRateStatValue(0, 'completionRate') }}</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">{{ getPassRateStatValue(0, 'passRate') }}</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">{{ getPassRateStatValue(1, 'completionRate') }}</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">{{ getPassRateStatValue(1, 'passRate') }}</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">{{ getPassRateStatValue(2, 'completionRate') }}</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">{{ getPassRateStatValue(2, 'passRate') }}</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">{{ getYearlyStatValue(0, 'totalCount') }}</div>
- </div>
- <div class="inspection-chart-box">
- <div class="chart-box-title">鍗婃垚鍝佹�绘暟</div>
- <div class="chart-box-num">{{ getYearlyStatValue(1, 'totalCount') }}</div>
- </div>
- <div class="inspection-chart-box">
- <div class="chart-box-title">鎴愬搧鎬绘暟</div>
- <div class="chart-box-num">{{ getYearlyStatValue(2, 'totalCount') }}</div>
- </div>
- </div>
- </div>
- </div>
- <!-- </div> -->
- <!-- <div ref="sampleChartRef"
+ <!-- </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"
- v-for="(item, index) in topParametersData.list"
- :key="index">
- <div class="info-icon"
- :style="{ backgroundColor: getParameterColor(index) }"></div>
- <div class="info-line-title">{{ item.name }}</div>
- <div class="info-line-value1">{{ item.percentage }}%</div>
- <div class="info-line-value2">{{ item.count }}</div>
- </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>
- </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>
+ </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"
+ v-for="(item, index) in topParametersData.list"
+ :key="index">
+ <div class="info-icon"
+ :style="{ backgroundColor: getParameterColor(index) }"></div>
+ <div class="info-line-title">{{ item.name }}</div>
+ <div class="info-line-value1">{{ item.percentage }}%</div>
+ <div class="info-line-value2">{{ item.count }}</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>
</div>
</div>
</template>
<script setup>
- import { ref, reactive, onMounted, nextTick } from "vue";
+ import {
+ ref,
+ reactive,
+ onMounted,
+ nextTick,
+ onBeforeUnmount,
+ watch,
+ } from "vue";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import {
@@ -320,6 +332,48 @@
getMonthlyCompletionDetails,
getTopParameters,
} from "@/api/reportAnalysis/qualityReport";
+
+ // 缂╂斁姣斾緥
+ const scaleRatio = ref(1);
+ // 璁捐灏哄锛堝熀鍑嗗昂瀵革級
+ const designWidth = 1920;
+ const designHeight = 1080;
+
+ // 璁＄畻缂╂斁姣斾緥
+ const calculateScale = () => {
+ const container = document.querySelector(".scale-container");
+ if (!container) return;
+
+ // 鑾峰彇瀹瑰櫒鐨勫疄闄呭昂瀵�
+ const containerWidth = container.clientWidth;
+ const containerHeight = container.clientHeight;
+
+ if (containerWidth === 0) {
+ // 濡傛灉杩樻病娓叉煋鍑烘潵锛屽欢杩熶竴涓嬪啀璁＄畻
+ setTimeout(calculateScale, 100);
+ return;
+ }
+
+ // 璁＄畻瀹藉害缂╂斁姣斾緥锛屼娇鍏跺缁堝崰婊″搴�
+ const scaleX = containerWidth / designWidth;
+ scaleRatio.value = scaleX;
+ };
+
+ // 绐楀彛澶у皬鍙樺寲澶勭悊
+ const handleResize = () => {
+ calculateScale();
+ // 鍚屾椂璋冩暣鍥捐〃
+ sampleChart?.resize();
+ equipmentChart?.resize();
+ inspectionChart?.resize();
+ usageChart?.resize();
+ materialCompletionChartInstance?.resize();
+ materialQualityChartInstance?.resize();
+ semiCompletionChartInstance?.resize();
+ semiQualityChartInstance?.resize();
+ finalCompletionChartInstance?.resize();
+ finalQualityChartInstance?.resize();
+ };
// 鍝嶅簲寮忔暟鎹�
const filterForm = reactive({
@@ -349,24 +403,24 @@
};
const getYearlyStatValue = (type, field) => {
- const stat = yearlyPassRateData.value.find(item => item.inspectType === type);
+ const stat = yearlyPassRateData.value.find(item => item.modelType === type);
return stat ? stat[field] : 0;
};
const getInspectStatValue = (type, field) => {
const stat = inspectStatisticsData.value.find(
- item => item.inspectType === type
+ item => item.modelType === type
);
return stat ? stat[field] : 0;
};
const getPassRateStatValue = (type, field) => {
const stat = passRateStatisticsData.value.find(
- item => item.inspectType === type
+ item => item.modelType === type
);
if (stat) {
if (field === "completionRate" || field === "passRate") {
- return stat[field] ? Number(stat[field]).toFixed(0) + "%" : "0%";
+ return stat[field] ? parseFloat(stat[field]) + "%" : "0%";
}
return stat[field];
}
@@ -438,15 +492,10 @@
const fetchTopParametersData = async () => {
try {
- const typeMap = { raw: 0, semi: 1, final: 2 };
+ const typeMap = { raw: 1, semi: 2, final: 3 };
const res = await getTopParameters(typeMap[activeTab.value]);
if (res.code === 200) {
topParametersData.value = res.data;
- sumnum.value = topParametersData.value.list.reduce(
- (acc, cur) => acc + cur.count,
- 0
- );
- console.log(sumnum.value);
initSampleChart();
}
} catch (error) {
@@ -471,9 +520,8 @@
const currentYear = new Date().getFullYear();
return time.getFullYear() > currentYear;
};
- const sumnum = ref(0);
+
// 鐩戝惉骞翠唤鍙樺寲
- import { watch } from "vue";
watch(value3, () => {
fetchMonthlyPassRateData();
fetchYearlyPassRateData();
@@ -520,37 +568,29 @@
title: {
show: false,
},
- // tooltip: {
- // trigger: "item",
- // formatter: "{a} <br/>{b}: {c} ({d}%)",
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ },
+ // legend: {
+ // orient: "vertical",
+ // left: "left",
// },
series: [
{
- name: "",
+ name: "妫�娴嬮」鐩�",
type: "pie",
radius: ["40%", "80%"],
avoidLabelOverlap: false,
label: {
- show: true,
+ show: false,
position: "center",
- formatter: function () {
- return `{a|妫�娴嬫暟閲弣\n{b|${sumnum.value}}`;
- },
- disabled: true,
- rich: {
- a: {
- fontSize: 14,
- color: "#606266",
- fontWeight: "normal",
- lineHeight: 20,
- },
- b: {
- fontSize: 20,
- color: "#303133",
- fontWeight: "bold",
- lineHeight: 24,
- padding: [5, 0, 0, 0],
- },
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: "18",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -961,7 +1001,13 @@
};
// 鐢熷懡鍛ㄦ湡
+ let resizeObserver = null;
onMounted(() => {
+ // 璁＄畻鍒濆缂╂斁姣斾緥
+ nextTick(() => {
+ calculateScale();
+ });
+
fetchInspectStatisticsData();
fetchPassRateStatisticsData();
fetchMonthlyPassRateData();
@@ -976,30 +1022,48 @@
initAllQualityCharts();
});
// 鐩戝惉绐楀彛澶у皬鍙樺寲锛岄噸鏂拌皟鏁村浘琛ㄥぇ灏�
- window.addEventListener("resize", () => {
- sampleChart?.resize();
- equipmentChart?.resize();
- inspectionChart?.resize();
- usageChart?.resize();
+ window.addEventListener("resize", handleResize);
- // 璋冩暣璐ㄦ鍚堟牸鐜囧浘琛ㄥぇ灏�
- materialCompletionChartInstance?.resize();
- materialQualityChartInstance?.resize();
- semiCompletionChartInstance?.resize();
- semiQualityChartInstance?.resize();
- finalCompletionChartInstance?.resize();
- finalQualityChartInstance?.resize();
- });
+ // 浣跨敤 ResizeObserver 鐩戝惉瀹瑰櫒灏哄鍙樺寲锛堣В鍐充晶杈规爮鍒囨崲闂锛�
+ const container = document.querySelector(".scale-container");
+ if (container && window.ResizeObserver) {
+ resizeObserver = new ResizeObserver(() => {
+ handleResize();
+ });
+ resizeObserver.observe(container);
+ }
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener("resize", handleResize);
+ if (resizeObserver) {
+ resizeObserver.disconnect();
+ }
});
</script>
<style scoped>
+ .scale-container {
+ position: relative;
+ width: 100%;
+ height: calc(100vh - 84px);
+ background-color: #f0f2f5;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ .report-management-container {
+ position: relative;
+ width: 1920px;
+ height: 1080px;
+ transform-origin: left top;
+ background-color: #f0f2f5;
+ transition: transform 0.3s;
+ }
+
.report-management {
padding: 20px;
- background-color: #f5f5f5;
- min-height: 100vh;
- /* height: 87vh;
- overflow: hidden; */
+ height: 100%;
}
.page-header {
@@ -1200,7 +1264,6 @@
color: #1d2129;
font-size: 16px;
font-weight: 500;
- line-height: 37px;
}
.info-line {
@@ -1208,7 +1271,6 @@
display: flex;
padding-left: 20px;
align-items: center;
- flex: 1;
}
.info-icon {
@@ -1471,8 +1533,8 @@
}
/* .flex-center {
- justify-content: space-evenly;
- } */
+ justify-content: space-evenly;
+ } */
.blue-chart {
/* background-color: rgba(24, 144, 255, 0.1); */
--
Gitblit v1.9.3