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="page" :getData="getData" :changePage="changePage"></EmergencyList>
      </el-col>
      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <OnLineStatistics>
          <template #chart>
            <div ref="chartRef2" style="width: 100%; height: 100%"></div>
          </template>
        </OnLineStatistics>
      </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 EmergencyList from "./emergencyList.vue";
import * as echarts from "echarts";
import { MapCustom } from "@/utils/mapCustom";
import { fetchData, statisticsDevice, statisticsContent } from "@/api/index";
import { TableItem } from "@/types/table";
import { onMounted, ref, reactive, onDeactivated } from "vue";
import { debounce } from "@/utils";
import { TStatisticsDevice } 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 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
};
let option1 = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    right: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["20%", "50%"],
      data: [
        { value: 1048, name: "常规模式" },
        { value: 735, name: "户外押送" },
        { value: 580, name: "审讯模式" },
      ],
    },
  ],
};

const page = reactive({
  index: 1,
  size: 10,
  total: 200,
});

const tableData = ref<TableItem[]>([]);

const getData = async () => {
  const res = await fetchData();
  tableData.value = res.data.list;
};
const getStatisticsDevice = () => {
  statisticsDevice().then((res) => {
    funcList.value[0].num = res.deviceTotal;
    funcList.value[1].num = res.onlineCount;
    funcList.value[2].num = res.warnCount;
    funcList.value[3].num = res.addCount;
  });
};
const getStatisticsContent = (res) => {
  statisticsContent(res).then((res) => {});
};

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

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

onMounted(() => {
  getData();
  getStatisticsDevice();

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

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

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

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