125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<template>
|
|
<div class="alert-container" >
|
|
<el-row class="bottom-pan">
|
|
<el-col class="panel-bottom">
|
|
<Cameras/>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="top-pan">
|
|
<el-col :sm="24" :md="12" class="panel-top-left">
|
|
<statistics />
|
|
</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,computed, onBeforeUnmount} 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 scale = ref(1);
|
|
|
|
// const scaleStyle = computed(() => ({
|
|
// transform: `scale(${scale.value})`,
|
|
// transformOrigin: 'top left',
|
|
// width: `${100 / scale.value}%`,
|
|
// }));
|
|
|
|
// const handleResize = () => {
|
|
// const clientWidth = document.documentElement.clientWidth;
|
|
// const scaleFactor = clientWidth / 1920;
|
|
// scale.value = scaleFactor < 1 ? scaleFactor : 1;
|
|
// };
|
|
|
|
// 获取类型映射
|
|
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);
|
|
// handleResize();
|
|
// window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
// onBeforeUnmount(() => {
|
|
// window.removeEventListener('resize', handleResize);
|
|
// });
|
|
</script>
|
|
|
|
<style scoped>
|
|
.alert-container {
|
|
/* transform: scale(0.97); */
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f5f7fa;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.top-pan {
|
|
/* padding: 10px; */
|
|
/* margin-bottom: 10px; */
|
|
/* display: flex; */
|
|
/* gap: 5px; */
|
|
/* background-color: #fff; */
|
|
/* background-color: #1E2E4A; */
|
|
/* overflow: hidden; */
|
|
/* height: 55vh; */
|
|
/* max-height: 450px; */
|
|
/* padding-left: 1vh; */
|
|
/* padding-right:1vh ; */
|
|
/* overflow: hidden; */
|
|
height: 56vh;
|
|
margin-top: 60px;
|
|
/* border: 1px solid #1E2E4A; */
|
|
|
|
}
|
|
.bottom-pan{
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 33vh;
|
|
}
|
|
|
|
.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>
|