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-08 16:55:47 +08:00
parent cf0e05ceb0
commit 4563e48845
5 changed files with 234 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/pages/blood_oxygen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 681 B

BIN
src/assets/images/pages/body_temperature.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 624 B

BIN
src/assets/images/pages/heart_rate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 468 B

30
src/views/personnePostPhysicalExamination/index.vue
View File

@ -29,6 +29,16 @@
display: flex;
padding: 0 10px;
}
.color_red {
color: red;
font-weight: 700;
}
.color_green {
color: #67c23a;
font-weight: 700;
}
</style>
<template>
<div class="overall-container">
@ -74,32 +84,32 @@
<el-table-column prop="A8" label="体检时间" align="center" min-width="120" show-overflow-tooltip />
<el-table-column prop="A9" label="血压(MMHG)" align="center" min-width="90" show-overflow-tooltip>
<template #default="scope">
<span v-if="isBloodPressureNormal(scope.row.A9)">{{ scope.row.A9 }}</span>
<span style="color: red" v-else>{{ scope.row.A9 }}</span>
<span v-if="isBloodPressureNormal(scope.row.A9)" class="color_green">{{ scope.row.A9 }}</span>
<span v-else class="color_red">{{ scope.row.A9 }}</span>
</template>
</el-table-column>
<el-table-column prop="A10" label="血氧(%)" align="center" min-width="70" show-overflow-tooltip>
<template #default="scope">
<span v-if="scope.row.A10 >= 85">{{ scope.row.A10 }}</span>
<span style="color: red" v-else>{{ scope.row.A10 }}</span>
<span v-if="scope.row.A10 >= 85" class="color_green">{{ scope.row.A10 }}</span>
<span v-else class="color_red">{{ scope.row.A10 }}</span>
</template>
</el-table-column>
<el-table-column prop="A11" label="心率(BPM)" align="center" min-width="80" show-overflow-tooltip>
<template #default="scope">
<span v-if="scope.row.A11 <= 100 && scope.row.A11 >= 60">{{ scope.row.A11 }}</span>
<span style="color: red" v-else>{{ scope.row.A11 }}</span>
<span v-if="scope.row.A11 <= 100 && scope.row.A11 >= 60" class="color_green">{{ scope.row.A11 }}</span>
<span v-else class="color_red">{{ scope.row.A11 }}</span>
</template>
</el-table-column>
<el-table-column prop="A12" label="体温(℃)" align="center" min-width="70" show-overflow-tooltip>
<template #default="scope">
<span v-if="scope.row.A12 >= 36.1 && scope.row.A12 <= 37.2">{{ scope.row.A12 }}</span>
<span style="color: red" v-else>{{ scope.row.A12 }}</span>
<span v-if="scope.row.A12 >= 36.1 && scope.row.A12 <= 37.2" class="color_green">{{ scope.row.A12 }}</span>
<span v-else class="color_red">{{ scope.row.A12 }}</span>
</template>
</el-table-column>
<el-table-column prop="A13" label="健康状态" align="center" min-width="80" show-overflow-tooltip>
<template #default="scope">
<span v-if="scope.row.A13 === '正常'">{{ scope.row.A13 }}</span>
<span style="color: red" v-else>{{ scope.row.A13 }}</span>
<span v-if="scope.row.A13 === '正常'" class="color_green">{{ scope.row.A13 }}</span>
<span v-else class="color_red">{{ scope.row.A13 }}</span>
</template>
</el-table-column>
</el-table>

214
src/views/personnelHealthMonitoring/index.vue Normal file
View File

