admin-sjzx/src/views/pqs/supervise/testRun/index.vue

<template>
    <div class="default-main">
      <el-tabs v-model="activeName" type="border-card">
    
        <el-tab-pane label="监测点台账录入" name="1">
          <monitorpoint :id="id" v-if="activeName == '1'" />
        </el-tab-pane>
        <el-tab-pane label="监测点联调列表" name="2">
          <jointDebugList :id="id" v-if="activeName == '2'" />
        </el-tab-pane>
        <el-tab-pane label="试运行评估" name="3">
          <testRun :id="id" v-if="activeName == '3'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'

  import { mainHeight } from '@/utils/layout'
  import monitorpoint from '@/views/pqs/supervise/terminalNetworkDetection/components/monitorpoint/index.vue'
  import jointDebugList from '@/views/pqs/supervise/terminalNetworkDetection/components/jointDebugList/index.vue'
  import testRun from './testRun.vue'

  import { useRoute } from "vue-router";
  
  defineOptions({
    name: 'terminalNetwotk'
  })
  const activeName = ref('2')
  
  const route = useRoute()
  const id = ref('')
  const key = ref('')
  
  watch(() => route.query.t, async (newValue, oldValue) => {
    if (route.fullPath.includes('terminalNetwotk')) {
      let type = (route.query.type as string) || 'null'
      if (type == 'null') { }
      else if (type == '1') {
        activeName.value = '1'
      } else if (type == '2') {
        activeName.value = '2'
      } else if (type == '3') {
        activeName.value = '3'
      } else {
        activeName.value = '4'
      }
      id.value = (route.query.id as string) || 'null'
      key.value = (route.query.key as string) || 'null'
      id.value = id.value + '@' + route.query.t
    }
  }, { deep: true, immediate: true })
  
  
  const layout = mainHeight(63) as any
  </script>
  
  <style lang="scss" scoped>
  .bars_w {
    width: 100%;
    height: 500px;
  }
  
  :deep(.el-tabs__content) {
    height: v-bind('layout.height');
    overflow-y: auto;
  }
  </style>