统计图表-合格率统计搬迁

gaoluyang

2025-03-03 4dba96a49dc1155469454584cef8afbb351fdf9b

统计图表-合格率统计搬迁

 src/api/statisticalCharts/dataAnalysis.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
// ç»Ÿè®¡å›¾è¡¨
import request from "@/utils/request";

//合格率统计
export function getRawPassRateByBarChart(query) {
  return request({
    url: "/dataAnalysis/getRawPassRateByBarChart",
    method: "get",
    params: query,
  });
}
//原材料统计
export function getRawPassRateByCake(query) {
  return request({
    url: "/dataAnalysis/getRawPassRateByCake",
    method: "get",
    params: query,
  });
}
//本月检验类型数量
export function getOrderTypeCookie(query) {
  return request({
    url: "/dataAnalysis/getOrderTypeCookie",
    method: "get",
  });
}
//本月检验类型数量
export function getRawUpMonth(query) {
  return request({
    url: "/dataAnalysis/getRawUpMonth",
    method: "get",
  });
}

 src/components/echarts/DataComparison.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,507 @@
<template>
  <div>
    <div>
      <el-row class="title">
        <el-col :span="6" style="padding-left: 20px;text-align: left;">数据分析</el-col>
        <el-col :span="18" style="text-align: right;">
          <el-button size="medium" @click="$emit('goBack')">返回</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="container">
      <div>
        <div style="padding: 0 0 10px 10px">填写厂家数据</div>
        <el-form ref="supplierForm" :model="supplierForm" :rules="rules" class="demo-ruleForm" label-width="40px">
          <el-row :gutter="20">
            <el-col :span="3">
              <el-form-item label="1：" prop="one">
                <el-input v-model="supplierForm.one" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="2：" prop="two">
                <el-input v-model="supplierForm.two" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="3：" prop="three">
                <el-input v-model="supplierForm.three" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="4：" prop="four">
                <el-input v-model="supplierForm.four" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="5：" prop="five">
                <el-input v-model="supplierForm.five" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="small" type="primary" @click="submitForm()">数据分析</el-button>
                <el-button size="small" @click="resetForm()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <table :border='true' class="table">
        <tr>
          <th class="thTitle">          </th>
          <th class="thTitle">1</th>
          <th class="thTitle">2</th>
          <th class="thTitle">3</th>
          <th class="thTitle">4</th>
          <th class="thTitle">5</th>
          <th class="thTitle">平均值</th>
          <th class="thTitle">标准偏差</th>
          <th class="thTitle">相对偏差</th>
          <th class="thTitle">平均标准偏差</th>
        </tr>
        <tr>
          <td class="thBack">厂家检测数据</td>
          <td v-for="(item,index) in supplierData" :key="index" class="tdData">{{item}}</td>
        </tr>
        <tr>
          <td class="thBack">检测中心数据</td>
          <td v-for="(item,index) in localData" :key="index" class="tdData">{{item}}</td>
        </tr>
        <tr>
          <td class="thBack">绝对偏差</td>
          <td v-for="(item,index) in absoluteDeviation" :key="index" class="tdData">{{item}}</td>
        </tr>
        <tr>
          <td class="thBack">平均值</td>
          <td v-for="(item,index) in average" :key="index" class="tdData">{{item}}</td>
        </tr>
        <tr>
          <td class="thBack2">厂家</td>
        </tr>
        <tr>
          <td class="thBack">UCL</td>
          <td v-for="(item,index) in supplierULC" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'a' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">LCL</td>
          <td v-for="(item,index) in supplierLCL" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'b' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">平均值</td>
          <td v-for="(item,index) in supplierAverage" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'c' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">极差</td>
          <td v-for="(item,index) in supplierRange" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'d' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack2">检测中心</td>
        </tr>
        <tr>
          <td class="thBack">UCL</td>
          <td v-for="(item,index) in localULC" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'e' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">LCL</td>
          <td v-for="(item,index) in localLCL" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'f' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">平均值</td>
          <td v-for="(item,index) in localAverage" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'g' + index" class="tdData"></td>
        </tr>
        <tr>
          <td class="thBack">极差</td>
          <td v-for="(item,index) in localRange" :key="index" class="tdData">{{item}}</td>
          <td v-for="(item,index) in empty" :key="'h' + index" class="tdData"></td>
        </tr>
      </table>
      <el-row>
        <el-col :span="12">
          <div class="inspection-card">
            <div class="echartsTitle">检测数据对比</div>
            <Echarts ref="chart"
                     :grid="grid"
                     :legend="legend"
                     :lineColors="lineColors"
                     :series="echartsSeries"
                     :tooltip="tooltip"
                     :xAxis="xAxis"
                     :yAxis="yAxis"
                     style="height: 40vh;"></Echarts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="inspection-card">
            <div class="echartsTitle">测量数据标准差对比</div>
            <Echarts ref="chart"
                     :barColors="barColors"
                     :chartStyle="chartStyle"
                     :grid="grid"
                     :legend="legend1"
                     :series="echartsSeries1"
                     :tooltip="tooltip"
                     :xAxis="xAxis1"
                     :yAxis="yAxis1"
                     style="height: 40vh;"></Echarts>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="inspection-card">
            <div class="echartsTitle">偏差分析</div>
            <Echarts ref="chart"
                     :grid="grid"
                     :legend="legend2"
                     :lineColors="lineColors"
                     :series="echartsSeries2"
                     :tooltip="tooltip"
                     :xAxis="xAxis"
                     :yAxis="yAxis2"
                     style="height: 40vh;"></Echarts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="inspection-card">
            <div class="echartsTitle">检测中心数据</div>
            <Echarts ref="chart"
                     :grid="grid"
                     :legend="legend"
                     :lineColors="lineColors"
                     :series="echartsSeries3"
                     :tooltip="tooltip"
                     :xAxis="xAxis"
                     :yAxis="yAxis"
                     style="height: 40vh;"></Echarts>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";

