vue 列表、查询、折线图、导出excel

最新推荐文章于 2023-09-22 17:45:50 发布

原创

最新推荐文章于 2023-09-22 17:45:50 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客介绍了如何使用Vue.js进行列表展示（包含分页、序号列、条件筛选），实现查询功能（日/月/年报选择、后台数据回显），并利用Echarts创建多条折线图。同时，详细讲解了如何集成Excel导出功能，涵盖了从api.js到Java后端的完整流程，包括controller、service、mapper和mapper.xml的相关配置。

具体细节：
列表：分页、序号列、v-if条件展示
查询：日/月/年报下拉菜单、后台回显数据下拉菜单、日/月/年/时间选择器
折线图：echarts插件、多条折线图
导出excel：

页面：
在这里插入图片描述
vue：

<template>
    <section class="water-list">
        <el-form :inline="true" :model="water" style="margin-left: 10px;" size="small">

            <el-form-item label="统计报表">
                <el-select v-model="reroptType" placeholder="日报" @change="changeReport">
                    <el-option
                            v-for="item in reportOptions"
                            :key="item.reroptType"
                            :label="item.label"
                            :value="item.reroptType">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="站点名称">
                <el-select v-model="water.siteName" placeholder="请选择" style="width: 200px;">
                    <el-option
                            v-for="item in dataOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期">

                <el-date-picker v-if="showDate"
                        v-model="orderCountDate"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-time-picker v-if="showDate"
                        is-range
                        v-model="orderCountTime"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="HH:mm"
                        value-format="HH:mm">
                </el-time-picker>

                <el-date-picker v-if="showMonth"
                                v-model="orderCountMonth"
                                type="month"
                                placeholder="选择月份"
                                format="yyyy-MM"
                                value-format="yyyy-MM">
                </el-date-picker>

                <el-date-picker v-if="showYear"
                                v-model="orderCountYear"
                                type="year"
                                placeholder="选择年"
                                format="yyyy"
                                value-format="yyyy">
                </el-date-picker>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="searchWater" icon="el-icon-search">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
            <div id="myChart" :auto-resize="true" style="height: 350px;"></div>
        </div>
        <div class="content-box">
            <el-table :data="waterList" stripe fit v-loading="tableLoading">
                <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="siteName" label="站点名称" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" size="small">{
   
   {
   
   scope.row.siteName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="siteId" label="站点编号" align="center"></el-table-column>
                <el-table-column prop="ph" label="PH值" align="center"></el-table-column>
                <el-table-column prop="temperature" label="温度" align="center"></el-table-column>
                <el-table-column prop="turbidity" label="透明度" align="center"></el-table-column>
                <el-table-column prop="dissolvedOxygen" label="溶解氧" align="center"></el-table-column>
                <el-table-column prop="conductivity" label="氧化还原电位" align="center"></el-table-column>
                <el-table-column prop="carbon" label="总有机碳" align="center"></el-table-column>
                <el-table-column prop="permanganate" label="高锰酸盐指数" align="center"></el-table-column>
                <el-table-column prop="ammonia" label="氨氮" align="center"></el-table-column>
                <el-table-column prop="phosphorus" label="总磷" align="center"></el-table-column>
                <el-table-column prop="evaluate" label="水质评价" align="center"></el-table-column>
                <el-table-column prop="name" label="负责人" align="center"></el-table-column>
                <el-table-column v-if="this.reroptType == 1" prop="detectTime" label="监测时间" align="center"></el-table-column>
                <el-table-column v-if="this.reroptType != 1" prop="dates" label="监测时间" align="center"></el-table-column>
            </el-table>

            <!-- 页码区 -->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.curPage"
                        :page-sizes="[10, 15, 20, 30]"