业务配置页面+接口联调，弹窗修改路由跳转

src/views/business/setting/index.vue

@@ -0,0 +1,85 @@
+<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>