ZW_MultiSelect/wms-vue/src/components/duochaxun/RongQi.vue

759 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="div1">
<div class="div2" style="padding-bottom: 10px">
<el-form ref="form" :model="param" label-width="80px">
<el-row>
<el-col :span="1">
<el-form-item label="波次号:">
<el-input type="textarea" v-model="param.wdCode" :rows="1" style="width: 280px;"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-button type="success" @click="find">查找</el-button>
<el-button type="success" @click="down">导出</el-button>
<el-button type="success" @click="rest">重置</el-button>&nbsp;&nbsp;
</el-form>
</div>
<el-table
v-loading="this.tableloding"
:data="rqMzList"
id="educe-table0"
ref="tableData"
border
style="width: 100%;">
<el-table-column prop="workstation" label="工作站/命中率" width="180"></el-table-column>
<el-table-column prop="g201.mz" label="201" width="50"></el-table-column>
<el-table-column prop="g202.mz" label="202" width="50"></el-table-column>
<el-table-column prop="g203.mz" label="203" width="50"></el-table-column>
<el-table-column prop="g204.mz" label="204" width="50"></el-table-column>
<el-table-column prop="g205.mz" label="205" width="50"></el-table-column>
<el-table-column prop="g206.mz" label="206" width="50"></el-table-column>
<el-table-column prop="g207.mz" label="207" width="50"></el-table-column>
<el-table-column prop="g208.mz" label="208" width="50"></el-table-column>
<el-table-column prop="g209.mz" label="209" width="50"></el-table-column>
<el-table-column prop="g210.mz" label="210" width="50"></el-table-column>
<el-table-column prop="g211.mz" label="211" width="50"></el-table-column>
<el-table-column prop="g212.mz" label="212" width="50"></el-table-column>
<el-table-column prop="g213.mz" label="213" width="50"></el-table-column>
<el-table-column prop="g214.mz" label="214" width="50"></el-table-column>
<el-table-column prop="g215.mz" label="215" width="50"></el-table-column>
<el-table-column prop="total.mz" label="平均值" width="60"></el-table-column>
</el-table>
<el-table
v-loading="this.tableloding"
:data="rqMzList"
id="educe-table1"
ref="tableData"
border
style="width: 100%;">
<el-table-column prop="workstation" label="工作站/任务行数" width="180"></el-table-column>
<el-table-column prop="g201.taskCount" label="201" width="50"></el-table-column>
<el-table-column prop="g202.taskCount" label="202" width="50"></el-table-column>
<el-table-column prop="g203.taskCount" label="203" width="50"></el-table-column>
<el-table-column prop="g204.taskCount" label="204" width="50"></el-table-column>
<el-table-column prop="g205.taskCount" label="205" width="50"></el-table-column>
<el-table-column prop="g206.taskCount" label="206" width="50"></el-table-column>
<el-table-column prop="g207.taskCount" label="207" width="50"></el-table-column>
<el-table-column prop="g208.taskCount" label="208" width="50"></el-table-column>
<el-table-column prop="g209.taskCount" label="209" width="50"></el-table-column>
<el-table-column prop="g210.taskCount" label="210" width="50"></el-table-column>
<el-table-column prop="g211.taskCount" label="211" width="50"></el-table-column>
<el-table-column prop="g212.taskCount" label="212" width="50"></el-table-column>
<el-table-column prop="g213.taskCount" label="213" width="50"></el-table-column>
<el-table-column prop="g214.taskCount" label="214" width="50"></el-table-column>
<el-table-column prop="g215.taskCount" label="215" width="50"></el-table-column>
<el-table-column prop="total.taskCount" label="汇总" width="60"></el-table-column>
</el-table>
<el-table
v-loading="this.tableloding"
:data="rqMzList"
id="educe-table2"
ref="tableData"
border
style="width: 100%;">
<el-table-column prop="workstation" label="工作站/容器流通次数" width="180"></el-table-column>
<el-table-column prop="g201.lxCount" label="201" width="50"></el-table-column>
<el-table-column prop="g202.lxCount" label="202" width="50"></el-table-column>
<el-table-column prop="g203.lxCount" label="203" width="50"></el-table-column>
<el-table-column prop="g204.lxCount" label="204" width="50"></el-table-column>
<el-table-column prop="g205.lxCount" label="205" width="50"></el-table-column>
<el-table-column prop="g206.lxCount" label="206" width="50"></el-table-column>
<el-table-column prop="g207.lxCount" label="207" width="50"></el-table-column>
<el-table-column prop="g208.lxCount" label="208" width="50"></el-table-column>
<el-table-column prop="g209.lxCount" label="209" width="50"></el-table-column>
<el-table-column prop="g210.lxCount" label="210" width="50"></el-table-column>
<el-table-column prop="g211.lxCount" label="211" width="50"></el-table-column>
<el-table-column prop="g212.lxCount" label="212" width="50"></el-table-column>
<el-table-column prop="g213.lxCount" label="213" width="50"></el-table-column>
<el-table-column prop="g214.lxCount" label="214" width="50"></el-table-column>
<el-table-column prop="g215.lxCount" label="215" width="50"></el-table-column>
<el-table-column prop="total.lxCount" label="汇总" width="60"></el-table-column>
</el-table>
<el-table
v-loading="this.tableloding"
:data="rqLtList"
id="educe-table3"
ref="tableData"
border
style="width: 100%;">
<el-table-column prop="workstation" label="工作站/子任务总数" width="180"></el-table-column>
<el-table-column prop="g201" label="201" width="50"></el-table-column>
<el-table-column prop="g202" label="202" width="50"></el-table-column>
<el-table-column prop="g203" label="203" width="50"></el-table-column>
<el-table-column prop="g204" label="204" width="50"></el-table-column>
<el-table-column prop="g205" label="205" width="50"></el-table-column>
<el-table-column prop="g206" label="206" width="50"></el-table-column>
<el-table-column prop="g207" label="207" width="50"></el-table-column>
<el-table-column prop="g208" label="208" width="50"></el-table-column>
<el-table-column prop="g209" label="209" width="50"></el-table-column>
<el-table-column prop="g210" label="210" width="50"></el-table-column>
<el-table-column prop="g211" label="211" width="50"></el-table-column>
<el-table-column prop="g212" label="212" width="50"></el-table-column>
<el-table-column prop="g213" label="213" width="50"></el-table-column>
<el-table-column prop="g214" label="214" width="50"></el-table-column>
<el-table-column prop="g215" label="215" width="50"></el-table-column>
<el-table-column prop="total" label="容器数" width="60"></el-table-column>
<!-- <el-table-column prop="lxCount" label="容器数" width="60"></el-table-column>-->
</el-table>
<div class="table-title" v-if="true">
<el-table
v-loading="this.tableloding"
:height="150"
:header-cell-style="{background:'#000',color:'#fff'}"
:data="tableData"
id="educe-table4"
ref="tableData"
show-summary
style="width: 100%;">
<el-table-column
fixed
label="容器/现有逻辑"
v-if="true"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.rqh }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="201"
prop="g201"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g201 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="202"
v-if="true"
prop="g202"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g202 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="203"
prop="g203"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g203 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="204"
prop="g204"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g204 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="205"
prop="g205"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g205 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="206"
v-if="true"
prop="g206"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g206 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="207"
prop="g207"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g207 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="208"
prop="g208"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g208 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="209"
prop="g209"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g209 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="210"
prop="g210"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g210 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="211"
prop="g211"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g211 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="212"
prop="g212"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g212 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="213"
prop="g213"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g213 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="214"
prop="g214"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g214 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="215"
prop="g215"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g215 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="汇总"
v-if="true"
prop="count"
width="80">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.count }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[ 50, 100, 200,500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-table
v-loading="this.tableloding"
:height="150"
:header-cell-style="{background:'#000',color:'#fff'}"
:data="tableData1"
id="educe-table5"
ref="tableData1"
show-summary
style="width: 100%;">
<el-table-column
fixed
label="容器/新逻辑"
v-if="true"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.rqh }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="201"
prop="g201"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g201 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="202"
v-if="true"
prop="g202"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g202 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="203"
prop="g203"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g203 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="204"
prop="g204"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g204 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="205"
prop="g205"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g205 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="206"
v-if="true"
prop="g206"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g206 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="207"
prop="g207"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g207 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="208"
prop="g208"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g208 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="209"
prop="g209"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g209 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="210"
prop="g210"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g210 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="211"
prop="g211"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g211 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="212"
prop="g212"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g212 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="213"
prop="g213"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g213 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="214"
prop="g214"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g214 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="215"
prop="g215"
v-if="true"
width="50">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.g215 }}</span>
</template>
</el-table-column>
<el-table-column
fixed
label="汇总"
v-if="true"
prop="count"
width="80">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.count }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[ 50, 100, 200,500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
import FileSaver from 'file-saver'
// eslint-disable-next-line no-unused-vars
import XLSX from 'xlsx'
export default {
data() {
return {
rqLtList: [],
rqMzList: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
tableloding: false,
isShow:false,//是否展示全部搜索条件
tableData: [],
tableData1: [],
pageSize: 50,
spanArr: [], //每行合并数
pos: 0, //角标索引
pageNum: 1,
total: 3,
//查询条件
param: {
wdCode: ''
},
loading: false,
checked: false,
}
},
computed:{
existingLogicTotal() {
return this.existingLogic.reduce((total, num) => total + num, 0);
},
headLogicTotal() {
return this.headLogic.reduce((total, num) => total + num, 0);
},
MaxHeight(){
return window.innerHeight - 240 +"px";
}
},
mounted: function () {
this.queryUser();
},
updated() {
// 每次更新会重新对 Table 进行重新布局
this.$nextTick(() => {
if (this.$refs.mutipleTable !== undefined) {
this.$refs.mutipleTable.doLayout()
}
})
},
methods: {
// 合并单元格样式,主要是针对要合并列的第一个单元格(有其他需要的可自行更改)
cellStyle({ row, column }) {
// 找到数组中列>1那一个单元格就是需要改变的样式
if (row['mergeData'][column.property] && row['mergeData'][column.property][1] && row['mergeData'][column.property][1] > 1) {
return { 'text-align': 'left' }
} else {
return {}
}
},
objectSpanMethod({ row, column }) {
// 直接返回后端给的对应字段的单元格数据
return row['mergeData'][column.property]
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
this.pageNum = 1;
this.pageSize = val;
this.queryUser();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.queryUser();
},
queryUser() {
//列表数据加载
this.$axios.post(this.$httpUrl + '/RongQi/queryList', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: this.param,
}).then(res => res.data)
.then(res => {
if (res.code == 200) {
console.log('rqList:', res.data.rqList);
console.log('rqeList:', res.data.rqeList);
this.tableData = res.data.rqList
this.tableData1 = res.data.rqeList
this.total = this.tableData.length
this.pageSize=this.tableData.length
this.rqLtList=res.data.rqLtList
this.rqMzList=res.data.rqMzList
console.log(this.rqMzList)
} else {
this.$message.error('获取数据失败');
}
// eslint-disable-next-line no-unused-vars
},err=>{
this.tableloding=false;
})
},
find(){
this.pageNum=1;
this.queryUser();
},
down(){
this.exportToExcel();
},
exportToExcel() {
const XLSX = require('xlsx');
const FileSaver = require('file-saver');
this.$nextTick(() => {
const workbook = XLSX.utils.book_new();
const tableIds = ['#educe-table0', '#educe-table1', '#educe-table2', '#educe-table3', '#educe-table4', '#educe-table5'];
const sheetNames = ['命中率', '任务行数', '容器流通数', '箱子数', '数据详情-现有逻辑', '数据详情-新逻辑'];
tableIds.forEach((tableId, index) => {
const tableElement = document.querySelector(tableId);
if (tableElement) {
// 去重逻辑
const uniqueRows = [];
const rows = tableElement.querySelectorAll('tr');
rows.forEach(row => {
const rowData = Array.from(row.cells).map(cell => cell.textContent);
if (!uniqueRows.some(uniqueRow => uniqueRow.join('') === rowData.join(''))) {
uniqueRows.push(rowData);
}
});
// 创建新的表格元素并添加去重后的数据
const newTable = document.createElement('table');
uniqueRows.forEach(rowData => {
const row = document.createElement('tr');
rowData.forEach(cellData => {
const cell = document.createElement('td');
cell.textContent = cellData;
row.appendChild(cell);
});
newTable.appendChild(row);
});
const worksheet = XLSX.utils.table_to_sheet(newTable, { raw: true });
XLSX.utils.book_append_sheet(workbook, worksheet, sheetNames[index]);
} else {
console.warn(`表格元素 ${tableId} 未找到,跳过导出。`);
}
});
const fileName = `容器流通_${new Date().getTime()}.xlsx`;
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
} catch (e) {
console.error('导出Excel文件失败:', e);
}
});
},
parseTime(time, cFormat) {
//获取当前时间
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'undefined' || time === null || time === 'null') {
return ''
} else if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
},
Allquesr(){
//查询按钮
if(this.checked){
this.isShow=true;
}else {
this.isShow=false;
}
},
rest() {
//条件查询重置
this.checked=false;
this.isShow=false;
this.param={};
}
}
}
</script>
<style scoped>
</style>