[项目]Vue+ElementUi疫情监测平台纯前端项目(二)查询数据

2024-05-02 21:48
文章标签 javascript 数据 平台 项目 查询 vue 前端 frontend elementui 监测 疫情

本文主要是介绍[项目]Vue+ElementUi疫情监测平台纯前端项目(二)查询数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

查询数据

布局

又到该死的布局了 仁者见仁吧 反正 组件库一堆 条你自己喜欢的 我用了个表格和进度条 再有个导航栏就没了 样式也没大改 毕竟直男

<template><div><app-header></app-header><el-form :inline="true" :model="items" class="demo-form-inline" ref="etoak" ><el-form-item label="姓名:" prop="itemName"><el-inputv-model="items.itemName"placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="身体状况" prop="value"><el-select v-model="items.value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="反济日期 从:" prop="fromDate"><el-date-pickerv-model="items.fromDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="至" prop="toDate"><el-date-pickerv-model="items.toDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="体温" prop="tempreature"><el-select v-model="items.tempreature" placeholder="请选择"><el-optionv-for="item in tempreature":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="外地流入地区:" prop="location"><el-inputv-model="items.location"placeholder="请输入从哪来"></el-input></el-form-item><el-form-item><el-button type="primary" @click="fetchData">查询</el-button></el-form-item><el-form-item><el-button type="danger" @click="onReset('etoak')">重置</el-button></el-form-item></el-form><div style="display:flex;justify-content:center"><div id="percentage"><el-progress type="circle" :percentage="highRisk" color="#FF6347"></el-progress><el-progress type="circle" :percentage="normal" color="#6699FF"></el-progress><el-progresstype="circle":percentage="abnormal"color="#FFA500"></el-progress></div></div> <br /><el-table :data="temp" style="width: 100%" :cell-style="finalstyle" stripe><el-table-column label="照片"><template slot-scope="scope"><img :src="scope.row.avatar" style="height: 60px; width: 70px" /></template></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="idNumber" label="身份证号"></el-table-column><el-table-column prop="phone" label="联系电话"></el-table-column><el-table-columnprop="physicalCondition"label="身体状况"></el-table-column><el-table-column prop="bodyTemperature" label="体温"></el-table-column><el-table-column prop="inflowArea" label="外地流入地区"></el-table-column><el-table-column prop="address" label="在济南的住址"></el-table-column></el-table><br /><el-pagination:page-count=(total+pageSize-1)/pageSizelayout="  prev, pager, next":current-page="currentPage":page-size="pageSize"@current-change="pageChange":total="total"></el-pagination></div>
</template>

对应着看…反正大概就这样的吧 我觉得还挺好看反正…(滑稽)
在这里插入图片描述

拿取数据

首先展示数据这一块你得有数据啊 数据哪里来 从后台拿 说来就来 上dao层

import request from "@/utils/request"
export function SELECT(page,itemsPerPage,physicalCondition,bodyTemperature,startTime,endTime,inflowArea,name){return request({url:'/antiepidemic/get',method:'get',params:{page,itemsPerPage,physicalCondition,bodyTemperature,startTime,endTime,inflowArea,name}})
}; 
export function SELECTALL(){return request({url:'/antiepidemic/get',method:'get',})
}
export function SELECTcondition(physicalCondition,bodyTemperature,startTime,endTime,inflowArea,name){return request({url:'/antiepidemic/get',method:'get',params:{physicalCondition,bodyTemperature,startTime,endTime,inflowArea,name}})
}

然后我们得明确一点 那就是一进去页面我们就得展示数据 那么架子啊完毕我们就得触发函数so 得戳记钩子函数说来就来 奥在那之前我们得有自己的数组等着后台来的数据赋值进去 data(return{这里写})

      temp: [],

这个数组和上面表格绑定循环遍历回来的东西 分页我们得拿两个东西 符合条件一个是全部数据的条数 另一个是当前页面需要展示的数组 围绕这个来分页就简单了

 fetchAllData() {SELECTALL().then((response) => {this.total = this.allArr.length;});this.fetchData();}

写在create里面 刚上来需要展示的数据 第一个是拿total 第一页的temp 我们再调用第二个函数

fetchData() {/*查询时间要用的日期先用好*/let strFromDate = "";let strToDate = "";if (this.items.fromDate != "" && this.items.toDate != "") {/*getstrDate 还是那个问题我们需要Date转字符串 发给后台*/strFromDate = this.getstrDate(this.items.fromDate);strToDate = this.getstrDate(this.items.toDate);}SELECT(this.currentPage, /*默认1*/this.pageSize,/*我设的4 一页4条*/this.items.value,/*身体状况*/this.items.tempreature,/*体温*/strFromDate,/*来的时间*/strToDate,/*走的时间*/this.items.location,/*位置*/this.items.itemName/*名字 后台支持模糊查询*/).then((response) => {this.temp = response.data.data; /*拿到temp了 total和temp两全了*//*下面我是用来更新total的 比如用户输入了名字 我得拿到符合条件的全部数据的条数赋值给total而不再是全部数据*/SELECTcondition(this.items.value,this.items.tempreature,strFromDate,strToDate,this.items.location,this.items.itemName).then(response=>{this.total=response.data.data.length})});/*每次更新搜索完更新一下百分比 也是后台给办了 我们直接调*/PERCENTAGEALL(this.items.value,this.items.tempreature,strFromDate,strToDate,this.items.location,this.items.itemName).then((response) => {this.normal = response.data.data.normal;this.abnormal = response.data.data.abnormal;this.highRisk = response.data.data.highRisk;});}

