src/views/base/equipmentBindSection/dialogForm.vue

@@ -20,6 +20,7 @@
 					<el-select
 						v-model="dataForm.productionLineId"
 						placeholder="请选择产线"
+						filterable
 						@change="handleProductlineChange">
 						<el-option
 							v-for="opt in productionLineList"
@@ -37,6 +38,7 @@
 					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
 					<el-select
 						v-model="dataForm.workshopSectionId"
+						filterable
 						placeholder="请选择工段"
 						@change="$emit('update', dataForm)">
 						<el-option
@@ -56,6 +58,7 @@
 					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
 					<el-select
 						v-model="dataForm.equipmentId"
+						filterable
 						placeholder="请选择设备"
 						@change="$emit('update', dataForm)">
 						<el-option
@@ -71,6 +74,7 @@
 				<el-form-item label="工段排序" prop="sort">
 					<el-input
 						v-model="dataForm.sort"
+						filterable
 						@change="$emit('update', dataForm)"
 						placeholder="请输入工段排序" />
 				</el-form-item>

src/views/core/analysis/LineChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-13 09:02:25
- * @LastEditTime: 2023-09-13 10:33:20
+ * @LastEditTime: 2023-10-08 15:39:38
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
@@ -61,11 +61,12 @@ export default {
   // },
   methods: {
     initChart(xData, yData,lineName) {
-      console.log(xData,yData);
+      console.log( '打印结果', xData,yData, lineName);
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(xData, yData, lineName)
     },
     setOptions(xData, yData, lineName) {
+      console.log('da', lineName)
       let seriesData = []
         lineName.forEach((item,index) => {
           seriesData.push({
@@ -86,7 +87,7 @@ export default {
           type: 'value'
         },
         series: seriesData
-      })
+      }, true)
     }
   }
 }

src/views/core/analysis/balanceAnalysis/index.vue

