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 09:57:56 +08:00
parent 421e3346bf
commit cf0e05ceb0
2 changed files with 170 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/layouts/defaultLayout.vue
View File

@ -13,6 +13,7 @@
<el-main>
<Tabs />
<Home v-show="showDefaultContent" />
<component :is="currentComponent" />
<router-view />
</el-main>
</el-container>
@ -20,19 +21,34 @@
</template>
<script setup>
import { ref, watch } from 'vue'
import { ref, watch, shallowRef } from 'vue'
import { useRoute } from 'vue-router'
import NavHeader from '@/components/layouts/navHeader.vue'
import NavMenu from '@/components/layouts/navMenu.vue'
import Tabs from '@/components/layouts/tabs.vue'
import Home from '@/views/home/index.vue'
import personnePostPhysicalExamination from '@/views/personnePostPhysicalExamination/index.vue'
const currentComponent = shallowRef(null)
const staticRoutes = {
personnePostPhysicalExamination,
}
const route = useRoute()
const showDefaultContent = ref(true)
const isCollapse = ref(false)
// 监听路由变化
watch(() => route.path, (newPath) => {
const path = newPath.replace('/', '')
showDefaultContent.value = newPath === '/home'
if (path) {
currentComponent.value = staticRoutes[path]
}
}, { immediate: true })
const toggleCollapse = () => {
isCollapse.value = !isCollapse.value

153
src/views/personnePostPhysicalExamination/index.vue Normal file
View File

@ -0,0 +1,153 @@
<style lang="scss" scoped>
.layout-pr5 {
padding-right: 5px;
}
.layout_card {
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;
}
}
}
.upload-demo {
display: flex;
padding: 0 10px;
}
</style>
<template>
<div class="overall-container">
<div class="search-container">
<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="no-required-star layout-pr10">
<el-input v-model="input" clearable class="layout-w200" placeholder="请输入姓名" />
</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-item>
<el-button type="primary" icon="Printer" @click="onPrint">打印</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="left" min-width="200"
show-overflow-tooltip />
<el-table-column prop="A2" label="标段名称" fixed="left" align="left" min-width="200"
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="80" show-overflow-tooltip />
<el-table-column prop="A6" label="工种" align="center" min-width="120" show-overflow-tooltip />
<el-table-column prop="A7" label="入场时间" align="center" min-width="120" show-overflow-tooltip />
<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>
</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>
</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>
</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>
</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>
</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>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const projectList = ref([])
const sectionList = ref([])
const projectState = ref('')
const sectionState = ref('')
const input = ref('')
const tableLoading = ref(false)
const tableHeight = ref('60vh')
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: '项目1', A2: '标段1', A3: '张三', A4: '男', A5: '18', A6: '电工', A7: '2022-01-01', A8: '2022-01-01', A9: '145/95', A10: '80', A11: '101', A12: '37.5', A13: '异常' },
{ A1: '项目1', A2: '标段1', A3: '张三', A4: '男', A5: '18', A6: '电工', A7: '2022-01-01', A8: '2022-01-01', A9: '120/80', A10: '95', A11: '70', A12: '36.5', A13: '正常' },
{ A1: '项目1', A2: '标段1', A3: '张三', A4: '男', A5: '18', A6: '电工', A7: '2022-01-01', A8: '2022-01-01', A9: '120/80', A10: '95', A11: '59', A12: '36.5', A13: '正常' },
])
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 onPrint = () => { }
onMounted(() => {
})
</script>