工单导出

src/views/produce/workOrder/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-08 08:50:26
+ * @LastEditTime: 2024-07-08 16:54:13
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,7 +10,7 @@
     <el-row :gutter="10">
       <el-col :span="4">
         <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
-        <!-- <p style="margin-bottom: 0">数据概览</p> -->
+          <!-- <p style="margin-bottom: 0">数据概览</p> -->
           <div class="view">
             <div style="padding: 10px 0; width: 100%">
               <div class="topDiv">
@@ -27,13 +27,14 @@
       </el-col>
       <el-col :span="20">
         <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
-        <!-- <p style="margin-bottom: 0">数据概览</p> -->
+          <!-- <p style="margin-bottom: 0">数据概览</p> -->
           <div class="view">
             <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
               <div class="topDiv">
                 <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
                 <div class="centerDiv">
-                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
+                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index]
+                    }}</span>
                   <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
                 </div>
                 <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
@@ -49,27 +50,28 @@
     <div class="app-container" style="margin-top: 8px;flex-grow: 1;">
       <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
-        :table-data="tableData" :max-height="tableH">
+      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"
+        :max-height="tableH">
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
-      <pagination
-        :limit.sync="listQuery.pageSize"
-        :page.sync="listQuery.pageNo"
-        :total="listQuery.total"
-        @pagination="getDataList"
-      />
+      <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
+        @pagination="getDataList" />
+    </div>
+    <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" />
     </div>
-    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
   </div>
 </template>
 
 <script>
 // import { parseTime } from '../../core/mixins/code-filter';
-import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
+import { getWorkOrderPage, exportExcel, getOverView, getWorkOrderDetail } from '@/api/produceData/order';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
+import ExportDayReport from './dayReportComponents/ExportDayReport'
 import moment from 'moment'
 import tableHeightMixin from "@/mixins/tableHeightMixin";
 // import ButtonNav from '@/components/ButtonNav'
@@ -78,11 +80,12 @@ import AddOrUpdate from './add-or-updata';
 import { factoryList, factoryArray } from "@/utils/constants";
 // import { publicFormatter } from "@/utils/dict";
 import statusChart from "./statusChart.vue";
-
+import html2canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 // import FileSaver from 'file-saver'
 // import * as XLSX from 'xlsx'
 export default {
-  components: { lineChart, AddOrUpdate },
+  components: { lineChart, AddOrUpdate, ExportDayReport },
   mixins: [basicPage, tableHeightMixin],
 	data() {
     return {
@@ -91,6 +94,10 @@ export default {
       inputNum: 0,
       heightNum: 180,
       factoryList,
+      beProcessObj: {
+        xAxisList: [],
+        yAxisList:[]
+      },
       factoryArray,
       listQuery: {
         pageSize: 20,
@@ -106,6 +113,10 @@ export default {
             type: 'detail',
             btnName: '详情',
         },
+        {
+          type: 'export',
+          btnName: '导出',
+        },
         // {
         //     type: 'delete',
         //     btnName: '删除',
@@ -281,6 +292,26 @@ export default {
     this.getOverView()
   },
   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'
+    },
     getOverView() {
       getOverView().then(res => {
         // this.data = res.data
@@ -298,12 +329,43 @@ export default {
         }
       })
     },
-    otherMethods(val) {
-      this.detailOrUpdateVisible = true;
-      // this.addOrEditTitle = "详情";
-      this.$nextTick(() => {
-        this.$refs.detailOrUpdate.init(val.data.id);
-      });
+    async otherMethods(val) {
+      console.log(val)
+      if (val.type === 'detail') {
+        this.detailOrUpdateVisible = true;
+        // this.addOrEditTitle = "详情";
+        this.$nextTick(() => {
+          this.$refs.detailOrUpdate.init(val.data.id);
+        });
+      } else {
+        const res = await getWorkOrderDetail(val.data.id)
+        if (res.code === 0) {
+          // this.loading = false
+          // this.dataForm = res.data.prodWorkOrderDO
+          // this.buildChart(this.dataForm)
+          // 在制品
+          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()
+          })
+        }
+        // if (this.dataForm.orderStatus === 1) {
+        //   this.trend()
+        // }
+      }
     },
     async getDataList() {
       const res = await getWorkOrderPage(this.listQuery)