编写健康监测界面

README.md

@@ -106,7 +106,7 @@
 ## 饲养管理
 ---
 
-需要后端创建一个表，为了节省时间不需要设置外键什么的,参考如下
+需要后端创建一个饲养计划表，为了节省时间不需要设置外键什么的,参考如下
 ```
 breedingPlan: {
         id: '',//int 饲养计划id
@@ -146,9 +146,9 @@ breedingPlan: {
 
 ## 档案管理
 ---
-需要后端创建一个档案表，参考属性如下
+需要后端创建一个档案记录表，参考属性如下
 ```
-let archive:{
+archive:{
             id: 1,//int 档案号
             animalId: 1,//int 该档案记录的动物id
             animalName: 'animal1',//字符 该档案记录的动物名称
@@ -184,6 +184,42 @@ let archive:{
 
 ## 健康检测
 ---
+需要后端创建一个健康检测记录表，参考属性如下
+```
+health: {
+        id: 1,//int 健康检测数据号
+        animalId: 1,//int 记录的动物id
+        animalName: 'animal',//字符 记录的动物名称
+        state: 0,//int 动物状态 0正常，1异常
+        temperature:36.5,//double 体温
+        breathRate:15,//int 呼吸频率
+        heartRate:72,//int 心跳频率
+        bloodPressure:90,//int // 血压
+        date: '2024-06-01',//字符 记录日期
+        time: '18:00:00',//字符，记录时间
+        description: '无异常',//字符 检测的描述，比如动物的症状
+      },
+```
+
+### 健康数据查询
+
+前端提供档健康检测数据号、动物id、或者不提供
+
+当提供健康检测数据号时，返回符合的一条档案
+当提供动物id时，返回符合动物id的多条健康检测数据
+当不提供时，返回所有健康检测数据
+
+### 健康数据删除
+
+前端提供健康检测数据号，后端删除并返回结果
+
+### 健康数据添加
+
+前端提供健康检测数据对象，后端进行添加
+
+### 健康数据修改
+
+前端提供健康检测数据对象，后端进行修改
 
 ## 统计分析
 ---

src/components/ZooAnimalFormDialog.vue

@@ -63,10 +63,10 @@ export default {
       <el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物体重（KG）">
-      <el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
+      <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-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
+      <el-input-number v-model.number="form.height" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物状态">
       <el-radio-group v-model="form.state" :disabled="detail">

src/components/ZooArchiveFormDialog.vue

@@ -46,8 +46,8 @@ export default {
 
 <template>
   <el-form label-width="auto">
-    <el-form-item label="档案号">
+    <el-form-item label="生命周期记录号">
-      <el-input v-model.number="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
+      <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"/>

src/components/ZooArchiveTimeline.vue

@@ -106,8 +106,8 @@ export default {
             <template #label>
               状态
             </template>
-            <span v-if="a.state===0" style="color: green">正常</span>
+            <span v-if="a.state===0" style="color: #67C23A">正常</span>
-            <span v-else-if="a.state===1" style="color: red">异常</span>
+            <span v-else-if="a.state===1" style="color: #F56C6C">异常</span>
             <span v-else>未知</span>
           </el-descriptions-item>
           <el-descriptions-item>

src/components/ZooAside.vue

@@ -67,7 +67,7 @@ export default {
             <span>兽医</span>
           </template>
           <el-menu-item index="/panel/archive" @click="toPath('/panel/archive')">动物档案</el-menu-item>
-          <el-menu-item index="3-2">健康检测</el-menu-item>
+          <el-menu-item index="/panel/health" @click="toPath('/panel/health')">健康检测</el-menu-item>
         </el-sub-menu>
       </el-menu>
     </el-col>

src/components/ZooHealthFormDialog.vue

@@ -1,11 +1,106 @@
 <script>
+import {copy} from "@/utils/common.js";
+
 export default {
-  name: "ZooHealthFormDialog"
+  name: "ZooHealthFormDialog",
+  data() {
+    return {
+      form: {
+        id: null,//int 健康检测数据号
+        animalId: null,//int 记录的动物id
+        animalName: '',//字符 记录的动物名称
+        state: 0,//int 动物状态 0正常，1异常
+        temperature:0,//double 体温
+        breathRate:0,//int 呼吸频率
+        heartRate:0,//int 心跳频率
+        bloodPressure:0,//int // 血压
+        date: '',//字符 记录日期
+        time: '',//字符，记录时间
+        description: '',//字符 检测的描述，比如动物的症状
+      },
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+    },
+    detail: {
+      type: Boolean,
+      default: false
+    },
+    edit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    // 给表单填充传递的数据
+    if (this.data) {
+      this.form = copy(this.data)
+    }
+  },
+  beforeUnmount() {
+    console.log('ZooHealthFormDialog-beforeUnmount', this);
+  }
 }
 </script>
 
 <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>
+    <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>
+    <el-form-item label="动物体温（°C）">
+      <el-input-number v-model.number="form.temperature" :precision="1" :step="0.1" :min="0" :disabled="detail"/>
+    </el-form-item>
+    <el-form-item label="呼吸频率（次/分钟）">
+      <el-input-number v-model.number="form.breathRate" :min="0" :disabled="detail"/>
+    </el-form-item>
+    <el-form-item label="心跳频率（次/分钟）">
+      <el-input-number v-model.number="form.heartRate" :min="0" :disabled="detail"/>
+    </el-form-item>
+    <el-form-item label="动物血压（mmHg）">
+      <el-input-number v-model.number="form.bloodPressure" :min="0" :disabled="detail"/>
+    </el-form-item>
+    <el-form-item label="动物状态">
+      <el-radio-group v-model="form.state" :disabled="detail">
+        <el-radio :value="0">正常</el-radio>
+        <el-radio :value="1">异常</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="记录日期">
+      <el-date-picker
+          v-model="form.date"
+          type="date"
+          placeholder="选择日期"
+          value-format="YYYY-MM-DD"
+          :disabled="detail"
+      />
+    </el-form-item>
+    <el-form-item label="记录时间">
+      <el-time-picker v-model="form.time" type="time" placeholder="选择时间" value-format="HH:mm:ss"
+                      :disabled="detail"/>
+    </el-form-item>
+    <el-form-item label="记录描述">
+      <el-input
+          v-model="form.description"
+          :rows="4"
+          type="textarea"
+          placeholder="记录描述"
+          resize="none"
+          :disabled="detail"
+      />
+    </el-form-item>
+    <div class="right">
+      <slot :form="form"></slot>
+    </div>
+  </el-form>
 </template>
 
 <style scoped>

src/pages/ZooAnimal.vue

@@ -118,6 +118,7 @@ export default {
 
       //从后端重新拉取数据
       this.getAnimals()
+      this.search()
 
       //关闭窗口
       this.dialog.editDialogVisible = false
@@ -139,6 +140,7 @@ export default {
 
         //重新拉取数据
         this.getAnimals()
+        this.search()
 
         // 返回提示
         ElMessage({
@@ -177,12 +179,14 @@ export default {
       }
       // 此处重新拉取数据
       this.getAnimals()
+      this.search()
+
       this.dialog.addDialogVisible = false//添加成功关闭窗口
     },
 
     //以时间线的形式查看该动物的所有档案记录
-    showArchives(data) {
+    showTimeline(data) {
-      console.log('显示档案', data)
+      console.log('显示时间线记录', data)
 
       //从后端获取需要查询的数据，防止数据前后不一致
       //这里先用假数据代替一下
@@ -193,7 +197,7 @@ export default {
       //这里先用假数据代替一下
       this.archives.forEach(e=>{
         if (e.animalId === data.id) {
-          this.dialog.timelineData.push(e)
+          this.dialog.timelineData.push(copy(e))
         }
       })
 
@@ -272,7 +276,7 @@ export default {
 </script>
 
 <template>
-  <div class="animals-root">
+  <div class="animal-root">
     <div class="select">
       <div class="left">
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加动物</el-button>
@@ -308,8 +312,8 @@ export default {
         <el-table-column prop="height" label="动物身高（M）" width="130"/>
         <el-table-column prop="state" label="动物状态" width="90">
           <template #default="scope">
-            <span v-if="scope.row.state===0" style="color: green">正常</span>
+            <span v-if="scope.row.state===0" style="color: #67C23A">正常</span>
-            <span v-else-if="scope.row.state===1" style="color: red">异常</span>
+            <span v-else-if="scope.row.state===1" style="color: #F56C6C">异常</span>
             <span v-else>未知</span>
           </template>
         </el-table-column>
@@ -317,14 +321,14 @@ export default {
         <el-table-column prop="roleId" label="饲养员ID" width="120"/>
         <el-table-column prop="color" label="动物颜色" width="150">
           <template #default="scope">
-            {{ scope.row.color }}
             <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 fixed="right" label="操作" width="250">
           <template #default="scope">
-            <el-button link type="success" size="small" :icon="Tickets" @click="showArchives(scope.row)">
+            <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)">

src/pages/ZooArchive.vue

@@ -70,7 +70,6 @@ export default {
     }
   },
   methods: {
-    sortByDateTime,
     ...mapActions(["getArchives"]),
     ...mapMutations(['updateArchivesTableData']),
 
@@ -123,6 +122,7 @@ export default {
 
       //从后端重新拉取数据
       this.getArchives()
+      this.search()
 
       //关闭窗口
       this.dialog.editDialogVisible = false
@@ -144,6 +144,7 @@ export default {
 
         //重新拉取数据
         this.getArchives()
+        this.search()
 
         // 返回提示
         ElMessage({
@@ -182,12 +183,14 @@ export default {
       }
       // 此处重新拉取数据
       this.getArchives()
+      this.search()
+
       this.dialog.addDialogVisible = false//添加成功关闭窗口
     },
 
     //以时间线的形式查看该动物的所有档案记录
-    showArchives(data) {
+    showTimeline(data) {
-      console.log('显示档案', data)
+      console.log('显示时间线记录', data)
 
       //从后端获取需要查询的数据，防止数据前后不一致
       //这里先用假数据代替一下
@@ -198,7 +201,7 @@ export default {
       //这里先用假数据代替一下
       this.archives.forEach(e=>{
         if (e.animalId === data.animalId) {
-          this.dialog.timelineData.push(e)
+          this.dialog.timelineData.push(copy(e))
         }
       })
 
@@ -298,7 +301,7 @@ export default {
 </script>
 
 <template>
-  <div class="animals-root">
+  <div class="archive-root">
     <div class="select">
       <div class="left">
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
@@ -326,14 +329,14 @@ 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="记录号" width="100"/>
+        <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="phase" label="生命阶段" width="90"/>
         <el-table-column prop="state" label="动物状态" width="90">
           <template #default="scope">
-            <span v-if="scope.row.state===0" style="color: green">正常</span>
+            <span v-if="scope.row.state===0" style="color: #67C23A">正常</span>
-            <span v-else-if="scope.row.state===1" style="color: red">异常</span>
+            <span v-else-if="scope.row.state===1" style="color: #F56C6C">异常</span>
             <span v-else>未知</span>
           </template>
         </el-table-column>
@@ -344,7 +347,7 @@ export default {
         <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="showArchives(scope.row)">
+            <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)">
@@ -412,7 +415,7 @@ 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">

src/pages/ZooBreeding.vue

@@ -112,6 +112,7 @@ export default {
 
       //从后端重新拉取数据
       this.getBreedingPlans()
+      this.search()
 
       //关闭窗口
       this.dialog.editDialogVisible = false
@@ -133,6 +134,7 @@ export default {
 
         //重新拉取数据
         this.getBreedingPlans()
+        this.search()
 
         // 返回提示
         ElMessage({
@@ -171,6 +173,8 @@ export default {
       }
       // 此处重新拉取数据
       this.getBreedingPlans()
+      this.search()
+
       this.dialog.addDialogVisible = false//添加成功关闭窗口
     },
 
@@ -246,7 +250,7 @@ export default {
 </script>
 
 <template>
-  <div class="animals-root">
+  <div class="breeding-root">
     <div class="select">
       <div class="left">
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加饲养计划</el-button>
@@ -281,8 +285,8 @@ export default {
         <el-table-column prop="phase" label="生命阶段" width="90"/>
         <el-table-column prop="state" label="动物状态" width="90">
           <template #default="scope">
-            <span v-if="scope.row.state===0" style="color: green">正常</span>
+            <span v-if="scope.row.state===0" style="color: #67C23A">正常</span>
-            <span v-else-if="scope.row.state===1" style="color: red">异常</span>
+            <span v-else-if="scope.row.state===1" style="color: #F56C6C">异常</span>
             <span v-else>未知</span>
           </template>
         </el-table-column>

src/pages/ZooHealth.vue

@@ -1,11 +1,456 @@
 <script>
+import {Delete, DocumentAdd, Document, Edit, Search, Tickets, Timer} from "@element-plus/icons-vue";
+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";
+
 export default {
-  name: "ZooHealth"
+  name: "ZooHealth",
+  components: {ZooHealthTimeline, ZooHealthFormDialog},
+  data() {
+    return {
+      //表格分页显示的数据
+      pagesData: [],
+      pageSize: 20,//每页有多少条数据
+      currentPage: 1,//当前页
+      order:1,//排序相关参数
+
+      // 搜索框的输入
+      searchInput: {
+        option: '',//状态（0正常 1异常）
+        keyword: ''
+      },
+
+      // 控制弹窗的属性
+      dialog: {
+        dialogData: {},//弹窗数据
+        addDialogVisible: false,//添加对话框
+        editDialogVisible: false,//编辑对话框
+        detailDialogVisible:false,//查询对话框
+        timelineDialogVisible:false,//时间线对话框
+        timelineData:[]//时间线数据
+      },
+    }
+  },
+  computed: {
+    //图标
+    //region
+    Search() {
+      return Search
+    },
+    DocumentAdd() {
+      return DocumentAdd
+    },
+    Edit() {
+      return Edit
+    },
+    Delete() {
+      return Delete
+    },
+    Document() {
+      return Document
+    },
+    Tickets() {
+      return Tickets
+    },
+    Timer() {
+      return Timer
+    },
+    //endregion
+    ...mapState(["healths",'healthsTableData'])
+  },
+  watch: {
+    // 搜索框存在输入，自动调用搜索
+    searchInput: {
+      deep: true,
+      handler(val) {
+        this.search();
+      }
+    }
+  },
+  methods: {
+    ...mapActions(["getHealths"]),
+    ...mapMutations(['updateHealthsTableData']),
+
+    // 显示详情弹窗
+    showDetail(data) {
+      console.log('显示详情', data)
+
+      //从后端获取需要查询的数据，防止数据前后不一致
+      //这里先用假数据代替一下
+      this.dialog.dialogData = this.healths.find(e => e.id === data.id)
+
+      //显示弹窗
+      this.dialog.detailDialogVisible = true
+    },
+
+    //显示编辑弹窗
+    showEdit(data) {
+      console.log('显示编辑', data)
+
+      //从后端获取需要查询的数据，防止数据前后不一致
+      //这里先用假数据代替一下
+      this.dialog.dialogData = this.healths.find(e => e.id === data.id)
+
+      //显示弹窗
+      this.dialog.editDialogVisible = true
+    },
+
+    edit(data) {
+      console.log('编辑', data)
+
+      //判断表单是否为空
+      return this.isEmpty(data);
+
+      //这里将数据传给后端进行数据更新
+      //编辑失败
+      if (false) {
+        return ElMessage({
+          message: '编辑失败',
+          type: 'warning',
+        })
+      }
+
+      //编辑成功
+      if (false) {
+        return ElMessage({
+          message: '编辑成功',
+          type: 'success',
+        })
+      }
+
+      //从后端重新拉取数据
+      this.getHealths()
+      this.search()
+
+      //关闭窗口
+      this.dialog.editDialogVisible = false
+    },
+
+    delete_(data) {
+      console.log('删除', data)
+
+      return ElMessageBox.confirm(
+          '该操作不可撤销，是否继续？',
+          '删除健康检测记录：' +data.id,
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(() => {
+        //进行删除操作
+
+        //重新拉取数据
+        this.getHealths()
+        this.search()
+
+        // 返回提示
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+      }).catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+    },
+
+    add(data) {
+      console.log('添加', data)
+
+      //验证是否为空
+      return this.isEmpty(data);
+
+      //先查询用户是否存在
+
+      //添加失败
+      if (false) {
+        return ElMessage({
+          message: '该记录已存在',
+          type: 'warning',
+        })
+      }
+      //添加成功
+      if (false) {
+        return ElMessage({
+          message: '添加成功',
+          type: 'success',
+        })
+      }
+      // 此处重新拉取数据
+      this.getHealths()
+      this.search()
+
+      this.dialog.addDialogVisible = false//添加成功关闭窗口
+    },
+
+    //以时间线的形式查看该动物的所有档案记录
+    showTimeline(data) {
+      console.log('显示时间线记录', data)
+
+      //从后端获取需要查询的数据，防止数据前后不一致
+      //这里先用假数据代替一下
+      this.dialog.dialogData = this.healths.find(e => e.id === data.id)
+
+      this.dialog.timelineData = []
+      //从后端获取需要查询的数据，防止数据前后不一致
+      //这里先用假数据代替一下
+      this.healths.forEach(e=>{
+        if (e.animalId === data.animalId) {
+          this.dialog.timelineData.push(copy(e))
+        }
+      })
+
+      //显示弹窗
+      this.dialog.timelineDialogVisible = true
+    },
+
+    // 判断表单是否为空
+    isEmpty(form) {
+      if (!form.animalId) {
+        //返回提示
+        return ElMessage({
+          message: '记录的动物ID不能为空',
+          type: 'warning',
+        })
+      }
+    },
+
+    search() {
+      console.log('搜索', this.searchInput)
+
+      let searchResult = []//搜索结果数组
+
+      //第一步匹配搜索选项
+      if (typeof this.searchInput.option === 'number') {
+        this.healths.forEach(e => {
+          if (e.state === this.searchInput.option) {
+            searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
+          }
+        })
+      } else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
+        searchResult = copy(this.healths)
+      }
+
+      let searchResult2 = []
+      let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
+
+      //第二步进行模糊搜索
+      searchResult.forEach(e => {
+        //如果该对象能匹配上所有关键字，则添加到结果
+        // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
+        let is = fuzzyMatching(e, keyset);
+        if (is) {
+          searchResult2.push(e)
+        }
+        // console.log('结束模糊匹配，结果为',e,keyset,is)
+      })
+      searchResult = searchResult2
+
+      this.updateHealthsTableData(searchResult)
+      this.getPagesData()
+    },
+
+    //按时间排序
+    timeSort(){
+      //降序
+      if (this.order===0){
+        this.order++
+        this.updateHealthsTableData(sortByDateTime(copy(this.healthsTableData)))
+        this.getPagesData()
+        return
+      }
+      //升序
+      if (this.order===1){
+        this.order--
+        this.updateHealthsTableData(sortByDateTime(copy(this.healthsTableData)).reverse())
+        this.getPagesData()
+      }
+    },
+
+    //分页相关方法
+    //region
+    //当前页切换时触发
+    handleCurrentChange(val) {
+      console.log('分页被切换',val)
+      this.currentPage = val
+      this.getPagesData()
+    },
+
+    getPagesData() {
+      console.log('获取分页数据')
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.pagesData = this.healthsTableData.slice(start, end)
+    }
+    //endregion
+  },
+  mounted() {
+    // 加载完成后拉取数据
+    this.getHealths()
+
+    //获取分页后显示的数据
+    this.getPagesData()
+
+    console.log()
+  },
 }
 </script>
 
 <template>
+  <div class="health-root">
+    <div class="select">
+      <div class="left">
+        <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-input
+            v-model="searchInput.keyword"
+            style="width: 500px"
+            placeholder="搜索记录 空格隔开关键字"
+        >
+          <template #prepend>
+            <el-select v-model="searchInput.option" placeholder="状态" style="width: 80px">
+              <el-option label="不选择" value=""/>
+              <el-option label="正常" :value="0"/>
+              <el-option label="异常" :value="1"/>
+            </el-select>
+          </template>
+          <template #append>
+            <el-button :icon="Search" @click="search()"/>
+          </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">
+          <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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="breathRate" label="呼吸频率（次/分钟）" width="110">
+          <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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="heartRate" label="心跳频率（次/分钟）" width="110">
+          <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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="bloodPressure" label="动物血压（mmHg）" width="110">
+          <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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="state" label="动物状态" width="90">
+          <template #default="scope">
+            <span v-if="scope.row.state===0" style="color: #67C23A">正常</span>
+            <span v-else-if="scope.row.state===1" style="color: #F56C6C">异常</span>
+            <span v-else>未知</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="date" label="记录日期" width="110"/>
+        <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)">
+              详情
+            </el-button>
+            <el-button link type="primary" size="small" :icon="Edit" @click="showEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button link type="danger" size="small" :icon="Delete" @click="delete_(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!--  分页-->
+    <div class="pager relative">
+      <div class="center">
+        <el-pagination background layout="total, prev, pager, next, jumper" :total="healthsTableData.length"
+                       :page-size="pageSize" small @current-change="handleCurrentChange"/>
+      </div>
+    </div>
+  </div>
+
+  <!--  添加记录对话框-->
+  <el-dialog v-model="dialog.addDialogVisible" title="添加记录" width="500" align-center draggable overflow>
+    <ZooHealthFormDialog>
+      <template #default="scope">
+        <el-button @click="dialog.addDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="add(scope.form)">
+          添加
+        </el-button>
+      </template>
+    </ZooHealthFormDialog>
+  </el-dialog>
+
+  <!--  编辑记录对话框-->
+  <el-dialog v-model="dialog.editDialogVisible" title="编辑记录" width="500" align-center draggable overflow
+             destroy-on-close>
+    <ZooHealthFormDialog :data="dialog.dialogData" edit>
+      <template #default="scope">
+        <el-button @click="dialog.editDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="edit(scope.form)">
+          修改
+        </el-button>
+      </template>
+    </ZooHealthFormDialog>
+  </el-dialog>
+
+  <!--  查看记录对话框-->
+  <el-dialog v-model="dialog.detailDialogVisible" title="查询记录" width="500" align-center draggable overflow
+             destroy-on-close>
+    <ZooHealthFormDialog :data="dialog.dialogData" detail>
+      <template #default="scope">
+        <el-button @click="dialog.detailDialogVisible = false">
+          关闭
+        </el-button>
+      </template>
+    </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>-->
 </template>
 
 <style scoped>

src/pages/ZooUser.vue

@@ -116,6 +116,7 @@ export default {
 
       //从后端重新拉取数据
       this.getUsers()
+      this.search()
 
       //关闭窗口
       this.dialog.editDialogVisible = false
@@ -137,6 +138,7 @@ export default {
 
         //重新拉取数据
         this.getUsers()
+        this.search()
 
         // 返回提示
         ElMessage({
@@ -176,6 +178,8 @@ export default {
 
       // 此处重新拉取数据
       this.getUsers()
+      this.search()
+
       this.dialog.addDialogVisible = false//添加成功关闭窗口
     },
 
@@ -250,7 +254,7 @@ export default {
 </script>
 
 <template>
-  <div id="users-root">
+  <div id="user-root">
     <!--    头部-->
     <div class="select">
       <div class="left">
@@ -289,9 +293,9 @@ export default {
         </el-table-column>
         <el-table-column prop="auth" label="身份" width="700">
           <template #default="scope">
-            <span v-if="scope.row.auth===0" style="color: blue">管理员</span>
+            <span v-if="scope.row.auth===0" style="color: #409EFF">管理员</span>
-            <span v-else-if="scope.row.auth===1" style="color: green">饲养员</span>
+            <span v-else-if="scope.row.auth===1" style="color: #67C23A">饲养员</span>
-            <span v-else-if="scope.row.auth===2" style="color: orange">兽医</span>
+            <span v-else-if="scope.row.auth===2" style="color: #E6A23C">兽医</span>
             <span v-else>未知</span>
           </template>
         </el-table-column>

src/pages/data.vue

@@ -1,11 +1,17 @@
 <script>
 import {mapMutations} from "vuex";
-import {generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
+import {
+  generateAnimals,
+  generateArchives,
+  generateBreedingPlans,
+  generateHealths,
+  generateUsers
+} from "@/utils/common.js";
 
 export default {
   name: "ZooData",
   methods: {
-    ...mapMutations(['updateUsers', 'updateAnimals', 'updateBreedingPlans', 'updateArchives']),
+    ...mapMutations(['updateUsers', 'updateAnimals', 'updateBreedingPlans', 'updateArchives','updateHealths']),
     usersData() {
       this.updateUsers(generateUsers())
       return ElMessage({
@@ -33,6 +39,13 @@ export default {
         message: '成功',
         type: 'success',
       })
+    },
+    healthData() {
+      this.updateHealths(generateHealths())
+      return ElMessage({
+        message: '成功',
+        type: 'success',
+      })
     }
   }
 }
@@ -43,6 +56,7 @@ export default {
   <el-button type="primary" @click="animalsData">生成动物信息</el-button>
   <el-button type="primary" @click="breedingPlansData">生成饲养计划信息</el-button>
   <el-button type="primary" @click="archiveData">生成档案信息</el-button>
+  <el-button type="primary" @click="healthData">生成健康监测信息</el-button>
   <el-button type="primary" @click="$router.push('/login')">跳转登录</el-button>
 </template>
 

src/router/index.js

@@ -10,6 +10,7 @@ import store from "@/store/index.js";
 import ZooBreeding from "@/pages/ZooBreeding.vue";
 import ZooArchive from "@/pages/ZooArchive.vue";
 import ZooData from "@/pages/data.vue";
+import ZooHealth from "@/pages/ZooHealth.vue";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -55,6 +56,10 @@ const router = createRouter({
                 {
                     path:'archive',
                     component:ZooArchive,
+                },
+                {
+                    path:'health',
+                    component:ZooHealth,
                 }
             ]
         },

src/store/index.js

@@ -38,6 +38,13 @@ const actions = {
         // 通过后端获取数据
         // context.commit('updateArchives', generateArchives())
         context.commit('updateArchives',context.state.archives);
+    },
+
+    //获取监控检测数据
+    getHealths(context) {
+        // 通过后端获取数据
+        // context.commit('updateHealths', generateHealths())
+        context.commit('updateHealths',context.state.healths);
     }
 }
 
@@ -88,6 +95,17 @@ const mutations = {
     },
     updateArchivesTableData(state, value) {
         state.archivesTableData = value
+    },
+
+    //更新健康检测
+    updateHealths(state, value) {
+        state.healths = value
+
+        //复制一份给前端表格展示，不轻易修改源数据
+        state.healthsTableData = copy(state.healths)
+    },
+    updateHealthsTableData(state, value) {
+        state.healthsTableData = value
     }
 }
 
@@ -118,6 +136,9 @@ const state = {
     //动物档案
     archives:[],
     archivesTableData:[],//动物档案表格数据
+    //健康检测
+    healths:[],
+    healthsTableData:[],//健康检测表格数据
 }
 
 export default createStore({

src/utils/common.js

@@ -17,8 +17,7 @@ export function generateUsers() {
         users.push(user)
         if (a === 1) {
             keeper.push(user)
-        }
+        } else if (a === 2) {
-        else if (a===2) {
             veterinary.push(user)
         }
     }
@@ -84,6 +83,7 @@ function generateKeeperId() {
     const n = Math.floor(Math.random() * keeper.length);
     return keeper[n].id
 }
+
 //endregion
 
 //生成已有的兽医id
@@ -94,6 +94,7 @@ function generateVeterinaryId() {
     const n = Math.floor(Math.random() * veterinary.length);
     return veterinary[n].id
 }
+
 //endregion
 
 //生成颜色
@@ -103,6 +104,7 @@ const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]
 function getCharacter(index) {
     return hexCharacters[index]
 }
+
 function generateNewColor() {
     let hexColorRep = "#"
 
@@ -112,6 +114,7 @@ function generateNewColor() {
     }
     return hexColorRep
 }
+
 //endregion
 
 // id: '',//int 饲养计划id
@@ -171,6 +174,7 @@ function generatePhase() {
 export function generateArchives() {
     const archives = []
 
+    let aid=0
     store.state.animals.forEach(e => {
         //分为四个周期的档案
         for (let i = 0; i < 4; i++) {
@@ -190,7 +194,7 @@ export function generateArchives() {
             }
             for (let j = 0; j < n; j++) {
                 let archive = {
-                    id: i+''+j,//档案号
+                    id: aid,//档案号
                     animalId: e.id,//该档案记录的动物id
                     animalName: e.name,//该档案记录的动物名称
                     phase: i === 0 ? '幼年期' : i === 1 ? '成长期' : i === 2 ? '成年期' : '老年期',
@@ -202,14 +206,52 @@ export function generateArchives() {
                     description: 'test archive' + i + '' + j + ' description',
                 }
                 archives.push(archive)
-            }
 
+                //同时获取一条健康记录
+                let health = {
+                    id: aid,//int 健康检测数据号
+                    animalId: archive.animalId,//int 记录的动物id
+                    animalName: archive.animalName,//字符 记录的动物名称
+                    state: archive.state,//int 动物状态 0正常，1异常
+                    temperature: Number((35 + Math.random() * 7).toFixed(1)),//double 体温
+                    breathRate: Math.floor(Math.random() * 90) + 10 ,//int 呼吸频率
+                    heartRate: Math.floor(Math.random() * 130) + 10,//int 心跳频率
+                    bloodPressure: Math.floor(Math.random() * 110) + 70,//int // 血压
+                    date: archive.date,//字符 记录日期
+                    time: archive.time,//字符，记录时间
+                    description: 'test health' + i + '' + j + ' description',//字符 检测的描述，比如动物的症状
+                }
+                //异常的记录要修改一下监测数据
+                if (health.state===1){
+                    health.temperature += Math.random()*2>1?
+                        Number((Math.random()*health.temperature).toFixed(1)):
+                        -Number((Math.random()*health.temperature).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)
+                    health.heartRate += health.heartRate += Math.random()*2>1?
+                        Math.floor(Math.random()*health.heartRate):-Math.floor(Math.random()*health.heartRate)
+                    health.bloodPressure += health.bloodPressure += Math.random()*2>1?
+                        Math.floor(Math.random()*health.bloodPressure):-Math.floor(Math.random()*health.bloodPressure)
+
+                }
+                healths.push(health)
+                aid++
+            }
         }
     })
     console.log('档案', archives)
     return archives
 }
 
+const healths = []
+
+export function generateHealths() {
+    console.log('健康记录', healths)
+    return healths
+}
+
+
 function generateType() {
     //疫苗接种1，疾病治疗1，日常饲养8
     const type = Math.floor(Math.random() * 100)