yak_handcuffs/src/views/monitoringCenter/index.vue

<template>
  <div class="container">
    <el-row class="el-row" :gutter="20">
      <el-col :span="6" class="el-row-left"
        ><DeviceInfo :deviceInfo="deviceInfo" :paging="devicePaging" :list="deviceData" :handelMode="handelMode" :load="handelLoad" @click="handelClickDevice"
      /></el-col>
      <el-col :span="18" 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" />
          <div class="box">
            <DeviceHistory @change="handelRadio" ref="devHisRef">
              <template #chart>
                <div ref="chartRef" style="width: 100%; height: 100%"></div>
              </template>
            </DeviceHistory>
            <DeviceRecord :deviceInfo="deviceInfo" />
          </div>
        </div>
        <div class="el-row-right-content" v-else>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <DeviceHistory @change="handelRadio" ref="devHisRef">
                <template #chart>
                  <div ref="chartRef1" style="width: 100%; height: 350px"></div>
                </template>
              </DeviceHistory>
            </el-col>
            <el-col :span="24" style="margin-top: 20px">
              <DeviceRecord :deviceInfo="deviceInfo" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import DeviceInfo from "./deviceInfo.vue";
import MonitoringTop from "./monitoringTop.vue";
import DeviceHistory from "./deviceHistory.vue";
import DeviceRecord from "./deviceRecord.vue";
import * as echarts from "echarts";
import { deviceList, healthLatestData } from "@/api/index";
import { TDevice, THealthLatestData } from "@/api/index.d";
import { onMounted, ref, reactive, onUnmounted, watch, nextTick } from "vue";
import { debounce, format } from "@/utils";
import heart from "@/assets/img/heart.png";
import temperature from "@/assets/img/temperature.png";
import blood from "@/assets/img/blood.png";
import DeviceLocationMap from "./deviceLocationMap.vue";

const chartRef = ref(null);
const chartRef1 = ref(null);
const devHisRef = ref(null);
const loadFlag = ref(false);
let myChart = 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 options = {
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      let unit = { 心率: "次/分", 血氧: "%", 体表温度: "℃" };
      var res = format(options.times[params[0].dataIndex]) + "<br/>";
      res += params
        .map(function (param, index) {
          return param.marker + param.seriesName + "：" + param.value + unit[param.seriesName] + "<br/>";
        })
        .join("");
      return res;
    },
  },
  times: [],
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  grid: {
    left: "5%",
    right: "4%",
    bottom: "20%",
  },
  dataZoom: [
    {
      show: true, // 是否显示
      start: 0, // 开始位置，百分比
      end: 10, // 结束位置，百分比
      bottom: "10px",
      height: 25,
    },
    {
      type: "inside",
      start: 0,
      end: 100,
    },
  ],
  series: {
    name: "",
    data: [],
    type: "line",
    showSymbol: false,
    itemStyle: {
      color: "#ff4567", // 设置线条颜色
    },
    smooth: true,
  },
};

const devicePaging = reactive({
  page: 1,
  size: 10,
  mode: undefined,
  useStatus: 1,
  status: 1,
});
const HealthData = ref<THealthLatestData.TRes>();
const deviceInfo = ref<TDevice.IListRes>();
const deviceData = ref<TDevice.IListRes[]>([]);

watch(
  () => deviceInfo,
  (newVal) => {
    if (newVal.value) {
      if (newVal.value?.mode == 0 || newVal.value?.mode == 2) {
        nextTick(() => {
          myChart = echarts.init(chartRef.value);
        });
        options.grid.left = "10%";
        options.grid.bottom = "30%";
      } else {
        options.grid.left = "5%";
        options.grid.bottom = "20%";
        nextTick(() => {
          myChart = echarts.init(chartRef1.value);
        });
      }
    }
  },
  { deep: true }
);

const getdeviceList = async () => {
  const res = await deviceList(devicePaging);
  deviceData.value = [...deviceData.value, ...res.records];
  if (deviceData.value.length >= res.total) {
    loadFlag.value = true;
  }
  if (res.records.length > 0) {
    deviceInfo.value = res.records[0];
    getHealthLatestData();
    IntervalFn();
  }
};

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) => {
  console.log("刷新");

  if (val == 1) {
    getOptionsData(HealthData.value.hrArr, "心率", "#FF0303");
  } else if (val == 2) {
    getOptionsData(HealthData.value.boArr, "血氧", "#983AFC");
  } else if (val == 3) {
    getOptionsData(HealthData.value.tempArr, "体表温度", "#FFA91F");
  }
};
const getOptionsData = (list: { time: string; value: number }[], name: string, color: string) => {
  options.xAxis.data = [];
  options.series.data = [];
  if (list && list.length) {
    list.forEach((item) => {
      options.times.push(item.time);
      options.xAxis.data.push(format(item.time, "HH:mm:ss"));
      options.series.data.push(item.value);
    });
    options.series.name = name;
    options.series.itemStyle.color = color;
  }
  myChart.setOption(options);
};

const IntervalFn = () => {
  Interval = setInterval(() => {
    getHealthLatestData();
  }, 60000);
};
const handelMode = (e) => {
  devicePaging.mode = e;
  devicePaging.page = 1;
  deviceData.value = [];
  getdeviceList();
};
const handelLoad = () => {
  if (loadFlag.value) return;
  devicePaging.page += 1;
  getdeviceList();
};
const handelClickDevice = (val: TDevice.IListRes) => {
  devHisRef.value.radio = "1";
  deviceInfo.value = val;
  getHealthLatestData();
};
const handleResize = debounce(() => {
  myChart.resize();
}, 200);
onMounted(() => {
  getdeviceList();
  myChart = echarts.init(chartRef.value ? chartRef.value : chartRef1.value);
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  clearInterval(Interval);
  window.removeEventListener("resize", handleResize);
});
</script>
<style scoped lang="less">
.container {
  overflow: hidden;
  display: flex;
  .el-row {
    flex: 1;
    overflow: hidden;
    display: flex;
    .el-row-left {
      height: 100%;
      display: flex;
      overflow: hidden;
    }
    .el-row-right {
      height: 100%;
      overflow: auto;
      .el-row-right-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .box {
          height: 388px;
          flex-shrink: 0;
          overflow: hidden;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>