生产管理

2024-06-03 08:37:31 +08:00
parent 8fd8c36b8a
commit fe70138870
14 changed files with 1917 additions and 290 deletions
--- a/src/views/produce/workOrder/add-or-updata.vue
+++ b/src/views/produce/workOrder/add-or-updata.vue
@@ -0,0 +1,399 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-11-06 15:15:30
+ * @LastEditTime: 2024-05-31 16:13:22
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
+    <small-title slot="title" :no-padding="true">
+      {{ '详情' }}
+      <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
+    </small-title>
+    <div ref="detail" class="detailBox">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <p class="title">工单号</p>
+          <p class="text">{{ dataForm.workOrderNumber }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">订单号</p>
+          <p class="text">{{ dataForm.orderNumber }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单类型</p>
+          <p class="text">{{ ['', '芯片订单', '组件类型', 'bipv类型'][dataForm.workOrderType] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单来源</p>
+          <p class="text">{{ ['', '手动', 'ERP'][dataForm.source] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工艺流程</p>
+          <p class="text">{{ dataForm.process }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">BOM</p>
+          <p class="text">{{ dataForm.bom }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单状态</p>
+          <p class="text">{{ ['未开始', '生产中', '已完成'][dataForm.orderStatus] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">投入状态</p>
+          <p class="text">{{ dataForm.inStatus }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <p class="title">计划投入量</p>
+          <p class="text">{{ dataForm.plannedInvestment }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">目标产量</p>
+          <p class="text">{{ dataForm.targetProduction }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">实际投入</p>
+          <p class="text">{{ dataForm.actualInvestment }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">实际产出</p>
+          <p class="text">{{ dataForm.actualProduction }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">创建时间</p>
+          <p class="text">{{ parseTime(dataForm.createTime) }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">开始时间</p>
+          <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">完成时间</p>
+          <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+      <div class="chartDiv">
+        <div ref="bar" :style="{ height: '30vh', width: '40vw' }" />
+        <div ref="pie" :style="{ height: '30vh', width: '40vw' }" />
+      </div>
+      <div class="chartDiv">
+        <div ref="equipmentLine" :style="{ height: '30vh', width: '40vw' }" />
+        <div ref="line" v-show="dataForm.orderStatus === 1" :style="{ height: '30vh', width: '40vw' }" />
+      </div>
+    </div>
+  </el-drawer>
+
+</template>
+
+<script>
+// import basicAdd from './basic-add';
+import * as echarts from 'echarts'
+import resize from '@/mixins/resize'
+import { getWorkOrderDetail, getEqNum, getDailyTrend } from '@/api/produceData/order';
+import SmallTitle from './SmallTitle';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+
+export default {
+  components: {
+    SmallTitle,
+  },
+  mixins: [resize],
+  props: {
+    date: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      lineChart: null,
+      pieChart: null,
+      barChart: null,
+      equipmentLineChart: null,
+      visible: false,
+      dataForm: {}
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    // this.getCurrentTime()
+  },
+  methods: {
+    exportDetail() {
+      // 导出
+      const pdf = new jsPDF('l', 'pt', 'a4');
+      const options = {
+        scale: 2
+      };
+      const element = this.$refs['detail'];
+
+      html2canvas(element, options).then((canvas) => {
+        const imgData = canvas.toDataURL('image/png');
+        pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
+        pdf.save(this.dataForm.workOrderNumber + '详情.pdf');
+      });
+    },
+    init(id) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.initLineChart()
+      })
+      if (id) {
+        getWorkOrderDetail(id).then(res => {
+          this.dataForm = res.data
+          this.buildChart(this.dataForm)
+          if (this.dataForm.orderStatus === 1) {
+            this.trend()
+          }
+        })
+        getEqNum(id).then(response => {
+          if (response.code === 0) {
+            const xAxisList = Object.keys(response.data)
+            const yAxisList = Object.values(response.data)
+            this.initEqLineChart(xAxisList, yAxisList)
+          }
+        })
+        
+      }
+    },
+    trend() {
+      // 趋势图
+      getDailyTrend({ factory: this.dataForm.id }).then(trendRes => {
+        if (trendRes?.data.length > 0) {
+          const seriesList = []
+          const dateList = []
+          trendRes.data.forEach(element => {
+            seriesList.push(element.actualProduction)
+            dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
+          })
+          this.initLineChart(dateList, seriesList)
+        }
+      })
+    },
+    buildChart(data) {
+      // 生产明细
+      const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
+      this.initChart(barList)
+      // 良品率
+      const pieList = [
+        { value: data.actualProduction, name: '实际产出' },
+        { value: data.wasteNum, name: '废品数量' },
+        { value: data.reworkNum, name: '待再加工数量' }
+      ]
+      this.initPieChart(pieList)
+    },
+    initChart(barData) {
+      this.barChart = echarts.init(this.$refs['bar'])
+      this.barChart.setOption({
+        title: {
+          text: '生产明细',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        calculable: true,
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
+          axisLabel: {
+            rotate:45
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: barData,
+            type: 'bar',
+            barWidth: '40%'
+          }
+        ]
+      }, true)
+    },
+    initPieChart(pieData) {
+      this.pieChart = echarts.init(this.$refs['pie'])
+      this.pieChart.setOption({
+        title: {
+          text: '产品良率',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'right',
+          orient: 'vertical'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: pieData
+          }
+        ]
+      }, true)
+    },
+    initEqLineChart(xAxisList, yAxisList) {
+      this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
+      this.equipmentLineChart.setOption({
+        title: {
+          text: '在制品分布',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        calculable: true,
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisList,
+          axisLabel: {
+            rotate:45,
+            // width: '10%'
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yAxisList,
+            type: 'bar',
+            barWidth: '40px'
+          }
+        ]
+      }, true)
+    },
+    initLineChart(xAxisList, seriesList) {
+      this.lineChart = echarts.init(this.$refs['line'])
+      this.lineChart.setOption({
+        title: {
+          text: '历史趋势',
+          left: 'center' // 设置标题居中
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisList,
+          axisLabel: {
+            rotate:45
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: seriesList,
+            type: 'line'
+          }
+        ]
+      }, true)
+    }
+    // getCurrentTime() {
+    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
+    //   this.dataForm.logTime = new Date()
+    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
+    //   console.log(this.dataForm.logTime);
+    // },
+  },
+};
+</script>
+<style scoped>
+.chartDiv {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px;
+  padding-left: 30px;
+}
+  .drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  /* margin-bottom: 30px; */
+}
+.detailBox p {
+  margin: 0;
+  padding: 0 32px;
+}
+.detailBox .title {
+  /* width: 56px; */
+  /* height: 14px; */
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+  padding-bottom: 20px;
+}
+.detailBox {
+  padding-top: 30px;
+  width: 99%;
+}
+</style>