业务管理：问题修复

zouyu

10 小时以前 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">
@@ -26,32 +26,33 @@
            <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>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
      <el-col :span="8">
        <div class="pie-card" :class="{ active: currentMaterialProp === '00Raw' }" @click="updateTitle('原材料')">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">原材料</span>合格率</div>
          <Echarts ref="chart" :legend="pieLegend" :series="rawPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
          </Echarts>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="pie-card" :class="{ active: currentMaterialProp === '01Cu' }" @click="updateTitle('铜')">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">铜</span>合格率</div>
          <Echarts ref="chart" :legend="pieLegend" :series="cuPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
      <el-col :span="8">
        <div class="pie-card" :class="{ active: currentMaterialProp === '01Cu,02Al' }" @click="updateTitle('导体')">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">导体</span>合格率</div>
          <Echarts ref="chart" :legend="pieLegend" :series="conductorPieSeries" :tooltip="pieTooltip"
            style="height: 36vh;">
          </Echarts>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="pie-card" :class="{ active: currentMaterialProp === '02Al' }" @click="updateTitle('铝')">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">铝</span>合格率</div>
          <Echarts ref="chart" :legend="pieLegend" :series="alPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
          </Echarts>
        </div>
      </el-col>
      <el-col :span="6">
      <el-col :span="8">
        <div class="pie-card" :class="{ active: currentMaterialProp === '04Dlan' }" @click="updateTitle('电缆')">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">电缆</span>合格率</div>
          <Echarts ref="chart" :legend="pieLegend" :series="dlanPieSeries" :tooltip="pieTooltip" style="height: 36vh;">
@@ -79,9 +80,16 @@
      </el-col>
      <el-col :span="12">
        <div class="inspection-card">
          <div class="title"><span style="color: #005BAC;font-weight: bold;">{{ inspectionTitle }}</span>明细数据</div>
          <div class="title" style="display:flex;align-items:center;justify-content:space-between;">
            <div>
              <span style="color: #005BAC;font-weight: bold;">{{ inspectionTitle }}</span>明细数据
            </div>
            <el-button type="text" icon="el-icon-download" @click="downloadTable">
              下载
            </el-button>
          </div>
          <lims-table :tableData="tableData" :column="tableColumn" :tableLoading="tableLoading"
            :height="'calc(40vh - 40px)'"></lims-table>
            :height="'calc(40vh - 40px)'" :show-summary="true" :summary-method="getSummaries"></lims-table>
        </div>
      </el-col>
    </el-row>
@@ -96,7 +104,8 @@
  getRawPassRateByBarChart,
  getRawPassRateByCake,
  getRawUpMonth,
  getMaterialPropTable
  getMaterialPropTable,
  exportSupplierExcel
} from "@/api/statisticalCharts/dataAnalysis";

export default {
@@ -106,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: '原材料',
@@ -178,7 +215,7 @@
          data: [],
          label: {
            show: true,
            formatter: (v) => v.value + '%'
            formatter: (v) =>  v.value + '%'
          }
        }
      ],
