363 lines
8.4 KiB
Vue
363 lines
8.4 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<div style="margin-right: 20px">交接班日志</div>
|
||
<el-date-picker
|
||
v-model="query.start_time__gte"
|
||
type="datetime"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="班开始时间起"
|
||
style="width: 200px"
|
||
/>
|
||
<el-date-picker
|
||
v-model="query.end_time__lt"
|
||
type="datetime"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="班开始时间止"
|
||
style="margin-left: 2px; width: 200px"
|
||
/>
|
||
<el-select
|
||
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-select
|
||
v-model="query.team"
|
||
placeholder="班组"
|
||
clearable
|
||
style="margin-left: 2px; width: 120px"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleQuery"
|
||
style="margin-left: 2px"
|
||
></el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable
|
||
ref="table"
|
||
:apiObj="apiObj"
|
||
row-key="id"
|
||
stripe
|
||
:params="query"
|
||
highlightCurrentRow
|
||
@row-click="rowClick"
|
||
>
|
||
<el-table-column type="index" width="50" />
|
||
<!-- <el-table-column label="关联工段" prop="mgroup_name"></el-table-column> -->
|
||
<el-table-column label="开始时间" prop="start_time">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.start_time.slice(0, 16) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="结束时间" prop="end_time">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.end_time.slice(0, 16) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="班组名称"
|
||
prop="team_name"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="当前班次"
|
||
prop="shift_name"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="班长"
|
||
prop="leader_name"
|
||
></el-table-column>
|
||
|
||
<el-table-column label="检验时间">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.last_test_time">{{
|
||
scope.row.last_test_time.slice(0, 16)
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
fixed="right"
|
||
align="center"
|
||
width="140"
|
||
>
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
size="small"
|
||
@click="sflog_edit(scope.row)"
|
||
type="primary"
|
||
>编辑</el-button
|
||
>
|
||
<!-- <el-button link size="small" @click="sflog_check(scope.row)" type="primary">质量检验</el-button> -->
|
||
<!-- <el-button link size="small" @click="sflog_other(scope.row)" type="primary">其他能源</el-button> -->
|
||
<el-divider direction="vertical"></el-divider>
|
||
<el-button
|
||
link
|
||
size="small"
|
||
@click="sflog_export(scope.row)"
|
||
type="success"
|
||
>报表</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
<el-drawer v-model="limitedExport" size="60%" :show-close="false">
|
||
<template #header="{ close, titleId, titleClass }">
|
||
<h4 :id="titleId" :class="titleClass">交接班日志</h4>
|
||
<el-button type="danger" @click="close">
|
||
<el-icon class="el-icon--left">
|
||
<CircleCloseFilled />
|
||
</el-icon>
|
||
关闭
|
||
</el-button>
|
||
</template>
|
||
<div class="left-panel">
|
||
<el-button
|
||
type="primary"
|
||
@click="exportExcel()"
|
||
:loading="exportLoading"
|
||
>导出xlsx
|
||
</el-button>
|
||
<el-button type="primary" @click="handlePrint">打印 </el-button>
|
||
</div>
|
||
<el-main class="nopadding">
|
||
<div ref="print" id="myReport" class="printContainer">
|
||
<div
|
||
style="
|
||
margin-right: 20px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
"
|
||
>
|
||
<span v-if="sflogItem.end_time"
|
||
>{{ sflogItem.end_time.slice(0, 10)
|
||
}}{{ sflogItem.shift_name }}</span
|
||
>
|
||
<span v-if="sflogItem.team_name">{{
|
||
sflogItem.team_name
|
||
}}</span>
|
||
交接班记录
|
||
</div>
|
||
<table
|
||
border="1"
|
||
width="1000"
|
||
cellspacing="0"
|
||
:key="timeStamp"
|
||
id="myTable"
|
||
>
|
||
<tbody>
|
||
<tr>
|
||
<td class="numCell">日期</td>
|
||
<td class="numCell" v-if="sflogItem.end_time">
|
||
{{ sflogItem.end_time.slice(0, 10) }}
|
||
</td>
|
||
<td class="numCell">班次</td>
|
||
<td class="numCell">
|
||
{{ sflogItem.shift_name }}
|
||
</td>
|
||
<td class="numCell">班组</td>
|
||
<td class="numCell">
|
||
<span v-if="sflogItem.team_name">{{
|
||
sflogItem.team_name
|
||
}}</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="numCell">产量（t）</td>
|
||
<td class="numCell">
|
||
{{ reportItem.total_production }}
|
||
</td>
|
||
<td class="numCell">
|
||
单位产品分布电耗（kW·h/t）
|
||
</td>
|
||
<td class="numCell">
|
||
{{ reportItem.elec_consume_unit }}
|
||
</td>
|
||
<td class="numCell"></td>
|
||
<td class="numCell"></td>
|
||
</tr>
|
||
<tr v-if="sflogexpList.length > 0">
|
||
<td
|
||
class="numCell"
|
||
:rowspan="sflogexpList.length + 1"
|
||
>
|
||
生产情况记录
|
||
</td>
|
||
<td class="numCell">时间</td>
|
||
<td class="numCell">类别</td>
|
||
<td class="numCell">原因</td>
|
||
<td class="numCell">处置措施</td>
|
||
<td class="numCell">处置人</td>
|
||
</tr>
|
||
<tr v-for="item in sflogexpList" :key="item.id">
|
||
<td class="numCell">{{ item.stlog_.start_time }}</td>
|
||
<td class="numCell">{{ item.stlog_.cate }}</td>
|
||
<td class="numCell">{{ item.stlog_.reason }}</td>
|
||
<td class="numCell">{{ item.stlog_.measure }}</td>
|
||
<td class="numCell">{{ item.stlog_.handler }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</el-main>
|
||
</el-drawer>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: "packsflog",
|
||
data() {
|
||
return {
|
||
apiObj: null,
|
||
apiObj2: null,
|
||
query: {
|
||
mgroup: "",
|
||
},
|
||
deptId: "",
|
||
|
||
sflogItem: {},
|
||
options: [],
|
||
optionsShift: [],
|
||
limitedExport: false,
|
||
reportItem: {},
|
||
sflogexpList: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$API.mtm.mgroup.list
|
||
.req({ page: 0, search: "水泥包装" })
|
||
.then((res) => {
|
||
console.log("水泥包装", res);
|
||
this.query.mgroup = res[0].id;
|
||
this.apiObj = this.$API.wpm.sflog.list;
|
||
this.deptId = res[0].belong_dept;
|
||
this.getTeam();
|
||
this.getShfit();
|
||
});
|
||
},
|
||
methods: {
|
||
getTeam() {
|
||
let form = {};
|
||
form.page = 0;
|
||
form.belong_dept = this.deptId;
|
||
this.$API.mtm.team.list.req(form).then((res) => {
|
||
this.options = res;
|
||
});
|
||
},
|
||
getShfit() {
|
||
this.$API.mtm.shift.list.req({ page: 0 }).then((res) => {
|
||
this.optionsShift = res;
|
||
});
|
||
},
|
||
handleQuery() {
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
sflog_export() {
|
||
this.limitedExport = true;
|
||
},
|
||
rowClick(row) {
|
||
this.sflogId = row.id;
|
||
this.sflogItem = row;
|
||
this.getSflogItem(row.id);
|
||
this.getSflogexp(row.id);
|
||
},
|
||
getSflogexp(id) {
|
||
let that = this;
|
||
that.$API.wpm.sflogexp.list
|
||
.req({ page: 0, sflog: id })
|
||
.then((res) => {
|
||
that.sflogexpList = res;
|
||
});
|
||
},
|
||
getSflogItem(id) {
|
||
let that = this;
|
||
that.$API.enm.enstat
|
||
.req({ type: "sflog", sflog: id, page: 0 })
|
||
.then((res) => {
|
||
if (res.length > 0) {
|
||
that.reportItem = res[0];
|
||
}
|
||
console.log(res[0]);
|
||
});
|
||
},
|
||
//编辑
|
||
sflog_edit(row) {
|
||
let jsonStr = JSON.stringify(row);
|
||
this.$TOOL.data.remove("sflogItem");
|
||
this.$TOOL.data.set("sflogItem", jsonStr);
|
||
this.$router.push({
|
||
name: "logDetail",
|
||
query: {
|
||
mgroupId: row.mgroup,
|
||
deptId: this.deptId,
|
||
},
|
||
});
|
||
},
|
||
handlePrint() {
|
||
this.$PRINT("#myReport");
|
||
},
|
||
exportExcel() {
|
||
this.exportLoading = true;
|
||
this.$XLSX("#myTable", this.tableName);
|
||
this.exportLoading = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
#numTable {
|
||
margin-left: 37px;
|
||
}
|
||
|
||
#numTable td {
|
||
height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.numCell {
|
||
width: 80px;
|
||
}
|
||
|
||
.numCell.numCell_last {
|
||
width: 100px;
|
||
}
|
||
|
||
.searchHead {
|
||
display: flex;
|
||
}
|
||
|
||
.middleText {
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin: 0 5px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.searchBtn {
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|