gaoshp
2024-06-02 b46e6d2306515f94bf77c06e8d80ac76267e3ddb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-20 21:04:56
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/efficiency-analysis.vue
 * 效率分析
-->
<template>
    <el-main style="height: 100%;">
        <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>统计数据</el-col>
                                <el-col>
                                    <el-select style="width: 250px" v-model="productivityType">
                                        <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-col>
                                <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" show-checkbox></MYTree>
                        </el-main>
                        <el-footer>
                            <el-button @click="query">查询</el-button>
                            <el-button>导出</el-button>
                        </el-footer>
                    </el-container>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-tabs tab-position="top" v-model="activeName" type="card">
                            <el-tab-pane label="按班次统计" name="shift">
                                <Shift :options="chartOption" colname="效率" ref="shift" v-if="activeName == 'shift'" />
                            </el-tab-pane>
                            <el-tab-pane label="按时间周期统计" name="time">
                                <Time ref="time" v-if="activeName == 'time'" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-main>
                </el-container>
            </el-container>
        </el-card>
    </el-main>
</template>
 
<script>
import moment from 'moment';
import MYTree from './MYTree.vue'
import Shift from './components/Shift.vue'
import Time from './components/Time.vue'
 
export default {
    components: {
        MYTree,
        Shift,
        Time
    },
    watch: {
        activeName() {
            this.$nextTick(() => {
                this.query()
            })
 
        }
    },
    data() {
        return {
            activeName: 'shift',
            productivityType: 'OEE',
            time: [],
            treeChecked: [],
            chartOption: {
                legend: {
                    type: 'plain',
                },
                title: {
                    text: '统计图表',
                    subtext: '',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: (value) => {
                            return value + '%'
                        }
                    },
                },
                dataZoom: [
                    { type: 'slider' }
                ],
                dataset: {
                    source: [
                        ['product', '班次1', '班次2'],
                    ]
                },
                series: [{
                    type: 'bar',
                },
                {
                    type: 'bar',
                }]
            },
            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.query()
    },
    methods: {
        query() {
            this.$refs[this.activeName].init({
                endDate: this.time[1],
                startDate: this.time[0],
                productivityType: this.productivityType,
                shiftIndexList: [1, 2],
                workStationIdList: [...this.treeChecked]
            })
            // this.$HTTP.post('/api/blade-mdc/efficiency-analysis?size=-1', {
 
            // })
            // this.$HTTP.post('/api/blade-mdc/efficiency-analysis?current=1&size=15', {
 
            // })
            // this.$HTTP.post('/api/blade-cps/workstation-wcs-feedback/feedback-status', [...vals])
        }
    }
}
</script>
 
<style lang="scss" scoped></style>