meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

Browse Source
This commit is contained in:
zhangshun
2024-09-09 15:26:17 +08:00
parent fe5d3b70df
commit 563132273c
717 changed files with 107188 additions and 138520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/views/DeviceManagement/EquipmentEnergy/index.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<div class="app-container">
<el-card>
<div style="margin-top: 7px; margin-bottom: 7px">
<el-select v-model="MachineValue" filterable size="small" style="width:160px" placeholder="选择工位-设备">
<el-option
v-for="item in Machine"
:key="item.value"
:label="item.label"
:value="item.value"
@change="searchTable()">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
</el-option>
</el-select>
<span style="font-size: 13px;color: black">日期</span>
<el-date-picker
v-model="dateRange"
size="small"
type="daterange"
align="center"
style="width: 240px;"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
range-separator="～"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="searchTable()"/>
<el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchTable()">查询</el-button>
</div>
<el-table v-loading="loading" :data="tableData" highlight-current-row border stripe size="small" style="width: 1091px" height="750" @sort-change="sortChange">
<el-table-column :width="setColumnWidth('物料编号')" label="工位号" prop="工位" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.工位 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="设备名称" prop="设备" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.设备 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="工作时长" prop="生产H" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.生产h }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="关机时长" prop="关机H" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.关机h }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="报警时长" prop="报警H" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.报警h }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="空闲时长" prop="空闲H" align="center" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.空闲h }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('加工设备')" label="有用电量" align="center">
<template slot-scope="scope">
{{ scope.row.有功电量 }}
</template>
</el-table-column>
<el-table-column label="无用电量" align="center">
<template slot-scope="scope">
{{ scope.row.无功电量 }}
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
MachineValue: '',
Machine: [],
dateRange: '', // 提交日期
loading: false, // 数据加载
total: 0, // 分页总数
tableData: [],
pageCurrent: 1, // 分页当前页
pageSize: 100, // 分页每页显示条数
orderName: '', // 排序列名
order: '' // 排序方式
}
},
computed: {
...mapGetters([
'id',
'token'
])
},
created() {
this.fetchData()
},
methods: {
// fetchData() {
// this.getCustomer()
// },
fetchData() {
var param = []
var Data = this.CreateData('11', '车间生产管理工艺_加工顺序调整_查询工位及人员', param)
this.ExecDatabase(Data).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.Machine.push({
label: response.data[i].终端编号,
value: response.data[i].终端编号,
value2: response.data[i].设备名称
})
}
})
},
searchTable() {
let MachineValue_check, dateRange_check
this.MachineValue ? MachineValue_check = 1 : MachineValue_check = 0
this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
var param = []
param[0] = ['排序名称', this.orderName]
param[1] = ['排序方式', this.order]
param[2] = ['开始时间', this.dateRange[0]]
param[3] = ['结束时间', this.dateRange[1]]
param[4] = ['时间_check', dateRange_check]
param[5] = ['工位号_check', MachineValue_check]
param[6] = ['工位号', this.MachineValue]
if (this.dateRange[0] === undefined || this.dateRange[1] === undefined) {
this.$message.error('请选择时间')
} else {
var Data = this.CreateData('11', '设备管理_设备能耗统计_查询数据', param, this.pageSize, this.pageCurrent)
this.ExecDatabase(Data).then(response => {
this.tableData = response.data.rows
console.log(this.tableData)
this.total = response.data.total
// console.log(response.data, '刘浩')
})
}
},
// sortChange(column) {
// if (column.prop === '状态') {
// this.orderName = 1
// }
// if (column.order === 'ascending') {
// this.order = 1
// } else if (column.order === 'descending') { this.order = 2 } else {
// this.order = ''
// }
// this.searchTable()
// },
sortChange(column) {
if (column.prop === '生产H') {
this.orderName = 1
} else if (column.prop === '关机H') {
this.orderName = 2
} else if (column.prop === '报警H') {
this.orderName = 3
} else if (column.prop === '空闲H') {
this.orderName = 4
} else {
this.orderName = 0
}
if (column.order === 'ascending') {
this.order = 1
} else if (column.order === 'descending') { this.order = 2 } else {
this.order = ''
}
this.searchTable1()
},
handleSizeChanges(val) {
this.pageCurrent = 1
this.pageSize = val
this.searchTable()
},
handleCurrentChanges(val) {
this.pageCurrent = val
this.searchTable()
}
}
}
</script>
<style>
</style>