spring
2025-04-08 4f94a66bc8ad9a57295f161de9195d5528b1d181
src/views/statisticalCharts/qualificationRateStatistics/index.vue
@@ -11,18 +11,9 @@
      <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="选择日期"
              range-separator="至"
              size="small"
              start-placeholder="开始日期"
              type="daterange"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              @change="changeDatePicker">
            <el-date-picker 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">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="样品名称" prop="sampleName">
@@ -32,7 +23,8 @@
            <el-input v-model="modelName" clearable placeholder="请输入型号" size="small" @change="changeDate"></el-input>
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small" @change="changeDate"></el-input>
            <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small"
              @change="changeDate"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
@@ -41,38 +33,23 @@
      <el-col :span="8">
        <div class="pie-card">
          <div class="title">原材料合格率</div>
          <span class="data">{{passRate}}</span>
          <Echarts ref="chart"
                   :legend="pieLegend"
                   :series="materialPieSeries"
                   :tooltip="pieTooltip"
                   style="height: 36vh;"></Echarts>
          <span class="data">{{ passRate }}</span>
          <Echarts ref="chart" :legend="pieLegend" :series="materialPieSeries" :tooltip="pieTooltip"
            style="height: 36vh;"></Echarts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="pie-card">
          <div class="title"><span style="color: #F56C6C">本月</span>检验类型数量</div>
          <Echarts ref="chart"
                   :chartStyle="chartStyle2"
                   :legend="pieLegend"
                   :series="materialPieSeries1"
                   :tooltip="pieTooltip"
                   style="height: 36vh;"></Echarts>
          <Echarts ref="chart" :chartStyle="chartStyle2" :legend="pieLegend" :series="materialPieSeries1"
            :tooltip="pieTooltip" style="height: 36vh;"></Echarts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="pie-card">
          <div class="title">原材料<span style="color: #F56C6C">本月</span>与<span style="color: #F56C6C">上月</span>合格率对比</div>
          <Echarts ref="chart"
                   :barColors="barColors2"
                   :chartStyle="chartStyle"
                   :grid="grid"
                   :legend="barLegend"
                   :series="barSeries"
                   :tooltip="tooltip"
                   :xAxis="xAxis1"
                   :yAxis="yAxis1"
                   style="height: 36vh;"></Echarts>
          <Echarts ref="chart" :barColors="barColors2" :chartStyle="chartStyle" :grid="grid" :legend="barLegend"
            :series="barSeries" :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 36vh;"></Echarts>
        </div>
      </el-col>
    </el-row>
@@ -80,17 +57,9 @@
      <el-col :span="24">
        <div class="inspection-card">
          <div class="title">合格率</div>
          <Echarts ref="chart"
                   :barColors="barColors"
                   :grid="grid"
                   :legend="legend"
                   :lineColors="lineColors"
                   :options="echartsOptions"
                   :series="echartsSeries"
                   :tooltip="tooltip"
                   :xAxis="xAxis"
                   :yAxis="yAxis"
                   style="height: 40vh;"></Echarts>
          <Echarts ref="chart" :barColors="barColors" :grid="grid" :legend="legend" :lineColors="lineColors"
            :options="echartsOptions" :series="echartsSeries" :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis"
            style="height: 40vh;"></Echarts>
        </div>
      </el-col>
    </el-row>
@@ -109,7 +78,7 @@
export default {
  name: "QualificationRateStatistics",
  // import 引入的组件需要注入到对象中才能使用
  components: {Echarts},
  components: { Echarts },
  data() {
    // 这里存放数据
    return {
@@ -189,7 +158,7 @@
        containLabel: true
      },
      legend: {
        data: ['总数','合格率']
        data: ['总数', '合格率']
      },
      tooltip: {
        trigger: 'axis',
@@ -271,7 +240,7 @@
          data: [
            { value: 0, name: '委托检验' },
            { value: 0, name: '进厂检验' },
            { value: 0, name: '季度检验' },
            { value: 0, name: '可靠性检验' },
            { value: 0, name: '抽样' },
          ]
        }
@@ -376,7 +345,7 @@
      getOrderTypeCookie().then((res) => {
        this.materialPieSeries1[0].data[0].value = res.data.customer // 委托
        this.materialPieSeries1[0].data[1].value = res.data.enter // 进厂
        this.materialPieSeries1[0].data[2].value = res.data.quarterly // 季度
        this.materialPieSeries1[0].data[2].value = res.data.quarterly // 可靠性
        this.materialPieSeries1[0].data[3].value = res.data.spotCheck // 抽样
      })
    },
@@ -393,13 +362,13 @@
        this.barSeries[0].data = barData
      })
    },
    changeDate () {
    changeDate() {
      this.getBar()
      this.getRawPass()
      // this.getOrderType()
      // this.getPassRateCom()
    },
    changeDatePicker (val) {
    changeDatePicker(val) {
      if (val) {
        this.beginDate = val[0] + ' 00:00:00'
        this.endDate = val[1] + ' 23:59:59'
@@ -420,15 +389,18 @@
.title {
  padding: 10px 0 0 20px;
}
.table {
  padding: 0 10px 10px;
}
.pie-card {
  width: 100%;
  background: #FFFFFF;
  margin-top: 10px;
  position: relative;
}
.data {
  position: absolute;
  font-size: 20px;
@@ -437,7 +409,8 @@
  top: 42%;
  z-index: 1;
}
.inspection-card{
.inspection-card {
  width: 100%;
  background: #FFFFFF;
  margin-top: 10px;