分页的钩子函数 @current-page: 换页触发的函数

  pageChange(val) {this.currentPage = val;this.fetchData();}

每次换页就再触发一下fetchData() 更新一下temp[] 和total
点击重置按钮再次展示全部数据并且所有项

  onReset(formName) {this.$refs[formName].resetFields();this.fetchAllData();}

简单的很 调一下fetchAllData()就完了 和刚进入页面的逻辑一样 this.$refs[formName].resetFields();清空所有prop绑定值的表单项

–关于分页的小点

:page-count=(total+pageSize-1)/pageSize  分页公式 分几页根据total和pageSize来

分页就完了 总结一下 就是想办法拿符合查询条件全部数据的total 和 当前页面需要的temp[] 挺绕反正 动手试试

表格变色

el-table自带的属性没啥好说的拿row一行 再拿列看条件是否符合你的要求 变色
:cell-style=“finalstyle”

finalstyle: function ({ row, rowIndex }) {if (row["bodyTemperature"] > 37.4 &&row["physicalCondition"] === "普通感冒") {return {background: "#FFA500",};} else if (row["bodyTemperature"] > 37.4 &&row["physicalCondition"] === "呼吸困难腹泻") {return {background: "#FF6347",};}}

ok 没啥了 我贴一下代码吧

源码

