|
|
@@ -14,7 +14,7 @@
|
|
|
:picker-options="pickerOptions"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
- <span>至</span>
|
|
|
+ <!-- <span>至</span>
|
|
|
<el-date-picker
|
|
|
v-model="endTime"
|
|
|
type="date"
|
|
|
@@ -22,7 +22,7 @@
|
|
|
style="width:140px"
|
|
|
:picker-options="pickerOptions1"
|
|
|
>
|
|
|
- </el-date-picker>
|
|
|
+ </el-date-picker> -->
|
|
|
<el-button type="primary" class="btn" @click="onclick">
|
|
|
<i class="el-icon-search"></i>
|
|
|
</el-button>
|
|
|
@@ -34,68 +34,117 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <div class="main">
|
|
|
+ <div class="main" id="excelDom">
|
|
|
<table class="title">
|
|
|
<th>{{ titleTXT }}钢材运输情况统计表</th>
|
|
|
</table>
|
|
|
<div class="null"></div>
|
|
|
- <el-table>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ ref="tableRef"
|
|
|
+ border
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ show-summary
|
|
|
+ >
|
|
|
<el-table-column
|
|
|
prop="carrierDirection"
|
|
|
label="承运方向"
|
|
|
align="center"
|
|
|
+ width="100"
|
|
|
+ column-key="carrierDirection"
|
|
|
+ key="carrierDirection"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="carrierLine" label="承运线路" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="carrierLine"
|
|
|
+ label="承运线路"
|
|
|
+ align="center"
|
|
|
+ column-key="carrierLine"
|
|
|
+ key="carrierLine"
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="carrier"
|
|
|
label="承运商"
|
|
|
align="center"
|
|
|
width="100"
|
|
|
+ column-key="carrier"
|
|
|
+ key="carrier"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="planTruckNumber"
|
|
|
label="销售下达计划(车)"
|
|
|
align="center"
|
|
|
+ column-key="planTruckNumber"
|
|
|
+ key="planTruckNumber"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="安排运力(车)" align="center">
|
|
|
- <el-table-column prop="arrageTruckNumber" label="安排" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="arrageTruckNumber"
|
|
|
+ label="安排"
|
|
|
+ align="center"
|
|
|
+ column-key="arrageTruckNumber"
|
|
|
+ key="arrageTruckNumber"
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="actuallyFinish"
|
|
|
label="实际完成"
|
|
|
align="center"
|
|
|
+ column-key="actuallyFinish"
|
|
|
+ key="actuallyFinish"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="enFactoryLoading"
|
|
|
label="进厂待装"
|
|
|
align="center"
|
|
|
+ column-key="enFactoryLoading"
|
|
|
+ key="enFactoryLoading"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="unEnfactory" label="未进厂" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="unEnfactory"
|
|
|
+ label="未进厂"
|
|
|
+ align="center"
|
|
|
+ column-key="unEnfactory"
|
|
|
+ key="unEnfactory"
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="unArragePlanTruckNumber"
|
|
|
label="欠运力"
|
|
|
align="center"
|
|
|
+ column-key="unArragePlanTruckNumber"
|
|
|
+ key="unArragePlanTruckNumber"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="remark" label="备注" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="remark"
|
|
|
+ label="备注"
|
|
|
+ align="center"
|
|
|
+ column-key="remark"
|
|
|
+ key="remark"
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <div class="remarkTitle"></div>
|
|
|
+ <table class="title">
|
|
|
+ <th>
|
|
|
+ 备注:以上计划不包含自提一车;不包含取消计划;与销售钢材报表过滤条件一致
|
|
|
+ </th>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { sjTime } from '@/utils/sharedJsFile'
|
|
|
-import table from '../../../../components/DilCommonUI/packages/table/src/table.vue'
|
|
|
+import FileSaver from 'file-saver'
|
|
|
export default {
|
|
|
- components: { table },
|
|
|
data() {
|
|
|
return {
|
|
|
pickerOptions: {
|
|
|
@@ -156,24 +205,411 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- startTime: new Date(),
|
|
|
- endTime: new Date(),
|
|
|
- titleTXT: null
|
|
|
+ startTime: new Date(new Date().getTime() - 86400000),
|
|
|
+ // endTime: new Date(),
|
|
|
+ titleTXT: null,
|
|
|
+ tableData: [],
|
|
|
+ sumList: [
|
|
|
+ 'planTruckNumber',
|
|
|
+ 'arrageTruckNumber',
|
|
|
+ 'actuallyFinish',
|
|
|
+ 'enFactoryLoading',
|
|
|
+ 'unEnfactory',
|
|
|
+ 'unArragePlanTruckNumber'
|
|
|
+ ],
|
|
|
+ spanArr: [],
|
|
|
+ mergeList: ['carrierDirection', 'carrier']
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.titleTXT = `${new Date(
|
|
|
- new Date().getTime() - 86400000
|
|
|
- ).getFullYear()}年${new Date(new Date().getTime() - 86400000).getMonth() +
|
|
|
- 1}月${new Date(
|
|
|
- new Date().getTime() - 86400000
|
|
|
- ).getDate()}日08:00 - ${new Date().getFullYear()}年${new Date().getMonth() +
|
|
|
- 1}月${new Date().getDate()}日08:00`
|
|
|
+ this.titleTXT = `${this.startTime.getFullYear()}年${this.startTime.getMonth() +
|
|
|
+ 1}月${this.startTime.getDate()}日08:00 - ${new Date(
|
|
|
+ sjTime(this.startTime) + 86400000
|
|
|
+ ).getFullYear()}年${new Date(sjTime(this.startTime) + 86400000).getMonth() +
|
|
|
+ 1}月${new Date(sjTime(this.startTime) + 86400000).getDate()}日08:00`
|
|
|
+ this.steelTransportReport()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ startTime() {
|
|
|
+ this.titleTXT = `${this.startTime.getFullYear()}年${this.startTime.getMonth() +
|
|
|
+ 1}月${this.startTime.getDate()}日08:00 - ${new Date(
|
|
|
+ sjTime(this.startTime) + 86400000
|
|
|
+ ).getFullYear()}年${new Date(
|
|
|
+ sjTime(this.startTime) + 86400000
|
|
|
+ ).getMonth() + 1}月${new Date(
|
|
|
+ sjTime(this.startTime) + 86400000
|
|
|
+ ).getDate()}日08:00`
|
|
|
+ }
|
|
|
+ // tableData: {
|
|
|
+ // immediate: true,
|
|
|
+ // handler() {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // const tds = this.$refs.tableRef.$el
|
|
|
+ // .querySelector('.el-table__footer-wrapper')
|
|
|
+ // .querySelector('.el-table__footer')
|
|
|
+ // console.log(tds)
|
|
|
+ // let cell = tds.rows[0].cells
|
|
|
+ // cell[1].style.display = 'none'
|
|
|
+ // cell[2].style.display = 'none'
|
|
|
+ // console.log(cell, 'cell')
|
|
|
+ // cell[0].colSpan = '3'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
- exportAllReportToExcel() {},
|
|
|
- onclick() {}
|
|
|
+ // exportAllReportToExcel() {},
|
|
|
+ exportAllReportToExcel() {
|
|
|
+ let tableTitle = this.titleTXT
|
|
|
+ //let tables = this.$refs.ship;//此处是拿表格document元素,也可以取父div的ref
|
|
|
+ let tables = document.getElementById('excelDom')
|
|
|
+ let table_book = XLSX.utils.table_to_book(tables)
|
|
|
+ console.log('table_book:', table_book)
|
|
|
+ console.log('sheet:', table_book.Sheets.Sheet1)
|
|
|
+ //限制单元格样式范围
|
|
|
+ let rangeList = [
|
|
|
+ 'A',
|
|
|
+ 'B',
|
|
|
+ 'C',
|
|
|
+ 'D',
|
|
|
+ 'E',
|
|
|
+ 'F',
|
|
|
+ 'G',
|
|
|
+ 'H',
|
|
|
+ 'I',
|
|
|
+ 'J',
|
|
|
+ 'K',
|
|
|
+ 'L',
|
|
|
+ 'M',
|
|
|
+ 'N',
|
|
|
+ 'O',
|
|
|
+ 'P',
|
|
|
+ 'Q',
|
|
|
+ ,
|
|
|
+ 'R',
|
|
|
+ 'S',
|
|
|
+ 'T',
|
|
|
+ 'U'
|
|
|
+ ]
|
|
|
+ //得到自定义过滤数组
|
|
|
+ // let filterList = this.exportFilter(table_book.Sheets.Sheet1)
|
|
|
+ // console.log('filterList:', filterList)
|
|
|
+ let flag = true
|
|
|
+ //这里遍历单元格给单元格对象设置属性,s为控制样式的属性
|
|
|
+ Object.keys(table_book.Sheets.Sheet1).forEach(key => {
|
|
|
+ if (key.indexOf('!') < 0 && rangeList.indexOf(this.getCol(key)) >= 0) {
|
|
|
+ table_book.Sheets.Sheet1[key].s = {
|
|
|
+ font: {
|
|
|
+ name: '宋体',
|
|
|
+ sz: 10
|
|
|
+ },
|
|
|
+ alignment: {
|
|
|
+ //对齐方式
|
|
|
+ horizontal: 'center', //水平居中
|
|
|
+ vertical: 'center', //竖直居中
|
|
|
+ wrapText: true //自动换行
|
|
|
+ },
|
|
|
+ border: {
|
|
|
+ // 设置边框
|
|
|
+ top: { style: 'thin' },
|
|
|
+ bottom: { style: 'thin' },
|
|
|
+ left: { style: 'thin' },
|
|
|
+ right: { style: 'thin' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //更改数字格式
|
|
|
+ if (flag && table_book.Sheets.Sheet1[key].t == 'n') {
|
|
|
+ table_book.Sheets.Sheet1[key].s.numFmt = '0.00'
|
|
|
+ }
|
|
|
+ //库存三列特殊对待
|
|
|
+ if (
|
|
|
+ table_book.Sheets.Sheet1[key].t == 's' &&
|
|
|
+ table_book.Sheets.Sheet1[key].v &&
|
|
|
+ (table_book.Sheets.Sheet1[key].v.includes('下游港口库存') ||
|
|
|
+ table_book.Sheets.Sheet1[key].v.includes('万港库存') ||
|
|
|
+ table_book.Sheets.Sheet1[key].v.includes('在途货物'))
|
|
|
+ ) {
|
|
|
+ flag = false //标识为不允许更改数字格式
|
|
|
+ table_book.Sheets.Sheet1[key].s = {
|
|
|
+ font: {
|
|
|
+ name: '宋体',
|
|
|
+ sz: 10
|
|
|
+ },
|
|
|
+ alignment: {
|
|
|
+ vertical: 'center',
|
|
|
+ wrapText: true
|
|
|
+ },
|
|
|
+ border: {
|
|
|
+ top: { style: 'thin' },
|
|
|
+ bottom: { style: 'thin' },
|
|
|
+ left: { style: 'thin' },
|
|
|
+ right: { style: 'thin' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //表头字体重新设置
|
|
|
+ table_book.Sheets.Sheet1['A1'].s.font = {
|
|
|
+ name: '宋体',
|
|
|
+ sz: 16,
|
|
|
+ bold: true
|
|
|
+ }
|
|
|
+ //画一个简报
|
|
|
+ this.drawExcel(table_book.Sheets.Sheet1)
|
|
|
+ //处理合并行样式
|
|
|
+ this.addRangeBorder(
|
|
|
+ table_book.Sheets.Sheet1['!merges'],
|
|
|
+ table_book.Sheets.Sheet1
|
|
|
+ )
|
|
|
+ console.log('sheet:', table_book.Sheets.Sheet1)
|
|
|
+ //导出
|
|
|
+ let table_write = XLSXStyle.write(table_book, {
|
|
|
+ type: 'binary',
|
|
|
+ bookType: 'xlsx'
|
|
|
+ })
|
|
|
+ try {
|
|
|
+ FileSaver.saveAs(
|
|
|
+ new Blob([this.bta(table_write)], {
|
|
|
+ type: 'application/octet-stream'
|
|
|
+ }),
|
|
|
+ tableTitle + '.xlsx'
|
|
|
+ )
|
|
|
+ } catch (e) {
|
|
|
+ if (typeof console !== 'undefined') console.log(e, table_write)
|
|
|
+ }
|
|
|
+ return table_write
|
|
|
+ },
|
|
|
+
|
|
|
+ onclick() {
|
|
|
+ this.axios
|
|
|
+ .post(
|
|
|
+ '/api/v1/tms/steelTransportReport?startTime=' +
|
|
|
+ sjTime(this.startTime) +
|
|
|
+ '&endTime=' +
|
|
|
+ sjTime(this.startTime)
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.tableData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ drawExcel(sheet) {
|
|
|
+ //画一个进口矿水联运情况简报
|
|
|
+ let style = {
|
|
|
+ font: {
|
|
|
+ name: '宋体',
|
|
|
+ sz: 10
|
|
|
+ },
|
|
|
+ alignment: {
|
|
|
+ //对齐方式
|
|
|
+ horizontal: 'center', //水平居中
|
|
|
+ vertical: 'center', //竖直居中
|
|
|
+ wrapText: true //自动换行
|
|
|
+ },
|
|
|
+ border: {
|
|
|
+ // 设置边框
|
|
|
+ top: { style: 'thin' },
|
|
|
+ bottom: { style: 'thin' },
|
|
|
+ left: { style: 'thin' },
|
|
|
+ right: { style: 'thin' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Object.keys(sheet).forEach(key => {
|
|
|
+ if (key.indexOf('!') < 0 && sheet[key].v == '万州港发货信息') {
|
|
|
+ let row = this.getRow(key)
|
|
|
+ console.log('万州港发货信息：', row)
|
|
|
+ //第一行表头
|
|
|
+ sheet['I' + row] = {
|
|
|
+ t: 's',
|
|
|
+ v: '进口矿水联运情况简报',
|
|
|
+ s: style
|
|
|
+ }
|
|
|
+ for (let i = row + 1; i < this.loadTable.length + row + 3; i++) {
|
|
|
+ sheet['I' + i] = {
|
|
|
+ t: 's',
|
|
|
+ v: '',
|
|
|
+ s: style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //表格合并
|
|
|
+ for (let i = row - 1; i < this.loadTable.length + row + 2; i++) {
|
|
|
+ sheet['!merges'].push({
|
|
|
+ s: {
|
|
|
+ r: i,
|
|
|
+ c: 8
|
|
|
+ },
|
|
|
+ e: {
|
|
|
+ r: i,
|
|
|
+ c: 15
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ exportFilter(sheet) {
|
|
|
+ //导出过滤方法
|
|
|
+ let keys = []
|
|
|
+ Object.keys(sheet).forEach(key => {
|
|
|
+ if (key.indexOf('!') < 0 && sheet[key].v == '万州港发货信息') {
|
|
|
+ let row = this.getRow(key)
|
|
|
+ console.log('万州港发货信息：', row)
|
|
|
+ for (let i = row; i < this.loadTable.length + row + 3; i++) {
|
|
|
+ keys.push('F' + i)
|
|
|
+ }
|
|
|
+ } else if (
|
|
|
+ key.indexOf('!') < 0 &&
|
|
|
+ sheet[key].v == '控制线等闸船舶动态'
|
|
|
+ ) {
|
|
|
+ let row = this.getRow(key)
|
|
|
+ console.log('控制线等闸船舶动态：', row)
|
|
|
+ for (let i = row; i < row + 2; i++) {
|
|
|
+ keys.push('Q' + i)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return keys
|
|
|
+ },
|
|
|
+ addRangeBorder(range, ws) {
|
|
|
+ let cols = [
|
|
|
+ 'A',
|
|
|
+ 'B',
|
|
|
+ 'C',
|
|
|
+ 'D',
|
|
|
+ 'E',
|
|
|
+ 'F',
|
|
|
+ 'G',
|
|
|
+ 'H',
|
|
|
+ 'I',
|
|
|
+ 'J',
|
|
|
+ 'K',
|
|
|
+ 'L',
|
|
|
+ 'M',
|
|
|
+ 'N',
|
|
|
+ 'O',
|
|
|
+ 'P',
|
|
|
+ 'Q',
|
|
|
+ 'R',
|
|
|
+ 'S',
|
|
|
+ 'T',
|
|
|
+ 'U',
|
|
|
+ 'V'
|
|
|
+ ]
|
|
|
+ range.forEach(item => {
|
|
|
+ let style = {
|
|
|
+ s: {
|
|
|
+ border: {
|
|
|
+ top: { style: 'thin' },
|
|
|
+ left: { style: 'thin' },
|
|
|
+ bottom: { style: 'thin' },
|
|
|
+ right: { style: 'thin' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 处理合并行
|
|
|
+ for (let i = item.s.c; i <= item.e.c; i++) {
|
|
|
+ ws[`${cols[i]}${Number(item.e.r) + 1}`] =
|
|
|
+ ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
|
|
|
+ // 处理合并列
|
|
|
+ for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
|
|
|
+ ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return ws
|
|
|
+ },
|
|
|
+ getRow(key) {
|
|
|
+ return parseInt(key.replace(/[^0-9]/gi, ''))
|
|
|
+ },
|
|
|
+ getCol(key) {
|
|
|
+ let row = key.replace(/[^0-9]/gi, '')
|
|
|
+ return key.replace(row, '')
|
|
|
+ },
|
|
|
+ appendOne(Sheet, row) {
|
|
|
+ //从后面新增1行，并行合并
|
|
|
+ let seArr = Sheet['!fullref'].split(':')
|
|
|
+ let length = parseInt(seArr[1].replace(/[^0-9]/gi, ''))
|
|
|
+ let endCol = seArr[1].replace(length, '')
|
|
|
+ //新增行
|
|
|
+ length++
|
|
|
+ Sheet['A' + length] = {
|
|
|
+ t: 's',
|
|
|
+ v: row
|
|
|
+ }
|
|
|
+ Sheet['!fullref'] = seArr[0] + ':' + endCol + length
|
|
|
+ Sheet['!ref'] = seArr[0] + ':' + endCol + length
|
|
|
+ //行合并
|
|
|
+ Sheet['!merges'].push({
|
|
|
+ s: {
|
|
|
+ c: 0,
|
|
|
+ r: length - 1
|
|
|
+ },
|
|
|
+ e: {
|
|
|
+ c: 21,
|
|
|
+ r: length - 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return Sheet
|
|
|
+ },
|
|
|
+ steelTransportReport() {
|
|
|
+ this.axios
|
|
|
+ .post(
|
|
|
+ '/api/v1/tms/steelTransportReport?startTime=' +
|
|
|
+ sjTime(this.startTime) +
|
|
|
+ '&endTime=' +
|
|
|
+ sjTime(this.startTime)
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.tableData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (
|
|
|
+ column.property == 'arrivalAddress' ||
|
|
|
+ column.property == 'receiptAddress'
|
|
|
+ ) {
|
|
|
+ return { height: '40px' }
|
|
|
+ } else {
|
|
|
+ return { height: '40px' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSummaries(param) {
|
|
|
+ const { columns, data } = param
|
|
|
+ const sums = []
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ console.log(column, index)
|
|
|
+ //如果索引值为0,则展示‘合计’
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = '合计'
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (index === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.sumList.includes(column.property)) {
|
|
|
+ const values = data.map(item => Number(item[column.property]))
|
|
|
+ if (!values.every(value => isNaN(value))) {
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr)
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return prev + curr
|
|
|
+ } else {
|
|
|
+ return prev
|
|
|
+ }
|
|
|
+ }, 0)
|
|
|
+ sums[index] = sums[index]
|
|
|
+ // console.log("sums");
|
|
|
+ // console.log(sums[index]);
|
|
|
+ } else {
|
|
|
+ sums[index] = 'N/A'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //遍历数组,找到符合条件的列
|
|
|
+ })
|
|
|
+ return sums
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
luobang