页面

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2023-09-15 14:38:26
+ # @LastEditTime: 2023-09-16 09:41:07
  # @LastEditors: DY
  # @Description: 
 ### 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
+    <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
     <line-chart ref="lineChart" />
     <!-- <pagination
 			:limit.sync="listQuery.pageSize"
@@ -17,6 +17,7 @@ import { parseTime } from '../../mixins/code-filter';
 import { getCT } from '@/api/core/analysis/index';
 import { getProductionLinePage } from '@/api/core/base/productionLine';
 import lineChart from '../LineChart'
+import { time } from 'echarts';
 // import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
 
 // const tableProps = [
@@ -59,6 +60,8 @@ export default {
         lineId:undefined,
         startTime:undefined
       },
+      timeList: [],
+      spanArr: [], 
       xData: [],
       yData: [],
       optionArrUrl: [getProductionLinePage],
@@ -69,18 +72,19 @@ export default {
           selectOptions: [],
           param: 'lineIds',
           defaultSelect: '',
-          multiple: true,
+          multiple: false,
           filterable: true,
         },
         {
           type: 'datePicker',
           label: '时间',
-          dateType: 'datetime',
+          dateType: 'datetimerange',
           format: 'yyyy-MM-dd',
           valueFormat: 'yyyy-MM-dd HH:mm:ss',
           rangeSeparator: '-',
           startPlaceholder: '开始时间',
           endPlaceholder: '结束时间',
+          width: 350,
           param: 'time',
         },
         {
@@ -107,10 +111,40 @@ export default {
         });
       });
     },
