test #47
							
								
								
									
										2
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								.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: 
 | 
			
		||||
### 
 | 
			
		||||
 
 | 
			
		||||
@@ -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.startTime = '1693497600000';
 | 
			
		||||
      this.listQuery.endTime = '1693843200000';
 | 
			
		||||
      // this.listQuery.lineId = '1672847052717821953'
 | 
			
		||||
      // this.listQuery.startTime = '1693497600000';
 | 
			
		||||
      // 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= []
 | 
			
		||||
        res.data.data.forEach((ele, index) => {
 | 
			
		||||
          console.log(ele);
 | 
			
		||||
          eqArr.push(ele.equName)
 | 
			
		||||
        })
 | 
			
		||||
        console.log(eqArr)
 | 
			
		||||
        // console.log(res.data.nameData.slice(1))
 | 
			
		||||
        res.data.nameData.forEach(item => {
 | 
			
		||||
          if (eqArr[0] === item.parentId) {
 | 
			
		||||
            const props = {
 | 
			
		||||
              'prop': item.name,
 | 
			
		||||
              'label': item.name,
 | 
			
		||||
              'align': 'center'
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
          arr[2].children.push(props)
 | 
			
		||||
        ]
 | 
			
		||||
        let sectionArr= []
 | 
			
		||||
        res.data.data.forEach((ele, index) => {
 | 
			
		||||
          let tempData = []
 | 
			
		||||
          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
 | 
			
		||||
              }
 | 
			
		||||
            })
 | 
			
		||||
          })
 | 
			
		||||
          tempData['equName'] = ele.equName
 | 
			
		||||
          tempData['sectionName'] = ele.sectionName
 | 
			
		||||
          this.tableData.push(tempData)
 | 
			
		||||
          const { sectionName } = tempData
 | 
			
		||||
          sectionArr.push(sectionName)
 | 
			
		||||
        })
 | 
			
		||||
        let obj = {
 | 
			
		||||
          lineName: res.data.data[0].lineName,
 | 
			
		||||
          sum: res.data.data[0].sum,
 | 
			
		||||
        this.setRowSpan(sectionArr)
 | 
			
		||||
        console.log('工段名称列表', sectionArr)
 | 
			
		||||
        res.data.nameData.forEach(item => {
 | 
			
		||||
          this.timeList.push(item.name)
 | 
			
		||||
        })
 | 
			
		||||
        const timeArray = Array.from(new Set(this.timeList))
 | 
			
		||||
        for (const times of timeArray) {
 | 
			
		||||
          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':
 | 
			
		||||
 
 | 
			
		||||
@@ -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 html2canvas from 'html2canvas'
 | 
			
		||||
// import jsPDF from 'jspdf'
 | 
			
		||||
// 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() {
 | 
			
		||||
			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) {
 | 
			
		||||
		// 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()
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
@@ -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) {
 | 
			
		||||
			const {
 | 
			
		||||
				data: [{ hourData }],
 | 
			
		||||
			} = item;
 | 
			
		||||
 | 
			
		||||
			const props = [
 | 
			
		||||
				{ prop: 'productLine', label: '产线', align: 'center' },
 | 
			
		||||
				{ prop: 'specification', label: '规格', align: 'center' },
 | 
			
		||||
				{ prop: 'equipmentName', label: '设备', align: 'center' },
 | 
			
		||||
				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
 | 
			
		||||
			];
 | 
			
		||||
 | 
			
		||||
			for (const key of Object.keys(hourData).sort()) {
 | 
			
		||||
				const subprop = {
 | 
			
		||||
					label: key,
 | 
			
		||||
					align: 'center',
 | 
			
		||||
					children: [
 | 
			
		||||
						{ prop: key + '__in', label: '进数据', align: 'center' },
 | 
			
		||||
						{ prop: key + '__out', label: '出数据', align: 'center' },
 | 
			
		||||
						{ prop: key + '__nok', label: '报废数据', align: 'center' },
 | 
			
		||||
						{
 | 
			
		||||
							prop: key + '__ratio',
 | 
			
		||||
							label: '报废率',
 | 
			
		||||
							align: 'center',
 | 
			
		||||
							filter: (val) => (val != null ? val + ' %' : '-'),
 | 
			
		||||
						},
 | 
			
		||||
					],
 | 
			
		||||
				};
 | 
			
		||||
				props.push(subprop);
 | 
			
		||||
		buildProps(plData) {
 | 
			
		||||
			plData.forEach(item => {
 | 
			
		||||
				this.timeList.push(item.name)
 | 
			
		||||
			})
 | 
			
		||||
			const timeArray = Array.from(new Set(this.timeList))
 | 
			
		||||
			console.log('nihc', timeArray)
 | 
			
		||||
			for (const times of timeArray) {
 | 
			
		||||
				if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
 | 
			
		||||
					const subprop = {
 | 
			
		||||
						label: times,
 | 
			
		||||
						align: 'center',
 | 
			
		||||
						children: [
 | 
			
		||||
							{ prop: times + '_in', label: '投入数量', align: 'center' },
 | 
			
		||||
							{ prop: times + '_out', label: '产出数量', align: 'center' },
 | 
			
		||||
							{ prop: times + '_junk', label: '报废数量', align: 'center' },
 | 
			
		||||
							{ prop: times + '_area', label: '产出面积', align: 'center' }
 | 
			
		||||
						]
 | 
			
		||||
					}
 | 
			
		||||
					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 rowIndex = 0;
 | 
			
		||||
			for (const line of list) {
 | 
			
		||||
				const { productLine, specification, data } = line;
 | 
			
		||||
 | 
			
		||||
				// 设置span的行数
 | 
			
		||||
				this.spanInfo[rowIndex] = data.length;
 | 
			
		||||
				for (const equipment of data) {
 | 
			
		||||
					const { equipmentName, totalQuantity } = equipment;
 | 
			
		||||
					let row = {
 | 
			
		||||
						productLine,
 | 
			
		||||
						specification: specification.join('、'),
 | 
			
		||||
						equipmentName,
 | 
			
		||||
						totalQuantity,
 | 
			
		||||
					};
 | 
			
		||||
					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);
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			let sectionArr= []
 | 
			
		||||
			console.log('打印看下数据list', list)
 | 
			
		||||
			list.forEach((ele, index) => {
 | 
			
		||||
				let tempData = []
 | 
			
		||||
				ele.data.forEach(item => {
 | 
			
		||||
					item.children.forEach(params => {
 | 
			
		||||
						if (params.dynamicName === '投入数量') {
 | 
			
		||||
							tempData[item.dynamicName + '_in'] = params.dynamicValue
 | 
			
		||||
						} else if (params.dynamicName === '产出数量') {
 | 
			
		||||
							tempData[item.dynamicName + '_out'] = params.dynamicValue
 | 
			
		||||
						} else if (params.dynamicName === '报废数量') {
 | 
			
		||||
							tempData[item.dynamicName + '_junk'] = params.dynamicValue
 | 
			
		||||
						} else {
 | 
			
		||||
							tempData[item.dynamicName + '_area'] = params.dynamicValue
 | 
			
		||||
						}
 | 
			
		||||
					})
 | 
			
		||||
				})
 | 
			
		||||
				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 (this.spanInfo[rowIndex]) {
 | 
			
		||||
			if (columnIndex == 0) {
 | 
			
		||||
				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(() => {
 | 
			
		||||
 
 | 
			
		||||
@@ -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 };
 | 
			
		||||
      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(() => { });
 | 
			
		||||
      // 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(() => { });
 | 
			
		||||
    }
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user