From 65a67490426dadcf62fc1bef3cb54dffa27d099d Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期三, 23 八月 2023 15:05:23 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/experiment/passRateStatistics/index.vue | 419 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 242 insertions(+), 177 deletions(-)
diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue
index e59f783..fceb330 100644
--- a/src/views/experiment/passRateStatistics/index.vue
+++ b/src/views/experiment/passRateStatistics/index.vue
@@ -19,6 +19,14 @@
</el-option>
</el-select>
</el-form-item>
+ <el-form-item style="margin-left: 40px;" label="鏍峰搧:">
+ <el-select v-model="searchData.code" filterable placeholder="璇烽�夋嫨">
+ <el-option v-for="item in sampleOptions" :key="item.value" :label="item.label" :value="item.value">
+ <span style="float: left">{{ item.label }}</span>
+ <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
+ </el-option>
+ </el-select>
+ </el-form-item>
<div class="rightBtn">
<el-form-item>
<el-button type="primary" plain size="mini">娓呯┖</el-button>
@@ -31,12 +39,18 @@
<div class="chart-content">
<div class="qualified-wrapper">
<div style="margin-left: 20px;padding:20px 0px;font-size:18px">妫�娴嬫牱鍝佸悎鏍肩巼缁熻</div>
- <div class="qualified" ref="qualified"></div>
+ <div :hidden="testSample" class="qualified" ref="qualified"></div>
+ <div :hidden="!testSample" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;">鏆傛棤鏁版嵁
+ </div>
</div>
<div class="unqualified">
<div class="firstBox-wrapper">
- <div style="margin-left: 20px;padding:20px 0px;font-size:18px">渚涘簲鍟嗕笉鍚堟牸娆℃暟缁熻</div>
- <div class="firstBox" ref="unqualified_provider"></div>
+ <div style="margin-left: 20px;padding:20px 0px;font-size:18px">渚涘簲鍟嗗悎鏍肩巼缁熻</div>
+ <div>
+ <div :hidden="supplierData" class="firstBox" ref="unqualified_provider"></div>
+ <div :hidden="!supplierData" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;">
+ 鏆傛棤鏁版嵁</div>
+ </div>
</div>
<div class="secondBox-wrapper">
<div class="secondBox_header">
@@ -46,12 +60,17 @@
}}</el-radio-button>
</el-radio-group>
</div>
- <div class="secondBox" ref="unqualified_project"></div>
+ <div style="width: 100%;height: 100;">
+ <div :hidden="projectData" class="secondBox" ref="unqualified_project"></div>
+ <div :hidden="!projectData" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;">鏆傛棤鏁版嵁
+ </div>
+ </div>
</div>
</div>
</div>
<div class="bottom">
<el-button type="primary" size="mini">鏁版嵁瀵煎嚭</el-button>
+ <!-- <el-button type="primary" size="mini" @click="testWork">娴嬭瘯</el-button> -->
</div>
</div>
</template>
@@ -70,18 +89,26 @@
})
import * as echarts from 'echarts'
-import { getSupplierList,getTestSampleStatistics,getSupplierNoPassStatistics,getNoPassProjectStatistics } from '@/api/experiment/passRateStatistics';
+import { getSupplierList, getTestSampleStatistics, getSupplierNoPassStatistics, getNoPassProjectStatistics, getSampleOptions } from '@/api/experiment/passRateStatistics';
import { dateFormat } from '../../../utils/dateUtil'
+import MyWorker from 'comlink-loader!../../../worker/test';
export default {
data() {
return {
supplier: [],
+ sampleOptions: [],
searchData: {
date: [],
type: null,
- supplier: null
+ supplier: null,
+ sample: null,
+ code: null
},
options: [
+ {
+ label: '鍏ㄩ儴',
+ value: 3
+ },
{
label: '鍘熸潗鏂�',
value: 0
@@ -109,191 +136,228 @@
rules: {
// date: [{ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur' }],
// type: [{ required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur' }]
- }
+ },
+ supplierNoPassStatistics: null,
+ supplierData: false,
+ projectStatistics: null,
+ projectData: false,
+ testSampleStatistics: null,
+ testSample: false,
+ m1: null,
+ m2: null,
+ m3: null
}
},
- mounted() {
- this.getSupplierList()
- this.getTestSampleStatistics()
- this.getSupplierNoPassStatistics()
- const chartDom_qualified = this.$refs.qualified;
- const chartDom_unqualified_provider = this.$refs.unqualified_provider;
- const chartDom_unqualified_project = this.$refs.unqualified_project;
-
- const myChart1 = echarts.init(chartDom_qualified);
- const myChart2 = echarts.init(chartDom_unqualified_provider);
- const myChart3 = echarts.init(chartDom_unqualified_project);
-
- /**
- * 妫�娴嬪悎鏍肩巼缁熻
- */
- const option_qualified = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- legend: {
- data: ['鏁版嵁1', '鏁版嵁2', '鏁版嵁3']
- },
- xAxis: [
- {
- type: 'category',
- data: ['绗竴鎵�', '绗簩鎵�', '绗笁鎵�', '绗洓鎵�']
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- formatter: '{value}'
- }
- }
- ],
- series: [
- {
- name: '鏁版嵁1',
- type: 'bar',
- data: [7245, 3475, 1237, 3456]
- },
- {
- name: '鏁版嵁2',
- type: 'bar',
- data: [9965, 9075, 4875, 8687]
- },
- {
- name: '鏁版嵁3',
- type: 'line',
- yAxisIndex: 0,
- symbolSize: 3, // 鎶樼嚎鑺傜偣鐨勫ぇ灏�
- symbol: 'circle', // 鎶樼嚎鑺傜偣鐨勫舰鐘�
- smooth: false, // 骞虫粦鏇茬嚎
- data: [1465, 6437, 3257, 6537]
- }
- ]
- };
- /**
- * 渚涘簲鍟�
- */
- const option_unqualified1 = {
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- },
- formatter: function (params) {
- let tooltip = params[0].name + '<br/>';
- params.forEach(function (item) {
- tooltip += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>'; // 灏嗘暟鎹繚鐣欎袱浣嶅皬鏁板苟杞负鐧惧垎姣斿舰寮�
- });
- return tooltip;
- }
- },
- legend: {
- data: ['鍚堟牸鏁伴噺', '涓嶅悎鏍兼暟閲�']
- },
- xAxis: {
- data: ['渚涘簲鍟�1', '渚涘簲鍟�2', '渚涘簲鍟�3', '渚涘簲鍟�4']
- },
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- formatter: '{value}%'
- }
- }
- ],
- series: [
- {
- name: '鍚堟牸鏁伴噺',
- data: [52, 46, 39, 66],
- type: 'bar',
- stack: 'x'
- },
- {
- name: '涓嶅悎鏍兼暟閲�',
- data: [47, 53, 60, 33],
- type: 'bar',
- stack: 'x'
- }
- ]
- };
- /**
- * 涓嶅悎鏍奸」鐩�
- */
- const option_unqualified2 = {
- legend: {
- orient: 'vertical',
- x: 'left',
- data: ['缁濈紭鍋忓績鐜�', '璇曢獙缁撴灉', '瀵间綋灞忚斀鏈�澶у��']
- },
- title: {
- text: '',
- left: 'center',
- top: 'center'
- },
- series: [
- {
- type: 'pie',
- data: [
- {
- value: 40,
- name: '缁濈紭鍋忓績鐜�'
- },
- {
- value: 20,
- name: '璇曢獙缁撴灉'
- },
- {
- value: 40,
- name: '瀵间綋灞忚斀鏈�澶у��'
- }
- ],
- radius: ['40%', '70%'],
- label: {
- show: true,
- formatter: '{b}: {c}'
- },
- }
- ]
- }
-
- myChart1.setOption(option_qualified);
- myChart2.setOption(option_unqualified1);
- if (this.type === 0) {
- myChart3.setOption(option_unqualified2);
- }
- if (this.type === 1) {
- myChart3.setOption(option_unqualified2);
- }
+ async mounted() {
+ await this.start()
+ this.tableStart()
},
methods: {
- search() {
- this.getTestSampleStatistics()
- },
- dateHandle(){
- let data=JSON.parse(JSON.stringify(this.searchData))
- if(this.searchData.date.length!=0&&this.searchData.date !=[]){
- data.beginDate=dateFormat(this.searchData.date[0])
- data.endDate=dateFormat(this.searchData.date[1])
+ testWork(){
+ const inst = new MyWorker();
+ inst.test()
+ for (let index = 0; index < 100; index++) {
+ console.log("涓荤嚎绋�"+index);
}
- data.date=null
+ },
+ async search() {
+ this.testSampleStatistics = null
+ this.supplierNoPassStatistics = null
+ this.projectStatistics = null
+ this.supplier = []
+ this.sampleOptions = []
+ await this.start()
+ this.tableStart()
+ },
+ dateHandle() {
+ let data = JSON.parse(JSON.stringify(this.searchData))
+ if (this.searchData.date.length != 0 && this.searchData.date != []) {
+ data.beginDate = dateFormat(this.searchData.date[0])
+ data.endDate = dateFormat(this.searchData.date[1])
+ }
+ if (data.supplier == '鍏ㄩ儴') {
+ data.supplier = null
+ }
+ if (data.type === 3) {
+ data.type = null
+ }
+ if (this.sampleOptions.length > 0 && this.sampleOptions != []) {
+ let labelSam = this.sampleOptions.filter(item => {
+ return item.value == data.code
+ })[0]
+ data.sample = labelSam.label
+ }
+ if (data.code == '鍏ㄩ儴') {
+ data.code = null
+ data.sample = null
+ }
+ data.date = null
return data
},
async getSupplierList() {
let res = await getSupplierList()
+ this.supplier.push({ label: '鍏ㄩ儴', value: '鍏ㄩ儴' })
res.data.forEach(item => {
this.supplier.push({ label: item.supplier, value: item.supplier })
})
},
- getTestSampleStatistics(){
- let param= this.dateHandle()
- let res =getTestSampleStatistics(param)
+ async getTestSampleStatistics() {
+ let param = this.dateHandle()
+ let res = await getTestSampleStatistics(param)
+ this.testSample = !res.data.noData
+ this.testSampleStatistics = res.data
},
- getSupplierNoPassStatistics(){
- let param= this.dateHandle()
- getSupplierNoPassStatistics(param)
+ async getSupplierNoPassStatistics() {
+ let param = this.dateHandle()
+ let res = await getSupplierNoPassStatistics(param)
+ this.supplierData = !res.data.noData
+ this.supplierNoPassStatistics = res.data
+ },
+ async getNoPassProjectStatistics() {
+ let param = this.dateHandle()
+ let res = await getNoPassProjectStatistics(param)
+ this.projectData = !res.data.noData
+ this.projectStatistics = res.data
+ },
+ async start() {
+ await this.getTestSampleStatistics()
+ await this.getSupplierNoPassStatistics()
+ await this.getNoPassProjectStatistics()
+ await this.getSupplierList()
+ await this.getSampleOptions()
+ },
+ async getSampleOptions() {
+ let res = await getSampleOptions()
+ this.sampleOptions.push({
+ label: '鍏ㄩ儴',
+ value: '鍏ㄩ儴'
+ })
+ res.data.forEach(item => {
+ let data = {
+ label: item.name,
+ value: item.code
+ }
+ this.sampleOptions.push(data)
+ })
+ },
+ tableStart() {
+ const chartDom_qualified = this.$refs.qualified;
+ const chartDom_unqualified_provider = this.$refs.unqualified_provider;
+ const chartDom_unqualified_project = this.$refs.unqualified_project;
+
+ const myChart1 = echarts.init(chartDom_qualified);
+ const myChart2 = echarts.init(chartDom_unqualified_provider, null, {
+ height: 300
+ });
+
+ const myChart3 = echarts.init(chartDom_unqualified_project, null, {
+ height: 268
+ });
+ window.addEventListener("resize",function(){
+ myChart1.resize()
+ myChart2.resize()
+ myChart3.resize()
+ })
+ this.m1 = myChart1
+ this.m2 = myChart2
+ this.m3 = myChart3
+ /**
+ * 妫�娴嬪悎鏍肩巼缁熻
+ */
+ const option_qualified = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ legend: {
+ data: ['鍚堟牸', '涓嶅悎鏍�']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: this.testSampleStatistics.xAxis
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}'
+ }
+ }
+ ],
+ series: this.testSampleStatistics.series
+ };
+ /**
+ * 渚涘簲鍟�
+ */
+ const option_unqualified1 = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+ formatter: function (params) {
+ let tooltip = params[0].name + '<br/>';
+ params.forEach(function (item) {
+ tooltip += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>'; // 灏嗘暟鎹繚鐣欎袱浣嶅皬鏁板苟杞负鐧惧垎姣斿舰寮�
+ });
+ return tooltip;
+ }
+ },
+ legend: {
+ data: ['鍚堟牸鏁伴噺', '涓嶅悎鏍兼暟閲�']
+ },
+ xAxis: {
+ data: this.supplierNoPassStatistics.xAxis
+ },
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}%'
+ }
+ }
+ ],
+ series: this.supplierNoPassStatistics.series
+ };
+ /**
+ * 涓嶅悎鏍奸」鐩�
+ */
+ const option_unqualified2 = {
+ legend: {
+ orient: 'vertical',
+ x: 'left',
+ data: this.projectStatistics.legend
+ },
+ title: {
+ text: '',
+ left: 'center',
+ top: 'center'
+ },
+ series: [
+ {
+ type: 'pie',
+ data: this.projectStatistics.series,
+ radius: ['40%', '70%'],
+ label: {
+ show: true,
+ formatter: '{b}: {c}%'
+ },
+ }
+ ]
+ }
+
+ myChart1.setOption(option_qualified);
+ myChart2.setOption(option_unqualified1);
+ if (this.type === 0) {
+ myChart3.setOption(option_unqualified2);
+ }
+ if (this.type === 1) {
+ myChart3.setOption(option_unqualified2);
+ }
}
}
}
@@ -303,6 +367,7 @@
.content-main {
height: 100%;
width: 100%;
+ overflow: auto;
.top-bar {
position: absolute;
--
Gitblit v1.9.3