From e698d48f4a21b6a52777de2cebab7878ba1dba24 Mon Sep 17 00:00:00 2001
From: Tao-826 <2513445933@qq.com>
Date: Fri, 11 Jul 2025 10:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=B6=E4=BD=9C=E4=BA=BA=E5=91=98=E5=81=A5?=
 =?UTF-8?q?=E5=BA=B7=E6=95=B0=E6=8D=AE=E8=B6=8B=E5=8A=BF=E8=A1=80=E5=8E=8B?=
 =?UTF-8?q?/=E8=A1=80=E5=8E=8B/=E5=BF=83=E7=8E=87/=E4=BD=93=E6=B8=A9?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/detail.vue                     | 221 ++++++++++++++++++
 src/views/personnelHealthMonitoring/index.vue |  32 +--
 2 files changed, 240 insertions(+), 13 deletions(-)
 create mode 100644 src/views/personnelHealthMonitoring/components/detail.vue

diff --git a/src/views/personnelHealthMonitoring/components/detail.vue b/src/views/personnelHealthMonitoring/components/detail.vue
new file mode 100644
index 0000000..cee3661
--- /dev/null
+++ b/src/views/personnelHealthMonitoring/components/detail.vue
@@ -0,0 +1,221 @@
+<template>
+    <div>
+        <div style="display: flex; justify-content: space-between;">
+            <span>人员健康数据趋势</span>
+            <el-button type="primary" @click="handleBack">返回</el-button>
+        </div>
+        <div
+            style="display: flex; width: 100%; height: 72vh; flex-wrap: wrap; justify-content: space-between; padding-top: 20px;">
+            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
+                <div ref="chart1" style="width: 100%; height: 100%;"></div>
+            </el-card>
+            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
+                <div ref="chart2" style="width: 100%; height: 100%;"></div>
+            </el-card>
+            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
+                <div ref="chart3" style="width: 100%; height: 100%;"></div>
+            </el-card>
+            <el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
+                <div ref="chart4" style="width: 100%; height: 100%;"></div>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { ref, onMounted } from 'vue'
+const emit = defineEmits(['close'])
+
+const handleBack = () => {
+    emit('close')
+}
+const chart1 = ref(null)
+const initChart1 = () => {
+    if (!chart1.value) return false
+    const myChart = echarts.init(chart1.value);
+    const option = {
+        title: {
+            text: '血压趋势',
+            top: 'top',
+            left: 'center'
+        },
+        legend: {
+            data: ['收缩压', '舒张压'],
+            bottom: 'bottom'
+        },
+        grid: {
+            top: '24%',
+            left: '5%',
+            right: '5%',
+            bottom: '20%'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
+            boundaryGap: false
+        },
+        yAxis: {
+            type: 'value',
+            name: 'mmHg',
+        },
+        series: [
+            {
+                name: '收缩压',
+                data: [120, 122, 130, 126, 121, 122, 123],
+                type: 'line',
+                smooth: true
+            },
+            {
+                name: '舒张压',
+                data: [80, 82, 83, 84, 83, 85, 83],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    myChart.setOption(option);
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+const chart2 = ref(null)
+const initChart2 = () => {
+    if (!chart2.value) return false
+    const myChart = echarts.init(chart2.value);
+    const option = {
+        title: {
+            text: '血氧趋势',
+            top: 'top',
+            left: 'center'
+        },
+        legend: {
+            data: ['血氧饱和度'],
+            bottom: 'bottom'
+        },
+        grid: {
+            top: '24%',
+            left: '5%',
+            right: '5%',
+            bottom: '20%'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
+            boundaryGap: false
+        },
+        yAxis: {
+            type: 'value',
+            name: '%',
+        },
+        series: [
+            {
+                name: '血氧饱和度',
+                data: [98, 96, 96, 95, 96, 96, 97],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    myChart.setOption(option);
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+const chart3 = ref(null)
+const initChart3 = () => {
+    if (!chart3.value) return false
+    const myChart = echarts.init(chart3.value);
+    const option = {
+        title: {
+            text: '心率趋势',
+            top: 'top',
+            left: 'center'
+        },
+        legend: {
+            data: ['心率'],
+            bottom: 'bottom'
+        },
+        grid: {
+            top: '24%',
+            left: '5%',
+            right: '5%',
+            bottom: '20%'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
+            boundaryGap: false
+        },
+        yAxis: {
+            type: 'value',
+            name: 'bpm',
+        },
+        series: [
+            {
+                name: '心率',
+                data: [75, 78, 79, 81, 79, 76, 77],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    myChart.setOption(option);
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+const chart4 = ref(null)
+const initChart4 = () => {
+    if (!chart4.value) return false
+    const myChart = echarts.init(chart4.value);
+    const option = {
+        title: {
+            text: '体温趋势',
+            top: 'top',
+            left: 'center'
+        },
+        legend: {
+            data: ['体温'],
+            bottom: 'bottom'
+        },
+        grid: {
+            top: '24%',
+            left: '5%',
+            right: '5%',
+            bottom: '20%'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
+            boundaryGap: false
+        },
+        yAxis: {
+            type: 'value',
+            name: '℃',
+        },
+        series: [
+            {
+                name: '体温',
+                data: [36.1, 36.1, 36.3, 36.2, 36.1, 36.1, 36.2],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    myChart.setOption(option);
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+onMounted(() => {
+    initChart1()
+    initChart2()
+    initChart3()
+    initChart4()
+})
+</script>
diff --git a/src/views/personnelHealthMonitoring/index.vue b/src/views/personnelHealthMonitoring/index.vue
index 9b1072e..c90e98a 100644
--- a/src/views/personnelHealthMonitoring/index.vue
+++ b/src/views/personnelHealthMonitoring/index.vue
@@ -59,7 +59,7 @@
 </style>
 <template>
     <div class="overall-container">
-        <div>
+        <div v-if="store.openDditFlag">
             <div class="search-container">
                 <div class="layout_card">
                     <el-card v-for="(item, index) in cardArr" :key="index"
@@ -97,7 +97,7 @@
                     </el-form-item>
                     <el-form-item label="日期范围" class="layout-pr10">
                         <el-date-picker v-model="dateRange" type="daterange" range-separator="-"
-                            :disabled-date="disabledDate" start-placeholder="开始日期" end-placeholder="结束日期"
+                            :disabled-date="disabledDayRange" start-placeholder="开始日期" end-placeholder="结束日期"
                             :size="size" />
                     </el-form-item>
                     <el-form-item class="layout-pr10">
@@ -115,7 +115,7 @@
                 </div>
                 <el-table class="table-container" v-loading="tableLoading" ref="tableRef" :data="tableData" border
                     :height="tableHeight" width="100%">
-                    <el-table-column label="序号" type="index" align="center" width="120" fixed="left" />
+                    <el-table-column label="序号" type="index" align="center" max-width="120" fixed="left" />
                     <el-table-column prop="A1" label="记录时间" sortable fixed="left" align="center" min-width="150"
                         show-overflow-tooltip />
                     <el-table-column prop="A2" label="姓名" sortable fixed="left" align="center" min-width="120"
@@ -187,14 +187,15 @@
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" />
             </div>
         </div>
-
+        <Detail v-else :store="store" @close="handleClose" />
     </div>
 </template>
 
 <script setup>
 import { View } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
-import { disabledDate } from '@/utils/disabledDate'
+import { ref, onMounted, reactive } from 'vue'
+import { disabledDayRange } from '@/utils/disabledDate'
+import Detail from './components/detail.vue'
 
 import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png'
 import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png'
@@ -209,11 +210,11 @@ const cardArr = [
 ]
 
 const cardListArr = ref([
-    { name: '项目总人数', value: '' },
-    { name: '标段总人数', value: '' },
-    { name: '劳务队总人数', value: '' },
-    { name: '健康状态正常人数', value: '' },
-    { name: '健康状态异常人数', value: '' },
+    { name: '项目总人数', value: '5' },
+    { name: '标段总人数', value: '5' },
+    { name: '劳务队总人数', value: '5' },
+    { name: '健康状态正常人数', value: '1' },
+    { name: '健康状态异常人数', value: '4' },
 ])
 const projectList = ref([])
 const sectionList = ref([])
@@ -253,16 +254,21 @@ const handleSizeChange = () => { }
 const onSearch = () => { }
 const onExport = () => { }
 
-
+const store = reactive({
+    openDditFlag: true,
+});
 const handleView = (row) => {
     console.log(row);
+    store.openDditFlag = false;
 }
 
 const handleDownload = (row) => {
     console.log(row);
 }
 
-
+const handleClose = () => {
+    store.openDditFlag = true;
+}
 
 onMounted(() => {