yak_handcuffs/src/views/statisticalCenter/index.vue

<template>
  <div class="container scrollbar">
    <MonitoringTop />
    <el-row :gutter="20">
      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <DeviceHistory>
          <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 } from "@/api/index";
import { TableItem } from "@/types/table";
import { onMounted, ref, reactive, onDeactivated } from "vue";
import { debounce } from "@/utils";

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

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

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;
};
getData();

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

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

onMounted(() => {
  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>