制作个人健康中心人员列表静态页面
This commit is contained in:
parent
e698d48f4a
commit
900af3a774
|
|
@ -30,12 +30,14 @@ import Home from '@/views/home/index.vue'
|
|||
|
||||
import personnePostPhysicalExamination from '@/views/personnePostPhysicalExamination/index.vue'
|
||||
import personnelHealthMonitoring from '@/views/personnelHealthMonitoring/index.vue'
|
||||
import personalHealthCenter from '@/views/personalHealthCenter/index.vue'
|
||||
|
||||
const currentComponent = shallowRef(null)
|
||||
|
||||
const staticRoutes = {
|
||||
personnePostPhysicalExamination,
|
||||
personnelHealthMonitoring,
|
||||
personalHealthCenter
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
<style scoped lang='scss'>
|
||||
.color_red {
|
||||
color: red;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.color_green {
|
||||
color: #67c23a;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class='overall-container'>
|
||||
<div>
|
||||
<div class="search-container">
|
||||
<el-form class="search-container-from">
|
||||
<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 class="layout-pr10">
|
||||
<el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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" max-width="120" fixed="left" />
|
||||
<el-table-column prop="A2" label="姓名" fixed="left" sortable align="center" min-width="120"
|
||||
show-overflow-tooltip />
|
||||
<el-table-column prop="A3" label="性别" fixed="left" sortable align="center" min-width="120"
|
||||
show-overflow-tooltip />
|
||||
<el-table-column prop="A4" label="年龄" sortable align="center" min-width="80" 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="90" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<div v-if="isBloodPressureNormal(scope.row.A6)" class="color_green">{{ scope.row.A6 }}</div>
|
||||
<div v-else class="color_red" >{{ scope.row.A6 }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="A7" label="血氧(%)" sortable align="center" min-width="70" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.A7 >= 95" class="color_green">{{ scope.row.A7 }}</div>
|
||||
<div v-else class="color_red">{{ scope.row.A7 }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="A8" label="心率(BPM)" sortable align="center" min-width="80" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.A8 <= 100 && scope.row.A8 >= 60" class="color_green">{{ scope.row.A8 }}</div>
|
||||
<div v-else class="color_red">{{ scope.row.A8 }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="A9" label="体温(℃)" sortable align="center" min-width="70" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.A9 >= 36.1 && scope.row.A9 <= 37.2" class="color_green">{{ scope.row.A9 }}</div>
|
||||
<div v-else class="color_red">{{ 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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const projectList = ref([])
|
||||
const sectionList = ref([])
|
||||
const projectState = ref('')
|
||||
const sectionState = ref('')
|
||||
const laborTeamList = ref([])
|
||||
const laborTeamState = 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: '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 handleView = (row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
const handleDownload = (row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue