twin2025-ui/src/views/emp/stat/index.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px" style="background: #ededed;">
            <el-form-item label="时间" prop="empDate" style="margin-top: 18px;">
                <el-date-picker clearable
                                v-model="queryParams.empDate"
                                type="month"
                                value-format="YYYY-MM"
                                placeholder="请选择月份">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="margin-top: 18px;">
                <el-button type="primary" icon="Search" @click="handleQuery">统计</el-button>
            </el-form-item>
        </el-form>
        <div style="display: flex;">
            <div style="width: 33.3%;">
                <div class="caption">金额-月趋势统计曲线</div>
                <div ref="price_echarts_line" class="echarts_area"></div>
                <div class="caption">稼动率-月趋势统计曲线</div>
                <div ref="efficiency_echarts_line" class="echarts_area"></div>
                <div class="caption">产出米数-月趋势统计曲线</div>
                <div ref="lenght_echarts_line" class="echarts_area"></div>
            </div>
            <div style="width: 33%;margin-left: 0.3%;height: 700px;">
                <div class="caption">四分位分析</div>
                <div ref="echarts41" class="echarts_4"></div>
                <div ref="echarts42" class="echarts_4"></div>
                <div ref="echarts43" class="echarts_4"></div>
            </div>
            <div style="width: 33%;margin-left: 0.3%;">
                <div class="caption">员工排名</div>
                
                    <el-table :data="empToplist" height="680px">
                      <el-table-column prop="empName"  align="center" label="姓名"/>
                      <el-table-column prop="totalPrice"  align="center" label="金额"/>
                      <el-table-column prop="length"  align="center" label="米数"/>
                      <el-table-column prop="efficiency"  align="center" label="平均嫁动">
                        <template #default="scope">
                            {{ scope.row.efficiency*100 }} %
                        </template>
                      </el-table-column>
                    </el-table>
            </div>
        </div>
    </div>
</template>
<style>
    .caption{
        width: 100%;
        margin-left: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        color: #666;
        border-left: 3px solid #8282bd;
        padding-left: 5px;
    }
    .echarts_area{
        width: 100%;height: 200px;padding: 15px;
        border: 1px solid #ededed;
        border-radius: 4px;
        background-color: #f3f0f078;
    }
    .echarts_4{
        width: 100%;
        height: 33%;
        padding: 15px;
        border: 1px solid #ededed;
        border-radius: 4px;
        background-color: #f3f0f078;
    }

