From b64d6db597d332c699f84e4928f6d3e5551851f1 Mon Sep 17 00:00:00 2001
From: zss <zss@example.com>
Date: 星期二, 04 三月 2025 16:43:16 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/views/statisticalCharts/qualificationRateStatistics/index.vue | 448 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 448 insertions(+), 0 deletions(-)
diff --git a/src/views/statisticalCharts/qualificationRateStatistics/index.vue b/src/views/statisticalCharts/qualificationRateStatistics/index.vue
new file mode 100644
index 0000000..4e8ae3c
--- /dev/null
+++ b/src/views/statisticalCharts/qualificationRateStatistics/index.vue
@@ -0,0 +1,448 @@
+<template>
+ <div class="app-container">
+ <el-row>
+ <el-col :span="4">
+ <el-radio-group v-model="dateType" @change="changeDate">
+ <el-radio-button label="1">鏈懆</el-radio-button>
+ <el-radio-button label="2">鏈湀</el-radio-button>
+ <el-radio-button label="3">浠婂勾</el-radio-button>
+ </el-radio-group>
+ </el-col>
+ <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>
+ </el-form-item>
+ <el-form-item label="鏍峰搧鍚嶇О" prop="sampleName">
+ <el-input v-model="sampleName" clearable placeholder="璇疯緭鍏ユ牱鍝佸悕绉�" size="small" @change="changeDate"></el-input>
+ </el-form-item>
+ <el-form-item label="鍨嬪彿" prop="modelName">
+ <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-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>
+ </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>
+ </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>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <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>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import Echarts from "@/components/echarts/echarts.vue";
+import {
+ getOrderTypeCookie,
+ getRawPassRateByBarChart,
+ getRawPassRateByCake,
+ getRawUpMonth
+} from "@/api/statisticalCharts/dataAnalysis";
+
+export default {
+ name: "QualificationRateStatistics",
+ // import 寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {Echarts},
+ data() {
+ // 杩欓噷瀛樻斁鏁版嵁
+ return {
+ dateType: '1',
+ datePicker: [],
+ beginDate: '',
+ endDate: '',
+ sampleName: '',
+ modelName: '',
+ supplierName: '',
+ echartsOptions: {
+ title: {
+ text: '绀轰緥鍥捐〃',
+ left: 'center'
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: [],
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '鎬绘暟',
+ min: 0,
+ },
+ {
+ type: 'value',
+ name: '鍚堟牸鐜�',
+ min: 0,
+ max: 100,
+ axisLabel: {
+ formatter: '{value} %'
+ }
+ }
+ ],
+ echartsSeries: [
+ {
+ name: '鎬绘暟',
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ position: 'top'
+ },
+ },
+ {
+ name: '鍚堟牸鐜�',
+ type: 'line',
+ smooth: true,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: function (value) {
+ return value.value + ' %';
+ },
+ distance: 14
+ },
+ yAxisIndex: 1,
+ data: []
+ },
+ ],
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ legend: {
+ data: ['鎬绘暟','鍚堟牸鐜�']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ lineColors: ['#409EFF'],
+ barColors: ['#E6A23C'],
+ barColors2: ['#adde8b'],
+ pieTooltip: {
+ trigger: 'item'
+ },
+ pieLegend: {
+ orient: 'vertical',
+ right: 20,
+ top: 'middle',
+ },
+ materialPieSeries: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ right: '22%',
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 5,
+ 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: '涓嶅悎鏍兼暟閲�' },
+ { value: 0, name: '鍚堟牸鏁伴噺' },
+ ]
+ }
+ ],
+ materialPieSeries1: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ right: '22%',
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 5,
+ 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: 50,
+ },
+ data: [
+ { value: 0, name: '濮旀墭妫�楠�' },
+ { value: 0, name: '杩涘巶妫�楠�' },
+ { value: 0, name: '瀛ｅ害妫�楠�' },
+ { value: 0, name: '鎶芥牱' },
+ ]
+ }
+ ],
+ barLegend: {},
+ chartStyle: {
+ width: '90%',
+ height: '100%',
+ },
+ chartStyle2: {
+ width: '90%',
+ height: '80%',
+ },
+ xAxis1: [
+ {
+ type: 'value',
+ min: 0,
+ max: 100,
+ axisLabel: {
+ formatter: '{value} %'
+ }
+ }
+ ],
+ yAxis1: [
+ {
+ type: 'category',
+ data: []
+ }
+ ],
+ barSeries: [
+ {
+ type: 'bar',
+ data: [],
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ label: {
+ show: true,
+ formatter: (params) => Math.round(params.value * 100) / 100 + '%'
+ }
+ },
+ ],
+ tableData: [],
+ passRate: '',
+ sum: '',
+ }
+ },
+ mounted() {
+ this.getBar()
+ this.getRawPass()
+ this.getOrderType()
+ this.getPassRateCom()
+ },
+ // 鏂规硶闆嗗悎
+ 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
+ })
+ },
+ // 鑾峰彇鍘熸潗鏂欏悎鏍肩巼鍥捐〃鏁版嵁
+ 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 + '%'
+ })
+ },
+ // 鑾峰彇鏈湀妫�楠岀被鍨嬫暟閲�
+ 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 // 瀛ｅ害
+ this.materialPieSeries1[0].data[3].value = res.data.spotCheck // 鎶芥牱
+ })
+ },
+ // 鏈湀涓庝笂鏈堝悎鏍肩巼瀵规瘮
+ getPassRateCom() {
+ getRawUpMonth().then((res) => {
+ let month = []
+ let barData = []
+ res.data.forEach(item => {
+ month.push(item.month)
+ barData.push(item.passRate)
+ })
+ this.yAxis1[0].data = month
+ this.barSeries[0].data = barData
+ })
+ },
+ changeDate () {
+ this.getBar()
+ this.getRawPass()
+ // this.getOrderType()
+ // this.getPassRateCom()
+ },
+ changeDatePicker (val) {
+ if (val) {
+ this.beginDate = val[0] + ' 00:00:00'
+ this.endDate = val[1] + ' 23:59:59'
+ } else {
+ this.beginDate = ''
+ this.endDate = ''
+ }
+ this.getBar()
+ this.getRawPass()
+ // this.getOrderType()
+ // this.getPassRateCom()
+ },
+ },
+}
+</script>
+
+<style scoped>
+.title {
+ padding: 10px 0 0 20px;
+}
+.table {
+ padding: 0 10px 10px;
+}
+.pie-card {
+ width: 100%;
+ background: #FFFFFF;
+ margin-top: 10px;
+ position: relative;
+}
+.data {
+ position: absolute;
+ font-size: 20px;
+ transform: translate(-50%);
+ left: 40%;
+ top: 42%;
+ z-index: 1;
+}
+.inspection-card{
+ width: 100%;
+ background: #FFFFFF;
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.9.3