<template>
|
<div>
|
<!-- 查询开始 -->
|
<el-form :model="dncLogRequest" :inline="true" class="demo-form-inline" :rules="rules">
|
<el-form-item label="开始时间" prop="startTime">
|
<el-date-picker
|
v-model="dncLogRequest.startTime"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间" prop="endTime">
|
<el-date-picker
|
v-model="dncLogRequest.endTime"
|
value-format="yyyy-MM-dd"
|
type="date"
|
placeholder="结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="车间">
|
<el-input type="text" v-model="dncLogRequest.workshopNo" show-word-limit width="200" placeholder="请输入工厂编号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select v-model="dncLogRequest.ncType" placeholder="请选择类型" :clearable="true">
|
<el-option
|
v-for="item in bncTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否成功">
|
<el-select v-model="dncLogRequest.isSuccess" placeholder="请选择是否成功" :clearable="true">
|
<el-option
|
v-for="item in isSuccessList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input type="text" v-model="dncLogRequest.remarks" show-word-limit width="200" placeholder="请输入备注" clearable></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="assignSearch" size="small" icon="el-icon-search">查询</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="reSearch" icon="el-icon-search" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table :data="doneTaskList" class="show_table" ref="workDoneTaskTable"
|
highlight-current-row v-loading="listLoading" :style="conheight" :height="conheight.height"
|
style="width: 100%" @sort-change="sortTableFun">
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-form label-position="left" inline class="demo-table-expand">
|
|
<el-form-item label="车间">
|
<span>{{ props.row.workshopNo }}</span>
|
</el-form-item>
|
<el-form-item label="设备编号">
|
<span>{{ props.row.equipmentId }}</span>
|
</el-form-item>
|
<el-form-item label="类型">
|
<span>{{props.row.ncType}}</span>
|
</el-form-item>
|
<el-form-item label="数据">
|
<span>{{ props.row.contentName }}</span>
|
</el-form-item>
|
<el-form-item label="是否成功">
|
<span>{{ props.row.isSuccess }}</span>
|
</el-form-item>
|
<el-form-item label="备注">
|
<span>{{ props.row.remarks }}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<el-table-column prop="workshopNo" label="车间" class-name="center">
|
</el-table-column>
|
<el-table-column prop="equipmentId" label="设备编号" class-name="center">
|
</el-table-column>
|
<el-table-column prop="ncType" label="类型" align="center">
|
</el-table-column>
|
<el-table-column prop="contentName" label="数据" class-name="center">
|
</el-table-column>
|
<el-table-column prop="isSuccess" label="是否成功" class-name="center">
|
</el-table-column>
|
<el-table-column prop="createTime" label="时间" :formatter="formatTime" class-name="center" sortable="custom">
|
</el-table-column>
|
<el-table-column prop="remarks" label="备注" class-name="center">
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageData.page"
|
:page-sizes="pageData.pageSizeArr"
|
:page-size="pageData.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageData.total">
|
</el-pagination>
|
</div>
|
</template>
|
|
<script>
|
import * as tableApi from '../api/tableMessage'
|
import utils from "../../../common/utils";
|
export default {
|
name: "dnc_log",
|
data() {
|
// 开始时间校验
|
var validTimeStart = (rule, value, callback) => {
|
var start = new Date(this.dncLogRequest.startTime);
|
var end = new Date(this.dncLogRequest.endTime);
|
if (start.getTime() > end.getTime()) {
|
callback(new Error("开始时间不能大于结束时间"));
|
}
|
callback();
|
};
|
// 结束时间校验
|
var vaildTimeEnd = (rule, value, callback) => {
|
var start = new Date(this.dncLogRequest.startTime);
|
var end = new Date(this.dncLogRequest.endTime);
|
if (end.getTime() < start.getTime()) {
|
callback(this.$message.error('结束日期必须大于等于开始日期，请重新选择！'));
|
}
|
callback();
|
};
|
return {
|
rules:{
|
startTime: [
|
{validator: validTimeStart,trigger: "blur"}],
|
endTime: [
|
{validator: vaildTimeEnd,trigger: "blur"}],
|
},
|
bncTypeList:[
|
{
|
id:1,
|
name:"MES",
|
},
|
{
|
id:2,
|
name:"PLM",
|
},
|
{
|
id:3,
|
name:'DNC'
|
}
|
],
|
isSuccessList:[
|
{
|
id:1,
|
name:"成功",
|
},
|
{
|
id:2,
|
name:"失败",
|
}
|
],
|
doneTaskList:[],
|
dncLogRequest: {
|
startTime: "",
|
endTime:"",
|
ncType:"",
|
isSuccess:"",
|
remarks:"",
|
workshopNo:'',
|
createTime:''
|
},
|
pageData:{
|
page:1,
|
size:20,
|
total:0,
|
pageSizeArr:[20, 50, 100]
|
},
|
page:1,
|
size:20,
|
total:0,
|
pageSizeArr:[20, 50, 100],
|
listLoading:false,
|
conheight:{
|
height:'',
|
overflow: 'auto'
|
},
|
}
|
},
|
methods:{
|
GetDateStr(AddDayCount) {
|
|
var dd = new Date();
|
|
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
|
|
var y = dd.getFullYear();
|
|
var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
|
|
var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0
|
var timrsss = y+"-"+m+"-"+d;
|
this.dncLogRequest.startTime = timrsss;
|
// return timrsss
|
|
},
|
sortTableFun(column){
|
this.column = column.prop; //该方法获取到当前列绑定的prop字段名赋值给一个变量，之后这个变量做为入参传给后端
|
if (column.prop) { //该列有绑定prop字段走这个分支
|
if (column.order == 'ascending') {//当用户点击的是升序按钮，即ascending时
|
this.dncLogRequest.createTime = 'asc'; //将order这个变量赋值为后端接口文档定义的升序的字段名，之后作为入参传给后端
|
} else if (column.order == 'descending') {
|
//当用户点击的是升序按钮，即descending时
|
this.dncLogRequest.createTime = 'desc';//将order这个变量赋值为后端接口文档定义的降序的字段名，之后作为入参传给后端
|
}
|
this.indexQueryListFun()//且发起后端请求的接口
|
}
|
},
|
indexQueryListFun(){
|
this.listLoading = true;
|
tableApi.dncLog_list(this.pageData.page,this.pageData.size,this.dncLogRequest).then((res)=>{
|
this.listLoading = false;
|
this.pageData.total = res.page.total;
|
this.doneTaskList = res.page.records;
|
}).catch((error) => {
|
this.listLoading = false;
|
})
|
},
|
dateInit() {
|
let date = new Date();
|
let y = date.getFullYear();
|
let m = date.getMonth() + 1;
|
m = m < 10 ? "0" + m : m;
|
let d = date.getDate() - 4;
|
d = d < 10 ? "0" + d : d;
|
const time = y + "-" + m + "-" + d;
|
this.dncLogRequest.startTime = time;
|
// console.log(this.dncLogRequest.startTime)
|
},
|
dateInitEnd() {
|
let date = new Date();
|
let y = date.getFullYear();
|
let m = date.getMonth() + 1;
|
m = m < 10 ? "0" + m : m;
|
let d = date.getDate();
|
d = d < 10 ? "0" + d : d;
|
const time = y + "-" + m + "-" + d;
|
this.dncLogRequest.endTime = time;
|
},
|
//格式化时间
|
formatTime(row,column){
|
if(row[column.property] != null){
|
let data = row[column.property];
|
let dtime = new Date(data);
|
const year = dtime.getFullYear();
|
let month = dtime.getMonth() + 1;
|
if (month < 10) {
|
month = '0' + month
|
}
|
let day = dtime.getDate();
|
if (day < 10) {
|
day = '0' + day
|
}
|
let hour = dtime.getHours();
|
if (hour < 10) {
|
hour = '0' + hour
|
}
|
let minute = dtime.getMinutes();
|
if (minute < 10) {
|
minute = '0' + minute
|
}
|
let second = dtime.getSeconds();
|
if (second < 10) {
|
second = '0' + second
|
}
|
return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
|
|
}
|
|
},
|
handleSizeChange(val) {
|
this.pageData.size = val;
|
this.queryWorkDone();
|
},
|
handleCurrentChange(val) {
|
this.pageData.page = val;
|
this.queryWorkDone();
|
},
|
assignSearch(){
|
this.pageData.page = 1;
|
this.queryWorkDone();
|
},
|
reSearch(){
|
this.dncLogRequest = {};
|
this.queryWorkDone();
|
},
|
queryWorkDone() {
|
this.listLoading = true;
|
console.log(this.dncLogRequest);
|
tableApi.dncLog_list(this.pageData.page,this.pageData.size,this.dncLogRequest).then((res)=>{
|
this.listLoading = false;
|
this.pageData.total = res.page.total;
|
this.doneTaskList = res.page.records;
|
}).catch((error) => {
|
this.listLoading = false;
|
})
|
},
|
getHeight(){
|
this.conheight.height=window.innerHeight-200+'px';
|
},
|
},
|
created() {
|
// this.dateInit();
|
this.dateInitEnd();
|
window.addEventListener('resize', this.getHeight);
|
this.getHeight();
|
this.GetDateStr(0);
|
},
|
mounted() {
|
this.queryWorkDone();
|
}
|
}
|
</script>
|
|
<style>
|
.demo-table-expand {
|
font-size: 0;
|
}
|
.demo-table-expand label {
|
width: 90px;
|
color: #99a9bf;
|
}
|
.el-table__expanded-cell .el-form-item{
|
width: 50%;
|
}
|
|
.demo-table-expand .el-form-item {
|
margin-right: 0;
|
margin-bottom: 0;
|
width: 50%;
|
}
|
.transfer-footer {
|
margin-left: 20px;
|
padding: 6px 5px;
|
}
|
</style>
|