export default {
  name: "DataComparison",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {Echarts},
  props: {
    comparisonData : {
      type: Object,
      default: () => {}
    },
    selectRow : {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      supplierForm: {
        one: '',
        two: '',
        three: '',
        four: '',
        five: '',
      },
      rules: {
        one: [{ required: true, message: '必填', trigger: 'blur' }],
        two: [{ required: true, message: '必填', trigger: 'blur' }],
        three: [{ required: true, message: '必填', trigger: 'blur' }],
        four: [{ required: true, message: '必填', trigger: 'blur' }],
        five: [{ required: true, message: '必填', trigger: 'blur' }],
      },
      comparisonData1: {},
      supplierData: [], // åŽ‚家数据
      localData: [], // æ£€æµ‹ä¸­å¿ƒæ£€æµ‹æ•°æ®
      absoluteDeviation: [], // ç»å¯¹åå·®
      average: [], // å¹³å‡å€¼
      supplierULC: [], // åŽ‚家UCL
      supplierLCL: [], // åŽ‚家LCL
      supplierAverage: [], // åŽ‚家平均值
      supplierRange: [], // åŽ‚家极差
      localULC: [], // æ£€æµ‹ä¸­å¿ƒUCL
      localLCL: [], // æ£€æµ‹ä¸­å¿ƒLCL
      localAverage: [], // æ£€æµ‹ä¸­å¿ƒå¹³å‡å€¼
      localRange: [], // æ£€æµ‹ä¸­å¿ƒæžå·®
      manufacturerData: [],
      manufacturer: [
        {value: '1.1'},
        {value: '2.2'},
        {value: '3.3'},
        {value: '4.4'},
        {value: '5.5'},
      ],
      testCenter: [
        {value: '1.2'},
        {value: '2.33'},
        {value: '3.64'},
        {value: '4.3'},
        {value: '5.9'},
      ],
      empty: [
        {data: '1'},
        {data: '2'},
        {data: '3'},
        {data: '4'},
      ],
      lineColors: ['#ed7d31', '#409EFF'],
      barColors: ['#ed7d31', '#409EFF', '#a5a5a5'],
      chartStyle: {
        width: '100%',
        height: '96%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['厂家检测数据','检测中心检测数据']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: [{
        type: 'category',
        data: ['1', '2', '3', '4', '5']
      }],
      yAxis: [{
        type: 'value'
      }],
      echartsSeries: [
        {
          name: '厂家检测数据',
          type: 'line',
          label: {
            show: true,
            position: 'top',
          },
          data: []
        },
        {
          name: '检测中心检测数据',
          type: 'line',
          label: {
            show: true,
            position: 'top',
          },
          data: []
        }
      ],
      xAxis1: [{
        type: 'category',
        data: ['厂家', '检测中心']
      }],
      legend1: {
        data: ['UCL','LCL', '平均值']
      },
      yAxis1: [
        {
          type: 'value',
        },
      ],
      echartsSeries1: [
        {
          name: 'UCL',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          data: []
        },
        {
          name: 'LCL',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          data: []
        },
        {
          name: '平均值',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          data: []
        },
      ],
      legend2: {
        data: ['平均值','绝对偏差']
      },
      yAxis2: [{
        type: 'value',
        min: 0,
        max: 1,
      }],
      echartsSeries2: [
        {
          name: '平均值',
          type: 'line',
          label: {
            show: true,
            position: 'top',
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
          },
          data: [],
        },
        {
          name: '绝对偏差',
          type: 'line',
          label: {
            show: true,
            position: 'top',
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
          },
          data: [],
        }
      ],
      echartsSeries3: [
        {
          name: '检测中心检测数据',
          type: 'line',
          data: []
        }
      ],
    }
  },
  mounted() {
    this.getInfo()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    getInfo () {
      this.localData = this.comparisonData.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData.localData
      this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number)
      this.echartsSeries3[0].data = this.localData.slice(0, 5)
      this.localULC = this.comparisonData.localULC
      this.localLCL = this.comparisonData.localLCL
      this.localAverage = this.comparisonData.localAverage
      this.localRange = this.comparisonData.localRange
    },
    getInfo1 () {
      this.echartsSeries1[0].data = []
      this.supplierData = this.comparisonData1.supplierData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.supplierData
      this.localData = this.comparisonData1.localData === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.localData
      this.localData = this.localData.map((number, index) => index === 7 ? `${Math.round(number * 100)}%` : number)
      this.echartsSeries3[0].data = this.localData.slice(0, 5)
      this.echartsSeries[0].data = this.supplierData
      this.echartsSeries[1].data = this.localData
      this.absoluteDeviation = this.comparisonData1.absoluteDeviation === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.absoluteDeviation
      this.echartsSeries2[1].data = this.absoluteDeviation
      this.absoluteDeviation = this.absoluteDeviation.map(number => `${Math.round(number * 100)}%`) // ç»å¯¹åå·®ç™¾åˆ†æ¯”转换
      this.average = this.comparisonData1.average === null ? ['', '', '', '', '','','', '', ''] : this.comparisonData1.average
      this.echartsSeries2[0].data = this.average
      this.average = this.average.map(number => `${Math.round(number * 100)}%`) // å¹³å‡å€¼ç™¾åˆ†æ¯”转换
      this.supplierULC = this.comparisonData1.supplierULC === null ? ['', '', '', '', ''] : this.comparisonData1.supplierULC
      this.echartsSeries1[0].data.push(this.supplierULC[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.supplierLCL = this.comparisonData1.supplierLCL === null ? ['', '', '', '', ''] : this.comparisonData1.supplierLCL
      this.echartsSeries1[1].data.push(this.supplierLCL[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.supplierAverage = this.comparisonData1.supplierAverage === null ? ['', '', '', '', ''] : this.comparisonData1.supplierAverage
      this.echartsSeries1[2].data.push(this.supplierAverage[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.supplierRange = this.comparisonData1.supplierRange === null ? ['', '', '', '', ''] : this.comparisonData1.supplierRange
      this.localULC = this.comparisonData1.localULC
      this.echartsSeries1[0].data.push(this.localULC[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.localLCL = this.comparisonData1.localLCL
      this.echartsSeries1[1].data.push(this.localLCL[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.localAverage = this.comparisonData1.localAverage
      this.echartsSeries1[2].data.push(this.localAverage[0]) // æµ‹é‡æ•°æ®æ ‡å‡†å·®å¯¹æ¯”柱状图数据
      this.localRange = this.comparisonData1.localRange
    },
    submitForm () {
      this.$refs['supplierForm'].validate((valid) => {
        if (valid) {
          const params = {
            orderIds: this.selectRow.orderIds,
            itemNames: this.selectRow.itemNames,
            supplierDataList: Object.values(this.supplierForm)
          }
          this.$axios.post(this.$api.dataAnalysis.getRawSupplierCompare, params, {
            headers: {
              'Content-Type': 'application/json'
            },
            noQs: true
          }).then(res => {
            if (res.code === 201) {
              return
            }
            this.comparisonData1 = res.data
            this.getInfo1()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm () {
      this.$refs['supplierForm'].resetFields();
    },
  },
}
</script>

<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}
.container {
  width: calc(100% - 20px);
  height: calc(100vh - 170px);
  background-color: #fff;
  padding: 10px;
  overflow-y: auto;
}
.table {
  width: 100%;
}
.thTitle {
  background-color: #e0eaf5;
  padding: 6px 2px;
}
.thBack {
  text-align: center;
  background-color: #e0eaf5;
  padding: 2px;
}
.thBack2 {
  text-align: center;
  background-color: #e4f2da;
  padding: 2px;
}
.tdData {
  padding: 4px;
  text-align: center;
  font-size: 13px;
  width: 10%;
}
.inspection-card{
  width: 100%;
  background: #FFFFFF;
  margin-top: 10px;
}
.echartsTitle {
  text-align: center;
  padding-bottom: 10px;
}
</style>

 src/components/echarts/echarts.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,238 @@
<template>
  <div>
    <div id="id" ref="chart" :style="chartStyle"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ResizeListener from 'element-resize-detector';

export default {
  name: 'EChart',
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    chartStyle: {
      type: Object,
      default: () => ({
        height: '80%',
        width: '100%'
      })
    },
    dataset: {
      type: Object,
      default: () => {}
    },
    xAxis: {
      type: Array,
      default: () => []
    },
    yAxis: {
      type: Array,
      default: () => []
    },
    series: {
      type: Array,
      default: () => []
    },
    grid: {
      type: Object,
      default: () => ({})
    },
    legend: {
      type: Object,
      default: () => ({})
    },
    tooltip: {
      type: Object,
      default: () => ({})
    },
    lineColors: {
      type: Array,
      default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
    },
    barColors: {
      type: Array,
      default: () => ['#ff8800', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
    },
    loadingOption: {
      type: Object,
      default: () => ({
        text: '数据加载中...',
        color: '#00BAFF',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
      })
    }
  },
  data() {
    return {
      chartInstance: null,
    }
  },
  watch: {
    options: {
      deep: true,
        // immediate: true,
        handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    series: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    dataset: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    xAxis: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    yAxis: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    grid: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    legend: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    tooltip: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    lineColors: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
    barColors: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.renderChart()
        })
      },
    },
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chart)
    this.renderChart()
    window.addEventListener('resize', this.windowResizeListener);
  },
  beforeDestroy() {
    this.dispose()
  },
  methods: {
    /* å½“窗口缩放时，echart动态调整自身大小 */
    windowResizeListener() {
      if (!this.chartInstance) return;
      this.dispose()
      this.chartInstance = echarts.init(this.$refs.chart)
      this.renderChart()
      this.chartInstance.resize();
    },
    renderChart() {
      const option = {
        backgroundColor: this.options.backgroundColor || '#fff',
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        dataset: this.dataset,
        series: this.series,
        grid: this.grid,
        legend: this.legend,
        tooltip: this.tooltip
      }
      // æ ¹æ®ä¼ å…¥çš„数据和配置参数生成图表
      this.generateChart(option)
    },

    generateChart(option) {
      // é…ç½®æŠ˜çº¿å›¾å’ŒæŸ±çŠ¶å›¾çš„样式
      if (option.series && option.series.length > 0) {
        option.series.forEach((s, index) => {
          if (s.type === 'line') {
            s.itemStyle = {
              color: this.lineColors[index] || this.lineColors[0]
            }
            s.lineStyle = {
              color: this.lineColors[index] || this.lineColors[0]
            }
          } else if (s.type === 'bar') {
            s.itemStyle = {
              color: this.barColors[index] || this.barColors[0]
            }
          }
        })
      }
      this.chartInstance.clear()

      // æ¸²æŸ“图表
      this.chartInstance.setOption(option)
    },

    dispose() {
      if (this.chartInstance) {
        window.removeEventListener('resize', this.chartInstance.resize);//销毁图表监听事件
        this.chartInstance.dispose()
        this.chartInstance = null
      }
    }
  },
}
</script>

<style scoped>
/* åœ¨è¿™é‡Œå¯ä»¥å†™æ ·å¼ï¼Œæ¯”如设置图表容器的宽度和高度 */
</style>

 src/views/statisticalCharts/qualificationRateStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,448 @@
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-radio-group v-model="dateType" @change="changeDate">
          <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="选择日期"
              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">
            <el-input v-model="sampleName" clearable placeholder="请输入样品名称" size="small" @change="changeDate"></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="modelName">
            <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-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <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: 34vh;"></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: 34vh;"></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: 34vh;"></Echarts>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <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>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Echarts from "@/components/echarts/echarts.vue";
import {
  getOrderTypeCookie,
  getRawPassRateByBarChart,
  getRawPassRateByCake,
  getRawUpMonth
} from "@/api/statisticalCharts/dataAnalysis";

export default {
  name: "QualificationRateStatistics",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {Echarts},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dateType: '1',
      datePicker: [],
      beginDate: '',
      endDate: '',
      sampleName: '',
      modelName: '',
      supplierName: '',
      echartsOptions: {
        title: {
          text: '示例图表',
          left: 'center'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '总数',
          min: 0,
        },
        {
          type: 'value',
          name: '合格率',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      echartsSeries: [
        {
          name: '总数',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'top'
          },
        },
        {
          name: '合格率',
          type: 'line',
          smooth: true,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: function (value) {
              return value.value + ' %';
            },
            distance: 14
          },
          yAxisIndex: 1,
          data: []
        },
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['总数','合格率']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      lineColors: ['#409EFF'],
      barColors: ['#E6A23C'],
      barColors2: ['#adde8b'],
      pieTooltip: {
        trigger: 'item'
      },
      pieLegend: {
        orient: 'vertical',
        right: 20,
        top: 'middle',
      },
      materialPieSeries: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          right: '22%',
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c}}',
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            },
          },
          labelLine: {
            length: 30,
            length2: 40,
          },
          data: [
            { value: 0, name: '不合格数量' },
            { value: 0, name: '合格数量' },
          ]
        }
      ],
      materialPieSeries1: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          right: '22%',
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c}}',
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            },
          },
          labelLine: {
            length: 20,
            length2: 50,
          },
          data: [
            { value: 0, name: '委托检验' },
            { value: 0, name: '进厂检验' },
            { value: 0, name: '季度检验' },
            { value: 0, name: '抽样' },
          ]
        }
      ],
      barLegend: {},
      chartStyle: {
        width: '90%',
        height: '100%',
      },
      chartStyle2: {
        width: '90%',
        height: '80%',
      },
      xAxis1: [
        {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      yAxis1: [
        {
          type: 'category',
          data: []
        }
      ],
      barSeries: [
        {
          type: 'bar',
          data: [],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 100) / 100 + '%'
          }
        },
      ],
      tableData: [],
      passRate: '',
      sum: '',
    }
  },
  mounted() {
    this.getBar()
    this.getRawPass()
    this.getOrderType()
    this.getPassRateCom()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // èŽ·å–合格率图表数据
    getBar() {
      const params = {
        dateType: this.dateType,
        beginDate: this.beginDate,
        endDate: this.endDate,
        sampleName: this.sampleName,
        modelName: this.modelName,
        supplierName: this.supplierName,
      }
      getRawPassRateByBarChart(params).then((res) => {
        let lineData = []
        let barData = []
        let xAxis = []
        res.data.forEach(item => {
          barData.push(item.sum)
          lineData.push(item.passRate)
          xAxis.push(item.searchTime)
        })
        this.echartsSeries[0].data = barData
        this.echartsSeries[1].data = lineData
        this.yAxis[0].max = Math.ceil(Math.max.apply(null, barData) / 50) * 50
        this.yAxis[0].interval = this.yAxis[0].max / 5
        this.xAxis[0].data = xAxis
      })
    },
    // èŽ·å–原材料合格率图表数据
    getRawPass() {
      const params = {
        dateType: this.dateType,
        beginDate: this.beginDate,
        endDate: this.endDate,
        sampleName: this.sampleName,
        modelName: this.modelName,
        supplierName: this.supplierName,
      }
      getRawPassRateByCake(params).then((res) => {
        this.materialPieSeries[0].data[0].value = res.data.unQualified
        this.materialPieSeries[0].data[1].value = res.data.qualified
        this.passRate = res.data.passRate + '%'
      })
    },
    // èŽ·å–本月检验类型数量
    getOrderType() {
      getOrderTypeCookie().then((res) => {
        if (res.code === 201) return
        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[3].value = res.data.spotCheck // æŠ½æ ·
      })
    },
    // æœ¬æœˆä¸Žä¸Šæœˆåˆæ ¼çŽ‡å¯¹æ¯”
    getPassRateCom() {
      getRawUpMonth().then((res) => {
        let month = []
        let barData = []
        res.data.forEach(item => {
          month.push(item.month)
          barData.push(item.passRate)
        })
        this.yAxis1[0].data = month
        this.barSeries[0].data = barData
      })
    },
    changeDate () {
      this.getBar()
      this.getRawPass()
      // this.getOrderType()
      // this.getPassRateCom()
    },
    changeDatePicker (val) {
      if (val) {
        this.beginDate = val[0] + ' 00:00:00'
        this.endDate = val[1] + ' 23:59:59'
      } else {
        this.beginDate = ''
        this.endDate = ''
      }
      this.getBar()
      this.getRawPass()
      // this.getOrderType()
      // this.getPassRateCom()
    },
  },
}
</script>

<style scoped>
.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;
  transform: translate(-50%);
  left: 40%;
  top: 42%;
  z-index: 1;
}
.inspection-card{
  width: 100%;
  background: #FFFFFF;
  margin-top: 10px;
}
</style>