From 4dba96a49dc1155469454584cef8afbb351fdf9b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 三月 2025 11:36:54 +0800
Subject: [PATCH] 统计图表-合格率统计搬迁
---
src/components/echarts/echarts.vue | 238 +++++++++++
src/components/echarts/DataComparison.vue | 507 ++++++++++++++++++++++++
src/views/statisticalCharts/qualificationRateStatistics/index.vue | 448 +++++++++++++++++++++
src/api/statisticalCharts/dataAnalysis.js | 33 +
4 files changed, 1,226 insertions(+), 0 deletions(-)
diff --git a/src/api/statisticalCharts/dataAnalysis.js b/src/api/statisticalCharts/dataAnalysis.js
new file mode 100644
index 0000000..30a6fc8
--- /dev/null
+++ b/src/api/statisticalCharts/dataAnalysis.js
@@ -0,0 +1,33 @@
+// 缁熻鍥捐〃
+import request from "@/utils/request";
+
+//鍚堟牸鐜囩粺璁�
+export function getRawPassRateByBarChart(query) {
+ return request({
+ url: "/dataAnalysis/getRawPassRateByBarChart",
+ method: "get",
+ params: query,
+ });
+}
+//鍘熸潗鏂欑粺璁�
+export function getRawPassRateByCake(query) {
+ return request({
+ url: "/dataAnalysis/getRawPassRateByCake",
+ method: "get",
+ params: query,
+ });
+}
+//鏈湀妫�楠岀被鍨嬫暟閲�
+export function getOrderTypeCookie(query) {
+ return request({
+ url: "/dataAnalysis/getOrderTypeCookie",
+ method: "get",
+ });
+}
+//鏈湀妫�楠岀被鍨嬫暟閲�
+export function getRawUpMonth(query) {
+ return request({
+ url: "/dataAnalysis/getRawUpMonth",
+ method: "get",
+ });
+}
diff --git a/src/components/echarts/DataComparison.vue b/src/components/echarts/DataComparison.vue
new file mode 100644
index 0000000..b69b49d
--- /dev/null
+++ b/src/components/echarts/DataComparison.vue
@@ -0,0 +1,507 @@
+<template>
+ <div>
+ <div>
+ <el-row class="title">
+ <el-col :span="6" style="padding-left: 20px;text-align: left;">鏁版嵁鍒嗘瀽</el-col>
+ <el-col :span="18" style="text-align: right;">
+ <el-button size="medium" @click="$emit('goBack')">杩斿洖</el-button>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="container">
+ <div>
+ <div style="padding: 0 0 10px 10px">濉啓鍘傚鏁版嵁</div>
+ <el-form ref="supplierForm" :model="supplierForm" :rules="rules" class="demo-ruleForm" label-width="40px">
+ <el-row :gutter="20">
+ <el-col :span="3">
+ <el-form-item label="1锛�" prop="one">
+ <el-input v-model="supplierForm.one" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="3">
+ <el-form-item label="2锛�" prop="two">
+ <el-input v-model="supplierForm.two" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="3">
+ <el-form-item label="3锛�" prop="three">
+ <el-input v-model="supplierForm.three" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="3">
+ <el-form-item label="4锛�" prop="four">
+ <el-input v-model="supplierForm.four" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="3">
+ <el-form-item label="5锛�" prop="five">
+ <el-input v-model="supplierForm.five" size="small"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item>
+ <el-button size="small" type="primary" @click="submitForm()">鏁版嵁鍒嗘瀽</el-button>
+ <el-button size="small" @click="resetForm()">閲嶇疆</el-button>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <table :border='true' class="table">
+ <tr>
+ <th class="thTitle"> </th>
+ <th class="thTitle">1</th>
+ <th class="thTitle">2</th>
+ <th class="thTitle">3</th>
+ <th class="thTitle">4</th>
+ <th class="thTitle">5</th>
+ <th class="thTitle">骞冲潎鍊�</th>
+ <th class="thTitle">鏍囧噯鍋忓樊</th>
+ <th class="thTitle">鐩稿鍋忓樊</th>
+ <th class="thTitle">骞冲潎鏍囧噯鍋忓樊</th>
+ </tr>
+ <tr>
+ <td class="thBack">鍘傚妫�娴嬫暟鎹�</td>
+ <td v-for="(item,index) in supplierData" :key="index" class="tdData">{{item}}</td>
+ </tr>
+ <tr>
+ <td class="thBack">妫�娴嬩腑蹇冩暟鎹�</td>
+ <td v-for="(item,index) in localData" :key="index" class="tdData">{{item}}</td>
+ </tr>
+ <tr>
+ <td class="thBack">缁濆鍋忓樊</td>
+ <td v-for="(item,index) in absoluteDeviation" :key="index" class="tdData">{{item}}</td>
+ </tr>
+ <tr>
+ <td class="thBack">骞冲潎鍊�</td>
+ <td v-for="(item,index) in average" :key="index" class="tdData">{{item}}</td>
+ </tr>
+ <tr>
+ <td class="thBack2">鍘傚</td>
+ </tr>
+ <tr>
+ <td class="thBack">UCL</td>
+ <td v-for="(item,index) in supplierULC" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'a' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">LCL</td>
+ <td v-for="(item,index) in supplierLCL" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'b' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">骞冲潎鍊�</td>
+ <td v-for="(item,index) in supplierAverage" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'c' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">鏋佸樊</td>
+ <td v-for="(item,index) in supplierRange" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'d' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack2">妫�娴嬩腑蹇�</td>
+ </tr>
+ <tr>
+ <td class="thBack">UCL</td>
+ <td v-for="(item,index) in localULC" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'e' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">LCL</td>
+ <td v-for="(item,index) in localLCL" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'f' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">骞冲潎鍊�</td>
+ <td v-for="(item,index) in localAverage" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'g' + index" class="tdData"></td>
+ </tr>
+ <tr>
+ <td class="thBack">鏋佸樊</td>
+ <td v-for="(item,index) in localRange" :key="index" class="tdData">{{item}}</td>
+ <td v-for="(item,index) in empty" :key="'h' + index" class="tdData"></td>
+ </tr>
+ </table>
+ <el-row>
+ <el-col :span="12">
+ <div class="inspection-card">
+ <div class="echartsTitle">妫�娴嬫暟鎹姣�</div>
+ <Echarts ref="chart"
+ :grid="grid"
+ :legend="legend"
+ :lineColors="lineColors"
+ :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="echartsTitle">娴嬮噺鏁版嵁鏍囧噯宸姣�</div>
+ <Echarts ref="chart"
+ :barColors="barColors"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="legend1"
+ :series="echartsSeries1"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ style="height: 40vh;"></Echarts>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <div class="inspection-card">
+ <div class="echartsTitle">鍋忓樊鍒嗘瀽</div>
+ <Echarts ref="chart"
+ :grid="grid"
+ :legend="legend2"
+ :lineColors="lineColors"
+ :series="echartsSeries2"
+ :tooltip="tooltip"
+ :xAxis="xAxis"
+ :yAxis="yAxis2"
+ style="height: 40vh;"></Echarts>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="inspection-card">
+ <div class="echartsTitle">妫�娴嬩腑蹇冩暟鎹�</div>
+ <Echarts ref="chart"
+ :grid="grid"
+ :legend="legend"
+ :lineColors="lineColors"
+ :series="echartsSeries3"
+ :tooltip="tooltip"
+ :xAxis="xAxis"
+ :yAxis="yAxis"
+ style="height: 40vh;"></Echarts>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+</template>
+
+<script>
+import Echarts from "./echarts.vue";
+
+export default {
+ name: "DataComparison",
+ // import 寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {Echarts},
+ props: {
+ comparisonData : {
+ type: Object,
+ default: () => {}
+ },
+ selectRow : {
+ type: Object,
+ default: () => {}
+ }
+ },
+ data() {
+ // 杩欓噷瀛樻斁鏁版嵁
+ return {
+ supplierForm: {
+ one: '',
+ two: '',
+ three: '',
+ four: '',
+ five: '',
+ },
+ rules: {
+ one: [{ required: true, message: '蹇呭～', trigger: 'blur' }],
+ two: [{ required: true, message: '蹇呭～', trigger: 'blur' }],
+ three: [{ required: true, message: '蹇呭～', trigger: 'blur' }],
+ four: [{ required: true, message: '蹇呭～', trigger: 'blur' }],
+ five: [{ required: true, message: '蹇呭～', trigger: 'blur' }],
+ },
+ comparisonData1: {},
+ supplierData: [], // 鍘傚鏁版嵁
+ localData: [], // 妫�娴嬩腑蹇冩娴嬫暟鎹�
+ absoluteDeviation: [], // 缁濆鍋忓樊
+ average: [], // 骞冲潎鍊�
+ supplierULC: [], // 鍘傚UCL
+ supplierLCL: [], // 鍘傚LCL
+ supplierAverage: [], // 鍘傚骞冲潎鍊�
+ supplierRange: [], // 鍘傚鏋佸樊
+ localULC: [], // 妫�娴嬩腑蹇僓CL
+ localLCL: [], // 妫�娴嬩腑蹇僉CL
+ localAverage: [], // 妫�娴嬩腑蹇冨钩鍧囧��
+ localRange: [], // 妫�娴嬩腑蹇冩瀬宸�
+ manufacturerData: [],
+ manufacturer: [
+ {value: '1.1'},
+ {value: '2.2'},
+ {value: '3.3'},
+ {value: '4.4'},
+ {value: '5.5'},
+ ],
+ testCenter: [
+ {value: '1.2'},
+ {value: '2.33'},
+ {value: '3.64'},
+ {value: '4.3'},
+ {value: '5.9'},
+ ],
+ empty: [
+ {data: '1'},
+ {data: '2'},
+ {data: '3'},
+ {data: '4'},
+ ],
+ lineColors: ['#ed7d31', '#409EFF'],
+ barColors: ['#ed7d31', '#409EFF', '#a5a5a5'],
+ chartStyle: {
+ width: '100%',
+ height: '96%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ legend: {
+ data: ['鍘傚妫�娴嬫暟鎹�','妫�娴嬩腑蹇冩娴嬫暟鎹�']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['1', '2', '3', '4', '5']
+ }],
+ yAxis: [{
+ type: 'value'
+ }],
+ echartsSeries: [
+ {
+ name: '鍘傚妫�娴嬫暟鎹�',
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ },
+ data: []
+ },
+ {
+ name: '妫�娴嬩腑蹇冩娴嬫暟鎹�',
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ },
+ data: []
+ }
+ ],
+ xAxis1: [{
+ type: 'category',
+ data: ['鍘傚', '妫�娴嬩腑蹇�']
+ }],
+ legend1: {
+ data: ['UCL','LCL', '骞冲潎鍊�']
+ },
+ yAxis1: [
+ {
+ type: 'value',
+ },
+ ],
+ echartsSeries1: [
+ {
+ name: 'UCL',
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: []
+ },
+ {
+ name: 'LCL',
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: []
+ },
+ {
+ name: '骞冲潎鍊�',
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: []
+ },
+ ],
+ legend2: {
+ data: ['骞冲潎鍊�','缁濆鍋忓樊']
+ },
+ yAxis2: [{
+ type: 'value',
+ min: 0,
+ max: 1,
+ }],
+ echartsSeries2: [
+ {
+ name: '骞冲潎鍊�',
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+ },
+ data: [],
+ },
+ {
+ name: '缁濆鍋忓樊',
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+ },
+ data: [],
+ }
+ ],
+ echartsSeries3: [
+ {
+ name: '妫�娴嬩腑蹇冩娴嬫暟鎹�',
+ type: 'line',
+ data: []
+ }
+ ],
+ }
+ },
+ mounted() {
+ this.getInfo()
+ },
+ // 鏂规硶闆嗗悎
+ methods: {
+ getInfo () {
+ this.localData = this.comparisonData.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData.localData
+ this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number)
+ this.echartsSeries3[0].data = this.localData.slice(0, 5)
+ this.localULC = this.comparisonData.localULC
+ this.localLCL = this.comparisonData.localLCL
+ this.localAverage = this.comparisonData.localAverage
+ this.localRange = this.comparisonData.localRange
+ },
+ getInfo1 () {
+ this.echartsSeries1[0].data = []
+ this.supplierData = this.comparisonData1.supplierData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.supplierData
+ this.localData = this.comparisonData1.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.localData
+ this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number)
+ this.echartsSeries3[0].data = this.localData.slice(0, 5)
+ this.echartsSeries[0].data = this.supplierData
+ this.echartsSeries[1].data = this.localData
+ this.absoluteDeviation = this.comparisonData1.absoluteDeviation === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.absoluteDeviation
+ this.echartsSeries2[1].data = this.absoluteDeviation
+ this.absoluteDeviation = this.absoluteDeviation.map(number => `${Math.round(number * 100)}%`) // 缁濆鍋忓樊鐧惧垎姣旇浆鎹�
+ this.average = this.comparisonData1.average === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.average
+ this.echartsSeries2[0].data = this.average
+ this.average = this.average.map(number => `${Math.round(number * 100)}%`) // 骞冲潎鍊肩櫨鍒嗘瘮杞崲
+ this.supplierULC = this.comparisonData1.supplierULC === null ? ['', '', '', '', ''] : this.comparisonData1.supplierULC
+ this.echartsSeries1[0].data.push(this.supplierULC[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.supplierLCL = this.comparisonData1.supplierLCL === null ? ['', '', '', '', ''] : this.comparisonData1.supplierLCL
+ this.echartsSeries1[1].data.push(this.supplierLCL[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.supplierAverage = this.comparisonData1.supplierAverage === null ? ['', '', '', '', ''] : this.comparisonData1.supplierAverage
+ this.echartsSeries1[2].data.push(this.supplierAverage[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.supplierRange = this.comparisonData1.supplierRange === null ? ['', '', '', '', ''] : this.comparisonData1.supplierRange
+ this.localULC = this.comparisonData1.localULC
+ this.echartsSeries1[0].data.push(this.localULC[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.localLCL = this.comparisonData1.localLCL
+ this.echartsSeries1[1].data.push(this.localLCL[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.localAverage = this.comparisonData1.localAverage
+ this.echartsSeries1[2].data.push(this.localAverage[0]) // 娴嬮噺鏁版嵁鏍囧噯宸姣旀煴鐘跺浘鏁版嵁
+ this.localRange = this.comparisonData1.localRange
+ },
+ submitForm () {
+ this.$refs['supplierForm'].validate((valid) => {
+ if (valid) {
+ const params = {
+ orderIds: this.selectRow.orderIds,
+ itemNames: this.selectRow.itemNames,
+ supplierDataList: Object.values(this.supplierForm)
+ }
+ this.$axios.post(this.$api.dataAnalysis.getRawSupplierCompare, params, {
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ noQs: true
+ }).then(res => {
+ if (res.code === 201) {
+ return
+ }
+ this.comparisonData1 = res.data
+ this.getInfo1()
+ })
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ resetForm () {
+ this.$refs['supplierForm'].resetFields();
+ },
+ },
+}
+</script>
+
+<style scoped>
+.title {
+ height: 60px;
+ line-height: 60px;
+}
+.container {
+ width: calc(100% - 20px);
+ height: calc(100vh - 170px);
+ background-color: #fff;
+ padding: 10px;
+ overflow-y: auto;
+}
+.table {
+ width: 100%;
+}
+.thTitle {
+ background-color: #e0eaf5;
+ padding: 6px 2px;
+}
+.thBack {
+ text-align: center;
+ background-color: #e0eaf5;
+ padding: 2px;
+}
+.thBack2 {
+ text-align: center;
+ background-color: #e4f2da;
+ padding: 2px;
+}
+.tdData {
+ padding: 4px;
+ text-align: center;
+ font-size: 13px;
+ width: 10%;
+}
+.inspection-card{
+ width: 100%;
+ background: #FFFFFF;
+ margin-top: 10px;
+}
+.echartsTitle {
+ text-align: center;
+ padding-bottom: 10px;
+}
+</style>
diff --git a/src/components/echarts/echarts.vue b/src/components/echarts/echarts.vue
new file mode 100644
index 0000000..7b8e67c
--- /dev/null
+++ b/src/components/echarts/echarts.vue
@@ -0,0 +1,238 @@
+<template>
+ <div>
+ <div id="id" ref="chart" :style="chartStyle"></div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import ResizeListener from 'element-resize-detector';
+
+export default {
+ name: 'EChart',
+ props: {
+ options: {
+ type: Object,
+ default: () => ({})
+ },
+ chartStyle: {
+ type: Object,
+ default: () => ({
+ height: '80%',
+ width: '100%'
+ })
+ },
+ dataset: {
+ type: Object,
+ default: () => {}
+ },
+ xAxis: {
+ type: Array,
+ default: () => []
+ },
+ yAxis: {
+ type: Array,
+ default: () => []
+ },
+ series: {
+ type: Array,
+ default: () => []
+ },
+ grid: {
+ type: Object,
+ default: () => ({})
+ },
+ legend: {
+ type: Object,
+ default: () => ({})
+ },
+ tooltip: {
+ type: Object,
+ default: () => ({})
+ },
+ lineColors: {
+ type: Array,
+ default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
+ },
+ barColors: {
+ type: Array,
+ default: () => ['#ff8800', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
+ },
+ loadingOption: {
+ type: Object,
+ default: () => ({
+ text: '鏁版嵁鍔犺浇涓�...',
+ color: '#00BAFF',
+ textColor: '#000',
+ maskColor: 'rgba(255, 255, 255, 0.8)',
+ zlevel: 0
+ })
+ }
+ },
+ data() {
+ return {
+ chartInstance: null,
+ }
+ },
+ watch: {
+ options: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ series: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ dataset: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ xAxis: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ yAxis: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ grid: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ legend: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ tooltip: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ lineColors: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ barColors: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.renderChart()
+ })
+ },
+ },
+ },
+ mounted() {
+ this.chartInstance = echarts.init(this.$refs.chart)
+ this.renderChart()
+ window.addEventListener('resize', this.windowResizeListener);
+ },
+ beforeDestroy() {
+ this.dispose()
+ },
+ methods: {
+ /* 褰撶獥鍙ｇ缉鏀炬椂锛宔chart鍔ㄦ�佽皟鏁磋嚜韬ぇ灏� */
+ windowResizeListener() {
+ if (!this.chartInstance) return;
+ this.dispose()
+ this.chartInstance = echarts.init(this.$refs.chart)
+ this.renderChart()
+ this.chartInstance.resize();
+ },
+ renderChart() {
+ const option = {
+ backgroundColor: this.options.backgroundColor || '#fff',
+ xAxis: this.xAxis,
+ yAxis: this.yAxis,
+ dataset: this.dataset,
+ series: this.series,
+ grid: this.grid,
+ legend: this.legend,
+ tooltip: this.tooltip
+ }
+ // 鏍规嵁浼犲叆鐨勬暟鎹拰閰嶇疆鍙傛暟鐢熸垚鍥捐〃
+ this.generateChart(option)
+ },
+
+ generateChart(option) {
+ // 閰嶇疆鎶樼嚎鍥惧拰鏌辩姸鍥剧殑鏍峰紡
+ if (option.series && option.series.length > 0) {
+ option.series.forEach((s, index) => {
+ if (s.type === 'line') {
+ s.itemStyle = {
+ color: this.lineColors[index] || this.lineColors[0]
+ }
+ s.lineStyle = {
+ color: this.lineColors[index] || this.lineColors[0]
+ }
+ } else if (s.type === 'bar') {
+ s.itemStyle = {
+ color: this.barColors[index] || this.barColors[0]
+ }
+ }
+ })
+ }
+ this.chartInstance.clear()
+
+ // 娓叉煋鍥捐〃
+ this.chartInstance.setOption(option)
+ },
+
+ dispose() {
+ if (this.chartInstance) {
+ window.removeEventListener('resize', this.chartInstance.resize);//閿�姣佸浘琛ㄧ洃鍚簨浠�
+ this.chartInstance.dispose()
+ this.chartInstance = null
+ }
+ }
+ },
+}
+</script>
+
+<style scoped>
+/* 鍦ㄨ繖閲屽彲浠ュ啓鏍峰紡锛屾瘮濡傝缃浘琛ㄥ鍣ㄧ殑瀹藉害鍜岄珮搴� */
+</style>
diff --git a/src/views/statisticalCharts/qualificationRateStatistics/index.vue b/src/views/statisticalCharts/qualificationRateStatistics/index.vue
new file mode 100644
index 0000000..5e7938f
--- /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: 34vh;"></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: 34vh;"></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: 34vh;"></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: 30,
+ 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