制作人员健康数据趋势血压/血压/心率/体温图表
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>
|
||||
<template>
|
||||
<div class="overall-container">
|
||||
<div>
|
||||
<div v-if="store.openDditFlag">
|
||||
<div class="search-container">
|
||||
<div class="layout_card">
|
||||
<el-card v-for="(item, index) in cardArr" :key="index"
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</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="结束日期"
|
||||
:disabled-date="disabledDayRange" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:size="size" />
|
||||
</el-form-item>
|
||||
<el-form-item class="layout-pr10">
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
</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 label="序号" type="index" align="center" max-width="120" fixed="left" />
|
||||
<el-table-column prop="A1" label="记录时间" sortable fixed="left" align="center" min-width="150"
|
||||
show-overflow-tooltip />
|
||||
<el-table-column prop="A2" label="姓名" sortable fixed="left" align="center" min-width="120"
|
||||
|
|
@ -187,14 +187,15 @@
|
|||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Detail v-else :store="store" @close="handleClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { disabledDate } from '@/utils/disabledDate'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { disabledDayRange } from '@/utils/disabledDate'
|
||||
import Detail from './components/detail.vue'
|
||||
|
||||
import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png'
|
||||
import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png'
|
||||
|
|
@ -209,11 +210,11 @@ const cardArr = [
|
|||
]
|
||||
|
||||
const cardListArr = ref([
|
||||
{ name: '项目总人数', value: '' },
|
||||
{ name: '标段总人数', value: '' },
|
||||
{ name: '劳务队总人数', value: '' },
|
||||
{ name: '健康状态正常人数', value: '' },
|
||||
{ name: '健康状态异常人数', value: '' },
|
||||
{ name: '项目总人数', value: '5' },
|
||||
{ name: '标段总人数', value: '5' },
|
||||
{ name: '劳务队总人数', value: '5' },
|
||||
{ name: '健康状态正常人数', value: '1' },
|
||||
{ name: '健康状态异常人数', value: '4' },
|
||||
])
|
||||
const projectList = ref([])
|
||||
const sectionList = ref([])
|
||||
|
|
@ -253,16 +254,21 @@ const handleSizeChange = () => { }
|
|||
const onSearch = () => { }
|
||||
const onExport = () => { }
|
||||
|
||||
|
||||
const store = reactive({
|
||||
openDditFlag: true,
|
||||
});
|
||||
const handleView = (row) => {
|
||||
console.log(row);
|
||||
store.openDditFlag = false;
|
||||
}
|
||||
|
||||
const handleDownload = (row) => {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
|
||||
const handleClose = () => {
|
||||
store.openDditFlag = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue