<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-11-04 13:39:09
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/alarm-statistics.vue
|
* 效率分析
|
-->
|
<template>
|
<el-main style="height: 100%;" class="alarmStatistics">
|
<el-card shadow="never" style="height: 100%;" body-style="height: 100%">
|
<el-container style="height: 100%;">
|
<el-aside width="300px" style="height: 100%;">
|
<el-container>
|
<el-main class="nopadding">
|
<el-row>
|
<el-col style="margin-top: 14px;">日期</el-col>
|
<el-col>
|
<el-date-picker value-format="YYYY-MM-DD" style="width: 250px" v-model="time"
|
type="daterange" range-separator="-" start-placeholder="" end-placeholder="" />
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 14px;">
|
工位
|
</el-row>
|
<MYTree v-model="treeChecked" @loaded="query"></MYTree>
|
</el-main>
|
<el-footer>
|
<el-button type="primary" @click="query()">查询</el-button>
|
<!-- <el-button @click="exportExcel">导出</el-button> -->
|
<exportDialog ref="export" @export="exportExcel"></exportDialog>
|
</el-footer>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-main style="position: relative;">
|
<span class="setSpan">
|
<el-icon class="setIcon">
|
<Setting />
|
</el-icon>
|
<span class="setBtn" @click="openSet">预警统计设置</span>
|
</span>
|
<el-tabs tab-position="top" v-model="activeName" type="card">
|
<el-tab-pane label="按班次统计" name="shift">
|
<Shift colname="产量" url="/api/mdc/alarm/summary-shift-graph" ref="shift"
|
v-if="activeName == 'shift'">
|
</Shift>
|
</el-tab-pane>
|
<el-tab-pane label="按时间周期统计" name="time">
|
<Time url="/api/mdc/alarm/summary-graph" ref="time" v-if="activeName == 'time'">
|
</Time>
|
</el-tab-pane>
|
</el-tabs>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
<el-dialog title="设置" v-model="dialogVisible" v-if="dialogVisible" width="30%" class="setModelStyle">
|
<Efficiency :showModalList="showModalList" />
|
</el-dialog>
|
</el-main>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import MYTree from './MYTree.vue'
|
import Shift from './components/ShiftAlarm.vue'
|
import Time from './components/TimeAlarm.vue'
|
import exportDialog from '@/layout/components/exportDialog.vue'
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
import Efficiency from './configComp/Efficiency.vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
components: {
|
...ElementPlusIconsVue,
|
MYTree,
|
Shift,
|
Time,
|
exportDialog,
|
Efficiency
|
},
|
watch: {
|
activeName() {
|
this.$nextTick(() => {
|
this.query()
|
})
|
|
}
|
},
|
data() {
|
return {
|
showModalList: [4],
|
dialogVisible: false,
|
activeName: 'shift',
|
time: [],
|
treeChecked: [],
|
options: [
|
{
|
label: '稼动率',
|
value: 'OEE',
|
},
|
{
|
label: '报警率',
|
value: 'ALARM',
|
},
|
{
|
label: '运行率',
|
value: 'RUNNING',
|
},
|
]
|
}
|
},
|
created() {
|
this.time = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
|
},
|
mounted() {
|
// this.$nextTick(() => {
|
// this.query()
|
// })
|
},
|
methods: {
|
openSet() {
|
this.dialogVisible = true;
|
},
|
exportExcel(statisticalMethod) {
|
let { start, end } = this.$refs.export.format(this.time[0], this.time[1], statisticalMethod)
|
this.$HTTP.post(`/api/mdc/alarm/export-alarm`, {
|
startTime: start,
|
endTime: end,
|
enums: statisticalMethod,
|
month: 0,
|
queryTime: '',
|
shiftIndex: 1,
|
week: 0,
|
year: 0,
|
workstationId: this.treeChecked.toString()
|
}).then(res => {
|
if (res.success) {
|
window.open(res.data.link)
|
} else {
|
this.$message.error(res.msg)
|
}
|
})
|
},
|
query(firstWorkKey) {
|
let workstationId = firstWorkKey ? [firstWorkKey] : [...this.treeChecked]
|
this.$nextTick(() => {
|
this.$refs[this.activeName].init({
|
endDate: this.time[1],
|
startDate: this.time[0],
|
workstationId
|
})
|
})
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.setSpan {
|
vertical-align: sub;
|
font-size: 14px;
|
position: absolute;
|
top: 26px;
|
left: 280px;
|
z-index: 11;
|
}
|
.setIcon {
|
color: #409eff;
|
margin-left: 15px;
|
vertical-align: -2px;
|
}
|
.setBtn {
|
margin-left: 2px;
|
color: #409eff;
|
margin-left: 8px;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
.alarmStatistics >>> .el-dialog__body {
|
padding-bottom: 0px;
|
padding-top: 0px;
|
}
|
</style>
|
