86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<!-- 业务配置页面 -->
|
||
|
|
<DialogComponent :style="{ resize: 'both', overflow: 'auto' }" title="业务配置" width="1800" :draggable="true" :modal="false" @close="close">
|
||
|
|
<div class="tabs-container">
|
||
|
|
<el-tabs v-model="type" tab-position="left" class="tabs">
|
||
|
|
<el-tab-pane v-for="item in tabs"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:name="item.value">
|
||
|
|
<template #label>
|
||
|
|
<span class="custom-tabs-label">
|
||
|
|
<span>{{item.label}}</span>
|
||
|
|
<el-icon v-if="type == item.value"><CaretRight /></el-icon>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<CCTVComponent v-if="type === 'cctv'"/>
|
||
|
|
</div>
|
||
|
|
</DialogComponent>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { CaretRight } from '@element-plus/icons-vue'
|
||
|
|
import DialogComponent from '@/components/Dialog/screen.vue'
|
||
|
|
import CCTVComponent from './monitor/index.vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const tabs = ref([
|
||
|
|
{
|
||
|
|
value: 'cctv',
|
||
|
|
label: 'CCTV'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'UAV',
|
||
|
|
label: '无人机'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
const type = ref('cctv')
|
||
|
|
|
||
|
|
const close = () => {
|
||
|
|
router.push('/')
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tabs-container{
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.el-tabs {
|
||
|
|
box-sizing: border-box;
|
||
|
|
:deep(.el-tabs__header){
|
||
|
|
&.is-left{
|
||
|
|
margin-right: 20px !important;
|
||
|
|
}
|
||
|
|
.el-tabs__nav-wrap::after {
|
||
|
|
background-color: rgba(0, 192, 255, 0.2) !important;
|
||
|
|
}
|
||
|
|
.el-tabs__item {
|
||
|
|
width: 200px;
|
||
|
|
color: rgba(68, 165, 255, 1);
|
||
|
|
justify-content: center;
|
||
|
|
&.is-active{
|
||
|
|
color: #00C0FF;
|
||
|
|
background: rgba(10, 169, 255, 0.15);
|
||
|
|
.el-icon{
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-tabs__item.is-disabled {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
.el-tabs__active-bar {
|
||
|
|
background-color: #00C0FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
width: calc(100% - 220px);
|
||
|
|
}
|
||
|
|
</style>
|