@ -0,0 +1,214 @@
<style lang="scss" scoped>
.layout-pr5 {
padding-right: 5px;
}
.layout_card {
display: flex;
width: 100%;
height: 11vh;
margin-bottom: 30px;
justify-content: space-between;
}
.el-card__body {
display: flex;
}
.card_text {
font-size: 12px;
.text_num {
font-size: 16px;
font-weight: bold;
padding: 5px 0;
}
}
.card_round {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<template>
<div class="overall-container">
<div>
<div class="search-container">
<div class="layout_card">
<el-card v-for="(item, index) in cardArr" :key="index"
:style="{ background: item.background, width: '22%' }"
body-style="display: flex; justify-content: space-between;">
<div class="card_text">
<div>{{ item.title }}</div>
<div class="text_num">{{ item.value }}</div>
<div>{{ item.text }}</div>
</div>
<div class="card_round" :style="{ background: item.round }">
<img :src="item.url" alt="">
</div>
</el-card>
</div>
<el-form class="search-container-from">
<el-input type="hidden" />
<el-form-item label="项目" class="layout-pr10">
<el-select v-model="projectState" placeholder="请选择项目" filterable class="layout-w200">
<el-option v-for="i in projectList" :key="i.Id" :label="i.AC002" :value="i.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="标段" class="layout-pr10">
<el-select v-model="sectionState" placeholder="请选择标段" filterable class="layout-w200">
<el-option v-for="i in sectionList" :key="i.Id" :label="i.BC02" :value="i.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="劳务队" class="layout-pr10">
<el-select v-model="laborTeamState" placeholder="请选择劳务队" filterable class="layout-w200">
<el-option v-for="i in laborTeamList" :key="i.Id" :label="i.DC01" :value="i.Id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询内容" class="no-required-star layout-pr10">
<el-input v-model="input" clearable class="layout-w200" placeholder="请输入姓名" />
</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="结束日期"
:size="size" />
</el-form-item>
<el-form-item class="layout-pr10">
<el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
</el-form-item>
<el-form-item class="layout-pr10">
<el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button>
</el-form-item>
</el-form>
<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 prop="A1" label="记录时间" fixed="left" align="center" min-width="150"
show-overflow-tooltip />
<el-table-column prop="A2" label="姓名" fixed="left" align="center" min-width="120"
show-overflow-tooltip />
<el-table-column prop="A3" label="性别" fixed="left" align="center" min-width="120"
show-overflow-tooltip />
<el-table-column prop="A4" label="年龄" align="center" min-width="80" show-overflow-tooltip />
<el-table-column prop="A5" label="工种" align="center" min-width="120" show-overflow-tooltip />
<el-table-column prop="A6" label="血压(MMHG)" align="center" min-width="90" show-overflow-tooltip>
<template #default="scope">
<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>
</template>
</el-table-column>
<el-table-column prop="A7" label="血氧(%)" align="center" min-width="70" show-overflow-tooltip>
<template #default="scope">
<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>
</template>
</el-table-column>
<el-table-column prop="A8" label="心率(BPM)" align="center" min-width="80" show-overflow-tooltip>
<template #default="scope">
<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>
</template>
</el-table-column>
<el-table-column prop="A9" label="体温(℃)" align="center" min-width="70" show-overflow-tooltip>
<template #default="scope">
<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>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="100" align="center">
<template #default="scope">
<div style="display: flex; justify-content: space-evenly;">
<el-icon style="cursor: pointer;" size="20" color="#409eff"
@click="handleView(scope.row)">
<View />
</el-icon>
<el-icon style="cursor: pointer;" size="20" color="#67c23a"
@click="handleDownload(scope.row)">
<Download />
</el-icon>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination class="layout-pagination" :current-page="currentPage" :page-size="pageSize"
:page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
</div>
</template>
<script setup>
import { View } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { disabledDate } from '@/utils/disabledDate'
import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png'
import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png'
import HEARTRATE from '@/assets/images/pages/heart_rate.png'
import BODYTEMPERATURE from '@/assets/images/pages/body_temperature.png'
const cardArr = [
{ title: '平均血压', value: '145/95', text: '正常范围：90-140/60-90', url: BLOODPRESSURE, background: '#E9EEFD', round: '#bbc8ef' },
{ 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: '36.5℃', text: '正常范围：36.1-37.2℃', url: BODYTEMPERATURE, background: '#ECEBF5', round: '#ccc6fb' },
]
const projectList = ref([])
const sectionList = ref([])
const projectState = ref('')
const sectionState = ref('')
const laborTeamList = ref([])
const laborTeamState = ref('')
const dateRange = ref([])
const input = ref('')
const tableLoading = ref(false)
const tableHeight = ref('40vh')
const tableRef = ref(null)
const currentPage = ref(1)
const pageSize = ref(30)
const pageSizes = ref([30, 50, 100])
// const total = ref(0)
const background = ref(true)
const disabled = ref(false)
const size = ref('default')
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: '25', A5: '电工', A6: '120/80', A7: '95', A8: '80', A9: '36.5' },
{ 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-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '120/80', A7: '95', A8: '80', A9: '35.1' },
{ A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '25', A5: '电工', A6: '140/95', A7: '95', A8: '80', A9: '36.5' },
])
const isBloodPressureNormal = (pressure) => {
if (!pressure) return false;
const [systolic, diastolic] = pressure.split('/').map(Number);
return systolic >= 90 && systolic <= 139 &&
diastolic >= 60 && diastolic <= 89;
};
const handleCurrentChange = () => { }
const handleSizeChange = () => { }
const onSearch = () => { }
const onExport = () => { }
const handleView = (row) => {
console.log(row);
}
const handleDownload = (row) => {
console.log(row);
}
onMounted(() => {
})
</script>