new file: src/api/experiment/passRateStatistics.js modified: src/api/...

Fixiaobai

2023-08-21 710fd8e475c383e16d0df64395efe8b31eec451d

 src/views/experiment/passRateStatistics/index.vue

@@ -3,26 +3,21 @@
    <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="开始日期"
          <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 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 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>
              <div class="rightBtn">
                <el-form-item>
@@ -35,7 +30,7 @@
    <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 style="margin-left: 20px;padding:20px 0px;font-size:18px">检测样品合格率统计</div>
        <div class="qualified" ref="qualified"></div>
      </div>
      <div class="unqualified">
@@ -47,7 +42,8 @@
          <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>
@@ -74,22 +70,29 @@
})

import * as echarts from 'echarts'
import { getSupplierList,getTestSampleStatistics,getSupplierNoPassStatistics,getNoPassProjectStatistics } from '@/api/experiment/passRateStatistics';
import { dateFormat } from '../../../utils/dateUtil'
export default {
  data(){
    return {
      supplier: [],
      searchData:{
        date: [],
        type: 0,
        group: ''
        type: null,
        supplier: null
      },
      options:[
        {
          label: '采购入库',
          label: '原材料',
          value: 0
        },
        {
          label: 'xxxx',
          label: '成品',
          value: 1
        },
        {
          label: '委托品',
          value: 2
        }
      ],
      radiooptions:[
@@ -104,12 +107,15 @@
      ],
      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' }]
      }
    }
  },
  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;
@@ -118,6 +124,9 @@
    const myChart2 = echarts.init(chartDom_unqualified_provider);
    const myChart3 = echarts.init(chartDom_unqualified_project);

    /**
     * 检测合格率统计
     */
    const option_qualified = {
      tooltip: {
        trigger: 'axis',
@@ -164,6 +173,9 @@
        }
      ]
    };
    /**
     * 供应商
     */
    const option_unqualified1 ={
      tooltip: {
        trigger: 'axis',
@@ -207,6 +219,9 @@
        }
      ]
    };
    /**
     * 不合格项目
     */
    const option_unqualified2 = {
      legend: {
        orient: 'vertical',
@@ -252,6 +267,34 @@
    if(this.type === 1){
      myChart3.setOption(option_unqualified2);
    }
  },
  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])
      }
      data.date=null
      return data
    },
    async getSupplierList() {
      let res = await getSupplierList()
      res.data.forEach(item => {
        this.supplier.push({ label: item.supplier, value: item.supplier })
      })
    },
    getTestSampleStatistics(){
     let param= this.dateHandle()
     let res =getTestSampleStatistics(param)
    },
    getSupplierNoPassStatistics(){
      let param= this.dateHandle()
      getSupplierNoPassStatistics(param)
    }
  }
}
</script>
@@ -260,6 +303,7 @@
.content-main{
  height:100%;
  width: 100%;

  .top-bar{
    position: absolute;
    width: 99%;
@@ -273,8 +317,10 @@
    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);
@@ -282,9 +328,11 @@
        width: 220px;
      }
    }

    .sermargin{
      margin-right: 60px;
    }

    .rightBtn{
      display:flex;
      justify-content:end;
@@ -293,50 +341,61 @@
      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;
@@ -344,6 +403,7 @@
      }
    }
  }

  .bottom{
    position: fixed;
    width: 95%;