cw_web/src/views/settings/alarmSettings/index.vue

<template>
  <div class="settings-container">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane v-if="isTabVisible('Alarm_Settings', 'Motion_Detection')" label="Motion Detection" name="first">
        <MotionDetection/>
      </el-tab-pane>

      <el-tab-pane v-if="isTabVisible('Alarm_Settings', 'Human_Detection')" label="Human Detection" name="second">
        <HumanDetection/>
      </el-tab-pane>

      <el-tab-pane v-if="isTabVisible('Alarm_Settings', 'Intrusion_Detection')" label="Intrusion Detection" name="third">
        <IntrusionDetection/>
      </el-tab-pane>

      <el-tab-pane v-if="isTabVisible('Alarm_Settings', 'Line_Crossing_Detection')" label="Line Crossing Detection" name="fourth">
        <LineCrossingDetection/>
      </el-tab-pane>

      <!-- <el-tab-pane label="Video Tampering" name="fifth">
          <VideoTampering />
      </el-tab-pane> -->

      <el-tab-pane v-if="isTabVisible('Alarm_Settings', 'Manual_Alarm')" label="Manual Alarm" name="sixth">
        <ManualAlarm/>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import MotionDetection from './components/motionDetection/index.vue'
import HumanDetection from './components/humanDetection/index.vue'
import IntrusionDetection from './components/intrusionDetection/index.vue'
import LineCrossingDetection from './components/lineCrossingDetection/index.vue'
// import VideoTampering from './components/videoTampering/index.vue'
import ManualAlarm from './components/manualAlarm/index.vue'
import { usePermissionStore } from '@/stores/modules/permission'

const { isTabVisible } = usePermissionStore()

const tabOrder = [
  { name: 'first', key: 'Motion_Detection' },
  { name: 'second', key: 'Human_Detection' },
  { name: 'third', key: 'Intrusion_Detection' },
  { name: 'fourth', key: 'Line_Crossing_Detection' },
  { name: 'sixth', key: 'Manual_Alarm' },
]
const firstVisible = tabOrder.find(t => isTabVisible('Alarm_Settings', t.key))
const activeName = ref(firstVisible?.name || 'first')

</script>


<style scoped lang="scss">
.settings-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
</style>