<template>
|
<div class="device_list">
|
<!-- 查询区域 -->
|
<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-select
|
:value="queryParams.equipmentType"
|
mode="multiple"
|
placeholder="请选择设备类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'equipmentType')"
|
>
|
<a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="驱动类型">
|
<a-select
|
:value="queryParams.driveType"
|
mode="multiple"
|
placeholder="请选择驱动类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'driveType')"
|
>
|
<a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="4" :sm="4" :xs="4">
|
<a-form-item label="设备级别">
|
<a-select
|
:value="queryParams.deviceLevel"
|
mode="multiple"
|
placeholder="请选择设备级别"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'deviceLevel')"
|
>
|
<a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="设备种类">
|
<a-select
|
:value="queryParams.deviceCategory"
|
mode="multiple"
|
placeholder="请选择设备种类"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'deviceCategory')"
|
>
|
<a-select-option v-for="(item,index) in device_category_list" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="时间">
|
<a-range-picker
|
:placeholder="['开始时间', '结束时间']"
|
format="YYYY-MM"
|
:value="dates"
|
:mode="['month', 'month']"
|
@panelChange="dateParamChange"
|
@change="handleDateChange"
|
/>
|
</a-form-item>
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24" style="margin-bottom: 20px">
|
<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-button type="primary" icon="printer" v-print="'#EfficiencyShift'" v-has="'efficiencyShift:print'">
|
打印
|
</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
|
</div>
|
</div>
|
|
<div id="EfficiencyShift" style="flex:1;overflow: hidden;height: inherit">
|
<a-table :columns="columns" rowKey="id" :dataSource="dataSource.records" :loading="tableLoading"
|
:pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table>
|
</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>
|
</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: 'OEEAnalysisList',
|
components: {},
|
data() {
|
return {
|
dates: [moment().subtract('month', 1), moment().subtract('month', 1)],
|
queryParam: {
|
pageSize: 10000,
|
pageNo: 1
|
},
|
queryParams: {
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: [],
|
deviceCategory: []
|
},
|
queryParamEquip: {},
|
queryParamPeople: {},
|
url: {
|
list: '/mdc/mdcOverallEquipmentEfficiency/list',
|
queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
|
},
|
columns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 70,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{
|
title: '设备统一编号',
|
align: 'center',
|
dataIndex: 'equipmentId',
|
width: 120
|
},
|
{
|
title: '设备名称',
|
align: 'center',
|
width: 200,
|
dataIndex: 'equipmentName'
|
},
|
{
|
title: '设备型号',
|
align: 'center',
|
width: 110,
|
dataIndex: 'equipmentModel'
|
},
|
{
|
title: '日期',
|
align: 'center',
|
width: 100,
|
dataIndex: 'validDate'
|
},
|
{
|
title: '班次',
|
align: 'center',
|
width: 300,
|
dataIndex: 'shift'
|
},
|
{
|
title: '每班小时',
|
dataIndex: 'shiftTimeCount',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '加班时间（分钟）',
|
dataIndex: 'overtime',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '实际班产天数',
|
dataIndex: 'actualWorkDayCount',
|
align: 'center',
|
width: 120
|
},
|
{
|
title: '月度实际班产总时间（分钟）',
|
dataIndex: 'monthActualWorkDayTimeCount',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '非计划停机损失（分钟）（一个月）',
|
children: [
|
{
|
title: '故障停机',
|
dataIndex: 'breakdownDownDuration',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '换型调试',
|
dataIndex: 'conversionDebugDuration',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '物料短缺',
|
dataIndex: 'materialShortageDuration',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '计划等任务',
|
dataIndex: 'plannedTaskDuration',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '检验',
|
dataIndex: 'inspectDuration',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '其他',
|
dataIndex: 'otherDuration',
|
align: 'center',
|
width: 100
|
}
|
]
|
},
|
{
|
title: '计划停机时间（分钟）（一个月）',
|
children: [
|
{
|
title: '计划保养',
|
dataIndex: 'plannedMaintenanceDuration',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '会议/培训',
|
dataIndex: 'conferenceTrainingDuration',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '其他休息等',
|
dataIndex: 'otherRestDuration',
|
align: 'center',
|
width: 110
|
}]
|
},
|
{
|
title: '负荷时间（小时）',
|
dataIndex: 'loadTime',
|
align: 'center',
|
width: 110
|
},
|
{
|
title: '时间开动率',
|
dataIndex: 'timeActuationRate',
|
align: 'center',
|
width: 110,
|
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
|
},
|
{
|
title: '加工零件数（件）',
|
dataIndex: 'processQuantity',
|
align: 'center',
|
width: 120
|
},
|
{
|
title: '标准加工时间（分钟）',
|
dataIndex: 'standardProcessDuration',
|
align: 'center',
|
width: 120
|
},
|
{
|
title: '性能开动率',
|
dataIndex: 'performanceRate',
|
align: 'center',
|
width: 110,
|
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
|
},
|
{
|
title: '废品数',
|
dataIndex: 'unqualifiedQuantity',
|
align: 'center',
|
width: 100
|
},
|
{
|
title: '合格率',
|
dataIndex: 'passRate',
|
align: 'center',
|
width: 100,
|
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
|
},
|
{
|
title: '设备综合效率',
|
dataIndex: 'overallEquipmentEfficiency',
|
align: 'center',
|
width: 120,
|
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
|
}
|
],
|
dataSource: [],
|
driveTypeList: [],
|
equipmentTypeList: [],
|
device_level_list: [],
|
device_category_list: [],
|
scrollY: 465,
|
tableLoading: false
|
}
|
},
|
props: { nodeTree: '', Type: '', nodePeople: '' },
|
created() {
|
const { isEquipment, productionId } = this.$route.params
|
if (productionId) {
|
console.log('productionId', productionId)
|
console.log('isEquipment', isEquipment)
|
if (!isEquipment) this.queryParam.parentId = productionId
|
else this.queryParam.equipmentId = productionId
|
}
|
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM')
|
this.queryParam.typeTree = '1'
|
this.loadData()
|
this.getDriveTypeByApi()
|
this.queryGroup()
|
this.initDictData('device_level')
|
this.initDictData('device_category')
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
// this.handleWindowResize()
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
},
|
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()
|
}
|
}
|
},
|
methods: {
|
initDictData(dictCode) {
|
// //优先从缓存中读取字典配置
|
if (getDictItemsFromCache(dictCode)) {
|
this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
|
return
|
}
|
//根据字典Code, 初始化字典数组
|
ajaxGetDictItems(dictCode, null).then((res) => {
|
if (res.success) {
|
this[dictCode + '_list'] = res.result
|
return
|
}
|
})
|
},
|
selectChange(value, key) {
|
this.queryParams[key] = value
|
},
|
dateParamChange(value) {
|
console.log('dateParamChangeValue', value)
|
this.dates = value
|
this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM')
|
this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM')
|
},
|
|
handleDateChange(value) {
|
console.log('handleDateChangeValue', value)
|
if (!value.length) {
|
delete this.queryParam.startTime
|
delete this.queryParam.endTime
|
this.dates = []
|
}
|
},
|
|
exportExcel() {
|
$('#EfficiencyShift').table2excel({
|
exclude: '.noExl',
|
name: 'Excel Document Name',
|
filename: '设备综合效率分析',
|
exclude_img: true,
|
fileext: '.xls',
|
exclude_links: true,
|
exclude_inputs: true
|
})
|
},
|
|
searchQuery() {
|
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 = ''
|
}
|
Object.keys(this.queryParams).forEach(item => {
|
this.queryParam[item] = this.queryParams[item].join()
|
// 此处为保证接口参数不多余，可省略
|
if (this.queryParams[item].length === 0) delete this.queryParam[item]
|
})
|
this.loadData()
|
},
|
|
searchReset() {
|
this.queryParam = {
|
pageSize: 10000,
|
pageNo: 1,
|
typeTree: 1
|
}
|
this.queryParams = {
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: [],
|
deviceCategory: []
|
}
|
this.dates = []
|
this.loadData()
|
},
|
|
/**
|
* 调用接口获取控制系统类型
|
*/
|
getDriveTypeByApi() {
|
api.getDriveTypeApi().then((res) => {
|
if (res.success) this.driveTypeList = res.result
|
})
|
},
|
|
queryGroup() {
|
getAction(this.url.queryEquipmentType).then(res => {
|
if (res.success) {
|
this.equipmentTypeList = res.result.map(item => {
|
return {
|
label: item.equipmentTypeName,
|
value: item.equipmentTypeName
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
},
|
|
loadData() {
|
this.tableLoading = true
|
getAction(this.url.list, this.queryParam)
|
.then(res => {
|
if (res.success) {
|
this.dataSource = res.result
|
this.tableLoading = false
|
}
|
})
|
.finally(() => {
|
this.tableLoading = false
|
this.handleWindowResize()
|
})
|
},
|
|
/**
|
* 分页器页数发生改变时触发
|
* @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()
|
},
|
|
/**
|
* 当浏览器可视窗口尺寸发生改变时触发
|
*/
|
handleWindowResize() {
|
const devicePixelRatio = window.devicePixelRatio // 浏览器缩放比
|
console.log('devicePixelRatio', devicePixelRatio)
|
if (devicePixelRatio < 1) return // 缩放比小于1时不进行高度重新设置，因为scrollY变大后表格超出部分会被隐藏导致滚动条不可见
|
const clientHeight = document.body.clientHeight || document.documentElement.clientHeight// 浏览器可视区域高度
|
console.log('clientHeight', clientHeight)
|
const containerTopToClientTopHeight = document.getElementById('EfficiencyShift').getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距
|
console.log('containerTopToClientTopHeight', containerTopToClientTopHeight)
|
// const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) // 表格表头高度
|
const tableHeadHeight = document.querySelector('.ant-table-thead th').offsetHeight // 表格表头高度
|
console.log('tableHeadHeight', tableHeadHeight)
|
// this.scrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight
|
const tableSuitableScrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight // 表格垂直滚动条合适高度（表格水平滚动条刚好在可视区域最下方）
|
// const tableSuitableScrollY = 600
|
console.log('tableSuitableScrollY', tableSuitableScrollY)
|
const tableContainerHeight = document.getElementById('EfficiencyShift').offsetHeight
|
console.log('tableContainerHeight', tableContainerHeight)
|
const tableMaxScrollY = tableContainerHeight - tableHeadHeight // 表格垂直滚动条最大高度（若超出则水平滚动条被遮挡）
|
console.log('tableMaxScrollY', tableMaxScrollY)
|
if (tableSuitableScrollY && tableSuitableScrollY < tableMaxScrollY) this.scrollY = tableSuitableScrollY
|
else this.scrollY = tableMaxScrollY
|
console.log('scrollY', this.scrollY)
|
}
|
}
|
}
|
</script>
|
<style scoped lang="less">
|
.pagination {
|
display: flex;
|
justify-content: end;
|
margin: 20px 0;
|
}
|
|
.device_list {
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
@media screen and (min-width: 1920px) {
|
.device_list {
|
height: 811px !important;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
.device_list {
|
height: 811px !important;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
.device_list {
|
height: 663px !important;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.device_list {
|
height: 564px !important;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.device_list {
|
height: 564px !important;
|
}
|
}
|
|
/deep/ .ant-table-body {
|
&::-webkit-scrollbar {
|
height: 12px;
|
}
|
}
|
|
</style>
|
