<template>
|
<div style="width: 100%;">
|
<div :bordered="false">
|
<!-- 查询区域 -->
|
<div class="seach-content">
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="驱动类型">
|
<a-auto-complete
|
v-model="queryParam.driveType"
|
:data-source="driveTypeList"
|
placeholder="请选择驱动类型"
|
:filter-option="filterOption"
|
/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="时间">
|
<a-range-picker
|
:placeholder="['开始时间', '结束时间']"
|
format="YYYY-MM-DD"
|
:value="dates"
|
@change="dateParamChange"
|
/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="4" :sm="4" :xs="4">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
<a-button type="primary" @click="exportExcel" icon="download">导出</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
|
</div>
|
</div>
|
|
<div class="container" id="EfficiencyShift" style="margin-top: 20px;">
|
<div class="table2">
|
<a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered>
|
<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>
|
</a-table>
|
</div>
|
</div>
|
<div class="pagination">
|
<a-pagination
|
:total=dataSource.total
|
:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
|
:page-size="+queryParam.pageSize"
|
:default-current="1"
|
:current=+queryParam.pageNo
|
show-size-changer
|
:pageSizeOptions="['20','30','40','50']"
|
@change="handlePageNoChange"
|
@showSizeChange="handlePageSizeChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { putAction, getAction } from '@/api/manage'
|
import $ from 'jquery'
|
import '@/components/table2excel/table2excel'
|
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
|
import api from '@/api/mdc'
|
|
export default {
|
name: 'DeviceProcessReportList',
|
components: {},
|
data() {
|
return {
|
typeTree: '',
|
typeParent: 1,
|
typeEquipment: 1,
|
allowClear: true,
|
allowClearSu: true,
|
dates: [moment(), moment()],
|
identifying: [],
|
queryParam: {
|
pageSize: 20,
|
pageNo: 1
|
},
|
queryParamEquip: {},
|
queryParamPeople: {},
|
url: {
|
list: '/mdc/mdcProcessCount/list'
|
},
|
columns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 70,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
// fixed: 'left'
|
},
|
{
|
title: '设备统一编号',
|
align: 'center',
|
dataIndex: 'equipmentId',
|
width: 120
|
},
|
{
|
title: '设备名称',
|
align: 'center',
|
width: 150,
|
dataIndex: 'equipmentName'
|
},
|
{
|
title: '驱动类型',
|
align: 'center',
|
width: 110,
|
dataIndex: 'driveType'
|
},
|
{
|
title: '程序号',
|
align: 'center',
|
width: 100,
|
dataIndex: 'sequenceNumber'
|
},
|
{
|
title: '加工件数',
|
align: 'center',
|
width: 80,
|
dataIndex: 'processCount'
|
},
|
{
|
title: '持续时间',
|
dataIndex: 'duration',
|
align: 'center',
|
scopedSlots: { customRender: 'duration' },
|
width: 110
|
},
|
{
|
title: '日期',
|
dataIndex: 'theDate',
|
align: 'center',
|
width: 110
|
}
|
],
|
dataSource: [],
|
driveTypeList: []
|
}
|
},
|
props: { nodeTree: '', Type: '', nodePeople: '' },
|
created() {
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
this.queryParam.typeTree = '1'
|
this.loadData()
|
this.getDriveTypeByApi()
|
},
|
watch: {
|
Type(valmath) {
|
this.dataList = []
|
this.queryParam.typeTree = valmath
|
},
|
nodeTree(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
|
console.log(val)
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId != null) {
|
this.queryParamEquip.parentId = ''
|
this.queryParamEquip.equipmentId = val.equipmentId
|
} else {
|
this.queryParamEquip.parentId = val.key
|
this.queryParamEquip.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
},
|
nodePeople(val) {
|
if (JSON.stringify(val) != '{}') {
|
if (val.equipmentId != null) {
|
this.queryParamPeople.parentId = val.equipmentId
|
this.queryParamPeople.equipmentId = ''
|
} else {
|
this.queryParamPeople.parentId = val.key
|
this.queryParamPeople.equipmentId = ''
|
}
|
this.searchQuery()
|
}
|
}
|
},
|
filters: {
|
numFilter(value) {
|
if (value) {
|
return parseFloat((value * 100).toFixed(2))
|
} else {
|
return '0'
|
}
|
}
|
},
|
methods: {
|
dateParamChange(value) {
|
this.dates = value
|
console.log('value', value)
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
|
},
|
|
exportExcel() {
|
$('#EfficiencyShift').table2excel({
|
exclude: '.noExl',
|
name: 'Excel Document Name',
|
filename: '设备加工工件报表',
|
exclude_img: true,
|
fileext: '.xls',
|
exclude_links: true,
|
exclude_inputs: true
|
})
|
},
|
|
searchQuery() {
|
if (this.dates != '') {
|
if (this.queryParam.typeTree == '1') {
|
this.queryParam.parentId = this.queryParamEquip.parentId
|
this.queryParam.equipmentId = this.queryParamEquip.equipmentId
|
} else {
|
this.queryParam.parentId = this.queryParamPeople.parentId
|
this.queryParam.equipmentId = ''
|
}
|
this.queryParam.pageNo = 1
|
this.loadData()
|
} else {
|
// this.$message.warning("请选择时间")
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择时间'
|
})
|
}
|
// this.onClearSelected()
|
},
|
|
searchReset() {
|
this.queryParam = {
|
pageSize: 20,
|
pageNo: 1
|
}
|
this.dates = []
|
this.loadData()
|
},
|
|
loadData() {
|
getAction(this.url.list, this.queryParam).then(res => {
|
if (res.success) {
|
this.dataSource = res.result
|
}
|
})
|
},
|
|
/**
|
* 调用接口获取控制系统类型
|
*/
|
getDriveTypeByApi() {
|
api.getDriveTypeApi().then((res) => {
|
this.driveTypeList = res.result.map(item => item.value)
|
})
|
},
|
|
/**
|
* 格式化时间
|
* @param seconds 秒数
|
* @returns '' 格式化后时间字符串
|
*/
|
getFormattedTime(seconds) {
|
var hours = Math.floor(seconds / 3600)
|
var minutes = Math.floor((seconds % 3600) / 60)
|
var secs = seconds % 60
|
|
if (hours === 0) {
|
if (minutes === 0) {
|
return secs === 0 ? 0 : `${secs}秒`
|
} else {
|
if (secs === 0) {
|
return `${minutes}分`
|
}
|
return `${minutes}分 ${secs}秒`
|
}
|
} else {
|
if (minutes === 0 && secs === 0) {
|
return `${hours}小时`
|
} else if (minutes !== 0 && secs === 0) {
|
return `${hours}小时 ${minutes}分`
|
}
|
}
|
return `${hours}小时 ${minutes}分 ${secs}秒`
|
},
|
|
/**
|
* 分页器页数发生改变时触发
|
* @param page 改变后页数
|
* @param pageSize 改变后每页展示数据条数
|
*/
|
handlePageNoChange(page, pageSize) {
|
this.queryParam.pageNo = page
|
this.loadData()
|
},
|
|
/**
|
* 分页器每页展示数据条数发生改变时触发
|
* @param current 改变后页数
|
* @param size 改变后每页展示数据条数
|
*/
|
handlePageSizeChange(current, size) {
|
this.queryParam.pageSize = size
|
this.loadData()
|
},
|
|
/**
|
* 联想输入框筛选功能
|
* @param input 输入的内容
|
* @param option 配置
|
* @returns {boolean} 判断是否筛选
|
*/
|
filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
|
)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.table2 {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: end;
|
margin: 20px 0;
|
}
|
|
@media screen and (min-width: 1920px) {
|
#EfficiencyShift {
|
height: 670px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
#EfficiencyShift {
|
height: 670px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
#EfficiencyShift {
|
height: 522px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
#EfficiencyShift {
|
height: 414px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
#EfficiencyShift {
|
height: 414px !important;
|
overflow: scroll;
|
}
|
}
|
|
.identifyingclass {
|
width: 55px;
|
height: 15px;
|
display: inline-block
|
}
|
|
.dataContent {
|
white-space: nowrap;
|
/*margin: 0;*/
|
/*border: none;*/
|
border-collapse: separate;
|
border-spacing: 0;
|
/*table-layout: fixed;*/
|
border: 1px solid #ccc;
|
/*border: 1px solid #ccc;*/
|
width: 100%;
|
/*height: 100%;*/
|
/*overflow: hidden;*/
|
/*overflow-y: auto;*/
|
text-align: center;
|
}
|
|
.dataContent .fixed th {
|
width: 50px;
|
}
|
|
.dataContent .thead th {
|
background-color: #fafafa;
|
text-align: center;
|
height: 30px;
|
padding: 5px;
|
}
|
|
.dataContent .notfixed th {
|
width: auto;
|
}
|
|
/*.dataContent tr td {*/
|
/*height: 35px*/
|
/*}*/
|
|
.dataContent .mathData td {
|
padding: 10px;
|
/*display: none;*/
|
}
|
|
.dataContent .mathData .td {
|
/*background-color: #ff9bd2;*/
|
display: inline-block;
|
padding: 10px;
|
}
|
|
.dataContent .mathData .tdd {
|
/*display: none;*/
|
}
|
|
</style>
|