@@ -201,7 +238,7 @@
        }
      },
      lineColors: ['#91A0FC'],
      barColors: ['#13ce66', '#F56C6C'], // 合格绿 / 不合格红
      barColors: ['#9fe080', '#ff994d'], // 合格绿 / 不合格红
      barColors2: ['#A4EEDA'],
      pieTooltip: {
        trigger: 'item'
@@ -212,7 +249,7 @@
      },
      rawPieSeries: [
        {
          name: 'Access From',
          name: '',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
@@ -222,7 +259,7 @@
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            alignTo: 'labelLine',
            formatter: '{name|{b}}\n{time|{c}}',
            edgeDistance: 10,
            lineHeight: 15,
@@ -238,14 +275,14 @@
            length2: 40
          },
          data: [
            { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } }
            { value: 0, name: '不合格数量', itemStyle: {color: '#ff994d'} },
            { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } }
          ]
        }
      ],
      cuPieSeries: [
      conductorPieSeries: [
        {
          name: 'Access From',
          name: '',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
@@ -255,7 +292,7 @@
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            alignTo: 'labelLine',
            formatter: '{name|{b}}\n{time|{c}}',
            edgeDistance: 10,
            lineHeight: 15,
@@ -271,47 +308,14 @@
            length2: 40,
          },
          data: [
            { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } },
          ]
        }
      ],
      alPieSeries: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            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: 40,
          },
          data: [
            { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } },
            { value: 0, name: '不合格数量', itemStyle: { color: '#ff994d' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } },
          ]
        }
      ],
      dlanPieSeries: [
        {
          name: 'Access From',
          name: '',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
@@ -321,7 +325,7 @@
            borderWidth: 2
          },
          label: {
            alignTo: 'edge',
            alignTo: 'labelLine',
            formatter: '{name|{b}}\n{time|{c}}',
            edgeDistance: 10,
            lineHeight: 15,
@@ -337,8 +341,8 @@
            length2: 40,
          },
          data: [
            { value: 0, name: '不合格数量', itemStyle: { color: '#F56C6C' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#67C23A' } },
            { value: 0, name: '不合格数量', itemStyle: { color: '#ff994d' } },
            { value: 0, name: '合格数量', itemStyle: { color: '#9fe080' } },
          ]
        }
      ],
@@ -420,39 +424,22 @@
      tableData: [],
      tableLoading: false,
      tableColumn: [
        { label: '批号', prop: 'updateBatchNo', minWidth: '120px' },
        { label: '抵达成品数量', prop: 'qtyArrived', minWidth: '100px' },
        { label: '零件描述', prop: 'partDesc', minWidth: '200px' },
        { label: '供应商名称', prop: 'supplierName', minWidth: '200px' },
        { label: '到货批次', prop: 'totalBatch', minWidth: '100px' },
        { label: '不合格批次', prop: 'unqualifiedBatch', minWidth: '100px' },
        {
          dataType: 'tag',
          label: '检验状态',
          prop: 'inspectStatus',
          label: '合格率(%)',
          prop: 'passRate',
          minWidth: '100px',
          formatData: (params) => {
            if (params == 0) return '检验中'
            if (params == 1) return '合格'
            if (params == 2) return '不合格'
            if (params == 3) return '未下单'
            if (params == 4) return '让步放行'
            return null
          },
          formatType: (params) => {
            if (params == 1 || params == 4) return 'success'
            if (params == 0 || params == 2) return 'danger'
            if (params == 3) return 'warning'
            return null
          }
        },
        { label: '下发时间', prop: 'sendTime', minWidth: '150px' }
          formatData: (val) => (val != null ? val + '%' : '0%')
        }
      ],
      rawPassRate: '',
      cuPassRate: '',
      alPassRate: '',
      conductorPassRate: '',
      dlanPassRate: '',
      sum: '',
    }
  },

  mounted() {
    this.setBarChartTitle();
    this.getBar();
@@ -461,37 +448,112 @@
    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: {
    // 获取合格率图表数据

    setBarChartTitle() {
      this.echartsOptions.title.text = `${this.inspectionTitle}合格率趋势`;
    },

    getBar() {
      const params = {
        dateType: this.dateType,
        beginDate: this.beginDate,
        endDate: this.endDate,
        sampleName: this.sampleName,
        modelName: this.modelName,
        supplierName: this.supplierName,
        materialProp: this.currentMaterialProp,
      };
      const types = this.currentMaterialProp.split(',');
      const requests = types.map(t => {
        const params = {
          dateType: this.dateType,
          beginDate: this.beginDate,
          endDate: this.endDate,
          sampleName: this.sampleName,
          modelName: this.modelName,
          supplierName: this.supplierName,
          contract:this.contract,
          materialProp: t,
        };
        return getRawPassRateByBarChart(params);
      });

      getRawPassRateByBarChart(params).then((res) => {
      Promise.all(requests).then((responses) => {
        let dateMap = {}; // { date: { qualified, unQualified } }

        responses.forEach(res => {
          if (res.data && Array.isArray(res.data)) {
            res.data.forEach(item => {
              const date = item.searchTime;
              if (!dateMap[date]) {
                dateMap[date] = { qualified: 0, unQualified: 0 };
              }
              dateMap[date].qualified += (item.qualified || 0);
              dateMap[date].unQualified += (item.unQualified || 0);
            });
          }
        });

        const weekOrderMap = {
          "星期一": 0,
          "星期二": 1,
          "星期三": 2,
          "星期四": 3,
          "星期五": 4,
          "星期六": 5,
          "星期日": 6
        };
        const yearOrderMap = {
          "1月": 0,
          "2月": 1,
          "3月": 2,
          "4月": 3,
          "5月": 4,
          "6月": 5,
          "7月": 6,
          "8月": 7,
          "9月": 8,
          "10月": 9,
          "11月": 10,
          "12月": 11
        };
        const sortedDates = Object.keys(dateMap).sort((a, b) => {
          if(a.includes("星期") && b.includes("星期")) {
            return weekOrderMap[a] - weekOrderMap[b];
          } else if(a.includes("月") && b.includes("月")) {
            return yearOrderMap[a] - yearOrderMap[b];
          } else {
            return new Date(a) - new Date(b);
          }
        });
        let qualifiedData = [];
        let unQualifiedData = [];
        let lineData = [];
        let xAxis = [];

        res.data.forEach(item => {
          qualifiedData.push(item.qualified || 0);
          unQualifiedData.push(item.unQualified || 0);
          lineData.push(item.passRate || 0);
          xAxis.push(item.searchTime);
        sortedDates.forEach(date => {
          const { qualified, unQualified } = dateMap[date];
          const total = qualified + unQualified;
          const passRate = total > 0 ? (qualified / total * 100).toFixed(2) : 0;

          xAxis.push(date);
          qualifiedData.push(qualified);
          unQualifiedData.push(unQualified);
          lineData.push(parseFloat(passRate));
        });

        this.echartsSeries[0].data = qualifiedData;
@@ -505,32 +567,47 @@
    getRawPass() {
      const materials = [
        { type: '00Raw', series: 'rawPieSeries', rate: 'rawPassRate' },
        { type: '01Cu', series: 'cuPieSeries', rate: 'cuPassRate' },
        { type: '02Al', series: 'alPieSeries', rate: 'alPassRate' },
        { type: '01Cu,02Al', series: 'conductorPieSeries', rate: 'conductorPassRate' },
        { type: '04Dlan', series: 'dlanPieSeries', rate: 'dlanPassRate' }
      ];

      materials.forEach(item => {
        const params = {
          dateType: this.dateType,
          beginDate: this.beginDate,
          endDate: this.endDate,
          sampleName: this.sampleName,
          modelName: this.modelName,
          supplierName: this.supplierName,
          materialProp: item.type
        }
        getRawPassRateByCake(params).then((res) => {
          if (res.data) {
            this[item.series][0].data[0].value = res.data.unQualified || 0
            this[item.series][0].data[1].value = res.data.qualified || 0
            this[item.rate] = res.data.passRate != null ? res.data.passRate + '%' : ''
        const types = item.type.split(',');
        const requests = types.map(t => {
          const params = {
            dateType: this.dateType,
            beginDate: this.beginDate,
            endDate: this.endDate,
            sampleName: this.sampleName,
            modelName: this.modelName,
            supplierName: this.supplierName,
            contract:this.contract,
            materialProp: t
          };
          return getRawPassRateByCake(params);
        });

        Promise.all(requests).then((responses) => {
          let unQualified = 0;
          let qualified = 0;
          responses.forEach(res => {
            if (res.data) {
              unQualified += (res.data.unQualified || 0);
              qualified += (res.data.qualified || 0);
            }
          });

          if (qualified + unQualified > 0) {
            this[item.series][0].data[0].value = unQualified;
            this[item.series][0].data[1].value = qualified;
            const passRate = (qualified / (qualified + unQualified) * 100).toFixed(2);
            this[item.rate] = passRate + '%';
          } else {
            this[item.series][0].data[0].value = 0
            this[item.series][0].data[1].value = 0
            this[item.rate] = ''
            this[item.series][0].data[0].value = 0;
            this[item.series][0].data[1].value = 0;
            this[item.rate] = '';
          }
        })
        });
      });
    },
    // 获取本月检验类型数量
@@ -590,8 +667,7 @@

      const typeMap = {
        '原材料': '00Raw',
        '铜': '01Cu',
        '铝': '02Al',
        '导体': '01Cu,02Al',
        '电缆': '04Dlan',
      };

@@ -605,24 +681,50 @@

    getTableData() {
      this.tableLoading = true;
      const params = {
        dateType: this.dateType,
        beginDate: this.beginDate,
        endDate: this.endDate,
        sampleName: this.sampleName,
        modelName: this.modelName,
        supplierName: this.supplierName,
        materialProp: this.currentMaterialProp,
      };
      const types = this.currentMaterialProp.split(',');
      const requests = types.map(t => {
        const params = {
          dateType: this.dateType,
          beginDate: this.beginDate,
          endDate: this.endDate,
          sampleName: this.sampleName,
          modelName: this.modelName,
          supplierName: this.supplierName,
          contract:this.contract,
          materialProp: t,
        };
        return getMaterialPropTable(params);
      });

      getMaterialPropTable(params).then((res) => {
        if (Array.isArray(res.data)) {
          this.tableData = res.data;
        } else if (res.data && res.data.records) {
          this.tableData = res.data.records;
        } else {
          this.tableData = [];
        }
      Promise.all(requests).then((responses) => {
        let supplierMap = {}; // { supplierName: { totalBatch, unqualifiedBatch } }

        responses.forEach(res => {
          const data = Array.isArray(res.data) ? res.data : (res.data && res.data.records ? res.data.records : []);
          data.forEach(item => {
            const name = item.supplierName || '未知供应商';
            if (!supplierMap[name]) {
              supplierMap[name] = { totalBatch: 0, unqualifiedBatch: 0 };
            }
            supplierMap[name].totalBatch += (item.totalBatch || 0);
            supplierMap[name].unqualifiedBatch += (item.unqualifiedBatch || 0);
          });
        });

        const tableData = Object.keys(supplierMap).map(name => {
          const { totalBatch, unqualifiedBatch } = supplierMap[name];
          const passRate = totalBatch > 0 ? ((totalBatch - unqualifiedBatch) / totalBatch * 100).toFixed(2) : 0;
          return {
            supplierName: name,
            totalBatch,
            unqualifiedBatch,
            passRate
          };
        });

        // Sort by totalBatch descending
        tableData.sort((a, b) => b.totalBatch - a.totalBatch);
        this.tableData = tableData;
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
@@ -639,6 +741,85 @@
      const title = `${this.inspectionTitle}_合格率趋势`;
      this.$refs.barChart.downloadImage(title);
    },

    // 下载表格数据
    downloadTable() {
      if (!this.tableData || this.tableData.length === 0) {
        this.$message.warning("没有可导出的数据");
        return;
      }

      exportSupplierExcel(this.tableData)
        .then(res => {
          if (res.type && res.type.includes("application/json")) {
            const fileReader = new FileReader();
            fileReader.onload = () => {
              const msg = JSON.parse(fileReader.result);
              this.$message.error(msg.msg || "导出失败");
            };
            fileReader.readAsText(res);
            return;
          }

          const blob = new Blob([res], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          });

          const fileName = `${this.inspectionTitle}合格率统计.xlsx`;

          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
          } else {
            const link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(link.href);
          }
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }

        const property = column.property;
        if (property === 'supplierName') {
          sums[index] = '';
          return;
        }

        if (property === 'totalBatch' || property === 'unqualifiedBatch') {
          const values = data.map(item => Number(item[property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else if (property === 'passRate') {
          const totalBatch = data.reduce((prev, curr) => prev + (Number(curr.totalBatch) || 0), 0);
          const unqualifiedBatch = data.reduce((prev, curr) => prev + (Number(curr.unqualifiedBatch) || 0), 0);
          sums[index] = totalBatch > 0 ? ((totalBatch - unqualifiedBatch) / totalBatch * 100).toFixed(2) + '%' : '0%';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },
  },
}
</script>