jonhon-mes-web/src/views/statisticalAnalysis/productionReport.vue

<template>
    <basic-container>
        <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" @change="tabPositionChange">
            <el-radio-button label="rebiao">热表零件</el-radio-button>
            <el-radio-button label="shaojie">烧结零件</el-radio-button>
            <el-radio-button label="bolibing">玻璃饼</el-radio-button>
        </el-radio-group> -->
        <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
            <el-tab-pane label="热表零件" name="rebiao"></el-tab-pane>
            <el-tab-pane label="烧结零件" name="shaojie"></el-tab-pane>
            <el-tab-pane label="玻璃饼" name="bolibing"></el-tab-pane>
        </el-tabs>
        <!-- 内容 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="统计类型">
                        <el-select v-model="formInline.type" class="m-2" placeholder="请选择" size="small"
                            style="width: 200px">
                            <el-option v-for="item in productionData[tabPosition]" :key="item.value" :label="item.label"
                                :value="item.value" size="small" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="选择日期">
                        <el-date-picker v-model="value1" type="daterange" range-separator="~" start-placeholder="开始时间"  end-placeholder="结束时间" size="small" style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="调度员">
                        <el-input v-model="formInline.user" placeholder="请输入" clearable size="small"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="small" icon="search">查询</el-button>
                    <el-button size="small" icon="refreshLeft">重置</el-button>
                    <el-button size="small" icon="download" type="primary">导出</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 表格数据 -->
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad"></avue-crud>
    </basic-container>
</template>
<script>
import productionCol from './productionData.js'
export default {
    data() {
        return {
            tabPosition: 'rebiao',
            formInline: {
                type: '',//统计类型
                user: '',//调度员
            },
            productionData: {
                "rebiao": [
                    { "label": "订单准时完成率", "value": 1 },
                    { "label": "会议急件准时完成率", "value": 2 },
                    { "label": "平均加工周期", "value": 3 },
                    { "label": "工序统计", "value": 4 },
                    { "label": "检验项目统计", "value": 5 },
                    { "label": "来料统计", "value": 6 },
                    { "label": "入库量统计", "value": 7 },
                    { "label": "在制品统计", "value": 8 },
                    { "label": "计划统计", "value": 9 },
                    { "label": "班组在制品统计", "value": 10 },
                    { "label": "班组工序统计", "value": 11 },
                    { "label": "订单工序统计", "value": 11 },
                ],
                "shaojie": [
                    { "label": "会议急件准时完成率", "value": 2 },
                    { "label": "平均加工周期", "value": 3 },
                    { "label": "来料统计", "value": 6 },
                    { "label": "入库量统计", "value": 7 },
                    { "label": "在制品统计", "value": 8 },
                ],
                "bolibing": [
                    { "label": "来料统计", "value": 6 },
                    { "label": "入库量统计", "value": 7 },
                    { "label": "在制品统计", "value": 8 },
                ]
            },
            option: {
                size: 'small',
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                addBtn: false,
                menu: false,
                labelWidth: 120,
                searchLabelWidth: 60,
                menuWidth: 350,
                dialogWidth: 600,
                dialogClickModal: false,
                searchEnter: true,
                refreshBtn: false,
                excelBtn: false,
                filterBtn: false,
                gridBtn: false,
                index: false,
                searchShowBtn: false,
                header: false,
                column: []
            }
        }
    },
    methods: {
        tabPositionChange(value, event) {
            this.formInline.type = this.productionData[value][0].value
            this.option.column = productionCol[this.formInline.type]
        }
    },
    mounted() {
        this.formInline.type = this.productionData.rebiao[0].value
        this.option.column = productionCol[this.formInline.type]
    },
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 0 12px 0 12px !important;
}
</style>