<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:28:07
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-03-14 14:47:23
|
* @FilePath: \forest-fire\src\views\fireWarning\components\leftContainer.vue
|
* @Description: 防火预警
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import { ref } from 'vue'
|
import { Search } from '@element-plus/icons-vue'
|
import tabsTable from './box/tabsTable.vue'
|
|
const standingBook = ref('')
|
|
const activeName = ref('all')
|
|
const handleClick = (tab, event) => {
|
}
|
|
const tableData = [
|
{
|
ind: 1,
|
address: '南昌市东湖区',
|
fireGrade: '一级',
|
fireAddress: '公园',
|
}
|
]
|
</script>
|
|
<template>
|
<div class="left-container">
|
<div class="title"></div>
|
<div class="search">
|
<el-input v-model="standingBook" class="w-50 m-2" size="samll" placeholder="请输入搜索内容" :prefix-icon="Search" />
|
</div>
|
<div class="table">
|
<el-tabs v-model="activeName" class="table-tabs" @tab-click="handleClick">
|
<el-tab-pane label="全部" name="all">
|
<tabs-table v-if="activeName == 'all'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="一级" name="one">
|
<tabs-table v-if="activeName == 'one'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="二级" name="two">
|
<tabs-table v-if="activeName == 'two'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="三级" name="three">
|
<tabs-table v-if="activeName == 'three'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="四级" name="four">
|
<tabs-table v-if="activeName == 'four'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="五级" name="five">
|
<tabs-table v-if="activeName == 'five'" :tableData="tableData"></tabs-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.left-container {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 20px;
|
left: 20px;
|
bottom: 120px;
|
width: 400px;
|
pointer-events: auto;
|
|
.title {
|
height: 32px;
|
background: url(/img/bg/sub-title.png) no-repeat;
|
}
|
|
.search {
|
margin: 15px 0;
|
}
|
|
.table {
|
flex: 1;
|
|
.table-tabs {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
:deep(.el-tabs__active-bar) {
|
background-color: #46C7F3;
|
}
|
|
:deep(.el-tabs__item) {
|
color: #D8EBEE;
|
|
&:hover {
|
color: #46C7F3;
|
}
|
|
&.is-active {
|
color: #46C7F3;
|
}
|
}
|
|
:deep(.el-tabs__content) {
|
flex: 1;
|
|
.el-tab-pane {
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
