制作人员健康数据趋势血压/血压/心率/体温图表
This commit is contained in:
parent
80a0adf4d0
commit
e698d48f4a
|
|
@ -0,0 +1,221 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between;">
|
||||||
|
<span>人员健康数据趋势</span>
|
||||||
|
<el-button type="primary" @click="handleBack">返回</el-button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="display: flex; width: 100%; height: 72vh; flex-wrap: wrap; justify-content: space-between; padding-top: 20px;">
|
||||||
|
<el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
|
||||||
|
<div ref="chart1" style="width: 100%; height: 100%;"></div>
|
||||||
|
</el-card>
|
||||||
|
<el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
|
||||||
|
<div ref="chart2" style="width: 100%; height: 100%;"></div>
|
||||||
|
</el-card>
|
||||||
|
<el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
|
||||||
|
<div ref="chart3" style="width: 100%; height: 100%;"></div>
|
||||||
|
</el-card>
|
||||||
|
<el-card style="width: 49%; height: 34vh;" body-style="height: 100%;">
|
||||||
|
<div ref="chart4" style="width: 100%; height: 100%;"></div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
const emit = defineEmits(['close'])
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
const chart1 = ref(null)
|
||||||
|
const initChart1 = () => {
|
||||||
|
if (!chart1.value) return false
|
||||||
|
const myChart = echarts.init(chart1.value);
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '血压趋势',
|
||||||
|
top: 'top',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['收缩压', '舒张压'],
|
||||||
|
bottom: 'bottom'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
|
||||||
|
boundaryGap: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: 'mmHg',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '收缩压',
|
||||||
|
data: [120, 122, 130, 126, 121, 122, 123],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '舒张压',
|
||||||
|
data: [80, 82, 83, 84, 83, 85, 83],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart2 = ref(null)
|
||||||
|
const initChart2 = () => {
|
||||||
|
if (!chart2.value) return false
|
||||||
|
const myChart = echarts.init(chart2.value);
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '血氧趋势',
|
||||||
|
top: 'top',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['血氧饱和度'],
|
||||||
|
bottom: 'bottom'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
|
||||||
|
boundaryGap: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '血氧饱和度',
|
||||||
|
data: [98, 96, 96, 95, 96, 96, 97],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart3 = ref(null)
|
||||||
|
const initChart3 = () => {
|
||||||
|
if (!chart3.value) return false
|
||||||
|
const myChart = echarts.init(chart3.value);
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '心率趋势',
|
||||||
|
top: 'top',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['心率'],
|
||||||
|
bottom: 'bottom'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
|
||||||
|
boundaryGap: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: 'bpm',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '心率',
|
||||||
|
data: [75, 78, 79, 81, 79, 76, 77],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart4 = ref(null)
|
||||||
|
const initChart4 = () => {
|
||||||
|
if (!chart4.value) return false
|
||||||
|
const myChart = echarts.init(chart4.value);
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '体温趋势',
|
||||||
|
top: 'top',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['体温'],
|
||||||
|
bottom: 'bottom'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '24%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['08:00', '12:00', '16:00', '20:00', '00:00', '04:00', '08:00'],
|
||||||
|
boundaryGap: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '℃',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '体温',
|
||||||
|
data: [36.1, 36.1, 36.3, 36.2, 36.1, 36.1, 36.2],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initChart1()
|
||||||
|
initChart2()
|
||||||
|
initChart3()
|
||||||
|
initChart4()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="overall-container">
|
<div class="overall-container">
|
||||||
<div>
|
<div v-if="store.openDditFlag">
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<div class="layout_card">
|
<div class="layout_card">
|
||||||
<el-card v-for="(item, index) in cardArr" :key="index"
|
<el-card v-for="(item, index) in cardArr" :key="index"
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="日期范围" class="layout-pr10">
|
<el-form-item label="日期范围" class="layout-pr10">
|
||||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="-"
|
<el-date-picker v-model="dateRange" type="daterange" range-separator="-"
|
||||||
:disabled-date="disabledDate" start-placeholder="开始日期" end-placeholder="结束日期"
|
:disabled-date="disabledDayRange" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||||
:size="size" />
|
:size="size" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item class="layout-pr10">
|
<el-form-item class="layout-pr10">
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
</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" max-width="120" fixed="left" />
|
||||||
<el-table-column prop="A1" label="记录时间" sortable 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="姓名" sortable fixed="left" align="center" min-width="120"
|
<el-table-column prop="A2" label="姓名" sortable fixed="left" align="center" min-width="120"
|
||||||
|
|
@ -187,14 +187,15 @@
|
||||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Detail v-else :store="store" @close="handleClose" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { View } from '@element-plus/icons-vue'
|
import { View } from '@element-plus/icons-vue'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, reactive } from 'vue'
|
||||||
import { disabledDate } from '@/utils/disabledDate'
|
import { disabledDayRange } from '@/utils/disabledDate'
|
||||||
|
import Detail from './components/detail.vue'
|
||||||
|
|
||||||
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'
|
||||||
|
|
@ -209,11 +210,11 @@ const cardArr = [
|
||||||
]
|
]
|
||||||
|
|
||||||
const cardListArr = ref([
|
const cardListArr = ref([
|
||||||
{ name: '项目总人数', value: '' },
|
{ name: '项目总人数', value: '5' },
|
||||||
{ name: '标段总人数', value: '' },
|
{ name: '标段总人数', value: '5' },
|
||||||
{ name: '劳务队总人数', value: '' },
|
{ name: '劳务队总人数', value: '5' },
|
||||||
{ name: '健康状态正常人数', value: '' },
|
{ name: '健康状态正常人数', value: '1' },
|
||||||
{ name: '健康状态异常人数', value: '' },
|
{ name: '健康状态异常人数', value: '4' },
|
||||||
])
|
])
|
||||||
const projectList = ref([])
|
const projectList = ref([])
|
||||||
const sectionList = ref([])
|
const sectionList = ref([])
|
||||||
|
|
@ -253,16 +254,21 @@ const handleSizeChange = () => { }
|
||||||
const onSearch = () => { }
|
const onSearch = () => { }
|
||||||
const onExport = () => { }
|
const onExport = () => { }
|
||||||
|
|
||||||
|
const store = reactive({
|
||||||
|
openDditFlag: true,
|
||||||
|
});
|
||||||
const handleView = (row) => {
|
const handleView = (row) => {
|
||||||
console.log(row);
|
console.log(row);
|
||||||
|
store.openDditFlag = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDownload = (row) => {
|
const handleDownload = (row) => {
|
||||||
console.log(row);
|
console.log(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
store.openDditFlag = true;
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue