焊缝统计图页面提交

dy

2025-04-16 42ffb741f9945eed69900f7f834e922247920288

焊缝统计图页面提交

 package.json

@@ -21,7 +21,7 @@
    "@vueuse/core": "10.11.0",
    "axios": "0.28.1",
    "clipboard": "2.0.11",
    "echarts": "5.5.1",
    "echarts": "^5.5.1",
    "element-plus": "2.7.6",
    "file-saver": "2.0.5",
    "fuse.js": "6.6.2",

 src/api/mainPlan/weldSeamEcharts/weldSeamEcharts.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from '@/utils/request'

// æŸ¥è¯¢ç„Šç¼åˆ—表
export function weldSeamEchartsList(query) {
  return request({
    url: '/aps/weldSeam/weldSeamEchartsList',
    method: 'get',
    params: query
  })
}

 src/views/mainPlan/weldSeamEcharts/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<template>
    <div class="app-container">
        <el-row>
            <!-- <el-col>
                <div style="width: 100%; height: 60px; text-align: center; border-bottom: 2px solid #ccc">
                    <h1>焊缝需求统计图表</h1>
                </div>
            </el-col> -->
            <el-col>
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="统计日期" style="width: 50%;">
                                <el-date-picker
                                    v-model="totalDay"
                                    value-format="YYYY-MM"
                                    type="monthrange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col  :span="12"  style="text-align: right;">
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col>
                <div ref="chartRef" v-show="showSearch" :style="{ width:width,height:height }"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
    import * as echarts from 'echarts';
    import { weldSeamEchartsList} from "@/api/mainPlan/weldSeamEcharts/weldSeamEcharts";
    const totalDay = ref([]);
    const data = reactive({
        form: {},
        queryParams: {
            produceYear: null,
            produceMonth: null,
        },
        rules: {
        }
    });
    const { queryParams } = toRefs(data);
    const chartRef = ref(null);
    const height = ref(document.documentElement.clientHeight - 180 + "px");
    const width = ref(document.documentElement.clientWidth - 240 + "px");
    
    const showSearch = ref(false);

    /* const dataList = [
                    ['product', '南通-订单-管路', '南通-订单-气柜', '南通-预测-管路', '南通-预测-气柜', '南通-预测-管路1', '南通-预测-气柜1', '南通-预测-管路2', '南通-预测-气柜2', '南通-预测-管路3', '南通-预测-气柜3', '南通-预测-管路4', '南通-预测-气柜4'],
                    ['4月', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8'],
                    ['5月', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8', '43.3', '85.8', '93.7', '93.7', '43.3', '85.8'],
                    ['6月', 86.4, 65.2, 82.5, 93.7],
                    ['7月', 72.4, 53.9, 39.1, 93.7],
                    ['8月', 72.4, 53.9, 39.1, 93.7],
               
                ] */

    // const series = [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]


    let myChart = null;

    const renderChart = (data,series) => {
        // åˆå§‹åŒ– ECharts å®žä¾‹
        myChart = echarts.init(chartRef.value);
        const option = {
            legend: {
                width: 1000,
                top: 30,
                left: 'center',
                type: "scroll",
                itemGap: 30,//图例的上下间距
                // itemWidth: 10,//图例左侧图块的长度
                // padding: 5,
            },
            tooltip: {},
            dataset: {
                source: data
            },
            xAxis: { type: 'category' },
            yAxis: { name: '数量'},
            grid: { top:'15%',bottom:'5%'},
            series: series,
            title: {
                text: '各生产基地管路与气柜需求对比图',
                left: 'center',
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {},
                    magicType: {
                        show: true,
                        type: ['line','bar','stack','tiled'],
                    },
                    restore: {//还原原始图表
                        show: true
                    },
                }
            }
        };

        // ä½¿ç”¨é…ç½®é¡¹æ˜¾ç¤ºå›¾è¡¨
        myChart.setOption(option);
    };

    /** æœç´¢æŒ‰é’®æ“ä½œ */
    function handleQuery() {
        showSearch.value = true;
        getList();
    }

    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    function resetQuery() {
        totalDay.value = [];
        // handleQuery();
        clearChart();
        showSearch.value = false;
    }

    function getList() {
        clearChart();
        queryParams.value.params = {};
        if (null != totalDay && '' != totalDay) {
            queryParams.value.params["startDay"] = totalDay.value[0];
            queryParams.value.params["endDay"] = totalDay.value[1];
        }
        weldSeamEchartsList(queryParams.value).then(response => {
            let dataList = [];
            let series = [];
            dataList = response.data;
            if(response.data.length === 1){
                showSearch.value = false;
            }else{
                for(let i=0;i<response.data[0].length-1;i++){
                    series.push({ type: 'bar' });
                }
                renderChart(dataList,series);
            }
        });
        
    }

    /**清除chart */
    function clearChart() {
        if (myChart) {
            myChart.dispose();
            myChart = null;
        }
    }
</script>