<!--
|
* @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'
|
|
|
let state = defineProps({
|
buttonIndex: {
|
type: Number,
|
default: 1
|
}
|
})
|
|
onMounted(() => {
|
// console.log("*************************", state.buttonIndex)
|
})
|
|
// watch(() => state.buttonIndex, (newValue, oldValue) => {
|
// console.log("**************111***********", newValue)
|
// })
|
|
|
</script>
|
|
<template>
|
<div class="right-container">
|
|
<div class="fire-source box" v-if="state.buttonIndex == 1">
|
<title-box>
|
<template #titleName>
|
企业信息
|
</template>
|
</title-box>
|
<fire-source></fire-source>
|
</div>
|
|
<div class="occur-statistics box" v-if="state.buttonIndex == 2">
|
<title-box>
|
<template #titleName>
|
应急物质
|
</template>
|
</title-box>
|
<fire-trend></fire-trend>
|
</div>
|
|
<div class="fire-trend box" v-if="state.buttonIndex == 3">
|
<title-box>
|
<template #titleName>
|
救援队伍
|
</template>
|
</title-box>
|
<occur-statistics></occur-statistics>
|
</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>
|
