From 4af9a5d043aa4e29f43b8f8e2a21e41d6827ab6f Mon Sep 17 00:00:00 2001
From: yuyu <1981343953@qq.com>
Date: 星期五, 18 八月 2023 16:17:26 +0800
Subject: [PATCH] 8.18 合格率统计
---
src/views/experiment/passRateStatistics/index.vue | 327 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 325 insertions(+), 2 deletions(-)
diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue
index 7107345..2c3d3cd 100644
--- a/src/views/experiment/passRateStatistics/index.vue
+++ b/src/views/experiment/passRateStatistics/index.vue
@@ -1,13 +1,336 @@
<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-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>
+ </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>
+ <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>
+ <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 class="secondBox" ref="unqualified_project"></div>
+ </div>
+ </div>
+ </div>
+ <div class="bottom">
+ <el-button type="primary" size="mini" >鏁版嵁瀵煎嚭</el-button>
+ </div>
+ </div>
</template>
<script>
+import * as echarts from 'echarts'
export default {
+ data(){
+ return {
+ searchData:{
+ date: [],
+ type: 0,
+ group: ''
+ },
+ options:[
+ {
+ label: '閲囪喘鍏ュ簱',
+ value: 0
+ },
+ {
+ label: 'xxxx',
+ value: 1
+ }
+ ],
+ radiooptions:[
+ {
+ label: '鐜舰楗煎浘',
+ value: 0
+ },
+ {
+ label: '甯曠疮鎵樺浘',
+ value: 1
+ }
+ ],
+ type: 0,
+ rules: {
+ date: [{required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur'}],
+ type: [{required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur'}]
+ }
+ }
+ },
+ 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'
+ }
+ },
+ 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);
+ }
+ }
}
</script>
<style lang="scss" scoped>
-
+.content-main{
+ height: 100%;
+ .top-bar{
+ position: fixed;
+ width: 93.8%;
+ top: 0;
+ left:0;
+ z-index: 999;
+ margin-top: 0.48rem;
+ margin-left: 0.56rem;
+ background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 24px 0px 24px;
+ .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: -30px;
+ margin-bottom: -10px;
+ }
+ }
+ .chart-content{
+ margin: 0px -15px;
+ overflow-y:auto;
+ 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