120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<MonitoringTop />
|
|
<el-row :gutter="20" style="margin-top: 20px; height: 380px">
|
|
<el-col :span="16">
|
|
<DeviceHistory>
|
|
<template #chart>
|
|
<div ref="chartRef" style="flex: 1"></div>
|
|
</template>
|
|
</DeviceHistory>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<OnLineStatistics>
|
|
<template #chart>
|
|
<div ref="chartRef1" style="flex: 1"></div>
|
|
</template>
|
|
</OnLineStatistics>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" style="margin-top: 20px; height: 380px">
|
|
<el-col :span="16">
|
|
<EmergencyList :tableData="tableData" :page="page" :getData="getData" :changePage="changePage"></EmergencyList>
|
|
</el-col>
|
|
<el-col :span="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 } from "vue";
|
|
|
|
const chartRef = ref(null);
|
|
const chartRef1 = ref(null);
|
|
const chartRef2 = ref(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();
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (chartRef.value) {
|
|
new MapCustom({ dom: "mapcontainer" });
|
|
|
|
const myChart = echarts.init(chartRef.value);
|
|
myChart.setOption(option);
|
|
|
|
const myChart1 = echarts.init(chartRef1.value);
|
|
myChart1.setOption(option1);
|
|
|
|
const myChart2 = echarts.init(chartRef2.value);
|
|
myChart2.setOption(option1);
|
|
}
|
|
});
|
|
</script>
|