factory_web/src/views/ungrouped/costing.vue

413 lines
20 KiB
Vue

<!-- 成本分析 -->
<template>
<div class="app-container">
<el-header>
<div class="left-panel">
<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.day"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="日"
v-if="query.type==0||query.type==1"
/>
<!-- 选择班次 -->
<el-select
v-if="query.type==0"
v-model="query.shift"
placeholder="班次"
clearable
style="margin-left: 2px; width: 120px"
>
<el-option
v-for="item in optionsShift"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-date-picker
v-model="query.month"
type="month"
value-format="YYYY-MM"
format="YYYY-MM"
placeholder="月份"
v-if="query.type==2"
/>
<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">
<table border="1" cellspacing="0" :key="timeStamp" id="myTable">
<thead style="background: #efefef;height: 40px;">
<tr>
<th colspan="8">电石渣干粉核算</th>
</tr>
<tr>
<th>要素</th>
<th>类别</th>
<th>费用名称</th>
<th>实际产量</th>
<th>消耗量</th>
<th>单价</th>
<th>总成本</th>
<th>单位成本</th>
</tr>
</thead>
<tr v-for="(item,index) in tableDatas" :key="index">
<td class="numCell" v-if="index==0" rowspan="3">{{item[0]}}</td>
<td class="numCell" v-else-if="index==3" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==5" rowspan="8">{{item[0]}}</td>
<td class="numCell" v-else-if="index==13" colspan="3">{{item[0]}}</td>
<td class="numCell" v-if="index==1||index==7" rowspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==3||index==4" colspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==13" colspan="4">{{item[1]}}</td>
<td class="numCell" style="display: none;" v-else-if="index==2||index==8">{{item[1]}}</td>
<td class="numCell" v-else>{{item[1]}}</td>
<td class="numCell">{{item[2]}}</td>
<td class="numCell" v-if="index!==13">{{item[3]}}</td>
<td class="numCell" v-if="index!==13">{{item[4]}}</td>
<td class="numCell" v-if="index!==13">{{item[5]}}</td>
<td class="numCell" v-if="index!==13">{{item[6]}}</td>
<td class="numCell" style="display: none;" v-if="index==3||index==4||index==13">{{item[7]}}</td>
<td class="numCell" v-else>{{item[7]}}</td>
</tr>
</table>
<table border="1" cellspacing="0" :key="timeStamp" id="myTable2">
<thead style="background: #efefef;height: 40px;">
<tr>
<th colspan="8">生料核算</th>
</tr>
<tr>
<th>要素</th>
<th>类别</th>
<th>费用名称</th>
<th>实际产量</th>
<th>消耗量</th>
<th>单价</th>
<th>总成本</th>
<th>单位成本</th>
</tr>
</thead>
<tr v-for="(item,index) in tableDatas2" :key="index">
<td class="numCell" v-if="index==0" rowspan="6">{{item[0]}}</td>
<td class="numCell" v-else-if="index==6" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==8" rowspan="8">{{item[0]}}</td>
<td class="numCell" v-else-if="index==16" colspan="3">{{item[0]}}</td>
<td class="numCell" v-if="index==0" rowspan="4">{{item[1]}}</td>
<td class="numCell" v-else-if="index==4||index==10" rowspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==6||index==7" colspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==16" colspan="4">{{item[1]}}</td>
<td class="numCell" style="display: none;" v-else-if="index==1||index==2||index==3||index==5||index==11">{{item[1]}}</td>
<td class="numCell" v-else>{{item[1]}}</td>
<td class="numCell">{{item[2]}}</td>
<td class="numCell" v-if="index!==16">{{item[3]}}</td>
<td class="numCell" v-if="index!==16">{{item[4]}}</td>
<td class="numCell" v-if="index!==16">{{item[5]}}</td>
<td class="numCell" v-if="index!==16">{{item[6]}}</td>
<td class="numCell" style="display: none;" v-if="index==6||index==7||index==16">{{item[7]}}</td>
<td class="numCell" v-else>{{item[7]}}</td>
</tr>
</table>
<table border="1" cellspacing="0" :key="timeStamp" id="myTable3">
<thead style="background: #efefef;height: 40px;">
<tr>
<th colspan="8">熟料核算</th>
</tr>
<tr>
<th>要素</th>
<th>类别</th>
<th>费用名称</th>
<th>实际产量</th>
<th>消耗量</th>
<th>单价</th>
<th>总成本</th>
<th>单位成本</th>
</tr>
</thead>
<tr v-for="(item,index) in tableDatas3" :key="index">
<td class="numCell" v-if="index==0" rowspan="4">{{item[0]}}</td>
<td class="numCell" v-else-if="index==4" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==6" rowspan="8">{{item[0]}}</td>
<td class="numCell" v-else-if="index==14" colspan="3">{{item[0]}}</td>
<td class="numCell" v-if="index==2||index==8" rowspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==4||index==5" colspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==14" colspan="4">{{item[1]}}</td>
<td class="numCell" style="display: none;" v-else-if="index==3||index==9">{{item[1]}}</td>
<td class="numCell" v-else>{{item[1]}}</td>
<td class="numCell">{{item[2]}}</td>
<td class="numCell" v-if="index!==14">{{item[3]}}</td>
<td class="numCell" v-if="index!==14">{{item[4]}}</td>
<td class="numCell" v-if="index!==14">{{item[5]}}</td>
<td class="numCell" v-if="index!==14">{{item[6]}}</td>
<td class="numCell" style="display: none;" v-if="index==4||index==5||index==14">{{item[7]}}</td>
<td class="numCell" v-else>{{item[7]}}</td>
</tr>
</table>
<table border="1" cellspacing="0" :key="timeStamp" id="myTable4">
<thead style="background: #efefef;height: 40px;">
<tr>
<th colspan="8">水泥核算</th>
</tr>
<tr>
<th>要素</th>
<th>类别</th>
<th>费用名称</th>
<th>实际产量</th>
<th>消耗量</th>
<th>单价</th>
<th>总成本</th>
<th>单位成本</th>
</tr>
</thead>
<tr v-for="(item,index) in tableDatas4" :key="index">
<td class="numCell" v-if="index==0" rowspan="10">{{item[0]}}</td>
<td class="numCell" v-else-if="index==10" rowspan="2">{{item[0]}}</td>
<td class="numCell" v-else-if="index==12" rowspan="8">{{item[0]}}</td>
<td class="numCell" v-else-if="index==20" colspan="3">{{item[0]}}</td>
<td class="numCell" v-if="index==1" rowspan="4">{{item[1]}}</td>
<td class="numCell" v-else-if="index==8||index==5" rowspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==10||index==11" colspan="2">{{item[1]}}</td>
<td class="numCell" v-else-if="index==20" colspan="4">{{item[1]}}</td>
<td class="numCell" style="display: none;" v-else-if="index==2||index==3||index==6||index==4||index==9">{{item[1]}}</td>
<td class="numCell" v-else>{{item[1]}}</td>
<td class="numCell">{{item[2]}}</td>
<td class="numCell" v-if="index!==20">{{item[3]}}</td>
<td class="numCell" v-if="index!==20">{{item[4]}}</td>
<td class="numCell" v-if="index!==20">{{item[5]}}</td>
<td class="numCell" v-if="index!==20">{{item[6]}}</td>
<td class="numCell" style="display: none;" v-if="index==10||index==11||index==20">{{item[7]}}</td>
<td class="numCell" v-else>{{item[7]}}</td>
</tr>
</table>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
query:{
type:0,
day:'',
month:'',
shift:'',
},
tableName:'班组成本计算',
options:[
{id:0,name:'班统计'},
{id:1,name:'日统计'},
{id:2,name:'月统计'},
],
tableHead:['车间','工段','能源分类','1号','2号','3号','4号','5号','6号','7号','8号'],
tableDatas:[
['直接材料','原材料','湿电石渣',1,2,3,4,5],
['直接材料','电、水','动力电',1,2,3,4,5],
['直接材料','电、水','工业水',1,2,3,4,5],
['直接人工','车间人员工资','/','/','/','/',5],
['直接人工','车间人员工资','/','/','/','/',5],
['制造费用','倒运费用','倒运费用','/','/','/','/',5],
['制造费用','材料出库','物料消耗','/','/','/','/',5],
['制造费用','维修费用','检修','/','/','/','/',5],
['制造费用','维修费用','外协施工费用','/','/','/','/',5],
['制造费用','装卸费','装卸费 ','/','/','/','/',5],
['制造费用','差旅费','差旅费','/','/','/','/',5],
['制造费用','折旧','折旧','/','/','/','/',5],
['制造费用','摊销','无形资产摊销','/','/','/','/',5],
['成本合计','',''],
],
tableDatas2:[
['直接材料','原材料','干粉',1,2,3,4,5],
['直接材料','原材料','辅料',1,2,3,4,5],
['直接材料','原材料','粉煤灰',1,2,3,4,5],
['直接材料','原材料','电石厂除尘灰',1,2,3,4,5],
['直接材料','电、水','动力电',1,2,3,4,5],
['直接材料','电、水','工业水',1,2,3,4,5],
['直接人工','车间人员工资','/','/','/','/',5],
['直接人工','车间人员工资','/','/','/','/',5],
['制造费用','倒运费用','倒运费用','/','/','/','/',5],
['制造费用','材料出库','物料消耗','/','/','/','/',5],
['制造费用','维修费用','检修','/','/','/','/',5],
['制造费用','维修费用','外协施工费用','/','/','/','/',5],
['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
['制造费用','差旅费','差旅费','/','/','/','/',5],
['制造费用','折旧','折旧','/','/','/','/',5],
['制造费用','摊销','无形资产摊销','/','/','/','/',5],
['成本合计','',''],
],
tableDatas3:[
['直接材料','原材料','生料',1,2,3,4,5],
['直接材料','辅助材料','原煤',1,2,3,4,5],
['直接材料','电、水','动力电',1,2,3,4,5],
['直接材料','电、水','工业水',1,2,3,4,5],
['直接人工','车间人员工资','/','/','/','/',5],
['直接人工','车间人员工资','/','/','/','/',5],
['制造费用','倒运费用','倒运费用','/','/','/','/',5],
['制造费用','材料出库','物料消耗','/','/','/','/',5],
['制造费用','维修费用','检修','/','/','/','/',5],
['制造费用','维修费用','外协施工费用','/','/','/','/',5],
['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
['制造费用','差旅费','差旅费','/','/','/','/',5],
['制造费用','折旧','折旧','/','/','/','/',5],
['制造费用','摊销','无形资产摊销','/','/','/','/',5],
['成本合计','',''],
],
tableDatas4:[
['直接材料','原材料','熟料',1,2,3,4,5],
['直接材料','辅助材料','废石灰石粉',1,2,3,4,5],
['直接材料','辅助材料','脱硫石膏',1,2,3,4,5],
['直接材料','辅助材料','粉煤灰',1,2,3,4,5],
['直接材料','辅助材料','矿粉',1,2,3,4,5],
['直接材料','助剂','助磨剂',1,2,3,4,5],
['直接材料','助剂','缓凝剂',1,2,3,4,5],
['直接材料','包装','包装袋',1,2,3,4,5],
['直接材料','电、水','动力电',1,2,3,4,5],
['直接材料','电、水','工业水',1,2,3,4,5],
['直接人工','车间人员工资','/','/','/','/',5],
['直接人工','车间人员工资','/','/','/','/',5],
['制造费用','倒运费用','倒运费用','/','/','/','/',5],
['制造费用','材料出库','物料消耗','/','/','/','/',5],
['制造费用','维修费用','检修','/','/','/','/',5],
['制造费用','维修费用','外协施工费用','/','/','/','/',5],
['制造费用','装卸费 ','装卸费 ','/','/','/','/',5],
['制造费用','差旅费','差旅费','/','/','/','/',5],
['制造费用','折旧','折旧','/','/','/','/',5],
['制造费用','摊销','无形资产摊销','/','/','/','/',5],
['成本合计','',''],
],
optionsShift:[],
sourceData:{}
};
},
mounted() {
var myDate = new Date();
let month = myDate.getMonth()+1;
if(month<10){
month = '0'+month;
}
this.query.month = myDate.getFullYear()+'-'+month;
// this.getData();
this.getShift();
},
methods: {
getShift(){
this.$API.mtm.shift.req({page:0}).then(res=>{
this.optionsShift = res;
})
},
typeCange(value){
if(value==1){
this.tableName = '班组成本计算'
}else if(value==1){
this.tableName = '日成本计算'
}else{
this.tableName = '月成本计算'
}
},
getData(){
let that = this;
let params = {query:{}};
let id = '';
let arr = [];
if(that.query.type==0){//班
arr = that.query.month.split('-');
params.query.year_s = Number(arr[0]);
params.query.month_s = Number(arr[1]);
id='energy_day'
}else if(that.query.type==1){//日
params.query.year_s = Number(that.query.year);
id='energy_month'
}else{//月
params.query.year_s = Number(that.query.yearStart);
id='energy_year'
}
},
getTableData(){
this.getData();
},
handlePrint() {
this.$PRINT('#myReport');
},
exportExcel() {
this.exportLoading = true;
this.$XLSX('#myTable', this.tableName)
this.exportLoading = false;
},
}
};
</script>
<style>
.printContainer{
/* width: 1075px; */
}
#numTable{
margin-left: 37px;
}
#numTable td{
height: 32px;
padding-left: 5px;
}
.numCell{
width: 70px;
}
.numCell.numCell_last{
width: 80px;
}
.searchHead{
display:flex
}
.middleText{
height: 32px;
line-height: 32px;
margin: 0 5px;
display: inline-block;
}
.searchBtn{
margin-left: 5px;
}
#myTable,#myTable2,#myTable3,#myTable4{
display: inline-block;
}
</style>