From 809f8b1279bf84f28bccabc4f95a8eba6c22a24d Mon Sep 17 00:00:00 2001 From: Fixiaobai <fixiaobai@163.com> Date: 星期二, 29 八月 2023 10:30:04 +0800 Subject: [PATCH] 放行委托新增 --- src/views/experiment/passRateStatistics/index.vue | 541 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 333 insertions(+), 208 deletions(-) diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue index 8783d00..bf2c28a 100644 --- a/src/views/experiment/passRateStatistics/index.vue +++ b/src/views/experiment/passRateStatistics/index.vue @@ -2,67 +2,82 @@ <div class="content-main"> <div class="top-bar"> <el-form ref="form" :inline="true" :rules="rules" :model="searchData" label-position="top"> - <el-form-item label="妫�娴嬫棩鏈�:" class="sermargin" prop="date"> - <el-date-picker - v-model="searchData.date" - type="daterange" - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡"> - </el-date-picker> - </el-form-item> - <el-form-item label="妫�楠岀被鍨�:" class="sermargin" prop="type"> - <el-select v-model="searchData.type" placeholder="鍏ㄩ儴"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="鐗╂枡鍒嗙粍:"> - <el-button type="primary" icon="el-icon-plus" class="chooseMaterialBtn" >閫夋嫨鐗╂枡鍒嗙粍</el-button> - </el-form-item> - <div class="rightBtn"> - <el-form-item> - <el-button type="primary" plain size="mini">娓呯┖</el-button> - <el-button type="primary" @click="search" size="mini">鏌ヨ</el-button> - </el-form-item> - </div> - </el-form> + <el-form-item label="妫�娴嬫棩鏈�:" class="sermargin" prop="date"> + <el-date-picker v-model="searchData.date" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡"> + </el-date-picker> + </el-form-item> + <el-form-item label="妫�楠岀被鍨�:" class="sermargin" prop="type"> + <el-select v-model="searchData.type" placeholder="鍏ㄩ儴"> + <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="渚涘簲鍟�:"> + <el-select v-model="searchData.supplier" placeholder="鍏ㄩ儴"> + <el-option v-for="item in supplier" :key="item.value" :label="item.label" :value="item.value"> + </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> + <el-button type="primary" @click="search" size="mini">鏌ヨ</el-button> + </el-form-item> + </div> + </el-form> </div> <div class="top-bar-copy"></div> <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 style="margin-left: 20px;padding:20px 0px;font-size:18px">妫�娴嬫牱鍝佸悎鏍肩巼缁熻</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 class="firstBox-wrapper"> + <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 class="secondBox-wrapper" > + </div> + <div class="secondBox-wrapper"> <div class="secondBox_header"> <div style="font-size:18px">涓嶅悎鏍奸」鐩粺璁�</div> <el-radio-group v-model="type"> - <el-radio-button v-for="item in radiooptions" :key="item.value" :label="item.value" >{{ item.label }}</el-radio-button> + <el-radio-button v-for="item in radiooptions" :key="item.value" :label="item.value">{{ item.label + }}</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">鏁版嵁瀵煎嚭</el-button> + <!-- <el-button type="primary" size="mini" @click="testWork">娴嬭瘯</el-button> --> </div> </div> </template> <script> // 娣诲姞婊氬姩鐩戝惉浜嬩欢 -window.addEventListener('scroll', function() { +window.addEventListener('scroll', function () { var topBar = document.querySelector('.top-bar'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; @@ -74,25 +89,40 @@ }) import * as echarts from 'echarts' +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(){ + data() { return { - searchData:{ + supplier: [], + sampleOptions: [], + searchData: { date: [], - type: 0, - group: '' + type: null, + supplier: null, + sample: null, + code: null }, - options:[ + options: [ { - label: '閲囪喘鍏ュ簱', + label: '鍏ㄩ儴', + value: 3 + }, + { + label: '鍘熸潗鏂�', value: 0 }, { - label: 'xxxx', + label: '鎴愬搧', value: 1 + }, + { + label: '濮旀墭鍝�', + value: 2 } ], - radiooptions:[ + radiooptions: [ { label: '鐜舰楗煎浘', value: 0 @@ -104,87 +134,186 @@ ], type: 0, rules: { - date: [{required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur'}], - type: [{required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur'}] - } + // 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() { - 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' + async mounted() { + await this.start() + this.tableStart() + }, + methods: { + testWork(){ + const inst = new MyWorker(); + inst.test() + for (let index = 0; index < 100; index++) { + console.log("涓荤嚎绋�"+index); + } + }, + 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 }) + }) + }, + async getTestSampleStatistics() { + let param = this.dateHandle() + let res = await getTestSampleStatistics(param) + this.testSample = !res.data.noData + this.testSampleStatistics = res.data + }, + 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 } - }, - legend: { - data: ['鏁版嵁1', '鏁版嵁2', '鏁版嵁3'] - }, - xAxis: [ - { - type: 'category', - data: ['绗竴鎵�', '绗簩鎵�', '绗笁鎵�', '绗洓鎵�'] - } - ], - yAxis: [ - { - type: 'value', - axisLabel: { - formatter: '{value}' + 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' } - } - ], - series: [ - { - name: '鏁版嵁1', - type: 'bar', - data: [7245, 3475, 1237, 3456] }, - { - name: '鏁版嵁2', - type: 'bar', - data: [9965, 9075, 4875, 8687] + legend: { + data: ['鍚堟牸', '涓嶅悎鏍�'] }, - { - 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' + 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; + } }, - 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: [ + legend: { + data: ['鍚堟牸鏁伴噺', '涓嶅悎鏍兼暟閲�'] + }, + xAxis: { + data: this.supplierNoPassStatistics.xAxis + }, + yAxis: [ { type: 'value', axisLabel: { @@ -192,79 +321,59 @@ } } ], - series: [ - { - name: '鍚堟牸鏁伴噺', - data: [52, 46, 39, 66], - type: 'bar', - stack: 'x' + series: this.supplierNoPassStatistics.series + }; + /** + * 涓嶅悎鏍奸」鐩� + */ + const option_unqualified2 = { + legend: { + orient: 'vertical', + x: 'left', + data: this.projectStatistics.legend }, - { - 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: '缁濈紭鍋忓績鐜�' + title: { + text: '', + left: 'center', + top: 'center' + }, + series: [ + { + type: 'pie', + data: this.projectStatistics.series, + radius: ['40%', '70%'], + label: { + show: true, + formatter: '{b}: {c}%' }, - { - 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); + myChart1.setOption(option_qualified); + myChart2.setOption(option_unqualified1); + if (this.type === 0) { + myChart3.setOption(option_unqualified2); + } + if (this.type === 1) { + myChart3.setOption(option_unqualified2); + } } } } </script> <style lang="scss" scoped> -.content-main{ - height:100%; +.content-main { + height: 100%; width: 100%; - .top-bar{ + overflow: auto; + + .top-bar { position: absolute; width: 99%; top: 0; - left:0; + left: 0; z-index: 999; margin-top: 5px; margin-left: 9.5px; @@ -272,79 +381,95 @@ display: flex; justify-content: space-between; padding: 5px 24px 0px 24px; - transition: position 0.3s ease; - .el-form{ + transition: position 0.3s ease; + + .el-form { width: 100%; - .chooseMaterialBtn{ + + .chooseMaterialBtn { background-color: #fff; - border-color: rgba(192,196,204,0.5); + border-color: rgba(192, 196, 204, 0.5); color: gray; width: 220px; } } - .sermargin{ + + .sermargin { margin-right: 60px; } - .rightBtn{ - display:flex; - justify-content:end; + + .rightBtn { + display: flex; + justify-content: end; margin-right: 20px; margin-top: -40px; margin-bottom: -10px; } } + .top-bar.fixed { position: fixed; top: 0.45rem; left: 0.52rem; - width:93.8%; + width: 93.8%; } - .top-bar-copy{ + + .top-bar-copy { width: 100%; height: 12vh; } - .chart-content{ + + .chart-content { margin: 0px -15px; margin-bottom: 60px; - .qualified-wrapper{ + + .qualified-wrapper { // margin-top: 14vh; background-color: #fff; width: 100%; - height:50vh; + height: 50vh; } - .qualified{ + + .qualified { width: 100%; height: 400px; } - .unqualified{ + + .unqualified { margin-top: 10px; height: 50vh; - display:flex; + display: flex; justify-content: space-between; - .firstBox-wrapper{ + + .firstBox-wrapper { background-color: #fff; - width:49%; - .firstBox{ + width: 49%; + + .firstBox { width: 100%; height: 40vh; } } - .secondBox-wrapper{ - background-color:#fff; - width:49%; - .secondBox_header{ - display:flex; + + .secondBox-wrapper { + background-color: #fff; + width: 49%; + + .secondBox_header { + display: flex; justify-content: space-between; margin: 20px 20px; } - .secondBox{ + + .secondBox { width: 100%; height: 40vh; } } } } - .bottom{ + + .bottom { position: fixed; width: 95%; bottom: 0rem !important; @@ -352,7 +477,7 @@ margin: 0px -15px; padding: 20px 40px; z-index: 999; - display:flex; + display: flex; justify-content: end; background-color: #fff; } -- Gitblit v1.9.3