[项目]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。

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法：多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析
阅读更多...
SQL中如何添加数据(常见方法及示例)

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中，有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I
阅读更多...
Python使用vllm处理多模态数据的预处理技巧

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核
阅读更多...
MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
从入门到精通MySQL联合查询

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》：本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满
阅读更多...
MySQL查询JSON数组字段包含特定字符串的方法

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案（推荐）2. 模糊匹配方案参数化查询示例使用场景建议性能优
阅读更多...
深度解析Java项目中包和包之间的联系

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次，点赞13次，收藏8次。本文详细介绍了Java分层架构中的几个关键包：DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1
阅读更多...
mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
MyBatisPlus如何优化千万级数据的CRUD

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2