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

<template>
    <basic-container>
        <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">
        
              <template #rlueName5="{ row }">
                <el-text type="primary" size="medium">{{ row.rlueName5 }}</el-text>
            </template>
             <template #rlueName7="{ row }">
                <el-text type="error" size="medium">{{ row.rlueName7 }}</el-text>
            </template>
            <template #rlueName8="{ row }">
                <el-text type="warning" size="medium">{{ row.rlueName8 }}</el-text>
            </template>
            <template #rlueName9="{ row }">
                <el-text type="primary" size="medium">{{ row.rlueName9 }}</el-text>
            </template>
             <template #rlueName10="{ row }">
                <el-text type="success" size="medium">{{ row.rlueName10 }}</el-text>
            </template>
        </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 },
                ]
            },
             page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            option: {
                size: 'medium',
                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,
                searchLabelPosition:'left',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
                column: []
            },
            data: []
        }
    },
    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]
        
        this.data = [
            {
                rlueName1: '热表分厂',
                rlueName2: '吉振哲',
                rlueName3: '崔殿龙',
                rlueName4: '34005',
                rlueName5: '2480',
                rlueName6: '7',
                rlueName7: '12',
                rlueName8: '800',
                rlueName9: '3659',
                rlueName10: '99.36%',
            },
            {
                rlueName1: '热表分厂',
                rlueName2: '庄鞘豪',
                rlueName3: '崔殿龙',
                rlueName4: '34005',
                rlueName5: '301',
                rlueName6: '56',
                rlueName7: '30',
                rlueName8: '365',
                rlueName9: '750',
                rlueName10: '77.78%',
            },
            {
                rlueName1: '热表分厂',
                rlueName2: '郭家梁',
                rlueName3: '崔殿龙',
                rlueName4: '34005',
                rlueName5: '433',
                rlueName6: '7',
                rlueName7: '3',
                rlueName8: '259',
                rlueName9: '698',
                rlueName10: '97.75%',
            },
            {
                rlueName1: '热表分厂',
                rlueName2: '张牌',
                rlueName3: '崔殿龙',
                rlueName4: '34005',
                rlueName5: '620',
                rlueName6: '31',
                rlueName7: '68',
                rlueName8: '306',
                rlueName9: '1024',
                rlueName10: '83.63%',
            },
            {
                rlueName1: '热表分厂',
                rlueName2: '刘明',
                rlueName3: '崔殿龙',
                rlueName4: '34005',
                rlueName5: '416',
                rlueName6: '4',
                rlueName7: '7',
                rlueName8: '327',
                rlueName9: '751',
                rlueName10: '97.42%',
            },

        ]

        this.page.total = this.data.length
    },
}
</script>

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