129 lines
3.8 KiB
Vue
129 lines
3.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="el-row-left">
|
|
<DeviceModel @click="handleClickDevice" />
|
|
</div>
|
|
<div class="el-row-right scrollbar">
|
|
<MonitoringTop :funcList="funcList" />
|
|
<div class="el-row-right-content" v-if="deviceInfo?.mode == 0 || deviceInfo?.mode == 2">
|
|
<DeviceLocationMap :device-id="deviceInfo.deviceId" />
|
|
<el-row class="box" :gutter="20">
|
|
<el-col :span="12" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" style="margin-bottom: 20px">
|
|
<DeviceHistory @change="handleRadio" ref="devHisRef" />
|
|
</el-col>
|
|
<el-col :span="12" :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
|
<DeviceRecord :deviceInfo="deviceInfo" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="el-row-right-content" v-else>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24" style="margin-bottom: 20px">
|
|
<DeviceHistory @change="handleRadio" ref="devHisRef" />
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<DeviceRecord :deviceInfo="deviceInfo" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import DeviceModel from "./deviceModel.vue";
|
|
import MonitoringTop from "./monitoringTop.vue";
|
|
import DeviceHistory from "./deviceHistory.vue";
|
|
import DeviceRecord from "./deviceRecord.vue";
|
|
import DeviceLocationMap from "./deviceLocationMap.vue";
|
|
import { healthLatestData } from "@/api/index";
|
|
import { TDevice, THealthLatestData } from "@/api/index.d";
|
|
import { ref, onUnmounted } from "vue";
|
|
import heart from "@/assets/img/heart.png";
|
|
import temperature from "@/assets/img/temperature.png";
|
|
import blood from "@/assets/img/blood.png";
|
|
|
|
const devHisRef = ref(null);
|
|
|
|
let Interval = null;
|
|
let funcList = ref([
|
|
{ title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 0, color: "#FF0303" },
|
|
{ title: "当前血氧", en: "DANGQIANXUEYANG", icon: blood, unit: "%", num: 0, color: "#8B51FD" },
|
|
{ title: "当前体表温度", en: "DANGQIANTIBIAOWENDU", icon: temperature, unit: "℃", num: 0, color: "#FF6905" },
|
|
]);
|
|
|
|
const HealthData = ref<THealthLatestData.TRes>();
|
|
const deviceInfo = ref<TDevice.IListRes>();
|
|
|
|
const getHealthLatestData = () => {
|
|
healthLatestData({ deviceId: deviceInfo.value.deviceId }).then((res) => {
|
|
HealthData.value = res;
|
|
funcList.value[0].num = res.hr;
|
|
funcList.value[1].num = res.bo;
|
|
funcList.value[2].num = res.temp;
|
|
handleRadio(devHisRef.value.radio);
|
|
});
|
|
};
|
|
const handleRadio = (val: number) => {
|
|
if (val == 1) {
|
|
devHisRef.value?.getOptionsData(HealthData.value.hrArr, "心率", "#FF0303");
|
|
} else if (val == 2) {
|
|
devHisRef.value?.getOptionsData(HealthData.value.boArr, "血氧", "#983AFC");
|
|
} else if (val == 3) {
|
|
devHisRef.value?.getOptionsData(HealthData.value.tempArr, "体表温度", "#FFA91F");
|
|
}
|
|
};
|
|
|
|
const IntervalFn = () => {
|
|
Interval = setInterval(() => {
|
|
getHealthLatestData();
|
|
}, 60000);
|
|
};
|
|
|
|
const handleClickDevice = (val: TDevice.IListRes) => {
|
|
devHisRef.value.radio = "1";
|
|
deviceInfo.value = val;
|
|
getHealthLatestData();
|
|
if (!Interval) {
|
|
IntervalFn();
|
|
}
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(Interval);
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.container {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.el-row-left {
|
|
width: 335px;
|
|
// height: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.el-row-right {
|
|
width: 100%;
|
|
overflow: auto;
|
|
margin-left: 20px;
|
|
|
|
.el-row-right-content {
|
|
overflow: hidden;
|
|
// height: 100%;
|
|
.box {
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.el-col {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|