459 lines
21 KiB
Vue
459 lines
21 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-select
|
|
v-model="query.belong_dept"
|
|
placeholder="车间"
|
|
clearable
|
|
style="margin-left: 2px; width: 200px"
|
|
>
|
|
<el-option
|
|
v-for="item in deptOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model="query.type"
|
|
placeholder="查询类型"
|
|
clearable
|
|
@change="typeCange"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<el-date-picker
|
|
v-model="query.year"
|
|
type="year"
|
|
value-format="YYYY"
|
|
format="YYYY"
|
|
placeholder="年份"
|
|
v-if="query.type==1"
|
|
/>
|
|
<el-date-picker
|
|
v-model="query.month"
|
|
type="month"
|
|
value-format="YYYY-MM"
|
|
format="YYYY-MM"
|
|
placeholder="月份"
|
|
v-if="query.type==0"
|
|
/>
|
|
|
|
<!-- <el-date-picker
|
|
v-model="query.day"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
placeholder="日"
|
|
v-if="query.type==0"
|
|
/> -->
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="getTableData"
|
|
></el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="exportExcel()"
|
|
:loading = "exportLoading"
|
|
>导出xlsx
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="handlePrint"
|
|
>打印
|
|
</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-card style="margin-top:5px">
|
|
<!-- <div ref="print" id="myReport" class="printContainer">
|
|
<h3 style="text-align: center;">{{tableTime}}</h3>
|
|
<table border="1" cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
|
|
<thead class="myTableHead">
|
|
<tr colspan="7"> <th colspan="7">{{tableName}}</th></tr>
|
|
<tr>
|
|
<template v-for="(date,ind) in tableHead" :key="ind">
|
|
<th>{{date}}</th>
|
|
</template>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="(item,index) in tableDatas" :key="index">
|
|
|
|
<td v-if="index==0" rowspan="7">{{item[0]}}</td>
|
|
<td v-else-if="index==7" rowspan="8">{{item[0]}}</td>
|
|
<td v-else-if="index==15" rowspan="3">{{item[0]}}</td>
|
|
<td class="numCell" v-if="index==11||index==13" rowspan="2">{{item[1]}}</td>
|
|
<td class="numCell" v-if="index==0||index==15" rowspan="3">{{item[1]}}</td>
|
|
<td class="numCell" v-else-if="index==3||index==7" rowspan="4">{{item[1]}}</td>
|
|
<td class="numCell">{{item[2]}}</td>
|
|
<td class="numCell">{{item[3]}}</td>
|
|
<td class="numCell">{{item[4]}}</td>
|
|
<td class="numCell">{{item[5]}}</td>
|
|
<td class="numCell">{{item[6]}}</td>
|
|
</tr>
|
|
</table>
|
|
</div> -->
|
|
<div class="tableContainer">
|
|
<table border="1" cellspacing="0" :key="timeStamp" id="myTable1" class="myTable">
|
|
<thead class="myTableHead">
|
|
<tr>
|
|
<th :colspan="titleLength">{{ tableName }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th rowspan="41">日期</th>
|
|
<th :colspan="header4.length">{{deptName}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th :colspan="item.lengths*4" v-for="(item,index) in header2Obj" :key="index">{{ item.name }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="4" v-for="item in header3" :key="item">{{item}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th v-for="item in header4" :key="item">{{item}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="(item,index) in tableDatas3" :key="index">
|
|
<td v-for="(item1,index1) in item" :key="index1" class="numCell">{{item1}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
timeStamp:0,
|
|
query:{
|
|
type:0,
|
|
year:'',
|
|
month:'',
|
|
search_type:'',
|
|
},
|
|
options:[
|
|
{id:0,name:'日报表'},
|
|
{id:1,name:'月报表'},
|
|
],
|
|
titleLength:1,
|
|
mgroupOptions:[],
|
|
tableTime:'',
|
|
tableName:'质检日报表',
|
|
tableHead:['车间','物料','检验项目','平均值','检次','合次','合格率'],
|
|
tableDatas:[
|
|
['原料车间','辅料','细度', , , , , , ],
|
|
['原料车间','辅料','Fe2O3', , , , , , ],
|
|
['原料车间','辅料','水分', , , , , , ],
|
|
['原料车间','干混生料','细度', , , , , , ],
|
|
['原料车间','干混生料','Fe2O3', , , , , , ],
|
|
['原料车间','干混生料','水分', , , , , , ],
|
|
['原料车间','干混生料','CaO', , , , , , ],
|
|
|
|
['烧成车间','入窑生料','CaO', , , , , , ],
|
|
['烧成车间','入窑生料','Fe2O3', , , , , , ],
|
|
['烧成车间','入窑生料','细度'],
|
|
['烧成车间','入窑生料','水分'],
|
|
['烧成车间','熟料','立升重'],
|
|
['烧成车间','熟料','f-CaO'],
|
|
['烧成车间','煤粉','细度'],
|
|
['烧成车间','煤粉','水分'],
|
|
|
|
['水泥车间','出磨水泥','比表面积'],
|
|
['水泥车间','出磨水泥','SO3'],
|
|
['水泥车间','出磨水泥','掺量'],
|
|
],
|
|
exportLoading:false,
|
|
header2:[],
|
|
header3:[],
|
|
header4:[],
|
|
tableData:[],
|
|
header2Obj:[],
|
|
deptOptions:[],
|
|
arrLength:[0,0,0],
|
|
};
|
|
},
|
|
mounted() {
|
|
var myDate = new Date();
|
|
let month = myDate.getMonth()+1;
|
|
let days = myDate.getDate()-1;
|
|
if(month<10){
|
|
month = '0'+month;
|
|
}
|
|
if(days<10){
|
|
days = '0'+days;
|
|
}
|
|
this.query.day = myDate.getFullYear()+'-'+month+'-'+days;
|
|
this.getGroup();
|
|
},
|
|
methods: {
|
|
typeCange(value){
|
|
if(value==1){
|
|
this.tableName = '质检日报表'
|
|
}else if(value==1){
|
|
this.tableName = '质检月报表'
|
|
}else{
|
|
this.tableName = '质检年报表'
|
|
}
|
|
},
|
|
deptChange(e){
|
|
let that = this;
|
|
that.deptOptions.forEach(item=>{
|
|
if(item.id==e){
|
|
that.deptName = item.name;
|
|
}
|
|
})
|
|
},
|
|
getGroup() {
|
|
let that = this;
|
|
that.$API.system.dept.list.req({ page_size: 3 , type:'dept'}).then(res=>{
|
|
that.deptOptions = res.results;
|
|
that.deptName = res.results[0].name;
|
|
that.query.belong_dept = res.results[0].id;
|
|
this.getTableData();
|
|
});
|
|
},
|
|
getTableData(){
|
|
let that = this;
|
|
that.tableDatas3 = [];
|
|
that.header2Obj=[];
|
|
that.header2 = [];//物料
|
|
that.header3 = [];//检测项
|
|
that.header4 = [];//检测项
|
|
let params = {};
|
|
let arr = [];
|
|
if(that.query.type==0){//日
|
|
arr = that.query.month.split('-');
|
|
params.year_s = arr[0];
|
|
params.month_s = arr[1];
|
|
params.type = 'day_s'
|
|
}else if(that.query.type==1){//月
|
|
params.type = 'month_s'
|
|
params.year_s = that.query.year;
|
|
}
|
|
params.mgroup__belong_dept = that.query.belong_dept;
|
|
// that.$API.enm.enstat.req(params).then(res=>{
|
|
// let data = res.results;
|
|
// let list = [];
|
|
// data.forEach(item => {
|
|
// let index = item.day_s;
|
|
// if(list[index]){}else{
|
|
// list[index] = [];
|
|
// }
|
|
// list[index].push(item);
|
|
// })
|
|
// let header2=[],header2Obj=[],header3=[],header4=[];
|
|
// list = list.filter(item=>{
|
|
// return item
|
|
// })
|
|
// console.log(list)
|
|
// console.log('000000000000000')
|
|
// //list按天分好的数组
|
|
// list.forEach((item0,index0)=>{
|
|
// //data1某一天的数据
|
|
// let data1 = item0;
|
|
// let dayData=[],wrapData = [[],[],[]];
|
|
// dayData[0]= data1[0].day_s!=null?data1[0].year_s+'.'+data1[0].month_s+'.'+data1[0].day_s:data1[0].year_s+'.'+data1[0].month_s;
|
|
// data1.forEach(item1 => {
|
|
// if(item1.belong_dept_name=='原料车间'){
|
|
// wrapData[0].push(item1)
|
|
// }else if(item1.belong_dept_name=='烧成车间'){
|
|
// wrapData[1].push(item1)
|
|
// }else if(item1.belong_dept_name=='水泥车间'){
|
|
// wrapData[2].push(item1)
|
|
// }
|
|
// });
|
|
// //wrapData按车间分的数组
|
|
// for(let i=0;i<wrapData.length;i++){
|
|
// let data2 = wrapData[i];
|
|
// //一个车间的数据
|
|
// for(let j=0;j<data2.length;j++){
|
|
// //一个工段的检测项目
|
|
// let data3 = data2[j].qua_data;
|
|
// //四个工段
|
|
// data3.forEach(item3=>{
|
|
// if(index0==0){
|
|
// header3.push(item3.testitem_name)
|
|
// if(header2.indexOf(item3.material_name)>-1){
|
|
// let indexObj = header2.indexOf(item3.material_name);
|
|
// header2Obj[indexObj].length = header2Obj[indexObj].length+1;
|
|
// }else{
|
|
// header2.push(item3.material_name);
|
|
// header2Obj.push({name:item3.material_name,length:1})
|
|
// }
|
|
// console.log(header2)
|
|
// console.log(header2Obj)
|
|
// header4.push('平均值')
|
|
// header4.push('检次')
|
|
// header4.push('合次')
|
|
// header4.push('及格率')
|
|
// }
|
|
// dayData.push(item3.val_avg)
|
|
// dayData.push(item3.num_test)
|
|
// dayData.push(item3.num_ok)
|
|
// let pass = item3.rate_pass*100+'%'
|
|
// dayData.push(pass)
|
|
// })
|
|
// }
|
|
// }
|
|
// if(index0==0){
|
|
// that.header2Obj=header2Obj;
|
|
// that.header2 = header2;//物料
|
|
// that.header3 = header3;//检测项
|
|
// that.header4 = header4;//检测项
|
|
// console.log(header2)
|
|
// console.log(header3)
|
|
// console.log(header4)
|
|
// }
|
|
// that.tableData.push(dayData)
|
|
// })
|
|
// // debugger;
|
|
// // console.log(that.tableData)
|
|
// // that.time =
|
|
// // that.tableName = res.name;
|
|
// // let data = res.data.ds0;
|
|
// // that.tableHead = data[0];
|
|
// // that.tableDatas = data.slice(1,data.length);
|
|
// // for(let i=0;i<that.tableDatas.length;i++){
|
|
// // that.tableDatas[i][3] = that.tableDatas[i][3].tofixed(2);
|
|
// // that.tableDatas[i][4] = that.tableDatas[i][4].tofixed(2);
|
|
// // that.tableDatas[i][5] = that.tableDatas[i][5].tofixed(2);
|
|
// // that.tableDatas[i][6] = that.tableDatas[i][6].tofixed(2);
|
|
// // }
|
|
// // that.tableDatas;
|
|
// })
|
|
this.$API.enm.enstat.req(params).then((res) => {
|
|
let data = res.results;
|
|
let wrapArr = [];
|
|
let innerArr = [];
|
|
let ind = 0;
|
|
//1、将相同日期或月份/年份的数据放到一组
|
|
let header2=[],header2Obj=[],header3=[],header4=[];
|
|
data.forEach(item => {
|
|
if(that.query.type==0){//日统计
|
|
ind = item.day_s-1;
|
|
}else if(that.query.type==1){//月统计
|
|
ind = item.month_s-1;
|
|
}
|
|
if(wrapArr[ind]){
|
|
}else{
|
|
wrapArr[ind] = [];
|
|
}
|
|
if(that.deptName=='原料车间'){
|
|
wrapArr[ind].push(item)
|
|
}else if(that.deptName=='烧成车间'){
|
|
if(item.mgroup_name=='回转窑'){
|
|
wrapArr[ind][1]=item
|
|
}else{
|
|
wrapArr[ind][0]=item
|
|
}
|
|
}else{
|
|
wrapArr[ind].push(item)
|
|
}
|
|
});
|
|
wrapArr = wrapArr.filter(item=>{
|
|
return item
|
|
})
|
|
wrapArr.forEach((item1,index1)=>{
|
|
if(item1!=undefined){
|
|
console.log(item1)//一天的数据
|
|
let itemArr = [];
|
|
let header2tem=[],header2Objtem=[],header3tem=[],header4tem=[];
|
|
let time =item1[0].day_s!=null? item1[0].year_s+'.'+item1[0].month_s+'.'+item1[0].day_s:item1[0].year_s+'.'+item1[0].month_s;
|
|
itemArr.push(time)
|
|
//遍历每个工段
|
|
item1.forEach(item2=>{
|
|
let data2 =item2.qua_data;
|
|
//遍历一个工段的物料检验数据
|
|
data2.forEach((item3,index3)=>{
|
|
//item3一个检验数据
|
|
if(header2tem.indexOf(item3.material_name)>-1){
|
|
let indexObj = header2tem.indexOf(item3.material_name);
|
|
header2Objtem[indexObj].lengths = header2Objtem[indexObj].lengths+1;
|
|
}else{
|
|
header2tem.push(item3.material_name);
|
|
header2Objtem.push({name:item3.material_name,lengths:1})
|
|
}
|
|
header3tem.push(item3.testitem_name)
|
|
header4tem.push('平均值')
|
|
header4tem.push('检次')
|
|
header4tem.push('合次')
|
|
header4tem.push('及格率')
|
|
let indexObj = header2tem.indexOf(item3.material_name);
|
|
debugger;
|
|
if(indexObj>0&&index3==0){
|
|
let inde = indexObj-1;
|
|
let ind =header2Objtem[inde].lengths*4+1;
|
|
itemArr[ind] = item3.val_avg.toFixed(2);
|
|
itemArr.push(item3.num_test)
|
|
itemArr.push(item3.num_ok)
|
|
let pass = (item3.rate_pass*100).toFixed(2);
|
|
pass= pass+'%';
|
|
itemArr.push(pass)
|
|
}else{
|
|
itemArr.push(item3.val_avg.toFixed(2))
|
|
itemArr.push(item3.num_test)
|
|
itemArr.push(item3.num_ok)
|
|
let pass = (item3.rate_pass*100).toFixed(2);
|
|
pass= pass+'%';
|
|
itemArr.push(pass)
|
|
}
|
|
that.titleLength =itemArr.length;
|
|
})
|
|
})
|
|
innerArr.push(itemArr)
|
|
console.log('0000000000000');
|
|
console.log(itemArr);
|
|
console.log(header2tem);
|
|
console.log(header2Objtem);
|
|
console.log(header3tem);
|
|
console.log(header4tem);
|
|
console.log('1111111111111');
|
|
if(header2tem.length>header2.length){
|
|
header2 = header2tem;
|
|
}
|
|
if(header2Objtem.length>header2Obj.length){
|
|
header2Obj=header2Objtem;
|
|
}
|
|
if(header3tem.length>header3.length){
|
|
header3 = header3tem;
|
|
}
|
|
if(header4tem.length>header4.length){
|
|
header4 = header4tem;
|
|
}
|
|
}
|
|
})
|
|
that.tableDatas3 = innerArr;
|
|
that.header2Obj=header2Obj;
|
|
that.header2 = header2;//物料
|
|
that.header3 = header3;//检测项
|
|
that.header4 = header4;//检测项
|
|
});
|
|
},
|
|
handlePrint() {
|
|
this.$PRINT('#myReport');
|
|
},
|
|
exportExcel() {
|
|
this.exportLoading = true;
|
|
this.$XLSX('#myTable', this.tableName)
|
|
this.exportLoading = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.printContainer{
|
|
width: 1075px;
|
|
}
|
|
.tableContainer{
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
</style> |