1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/mdc/components/Shift.vue

@@ -1,18 +1,19 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-20 11:31:18
 * @LastEditTime: 2024-06-04 21:40:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Shift.vue
-->
<template>
    <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 size="small" @click="btnListActive = item.id"
                    :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
                        item.title }}</el-button>
            </el-button-group>
        </el-col>
        <el-col>
        <el-col style="margin-top: 12px;">
            <el-card shadow="never">
                <scEcharts height="300px" :option="option2"></scEcharts>
            </el-card>
@@ -29,7 +30,7 @@
                        <span>{{ scope.row.nameData['1'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="效率">
                <el-table-column prop="" :label="colname">
                    <template #default="scope">
                        <span>{{ scope.row.data['1'] }}</span>
                    </template>
@@ -39,7 +40,7 @@
                        <span>{{ scope.row.nameData['2'] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="效率">
                <el-table-column prop="" :label="colname">
                    <template #default="scope">
                        <span>{{ scope.row.data['2'] }}</span>
                    </template>
@@ -52,6 +53,25 @@
<script>
import scEcharts from '@/components/scEcharts';
export default {
    props: {
        url: {
            default: '/api/blade-mdc/efficiency-analysis',
            type: String,
        },
        colname: {
            default: '',
            type: String,
        },
        options: {
            default() {
                return {}
            },
        },
        datasetNum: {
            type: Number,
            default: 100
        }
    },
    components: {
        scEcharts
    },
@@ -63,37 +83,26 @@
            btnList: [],
            btnListActive: '',
            chartsData: [],
            option2: {
                title: {
                    text: '统计图表',
                    subtext: '基础折线图',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'line',
                },
                {
                    data: [110, 180, 120, 120, 60, 90, 110],
                    type: 'line',
                }]
            },
            option2: null,
        }
    },
    watch: {
        btnListActive(val) {
            this.query({
                ...this.params,
                startDate: val,
                endDate: val
            })
            this.queryChart({
                ...this.params,
                startDate: val,
                endDate: val
            })
        }
    },
    methods: {
        init(params) {
            this.params = params
            this.getTime({
                endDate: params.endDate,
                startDate: params.startDate,
@@ -117,7 +126,7 @@
                ...data
            }).then(res => {
                if (res.code === 200) {
                    this.btnList = res.data
                    this.btnList = res.data.reverse()
                    this.btnListActive = res?.data?.[0]?.id
                }
            })
@@ -131,8 +140,17 @@
                queryType: 0,
                statisticalMethod: this.statisticalMethod
            }
            return this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
            return this.$HTTP.post(this.url, dataSend, { params }).then(res => {
                this.chartsData = res.data.items.records
                let option2 = {
                    ...this.options
                }
                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] * this.datasetNum, v.data[2] === '-' ? 0 : v.data[2] * this.datasetNum])
                });
                this.option2 = option2
                console.log(option2)
            })
        },
        query(params) {
@@ -152,7 +170,7 @@
                    delete dataSend.size
                    delete dataSend.order
                    delete dataSend.prop
                    return await this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
                    return await this.$HTTP.post(this.url, dataSend, { params }).then(res => {
                        return {
                            ...res,
                            data: res.data.items