导出

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;

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;

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;

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,

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: {
-      type: Object,
-      default: () => { }
+    produceData: {
+      type: Array,
+      default: () => []
     },
-    equipmentUtilizationVo: {
+    hisObj: {
       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()

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'

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'

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: {

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'
+                }
+              }
             }
           }
         ]

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() {