From fb6e16a425e9ade08dbcca96d6a2f1c9b2f25b1e Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期三, 14 一月 2026 17:51:56 +0800
Subject: [PATCH] fix: 合格率统计调整：铜、铝合并为【导体】统计数据。明细表格字段更改和导出按钮
---
src/views/statisticalCharts/qualificationRateStatistics/index.vue | 614 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 474 insertions(+), 140 deletions(-)
diff --git a/src/views/statisticalCharts/qualificationRateStatistics/index.vue b/src/views/statisticalCharts/qualificationRateStatistics/index.vue
index 6b03b09..3456973 100644
--- a/src/views/statisticalCharts/qualificationRateStatistics/index.vue
+++ b/src/views/statisticalCharts/qualificationRateStatistics/index.vue
@@ -2,7 +2,7 @@
<div class="app-container">
<el-row>
<el-col :span="4">
- <el-radio-group v-model="dateType" @change="changeDate">
+ <el-radio-group v-model="dateType" @change="changeDateType">
<el-radio-button label="1">鏈懆</el-radio-button>
<el-radio-button label="2">鏈湀</el-radio-button>
<el-radio-button label="3">浠婂勾</el-radio-button>
@@ -11,18 +11,9 @@
<el-col :span="20">
<el-form ref="entity" size="small" :inline="true">
<el-form-item style="width: 20%;">
- <el-date-picker
- v-model="datePicker"
- end-placeholder="缁撴潫鏃ユ湡"
- format="yyyy-MM-dd"
- placeholder="閫夋嫨鏃ユ湡"
- range-separator="鑷�"
- size="small"
- start-placeholder="寮�濮嬫棩鏈�"
- type="daterange"
- style="width: 100%;"
- value-format="yyyy-MM-dd"
- @change="changeDatePicker">
+ <el-date-picker v-model="datePicker" end-placeholder="缁撴潫鏃ユ湡" format="yyyy-MM-dd" placeholder="閫夋嫨鏃ユ湡"
+ range-separator="鑷�" size="small" start-placeholder="寮�濮嬫棩鏈�" type="daterange" style="width: 100%;"
+ value-format="yyyy-MM-dd" @change="changeDatePicker">
</el-date-picker>
</el-form-item>
<el-form-item label="鏍峰搧鍚嶇О" prop="sampleName">
@@ -32,65 +23,66 @@
<el-input v-model="modelName" clearable placeholder="璇疯緭鍏ュ瀷鍙�" size="small" @change="changeDate"></el-input>
</el-form-item>
<el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName">
- <el-input v-model="supplierName" clearable placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О" size="small" @change="changeDate"></el-input>
+ <el-input v-model="supplierName" clearable placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О" size="small"
+ @change="changeDate"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
- <div class="pie-card">
- <div class="title">鍘熸潗鏂欏悎鏍肩巼</div>
- <span class="data">{{passRate}}</span>
- <Echarts ref="chart"
- :legend="pieLegend"
- :series="materialPieSeries"
- :tooltip="pieTooltip"
- style="height: 36vh;"></Echarts>
+ <div class="pie-card" :class="{ active: currentMaterialProp === '00Raw' }" @click="updateTitle('鍘熸潗鏂�')">
+ <div class="title"><span style="color: #005BAC;font-weight: bold;">鍘熸潗鏂�</span>鍚堟牸鐜�</div>
+ <Echarts ref="chart" :legend="pieLegend" :series="rawPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
+ </Echarts>
</div>
</el-col>
<el-col :span="8">
- <div class="pie-card">
- <div class="title"><span style="color: #F56C6C">鏈湀</span>妫�楠岀被鍨嬫暟閲�</div>
- <Echarts ref="chart"
- :chartStyle="chartStyle2"
- :legend="pieLegend"
- :series="materialPieSeries1"
- :tooltip="pieTooltip"
- style="height: 36vh;"></Echarts>
+ <div class="pie-card" :class="{ active: currentMaterialProp === '01Cu,02Al' }" @click="updateTitle('瀵间綋')">
+ <div class="title"><span style="color: #005BAC;font-weight: bold;">瀵间綋</span>鍚堟牸鐜�</div>
+ <Echarts ref="chart" :legend="pieLegend" :series="conductorPieSeries" :tooltip="pieTooltip"
+ style="height: 36vh;">
+ </Echarts>
</div>
</el-col>
<el-col :span="8">
- <div class="pie-card">
- <div class="title">鍘熸潗鏂�<span style="color: #F56C6C">鏈湀</span>涓�<span style="color: #F56C6C">涓婃湀</span>鍚堟牸鐜囧姣�</div>
- <Echarts ref="chart"
- :barColors="barColors2"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend"
- :series="barSeries"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- style="height: 36vh;"></Echarts>
+ <div class="pie-card" :class="{ active: currentMaterialProp === '04Dlan' }" @click="updateTitle('鐢电紗')">
+ <div class="title"><span style="color: #005BAC;font-weight: bold;">鐢电紗</span>鍚堟牸鐜�</div>
+ <Echarts ref="chart" :legend="pieLegend" :series="dlanPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
+ </Echarts>
</div>
</el-col>
</el-row>
- <el-row>
- <el-col :span="24">
+ <el-row :gutter="20">
+ <el-col :span="12">
<div class="inspection-card">
- <div class="title">鍚堟牸鐜�</div>
- <Echarts ref="chart"
- :barColors="barColors"
- :grid="grid"
- :legend="legend"
- :lineColors="lineColors"
- :options="echartsOptions"
- :series="echartsSeries"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- style="height: 40vh;"></Echarts>
+ <div class="title" style="display:flex;align-items:center;justify-content:space-between;">
+ <div>
+ <span style="color: #005BAC;font-weight: bold;">{{ inspectionTitle }}</span>鍚堟牸鐜囪秼鍔�
+ </div>
+ <el-button type="text" icon="el-icon-download" @click="downloadBarChart">
+ 涓嬭浇
+ </el-button>
+ </div>
+ <Echarts ref="barChart" :barColors="barColors" :grid="grid" :legend="legend" :lineColors="lineColors"
+ :options="echartsOptions" :series="echartsSeries" :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis"
+ style="height: 40vh;">
+ </Echarts>
+
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="inspection-card">
+ <div class="title" style="display:flex;align-items:center;justify-content:space-between;">
+ <div>
+ <span style="color: #005BAC;font-weight: bold;">{{ inspectionTitle }}</span>鏄庣粏鏁版嵁
+ </div>
+ <el-button type="text" icon="el-icon-download" @click="downloadTable">
+ 涓嬭浇
+ </el-button>
+ </div>
+ <lims-table :tableData="tableData" :column="tableColumn" :tableLoading="tableLoading"
+ :height="'calc(40vh - 40px)'" :show-summary="true" :summary-method="getSummaries"></lims-table>
</div>
</el-col>
</el-row>
@@ -99,17 +91,20 @@
<script>
import Echarts from "@/components/echarts/echarts.vue";
+import limsTable from "@/components/Table/lims-table.vue";
import {
getOrderTypeCookie,
getRawPassRateByBarChart,
getRawPassRateByCake,
- getRawUpMonth
+ getRawUpMonth,
+ getMaterialPropTable,
+ exportSupplierExcel
} from "@/api/statisticalCharts/dataAnalysis";
export default {
name: "QualificationRateStatistics",
// import 寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
- components: {Echarts},
+ components: { Echarts, limsTable },
data() {
// 杩欓噷瀛樻斁鏁版嵁
return {
@@ -120,10 +115,17 @@
sampleName: '',
modelName: '',
supplierName: '',
+ inspectionTitle: '鍘熸潗鏂�',
+ currentMaterialProp: '00Raw',
echartsOptions: {
title: {
- text: '绀轰緥鍥捐〃',
- left: 'center'
+ text: '',
+ left: 'center',
+ top: 10,
+ textStyle: {
+ fontSize: 14,
+ fontWeight: 'bold'
+ }
}
},
xAxis: [
@@ -153,43 +155,46 @@
],
echartsSeries: [
{
- name: '鎬绘暟',
+ name: '鍚堟牸',
type: 'bar',
data: [],
label: {
show: true,
- position: 'top'
- },
+ position: 'inside'
+ }
+ },
+ {
+ name: '涓嶅悎鏍�',
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ position: 'inside'
+ }
},
{
name: '鍚堟牸鐜�',
type: 'line',
smooth: true,
- tooltip: {
- valueFormatter: function (value) {
- return value + ' %';
- }
- },
+ yAxisIndex: 1,
+ data: [],
label: {
show: true,
- position: 'top',
- formatter: function (value) {
- return value.value + ' %';
- },
- distance: 14
- },
- yAxisIndex: 1,
- data: []
- },
+ formatter: (v) => v.value + '%'
+ }
+ }
],
grid: {
left: '3%',
right: '4%',
- bottom: '3%',
+ bottom: '15%',
containLabel: true
},
legend: {
- data: ['鎬绘暟','鍚堟牸鐜�']
+ data: ['鍚堟牸', '涓嶅悎鏍�', '鍚堟牸鐜�'],
+ orient: 'horizontal',
+ bottom: 0,
+ itemGap: 20
},
tooltip: {
trigger: 'axis',
@@ -198,22 +203,54 @@
}
},
lineColors: ['#91A0FC'],
- barColors: ['#86C1F4'],
+ barColors: ['#13ce66', '#F56C6C'], // 鍚堟牸缁� / 涓嶅悎鏍肩孩
barColors2: ['#A4EEDA'],
pieTooltip: {
trigger: 'item'
},
pieLegend: {
- orient: 'vertical',
- right: 20,
- top: 'middle',
+ orient: 'horizontal',
+ bottom: 0,
},
- materialPieSeries: [
+ rawPieSeries: [
{
name: 'Access From',
type: 'pie',
- radius: ['40%', '70%'],
- right: '22%',
+ radius: '70%',
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c}}',
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ labelLine: {
+ length: 20,
+ length2: 40
+ },
+ data: [
+ { value: 0, name: '涓嶅悎鏍兼暟閲�', itemStyle: { color: '#F56C6C' } },
+ { value: 0, name: '鍚堟牸鏁伴噺', itemStyle: { color: '#67C23A' } }
+ ]
+ }
+ ],
+ conductorPieSeries: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '70%',
+ center: ['50%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
@@ -236,8 +273,41 @@
length2: 40,
},
data: [
- { value: 0, name: '涓嶅悎鏍兼暟閲�' },
- { value: 0, name: '鍚堟牸鏁伴噺' },
+ { value: 0, name: '涓嶅悎鏍兼暟閲�', itemStyle: { color: '#F56C6C' } },
+ { value: 0, name: '鍚堟牸鏁伴噺', itemStyle: { color: '#67C23A' } },
+ ]
+ }
+ ],
+ dlanPieSeries: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '70%',
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c}}',
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ },
+ },
+ labelLine: {
+ length: 20,
+ length2: 40,
+ },
+ data: [
+ { value: 0, name: '涓嶅悎鏍兼暟閲�', itemStyle: { color: '#F56C6C' } },
+ { value: 0, name: '鍚堟牸鏁伴噺', itemStyle: { color: '#67C23A' } },
]
}
],
@@ -317,64 +387,146 @@
},
],
tableData: [],
- passRate: '',
+ tableLoading: false,
+ tableColumn: [
+ { label: '渚涘簲鍟嗗悕绉�', prop: 'supplierName', minWidth: '200px' },
+ { label: '鍒拌揣鎵规', prop: 'totalBatch', minWidth: '100px' },
+ { label: '涓嶅悎鏍兼壒娆�', prop: 'unqualifiedBatch', minWidth: '100px' },
+ {
+ label: '鍚堟牸鐜�(%)',
+ prop: 'passRate',
+ minWidth: '100px',
+ formatData: (val) => (val != null ? val + '%' : '0%')
+ }
+ ],
+ rawPassRate: '',
+ conductorPassRate: '',
+ dlanPassRate: '',
sum: '',
}
},
+
mounted() {
- this.getBar()
- this.getRawPass()
- this.getOrderType()
- this.getPassRateCom()
+ this.setBarChartTitle();
+ this.getBar();
+ this.getRawPass();
+ this.getOrderType();
+ this.getPassRateCom();
+ this.getTableData();
},
+
// 鏂规硶闆嗗悎
methods: {
// 鑾峰彇鍚堟牸鐜囧浘琛ㄦ暟鎹�
- getBar() {
- const params = {
- dateType: this.dateType,
- beginDate: this.beginDate,
- endDate: this.endDate,
- sampleName: this.sampleName,
- modelName: this.modelName,
- supplierName: this.supplierName,
- }
- getRawPassRateByBarChart(params).then((res) => {
- let lineData = []
- let barData = []
- let xAxis = []
- res.data.forEach(item => {
- barData.push(item.sum)
- lineData.push(item.passRate)
- xAxis.push(item.searchTime)
- })
- this.echartsSeries[0].data = barData
- this.echartsSeries[1].data = lineData
- this.yAxis[0].max = Math.ceil(Math.max.apply(null, barData) / 50) * 50
- this.yAxis[0].interval = this.yAxis[0].max / 5
- this.xAxis[0].data = xAxis
- })
+
+ setBarChartTitle() {
+ this.echartsOptions.title.text = `${this.inspectionTitle}鍚堟牸鐜囪秼鍔縛;
},
- // 鑾峰彇鍘熸潗鏂欏悎鏍肩巼鍥捐〃鏁版嵁
+
+ getBar() {
+ const types = this.currentMaterialProp.split(',');
+ const requests = types.map(t => {
+ const params = {
+ dateType: this.dateType,
+ beginDate: this.beginDate,
+ endDate: this.endDate,
+ sampleName: this.sampleName,
+ modelName: this.modelName,
+ supplierName: this.supplierName,
+ materialProp: t,
+ };
+ return getRawPassRateByBarChart(params);
+ });
+
+ Promise.all(requests).then((responses) => {
+ let dateMap = {}; // { date: { qualified, unQualified } }
+
+ responses.forEach(res => {
+ if (res.data && Array.isArray(res.data)) {
+ res.data.forEach(item => {
+ const date = item.searchTime;
+ if (!dateMap[date]) {
+ dateMap[date] = { qualified: 0, unQualified: 0 };
+ }
+ dateMap[date].qualified += (item.qualified || 0);
+ dateMap[date].unQualified += (item.unQualified || 0);
+ });
+ }
+ });
+
+ const sortedDates = Object.keys(dateMap).sort();
+ let qualifiedData = [];
+ let unQualifiedData = [];
+ let lineData = [];
+ let xAxis = [];
+
+ sortedDates.forEach(date => {
+ const { qualified, unQualified } = dateMap[date];
+ const total = qualified + unQualified;
+ const passRate = total > 0 ? (qualified / total * 100).toFixed(2) : 0;
+
+ xAxis.push(date);
+ qualifiedData.push(qualified);
+ unQualifiedData.push(unQualified);
+ lineData.push(parseFloat(passRate));
+ });
+
+ this.echartsSeries[0].data = qualifiedData;
+ this.echartsSeries[1].data = unQualifiedData;
+ this.echartsSeries[2].data = lineData;
+ this.xAxis[0].data = xAxis;
+ });
+ },
+
+ // 鑾峰彇鐗╂枡灞炴�у悎鏍肩巼鍥捐〃鏁版嵁
getRawPass() {
- const params = {
- dateType: this.dateType,
- beginDate: this.beginDate,
- endDate: this.endDate,
- sampleName: this.sampleName,
- modelName: this.modelName,
- supplierName: this.supplierName,
- }
- getRawPassRateByCake(params).then((res) => {
- this.materialPieSeries[0].data[0].value = res.data.unQualified
- this.materialPieSeries[0].data[1].value = res.data.qualified
- this.passRate = res.data.passRate + '%'
- })
+ const materials = [
+ { type: '00Raw', series: 'rawPieSeries', rate: 'rawPassRate' },
+ { type: '01Cu,02Al', series: 'conductorPieSeries', rate: 'conductorPassRate' },
+ { type: '04Dlan', series: 'dlanPieSeries', rate: 'dlanPassRate' }
+ ];
+
+ materials.forEach(item => {
+ const types = item.type.split(',');
+ const requests = types.map(t => {
+ const params = {
+ dateType: this.dateType,
+ beginDate: this.beginDate,
+ endDate: this.endDate,
+ sampleName: this.sampleName,
+ modelName: this.modelName,
+ supplierName: this.supplierName,
+ materialProp: t
+ };
+ return getRawPassRateByCake(params);
+ });
+
+ Promise.all(requests).then((responses) => {
+ let unQualified = 0;
+ let qualified = 0;
+ responses.forEach(res => {
+ if (res.data) {
+ unQualified += (res.data.unQualified || 0);
+ qualified += (res.data.qualified || 0);
+ }
+ });
+
+ if (qualified + unQualified > 0) {
+ this[item.series][0].data[0].value = unQualified;
+ this[item.series][0].data[1].value = qualified;
+ const passRate = (qualified / (qualified + unQualified) * 100).toFixed(2);
+ this[item.rate] = passRate + '%';
+ } else {
+ this[item.series][0].data[0].value = 0;
+ this[item.series][0].data[1].value = 0;
+ this[item.rate] = '';
+ }
+ });
+ });
},
// 鑾峰彇鏈湀妫�楠岀被鍨嬫暟閲�
getOrderType() {
getOrderTypeCookie().then((res) => {
- if (res.code === 201) return
this.materialPieSeries1[0].data[0].value = res.data.customer // 濮旀墭
this.materialPieSeries1[0].data[1].value = res.data.enter // 杩涘巶
this.materialPieSeries1[0].data[2].value = res.data.quarterly // 瀛ｅ害
@@ -394,13 +546,24 @@
this.barSeries[0].data = barData
})
},
- changeDate () {
+ changeDate() {
this.getBar()
this.getRawPass()
+ this.getTableData()
// this.getOrderType()
// this.getPassRateCom()
},
- changeDatePicker (val) {
+
+ changeDateType() {
+ this.datePicker = []
+ this.beginDate = ''
+ this.endDate = ''
+ this.getBar()
+ this.getRawPass()
+ this.getTableData()
+ },
+
+ changeDatePicker(val) {
if (val) {
this.beginDate = val[0] + ' 00:00:00'
this.endDate = val[1] + ' 23:59:59'
@@ -410,8 +573,165 @@
}
this.getBar()
this.getRawPass()
- // this.getOrderType()
- // this.getPassRateCom()
+ this.getTableData()
+ },
+
+ updateTitle(title) {
+ this.inspectionTitle = title;
+
+ const typeMap = {
+ '鍘熸潗鏂�': '00Raw',
+ '瀵间綋': '01Cu,02Al',
+ '鐢电紗': '04Dlan',
+ };
+
+ this.currentMaterialProp = typeMap[title] || '00Raw';
+
+ this.setBarChartTitle();
+ this.getBar();
+ this.getTableData();
+ },
+
+
+ getTableData() {
+ this.tableLoading = true;
+ const types = this.currentMaterialProp.split(',');
+ const requests = types.map(t => {
+ const params = {
+ dateType: this.dateType,
+ beginDate: this.beginDate,
+ endDate: this.endDate,
+ sampleName: this.sampleName,
+ modelName: this.modelName,
+ supplierName: this.supplierName,
+ materialProp: t,
+ };
+ return getMaterialPropTable(params);
+ });
+
+ Promise.all(requests).then((responses) => {
+ let supplierMap = {}; // { supplierName: { totalBatch, unqualifiedBatch } }
+
+ responses.forEach(res => {
+ const data = Array.isArray(res.data) ? res.data : (res.data && res.data.records ? res.data.records : []);
+ data.forEach(item => {
+ const name = item.supplierName || '鏈煡渚涘簲鍟�';
+ if (!supplierMap[name]) {
+ supplierMap[name] = { totalBatch: 0, unqualifiedBatch: 0 };
+ }
+ supplierMap[name].totalBatch += (item.totalBatch || 0);
+ supplierMap[name].unqualifiedBatch += (item.unqualifiedBatch || 0);
+ });
+ });
+
+ const tableData = Object.keys(supplierMap).map(name => {
+ const { totalBatch, unqualifiedBatch } = supplierMap[name];
+ const passRate = totalBatch > 0 ? ((totalBatch - unqualifiedBatch) / totalBatch * 100).toFixed(2) : 0;
+ return {
+ supplierName: name,
+ totalBatch,
+ unqualifiedBatch,
+ passRate
+ };
+ });
+
+ // Sort by totalBatch descending
+ tableData.sort((a, b) => b.totalBatch - a.totalBatch);
+ this.tableData = tableData;
+ this.tableLoading = false;
+ }).catch(() => {
+ this.tableLoading = false;
+ });
+ },
+
+ // 涓嬭浇鏌辩姸鍥惧浘鐗�
+ downloadBarChart() {
+ if (!this.$refs.barChart) {
+ this.$message.warning('鍥捐〃灏氭湭鍔犺浇瀹屾垚');
+ return;
+ }
+
+ const title = `${this.inspectionTitle}_鍚堟牸鐜囪秼鍔縛;
+ this.$refs.barChart.downloadImage(title);
+ },
+
+ // 涓嬭浇琛ㄦ牸鏁版嵁
+ downloadTable() {
+ if (!this.tableData || this.tableData.length === 0) {
+ this.$message.warning("娌℃湁鍙鍑虹殑鏁版嵁");
+ return;
+ }
+
+ exportSupplierExcel(this.tableData)
+ .then(res => {
+ if (res.type && res.type.includes("application/json")) {
+ const fileReader = new FileReader();
+ fileReader.onload = () => {
+ const msg = JSON.parse(fileReader.result);
+ this.$message.error(msg.msg || "瀵煎嚭澶辫触");
+ };
+ fileReader.readAsText(res);
+ return;
+ }
+
+ const blob = new Blob([res], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+ });
+
+ const fileName = `${this.inspectionTitle}鍚堟牸鐜囩粺璁�.xlsx`;
+
+ if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+ window.navigator.msSaveOrOpenBlob(blob, fileName);
+ } else {
+ const link = document.createElement("a");
+ link.href = window.URL.createObjectURL(blob);
+ link.download = fileName;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ window.URL.revokeObjectURL(link.href);
+ }
+ })
+ .catch(() => {
+ this.$message.error("瀵煎嚭澶辫触");
+ });
+ },
+
+ getSummaries(param) {
+ const { columns, data } = param;
+ const sums = [];
+ columns.forEach((column, index) => {
+ if (index === 0) {
+ sums[index] = '鍚堣';
+ return;
+ }
+
+ const property = column.property;
+ if (property === 'supplierName') {
+ sums[index] = '';
+ return;
+ }
+
+ if (property === 'totalBatch' || property === 'unqualifiedBatch') {
+ const values = data.map(item => Number(item[property]));
+ sums[index] = values.reduce((prev, curr) => {
+ const value = Number(curr);
+ if (!isNaN(value)) {
+ return prev + curr;
+ } else {
+ return prev;
+ }
+ }, 0);
+ } else if (property === 'passRate') {
+ const totalBatch = data.reduce((prev, curr) => prev + (Number(curr.totalBatch) || 0), 0);
+ const unqualifiedBatch = data.reduce((prev, curr) => prev + (Number(curr.unqualifiedBatch) || 0), 0);
+ sums[index] = totalBatch > 0 ? ((totalBatch - unqualifiedBatch) / totalBatch * 100).toFixed(2) + '%' : '0%';
+ } else {
+ sums[index] = '';
+ }
+ });
+
+ return sums;
},
},
}
@@ -421,24 +741,38 @@
.title {
padding: 10px 0 0 20px;
}
+
.table {
padding: 0 10px 10px;
}
+
.pie-card {
width: 100%;
background: #FFFFFF;
margin-top: 10px;
position: relative;
+ cursor: pointer;
+ border-radius: 8px;
+ transition:
+ transform 0.25s ease,
+ box-shadow 0.25s ease;
}
+
+.pie-card.active {
+ transform: translateY(-3px) scale(1.03);
+ box-shadow: 0 5px 10px rgba(0, 91, 172, 0.25);
+}
+
.data {
position: absolute;
font-size: 20px;
- transform: translate(-50%);
- left: 40%;
- top: 42%;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
z-index: 1;
}
-.inspection-card{
+
+.inspection-card {
width: 100%;
background: #FFFFFF;
margin-top: 10px;
--
Gitblit v1.9.3