处理显示名称

gaoshp

2024-11-05 e2fdfe540eaf160dc7d063c60667041edcc64e86

 src/views/mdc/efficiency-analysis.vue

@@ -1,12 +1,12 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-20 21:04:56
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-11-04 12:23:49
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/efficiency-analysis.vue
 * 效率分析
-->
<template>
    <el-main style="height: 100%;">
    <el-main style="height: 100%;" class="efficiencyAnalysis">
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-container style="height: 100%;">
                <el-aside width="300px" style="height: 100%;">
@@ -32,25 +32,35 @@
                            <MYTree v-model="treeChecked" show-checkbox></MYTree>
                        </el-main>
                        <el-footer>
                            <el-button @click="query">查询</el-button>
                            <el-button>导出</el-button>
                            <el-button type="primary" @click="query">查询</el-button>
                            <!-- <el-button @click="exportExcel">导出</el-button> -->
                            <exportDialog @export="exportExcel"></exportDialog>
                        </el-footer>
                    </el-container>
                </el-aside>
                <el-container>
                    <el-main>
                    <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 :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'" />
                                <Time :options="chartOption1" ref="time" v-if="activeName == '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>

@@ -59,12 +69,21 @@
import MYTree from './MYTree.vue'
import Shift from './components/Shift.vue'
import Time from './components/Time.vue'

import exportDialog from '@/layout/components/exportDialog.vue'
import Efficiency from './configComp/Efficiency.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
let icons = []
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    icons.push(key)
}
export default {
    components: {
        ...ElementPlusIconsVue,
        MYTree,
        Shift,
        Time
        Time,
        exportDialog,
        Efficiency
    },
    watch: {
        activeName() {
@@ -76,10 +95,51 @@
    },
    data() {
        return {
            dialogVisible: false,
            showModalList: [2],
            activeName: 'shift',
            productivityType: 'OEE',
            time: [],
            treeChecked: [],
            chartOption1: {
                title: {
                    text: '统计图表',
                    subtext: '',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (params) => {
                        return params.toFixed(2) + '%'
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 'auto',
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: (value) => {
                            return value + '%'
                        }
                    },
                },
                dataZoom: [
                    { type: 'slider' }
                ],
                dataset: {
                    source: []
                },
                series: []
            },
            chartOption: {
                legend: {
                    type: 'plain',
@@ -92,7 +152,11 @@
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                    trigger: 'axis',
                    valueFormatter: (params) => {
                        console.log(params, '>>>>>>>>.113213')
                        return params.toFixed(2) + '%'
                    }
                },
                xAxis: {
                    type: 'category',
@@ -113,12 +177,14 @@
                        ['product', '班次1', '班次2'],
                    ]
                },
                series: [{
                    type: 'bar',
                },
                {
                    type: 'bar',
                }]
                series: [
                    {
                        type: 'bar',
                    },
                    {
                        type: 'bar',
                    }
                ]
            },
            options: [
                {
@@ -143,6 +209,25 @@
        this.query()
    },
    methods: {
        openSet() {
            this.dialogVisible = true;
        },
        exportExcel(statisticalMethod) {
            this.$HTTP.post(`/api/mdc/efficiency-analysis/export`, {
                startDate: this.time[0],
                endDate: this.time[1],
                statisticalMethod,
                productivityType: this.productivityType,
                shiftIndexList: [1, 2],
                workStationIdList: this.treeChecked
            }).then(res => {
                if (res.success) {
                    window.open(res.data.link)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        query() {
            this.$refs[this.activeName].init({
                endDate: this.time[1],
@@ -151,16 +236,34 @@
                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>
<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;
    }
    .efficiencyAnalysis >>> .el-dialog__body {
        padding-bottom: 0px;
        padding-top: 0px;
    }
</style>