udpate

gaoshp

2024-04-20 ab1ea48f5a77cd02ffbadc0622ac2f2ecec45a81

 src/views/mdc/components/Time.vue

@@ -1,18 +1,182 @@
<!--
 * @Date: 2024-04-18 21:52:28
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-18 21:54:53
 * @LastEditTime: 2024-04-20 19:43:36
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Time.vue
-->
<template>
    <div>

    </div>
    <el-row>
        <el-col>
            <el-button-group>
                <el-button :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
                    item.title }}</el-button>
            </el-button-group>
        </el-col>
        <el-col style="margin-top: 12px;">
            <el-card shadow="never">
                <scEcharts height="300px" :option="option2"></scEcharts>
            </el-card>
        </el-col>
        <el-col>
            统计数据
        </el-col>
        <el-col>
            <scTable ref="table" row-key="id" border :params="params" :apiObj="apiObj" stripe>
                <el-table-column prop="workstationCode" label="工位编码" />
                <el-table-column prop="workstationName" label="工位名称" />
                <el-table-column prop="" label="班次1">
                    <template #default="scope">
                        <span>{{ scope.row.nameData['1'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="效率">
                    <template #default="scope">
                        <span>{{ scope.row.data['1'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="班次2">
                    <template #default="scope">
                        <span>{{ scope.row.nameData['2'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="效率">
                    <template #default="scope">
                        <span>{{ scope.row.data['2'] }}</span>
                    </template>
                </el-table-column>
            </scTable>
        </el-col>
    </el-row>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
    components: {
        scEcharts
    },
    data() {
        return {
            apiObj: '',
            params: {},
            statisticalMethod: 'SHIFT',
            btnList: [],
            btnListActive: '',
            chartsData: [],
            option2: null,
        }
    },
    methods: {
        init(params) {
            this.getTime({
                endDate: params.endDate,
                startDate: params.startDate,
                statisticalMethod: this.statisticalMethod
            }).then(res => {
                this.query({
                    ...params,
                    startDate: this.btnListActive,
                    endDate: this.btnListActive
                })
                this.queryChart({
                    ...params,
                    startDate: this.btnListActive,
                    endDate: this.btnListActive
                })
            })

        },
        getTime(data) {
            return this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
                ...data
            }).then(res => {
                if (res.code === 200) {
                    this.btnList = res.data
                    this.btnListActive = res?.data?.[0]?.id
                }
            })
        },
        queryChart(data) {
            let params = {
                size: -1
            }
            let dataSend = {
                ...data,
                queryType: 0,
                statisticalMethod: this.statisticalMethod
            }
            return this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
                this.chartsData = res.data.items.records
                let option2 = {
                    legend: {
                        type: 'plain',
                    },
                    title: {
                        text: '统计图表',
                        subtext: '',
                    },
                    grid: {
                        top: '80px'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [
                        { type: 'slider' }
                    ],
                    dataset: {
                        source: [
                            ['product', '班次1', '班次2'],

                        ]
                    },
                    series: [{
                        type: 'bar',
                    },
                    {
                        type: 'bar',
                    }]
                }
                option2.dataset.source = [['product', '班次1', '班次2']]
                res.data.items.records.forEach(v => {
                    option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[1]])
                });
                this.option2 = option2
            })
        },
        query(params) {
            this.params = params
            this.apiObj = {
                get: async (data) => {
                    let params = {
                        current: data.current,
                        size: data.size
                    }
                    let dataSend = {
                        ...data,
                        queryType: 1,
                        statisticalMethod: this.statisticalMethod
                    }
                    delete dataSend.current
                    delete dataSend.size
                    delete dataSend.order
                    delete dataSend.prop
                    return await this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
                        return {
                            ...res,
                            data: res.data.items
                        }
                    })
                }
            }
        }
    }
}
</script>