人员健康数据监测添加汇总模块，添加列表内容
This commit is contained in:
parent
37083655a0
commit
80a0adf4d0
|
|
@ -34,6 +34,28 @@
|
|||
justify-content: 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>
|
||||
<template>
|
||||
<div class="overall-container">
|
||||
|
|
@ -81,43 +103,67 @@
|
|||
<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-form-item>
|
||||
<el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</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
|
||||
: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"
|
||||
<el-table-column prop="A1" label="记录时间" sortable fixed="left" align="center" min-width="150"
|
||||
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 />
|
||||
<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 />
|
||||
<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>
|
||||
<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="110"
|
||||
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>
|
||||
<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>
|
||||
<el-table-column prop="A7" label="血氧(%)" sortable align="center" min-width="80"
|
||||
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>
|
||||
<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>
|
||||
<el-table-column prop="A8" label="心率(BPM)" sortable align="center" min-width="100"
|
||||
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>
|
||||
<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>
|
||||
<el-table-column prop="A9" label="体温(℃)" sortable align="center" min-width="80"
|
||||
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>
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" min-width="100" align="center">
|
||||
|
|
@ -141,6 +187,7 @@
|
|||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -149,18 +196,25 @@ 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' },
|
||||
{ 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: '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' },
|
||||
]
|
||||
|
||||
const cardListArr = ref([
|
||||
{ name: '项目总人数', value: '' },
|
||||
{ name: '标段总人数', value: '' },
|
||||
{ name: '劳务队总人数', value: '' },
|
||||
{ name: '健康状态正常人数', value: '' },
|
||||
{ name: '健康状态异常人数', value: '' },
|
||||
])
|
||||
const projectList = ref([])
|
||||
const sectionList = ref([])
|
||||
const projectState = ref('')
|
||||
|
|
@ -180,25 +234,26 @@ 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' },
|
||||
{ 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-02 10:00:00', A2: '李四', A3: '男', A4: '23', A5: '司机', A6: '122/81', A7: '95', A8: '78', A9: '35.1',A10: 0 },
|
||||
{ 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-04 10:00:00', A2: '赵六', A3: '男', A4: '25', A5: '钢筋工', A6: '110/88', A7: '93', A8: '95', A9: '36.2' ,A10: 21},
|
||||
{ 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) => {
|
||||
if (!pressure) return false;
|
||||
|
||||
const [systolic, diastolic] = pressure.split('/').map(Number);
|
||||
return systolic >= 90 && systolic <= 139 &&
|
||||
diastolic >= 60 && diastolic <= 89;
|
||||
return systolic >= 90 && systolic <= 140 &&
|
||||
diastolic >= 60 && diastolic <= 90;
|
||||
};
|
||||
|
||||
|
||||
const handleCurrentChange = () => { }
|
||||
const handleSizeChange = () => { }
|
||||
const onSearch = () => { }
|
||||
const onExport = () => { }
|
||||
|
||||
|
||||
const handleView = (row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
|
@ -208,6 +263,7 @@ const handleDownload = (row) => {
|
|||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue