From 0d5b719e7c3ae2c18525d35cac4a8a0dc127f86e Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期三, 23 八月 2023 18:02:02 +0800
Subject: [PATCH] 8-23组织架构开始编写下班
---
src/views/experiment/passRateStatistics/index.vue | 688 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 450 insertions(+), 238 deletions(-)
diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue
index 8783d00..36b874b 100644
--- a/src/views/experiment/passRateStatistics/index.vue
+++ b/src/views/experiment/passRateStatistics/index.vue
@@ -1,270 +1,466 @@
<template>
<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
+ 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 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 class="secondBox-wrapper" >
+ <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>
+ <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() {
- var topBar = document.querySelector('.top-bar');
+window.addEventListener("scroll", function () {
+ var topBar = document.querySelector(".top-bar");
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 0) {
- topBar.classList.add('fixed');
+ topBar.classList.add("fixed");
} else {
- topBar.classList.remove('fixed');
+ topBar.classList.remove("fixed");
}
-})
+});
-import * as echarts from 'echarts'
+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: '閲囪喘鍏ュ簱',
- value: 0
+ label: "鍏ㄩ儴",
+ value: 3,
},
{
- label: 'xxxx',
- value: 1
- }
+ label: "鍘熸潗鏂�",
+ value: 0,
+ },
+ {
+ label: "鎴愬搧",
+ value: 1,
+ },
+ {
+ label: "濮旀墭鍝�",
+ value: 2,
+ },
],
- radiooptions:[
+ radiooptions: [
{
- label: '鐜舰楗煎浘',
- value: 0
+ label: "鐜舰楗煎浘",
+ value: 0,
},
{
- label: '甯曠疮鎵樺浘',
- value: 1
- }
+ label: "甯曠疮鎵樺浘",
+ value: 1,
+ },
],
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;
+ 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);
- const myChart3 = echarts.init(chartDom_unqualified_project);
+ const myChart1 = echarts.init(chartDom_qualified);
+ const myChart2 = echarts.init(chartDom_unqualified_provider, null, {
+ height: 300,
+ });
- 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}'
+ 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);
- }
- }
-}
+ 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 +468,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 +564,7 @@
margin: 0px -15px;
padding: 20px 40px;
z-index: 999;
- display:flex;
+ display: flex;
justify-content: end;
background-color: #fff;
}
--
Gitblit v1.9.3