</style>
<script setup name="Emp">
    import {ref,reactive} from "vue";    
    import { ElMessage } from 'element-plus';
    import {monthCalc} from "@/api/emp/empCalc";
    import * as echarts from 'echarts';
    let queryParams=reactive({empDate:''});
    const price_echarts_line=ref(null);
    const efficiency_echarts_line=ref(null);
    const lenght_echarts_line=ref(null);
    const echarts41 = ref(null);
    const echarts42 = ref(null);
    const echarts43 = ref(null);
    let empToplist =ref([]);

    function init(){
        queryParams.empDate=new Date().Format('yyyy-MM');
        getData();
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        getData();
    }

    function getData(){
        if(queryParams.empDate==null || queryParams.empDate==''){
            let msg = ElMessage({
                message: "请选择月份！",
                type: "error",
            })
            return;
        }
        let msg = ElMessage({
                    message: "正在查询数据中...",
                    type: "info",
                    duration:0,
        })
        console.log('queryParams.value.empDate:',queryParams.empDate)
        monthCalc(queryParams.empDate).then((res)=>{
            msg.close();
            if(res.code!=200){
                ElMessage({
                    message: "数据查询失败！",
                    type: "error"
                })
                return;
            }
            let tmpLst = [];
            
            for(let i=0;i<res.data.emp.length;i++){
                var x = res.data.emp[i];
                var tmpItem=x;
                for(let k in x){
                    if(k=='empName') tmpItem[k] = x[k];
                    else tmpItem[k] = (x[k]*1).toFixed(2);
                }                
                tmpLst.push(tmpItem);
            }
            empToplist.value = tmpLst;
            loadLine(res.data.trend);
            load4(res.data.trend);
        }).catch(()=>{
            msg.close();
            ElMessage({
                    message: "数据查询时发生错误！",
                    type: "error"
            })
        })
    }

    function loadLine(data){
        var v_series = [];
        var v_series_efficiency = [];
        var v_series_length = [];
        var times = [];
        //总计曲线
        var price=[];
        var efficiency=[];
        var length=[];
        var priceA=[];
        var efficiencyA=[];
        var lengthA=[];
        var priceB=[];
        var efficiencyB=[];
        var lengthB=[];
        for (var i = 0; i < data.length; i++) {
            var tv = data[i]['empDate'].split("-")
            times.push(tv[1] + "-" + tv[2])
            price.push(data[i]['totalPrice']);
            efficiency.push(data[i]['efficiency']);
            length.push(data[i]['length']);
            priceA.push(data[i]['totalPriceA']);
            efficiencyA.push(data[i]['efficiencyA']);
            lengthA.push(data[i]['lengthA']);
            priceB.push(data[i]['totalPriceB']);
            efficiencyB.push(data[i]['efficiencyB']);
            lengthB.push(data[i]['lengthB']);
        }
        v_series.push({name: "总金额",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: price,
                        itemStyle: {
                            normal: {
                                color: 'red', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'red' // 这里同时设置线头的颜色
                                }
                            }
                        }});
        v_series.push({name: "A班金额",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: priceA,
                        itemStyle: {
                            normal: {
                                color: 'black', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'black' // 这里同时设置线头的颜色
                                }
                            }
                        }});
        v_series.push({name: "B班金额",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: priceB,
                        itemStyle: {
                            normal: {
                                color: 'blue', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'blue' // 这里同时设置线头的颜色
                                }
                            }
                        }
        });
        v_series_efficiency.push(
            {name: "总稼动率",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: efficiency,
                        itemStyle: {
                            normal: {
                                color: 'red', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'red' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );
        v_series_efficiency.push(
            {name: "A班稼动率",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: efficiencyA,
                        itemStyle: {
                            normal: {
                                color: 'black', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'black' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );
        v_series_efficiency.push(
            {name: "B班稼动率",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: efficiencyB,
                        itemStyle: {
                            normal: {
                                color: 'blue', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'blue' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );
        v_series_length.push(
            {name: "总产出米数",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: length,
                        itemStyle: {
                            normal: {
                                color: 'red', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'red' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );
        v_series_length.push(
            {name: "A班产出米数",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: lengthA,
                        itemStyle: {
                            normal: {
                                color: 'black', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'black' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );
        v_series_length.push(
            {name: "B班产出米数",type: 'line',smooth: true,
                        //symbol: 'none',
                        data: lengthB,
                        itemStyle: {
                            normal: {
                                color: 'blue', // 这里设置折线的颜色
                                lineStyle: {
                                    color: 'blue' // 这里同时设置线头的颜色
                                }
                            }
            }}
        );

        var opt = {
                        title: {
                            show: false, //不显示标题
                            text: '',
                            textStyle: {
                                color: "rgb(89, 151, 229)",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "30px"
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                let xv='';
                                let result = '';
                                params.forEach(function (item) {
                                    xv=`${item.name}<br/>`;
                                    result += ` ${item.marker}  ${item.value}<br/>`;
                                });
                                return xv+result;
                            }
                        },
                        legend: {
                            show: true, //不显示图例
                            inactiveColor: "#04417A",
                            data: ["总金额","A班金额","B班金额"],
                            textStyle: {color: "#999",fontSize:16},
                            top: "0px"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                rotate: 45,
                                color: "#999"
                            },
                            data: times
                        },
                        yAxis: {
                            type: 'value',
                            nameTextStyle: {
                                color: "#999"
                            },
                            axisLabel: {
                                color: "#999"
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#7DA7CD",
                                    type: "dashed",
                                    width: 1
                                }
                            }
                        },
                        series: v_series
        };
        var opt_efficiency = {
                        title: {
                            show: false, //不显示标题
                            text: '',
                            textStyle: {
                                color: "rgb(89, 151, 229)",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "30px"
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                let xv='';
                                let result = '';
                                params.forEach(function (item) {
                                    xv=`${item.name}<br/>`;
                                    result += ` ${item.marker}  ${item.value}<br/>`;
                                });
                                return xv+result;
                            }
                        },
                        legend: {
                            show: true, //不显示图例
                            inactiveColor: "#04417A",
                            data: ["总稼动率","A班稼动率","B班稼动率"],
                            textStyle: {color: "#999",fontSize:16},
                            top: "0px"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                rotate: 45,
                                color: "#999"
                            },
                            data: times
                        },
                        yAxis: {
                            type: 'value',
                            nameTextStyle: {
                                color: "#999"
                            },
                            axisLabel: {
                                color: "#999"
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#7DA7CD",
                                    type: "dashed",
                                    width: 1
                                }
                            }
                        },
                        series: v_series_efficiency
        };   
        var opt_length = {
                        title: {
                            show: false, //不显示标题
                            text: '',
                            textStyle: {
                                color: "rgb(89, 151, 229)",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "30px"
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                let xv='';
                                let result = '';
                                params.forEach(function (item) {
                                    xv=`${item.name}<br/>`;
                                    result += ` ${item.marker}  ${item.value}<br/>`;
                                });
                                return xv+result;
                            }
                        },
                        legend: {
                            show: true, //不显示图例
                            inactiveColor: "#04417A",
                            data: ["总产出米数","A班产出米数","B班产出米数"],
                            textStyle: {color: "#999",fontSize:16},
                            top: "0px"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                rotate: 45,
                                color: "#999"
                            },
                            data: times
                        },
                        yAxis: {
                            type: 'value',
                            nameTextStyle: {
                                color: "#999"
                            },
                            axisLabel: {
                                color: "#999"
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#7DA7CD",
                                    type: "dashed",
                                    width: 1
                                }
                            }
                        },
                        series: v_series_length
        };      
        setTimeout(() => {
            var echartsEle = echarts.init(price_echarts_line.value);
            echartsEle.setOption(opt);
            var echartsEle2 = echarts.init(efficiency_echarts_line.value);
            echartsEle2.setOption(opt_efficiency);
            var echartsEle3 = echarts.init(lenght_echarts_line.value);
            echartsEle3.setOption(opt_length);
        },500);
    }

    function load4(data){
        var price=[];
        var efficiency=[];
        var length=[];
        var priceA=[];
        var efficiencyA=[];
        var lengthA=[];
        var priceB=[];
        var efficiencyB=[];
        var lengthB=[];
        for (var i = 0; i < data.length; i++) {
            price.push(data[i]['totalPrice']);
            efficiency.push(data[i]['efficiency']);
            length.push(data[i]['length']);
            priceA.push(data[i]['totalPriceA']);
            efficiencyA.push(data[i]['efficiencyA']);
            lengthA.push(data[i]['lengthA']);
            priceB.push(data[i]['totalPriceB']);
            efficiencyB.push(data[i]['efficiencyB']);
            lengthB.push(data[i]['lengthB']);
        }
        var option = {
            title: {
                            show: true, //不显示标题
                            text: '金额分析',
                            textStyle: {
                                color: "#666",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "center"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var res = '';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[0].toFixed(2) + '<br/>';
                    res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
                    res += '中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：' + params.data[2].toFixed(2) + '<br/>';
                    res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[4].toFixed(2);
                    return res;
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['总金额', 'A班金额', 'B班金额'] // X轴数据，每个项目对应一个箱形图
            },
            yAxis: {},
            series: [
                {
                    name: '箱形图',
                    type: 'boxplot',
                    data: [
                        price, // 项目A的数据
                        priceA, // 项目B的数据
                        priceB, // 项目C的数据
                    ]
                }
            ]
        };
        var option2 = {
            title: {
                            show: true, //不显示标题
                            text: '产出米数分析',
                            textStyle: {
                                color: "#666",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "center"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var res = '';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[0].toFixed(2) + '<br/>';
                    res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
                    res += '中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：' + params.data[2].toFixed(2) + '<br/>';
                    res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[4].toFixed(2);
                    return res;
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['总产出', 'A班产出', 'B班产出'] // X轴数据，每个项目对应一个箱形图
            },
            yAxis: {},
            series: [
                {
                    name: '箱形图',
                    type: 'boxplot',
                    data: [
                        length, // 项目A的数据
                        lengthA, // 项目B的数据
                        lengthB, // 项目C的数据
                    ]
                }
            ]
        };
        var option3 = {
            title: {
                            show: true, //不显示标题
                            text: '嫁动率分析',
                            textStyle: {
                                color: "#666",
                                fontWeight: "bold"
                            },
                            top: "0px",
                            left: "center"
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '2%',
                            top: '16%',
                            containLabel: true
                        },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var res = '';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[0].toFixed(2) + '<br/>';
                    res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
                    res += '中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：' + params.data[2].toFixed(2) + '<br/>';
                    res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
                    res += '最&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值：' + params.data[4].toFixed(2);
                    return res;
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['总嫁动率', 'A班嫁动率', 'B班嫁动率'] // X轴数据，每个项目对应一个箱形图
            },
            yAxis: {},
            series: [
                {
                    name: '箱形图',
                    type: 'boxplot',
                    data: [
                        efficiency, // 项目A的数据
                        efficiencyA, // 项目B的数据
                        efficiencyB, // 项目C的数据
                    ]
                }
            ]
        };
        setTimeout(() => {
            var echartsEle = echarts.init(echarts41.value);
            echartsEle.setOption(option);
            var echartsEle2 = echarts.init(echarts42.value);
            echartsEle2.setOption(option2);
            var echartsEle3 = echarts.init(echarts43.value);
            echartsEle3.setOption(option3);

        },500);
    }

    init();
</script>