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

相关文章

Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
MyBatis-plus处理存储json数据过程

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异：对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理，目前我用的MP的版本
阅读更多...
Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...
sky-take-out项目中Redis的使用示例详解

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca
阅读更多...
GSON框架下将百度天气JSON数据转JavaBean

GSON框架下将百度天气JSON数据转JavaBean

《GSON框架下将百度天气JSON数据转JavaBean》这篇文章主要为大家详细介绍了如何在GSON框架下实现将百度天气JSON数据转JavaBean,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言一、百度天气jsON1、请求参数2、返回参数3、属性映射二、GSON属性映射实战1、类对象映
阅读更多...
C# LiteDB处理时间序列数据的高性能解决方案

C# LiteDB处理时间序列数据的高性能解决方案

《C#LiteDB处理时间序列数据的高性能解决方案》LiteDB作为.NET生态下的轻量级嵌入式NoSQL数据库,一直是时间序列处理的优选方案,本文将为大家大家简单介绍一下LiteDB处理时间序列数... 目录为什么选择LiteDB处理时间序列数据第一章：LiteDB时间序列数据模型设计1.1 核心设计原则
阅读更多...
Java+AI驱动实现PDF文件数据提取与解析

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程：从上传到评估的完整链路二、第一步：解析 PDF，提取体检报告内容1. 引入依赖2. 封装
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2