363 lines
16 KiB
Vue
363 lines
16 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-select
|
|
v-model="query.belong_dept"
|
|
placeholder="车间"
|
|
clearable
|
|
@change="deptChange"
|
|
class="headerSearch"
|
|
>
|
|
<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
|
|
class="headerSearch"
|
|
@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="年份"
|
|
class="headerSearch"
|
|
v-if="query.type==1"
|
|
/>
|
|
<el-date-picker
|
|
v-model="query.month"
|
|
type="month"
|
|
value-format="YYYY-MM"
|
|
format="YYYY-MM"
|
|
placeholder="月份"
|
|
class="headerSearch"
|
|
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"
|
|
v-auth="'export_excel'"
|
|
>导出xlsx
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="handlePrint"
|
|
>打印
|
|
</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-card style="margin-top:5px">
|
|
<div class="tableContainer">
|
|
<table border="1" cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
|
|
<thead class="myTableHead">
|
|
<tr>
|
|
<th rowspan="41">日期</th>
|
|
<th :colspan="header4.length">{{tableName}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th :colspan="item2.lengths*4" v-for="(item2,index) in header2Obj" :key="index">{{ item2.name }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="4" v-for="item3 in header3" :key="item3">{{item3}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th v-for="item4 in header4" :key="item4">{{item4}}</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:'',
|
|
deptName:'',
|
|
typeName:'质检日报表',
|
|
tableName:'',
|
|
tableDatas:[
|
|
['原料车间','辅料','细度', , , , , , ],
|
|
['原料车间','辅料','Fe2O3', , , , , , ],
|
|
['原料车间','辅料','水分', , , , , , ],
|
|
['原料车间','干混生料','细度', , , , , , ],
|
|
['原料车间','干混生料','Fe2O3', , , , , , ],
|
|
['原料车间','干混生料','水分', , , , , , ],
|
|
['原料车间','干混生料','CaO', , , , , , ],
|
|
|
|
['烧成车间','入窑生料','CaO', , , , , , ],
|
|
['烧成车间','入窑生料','Fe2O3', , , , , , ],
|
|
['烧成车间','入窑生料','细度'],
|
|
['烧成车间','入窑生料','水分'],
|
|
['烧成车间','熟料','立升重'],
|
|
['烧成车间','熟料','f-CaO'],
|
|
['烧成车间','煤粉','细度'],
|
|
['烧成车间','煤粉','水分'],
|
|
|
|
['水泥车间','出磨水泥','比表面积'],
|
|
['水泥车间','出磨水泥','SO3'],
|
|
['水泥车间','出磨水泥','掺量'],
|
|
],
|
|
tableDatas3:[],
|
|
exportLoading:false,
|
|
header2:[],
|
|
header3:[],
|
|
header4:[],
|
|
tableData:[],
|
|
header2Obj:[],
|
|
deptOptions:[],
|
|
};
|
|
},
|
|
watch: {
|
|
header3: {
|
|
handler(newV, OldV) {
|
|
this.header3 = newV;
|
|
}
|
|
}
|
|
},
|
|
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.month = myDate.getFullYear()+'-'+month
|
|
this.query.day = myDate.getFullYear()+'-'+month+'-'+days;
|
|
this.getGroup();
|
|
},
|
|
methods: {
|
|
typeCange(value){
|
|
let that = this;
|
|
if(value==1){
|
|
this.typeName = '质检日报表'
|
|
}else if(value==1){
|
|
this.typeName = '质检月报表'
|
|
}
|
|
that.tableName = that.deptName+that.typeName;
|
|
},
|
|
deptChange(e){
|
|
let that = this;
|
|
that.deptOptions.forEach(item=>{
|
|
if(item.id==e){
|
|
that.deptName = item.name;
|
|
that.tableName = item.name+that.typeName;
|
|
}
|
|
})
|
|
},
|
|
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.tableName =that.deptName+that.typeName;
|
|
that.query.belong_dept = res.results[0].id;
|
|
this.getTableData();
|
|
});
|
|
},
|
|
getTableData(){
|
|
let that = this;
|
|
that.tableDatas3 = [];
|
|
|
|
that.header3 = [];
|
|
if(that.deptName=='原料车间'){
|
|
that.header2Obj=[{name:'辅料',lengths:3},{name:'干混生料',lengths:4}];
|
|
that.header2 = ['辅料','干混生料'];//物料
|
|
// that.header3 = ['细度','Fe2O3','水分','细度','Fe2O3','水分','CaO'];//检测项
|
|
that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
|
|
}else if(that.deptName=='烧成车间'){
|
|
that.header2Obj=[{name:'入窑生料',lengths:4},{name:'熟料',lengths:4}];
|
|
that.header2 = ['入窑生料','熟料'];//物料
|
|
// that.header3 = ['CaO','Fe2O3','细度','水分','立升重','f-CaO','细度','水分'];//检测项
|
|
that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
|
|
}else{
|
|
that.header2Obj=[{name:'出磨水泥',lengths:3}];
|
|
that.header2 = ['出磨水泥'];//物料
|
|
// that.header3 = ['比表面积','SO3','掺量'];//检测项
|
|
that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
|
|
}
|
|
let params = {page: 0};
|
|
let arr = [];
|
|
if(that.query.type==0){//日
|
|
console.log(that.query.month)
|
|
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;
|
|
this.$API.enm.enstat.req(params).then((res) => {
|
|
let data = res;
|
|
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
|
|
})
|
|
console.log(wrapArr,'warpArr')
|
|
wrapArr.forEach((item1,index1)=>{
|
|
if(item1!=undefined){//一天的数据
|
|
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)
|
|
//遍历每个工段
|
|
console.log(item1)
|
|
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);
|
|
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).toFixed(2);
|
|
pass= pass+'%';
|
|
itemArr.push(pass)
|
|
}else{
|
|
itemArr.push(Number(item3.val_avg).toFixed(2));
|
|
itemArr.push(item3.num_test);
|
|
itemArr.push(item3.num_ok)
|
|
let pass = Number(item3.rate_pass).toFixed(2);
|
|
pass= pass+'%';
|
|
itemArr.push(pass)
|
|
}
|
|
that.titleLength =itemArr.length;
|
|
})
|
|
})
|
|
innerArr.push(itemArr)
|
|
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;
|
|
}
|
|
}
|
|
})
|
|
if(header2Obj.length>0){
|
|
that.header2Obj=header2Obj;
|
|
}
|
|
that.header2 = header2.length>0?header2:that.header2;//物料
|
|
if(header3.length>0){
|
|
that.header3 =header3;//检测项
|
|
}
|
|
if(header4.length>0){
|
|
that.header4 = header4;
|
|
}
|
|
this.$forceUpdate();
|
|
innerArr.forEach(item=>{
|
|
if(item.length>1){
|
|
that.tableDatas3.push(item)
|
|
}
|
|
})
|
|
});
|
|
},
|
|
handlePrint() {
|
|
this.$PRINT('#myReport');
|
|
},
|
|
exportExcel() {
|
|
this.exportLoading = true;
|
|
this.$XLSX('#myTable', this.tableName)
|
|
this.exportLoading = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.tableContainer{
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
</style> |