<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:27:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-10-26 14:49:05
|
* @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import fireSource from './box/fireSource.vue'
|
import fireTrend from './box/fireTrend.vue'
|
import occurStatistics from './box/occurStatistics.vue'
|
import publicContent from './box/publicContent.vue'
|
</script>
|
|
<template>
|
<div class="right-container">
|
<div class="fire-source box">
|
<title-box>
|
<template #titleName>
|
火警事件来源
|
</template>
|
</title-box>
|
<div class="content-box">
|
<fire-source></fire-source>
|
</div>
|
</div>
|
|
<div class="occur-statistics box">
|
<title-box>
|
<template #titleName>
|
易发区统计
|
</template>
|
</title-box>
|
<div class="content-box">
|
<fire-trend></fire-trend>
|
</div>
|
</div>
|
|
<div class="fire-trend box">
|
<title-box>
|
<template #titleName>
|
火警上报趋势
|
</template>
|
</title-box>
|
<div class="content-box">
|
<occur-statistics></occur-statistics>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.right-container {
|
display: flex;
|
flex-direction: column;
|
padding: 20px;
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 440px;
|
height: 100%;
|
pointer-events: auto;
|
|
.box {
|
margin-top: 20px;
|
|
.header {
|
height: 32px;
|
background: url(/img/bg/sub-title.png) no-repeat;
|
}
|
}
|
|
.fire-source {
|
flex: 3;
|
}
|
|
.occur-statistics {
|
flex: 3;
|
}
|
|
.fire-trend {
|
flex: 4;
|
}
|
|
.box:first-child {
|
margin-top: 0;
|
}
|
}
|
</style>
|
