导出

2024-07-09 10:19:54 +08:00 · 2024-07-09 10:19:54 +08:00 · 96f7798708
Parent 63f4fd7cb5
--- a/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
+++ b/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-20 13:32:59
- * @LastEditTime: 2024-06-17 16:42:12
+ * @LastEditTime: 2024-07-09 08:58:47
 * @LastEditors: zhp
 * @Description:
 -->
@ -312,7 +312,7 @@ function calculateItems(period, valueTuple, than) {
 }

 .double-ring-chart__legend {
-  padding: 12px;
+  /* padding: 12px; */
  color: #fff;
  display: flex;
  justify-content: center;
--- a/src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue
+++ b/src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-30 16:00:50
- * @LastEditTime: 2024-06-03 16:26:03
+ * @LastEditTime: 2024-07-09 09:09:07
 * @LastEditors: zhp
 * @Description:
 -->
@ -64,7 +64,7 @@ export default {
 <style scoped lang="scss">
 .double-ring-wrapper {
  height: 100%;
-  padding: 12px 24px;
+  padding: 0px 24px;
  display: flex;
  gap: 12px;
  flex-direction: column;
--- a/src/views/copilot/yield/components/sub/ring/noDoubleRingWrapper.vue
+++ b/src/views/copilot/yield/components/sub/ring/noDoubleRingWrapper.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-24 15:15:00
- * @LastEditTime: 2024-05-31 16:16:16
+ * @LastEditTime: 2024-07-09 09:27:12
 * @LastEditors: zhp
 * @Description:
 -->
@ -74,7 +74,7 @@ export default {
 <style scoped lang="scss">
 .double-ring-wrapper {
  height: 100%;
-  padding: 12px 24px;
+  padding: 0px 24px;
  display: flex;
  gap: 12px;
  flex-direction: column;
--- a/src/views/copilot/yield/options/double-ring-chart-options.js
+++ b/src/views/copilot/yield/options/double-ring-chart-options.js
@ -23,11 +23,11 @@ export default ({
  title: {
    text: titleValue,
    left: "48.5%",
-    top: "37%",
+    top: "35%",
    textAlign: "center",
    textStyle: {
-      fontWeight: 600,
-      fontSize: 26,
+      fontWeight: 400,
+      fontSize: 32,
      color: "#fffd",
    },
    subtext: `\u2002${subtitle}\u2002`,
@ -43,8 +43,8 @@ export default ({
    {
      type: "pie",
      name: "当前目标",
-     radius: ["80%", "90%"],
-      center: ["50%", "52%"],
+      radius: ["80%", "95%"],
+      center: ["50%", "48%"],
      emptyCircleStyle: {
        color: "#042c5f33",
      },
@ -52,8 +52,8 @@ export default ({
    // 数据 series
    {
      type: "pie",
-      radius: ["80%", "90%"],
-      center: ["50%", "52%"],
+      radius: ["80%", "95%"],
+      center: ["50%", "48%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,
@ -103,8 +103,8 @@ export default ({
    // 数据 series2 - 2023累计
    {
      type: "pie",
-      radius: ["70%", "80%"],
-      center: ["50%", "52%"],
+      radius: ["65%", "80%"],
+      center: ["50%", "48%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,
--- a/src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue
+++ b/src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue
@ -1,13 +1,13 @@
 <template>
  <div class="dayRepExpBox">
-    <!-- <el-row>
+    <el-row>
      <el-col :span="24">
        <div class="chartTitle" style="text-align: center;">产品良率</div>
        <div class="box2">
-          <productYield ref="productYield" :beProcessObj="beProcessObj" />
+          <productYield ref="productYield" :pieList="pieList" />
        </div>
      </el-col>
-    </el-row> -->
+    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="chartTitle" style="text-align: center;">待制品分布</div>
@ -16,11 +16,11 @@
        </div>
      </el-col>
    </el-row>
-    <!-- <el-row>
+    <el-row>
      <el-col :span="24">
        <div class="chartTitle" style="text-align: center;">生产明细</div>
        <div class="box2">
-          <produceDetail ref="produceDetail" :beProcessObj="beProcessObj" />
+          <produceDetail ref="produceDetail" :produceData="produceData" />
        </div>
      </el-col>
    </el-row>
@ -28,10 +28,10 @@
      <el-col :span="24">
        <div class="chartTitle" style="text-align: center;">历史趋势</div>
        <div class="box2">
-          <hisChart ref="hisChart" :beProcessObj="beProcessObj" />
+          <hisChart ref="hisChart" :hisObj="hisObj" />
        </div>
      </el-col>
-    </el-row> -->
+    </el-row>
  </div>
 </template>
 <script>
@ -43,17 +43,17 @@ export default {
  name: 'ExportDayReport',
  components: { hisChart, produceDetail, productYield, beProcessed },
  props: {
-    productionOverviewVo: {
+    produceData: {
+      type: Array,
+      default: () => []
+    },
+    hisObj: {
      type: Object,
      default: () => { }
    },
-    equipmentUtilizationVo: {
-      type: Object,
-      default: () => { }
-    },
-    chipPowerTrendVo: {
-      type: Object,
-      default: () => { }
+    pieList: {
+      type: Array,
+      default: () => []
    },
    beProcessObj: {
      type: Object,
@ -62,8 +62,6 @@ export default {
  },
  data() {
    return {
-      tableData1: [],
-      tableData2: []
    }
  },
  watch: {
@ -78,8 +76,8 @@ export default {
  },
  methods: {
    getData() {
-      console.log(this.beProcessObj);
-      this.$refs.beProcess.canvasReset()
+      // console.log('beProcessObj', this.beProcessObj);
+      // this.$refs.beProcess.canvasReset()
      // this.$refs.productYield.canvasReset()
      // this.$refs.produceDetail.canvasReset()
      // this.$refs.hisChart.canvasReset()
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-08 16:50:34
+ * @LastEditTime: 2024-07-09 09:34:38
 * @LastEditors: zhp
 * @Description:
 -->
@ -28,10 +28,11 @@ export default {
  },
  watch: {
    beProcessObj: {
-      handler(newValue, oldValue) {
-        console.log(newValue);
+      handler(val) {
+        console.log(val);
        this.canvasReset()
-      }
+      },
+      deep: true //对象内部属性的监听，关键。
    }
  },
  mounted() {
@ -51,13 +52,11 @@ export default {
      ) {
        this.chart.dispose()
      }
-      // console.log(this.beProcessObj);
-      this.chart = echarts.init(document.getElementById('chipPowerExpChart'), null, { devicePixelRatio: 2 })
+      console.log(this.beProcessObj);
+      this.chart = echarts.init(document.getElementById('chipPowerExpChart'))
      // const legendName = Object.keys(this.chipPowerDistributionVo)
      let xAxisList = this.beProcessObj.xAxisList
      let yAxisList = this.beProcessObj.yAxisList
-
-      // const values = Object.values(this.chipPowerDistributionVo)
      var option = {
        // title: {
        //   text: '待制品分布',
@ -72,7 +71,7 @@ export default {
        calculable: true,
        grid: {
          top: '15%',
-          left: 10,
+          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
@ -81,7 +80,7 @@ export default {
          type: 'category',
          data: xAxisList,
          axisLabel: {
-            rotate: 25
+            rotate: 45
            // width: '10%'
          }
        },
@ -96,7 +95,7 @@ export default {
          {
            data: yAxisList,
            type: 'bar',
-            barWidth: 16,
+            barWidth: 10,
            label: {
              show: true,
              position: 'top'
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/hisChart.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/hisChart.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-08 16:40:58
+ * @LastEditTime: 2024-07-09 09:55:27
 * @LastEditors: zhp
 * @Description:
 -->
@ -16,7 +16,7 @@ export default {
  name: 'ChipPowerExp',
  // mixins: [resize],
  props: {
-    beProcessObj: {
+    hisObj: {
      type: Object,
      default: () => { }
    }
@ -27,10 +27,11 @@ export default {
    }
  },
  watch: {
-    beProcessObj: {
+    hisObj: {
      handler(newValue, oldValue) {
        this.canvasReset()
-      }
+      },
+      deep:true,
    }
  },
  mounted() {
@ -50,13 +51,11 @@ export default {
      ) {
        this.chart.dispose()
      }
-      console.log(this.beProcessObj);
-      this.chart = echarts.init(document.getElementById('hisChart'), null, { devicePixelRatio: 2 })
+      this.chart = echarts.init(document.getElementById('hisChart'))
      // const legendName = Object.keys(this.chipPowerDistributionVo)
-      let xAxisList = this.beProcessObj.xAxisList
-      let yAxisList = this.beProcessObj.yAxisList
-
      // const values = Object.values(this.chipPowerDistributionVo)
+      let dateList = this.hisObj.dateList
+      let seriesList = this.hisObj.seriesList
      var option = {
        // title: {
        //   text: '待制品分布',
@ -71,16 +70,16 @@ export default {
        calculable: true,
        grid: {
          top: '15%',
-          left: 10,
+          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
-          data: xAxisList,
+          data: dateList,
          axisLabel: {
-            rotate: 25
+            rotate: 45
            // width: '10%'
          }
        },
@ -93,9 +92,8 @@ export default {
        },
        series: [
          {
-            data: yAxisList,
-            type: 'bar',
-            barWidth: 16,
+            data: seriesList,
+            type: 'line',
            label: {
              show: true,
              position: 'top'
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/produceDetail.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/produceDetail.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-08 16:41:11
+ * @LastEditTime: 2024-07-09 09:56:13
 * @LastEditors: zhp
 * @Description:
 -->
@ -16,9 +16,9 @@ export default {
  name: 'ChipPowerExp',
  // mixins: [resize],
  props: {
-    beProcessObj: {
-      type: Object,
-      default: () => { }
+    produceData: {
+      type: Array,
+      default: () => []
    }
  },
  data() {
@ -27,10 +27,11 @@ export default {
    }
  },
  watch: {
-    beProcessObj: {
+    produceData: {
      handler(newValue, oldValue) {
        this.canvasReset()
-      }
+      },
+      deep:true,
    }
  },
  mounted() {
@ -50,16 +51,13 @@ export default {
      ) {
        this.chart.dispose()
      }
-      console.log(this.beProcessObj);
      this.chart = echarts.init(document.getElementById('produceDetail'), null, { devicePixelRatio: 2 })
      // const legendName = Object.keys(this.chipPowerDistributionVo)
-      let xAxisList = this.beProcessObj.xAxisList
-      let yAxisList = this.beProcessObj.yAxisList

      // const values = Object.values(this.chipPowerDistributionVo)
      var option = {
        // title: {
-        //   text: '待制品分布',
+        //   text: '生产明细',
        //   left: 'center'
        //   // subtext: 'Fake Data'
        // },
@ -71,17 +69,16 @@ export default {
        calculable: true,
        grid: {
          top: '15%',
-          left: 10,
-          right: 0,
+          left: 0,
+          right: '10%',
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
-          data: xAxisList,
+          data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
          axisLabel: {
-            rotate: 25
-            // width: '10%'
+            rotate: 45
          }
        },
        yAxis: {
@ -93,7 +90,7 @@ export default {
        },
        series: [
          {
-            data: yAxisList,
+            data: this.produceData,
            type: 'bar',
            barWidth: 16,
            label: {
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-08 16:41:20
+ * @LastEditTime: 2024-07-09 09:58:43
 * @LastEditors: zhp
 * @Description:
 -->
@ -16,9 +16,9 @@ export default {
  name: 'ChipPowerExp',
  // mixins: [resize],
  props: {
-    beProcessObj: {
-      type: Object,
-      default: () => { }
+    pieList: {
+      type: Array,
+      default: () => []
    }
  },
  data() {
@ -27,10 +27,11 @@ export default {
    }
  },
  watch: {
-    beProcessObj: {
+    pieList: {
      handler(newValue, oldValue) {
        this.canvasReset()
-      }
+      },
+      deep:true
    }
  },
  mounted() {
@ -52,53 +53,49 @@ export default {
      }
      console.log(this.beProcessObj);
      this.chart = echarts.init(document.getElementById('productYield'), null, { devicePixelRatio: 2 })
-      // const legendName = Object.keys(this.chipPowerDistributionVo)
-      let xAxisList = this.beProcessObj.xAxisList
-      let yAxisList = this.beProcessObj.yAxisList
-
      // const values = Object.values(this.chipPowerDistributionVo)
      var option = {
-        // title: {
-        //   text: '待制品分布',
-        //   left: 'center'
-        //   // subtext: 'Fake Data'
-        // },
-        color: ['#3E8EF7'],
+        color: ['#3E8EF7', '#69E6D8', '#F7C739'],
+        title: {
+          // text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
        tooltip: {
-          trigger: 'axis'
+          trigger: 'item'
        },
-        // grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
-        calculable: true,
-        grid: {
-          top: '15%',
-          left: 10,
-          right: 0,
+        legend: {
          bottom: 0,
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: xAxisList,
-          axisLabel: {
-            rotate: 25
-            // width: '10%'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          axisLine: {
-            show: true
-          }
+          left: 'center'
        },
        series: [
          {
-            data: yAxisList,
-            type: 'bar',
-            barWidth: 16,
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            data: this.pieList,
            label: {
              show: true,
-              position: 'top'
+              position: 'outside',
+              formatter: (params) => {
+                console.log(params)
+                let res = ''
+                // for (let i in params) {
+                res += `${params.percent ? params.percent : 0}% \n ${params.name}`
+                // }
+                return res
+              },
+              rich: {
+                d: {
+                  color: 'inherit', // 系列色
+                  verticalAlign: 'top'
+                },
+                b: {
+                  color: '#8C8C8C',
+                  verticalAlign: 'top'
+                }
+              }
            }
          }
        ]
--- a/src/views/produce/workOrder/index.vue
+++ b/src/views/produce/workOrder/index.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-08 16:54:13
+ * @LastEditTime: 2024-07-09 10:17:41
 * @LastEditors: zhp
 * @Description:
 -->
@ -61,7 +61,7 @@
    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
      @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
    <div id="dayRepDom" style="position: absolute;top:0;display: none;">
-      <ExportDayReport :beProcessObj="beProcessObj" />
+      <ExportDayReport :beProcessObj="beProcessObj" :produceData="produceData" :hisObj="hisObj" :pieList="pieList" />
    </div>
  </div>
 </template>
@ -94,6 +94,12 @@ export default {
      inputNum: 0,
      heightNum: 180,
      factoryList,
+      produceData: [],
+      pieList:[],
+      hisObj: {
+        seriesList: [],
+        dateList:[],
+      },
      beProcessObj: {
        xAxisList: [],
        yAxisList:[]
@ -293,24 +299,27 @@ export default {
  },
  methods: {
    exportPDF() {
-      this.$message.success('正在导出，请稍等！')
-      const element = document.getElementById('dayRepDom')
-      element.style.display = 'block'
-      const fileName = '瑞昌碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
-      html2canvas(element, {
-        dpi: 300, // Set to 300 DPI
-        scale: 3 // Adjusts your resolution
-      }).then(function (canvas) {
-        const imgWidth = 595.28
-        const imgHeight = 841.89
-        const pageData = canvas.toDataURL('image/jpeg', 1.0)
-        const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
-        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-        setTimeout(() => {
-          PDF.save(fileName) // 导出文件名
-        }, 1000)
-      })
-      element.style.display = 'none'
+      setTimeout(() => {
+        this.$message.success('正在导出，请稍等！')
+        const element = document.getElementById('dayRepDom')
+        element.style.display = 'block'
+        const fileName = '工单数据' + moment().format('yyMMDD') + '.pdf'
+        html2canvas(element, {
+          dpi: 300, // Set to 300 DPI
+          scale: 3 // Adjusts your resolution
+        }).then(function (canvas) {
+          const imgWidth = 595.28
+          const imgHeight = 841.89
+          const pageData = canvas.toDataURL('image/jpeg', 1.0)
+          const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          setTimeout(() => {
+            PDF.save(fileName) // 导出文件名
+          }, 1000)
+        })
+        element.style.display = 'none'
+      }, 3000)
+
    },
    getOverView() {
      getOverView().then(res => {
@ -341,30 +350,30 @@ export default {
        const res = await getWorkOrderDetail(val.data.id)
        if (res.code === 0) {
          // this.loading = false
-          // this.dataForm = res.data.prodWorkOrderDO
-          // this.buildChart(this.dataForm)
-          // 在制品
+          ;const data = res.data.prodWorkOrderDO
+          const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
+          const seriesList = []
+          const dateList = []
+          res.data.his.forEach(element => {
+            seriesList.push(element.actualProduction)
+            dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
+          })
+          this.hisObj.seriesList = seriesList
+          this.hisObj.dateList = dateList
          const xAxisList = Object.keys(res.data.inProcessDis)
          const yAxisList = Object.values(res.data.inProcessDis)
          this.beProcessObj.xAxisList = xAxisList
          this.beProcessObj.yAxisList = yAxisList
-          console.log(this.beProcessObj);
-          // this.initEqLineChart(xAxisList, yAxisList)
-          // 趋势图
-          const seriesList = []
-          const dateList = []
-          // res.data.his.forEach(element => {
-          //   seriesList.push(element.actualProduction)
-          //   dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
-          // })
-          // this.initLineChart(dateList, seriesList)
-          this.$nextTick(() => {
-            this.exportPDF()
-          })
+          this.produceData = barList
+           this.pieList = [
+            { value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
+            { value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
+            { value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
+          ]
        }
-        // if (this.dataForm.orderStatus === 1) {
-        //   this.trend()
-        // }
+        this.$nextTick(() => {
+          this.exportPDF()
+        })
      }
    },
    async getDataList() {