integrated_traffic_vue/src/components/map_tools/alarm_view.vue

85 lines
1.5 KiB
Vue

<template>
<div id="bi_container">
<div id="map" class="map_bg"></div>
</div>
</template>
<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import { initMap, handleViewAlarm, handleMouseClick } from "./map";
import { useUserStore } from "@/pinia/user.js";
import { getEnterpriseInfo } from "@/request/enterprise_management.js";
const props = defineProps({
alarm: {
type: Object,
required: true,
default: null,
},
userList: {
type: Array,
required: true,
default: () => [],
},
});
const userStore = useUserStore();
const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
onMounted(async () => {
const corp = await getEnterpriseInfo({ CORPINFO_ID });
initMap(corp.pd);
handleMouseClick();
handleViewAlarm(props.alarm, props.userList);
});
onBeforeUnmount(() => {
window.$scene = null;
window.$icy = null;
window.$carmer = null;
});
</script>
<style scoped lang="scss">
#bi_container {
width: 100%;
height: 600px;
color: #ffffff;
position: relative;
font-size: 14px;
.map_bg {
width: 100%;
height: 540px;
}
.options {
margin-top: 10px;
display: flex;
align-items: center;
padding: 10px;
.option {
margin-right: 20px;
cursor: pointer;
text-align: center;
img {
width: 46px;
height: 46px;
}
.label {
margin-top: 10px;
font-size: 12px;
}
}
.id {
background-color: #1b284a;
padding: 10px;
border-radius: 4px;
height: 37px;
}
}
}
</style>