yak_handcuffs/src/views/statisticalCenter/index.vue

<template>
  <div class="container scrollbar">
    <MonitoringTop :list="funcList" />
    <el-row :gutter="20">
      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <DeviceHistory :api="getStatisticsContent">
          <template #chart>
            <div ref="chartRef" style="flex: 1"></div>
          </template>
        </DeviceHistory>
      </el-col>
      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <OnLineStatistics>
          <template #chart>
            <div ref="chartRef1" style="flex: 1"></div>
          </template>
        </OnLineStatistics>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <EmergencyList :tableData="tableData" :page="paging" :getData="getData" :changePage="changePage"></EmergencyList>
      </el-col>
      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <StatisticsWarning>
          <template #chart>
            <div ref="chartRef2" style="width: 100%; height: 100%"></div>
          </template>
        </StatisticsWarning>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import MonitoringTop from "./monitoringTop.vue";
import DeviceHistory from "./deviceHistory.vue";
import OnLineStatistics from "./onLineStatistics.vue";
import StatisticsWarning from "./statisticsWarning.vue";
import EmergencyList from "./emergencyList.vue";
import * as echarts from "echarts";
import { MapCustom } from "@/utils/mapCustom";
import { statisticsDevice, statisticsContent, statisticsCount, statisticsWarningapi, warnRecord } from "@/api/index";
import { onMounted, ref, reactive, onDeactivated } from "vue";
import { debounce } from "@/utils";
import { TWarnRecord } from "@/api/index.d";
import handcuffs from "@/assets/img/handcuffs.png";
import onLine from "@/assets/img/onLine.png";
import report from "@/assets/img/report.png";
import newly from "@/assets/img/newly.png";

const chartRef = ref(null);
const chartRef1 = ref(null);
const chartRef2 = ref(null);

let myChart = null;
let myChart1 = null;
let myChart2 = null;

let funcList = ref([
  { title: "手铐总数", en: "SHOUKAOZONGSHU", icon: handcuffs, num: 0, color: "##71DDF9" },
  { title: "在线数量", en: "ZAIXIANSHULIANG", icon: onLine, num: 0, color: "##71DDF9" },
  { title: "告警数量", en: "GAOJINGSHULIANG", icon: report, num: 0, color: "#8B51FD" },
  { title: "较昨日新增", en: "JIAOZUORIXINZENG", icon: newly, num: 0, color: "#FF6905" },
]);

const option = ref({
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [],
});

let option1 = ref({
  tooltip: {
    trigger: "item",
  },
  legend: {
    right: "left",
  },
  series: {
    type: "pie",
    radius: ["20%", "50%"],
    data: [
      { value: 1048, name: "常规模式" },
      { value: 735, name: "户外押送" },
      { value: 580, name: "审讯模式" },
    ],
  },
});
let option2 = ref({
  tooltip: {
    trigger: "item",
  },
  legend: {
    right: "left",
  },
  series: {
    type: "pie",
    radius: ["20%", "50%"],
    data: [
      { value: 0, name: "SOS告警" },
      { value: 0, name: "围栏告警" },
      { value: 0, name: "破坏告警" },
      { value: 0, name: "低电告警" },
      { value: 0, name: "心率告警" },
      { value: 0, name: "血氧告警" },
      { value: 0, name: "体温告警" },
    ],
  },
});

const paging = reactive({
  page: 1,
  size: 10,
  total: 0,
  deviceId: "",
});

const tableData = ref<TWarnRecord.IListRes[]>([]);

const getData = async () => {
  try {
    const res = await warnRecord(paging);
    tableData.value = res.records;
    paging.total = res.total;
  } catch (error) {}
};
const getStatisticsDevice = () => {
  statisticsDevice().then((res) => {});
};
const getStatisticsWarningApi = () => {
  statisticsWarningapi().then((res) => {
    option1.value.series.data = [
      { value: res?.sosCount, name: "SOS告警" },
      { value: res?.railCount, name: "围栏告警" },
      { value: res?.destroyCount, name: "破坏告警" },
      { value: res?.batteryCount, name: "低电告警" },
      { value: res?.heartRateCount, name: "心率告警" },
      { value: res?.bloodOxygenCount, name: "血氧告警" },
      { value: res?.tempCount, name: "体温告警" },
    ];
    myChart2.setOption(option2.value);
  });
};
const getStatisticsContent = (res) => {
  statisticsContent(res).then((res) => {
    option.value.xAxis.data = res?.times;
    option.value.series = [
      {
        stack: "Total",
        name: "SOS预警数组",
        data: res?.sosArr,
        type: "line",
      },
      {
        stack: "Total",
        name: "围栏预警数组",
        data: res?.railArr,
        type: "line",
      },
      {
        stack: "Total",
        name: "破坏预警数组",
        data: res?.destroyArr,
        type: "line",
      },
      {
        stack: "Total",
        name: "生理预警数组",
        data: res?.healthArr,
        type: "line",
      },
    ];
  });
  myChart.setOption(option.value);
};
const getStatisticsCount = () => {
  statisticsCount().then((res) => {
    funcList.value[0].num = res?.deviceTotal || 0;
    funcList.value[1].num = res?.onlineCount || 0;
    funcList.value[2].num = res?.warnCount || 0;
    funcList.value[3].num = res?.addCount || 0;
  });
};

const changePage = (val: number) => {
  paging.page = val;
  getData();
};

const handleResize = debounce(() => {
  myChart.resize();
  myChart1.resize();
  myChart2.resize();
}, 200);

onMounted(() => {
  getData();
  getStatisticsCount();
  getStatisticsWarningApi();

  new MapCustom({ dom: "mapcontainer" });

  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(option.value);

    myChart1 = echarts.init(chartRef1.value);
    myChart1.setOption(option1);

    myChart2 = echarts.init(chartRef2.value);
    myChart2.setOption(option2.value);

    window.addEventListener("resize", handleResize);
  }
});
onDeactivated(() => {
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="less" scoped>
.elcol {
  height: 380px;
  margin-bottom: 20px;
}
</style>