zouyu
6 小时以前 40fee153f5c427c23b7191e8116c342b51ac6009
src/views/statisticalCharts/qualificationRateStatistics/index.vue
@@ -1,19 +1,19 @@
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-radio-group v-model="dateType" @change="changeDateType">
          <el-radio-button label="1">本周</el-radio-button>
          <el-radio-button label="2">本月</el-radio-button>
          <el-radio-button label="3">今年</el-radio-button>
        </el-radio-group>
      </el-col>
<!--      <el-col :span="4">-->
<!--        <el-radio-group v-model="dateType" @change="changeDateType">-->
<!--          <el-radio-button label="1">本周</el-radio-button>-->
<!--          <el-radio-button label="2">本月</el-radio-button>-->
<!--          <el-radio-button label="3">今年</el-radio-button>-->
<!--        </el-radio-group>-->
<!--      </el-col>-->
      <el-col :span="20">
        <el-form ref="entity" size="small" :inline="true">
          <el-form-item style="width: 20%;">
            <el-date-picker v-model="datePicker" end-placeholder="结束日期" format="yyyy-MM-dd" placeholder="选择日期"
            <el-date-picker :picker-options="pickerOptions" v-model="datePicker" end-placeholder="结束日期" format="yyyy-MM-dd" placeholder="选择日期"
              range-separator="至" size="small" start-placeholder="开始日期" type="daterange" style="width: 100%;"
              value-format="yyyy-MM-dd" @change="changeDatePicker">
              value-format="yyyy-MM-dd" clearable @change="changeDatePicker">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="样品名称" prop="sampleName">
@@ -25,6 +25,13 @@
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small"
              @change="changeDate"></el-input>
          </el-form-item>
          <el-form-item label="IFS域" prop="contract">
            <el-select v-model="contract" clearable placeholder="请选择IFS域" size="small"
                        @change="changeDate">
              <el-option label="ZTNS" value="ZTNS"/>
              <el-option label="KJNS" value="KJNS"/>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
@@ -108,11 +115,39 @@
  data() {
    // 这里存放数据
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateType: '1',
      datePicker: [],
      beginDate: '',
      endDate: '',
      sampleName: '',
      contract: '',
      modelName: '',
      supplierName: '',
      inspectionTitle: '原材料',
@@ -405,7 +440,6 @@
      sum: '',
    }
  },
  mounted() {
    this.setBarChartTitle();
    this.getBar();
@@ -414,7 +448,28 @@
    this.getPassRateCom();
    this.getTableData();
  },
watch:{
  datePicker:{
    handler(newVal){
      //计算开始时间与结束时间的天数差
      if (newVal && newVal.length === 2) {
        const startDate = new Date(newVal[0]);
        const endDate = new Date(newVal[1]);
        const timeDiff = endDate - startDate;
        const dayDiff = timeDiff / (1000 * 3600 * 24);
        if (dayDiff <= 7) {
          this.dateType = '1';
        } else if (dayDiff > 7 && dayDiff <= 31) {
          this.dateType = '2';
        } else if (dayDiff > 31) {
          this.dateType = '3';
        }
      }else{
        this.dateType = '1';
      }
    },  immediate:true
  }
},
  // 方法集合
  methods: {
    // 获取合格率图表数据
@@ -431,6 +486,7 @@
          sampleName: this.sampleName,
          modelName: this.modelName,
          supplierName: this.supplierName,
          contract:this.contract,
          materialProp: t,
        };
        return getRawPassRateByBarChart(params);
@@ -489,7 +545,6 @@
        let lineData = [];
        let xAxis = [];
        console.log(sortedDates)
        sortedDates.forEach(date => {
          const { qualified, unQualified } = dateMap[date];
          const total = qualified + unQualified;
@@ -505,7 +560,6 @@
        this.echartsSeries[1].data = unQualifiedData;
        this.echartsSeries[2].data = lineData;
        this.xAxis[0].data = xAxis;
        console.log(xAxis)
      });
    },
@@ -527,6 +581,7 @@
            sampleName: this.sampleName,
            modelName: this.modelName,
            supplierName: this.supplierName,
            contract:this.contract,
            materialProp: t
          };
          return getRawPassRateByCake(params);
@@ -635,6 +690,7 @@
          sampleName: this.sampleName,
          modelName: this.modelName,
          supplierName: this.supplierName,
          contract:this.contract,
          materialProp: t,
        };
        return getMaterialPropTable(params);