yidongliang
/
BZPT.JKFZJC_FrontEnd
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员健康数据监测添加汇总模块，添加列表内容

This commit is contained in:
Tao-826 2025-07-09 16:11:24 +08:00
parent 37083655a0
commit 80a0adf4d0
1 changed files with 83 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/personnelHealthMonitoring/index.vue
View File

@ -34,6 +34,28 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.layout_card2 {
display: flex;
align-items: center;
padding: 10px 20px;
margin: 10px 0;
width: 100%;
border: 1px solid #91d5ff;
border-radius: 15px;
background: #e6f7ff;
.card_item {
margin-right: 20px;
font-size: 14px;
cursor: pointer;
.card_item_color {
color: #1890ff;
padding-left: 10px;
}
}
}
</style> </style>
<template> <template>
<div class="overall-container"> <div class="overall-container">
@ -81,43 +103,67 @@
<el-form-item class="layout-pr10"> <el-form-item class="layout-pr10">
<el-button type="primary" icon="Search" @click="onSearch">查询</el-button> <el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
</el-form-item> </el-form-item>
<el-form-item class="layout-pr10"> <el-form-item>
<el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button> <el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="layout_card2">
<div class="card_item" v-for="(item, index) in cardListArr" :key="index">
<span>{{ item.name }}</span>
<span class="card_item_color">{{ item.value }}人</span>
</div>
</div>
<el-table class="table-container" v-loading="tableLoading" ref="tableRef" :data="tableData" border <el-table class="table-container" v-loading="tableLoading" ref="tableRef" :data="tableData" border
:height="tableHeight" width="100%"> :height="tableHeight" width="100%">
<el-table-column label="序号" type="index" align="center" width="120" fixed="left" /> <el-table-column label="序号" type="index" align="center" width="120" fixed="left" />
<el-table-column prop="A1" label="记录时间" fixed="left" align="center" min-width="150" <el-table-column prop="A1" label="记录时间" sortable fixed="left" align="center" min-width="150"
show-overflow-tooltip /> show-overflow-tooltip />
<el-table-column prop="A2" label="姓名" fixed="left" align="center" min-width="120" <el-table-column prop="A2" label="姓名" sortable fixed="left" align="center" min-width="120"
show-overflow-tooltip /> show-overflow-tooltip />
<el-table-column prop="A3" label="性别" fixed="left" align="center" min-width="120" <el-table-column prop="A3" label="性别" sortable fixed="left" align="center" min-width="80"
show-overflow-tooltip /> show-overflow-tooltip />
<el-table-column prop="A4" label="年龄" align="center" min-width="80" show-overflow-tooltip /> <el-table-column prop="A4" label="年龄" sortable align="center" min-width="80"
<el-table-column prop="A5" label="工种" align="center" min-width="120" show-overflow-tooltip /> show-overflow-tooltip />
<el-table-column prop="A6" label="血压(MMHG)" align="center" min-width="90" show-overflow-tooltip> <el-table-column prop="A5" label="工种" sortable align="center" min-width="120"
show-overflow-tooltip />
<el-table-column prop="A6" label="血压(MMHG)" sortable align="center" min-width="110"
show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<div v-if="isBloodPressureNormal(scope.row.A6)">{{ scope.row.A6 }}</div> <div v-if="isBloodPressureNormal(scope.row.A6)">{{ scope.row.A6 }}</div>
<div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A6 }}</div> <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A6
}}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="A7" label="血氧(%)" align="center" min-width="70" show-overflow-tooltip> <el-table-column prop="A7" label="血氧(%)" sortable align="center" min-width="80"
show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.A7 >= 95">{{ scope.row.A7 }}</div> <div v-if="scope.row.A7 >= 95">{{ scope.row.A7 }}</div>
<div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A7 }}</div> <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A7
}}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="A8" label="心率(BPM)" align="center" min-width="80" show-overflow-tooltip> <el-table-column prop="A8" label="心率(BPM)" sortable align="center" min-width="100"
show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.A8 <= 100 && scope.row.A8 >= 60">{{ scope.row.A8 }}</div> <div v-if="scope.row.A8 <= 100 && scope.row.A8 >= 60">{{ scope.row.A8 }}</div>
<div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A8 }}</div> <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A8
}}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="A9" label="体温(℃)" align="center" min-width="70" show-overflow-tooltip> <el-table-column prop="A9" label="体温(℃)" sortable align="center" min-width="80"
show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.A9 >= 36.1 && scope.row.A9 <= 37.2">{{ scope.row.A9 }}</div> <div v-if="scope.row.A9 >= 36.1 && scope.row.A9 <= 37.2">{{ scope.row.A9 }}</div>
<div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A9 }}</div> <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A9
}}</div>
</template>
</el-table-column>
<el-table-column prop="A10" label="酒精浓度(MG-100ML)" sortable align="center" min-width="90"
show-overflow-tooltip>
<template #default="scope">
<div v-if="scope.row.A10 <= 20">{{ scope.row.A10 }}</div>
<div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A10
}}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" min-width="100" align="center"> <el-table-column fixed="right" label="操作" min-width="100" align="center">
@ -141,6 +187,7 @@
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -149,18 +196,25 @@ import { View } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { disabledDate } from '@/utils/disabledDate' import { disabledDate } from '@/utils/disabledDate'
import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png' import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png'
import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png' import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png'
import HEARTRATE from '@/assets/images/pages/heart_rate.png' import HEARTRATE from '@/assets/images/pages/heart_rate.png'
import BODYTEMPERATURE from '@/assets/images/pages/body_temperature.png' import BODYTEMPERATURE from '@/assets/images/pages/body_temperature.png'
const cardArr = [ const cardArr = [
{ title: '平均血压', value: '145/95', text: '正常范围：90-140/60-90', url: BLOODPRESSURE, background: '#E9EEFD', round: '#bbc8ef' }, { title: '平均血压', value: '145/95 mmHG', text: '正常范围：90-140/60-90mmHG', url: BLOODPRESSURE, background: '#E9EEFD', round: '#bbc8ef' },
{ title: '平均血氧', value: '98 %', text: '正常范围：95-100%', url: BLOODOXYGEN, background: '#EFF6F5', round: '#b4e9e2' }, { title: '平均血氧', value: '98 %', text: '正常范围：95-100%', url: BLOODOXYGEN, background: '#EFF6F5', round: '#b4e9e2' },
{ title: '平均心率', value: '72', text: '正常范围：60-100', url: HEARTRATE, background: '#FAEDDD', round: '#ffcc8d' }, { title: '平均心率', value: '72 BPM', text: '正常范围：60-100BPM', url: HEARTRATE, background: '#FAEDDD', round: '#ffcc8d' },
{ title: '平均体温', value: '36.5 ℃', text: '正常范围：36.1-37.2℃', url: BODYTEMPERATURE, background: '#ECEBF5', round: '#ccc6fb' }, { title: '平均体温', value: '36.5 ℃', text: '正常范围：36.1-37.2℃', url: BODYTEMPERATURE, background: '#ECEBF5', round: '#ccc6fb' },
] ]
const cardListArr = ref([
{ name: '项目总人数', value: '' },
{ name: '标段总人数', value: '' },
{ name: '劳务队总人数', value: '' },
{ name: '健康状态正常人数', value: '' },
{ name: '健康状态异常人数', value: '' },
])
const projectList = ref([]) const projectList = ref([])
const sectionList = ref([]) const sectionList = ref([])
const projectState = ref('') const projectState = ref('')
@ -180,25 +234,26 @@ const background = ref(true)
const disabled = ref(false) const disabled = ref(false)
const size = ref('default') const size = ref('default')
const tableData = ref([ const tableData = ref([
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '140/80', A7: '94', A8: '101', A9: '36.0' }, { A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '22', A5: '电工', A6: '142/80', A7: '94', A8: '101', A9: '36.0',A10: 0 },
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '120/80', A7: '95', A8: '80', A9: '36.5' }, { A1: '2023-05-02 10:00:00', A2: '李四', A3: '男', A4: '23', A5: '司机', A6: '122/81', A7: '95', A8: '78', A9: '35.1',A10: 0 },
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '120/80', A7: '95', A8: '80', A9: '36.5' }, { A1: '2023-05-03 10:00:00', A2: '王五', A3: '男', A4: '24', A5: '焊工', A6: '126/88', A7: '96', A8: '85', A9: '37.5',A10: 0},
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '120/80', A7: '95', A8: '80', A9: '35.1' }, { A1: '2023-05-04 10:00:00', A2: '赵六', A3: '男', A4: '25', A5: '钢筋工', A6: '110/88', A7: '93', A8: '95', A9: '36.2' ,A10: 21},
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '140/95', A7: '95', A8: '80', A9: '36.5' }, { A1: '2023-05-05 10:00:00', A2: '宋七', A3: '男', A4: '26', A5: '架子工', A6: '130/89', A7: '97', A8: '80', A9: '36.5',A10: 20 },
]) ])
const isBloodPressureNormal = (pressure) => { const isBloodPressureNormal = (pressure) => {
if (!pressure) return false; if (!pressure) return false;
const [systolic, diastolic] = pressure.split('/').map(Number); const [systolic, diastolic] = pressure.split('/').map(Number);
return systolic >= 90 && systolic <= 139 && return systolic >= 90 && systolic <= 140 &&
diastolic >= 60 && diastolic <= 89; diastolic >= 60 && diastolic <= 90;
}; };
const handleCurrentChange = () => { } const handleCurrentChange = () => { }
const handleSizeChange = () => { } const handleSizeChange = () => { }
const onSearch = () => { } const onSearch = () => { }
const onExport = () => { } const onExport = () => { }
const handleView = (row) => { const handleView = (row) => {
console.log(row); console.log(row);
} }
@ -208,6 +263,7 @@ const handleDownload = (row) => {
} }
onMounted(() => { onMounted(() => {
}) })