@@ -228,7 +228,14 @@ export default {
           this.listQuery.lineId = val.lineIds
           this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
           this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined;
-          this.getData()
+          if (val.time) {
+            this.getData()
+          } else {
+            this.$message({
+              message: '请选择时间',
+              type: 'warning'
+            });
+          }
           break;
         case 'reset':
           this.$refs.searchBarForm.resetForm();

src/views/core/analysis/balanceChart.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-13 09:02:25
- * @LastEditTime: 2023-09-20 09:29:40
+ * @LastEditTime: 2023-10-08 16:36:37
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div>
     <div style="margin: 20px">
-      <el-button v-for="(item, index) in dataArray" :key="index" @click="changeChart(index)">{{ item.name }}</el-button>
+      <el-button v-for="(item, index) in buttonList" :key="index" :class="[item.actived ? 'activeButton': 'normalButton']" @click="changeChart(index)">{{ item.name }}</el-button>
     </div>
     <div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
   </div>
@@ -43,7 +43,8 @@ export default {
     return {
       chart: null,
       dataArray: [],
-      xDatas: []
+      xDatas: [],
+      buttonList: []
     }
   },
   mounted() {
@@ -51,12 +52,34 @@ export default {
   methods: {
     changeChart(index) {
       this.setOptions(this.xDatas, this.dataArray[index])
+      this.buttonList.forEach((item, s) => {
+        if (index === s) {
+          // item.actived = true
+          this.$nextTick(() =>{
+            // item.actived = true
+            this.$set(item, 'actived', true)
+          })
+        } else {
+          // item.actived = false
+          this.$nextTick(() =>{
+            // item.actived = false
+            this.$set(item, 'actived', false)
+          })
+          // this.$set(item, 'actived', false)
+        }
+      })
+      console.log('看一下数22222据', this.dataArray)
     },
     initChart(xData, yData, lineName) {
       this.dataArray = yData
+      this.buttonList = this.dataArray.map((item, index) => {
+        return {
+          'name': item.name,
+          'actived': index === 0 ? true : false
+        }
+      })
+      console.log('看一下数据', this.dataArray)
       this.xDatas = xData
-      console.log(xData,yData);
-      console.log('zale', yData[0].eqData)
       this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
       this.setOptions(xData, yData[0], lineName)
     },
@@ -100,3 +123,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.activeButton {
+  background-color: rgb(93,159,255);
+}
+.normalButton {
+  background-color: none;
+}
+</style>

src/views/core/analysis/yieldAnalysis/index.vue

@@ -57,8 +57,7 @@ export default {
         lineIds: [],
         time: ''
       },
-      xData: [],
+      dateLabelList: [],
-      yData:[],
       optionArrUrl: [getProductionLinePage ],
 			formConfig: [
 				{
@@ -113,75 +112,101 @@ export default {
         let arr = [
           	{
               prop: 'lineName',
-          		label: '产线',
+          		label: '产线'
-          		align: 'center',
           	},
             {
               prop: 'sum',
-              label: '合计',
+              label: '合计'
-              align: 'center',
             },
             {
-              prop: res.data.nameData[0].name,
+              prop: res.data ? res.data.nameData[0].name : undefined,
-              label: res.data.nameData[0].name,
+              label: res.data ? res.data.nameData[0].name : undefined,
               align: 'center',
               children:[
 
               ]
             }
         ]
-        console.log(res.data.nameData.slice(1))
+        // console.log(res.data.nameData.slice(1))
-        res.data.nameData.slice(1).forEach(item => {
-          const props = {
-            'prop': item.name,
-            'label': item.name,
-            'align': 'center'
-          }
-          arr[2].children.push(props)
-        })
-        let tableDataArr =[]
-        res.data.data.forEach(item => {
-          let obj = {}
-          obj.lineName= item.lineName,
-           obj.sum= item.sum,
-          item.data.forEach((ele, index) => {
-            // console.log(ele)
-            ele.children.forEach((e) => {
-              console.log(e.dynamicName)
-              obj['' + e.dynamicName + ''] = e.dynamicValue
-              console.log(obj['' + e.dynamicName + '']);
-            })
-          })
-          tableDataArr.push(obj)
-        });
-        this.tableData = tableDataArr
-        console.log(this.tableData)
-        console.log(arr)
-        this.tableProps = arr
         let xData = []
-
-        res.data.nameData.slice(1).forEach(item => {
-          xData.push(item.name)
-          // arr[2].children.push(props)
-        })
         let yAllData = []
         let lineName = []
-        res.data.data.forEach(item => {
+        if (res.data) {
-          let yData = []
+          let tempDateList = []
-          lineName.push(item.lineName)
+          res.data.nameData.forEach(date => {
-          // let obj = {}
+            tempDateList.push(date.name)
-          // obj.lineName = item.lineName,
+          })
-          //   obj.sum = item.sum,
+          this.dateLabelList = Array.from(new Set(tempDateList))
-          item.data.forEach((ele, index) => {
+
+          this.dateLabelList.forEach(item => {
+            if (item.indexOf('年') === -1) {
+              // 构造表头
+              const props = {
+                'prop': item,
+                'label': item
+              }
+              arr[2].children.push(props)
+
+              // 构造echarts横坐标
+              xData.push(item)
+            }
+          })
+          // res.data.nameData.slice(1).forEach(item => {
+          //   const props = {
+          //     'prop': item.name,
+          //     'label': item.name,
+          //     'align': 'center'
+          //   }
+          //   arr[2].children.push(props)
+          // })
+          let tableDataArr =[]
+          res.data.data.forEach(item => {
+            let obj = {}
+            obj.lineName= item.lineName,
+            obj.sum= item.sum,
+            item.data.forEach((ele, index) => {
               // console.log(ele)
-            ele.children.forEach((e) => {
+              ele.children.forEach((e) => {
-              // let yData = []
+                console.log(e.dynamicName)
-              yData.push(e.dynamicValue)
+                obj['' + e.dynamicName + ''] = e.dynamicValue
+                console.log(obj['' + e.dynamicName + '']);
               })
             })
-          yAllData.push(yData)
+            tableDataArr.push(obj)
-        });
+          });
-        console.log(lineName)
+          this.tableData = tableDataArr
+          this.tableProps = arr
+          
+          // let tempList = []
+          // res.data.nameData.slice(1).forEach(item => {
+          //   tempList.push(item.name)
+          //   // arr[2].children.push(props)
+          // })
+          // xData = Array.from(new Set(tempList))
+          
+          res.data.data.forEach(item => {
+            let yData = []
+            lineName.push(item.lineName)
+            // let obj = {}
+            // obj.lineName = item.lineName,
+            //   obj.sum = item.sum,
+            item.data.forEach((ele, index) => {
+                // console.log(ele)
+              ele.children.forEach((e) => {
+                // let yData = []
+                yData.push(e.dynamicValue)
+                })
+              })
+            yAllData.push(yData)
+          });
+          console.log(lineName)
+        } else {
+          this.tableProps = arr
+          this.tableData = []
+          xData = []
+          yAllData = []
+          lineName = []
+        }
         // res.data.data[0].data[0].children.forEach((item, index) => {
         //   // console.log(item)
         //   yData.push(item.dynamicValue)
@@ -203,7 +228,14 @@ export default {
           this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
 					// this.listQuery.pageNo = 1;
           // this.listQuery.pageSize = 10;
-          this.getData()
+          if (val.time) {
+            this.getData()
+          } else {
+            this.$message({
+              message: '请选择时间',
+              type: 'warning'
+            });
+          }
 					break;
 				case 'reset':
 					this.$refs.searchBarForm.resetForm();

src/views/core/base/factory/index.vue

@@ -50,29 +50,24 @@ import {
 const tableProps = [
 	{
 		prop: 'code',
-		label: '工厂编码',
+		label: '工厂编码'
-		align: 'center',
 	},
 	{
 		prop: 'name',
-		label: '工厂名称',
+		label: '工厂名称'
-		align: 'center',
 	},
 	{
 		prop: 'address',
-		label: '地址',
+		label: '地址'
-		align: 'center',
 	},
 	{
 		prop: 'remark',
-		label: '备注',
+		label: '备注'
-		align: 'center',
 	},
 	{
 		prop: 'createTime',
 		label: '创建时间',
-		align: 'center',
+		filter: parseTime
-		filter: parseTime,
 	},
 ];
 
@@ -120,14 +115,14 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				{
+				// {
-					type: 'separate',
+				// 	type: 'separate',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '重置',
+				// 	btnName: '重置',
-					name: 'reset',
+				// 	name: 'reset',
-				},
+				// },
 				{
 					type: 'separate',
 				},

src/views/core/monitoring/auto/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-09-16 17:34:17
+ * @LastEditTime: 2023-09-27 16:19:56
  * @LastEditors: DY
  * @Description: 
 -->
@@ -12,21 +12,15 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
 			:page="listQuery.pageNo"
 			:limit="listQuery.pageSize"
 			:selectWidth="55"
-			:table-data="tableData"
+			:table-data="showData"
 			@selection-change="selectChange"
 			>
-			<method-btn
-				v-if="tableBtn.length"
-				slot="handleBtn"
-				:width="120"
-				label="操作"
-				:method-list="tableBtn"
-				@clickBtn="handleClick" />
 		</base-table>
 		<pagination
 			:limit.sync="listQuery.pageSize"
@@ -43,19 +37,6 @@
 				:table-data="selectedList"
 			/>
 		</div> -->
-		<div ref="pdf" v-show="false">
-			<el-table :data="selectedList" stripe border style="width: 100%">
-				<el-table-column prop="reportType" label="报表类型" />
-				<el-table-column prop="reportStartTime" label="统计开始时间" />
-				<el-table-column prop="reportEndTime" label="统计结束时间" />
-				<el-table-column prop="proLineName" label="产线名称" />
-				<el-table-column prop="inputNum" label="投入数量/片" />
-				<el-table-column prop="outputNum" label="产出数量/片" />
-				<el-table-column prop="outputArea" label="产出面积/㎡" />
-				<el-table-column prop="lossArea" label="损耗面积/㎡" />
-				<el-table-column prop="lossRatio" label="损耗比例%" />
-			</el-table>
-		</div>
 		<el-dialog
 			title="提示"
 			:visible.sync="dialogVisible"
@@ -74,8 +55,8 @@
 <script>
 import { parseTime } from '../../mixins/code-filter';
 import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
-// import jsPDF from 'jspdf'
+import jsPDF from 'jspdf'
-// import html2canvas from 'html2canvas'
+import html2canvas from 'html2canvas'
 // import codeFilter from '../../mixins/code-filter'
 import * as XLSX from 'xlsx'
 import FileSaver from 'file-saver'
@@ -83,55 +64,45 @@ import FileSaver from 'file-saver'
 const tableProps = [
 	{
 		prop: 'reportType',
-		label: '报表类型',
+		label: '报表类型'
-		align: 'center'
 	},
 	{
 		prop: 'reportStartTime',
 		label: '统计开始时间',
-		align: 'center',
 		filter: parseTime,
 	},
 	{
 		prop: 'reportEndTime',
 		label: '统计结束时间',
-		align: 'center',
 		filter: parseTime,
 	},
 	{
 		prop: 'proLineName',
-		label: '产线名称',
+		label: '产线名称'
-		align: 'center',
 	},
 	{
 		prop: 'inputNum',
-		label: '投入数量/片',
+		label: '投入数量/片'
-		align: 'center',
 	},
 	{
 		prop: 'outputNum',
-		label: '产出数量/片',
+		label: '产出数量/片'
-		align: 'center',
 	},
 	{
 		prop: 'outputArea',
-		label: '产出面积/㎡',
+		label: '产出面积/㎡'
-		align: 'center',
 	},
 	{
 		prop: 'lossNum',
-		label: '损耗数量/片',
+		label: '损耗数量/片'
-		align: 'center',
 	},
 	{
 		prop: 'lossArea',
-		label: '损耗面积/㎡',
+		label: '损耗面积/㎡'
-		align: 'center',
 	},
 	{
 		prop: 'lossRatio',
-		label: '损耗比例%',
+		label: '损耗比例%'
-		align: 'center',
 	}
 ];
 
@@ -153,6 +124,7 @@ export default {
       addOrUpdateVisible: false,
 			tableProps,
 			tableBtn: [],
+			showData: [],
 			selectedList: [],
 			// tableBtn: [
 			// 	this.$auth.hasPermi(`base:factory:update`)
@@ -232,44 +204,60 @@ export default {
 		this.getPdLineList()
 	},
 	methods: {
+		test() {
+			var target = document.getElementsByClassName("right-aside")[0]
+			target.style.background = '#FFFFFF'
+			setTimeout(() => {
+				html2canvas(target).then(function(canvas) {
+						var contentWidth = canvas.width
+						var contentHeight = canvas.height
+
+						// 一页pdf显示html页面生成的canvas高度
+						var pageHeight = contentHeight / 592.28 * 841.89
+						// 未生成pdf的html页面高度
+						var leftHeight = contentHeight
+						// 页面偏移
+						var position = 0
+						// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
+						var imgWidth = 595.28
+						var imgHeight = 592.28 / contentWidth * contentHeight
+
+						var pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+						console.log('nihc URL', leftHeight, pageHeight)
+
+						var pdf = new jsPDF('', 'pt', 'a4')
+
+						if (leftHeight < pageHeight) {
+							pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
+						} else {
+							while(leftHeight > 0) {
+								pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+								leftHeight -= pageHeight
+								position -= 841.89
+								// 避免空白页
+								if (leftHeight > 0) {
+									pdf.addPage()
+								}
+							}
+						}
+
+						pdf.save('产线统计自动报表.pdf')
+				})
+			}, 300)
+		},
 		exportPdf() {
-			this.pdf()
+			this.test()
-			this.dialogVisible = false
+			setTimeout(() =>{
+				this.dialogVisible = false
+				this.showData = this.tableData
+			}, 600)
+			
 		},
 		exportXlsx() {
-			this.down()
+			this.exportECL()
 			this.dialogVisible = false
-		},
+			this.showData = this.tableData
-		// imgDownload() {
-		// 	let that = this
-		// 	let img = this.$refs['pdf']
-		// 	// 图片高度
-		// 	var w = parseInt(window.getComputedStyle(img).width)
-		// 	// 图片宽度
-		// 	var h = parseInt(window.getComputedStyle(img).height)
-		// 	// 滚轮置顶，避免留白
-		// 	window.pageYOffset = 0
-		// 	html2canvas(img).then(function(canvas) {
-
-		// 	})
-		// },
-		pdf() {
-			// console.log('打印看看[df]')
-			// const pdf = new jsPDF()
-			// const content = this.$refs.pdf.innerHTML
-			// console.log('打印看看', content)
-			// pdf.text(content, 15, 15)
-			// // pdf.text('Hello world!', 10, 10)
-			// pdf.save('test.pdf')
-			// console.log('打印看看', pdf)
-			const printWindow = window.open('', '_blank')
-			const temp = this.$refs.pdf.innerHTML
-			console.log(temp)
-			printWindow.document.body.innerHTML = temp
-			printWindow.focus()
-			// printWindow.document.writeln(this.$refs.pdf.innerHTML)
-			printWindow.document.close()
-			printWindow.print()
 		},
 		handleClose(done) {
 			this.$confirm('确认关闭？')
@@ -278,23 +266,30 @@ export default {
 				})
 				.catch(_ => {});
 		},
-		down() {
+		exportECL() {
-			//选中导出时可更改此处数组 选中的数组
+			let tables = document.querySelector('.el-table').cloneNode(true)
-			//构建导出的表格数据
+			const fix = tables.querySelector('.el-table__fixed')
-			const exportData = [
+			const fixRight = tables.querySelector('.el-table__fixed-right')
-				{reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
+			if (fix) {
-				...this.selectedList
+				tables.removeChild(tables.querySelector('.el-table__fixed'))
-			]
-			//注意表格上绑定id， 获取dom元素
-			const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
-			const workbook = XLSX.utils.book_new()
-			XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
-			const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
-			try {
-				FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计自动报表.xlsx')
-			} catch (e) {
-				console.log(e)
 			}
+			if (fixRight) {
+				tables.removeChild(tables.querySelector('.el-table__fixed-right'))
+			}
+			let exportTable = XLSX.utils.table_to_book(tables)
+
+      var exportTableOut = XLSX.write(exportTable, {
+        bookType: 'xlsx', bookSST: true, type: 'array'
+      })
+      // sheetjs.xlsx为导出表格的标题名称
+      try {
+        FileSaver.saveAs(new Blob([exportTableOut], {
+          type: 'application/octet-stream'
+        }), '产线统计自动报表.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, exportTableOut)
+      }
+      return exportTableOut
     },
 		selectChange(val) {
       console.log(val)
@@ -328,12 +323,13 @@ export default {
     getDataList() {
       this.dataListLoading = true;
       this.urlOptions.getDataListURL(this.listQuery).then(response => {
-        this.tableData = response.data.list.map(item => {
+        this.tableData = response.data.list.map((item, index) => {
 					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
 					return item
 				});
         this.total = response.data.total;
         this.dataListLoading = false;
+				this.showData = this.tableData
       });
     },
     // 每页数
@@ -348,15 +344,10 @@ export default {
       this.getDataList();
     },
 		handleExport() {
-			if (this.selectedList.length === 0) {
+			if (this.selectedList.length > 0) {
-				this.selectedList = this.tableData
+				this.showData = this.selectedList
 			}
 			this.dialogVisible = true
-      // this.$modal.confirm('是否确认导出所选数据项?').then(() => {
-      //   this.exportLoading = true;
-      //   // this.down()
-			// 	this.pdf()
-      // }).catch(() => { });
     }
 	},
 };

src/views/core/monitoring/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-09-20 10:55:23
+ * @LastEditTime: 2023-09-27 16:23:44
  * @LastEditors: DY
  * @Description: 
 -->
@@ -12,12 +12,13 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
 			:page="listQuery.pageNo"
 			:limit="listQuery.pageSize"
 			:selectWidth="55"
-			:table-data="tableData"
+			:table-data="showData"
 			@selection-change="selectChange"
 			>
 			<method-btn
@@ -33,17 +34,6 @@
 			:page.sync="listQuery.pageNo"
 			:total="listQuery.total"
 			@pagination="getDataList" />
-		<div ref="pdf" v-show="false">
-			<el-table :data="selectedList" stripe border style="width: 100%">
-				<el-table-column prop="proLineName" label="产线名称" />
-				<el-table-column prop="inputNum" label="投入数量/片" />
-				<el-table-column prop="outputNum" label="产出数量/片" />
-				<el-table-column prop="outputArea" label="产出面积/㎡" />
-				<el-table-column prop="lossNum" label="损耗数量/片" />
-				<el-table-column prop="lossArea" label="损耗面积/㎡" />
-				<el-table-column prop="lossRatio" label="损耗比例%" />
-			</el-table>
-		</div>
 		<el-dialog
 			title="提示"
 			:visible.sync="dialogVisible"
@@ -63,6 +53,8 @@
 import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
 import * as XLSX from 'xlsx'
 import FileSaver from 'file-saver'
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 
 const tableProps = [
 	{
@@ -115,6 +107,7 @@ export default {
       addOrUpdateVisible: false,
 			tableProps,
 			tableBtn: [],
+			showData: [],
 			tableData: [],
 			selectedList: [],
 			formConfig: [
@@ -166,40 +159,86 @@ export default {
 		this.getPdLineList()
 	},
 	methods: {
+		test() {
+			var target = document.getElementsByClassName("right-aside")[0]
+			target.style.background = '#FFFFFF'
+			setTimeout(() => {
+				html2canvas(target).then(function(canvas) {
+						var contentWidth = canvas.width
+						var contentHeight = canvas.height
+
+						// 一页pdf显示html页面生成的canvas高度
+						var pageHeight = contentHeight / 592.28 * 841.89
+						// 未生成pdf的html页面高度
+						var leftHeight = contentHeight
+						// 页面偏移
+						var position = 0
+						// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
+						var imgWidth = 595.28
+						var imgHeight = 592.28 / contentWidth * contentHeight
+
+						var pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+						console.log('nihc URL', leftHeight, pageHeight)
+
+						var pdf = new jsPDF('', 'pt', 'a4')
+
+						if (leftHeight < pageHeight) {
+							pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
+						} else {
+							while(leftHeight > 0) {
+								pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+								leftHeight -= pageHeight
+								position -= 841.89
+								// 避免空白页
+								if (leftHeight > 0) {
+									pdf.addPage()
+								}
+							}
+						}
+
+						pdf.save('产线统计数据查询报表.pdf')
+				})
+			}, 300)
+		},
+		exportECL() {
+			let tables = document.querySelector('.el-table').cloneNode(true)
+			const fix = tables.querySelector('.el-table__fixed')
+			const fixRight = tables.querySelector('.el-table__fixed-right')
+			if (fix) {
+				tables.removeChild(tables.querySelector('.el-table__fixed'))
+			}
+			if (fixRight) {
+				tables.removeChild(tables.querySelector('.el-table__fixed-right'))
+			}
+			let exportTable = XLSX.utils.table_to_book(tables)
+
+      var exportTableOut = XLSX.write(exportTable, {
+        bookType: 'xlsx', bookSST: true, type: 'array'
+      })
+      // sheetjs.xlsx为导出表格的标题名称
+      try {
+        FileSaver.saveAs(new Blob([exportTableOut], {
+          type: 'application/octet-stream'
+        }), '产线统计数据查询报表.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, exportTableOut)
+      }
+      return exportTableOut
+    },
 		exportPdf() {
-			this.pdf()
+			this.test()
-			this.dialogVisible = false
+			setTimeout(() =>{
+				this.dialogVisible = false
+				this.showData = this.tableData
+			}, 600)
+			
 		},
 		exportXlsx() {
-			this.down()
+			this.exportECL()
 			this.dialogVisible = false
+			this.showData = this.tableData
 		},
-		pdf() {
-			const printWindow = window.open('', '_blank')
-			const temp = this.$refs.pdf.innerHTML
-			console.log(temp)
-			printWindow.document.body.innerHTML = temp
-			printWindow.document.close()
-			printWindow.print()
-		},
-		down() {
-			//选中导出时可更改此处数组 选中的数组
-			//构建导出的表格数据
-			const exportData = [
-				{proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
-				...this.selectedList
-			]
-			//注意表格上绑定id， 获取dom元素
-			const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
-			const workbook = XLSX.utils.book_new()
-			XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
-			const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
-			try {
-				FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计数据查询.xlsx')
-			} catch (e) {
-				console.log(e)
-			}
-    },
 		handleClose(done) {
 			this.$confirm('确认关闭？')
 				.then(_ => {
@@ -240,6 +279,7 @@ export default {
         this.tableData = response.data;
         this.total = response.data.total;
         this.dataListLoading = false;
+				this.showData = this.tableData
       });
     },
     // 每页数
@@ -254,21 +294,10 @@ export default {
       this.getDataList();
     },
 		handleExport() {
-			if (this.selectedList.length === 0) {
+			if (this.selectedList.length > 0) {
-				this.selectedList = this.tableData
+				this.showData = this.selectedList
 			}
 			this.dialogVisible = true
-      // 处理查询参数
-      // let params = { ...this.queryParams };
-      // params.pageNo = undefined;
-      // params.pageSize = undefined;
-      // this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-      //   this.exportLoading = true;
-      //   return this.urlOptions.exportURL(params);
-      // }).then(response => {
-      //   this.$download.excel(response, '工厂.xls');
-      //   this.exportLoading = false;
-      // }).catch(() => { });
     }
 	},
 };

src/views/core/monitoring/sectionStatistics/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Do not edit
  * @Date: 2023-08-29 14:59:29
- * @LastEditTime: 2023-09-22 15:13:48
+ * @LastEditTime: 2023-10-08 10:51:49
  * @LastEditors: DY
  * @Description: 
 -->
@@ -13,12 +13,13 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
 			:page="listQuery.pageNo"
 			:limit="listQuery.pageSize"
 			:selectWidth="55"
-			:table-data="tableData"
+			:table-data="showData"
 			@selection-change="selectChange"
 			>
 			<method-btn
@@ -34,21 +35,6 @@
 			:page.sync="listQuery.pageNo"
 			:total="listQuery.total"
 			@pagination="getDataList" />
-		<div ref="pdf" v-show="false">
-			<el-table :data="selectedList" stripe border style="width: 100%">
-				<el-table-column prop="reportType" label="报表类型" />
-				<el-table-column prop="reportStartTime" label="统计开始时间" />
-				<el-table-column prop="reportEndTime" label="统计结束时间" />
-				<el-table-column prop="proLineName" label="产线名称" />
-				<el-table-column prop="sectionName" label="工段名称" />
-				<el-table-column prop="inputNum" label="投入数量/片" />
-				<el-table-column prop="outputNum" label="产出数量/片" />
-				<el-table-column prop="outputArea" label="产出面积/㎡" />
-				<el-table-column prop="lossNum" label="损耗数量/片" />
-				<el-table-column prop="lossArea" label="损耗面积/㎡" />
-				<el-table-column prop="lossRatio" label="损耗比例%" />
-			</el-table>
-		</div>
 		<el-dialog
 			title="提示"
 			:visible.sync="dialogVisible"
@@ -69,6 +55,8 @@ import { parseTime } from '../../mixins/code-filter';
 import { getWorkshopSectionList, getPdList, getSectionAutoReport  } from '@/api/core/monitoring/sectionStatistics'
 import * as XLSX from 'xlsx'
 import FileSaver from 'file-saver'
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 
 const tableProps = [
 	{
@@ -140,6 +128,7 @@ export default {
 			tableProps,
 			tableBtn: [],
 			tableData: [],
+			showData: [],
 			formConfig: [
 				{
 					type: 'select',
@@ -208,40 +197,86 @@ export default {
 		this.getPdLineList()
 	},
 	methods: {
+		test() {
+			var target = document.getElementsByClassName("right-aside")[0]
+			target.style.background = '#FFFFFF'
+			setTimeout(() => {
+				html2canvas(target).then(function(canvas) {
+						var contentWidth = canvas.width
+						var contentHeight = canvas.height
+
+						// 一页pdf显示html页面生成的canvas高度
+						var pageHeight = contentHeight / 592.28 * 841.89
+						// 未生成pdf的html页面高度
+						var leftHeight = contentHeight
+						// 页面偏移
+						var position = 0
+						// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
+						var imgWidth = 595.28
+						var imgHeight = 592.28 / contentWidth * contentHeight
+
+						var pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+						console.log('nihc URL', leftHeight, pageHeight)
+
+						var pdf = new jsPDF('', 'pt', 'a4')
+
+						if (leftHeight < pageHeight) {
+							pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
+						} else {
+							while(leftHeight > 0) {
+								pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+								leftHeight -= pageHeight
+								position -= 841.89
+								// 避免空白页
+								if (leftHeight > 0) {
+									pdf.addPage()
+								}
+							}
+						}
+
+						pdf.save('工段统计自动报表.pdf')
+				})
+			}, 300)
+		},
+		exportECL() {
+			let tables = document.querySelector('.el-table').cloneNode(true)
+			const fix = tables.querySelector('.el-table__fixed')
+			const fixRight = tables.querySelector('.el-table__fixed-right')
+			if (fix) {
+				tables.removeChild(tables.querySelector('.el-table__fixed'))
+			}
+			if (fixRight) {
+				tables.removeChild(tables.querySelector('.el-table__fixed-right'))
+			}
+			let exportTable = XLSX.utils.table_to_book(tables)
+
+      var exportTableOut = XLSX.write(exportTable, {
+        bookType: 'xlsx', bookSST: true, type: 'array'
+      })
+      // sheetjs.xlsx为导出表格的标题名称
+      try {
+        FileSaver.saveAs(new Blob([exportTableOut], {
+          type: 'application/octet-stream'
+        }), '工段统计自动报表.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, exportTableOut)
+      }
+      return exportTableOut
+    },
 		exportPdf() {
-			this.pdf()
+			this.test()
-			this.dialogVisible = false
+			setTimeout(() =>{
+				this.dialogVisible = false
+				this.showData = this.tableData
+			}, 600)
+			
 		},
 		exportXlsx() {
-			this.down()
+			this.exportECL()
 			this.dialogVisible = false
+			this.showData = this.tableData
 		},
-		pdf() {
-			const printWindow = window.open('', '_blank')
-			const temp = this.$refs.pdf.innerHTML
-			console.log(temp)
-			printWindow.document.body.innerHTML = temp
-			printWindow.document.close()
-			printWindow.print()
-		},
-		down() {
-			//选中导出时可更改此处数组 选中的数组
-			//构建导出的表格数据
-			const exportData = [
-				{reportType: '产线类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', lineName: '产线名称', sectionName: '工段名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
-				...this.selectedList
-			]
-			//注意表格上绑定id， 获取dom元素
-			const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
-			const workbook = XLSX.utils.book_new()
-			XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
-			const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
-			try {
-				FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '工段统计自动报表.xlsx')
-			} catch (e) {
-				console.log(e)
-			}
-    },
 		handleClose(done) {
 			this.$confirm('确认关闭？')
 				.then(_ => {
@@ -289,6 +324,7 @@ export default {
 					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
 					return item
 				});
+				this.showData = this.tableData
         this.total = response.data.total;
         this.dataListLoading = false;
       });
@@ -305,21 +341,10 @@ export default {
       this.getDataList();
     },
 		handleExport() {
-			if (this.selectedList.length === 0) {
+			if (this.selectedList.length > 0) {
-				this.selectedList = this.tableData
+				this.showData = this.selectedList
 			}
 			this.dialogVisible = true
-      // 处理查询参数
-      // let params = { ...this.queryParams };
-      // params.pageNo = undefined;
-      // params.pageSize = undefined;
-      // this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-      //   this.exportLoading = true;
-      //   return this.urlOptions.exportURL(params);
-      // }).then(response => {
-      //   this.$download.excel(response, '工厂.xls');
-      //   this.exportLoading = false;
-      // }).catch(() => { });
     }
 	},
 };

src/views/core/monitoring/sectionStatisticsSearch/index.vue

@@ -5,23 +5,42 @@
 			ref="searchBarForm"
 			@headBtnClick="buttonClick" />
 		<base-table
+			class="right-aside"
 			v-loading="dataListLoading"
 			:table-props="tableProps"
-			:table-data="tableData" />
+			:table-data="showData"
-		<!-- <pagination
+			:selectWidth="55"
+			@selection-change="selectChange"
+		/>
+		<pagination
 			:limit.sync="listQuery.pageSize"
 			:page.sync="listQuery.pageNo"
 			:total="listQuery.total"
-			@pagination="getDataList" /> -->
+			@pagination="getDataList" />
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible"
+			width="30%"
+			:before-close="handleClose">
+			<el-button type="primary" @click="exportXlsx">xlsx</el-button>
+  		<el-button type="success" @click="exportPdf">pdf</el-button>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="dialogVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+			</span>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
 // import basicPage from '../../mixins/basic-page';
-import { parseTime } from '../../mixins/code-filter';
 import { getSectionDataSearch } from '@/api/core/monitoring';
 import { getProductionLinePage } from '@/api/core/base/productionLine';
 import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
+import * as XLSX from 'xlsx'
+import FileSaver from 'file-saver'
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 
 const tableProps = [
 	{
@@ -70,6 +89,8 @@ export default {
 			},
 			tableProps,
       tableData: [],
+			showData: [],
+			selectedList: [],
       listQuery: {
         proLineId:undefined,
         sectionId: undefined,
@@ -77,6 +98,7 @@ export default {
         endTime: undefined,
       },
 			dataListLoading: false,
+			dialogVisible: false,
       optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
 			formConfig: [
 				{
@@ -127,6 +149,93 @@ export default {
     this.getDataList()
 	},
 	methods: {
+		test() {
+			var target = document.getElementsByClassName("right-aside")[0]
+			target.style.background = '#FFFFFF'
+			setTimeout(() => {
+				html2canvas(target).then(function(canvas) {
+						var contentWidth = canvas.width
+						var contentHeight = canvas.height
+
+						// 一页pdf显示html页面生成的canvas高度
+						var pageHeight = contentHeight / 592.28 * 841.89
+						// 未生成pdf的html页面高度
+						var leftHeight = contentHeight
+						// 页面偏移
+						var position = 0
+						// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
+						var imgWidth = 595.28
+						var imgHeight = 592.28 / contentWidth * contentHeight
+
+						var pageData = canvas.toDataURL('image/jpeg', 1.0)
+
+						console.log('nihc URL', leftHeight, pageHeight)
+
+						var pdf = new jsPDF('', 'pt', 'a4')
+
+						if (leftHeight < pageHeight) {
+							pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
+						} else {
+							while(leftHeight > 0) {
+								pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+								leftHeight -= pageHeight
+								position -= 841.89
+								// 避免空白页
+								if (leftHeight > 0) {
+									pdf.addPage()
+								}
+							}
+						}
+
+						pdf.save('工段统计数据查询报表.pdf')
+				})
+			}, 300)
+		},
+		exportECL() {
+			let tables = document.querySelector('.el-table').cloneNode(true)
+			const fix = tables.querySelector('.el-table__fixed')
+			const fixRight = tables.querySelector('.el-table__fixed-right')
+			if (fix) {
+				tables.removeChild(tables.querySelector('.el-table__fixed'))
+			}
+			if (fixRight) {
+				tables.removeChild(tables.querySelector('.el-table__fixed-right'))
+			}
+			let exportTable = XLSX.utils.table_to_book(tables)
+
+      var exportTableOut = XLSX.write(exportTable, {
+        bookType: 'xlsx', bookSST: true, type: 'array'
+      })
+      // sheetjs.xlsx为导出表格的标题名称
+      try {
+        FileSaver.saveAs(new Blob([exportTableOut], {
+          type: 'application/octet-stream'
+        }), '工段统计数据查询报表.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, exportTableOut)
+      }
+      return exportTableOut
+    },
+		exportPdf() {
+			this.test()
+			setTimeout(() =>{
+				this.dialogVisible = false
+				this.showData = this.tableData
+			}, 600)
+			
+		},
+		exportXlsx() {
+			this.exportECL()
+			this.dialogVisible = false
+			this.showData = this.tableData
+		},
+		handleClose(done) {
+			this.$confirm('确认关闭？')
+				.then(_ => {
+					done();
+				})
+				.catch(_ => {});
+		},
 		getArr() {
 			const params = {
 				page: 1,
@@ -144,9 +253,31 @@ export default {
       // this.listQuery.endTime = '1693564257000'
       this.urlOptions.getDataListURL(this.listQuery).then(res => {
         this.tableData = res.data
-        // this.total = response.data.total;
+        this.listQuery.total = this.tableData.length;
         this.dataListLoading = false;
+				this.showData = this.tableData;
       });
+    },
+		// 每页数
+    sizeChangeHandle(val) {
+      this.listQuery.pageSize = val;
+      this.listQuery.pageNo = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.listQuery.pageNo = val;
+      this.getDataList();
+    },
+		handleExport() {
+			if (this.selectedList.length > 0) {
+				this.showData = this.selectedList
+			}
+			this.dialogVisible = true
+    },
+		selectChange(val) {
+      console.log(val)
+      this.selectedList = val
     },
     buttonClick(val) {
       console.log(val)
@@ -171,6 +302,9 @@ export default {
 					};
 					this.getDataList();
 					break;
+				case 'export':
+					this.handleExport();
+					break;
 				default:
 					console.log(val);
 			}