<!-- 安全隐患情况 -->
|
|
<template>
|
<RightTitle title="安全隐患情况">
|
<template #top>
|
<div class="select-container flex">
|
<div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
|
v-for="item in selectItems" :key="item.itemIndex" @click="changeSelect(item)">
|
{{ item.name }}
|
</div>
|
</div>
|
</template>
|
|
<template #content>
|
<InfoView :key="selectItems[0].itemIndex" v-show="selectItems[0].isActive"></InfoView>
|
<DataView :key="selectItems[1].itemIndex" v-show="selectItems[1].isActive"></DataView>
|
<!-- <TransitionGroup name="fade" mode="out-in">
|
|
</TransitionGroup> -->
|
</template>
|
|
</RightTitle>
|
</template>
|
|
<script setup>
|
|
import RightTitle from "@/components/right-title";
|
import DataView from './dataView.vue';
|
import InfoView from './infoView.vue';
|
import { ref, provide } from 'vue';
|
|
const tableState = ref(false);
|
const selectItems = ref([
|
{ itemIndex: 1, name: '安全隐患', isActive: true },
|
{ itemIndex: 2, name: '数据统计', isActive: false },
|
]);
|
// 依赖
|
provide('tableState',tableState);
|
|
const changeSelect = (selectItem) => {
|
selectItems.value.map(item => item.isActive = false);
|
selectItem.isActive = true;
|
if (selectItem.itemIndex === 2) {
|
tableState.value = true;
|
} else {
|
tableState.value = false;
|
}
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.select-container {
|
flex-shrink: 0;
|
}
|
|
.item {
|
margin: 0 8px;
|
padding: 10px 14px;
|
font-size: 14px;
|
background: rgba(67, 102, 155, 0.4);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
flex-shrink: 0;
|
color: #5B83BD;
|
font-family: 'PingFang SC';
|
}
|
|
.select-active {
|
color: #fff;
|
}
|
|
.item:last-child {
|
margin-right: 0;
|
}
|
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.5s;
|
}
|
|
.fade-enter,
|
.fade-leave-to {
|
opacity: 0;
|
transition: opacity 0.5s;
|
|
}
|
</style>
|
