93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<div class="alert-container">
|
|
<el-row class="bottom-pan">
|
|
<el-col :span="24" class="panel-bottom">
|
|
<Cameras/>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="top-pan">
|
|
<el-col :sm="24" :md="12" class="panel-top-left">
|
|
<statistics />
|
|
<!-- <div class="placeholder">预留块区域</div> -->
|
|
</el-col>
|
|
<el-col :sm="24" :md="12" class="panel-top-right">
|
|
<alertChart />
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import Statistics from '@/components/Statistics.vue';
|
|
import AlertChart from '@/components/AlertChart.vue';
|
|
import Cameras from '@/components/Cameras.vue';
|
|
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
|
|
|
|
// 创建 BoxApi 实例
|
|
const boxApi = new BoxApi();
|
|
const typeMapping = reactive({});
|
|
const token = ref(null);
|
|
|
|
// 获取类型映射
|
|
const fetchTypeMapping = async (token) => {
|
|
try {
|
|
const algorithms = await boxApi.getAlgorithms(token); // 使用 BoxApi 的 getAlgorithms 方法
|
|
const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
|
|
algorithms.forEach((algorithm) => {
|
|
typeMapping[algorithm.code_name] = algorithm.name;
|
|
});
|
|
} catch (error) {
|
|
console.error("Error fetching algorithms:", error);
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
token.value = localStorage.getItem('alertToken');
|
|
await fetchTypeMapping(token.value);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.alert-container {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.top-pan {
|
|
/* padding: 10px; */
|
|
/* margin-bottom: 10px; */
|
|
display: flex;
|
|
gap: 10px;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
height: 55vh;
|
|
}
|
|
.bottom-pan{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-top-left {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel-top-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.panel-bottom{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|