opt:西门子优化
This commit is contained in:
33
lms/nladmin-ui/src/views/wms/sch/agv_usage/agvUsage.js
Normal file
33
lms/nladmin-ui/src/views/wms/sch/agv_usage/agvUsage.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getAgvUsageStatistics(params) {
|
||||
return request({
|
||||
url: 'api/agv_usage/statistics',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getAgvUsageDetail(params) {
|
||||
return request({
|
||||
url: 'api/agv_usage/statistics/detail',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getAgvRealtimeStatus() {
|
||||
return request({
|
||||
url: 'api/agv_usage/realtime',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getTodayUsageRate() {
|
||||
return request({
|
||||
url: 'api/agv_usage/today',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default { getAgvUsageStatistics, getAgvUsageDetail, getAgvRealtimeStatus, getTodayUsageRate }
|
||||
216
lms/nladmin-ui/src/views/wms/sch/agv_usage/index.vue
Normal file
216
lms/nladmin-ui/src/views/wms/sch/agv_usage/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form ref="queryForm" :inline="true" :model="query" size="small">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="query.startDate"
|
||||
type="date"
|
||||
placeholder="选择开始日期"
|
||||
style="width: 150px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="query.endDate"
|
||||
type="date"
|
||||
placeholder="选择结束日期"
|
||||
style="width: 150px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<el-button type="info" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>AGV使用率统计</span>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
size="small"
|
||||
>
|
||||
<el-table-column prop="deviceCode" label="AGV编码" width="120" />
|
||||
<el-table-column prop="deviceName" label="AGV名称" width="150" />
|
||||
<el-table-column prop="totalWorkDuration" label="总工作时长(秒)" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatDuration(scope.row.totalWorkDuration) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalTaskCount" label="任务数量" width="100" />
|
||||
<el-table-column prop="avgUsageRate" label="平均使用率(%)">
|
||||
<template slot-scope="scope">
|
||||
<el-progress
|
||||
:percentage="scope.row.avgUsageRate || 0"
|
||||
:color="getProgressColor(scope.row.avgUsageRate)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-dialog
|
||||
title="AGV使用详情"
|
||||
:visible.sync="detailVisible"
|
||||
width="70%"
|
||||
>
|
||||
<el-table
|
||||
v-loading="detailLoading"
|
||||
:data="detailData"
|
||||
border
|
||||
style="width: 100%"
|
||||
size="small"
|
||||
>
|
||||
<el-table-column prop="deviceCode" label="AGV编码" width="120" />
|
||||
<el-table-column prop="deviceName" label="AGV名称" width="150" />
|
||||
<el-table-column prop="workDate" label="日期" width="120" />
|
||||
<el-table-column prop="totalWorkDuration" label="工作时长(秒)" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatDuration(scope.row.totalWorkDuration) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalIdleDuration" label="空闲时长(秒)" width="120">
|
||||
<template slot-scope="scope">
|
||||
{{ formatDuration(scope.row.totalIdleDuration) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskCount" label="任务数量" width="100" />
|
||||
<el-table-column prop="usageRate" label="使用率(%)">
|
||||
<template slot-scope="scope">
|
||||
<el-progress
|
||||
:percentage="scope.row.usageRate || 0"
|
||||
:color="getProgressColor(scope.row.usageRate)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudAgvUsage from './agvUsage'
|
||||
import { format } from 'date-fns'
|
||||
|
||||
export default {
|
||||
name: 'AgvUsage',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
detailLoading: false,
|
||||
detailVisible: false,
|
||||
query: {
|
||||
startDate: new Date(),
|
||||
endDate: new Date()
|
||||
},
|
||||
tableData: [],
|
||||
detailData: [],
|
||||
currentDeviceCode: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.toQuery()
|
||||
},
|
||||
methods: {
|
||||
toQuery() {
|
||||
this.loading = true
|
||||
const startDate = this.formatDate(this.query.startDate)
|
||||
const endDate = this.formatDate(this.query.endDate)
|
||||
const queryParams = {
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
}
|
||||
crudAgvUsage.getAgvUsageStatistics(queryParams).then(res => {
|
||||
this.tableData = res || []
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
resetQuery() {
|
||||
this.query = {
|
||||
startDate: new Date(),
|
||||
endDate: new Date()
|
||||
}
|
||||
this.toQuery()
|
||||
},
|
||||
showDetail(row) {
|
||||
this.currentDeviceCode = row.deviceCode
|
||||
this.detailVisible = true
|
||||
this.detailLoading = true
|
||||
const params = {
|
||||
deviceCode: row.deviceCode,
|
||||
startDate: this.formatDate(this.query.startDate),
|
||||
endDate: this.formatDate(this.query.endDate)
|
||||
}
|
||||
crudAgvUsage.getAgvUsageDetail(params).then(res => {
|
||||
this.detailData = res || []
|
||||
this.detailLoading = false
|
||||
}).catch(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
formatDuration(seconds) {
|
||||
if (!seconds) return '0秒'
|
||||
const hours = Math.floor(seconds / 3600)
|
||||
const minutes = Math.floor((seconds % 3600) / 60)
|
||||
const secs = seconds % 60
|
||||
let result = ''
|
||||
if (hours > 0) {
|
||||
result += hours + '小时'
|
||||
}
|
||||
if (minutes > 0) {
|
||||
result += minutes + '分钟'
|
||||
}
|
||||
if (secs > 0 || result === '') {
|
||||
result += secs + '秒'
|
||||
}
|
||||
return result
|
||||
},
|
||||
getProgressColor(percentage) {
|
||||
if (percentage >= 80) {
|
||||
return '#67c23a'
|
||||
} else if (percentage >= 50) {
|
||||
return '#e6a23c'
|
||||
} else {
|
||||
return '#f56c6c'
|
||||
}
|
||||
},
|
||||
formatDate(date) {
|
||||
if (!date) return ''
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.head-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user