yak_handcuffs/src/views/monitoringCenter/index.vue

<template>
  <div class="container">
    <div class="el-row-left">
      <DeviceModel @click="handelClickDevice" />
    </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="handelRadio" 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="handelRadio" 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;
    handelRadio(devHisRef.value.radio);
  });
};
const handelRadio = (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 handelClickDevice = (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>