<template><div><app-header></app-header><el-form :inline="true" :model="items" class="demo-form-inline" ref="etoak" ><el-form-item label="姓名:" prop="itemName"><el-inputv-model="items.itemName"placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="身体状况" prop="value"><el-select v-model="items.value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="反济日期 从:" prop="fromDate"><el-date-pickerv-model="items.fromDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="至" prop="toDate"><el-date-pickerv-model="items.toDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="体温" prop="tempreature"><el-select v-model="items.tempreature" placeholder="请选择"><el-optionv-for="item in tempreature":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="外地流入地区:" prop="location"><el-inputv-model="items.location"placeholder="请输入从哪来"></el-input></el-form-item><el-form-item><el-button type="primary" @click="fetchData">查询</el-button></el-form-item><el-form-item><el-button type="danger" @click="onReset('etoak')">重置</el-button></el-form-item></el-form><div style="display:flex;justify-content:center"><div id="percentage"><el-progress type="circle" :percentage="highRisk" color="#FF6347"></el-progress><el-progress type="circle" :percentage="normal" color="#6699FF"></el-progress><el-progresstype="circle":percentage="abnormal"color="#FFA500"></el-progress></div></div> <br /><el-table :data="temp" style="width: 100%" :cell-style="finalstyle" stripe><el-table-column label="照片"><template slot-scope="scope"><img :src="scope.row.avatar" style="height: 60px; width: 70px" /></template></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="idNumber" label="身份证号"></el-table-column><el-table-column prop="phone" label="联系电话"></el-table-column><el-table-columnprop="physicalCondition"label="身体状况"></el-table-column><el-table-column prop="bodyTemperature" label="体温"></el-table-column><el-table-column prop="inflowArea" label="外地流入地区"></el-table-column><el-table-column prop="address" label="在济南的住址"></el-table-column></el-table><br /><el-pagination:page-count=(total+pageSize-1)/pageSizelayout="  prev, pager, next":current-page="currentPage":page-size="pageSize"@current-change="pageChange":total="total"></el-pagination></div>
</template><script>
import AppHeader from "../components/AppHeader";import { SELECT } from "../api/select";
import {SELECTcondition} from "../api/select"
import { PERCENTAGEALL } from "../api/getPercentage";
import { SELECTALL } from "../api/select";export default {name: "Index",components: {AppHeader,},data() {return {allArr: [],temp: [],normal: 0,abnormal: 0,highRisk: 0,total: 0,items: {itemName: "",value: "",fromDate: "",toDate: "",tempreature: "",location: "",},/* 身体状况 */options: [{value: "正常",label: "正常",},{value: "普通感冒",label: "普通感冒",},{value: "呼吸困难腹泻",label: "呼吸困难腹泻",},],tempreature: [{value: "正常",label: "36℃~37.2℃",},{value: "低热",label: "37.4℃~38℃",},{value: "中热",label: "38.1℃~39℃",},{value: "高热",label: "39.1℃~41℃",},{value: "超高热",label: ">=41℃",},],currentPage: 1,pageSize: 4,};},methods: {getstrDate(date) {var year = date.getFullYear();var month = (date.getMonth() + 1).toString();var day = date.getDate().toString();if (month.length == 1) {month = "0" + month;}if (day.length == 1) {day = "0" + day;}var dateTime = year + "-" + month + "-" + day;return dateTime;},pageChange(val) {this.currentPage = val;this.fetchData();},onReset(formName) {this.$refs[formName].resetFields();this.fetchAllData();},finalstyle: function ({ row, rowIndex }) {if (row["bodyTemperature"] > 37.4 &&row["physicalCondition"] === "普通感冒") {return {background: "#FFA500",};} else if (row["bodyTemperature"] > 37.4 &&row["physicalCondition"] === "呼吸困难腹泻") {return {background: "#FF6347",};}},handleChange(val) {this.currentPage = val;this.fetchData();},fetchData() {let strFromDate = "";let strToDate = "";//let name = "";if (this.items.fromDate != "" && this.items.toDate != "") {strFromDate = this.getstrDate(this.items.fromDate);strToDate = this.getstrDate(this.items.toDate);}/*  if (this.items.itemName != "") {} */SELECT(this.currentPage,this.pageSize,this.items.value,this.items.tempreature,strFromDate,strToDate,this.items.location,this.items.itemName).then((response) => {this.temp = response.data.data;SELECTcondition(this.items.value,this.items.tempreature,strFromDate,strToDate,this.items.location,this.items.itemName).then(response=>{this.total=response.data.data.length})});PERCENTAGEALL(this.items.value,this.items.tempreature,strFromDate,strToDate,this.items.location,this.items.itemName).then((response) => {this.normal = response.data.data.normal;this.abnormal = response.data.data.abnormal;this.highRisk = response.data.data.highRisk;});},fetchAllData() {SELECTALL().then((response) => {//this.allArr = response.data.data;this.total = this.allArr.length;});this.fetchData();},/* 字符串转date */},created() {this.fetchAllData();},
};
</script><style scoped>
div#percentage{display: flex;justify-content: space-between;width: 500px;
}
</style>

ok这个简单的小系统就完活了

这篇关于[项目]Vue+ElementUi疫情监测平台纯前端项目(二)查询数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/955205。

相关文章

Python在二进制文件中进行数据搜索的实战指南

Python在二进制文件中进行数据搜索的实战指南

《Python在二进制文件中进行数据搜索的实战指南》在二进制文件中搜索特定数据是编程中常见的任务,尤其在日志分析、程序调试和二进制数据处理中尤为重要,下面我们就来看看如何使用Python实现这一功能吧... 目录简介1. 二进制文件搜索概述2. python二进制模式文件读取（rb）2.1 二进制模式与文本
阅读更多...
Django调用外部Python程序的完整项目实战

Django调用外部Python程序的完整项目实战

《Django调用外部Python程序的完整项目实战》Django是一个强大的PythonWeb框架,它的设计理念简洁优雅,：本文主要介绍Django调用外部Python程序的完整项目实战,文中通... 目录一、为什么 Django 需要调用外部 python 程序二、三种常见的调用方式方式 1：直接 im
阅读更多...
C#实现将XML数据自动化地写入Excel文件

C#实现将XML数据自动化地写入Excel文件

《C#实现将XML数据自动化地写入Excel文件》在现代企业级应用中,数据处理与报表生成是核心环节,本文将深入探讨如何利用C#和一款优秀的库,将XML数据自动化地写入Excel文件,有需要的小伙伴可以... 目录理解XML数据结构与Excel的对应关系引入高效工具：使用Spire.XLS for .NETC
阅读更多...
MySQL数据目录迁移的完整过程

MySQL数据目录迁移的完整过程

《MySQL数据目录迁移的完整过程》文章详细介绍了将MySQL数据目录迁移到新硬盘的整个过程,包括新硬盘挂载、创建新的数据目录、迁移数据（推荐使用两遍rsync方案）、修改MySQL配置文件和重启验证... 目录1，新硬盘挂载（如果有的话）2，创建新的 mysql 数据目录3，迁移 MySQL 数据（推荐两
阅读更多...
HTML5的input标签的`type`属性值详解和代码示例

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea（严格
阅读更多...
Python数据验证神器Pydantic库的使用和实践中的避坑指南

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻：当你的API接口又双叒崩了！2️⃣ 神兵天降：3行代码解决验证难题3️⃣ 深度
阅读更多...
MySQL中between and的基本用法、范围查询示例详解

MySQL中between and的基本用法、范围查询示例详解

《MySQL中betweenand的基本用法、范围查询示例详解》BETWEENAND操作符在MySQL中用于选择在两个值之间的数据,包括边界值,它支持数值和日期类型,示例展示了如何使用BETWEEN... 目录一、between and语法二、使用示例2.1、betwphpeen and数值查询2.2、be
阅读更多...
JAVA项目swing转javafx语法规则以及示例代码

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》：本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表（直接全局替换）实际转换示例（JFramejs → JavaFX）迁移建
阅读更多...
MySQL快速复制一张表的四种核心方法(包括表结构和数据)

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表（结构+数据）的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表（1... 目录一、mysql 复制表（结构+数据）的 4 种核心方法（面试结构化回答）方法 1：CREATE
阅读更多...
JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》：本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介：一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2