From b59ad11f54d28a6b4f9b33e5fb30b55e4b263efb Mon Sep 17 00:00:00 2001
From: value <z1292839451@163.com>
Date: 星期二, 29 八月 2023 17:31:55 +0800
Subject: [PATCH] bug修复
---
src/views/experiment/passRateStatistics/index.vue | 476 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 474 insertions(+), 2 deletions(-)
diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue
index 7107345..bf2c28a 100644
--- a/src/views/experiment/passRateStatistics/index.vue
+++ b/src/views/experiment/passRateStatistics/index.vue
@@ -1,13 +1,485 @@
<template>
- <div>鍚堟牸鐜囩粺璁�</div>
+ <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-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 :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>
+ <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">
+ <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-group>
+ </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>
<script>
-export default {
+// 娣诲姞婊氬姩鐩戝惉浜嬩欢
+window.addEventListener('scroll', function () {
+ var topBar = document.querySelector('.top-bar');
+ var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+ if (scrollTop > 0) {
+ topBar.classList.add('fixed');
+ } else {
+ topBar.classList.remove('fixed');
+ }
+})
+
+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() {
+ return {
+ supplier: [],
+ sampleOptions: [],
+ searchData: {
+ date: [],
+ type: null,
+ supplier: null,
+ sample: null,
+ code: null
+ },
+ options: [
+ {
+ label: '鍏ㄩ儴',
+ value: 3
+ },
+ {
+ label: '鍘熸潗鏂�',
+ value: 0
+ },
+ {
+ label: '鎴愬搧',
+ value: 1
+ },
+ {
+ label: '濮旀墭鍝�',
+ value: 2
+ }
+ ],
+ radiooptions: [
+ {
+ label: '鐜舰楗煎浘',
+ value: 0
+ },
+ {
+ label: '甯曠疮鎵樺浘',
+ value: 1
+ }
+ ],
+ type: 0,
+ 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
+ }
+ },
+ 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
+ }
+ 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);
+ }
+ }
+ }
}
</script>
<style lang="scss" scoped>
+.content-main {
+ height: 100%;
+ width: 100%;
+ overflow: auto;
+ .top-bar {
+ position: absolute;
+ width: 99%;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ margin-top: 5px;
+ margin-left: 9.5px;
+ background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 24px 0px 24px;
+ transition: position 0.3s ease;
+
+ .el-form {
+ width: 100%;
+
+ .chooseMaterialBtn {
+ background-color: #fff;
+ border-color: rgba(192, 196, 204, 0.5);
+ color: gray;
+ width: 220px;
+ }
+ }
+
+ .sermargin {
+ margin-right: 60px;
+ }
+
+ .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%;
+ }
+
+ .top-bar-copy {
+ width: 100%;
+ height: 12vh;
+ }
+
+ .chart-content {
+ margin: 0px -15px;
+ margin-bottom: 60px;
+
+ .qualified-wrapper {
+ // margin-top: 14vh;
+ background-color: #fff;
+ width: 100%;
+ height: 50vh;
+ }
+
+ .qualified {
+ width: 100%;
+ height: 400px;
+ }
+
+ .unqualified {
+ margin-top: 10px;
+ height: 50vh;
+ display: flex;
+ justify-content: space-between;
+
+ .firstBox-wrapper {
+ background-color: #fff;
+ width: 49%;
+
+ .firstBox {
+ width: 100%;
+ height: 40vh;
+ }
+ }
+
+ .secondBox-wrapper {
+ background-color: #fff;
+ width: 49%;
+
+ .secondBox_header {
+ display: flex;
+ justify-content: space-between;
+ margin: 20px 20px;
+ }
+
+ .secondBox {
+ width: 100%;
+ height: 40vh;
+ }
+ }
+ }
+ }
+
+ .bottom {
+ position: fixed;
+ width: 95%;
+ bottom: 0rem !important;
+ left: 0.6rem !important;
+ margin: 0px -15px;
+ padding: 20px 40px;
+ z-index: 999;
+ display: flex;
+ justify-content: end;
+ background-color: #fff;
+ }
+}
</style>
--
Gitblit v1.9.3