224 lines
7.9 KiB
Vue
224 lines
7.9 KiB
Vue
<!-- 成本分析 -->
|
|
<template>
|
|
<el-container class="app-container">
|
|
<el-header>
|
|
<div>
|
|
<el-select v-model="query.mgroup" placeholder="工段" clearable @change="mgroupChange" class="headerSearch">
|
|
<el-option v-for="item in mgroupOptions" :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.shift"
|
|
type="datetime"
|
|
value-format="YYYY-MM-DD"
|
|
format="YYYY-MM-DD"
|
|
placeholder="班次"
|
|
class="headerSearch"
|
|
v-if="query.type == 0"
|
|
/>
|
|
<el-date-picker
|
|
v-model="value1"
|
|
type="datetimerange"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
placeholder="日"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
v-if="query.type == 1"
|
|
style="width: 300px;"
|
|
/>
|
|
<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-main>
|
|
<scTable
|
|
ref="stlogTable"
|
|
:apiObj="apiObjStlog"
|
|
:query="query"
|
|
:params="params"
|
|
row-key="id"
|
|
>
|
|
<el-table-column type="index" width="100" />
|
|
<el-table-column
|
|
label="异常类别"
|
|
prop="duration"
|
|
>
|
|
<template #default="scope">
|
|
<span v-if="scope.row.is_shutdown"
|
|
>停机</span
|
|
>
|
|
<span v-else>其他</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="发生时间"
|
|
prop="start_time"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="结束时间"
|
|
prop="end_time"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="原因类别"
|
|
prop="cate"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="异常名称"
|
|
prop="title"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="事件原因"
|
|
prop="reason"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="处置措施"
|
|
prop="measure"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="停机时长"
|
|
prop="duration"
|
|
></el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
query: {
|
|
type: 1,
|
|
month: '',
|
|
year: '',
|
|
mgroup: '',
|
|
start_time__gt: '',
|
|
start_time__lt: '',
|
|
shift: '',
|
|
},
|
|
params:{
|
|
mgroup: "",
|
|
start_time__gt: '',
|
|
start_time__lt: '',
|
|
},
|
|
value1:[],
|
|
materialList: [],
|
|
mgroupOptions: [],
|
|
tableName: '班组成本计算',
|
|
options: [
|
|
// { id: 0, name: '班统计' },
|
|
{ id: 1, name: '日统计' },
|
|
{ id: 2, name: '月统计' },
|
|
],
|
|
tableNmae: '',
|
|
tableData1: [],
|
|
apiObjStlog: null,
|
|
sourceData: {}
|
|
};
|
|
},
|
|
mounted() {
|
|
var myDate = new Date();
|
|
let month = myDate.getMonth() + 1;
|
|
if (month < 10) {
|
|
month = '0' + month;
|
|
}
|
|
this.getShift();
|
|
this.getMgroup();
|
|
|
|
},
|
|
methods: {
|
|
//获取工段列表
|
|
getMgroup() {
|
|
this.$API.mtm.mgroup.list.req({ page: 0, cate: 'section' }).then(res => {
|
|
res.forEach(item => {
|
|
this.mgroupOptions.push(item);
|
|
})
|
|
this.mgroupOptions = this.mgroupOptions.reverse();
|
|
this.query.mgroup = this.mgroupOptions[0].id;
|
|
this.params.mgroup = this.mgroupOptions[0].id;
|
|
this.apiObjStlog = this.$API.wpm.stlog.list;
|
|
this.tableName = this.mgroupOptions[0].name;
|
|
this.getTableData();
|
|
})
|
|
},
|
|
//班组列表
|
|
getShift() {
|
|
this.$API.mtm.shift.list.req({ page: 0 }).then(res => {
|
|
this.optionsShift = res;
|
|
})
|
|
},
|
|
//查询类型
|
|
// getData() {
|
|
// let that = this;
|
|
// that.tableData1 = [];
|
|
// let params = {};
|
|
// params.mgroup = that.query.mgroup;
|
|
// // if (that.query.type == 0) {//班
|
|
// // arr = that.query.day.split('-');
|
|
// // params.year_s = Number(arr[0]);
|
|
// // params.month_s = Number(arr[1]);
|
|
// // params.day_s = Number(arr[2]);
|
|
// // params.type = "day_s"
|
|
// // } else if (that.query.type == 1) {//日
|
|
// // arr = that.query.month.split('-');
|
|
// // params.start_time__year = Number(arr[0]);
|
|
// // params.start_time__month = Number(arr[1]);
|
|
// // params.start_time__day = Number(arr[2]);
|
|
// // } else {//月
|
|
// // params.start_time__year = Number(that.query.year);
|
|
// // params.start_time__month = Number(that.query.month);
|
|
// // }
|
|
// params.start_time__gt = that.query[0];
|
|
// params.start_time__lt = that.query[1];
|
|
// this.$API.wpm.stlog.list.req(params).then(res => {
|
|
// that.apiObjStlog = res;
|
|
// })
|
|
// },
|
|
getTableData() {
|
|
let that = this;
|
|
let arr = [];
|
|
if (that.query.type == 1) {
|
|
this.query.start_time__gt = this.value1[0];
|
|
this.query.start_time__lt = this.value1[1];}
|
|
else if (that.query.type == 2) {
|
|
console.log(this.query.month);
|
|
arr = that.query.month.split('-');
|
|
this.query.start_time__year = Number(arr[0]);
|
|
this.query.start_time__month = Number(arr[1]);
|
|
}
|
|
this.$refs.stlogTable.queryData(this.query);
|
|
},
|
|
|
|
handlePrint() {
|
|
this.$PRINT('#myReport');
|
|
},
|
|
exportExcel() {
|
|
this.exportLoading = true;
|
|
this.$XLSX('#myTable', this.tableName)
|
|
this.exportLoading = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.printContainer {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
}
|
|
</style> |