基本完成健康监测、优化数据刷新逻辑、优化数据显示
This commit is contained in:
bicey
parent
384e599ccc
commit
7e2ae9e565
59
README.md
59
README.md
@ -11,7 +11,7 @@
|
||||
3. 饲养管理（前端基本完成，未接入后端）
|
||||
系统应提供饲养管理功能，包括饲养计划的制定、饲养任务的分配、饲养记录的管理等。这有助于确保动物获得适当的饲料和营养，保持健康生长。
|
||||
|
||||
4. 健康监测与预警（前端进行中，未接入后端）
|
||||
4. 健康监测与预警（前端基本完成，未接入后端）
|
||||
系统应具备健康监测功能，定期收集和分析动物的健康数据，如体温、心率、呼吸频率等。同时，系统应提供预警功能，当动物的健康数据出现异常时，及时提醒管理人员采取相应措施。
|
||||
|
||||
5. 统计分析（未开始）
|
||||
@ -225,63 +225,6 @@ health: {
|
||||
---
|
||||
|
||||
|
||||
# 开发进度
|
||||
|
||||
## 登录界面
|
||||
|
||||
- [x] 基本组件布局
|
||||
- [x] 基本方法
|
||||
- [ ] 对接后端
|
||||
- [ ] 优化界面样式
|
||||
|
||||
## 主页
|
||||
|
||||
### header
|
||||
|
||||
- [x] 基本界面
|
||||
- [x] 基本方法
|
||||
- [x] 优化界面样式
|
||||
|
||||
### aside
|
||||
|
||||
- [x] 基本界面
|
||||
- [x] 基本方法
|
||||
- [ ] 优化界面样式
|
||||
|
||||
### footer
|
||||
|
||||
- [x] 基本界面
|
||||
- [x] 优化界面样式
|
||||
|
||||
### main
|
||||
|
||||
- [x] 基本界面
|
||||
- [ ] 基本方法
|
||||
- [ ] 优化界面样式
|
||||
|
||||
## 内容页面
|
||||
|
||||
### 管理员
|
||||
|
||||
- [x] 数据展示
|
||||
- [x] 基本功能
|
||||
- [x] 基本方法
|
||||
- [ ] 接入后端
|
||||
|
||||
### 饲养员
|
||||
|
||||
- [x] 数据展示
|
||||
- [x] 基本功能
|
||||
- [x] 基本方法
|
||||
- [ ] 接入后端
|
||||
|
||||
### 兽医
|
||||
|
||||
- [ ] 数据展示
|
||||
- [ ] 基本功能
|
||||
- [ ] 基本方法
|
||||
- [ ] 接入后端
|
||||
|
||||
## 需求分析
|
||||
|
||||
一、引言
|
||||
|
||||
@ -62,10 +62,10 @@ export default {
|
||||
<el-form-item label="动物种类">
|
||||
<el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物体重（KG）">
|
||||
<el-form-item label="体重（KG）">
|
||||
<el-input-number v-model.number="form.weight" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物身高（M）">
|
||||
<el-form-item label="身高（M）">
|
||||
<el-input-number v-model.number="form.height" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物状态">
|
||||
|
||||
@ -46,14 +46,14 @@ export default {
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="生命周期记录号">
|
||||
<el-input v-model.number="form.id" type="number" placeholder="生命周期记录号" :disabled="edit || detail"/>
|
||||
<el-form-item label="记录号">
|
||||
<el-input v-model.number="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物ID">
|
||||
<el-input v-model.number="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
|
||||
<el-form-item label="动物ID">
|
||||
<el-input v-model.number="form.animalId" type="number" placeholder="动物ID" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物名">
|
||||
<el-input v-model="form.animalName" placeholder="记录的动物名" :disabled="detail"/>
|
||||
<el-form-item label="动物名称">
|
||||
<el-input v-model="form.animalName" placeholder="动物名称" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="生命阶段">
|
||||
<el-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
<el-form-item label="记录描述">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
:rows="4"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="记录描述"
|
||||
resize="none"
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
archives: [],
|
||||
order:1
|
||||
order:0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
if (this.data) {
|
||||
this.archives = copy(this.data)
|
||||
//默认按照时间降序
|
||||
sortByDateTime(this.archives)
|
||||
this.sort()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -86,9 +86,9 @@ export default {
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
动物名（ID）
|
||||
动物名(ID)
|
||||
</template>
|
||||
{{ a.animalName }}（{{a.animalId}}）
|
||||
{{ a.animalName }}({{a.animalId}})
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="饲养计划ID">
|
||||
<el-form-item label="计划ID">
|
||||
<el-input v-model.number="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划名称">
|
||||
|
||||
@ -10,10 +10,10 @@ export default {
|
||||
animalId: null,//int 记录的动物id
|
||||
animalName: '',//字符 记录的动物名称
|
||||
state: 0,//int 动物状态 0正常，1异常
|
||||
temperature:0,//double 体温
|
||||
breathRate:0,//int 呼吸频率
|
||||
heartRate:0,//int 心跳频率
|
||||
bloodPressure:0,//int // 血压
|
||||
temperature: 0,//double 体温
|
||||
breathRate: 0,//int 呼吸频率
|
||||
heartRate: 0,//int 心跳频率
|
||||
bloodPressure: 0,//int // 血压
|
||||
date: '',//字符 记录日期
|
||||
time: '',//字符，记录时间
|
||||
description: '',//字符 检测的描述，比如动物的症状
|
||||
@ -47,26 +47,30 @@ export default {
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="健康监测记录号">
|
||||
<el-input v-model.number="form.id" type="number" placeholder="健康监测记录号" :disabled="edit || detail"/>
|
||||
<el-form-item label="监测号">
|
||||
<el-input v-model.number="form.id" type="number" placeholder="监测号" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物ID">
|
||||
<el-input v-model.number="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
|
||||
<el-form-item label="动物ID">
|
||||
<el-input v-model.number="form.animalId" type="number" placeholder="动物ID" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物名">
|
||||
<el-input v-model="form.animalName" placeholder="记录的动物名" :disabled="detail"/>
|
||||
<el-form-item label="动物名称">
|
||||
<el-input v-model="form.animalName" placeholder="动物名称" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物体温（°C）">
|
||||
<el-form-item label="动物体温">
|
||||
<el-input-number v-model.number="form.temperature" :precision="1" :step="0.1" :min="0" :disabled="detail"/>
|
||||
<span class="unit">(°C)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="呼吸频率（次/分钟）">
|
||||
<el-form-item label="呼吸频率">
|
||||
<el-input-number v-model.number="form.breathRate" :min="0" :disabled="detail"/>
|
||||
<span class="unit">(次/分)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="心跳频率（次/分钟）">
|
||||
<el-form-item label="心跳频率">
|
||||
<el-input-number v-model.number="form.heartRate" :min="0" :disabled="detail"/>
|
||||
<span class="unit">(次/分)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物血压（mmHg）">
|
||||
<el-form-item label="动物血压">
|
||||
<el-input-number v-model.number="form.bloodPressure" :min="0" :disabled="detail"/>
|
||||
<span class="unit">(mmHg)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物状态">
|
||||
<el-radio-group v-model="form.state" :disabled="detail">
|
||||
@ -90,7 +94,7 @@ export default {
|
||||
<el-form-item label="记录描述">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
:rows="4"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="记录描述"
|
||||
resize="none"
|
||||
@ -104,5 +108,8 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.unit {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,11 +1,139 @@
|
||||
<script>
|
||||
import {copy, sortByDateTime} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooHealthTimeline"
|
||||
name: "ZooHealthTimeline",
|
||||
data() {
|
||||
return {
|
||||
healths: [],
|
||||
order: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sort() {
|
||||
//降序
|
||||
if (this.order === 0) {
|
||||
this.order++
|
||||
sortByDateTime(this.healths)
|
||||
return
|
||||
}
|
||||
//升序
|
||||
if (this.order === 1) {
|
||||
this.order--
|
||||
sortByDateTime(this.healths)
|
||||
this.healths.reverse()
|
||||
}
|
||||
},
|
||||
nodeType(type) {
|
||||
if (type === 0) {
|
||||
return 'success'
|
||||
}
|
||||
if (type === 1) {
|
||||
return 'warning'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.healths = copy(this.data)
|
||||
//默认按照时间降序
|
||||
this.sort()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
console.log('ZooHealthTimeline-beforeUnmount', this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="relative" style="height: 40px">
|
||||
<el-button type="primary" class="right" @click="sort()">按时间升 / 降序</el-button>
|
||||
</div>
|
||||
<el-scrollbar height="500px">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="h in healths"
|
||||
:type="nodeType(h.state)"
|
||||
style="margin-top: 15px;margin-right: 20px">
|
||||
<el-descriptions
|
||||
:title="h.state===0?'健康':'异常'"
|
||||
:column="2"
|
||||
size="small"
|
||||
border
|
||||
>
|
||||
<template #extra>
|
||||
<slot :health="h" name="operate"></slot>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
动物名(ID)
|
||||
</template>
|
||||
{{ h.animalName }}({{ h.animalId }})
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
状态
|
||||
</template>
|
||||
<span v-if="h.state===0" style="color: #67C23A">正常</span>
|
||||
<span v-else-if="h.state===1" style="color: #F56C6C">异常</span>
|
||||
<span v-else>未知</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
体温(°C)
|
||||
</template>
|
||||
<span v-if="h.temperature>=35 && h.temperature<=42"
|
||||
style="color: #67C23A">{{ h.temperature }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ h.temperature }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
呼吸频率(次/分)
|
||||
</template>
|
||||
<span v-if="h.breathRate>=10 && h.breathRate<=100"
|
||||
style="color: #67C23A">{{ h.breathRate }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ h.breathRate }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
心跳频率(次/分)
|
||||
</template>
|
||||
<span v-if="h.heartRate>=10 && h.heartRate<=140"
|
||||
style="color: #67C23A">{{ h.heartRate }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ h.heartRate }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
动物血压(mmHg)
|
||||
</template>
|
||||
<span v-if="h.bloodPressure>=70 && h.bloodPressure<=180"
|
||||
style="color: #67C23A">{{ h.bloodPressure }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ h.bloodPressure }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
描述
|
||||
</template>
|
||||
{{ h.description }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="left">监测号：{{ h.id }}</div>
|
||||
<div class="right">健康监测系统 记录于 {{ h.date }} {{ h.time }}</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-backtop :right="100" :bottom="100"/>
|
||||
</el-scrollbar>
|
||||
<div class="right" style="margin-top: 10px">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -27,8 +27,8 @@ export default {
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
detailDialogVisible: false,//详情对话框
|
||||
timelineDialogVisible:false,//时间线对话框
|
||||
timelineData:[]//时间线数据
|
||||
timelineDialogVisible: false,//时间线对话框
|
||||
timelineData: []//时间线数据
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -54,14 +54,14 @@ export default {
|
||||
return Tickets
|
||||
},
|
||||
//endregion
|
||||
...mapState(["animals",'archives','animalsTableData'])
|
||||
...mapState(["animals", 'archives', 'animalsTableData'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
// 搜索框存在输入，自动调用搜索(刷新数据包含搜索)
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.search();
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -116,9 +116,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getAnimals()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getAnimals()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
@ -129,7 +132,7 @@ export default {
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除动物：' + data.name + '（'+data.id+'）',
|
||||
'删除动物：' + data.name + '（' + data.id + '）',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -138,9 +141,12 @@ export default {
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
|
||||
//重新拉取数据
|
||||
this.getAnimals()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getAnimals()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
@ -177,9 +183,12 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getAnimals()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getAnimals()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
@ -195,7 +204,7 @@ export default {
|
||||
this.dialog.timelineData = []
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.archives.forEach(e=>{
|
||||
this.archives.forEach(e => {
|
||||
if (e.animalId === data.id) {
|
||||
this.dialog.timelineData.push(copy(e))
|
||||
}
|
||||
@ -248,12 +257,11 @@ export default {
|
||||
searchResult = searchResult2
|
||||
|
||||
this.updateAnimalsTableData(searchResult)
|
||||
this.getPagesData()
|
||||
},
|
||||
|
||||
//当前页切换时触发
|
||||
handleCurrentChange(val) {
|
||||
console.log('分页被切换',val)
|
||||
console.log('分页被切换', val)
|
||||
this.currentPage = val
|
||||
this.getPagesData()
|
||||
},
|
||||
@ -263,14 +271,25 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
const end = start + this.pageSize
|
||||
this.pagesData = this.animalsTableData.slice(start, end)
|
||||
}
|
||||
},
|
||||
|
||||
//刷新数据的方法
|
||||
refresh() {
|
||||
console.log('刷新数据')
|
||||
|
||||
//先拉取一遍数据
|
||||
this.getAnimals()
|
||||
|
||||
//可能输入了搜索关键字，故执行一次搜索
|
||||
this.search()
|
||||
|
||||
//获取结果的分页
|
||||
this.getPagesData()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getAnimals()
|
||||
|
||||
//获取分页后显示的数据
|
||||
this.getPagesData()
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -295,7 +314,7 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
<el-button :icon="Search" @click="refresh()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -303,13 +322,14 @@ export default {
|
||||
|
||||
<!-- <hr/>-->
|
||||
<div class="table">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}"
|
||||
:cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="动物ID" width="70"/>
|
||||
<el-table-column fixed prop="name" label="动物名称" width="100"/>
|
||||
<el-table-column prop="sex" label="性别" width="60"/>
|
||||
<el-table-column prop="species" label="动物种类" width="90"/>
|
||||
<el-table-column prop="weight" label="动物体重（KG）" width="130"/>
|
||||
<el-table-column prop="height" label="动物身高（M）" width="130"/>
|
||||
<el-table-column prop="weight" label="体重（KG）" width="110"/>
|
||||
<el-table-column prop="height" label="身高（M）" width="100"/>
|
||||
<el-table-column prop="state" label="动物状态" width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.state===0" style="color: #67C23A">正常</span>
|
||||
@ -318,14 +338,14 @@ export default {
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phase" label="生命阶段" width="90"/>
|
||||
<el-table-column prop="roleId" label="饲养员ID" width="120"/>
|
||||
<el-table-column prop="color" label="动物颜色" width="150">
|
||||
<el-table-column prop="roleId" label="饲养员ID" width="90"/>
|
||||
<el-table-column prop="color" label="动物颜色" width="130">
|
||||
<template #default="scope">
|
||||
<el-color-picker v-model="scope.row.color" disabled/>
|
||||
{{ scope.row.color }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="features" label="动物特征" width="200"/>
|
||||
<el-table-column prop="features" label="动物特征" width="300"/>
|
||||
<el-table-column fixed="right" label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<el-button link type="success" size="small" :icon="Tickets" @click="showTimeline(scope.row)">
|
||||
@ -396,13 +416,14 @@ export default {
|
||||
</el-dialog>
|
||||
|
||||
<!--查看动物所有记录-->
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案：'+dialog.dialogData.id" width="600" align-center draggable overflow
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案：'+dialog.dialogData.id" width="600" align-center
|
||||
draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveTimeline :data="dialog.timelineData">
|
||||
<!-- <template #operate="scope">-->
|
||||
<!-- <el-button type="primary" link @click="showEdit(scope.archive)">编辑</el-button>-->
|
||||
<!-- <el-button type="danger" link @click="delete_(scope.archive)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template #operate="scope">-->
|
||||
<!-- <el-button type="primary" link @click="showEdit(scope.archive)">编辑</el-button>-->
|
||||
<!-- <el-button type="danger" link @click="delete_(scope.archive)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="$router.push('/panel/archive')">
|
||||
跳转至动物档案
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
pagesData: [],
|
||||
pageSize: 20,//每页有多少条数据
|
||||
currentPage: 1,//当前页
|
||||
order:1,//排序相关参数
|
||||
order: 0,//排序相关参数
|
||||
|
||||
// 搜索框的输入
|
||||
searchInput: {
|
||||
@ -27,9 +27,9 @@ export default {
|
||||
dialogData: {},//弹窗数据
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
detailDialogVisible:false,//查询对话框
|
||||
timelineDialogVisible:false,//时间线对话框
|
||||
timelineData:[]//时间线数据
|
||||
detailDialogVisible: false,//查询对话框
|
||||
timelineDialogVisible: false,//时间线对话框
|
||||
timelineData: []//时间线数据
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -58,15 +58,19 @@ export default {
|
||||
return Timer
|
||||
},
|
||||
//endregion
|
||||
...mapState(["archives",'archivesTableData'])
|
||||
...mapState(["archives", 'archivesTableData'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
// 搜索框存在输入，自动调用搜索(刷新数据包含搜索)
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.search();
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
//切换排序，刷新数据
|
||||
order(){
|
||||
this.refresh()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -120,9 +124,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getArchives()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getArchives()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
@ -133,7 +140,7 @@ export default {
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除记录：' +data.id,
|
||||
'删除记录：' + data.id,
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -142,9 +149,12 @@ export default {
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
|
||||
//重新拉取数据
|
||||
this.getArchives()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getArchives()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
@ -181,9 +191,12 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getArchives()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getArchives()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
@ -199,7 +212,7 @@ export default {
|
||||
this.dialog.timelineData = []
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.archives.forEach(e=>{
|
||||
this.archives.forEach(e => {
|
||||
if (e.animalId === data.animalId) {
|
||||
this.dialog.timelineData.push(copy(e))
|
||||
}
|
||||
@ -252,24 +265,20 @@ export default {
|
||||
searchResult = searchResult2
|
||||
|
||||
this.updateArchivesTableData(searchResult)
|
||||
this.getPagesData()
|
||||
// this.getPagesData()
|
||||
},
|
||||
|
||||
//按时间排序
|
||||
timeSort(){
|
||||
//降序
|
||||
if (this.order===0){
|
||||
this.order++
|
||||
timeSort(val) {
|
||||
//0降序
|
||||
if (val === 0) {
|
||||
this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)))
|
||||
this.getPagesData()
|
||||
|
||||
return
|
||||
}
|
||||
//升序
|
||||
if (this.order===1){
|
||||
this.order--
|
||||
//1升序
|
||||
if (val === 1) {
|
||||
this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)).reverse())
|
||||
this.getPagesData()
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
@ -277,7 +286,7 @@ export default {
|
||||
//region
|
||||
//当前页切换时触发
|
||||
handleCurrentChange(val) {
|
||||
console.log('分页被切换',val)
|
||||
console.log('分页被切换', val)
|
||||
this.currentPage = val
|
||||
this.getPagesData()
|
||||
},
|
||||
@ -287,15 +296,35 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
const end = start + this.pageSize
|
||||
this.pagesData = this.archivesTableData.slice(start, end)
|
||||
}
|
||||
},
|
||||
//endregion
|
||||
|
||||
changeOrder(){
|
||||
if (this.order===0)
|
||||
this.order++
|
||||
else this.order--
|
||||
},
|
||||
|
||||
//刷新数据的方法
|
||||
refresh() {
|
||||
console.log('刷新数据')
|
||||
|
||||
//先拉取一遍数据
|
||||
this.getArchives()
|
||||
|
||||
//可能输入了搜索关键字，故执行一次搜索
|
||||
this.search()
|
||||
|
||||
//排序
|
||||
this.timeSort(this.order)
|
||||
|
||||
//获取结果的分页
|
||||
this.getPagesData()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getArchives()
|
||||
|
||||
//获取分页后显示的数据
|
||||
this.getPagesData()
|
||||
this.refresh()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -307,7 +336,7 @@ export default {
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" :icon="Timer" @click="timeSort" style="margin-right: 40px">按时间升 / 降序</el-button>
|
||||
<el-button type="primary" :icon="Timer" @click="changeOrder" style="margin-right: 40px">按时间升 / 降序</el-button>
|
||||
<el-input
|
||||
v-model="searchInput.keyword"
|
||||
style="width: 500px"
|
||||
@ -321,17 +350,18 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
<el-button :icon="Search" @click="refresh()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="生命周期记录号" width="100"/>
|
||||
<el-table-column fixed prop="animalId" label="记录的动物ID" width="120"/>
|
||||
<el-table-column prop="animalName" label="记录的动物名" width="110"/>
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}"
|
||||
:cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="记录号" width="70"/>
|
||||
<el-table-column fixed prop="animalId" label="动物ID" width="70"/>
|
||||
<el-table-column prop="animalName" label="动物名称" width="100"/>
|
||||
<el-table-column prop="phase" label="生命阶段" width="90"/>
|
||||
<el-table-column prop="state" label="动物状态" width="90">
|
||||
<template #default="scope">
|
||||
@ -342,7 +372,7 @@ export default {
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="记录类型" width="90"/>
|
||||
<el-table-column prop="date" label="记录日期" width="110"/>
|
||||
<el-table-column prop="time" label="记录时间" width="90" />
|
||||
<el-table-column prop="time" label="记录时间" width="90"/>
|
||||
<el-table-column prop="roleId" label="记录人ID" width="90"/>
|
||||
<el-table-column prop="description" label="记录描述" width="300"/>
|
||||
<el-table-column fixed="right" label="操作" width="250">
|
||||
@ -415,7 +445,8 @@ export default {
|
||||
</el-dialog>
|
||||
|
||||
<!--查看动物所有记录-->
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'生命周期档案：'+dialog.dialogData.animalId" width="600" align-center draggable overflow
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'生命周期档案：'+dialog.dialogData.animalId" width="600"
|
||||
align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveTimeline :data="dialog.timelineData">
|
||||
<template #operate="scope">
|
||||
@ -432,7 +463,6 @@ export default {
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -51,11 +51,12 @@ export default {
|
||||
...mapState(["breedingPlans",'breedingPlansTableData'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
// 搜索框存在输入，自动调用搜索(刷新数据包含搜索)
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.search();
|
||||
// this.search()
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -110,9 +111,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getBreedingPlans()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
@ -132,9 +136,12 @@ export default {
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
|
||||
//重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getBreedingPlans()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
@ -171,9 +178,12 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getBreedingPlans()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
@ -221,7 +231,7 @@ export default {
|
||||
searchResult = searchResult2
|
||||
|
||||
this.updateBreedingPlansTableData(searchResult)
|
||||
this.getPagesData()
|
||||
// this.getPagesData()
|
||||
},
|
||||
|
||||
//当前页切换时触发
|
||||
@ -236,15 +246,31 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
const end = start + this.pageSize
|
||||
this.pagesData = this.breedingPlansTableData.slice(start, end)
|
||||
},
|
||||
|
||||
//刷新数据的方法
|
||||
refresh(){
|
||||
console.log('刷新数据')
|
||||
|
||||
//先拉取一遍数据
|
||||
this.getBreedingPlans()
|
||||
|
||||
//可能输入了搜索关键字，故执行一次搜索
|
||||
this.search()
|
||||
|
||||
//获取结果的分页
|
||||
this.getPagesData()
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getBreedingPlans()
|
||||
// // 加载完成后拉取数据
|
||||
// this.getBreedingPlans()
|
||||
//
|
||||
// //获取分页后显示的数据
|
||||
// this.getPagesData()
|
||||
|
||||
//获取分页后显示的数据
|
||||
this.getPagesData()
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -253,7 +279,7 @@ export default {
|
||||
<div class="breeding-root">
|
||||
<div class="select">
|
||||
<div class="left">
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加饲养计划</el-button>
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加计划</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input
|
||||
@ -269,7 +295,7 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
<el-button :icon="Search" @click="refresh()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -277,8 +303,8 @@ export default {
|
||||
|
||||
<div class="table">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="饲养计划ID" width="100"/>
|
||||
<el-table-column fixed prop="name" label="饲养计划名称" width="200"/>
|
||||
<el-table-column fixed prop="id" label="计划ID" width="70"/>
|
||||
<el-table-column fixed prop="name" label="计划名称" width="150"/>
|
||||
<el-table-column prop="roleId" label="执行饲养员" width="100"/>
|
||||
<el-table-column prop="species" label="动物种类" width="90"/>
|
||||
<el-table-column prop="sex" label="性别" width="60"/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import {Delete, DocumentAdd, Document, Edit, Search, Tickets, Timer} from "@element-plus/icons-vue";
|
||||
import {mapActions,mapMutations,mapState} from "vuex";
|
||||
import {mapActions, mapMutations, mapState} from "vuex";
|
||||
import {copy, fuzzyMatching, sortByDateTime, splitKeyWords} from "@/utils/common.js";
|
||||
import ZooHealthFormDialog from "@/components/ZooHealthFormDialog.vue";
|
||||
import ZooHealthTimeline from "@/components/ZooHealthTimeline.vue";
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
pagesData: [],
|
||||
pageSize: 20,//每页有多少条数据
|
||||
currentPage: 1,//当前页
|
||||
order:1,//排序相关参数
|
||||
order: 0,//排序相关参数
|
||||
|
||||
// 搜索框的输入
|
||||
searchInput: {
|
||||
@ -27,9 +27,9 @@ export default {
|
||||
dialogData: {},//弹窗数据
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
detailDialogVisible:false,//查询对话框
|
||||
timelineDialogVisible:false,//时间线对话框
|
||||
timelineData:[]//时间线数据
|
||||
detailDialogVisible: false,//查询对话框
|
||||
timelineDialogVisible: false,//时间线对话框
|
||||
timelineData: []//时间线数据
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -58,15 +58,20 @@ export default {
|
||||
return Timer
|
||||
},
|
||||
//endregion
|
||||
...mapState(["healths",'healthsTableData'])
|
||||
...mapState(["healths", 'healthsTableData'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
// 搜索框存在输入，自动调用搜索(刷新数据包含搜索)
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.search();
|
||||
// this.search()
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
//切换排序，刷新数据
|
||||
order(){
|
||||
this.refresh()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -120,9 +125,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getHealths()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getHealths()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
@ -133,7 +141,7 @@ export default {
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除健康检测记录：' +data.id,
|
||||
'删除健康检测记录：' + data.id,
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -142,9 +150,12 @@ export default {
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
|
||||
//重新拉取数据
|
||||
this.getHealths()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getHealths()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
@ -181,9 +192,12 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getHealths()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getHealths()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
@ -199,7 +213,7 @@ export default {
|
||||
this.dialog.timelineData = []
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.healths.forEach(e=>{
|
||||
this.healths.forEach(e => {
|
||||
if (e.animalId === data.animalId) {
|
||||
this.dialog.timelineData.push(copy(e))
|
||||
}
|
||||
@ -252,23 +266,20 @@ export default {
|
||||
searchResult = searchResult2
|
||||
|
||||
this.updateHealthsTableData(searchResult)
|
||||
this.getPagesData()
|
||||
// this.getPagesData()
|
||||
},
|
||||
|
||||
//按时间排序
|
||||
timeSort(){
|
||||
//降序
|
||||
if (this.order===0){
|
||||
this.order++
|
||||
timeSort(val) {
|
||||
//0降序
|
||||
if (val === 0) {
|
||||
this.updateHealthsTableData(sortByDateTime(copy(this.healthsTableData)))
|
||||
this.getPagesData()
|
||||
return
|
||||
}
|
||||
//升序
|
||||
if (this.order===1){
|
||||
this.order--
|
||||
//1升序
|
||||
if (val === 1) {
|
||||
this.updateHealthsTableData(sortByDateTime(copy(this.healthsTableData)).reverse())
|
||||
this.getPagesData()
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
@ -276,7 +287,7 @@ export default {
|
||||
//region
|
||||
//当前页切换时触发
|
||||
handleCurrentChange(val) {
|
||||
console.log('分页被切换',val)
|
||||
console.log('分页被切换', val)
|
||||
this.currentPage = val
|
||||
this.getPagesData()
|
||||
},
|
||||
@ -286,17 +297,35 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
const end = start + this.pageSize
|
||||
this.pagesData = this.healthsTableData.slice(start, end)
|
||||
}
|
||||
},
|
||||
//endregion
|
||||
|
||||
changeOrder(){
|
||||
if (this.order===0)
|
||||
this.order++
|
||||
else this.order--
|
||||
},
|
||||
|
||||
//刷新数据的方法
|
||||
refresh() {
|
||||
console.log('刷新数据')
|
||||
|
||||
//先拉取一遍数据
|
||||
this.getHealths()
|
||||
|
||||
//可能输入了搜索关键字，故执行一次搜索
|
||||
this.search()
|
||||
|
||||
//排序
|
||||
this.timeSort(this.order)
|
||||
|
||||
//获取结果的分页
|
||||
this.getPagesData()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getHealths()
|
||||
|
||||
//获取分页后显示的数据
|
||||
this.getPagesData()
|
||||
|
||||
console.log()
|
||||
this.refresh()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -308,7 +337,7 @@ export default {
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="primary" :icon="Timer" @click="timeSort" style="margin-right: 40px">按时间升 / 降序</el-button>
|
||||
<el-button type="primary" :icon="Timer" @click="changeOrder" style="margin-right: 40px">按时间升 / 降序</el-button>
|
||||
<el-input
|
||||
v-model="searchInput.keyword"
|
||||
style="width: 500px"
|
||||
@ -322,39 +351,44 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
<el-button :icon="Search" @click="refresh()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="健康监测记录号" width="100"/>
|
||||
<el-table-column fixed prop="animalId" label="记录的动物ID" width="120"/>
|
||||
<el-table-column prop="animalName" label="记录的动物名" width="110"/>
|
||||
<el-table-column prop="temperature" label="体温（°C）" width="110">
|
||||
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}"
|
||||
:cell-style="{padding:'0'}">
|
||||
<el-table-column fixed prop="id" label="监测号" width="70"/>
|
||||
<el-table-column fixed prop="animalId" label="动物ID" width="70"/>
|
||||
<el-table-column prop="animalName" label="动物名称" width="100"/>
|
||||
<el-table-column prop="temperature" label="体温(°C)" width="80">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.temperature>=35 && scope.row.temperature<=42" style="color: #67C23A">{{scope.row.temperature}}</span>
|
||||
<span v-else style="color: #F56C6C">{{scope.row.temperature}}</span>
|
||||
<span v-if="scope.row.temperature>=35 && scope.row.temperature<=42"
|
||||
style="color: #67C23A">{{ scope.row.temperature }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ scope.row.temperature }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="breathRate" label="呼吸频率（次/分钟）" width="110">
|
||||
<el-table-column prop="breathRate" label="呼吸频率(次/分)" width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.breathRate>=10 && scope.row.breathRate<=100" style="color: #67C23A">{{scope.row.breathRate}}</span>
|
||||
<span v-else style="color: #F56C6C">{{scope.row.breathRate}}</span>
|
||||
<span v-if="scope.row.breathRate>=10 && scope.row.breathRate<=100"
|
||||
style="color: #67C23A">{{ scope.row.breathRate }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ scope.row.breathRate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="heartRate" label="心跳频率（次/分钟）" width="110">
|
||||
<el-table-column prop="heartRate" label="心跳频率(次/分)" width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.heartRate>=10 && scope.row.heartRate<=140" style="color: #67C23A">{{scope.row.heartRate}}</span>
|
||||
<span v-else style="color: #F56C6C">{{scope.row.heartRate}}</span>
|
||||
<span v-if="scope.row.heartRate>=10 && scope.row.heartRate<=140"
|
||||
style="color: #67C23A">{{ scope.row.heartRate }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ scope.row.heartRate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bloodPressure" label="动物血压（mmHg）" width="110">
|
||||
<el-table-column prop="bloodPressure" label="动物血压(mmHg)" width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.bloodPressure>=70 && scope.row.bloodPressure<=180" style="color: #67C23A">{{scope.row.bloodPressure}}</span>
|
||||
<span v-else style="color: #F56C6C">{{scope.row.bloodPressure}}</span>
|
||||
<span v-if="scope.row.bloodPressure>=70 && scope.row.bloodPressure<=180"
|
||||
style="color: #67C23A">{{ scope.row.bloodPressure }}</span>
|
||||
<span v-else style="color: #F56C6C">{{ scope.row.bloodPressure }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="动物状态" width="90">
|
||||
@ -365,12 +399,12 @@ export default {
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" label="记录日期" width="110"/>
|
||||
<el-table-column prop="time" label="记录时间" width="90" />
|
||||
<el-table-column prop="time" label="记录时间" width="90"/>
|
||||
<el-table-column prop="description" label="记录描述" width="300"/>
|
||||
<el-table-column fixed="right" label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<el-button link type="success" size="small" :icon="Tickets" @click="showTimeline(scope.row)">
|
||||
记录
|
||||
追踪
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetail(scope.row)">
|
||||
详情
|
||||
@ -436,21 +470,21 @@ export default {
|
||||
</ZooHealthFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!--查看动物所有记录-->
|
||||
<!-- <el-dialog v-model="dialog.timelineDialogVisible" :title="'健康监测档案：'+dialog.dialogData.animalId" width="600" align-center draggable overflow-->
|
||||
<!-- destroy-on-close>-->
|
||||
<!-- <ZooHealthTimeline :data="dialog.timelineData">-->
|
||||
<!-- <template #operate="scope">-->
|
||||
<!-- <el-button type="primary" link @click="showEdit(scope.archive)">编辑</el-button>-->
|
||||
<!-- <el-button type="danger" link @click="delete_(scope.archive)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <el-button @click="dialog.timelineDialogVisible = false">-->
|
||||
<!-- 关闭-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </ZooHealthTimeline>-->
|
||||
<!-- </el-dialog>-->
|
||||
<!-- 查看动物所有记录-->
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'健康监测档案：'+dialog.dialogData.animalId" width="600" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooHealthTimeline :data="dialog.timelineData">
|
||||
<template #operate="scope">
|
||||
<el-button type="primary" link @click="showEdit(scope.health)">编辑</el-button>
|
||||
<el-button type="danger" link @click="delete_(scope.health)">删除</el-button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="dialog.timelineDialogVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooHealthTimeline>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -53,11 +53,12 @@ export default {
|
||||
...mapState(["users", 'usersTableData'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
// 搜索框存在输入，自动调用搜索(刷新数据包含搜索)
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.search();
|
||||
// this.search()
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -114,9 +115,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getUsers()
|
||||
this.search()
|
||||
// //从后端重新拉取数据
|
||||
// this.getUsers()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
@ -136,9 +140,12 @@ export default {
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
|
||||
//重新拉取数据
|
||||
this.getUsers()
|
||||
this.search()
|
||||
// //重新拉取数据
|
||||
// this.getUsers()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
@ -176,9 +183,12 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
// 此处重新拉取数据
|
||||
this.getUsers()
|
||||
this.search()
|
||||
// // 此处重新拉取数据
|
||||
// this.getUsers()
|
||||
// this.search()
|
||||
|
||||
// 刷新数据
|
||||
this.refresh()
|
||||
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
@ -226,7 +236,7 @@ export default {
|
||||
searchResult = searchResult2
|
||||
|
||||
this.updateUsersTableData(searchResult)
|
||||
this.getPagesData()
|
||||
// this.getPagesData()
|
||||
},
|
||||
|
||||
//当前页切换时触发
|
||||
@ -241,14 +251,30 @@ export default {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
const end = start + this.pageSize
|
||||
this.pagesData = this.usersTableData.slice(start, end)
|
||||
},
|
||||
|
||||
//刷新数据的方法
|
||||
refresh(){
|
||||
console.log('刷新数据')
|
||||
|
||||
//先拉取一遍数据
|
||||
this.getUsers()
|
||||
|
||||
//可能输入了搜索关键字，故执行一次搜索
|
||||
this.search()
|
||||
|
||||
//获取结果的分页
|
||||
this.getPagesData()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getUsers()
|
||||
// // 加载完成后拉取数据
|
||||
// this.getUsers()
|
||||
//
|
||||
// //获取分页后显示的数据
|
||||
// this.getPagesData()
|
||||
|
||||
//获取分页后显示的数据
|
||||
this.getPagesData()
|
||||
this.refresh()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -275,7 +301,7 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
<el-button :icon="Search" @click="refresh()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
@ -17,24 +17,28 @@ const actions = {
|
||||
},
|
||||
//获取用户数据
|
||||
getUsers(context) {
|
||||
console.log('getUsers')
|
||||
//通过后端获取数据
|
||||
// context.commit('updateUsers', generateUsers())
|
||||
context.commit('updateUsers', context.state.users);
|
||||
},
|
||||
//获取动物数据
|
||||
getAnimals(context) {
|
||||
console.log('getAnimals')
|
||||
// 通过后端获取数据
|
||||
// context.commit('updateAnimals', generateAnimals())
|
||||
context.commit('updateAnimals', context.state.animals);
|
||||
},
|
||||
//获取饲养计划
|
||||
getBreedingPlans(context) {
|
||||
console.log('getBreedingPlans')
|
||||
// 通过后端获取数据
|
||||
// context.commit('updateBreedingPlans',generateBreedingPlans())
|
||||
context.commit('updateBreedingPlans',context.state.breedingPlans);
|
||||
},
|
||||
//获取动物档案
|
||||
getArchives(context) {
|
||||
console.log('getArchives')
|
||||
// 通过后端获取数据
|
||||
// context.commit('updateArchives', generateArchives())
|
||||
context.commit('updateArchives',context.state.archives);
|
||||
@ -42,6 +46,7 @@ const actions = {
|
||||
|
||||
//获取监控检测数据
|
||||
getHealths(context) {
|
||||
console.log('getHealths')
|
||||
// 通过后端获取数据
|
||||
// context.commit('updateHealths', generateHealths())
|
||||
context.commit('updateHealths',context.state.healths);
|
||||
|
||||
@ -224,15 +224,15 @@ export function generateArchives() {
|
||||
//异常的记录要修改一下监测数据
|
||||
if (health.state===1){
|
||||
health.temperature += Math.random()*2>1?
|
||||
Number((Math.random()*health.temperature).toFixed(1)):
|
||||
-Number((Math.random()*health.temperature).toFixed(1))
|
||||
Number((Math.random()*health.temperature*0.5).toFixed(1)):
|
||||
-Number((Math.random()*health.temperature*0.5).toFixed(1))
|
||||
health.temperature = Number(health.temperature.toFixed(1))
|
||||
health.breathRate += Math.random()*2>1?
|
||||
Math.floor(Math.random()*health.breathRate):-Math.floor(Math.random()*health.breathRate)
|
||||
Math.floor(Math.random()*health.breathRate*0.5):-Math.floor(Math.random()*health.breathRate*0.5)
|
||||
health.heartRate += health.heartRate += Math.random()*2>1?
|
||||
Math.floor(Math.random()*health.heartRate):-Math.floor(Math.random()*health.heartRate)
|
||||
Math.floor(Math.random()*health.heartRate*0.5):-Math.floor(Math.random()*health.heartRate*0.5)
|
||||
health.bloodPressure += health.bloodPressure += Math.random()*2>1?
|
||||
Math.floor(Math.random()*health.bloodPressure):-Math.floor(Math.random()*health.bloodPressure)
|
||||
Math.floor(Math.random()*health.bloodPressure*0.5):-Math.floor(Math.random()*health.bloodPressure*0.5)
|
||||
|
||||
}
|
||||
healths.push(health)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user