+    setRowSpan(arr) {
+      let count = 0
+      arr.forEach((item, index) => {
+        if(index === 0) {
+          this.spanArr.push(1)
+        } else {
+          if (item === arr[index - 1]) {
+            this.spanArr[count] += 1
+            this.spanArr.push(0)
+          } else {
+            count = index
+            this.spanArr.push(1)
+          }
+        }
+      })
+      console.log('打印数组长度', this.spanArr)
+    },
+    /** 合并table列的规则 */
+		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
+			if (columnIndex == 0) {
+				if (this.spanArr[rowIndex]) {
+					return [
+						this.spanArr[rowIndex], // row span
+						1, // col span
+					];
+				} else {
+					return [0, 0];
+				}
+			}
+		},
     getData() {
-      this.listQuery.lineId = '1672847052717821953'
+      // this.listQuery.lineId = '1672847052717821953'
-      this.listQuery.startTime = '1693497600000';
+      // this.listQuery.startTime = '1693497600000';
-      this.listQuery.endTime = '1693843200000';
+      // this.listQuery.endTime = '1693843200000';
       this.urlOptions.getDataListURL(this.listQuery).then(res => {
         console.log(res)
         let arr = [
@@ -123,40 +157,48 @@ export default {
             prop: 'equName',
             label: '设备',
             align: 'center',
-          },
+          }
         ]
-        let eqArr= []
+        let sectionArr= []
         res.data.data.forEach((ele, index) => {
-          console.log(ele);
+          let tempData = []
-          eqArr.push(ele.equName)
+          ele.data.forEach(item => {
+            item.children.forEach(params => {
+              if (params.dynamicName === '设备CT') {
+                tempData[item.dynamicName + '_eq'] = params.dynamicValue
+              } else {
+                tempData[item.dynamicName + '_pl'] = params.dynamicValue
+              }
             })
-        console.log(eqArr)
+          })
-        // console.log(res.data.nameData.slice(1))
+          tempData['equName'] = ele.equName
+          tempData['sectionName'] = ele.sectionName
+          this.tableData.push(tempData)
+          const { sectionName } = tempData
+          sectionArr.push(sectionName)
+        })
+        this.setRowSpan(sectionArr)
+        console.log('工段名称列表', sectionArr)
         res.data.nameData.forEach(item => {
-          if (eqArr[0] === item.parentId) {
+          this.timeList.push(item.name)
-            const props = {
-              'prop': item.name,
-              'label': item.name,
-              'align': 'center'
-            }
-          }
-          arr[2].children.push(props)
         })
-        let obj = {
+        const timeArray = Array.from(new Set(this.timeList))
-          lineName: res.data.data[0].lineName,
+        for (const times of timeArray) {
-          sum: res.data.data[0].sum,
+          if (times !== '设备CT' && times !== '产线CT') {
+            const subprop = {
+              label: times,
+              align: 'center',
+              children: [
+                { prop: times + '_eq', label: '设备CT', align: 'center' },
+                { prop: times + '_pl', label: '产线CT', align: 'center' }
+              ]
+            }
+            arr.push(subprop)
+          }
         }
-        res.data.data[0].data[0].children.forEach((item, index) => {
-          console.log(item)
-          // let data = 'data' + Number(index+1)
-          obj['' + item.dynamicName + ''] = item.dynamicValue
-        })
-        this.tableData = [obj]
-        console.log(this.tableData)
-        console.log(arr)
         this.tableProps = arr
-        let xData = []
 
+        let xData = []
         res.data.nameData.forEach(item => {
           xData.push(item.name)
           // arr[2].children.push(props)
@@ -180,6 +222,9 @@ export default {
         case 'search':
           // this.listQuery.pageNo = 1;
           // this.listQuery.pageSize = 10;
+          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()
           break;
         case 'reset':

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-15 11:19:34
+ * @LastEditTime: 2023-09-16 17:34:17
  * @LastEditors: DY
  * @Description: 
 -->
@@ -44,7 +44,7 @@
 			/>
 		</div> -->
 		<div ref="pdf" v-show="false">
-			<el-table :data="selectedList" stripe border="true" style="width: 100%">
+			<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="统计结束时间" />
@@ -74,8 +74,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'
@@ -240,19 +240,19 @@ export default {
 			this.down()
 			this.dialogVisible = false
 		},
-		imgDownload() {
+		// imgDownload() {
-			let that = this
+		// 	let that = this
-			let img = this.$refs['pdf']
+		// 	let img = this.$refs['pdf']
-			// 图片高度
+		// 	// 图片高度
-			var w = parseInt(window.getComputedStyle(img).width)
+		// 	var w = parseInt(window.getComputedStyle(img).width)
-			// 图片宽度
+		// 	// 图片宽度
-			var h = parseInt(window.getComputedStyle(img).height)
+		// 	var h = parseInt(window.getComputedStyle(img).height)
-			// 滚轮置顶，避免留白
+		// 	// 滚轮置顶，避免留白
-			window.pageYOffset = 0
+		// 	window.pageYOffset = 0
-			html2canvas(img).then(function(canvas) {
+		// 	html2canvas(img).then(function(canvas) {
 
-			})
+		// 	})
-		},
+		// },
 		pdf() {
 			// console.log('打印看看[df]')
 			// const pdf = new jsPDF()

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-14 10:51:20
+ * @LastEditTime: 2023-09-16 17:42:37
  * @LastEditors: DY
  * @Description: 
 -->
@@ -33,11 +33,36 @@
 			: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"
+			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 { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
+import * as XLSX from 'xlsx'
+import FileSaver from 'file-saver'
 
 const tableProps = [
 	{
@@ -85,11 +110,13 @@ export default {
       },
       exportLoading: false,
       dataListLoading: false,
+			dialogVisible: false,
       addOrEditTitle: '',
       addOrUpdateVisible: false,
 			tableProps,
 			tableBtn: [],
 			tableData: [],
+			selectedList: [],
 			formConfig: [
 				{
 					type: 'select',
@@ -134,6 +161,47 @@ export default {
 		this.getPdLineList()
 	},
 	methods: {
+		exportPdf() {
+			this.pdf()
+			this.dialogVisible = false
+		},
+		exportXlsx() {
+			this.down()
+			this.dialogVisible = false
+		},
+		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(_ => {
+					done();
+				})
+				.catch(_ => {});
+		},
 		getPdLineList() {
 			getPdList().then((res) => {
 				this.formConfig[0].selectOptions = res.data || []
@@ -181,6 +249,10 @@ export default {
       this.getDataList();
     },
 		handleExport() {
+			if (this.selectedList.length === 0) {
+				this.selectedList = this.tableData
+			}
+			this.dialogVisible = true
       // 处理查询参数
       // let params = { ...this.queryParams };
       // params.pageNo = undefined;

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

@@ -14,7 +14,7 @@
 			v-else
 			:span-method="mergeColumnHandler"
 			:table-props="tableProps"
-			:table-data="list"
+			:table-data="tableData"
 			@emitFun="handleEmitFun"></base-table>
 		<!-- :page="queryParams.pageNo"
 			:limit="queryParams.pageSize" -->
@@ -39,6 +39,10 @@ export default {
 				pageSize: 10,
 			},
 			list: [],
+			arr: [],
+			spanArr: [], 
+			timeList: [],
+			tableData: [],
 			tableProps: [],
 			spanInfo: {},
 		};
@@ -49,70 +53,75 @@ export default {
 	},
 	methods: {
 		/** 构建tableProps - 依据第一个元素所提供的信息 */
-		buildProps(item) {
+		buildProps(plData) {
-			const {
+			plData.forEach(item => {
-				data: [{ hourData }],
+				this.timeList.push(item.name)
-			} = item;
+			})
-
+			const timeArray = Array.from(new Set(this.timeList))
-			const props = [
+			console.log('nihc', timeArray)
-				{ prop: 'productLine', label: '产线', align: 'center' },
+			for (const times of timeArray) {
-				{ prop: 'specification', label: '规格', align: 'center' },
+				if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
-				{ prop: 'equipmentName', label: '设备', align: 'center' },
-				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
-			];
-
-			for (const key of Object.keys(hourData).sort()) {
 					const subprop = {
-					label: key,
+						label: times,
 						align: 'center',
 						children: [
-						{ prop: key + '__in', label: '进数据', align: 'center' },
+							{ prop: times + '_in', label: '投入数量', align: 'center' },
-						{ prop: key + '__out', label: '出数据', align: 'center' },
+							{ prop: times + '_out', label: '产出数量', align: 'center' },
-						{ prop: key + '__nok', label: '报废数据', align: 'center' },
+							{ prop: times + '_junk', label: '报废数量', align: 'center' },
-						{
+							{ prop: times + '_area', label: '产出面积', align: 'center' }
-							prop: key + '__ratio',
+						]
-							label: '报废率',
-							align: 'center',
-							filter: (val) => (val != null ? val + ' %' : '-'),
-						},
-					],
-				};
-				props.push(subprop);
 					}
-
+					this.arr.push(subprop)
-			this.tableProps = props;
+				}
-      console.log('打印tableProps', this.tableProps)
+			}
+			this.tableProps = this.arr
+		},
+		setRowSpan(arr) {
+      let count = 0
+      arr.forEach((item, index) => {
+        if(index === 0) {
+          this.spanArr.push(1)
+        } else {
+          if (item === arr[index - 1]) {
+            this.spanArr[count] += 1
+            this.spanArr.push(0)
+          } else {
+            count = index
+            this.spanArr.push(1)
+          }
+        }
+      })
+      console.log('打印数组长度', this.spanArr)
     },
 
 		/** 把 list 里的数据转换成 tableProps 对应的格式 */
 		convertList(list) {
-			this.list.splice(0);
+			let sectionArr= []
-			let rowIndex = 0;
+			console.log('打印看下数据list', list)
-			for (const line of list) {
+			list.forEach((ele, index) => {
-				const { productLine, specification, data } = line;
+				let tempData = []
-
+				ele.data.forEach(item => {
-				// 设置span的行数
+					item.children.forEach(params => {
-				this.spanInfo[rowIndex] = data.length;
+						if (params.dynamicName === '投入数量') {
-				for (const equipment of data) {
+							tempData[item.dynamicName + '_in'] = params.dynamicValue
-					const { equipmentName, totalQuantity } = equipment;
+						} else if (params.dynamicName === '产出数量') {
-					let row = {
+							tempData[item.dynamicName + '_out'] = params.dynamicValue
-						productLine,
+						} else if (params.dynamicName === '报废数量') {
-						specification: specification.join('、'),
+							tempData[item.dynamicName + '_junk'] = params.dynamicValue
-						equipmentName,
+						} else {
-						totalQuantity,
+							tempData[item.dynamicName + '_area'] = params.dynamicValue
-					};
-					rowIndex += 1;
-					for (const [key, hourData] of Object.entries(equipment.hourData)) {
-						const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
-							hourData;
-						row[key + '__in'] = inQuantity;
-						row[key + '__out'] = outQuantity;
-						row[key + '__nok'] = nokQuantity;
-						row[key + '__ratio'] = scrapRatio;
-					}
-					this.list.push(row);
-				}
 						}
+					})
+				})
+				tempData['proLineName'] = ele.proLineName
+				tempData['spec'] = ele.spec
+				this.tableData.push(tempData)
+				console.log('看看数据', this.tableData, tempData)
+				const { sectionName } = tempData
+				sectionArr.push(sectionName)
+			})
+			this.setRowSpan(sectionArr)
+			console.log('工段名称列表', sectionArr)
 		},
 
 		buildData(data) {
@@ -121,10 +130,10 @@ export default {
 
 		/** 合并table列的规则 */
 		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
-			if (columnIndex == 0 || columnIndex == 1) {
+			if (columnIndex == 0) {
-				if (this.spanInfo[rowIndex]) {
+				if (this.spanArr[rowIndex]) {
 					return [
-						this.spanInfo[rowIndex], // row span
+						this.spanArr[rowIndex], // row span
 						1, // col span
 					];
 				} else {
@@ -136,18 +145,27 @@ export default {
 		async getList() {
       this.urlOptions.getDataListURL().then(res => {
         console.log('看看数据', res)
+				this.arr = [
+          {
+            prop: 'proLineName',
+            label: '生产线',
+            align: 'center',
+          },
+          {
+            prop: 'spec',
+            label: '产品规格',
+            align: 'center',
+          }
+				]
+				this.buildProps(res.data.nameData);
+				this.buildData(res.data.data);
       })
-			// const { data } = await this.$axios({
-			// 	url: '/monitoring/equipment-monitor/recent-24-hours',
-			// 	method: 'get',
-			// });
 
 			// // const data = this.res.data;
 			// // console.log('recent-24', data);
 
 			// this.initing = true;
-			// this.buildProps(data[0]);
+			
-			// this.buildData(data);
 			// this.queryParams.pageSize = this.list.length;
 
 			// setTimeout(() => {

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-15 13:51:55
+ * @LastEditTime: 2023-09-16 17:41:53
  * @LastEditors: DY
  * @Description: 
 -->
@@ -34,12 +34,41 @@
 			: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"
+			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 { parseTime } from '../../mixins/code-filter';
 import { getWorkshopSectionList, getPdList, getSectionAutoReport  } from '@/api/core/monitoring/sectionStatistics'
+import * as XLSX from 'xlsx'
+import FileSaver from 'file-saver'
 
 const tableProps = [
 	{
@@ -104,6 +133,8 @@ export default {
       },
       exportLoading: false,
       dataListLoading: false,
+			selectedList: [],
+			dialogVisible: false,
       addOrEditTitle: '',
       addOrUpdateVisible: false,
 			tableProps,
@@ -177,6 +208,47 @@ export default {
 		this.getPdLineList()
 	},
 	methods: {
+		exportPdf() {
+			this.pdf()
+			this.dialogVisible = false
+		},
+		exportXlsx() {
+			this.down()
+			this.dialogVisible = false
+		},
+		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(_ => {
+					done();
+				})
+				.catch(_ => {});
+		},
 		getPdLineList() {
 			getPdList().then((res) => {
 				this.formConfig[0].selectOptions = res.data || []
@@ -233,17 +305,21 @@ export default {
       this.getDataList();
     },
 		handleExport() {
+			if (this.selectedList.length === 0) {
+				this.selectedList = this.tableData
+			}
+			this.dialogVisible = true
       // 处理查询参数
-      let params = { ...this.queryParams };
+      // let params = { ...this.queryParams };
-      params.pageNo = undefined;
+      // params.pageNo = undefined;
-      params.pageSize = undefined;
+      // params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
+      // this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-        this.exportLoading = true;
+      //   this.exportLoading = true;
-        return this.urlOptions.exportURL(params);
+      //   return this.urlOptions.exportURL(params);
-      }).then(response => {
+      // }).then(response => {
-        this.$download.excel(response, '工厂.xls');
+      //   this.$download.excel(response, '工厂.xls');
-        this.exportLoading = false;
+      //   this.exportLoading = false;
-      }).catch(() => { });
+      // }).catch(() => { });
     }
 	},
 };