yak_handcuffs/src/views/monitoringCenter/index.vue

<template>
  <div class="container scrollbar">
    <el-row :gutter="20">
      <el-col :span="7"><DeviceInfo /></el-col>
      <el-col :span="17">
        <MonitoringTop />
        <div v-if="false">
          <div class="monitoringMap" id="mapcontainer"></div>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <DeviceHistory>
                <template #chart>
                  <div ref="chartRef" style="width: 100%; height: 100%"></div>
                </template>
              </DeviceHistory>
            </el-col>
            <el-col :span="12">
              <DeviceRecord :tableData="tableData" :page="page" :getData="getData" :changePage="changePage" />
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24" style="height: 400px">
              <DeviceHistory>
                <template #chart>
                  <div ref="chartRef" style="width: 100%; height: 100%"></div>
                </template>
              </DeviceHistory>
            </el-col>
            <el-col :span="24" style="margin-top: 20px">
              <DeviceRecord :tableData="tableData" :page="page" :getData="getData" :changePage="changePage" />
            </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 { MapCustom } from "@/utils/mapCustom";
import * as echarts from "echarts";
import { fetchData } from "@/api/index";
import { onMounted, onDeactivated, ref, reactive } from "vue";
import { TableItem } from "@/types/table";
import { debounce } from "@/utils";
const chartRef = ref(null);
let myChart = null;

const ringOptions = {
  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,
    },
  ],
};

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

onMounted(() => {
  new MapCustom({ dom: "mapcontainer" });
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(ringOptions);
    window.addEventListener("resize", handleResize);
  }
});
onDeactivated(() => {
  window.removeEventListener("resize", handleResize);
});
</script>
<style scoped lang="less">
.monitoringMap {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
</style>