chengxiangling
2025-05-16 e875ccb607bc37c9515217277aafb3d4204c6d14
src/views/mainPlan/weldSeamEcharts/index.vue
@@ -7,10 +7,10 @@
                </div>
            </el-col> -->
            <el-col>
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-position="left">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="统计日期" style="width: 50%;">
                        <el-col :span="6">
                            <el-form-item label="统计日期" :style="{ width: '100%' }">
                                <el-date-picker
                                    v-model="totalDay"
                                    value-format="YYYY-MM"
@@ -21,22 +21,24 @@
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col  :span="12"  style="text-align: right;">
                            <el-form-item>
                        <!-- <el-col  :span="16"  style="text-align: right;">
                            <el-form-item class="column-with-margin">
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                        </el-col> -->
                    </el-row>
                </el-form>
            </el-col>
            <el-col>
                <div ref="chartRef" v-show="showSearch" :style="{ width:width,height:height }"></div>
                <div ref="chartRef" :style="{ width:width,height:height,border: '1px solid #ccc' }" v-loading="loading">
                    <div style="text-align: center;margin-top: 50px;color: #999;">暂无数据</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
<script setup name="WeldSeamEcharts">
    import * as echarts from 'echarts';
    import { weldSeamEchartsList} from "@/api/mainPlan/weldSeamEcharts/weldSeamEcharts";
    const totalDay = ref([]);
@@ -55,6 +57,7 @@
    const width = ref(document.documentElement.clientWidth - 240 + "px");
    
    const showSearch = ref(false);
    const loading = ref(false);
    /* const dataList = [
                    ['product', '南通-订单-管路', '南通-订单-气柜', '南通-预测-管路', '南通-预测-气柜', '南通-预测-管路1', '南通-预测-气柜1', '南通-预测-管路2', '南通-预测-气柜2', '南通-预测-管路3', '南通-预测-气柜3', '南通-预测-管路4', '南通-预测-气柜4'],
@@ -100,19 +103,20 @@
                show: true,
                feature: {
                    saveAsImage: {},
                    magicType: {
                    /* magicType: {
                        show: true,
                        type: ['line','bar','stack','tiled'],
                    },
                    restore: {//还原原始图表
                        show: true
                    },
                    }, */
                }
            }
        };
        // 使用配置项显示图表
        myChart.setOption(option);
        loading.value = false;
    };
    /** 搜索按钮操作 */
@@ -130,9 +134,10 @@
    }
    function getList() {
        loading.value = true;
        clearChart();
        queryParams.value.params = {};
        if (null != totalDay && '' != totalDay) {
        if (null != totalDay.value && '' != totalDay.value) {
            queryParams.value.params["startDay"] = totalDay.value[0];
            queryParams.value.params["endDay"] = totalDay.value[1];
        }
@@ -157,6 +162,12 @@
        if (myChart) {
            myChart.dispose();
            myChart = null;
            chartRef.value.innerHTML = '<div style="text-align: center;margin-top: 50px;color: #999;">暂无数据</div>';
        }
    }
</script>
</script>
<style scoped>
.column-with-margin {
  margin-right: 0px;
}
</style>