pqs-9100_client/frontend/src/views/home/tabs/dashboard.vue

<!-- 
  首页Dashboard组件 - 主要功能页面
  布局：左侧计划树 + 右侧功能区域（功能选择、饼图统计、表格数据）
-->
<template>
  <div class='static' ref='popupBaseView'>
    <el-row :gutter='10'>
      <!-- 左侧计划树区域 (20%) -->
      <el-col :lg='4' :xl='4' :md='4' :sm='4'>
        <div class='left_tree'>
          <tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width='viewWidth' :height='viewHeight'
                :planTable='planTable' />
        </div>
      </el-col>
      <!-- 右侧主要内容区域 (80%) -->
      <el-col :lg='20' :xl='20' :md='20' :sm='20'>
        <div class='right_container'>
          <!-- 功能选择 -->
          <div class='container_function'>
            <div
              class='function_item'
              :class="item.checked ? 'function_item checked_function' : 'function_item'"
              v-for='(item, index) in tabsList'
              :key='index'
              @click='handleCheckFunction(item.value)'
            >
              <div class='item_img'>
                <img :src='item.img' />
              </div>
              <div class='item_text'>
                <p>{{ item.label }}</p>
              </div>
            </div>
          </div>
          <!--检测计划统计 饼图统计-->
          <div class='container_pieShow'>
            <el-collapse model-value='1' accordion @change='handleCollapseChange'>
              <el-collapse-item name='1'>
                <template #title>
                  <div class='container_pieShow_title'>
                    <span>检测计划统计</span>
                    <span>{{ planName }}</span>
                  </div>
                </template>
                <!-- 饼图 -->
                <div class='container_charts'>
                  <div class='charts_info' ref='chartsInfoRef'>
                    <pie
                      :customData="{
                       title: '设备检测状态',
                       textAlign: 'left',
                      }"
                      :legendData="{
                       icon: 'circle',
                       left: 'left',
                       top: 'bottom',
                      }"
                      :chartsData='chartsData1'
                      ref='pieRef1'
                    ></pie>
                  </div>
                  <div class='charts_info'>
                    <pie
                      :customData="{
                       title: '设备检测结果',
                       textAlign: 'left',
                      }"
                      :legendData="{
                       icon: 'circle',
                       left: 'left',
                       top: 'bottom',
                      }"
                      :chartsData='chartsData2'
                      ref='pieRef2'
                    ></pie>
                  </div>
                  <div class='charts_info'>
                    <pie
                      :customData="{
                       title: '设备报告状态',
                       textAlign: 'left',
                      }"
                      :legendData="{
                        icon: 'circle',
                        left: 'left',
                        top: 'bottom',
                      }"
                      :chartsData='chartsData3'
                      ref='pieRef3'
                    ></pie>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <!--下方表格数据-->
          <el-tabs class='tabs-menu' type='border-card' v-model='editableTabsValue'
                   :style='{ height: tabsHeight }'>
            <el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight}'>
              <!-- 设备数据表格 -->
              <div class='container_table' :style='{ height: tableHeight }'>
                <Table ref='tableRef1' :id='currentId' :plan='select_Plan' :planArray='planList2'
                       :planTable='planTable' @batchGenerateClicked='handleBatchGenerate'></Table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang='ts' setup>
import { useRouter } from 'vue-router'
import { type Plan } from '@/api/plan/interface'
import { type CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import { type Device } from '@/api/device/interface/device'
import { type ResultData } from '@/api/interface'
import pie from '@/components/echarts/pie/default.vue'
import tree from '../components/tree.vue'
import Table from '../components/table.vue'
import { getBoundPqDevList, getPlanListByPattern, getPlanList } from '@/api/plan/plan'
import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict'
import { useViewSize } from '@/hooks/useViewSize'

const planName = ref('')
const dictStore = useDictStore()
const modeStore = useModeStore()
const chartsInfoRef = ref<HTMLElement | null>(null)
const chartsWidth = ref<number>(0)
const treeRef = ref()
const form: any = ref({
  activeTabs: 0, //功能选择,例如报告生成
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
})
const router = useRouter()
const tabShow = ref(false)
const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0')
const checkStateTable = ref<number[]>([0, 1, 2])
const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
const tableHeight = ref('calc(100% - 50px)') // 初始高度

// ============================ 计划数据状态 ============================
const planList = ref<Plan.ReqPlan[]>([]) // 计划列表（过滤后）
const planList2 = ref<Plan.ReqPlan[]>([]) // 计划列表原始数据（包含子计划）
const select_Plan = ref<Plan.ReqPlan>() // 当前选中的计划
const planTable = ref<any[]>([]) // 比对模式下的计划表格数据

// ============================ 视图状态 ============================
const isLabelLineShow = ref(true) // 饼图是否显示引导线
const { popupBaseView, viewWidth, viewHeight } = useViewSize() // 视口尺寸hook

/**
 * 处理折叠面板展开/收起事件
 * 根据面板状态动态调整表格高度，优化空间利用
 * @param val - 当前展开的面板值
 */
const handleCollapseChange = (val: CollapseModelValue) => {
  // 计算新的高度值
  let newHeight
  if (Array.isArray(val)) {
    // 数组情况：有展开项时高度更小，无展开项时高度更大
    newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
  } else {
    // 单个值情况：展开时高度更小，收起时高度更大
    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
  }
  // 更新各个容器的高度
  tabsHeight.value = newHeight
  tabPaneHeight.value = `calc(100% - 5px)`
  tableHeight.value = `calc(100% - 5px)`
}


// 设置默认主题颜色
localStorage.setItem('color', '#91cc75')
// ============================ 功能按钮配置 ============================
/**
 * 主功能选项卡配置
 * 包含4个主要功能：设备检测、报告生成、设备归档、数据操作
 */
const tabsList = ref([
  {
    label: '设备检测', // 设备检测功能
    value: 0,
    img: new URL('/src/assets/images/plan/static/1.svg', import.meta.url).href,
    checked: true, // 默认选中
  },
  {
    label: '报告生成', // 检测报告生成功能
    value: 3,
    img: new URL('/src/assets/images/plan/static/3.svg', import.meta.url).href,
    checked: false,
  },
  {
    label: '设备归档', // 设备归档管理功能
    value: 4,
    img: new URL('/src/assets/images/plan/static/4.svg', import.meta.url).href,
    checked: false,
  },
  {
    label: '数据操作', // 数据查询和操作功能
    value: 5,
    img: new URL('/src/assets/images/plan/static/5.svg', import.meta.url).href,
    checked: false,
  },
])

// 初始化默认选中第一个功能选项卡
form.value.activeTabs = tabsList.value[0].value

// ============================ 组件引用和状态 ============================
const tableRef1 = ref() // 主表格组件引用
const currentId = ref('') // 当前选中的计划ID

// ============================ 监听器 ============================
/**
 * 监听功能切换并通知表格组件更新配置
 * 不再传递静态数据，让表格组件通过API获取真实数据
 */
watch(
  () => form.value.activeTabs,
  (newTabs) => {
    // 只传递功能模式，不传递静态假数据
    // 表格组件会根据功能模式通过API获取对应的真实数据
    tableRef1.value && tableRef1.value.changeActiveTabs(newTabs)
  }
  // 去掉 immediate: true，避免初始化时重复调用
)

// ============================ 饼图组件引用和数据 ============================
const pieRef1 = ref(), // 设备检测状态饼图引用
  pieRef2 = ref(), // 设备检测结果饼图引用
  pieRef3 = ref() // 设备报告状态饼图引用

const chartsData1: any = ref([]), // 设备检测状态统计数据
  chartsData2: any = ref([]), // 设备检测结果统计数据
  chartsData3: any = ref([]) // 设备报告状态统计数据

// ============================ 工具函数 ============================
/**
 * 递归查找指定 ID 的计划
 * @param plans - 计划数组
 * @param id - 计划 ID
 * @returns 找到的计划对象或 undefined
 */
const findPlanById = (plans: any, id: string): Plan.ReqPlan | undefined => {
  if (!plans) return undefined
  for (const plan of plans) {
    if (plan?.id === id) {
      return plan
    }
    // 递归搜索子计划
    if (plan?.children) {
      const foundPlan = findPlanById(plan.children, id)
      if (foundPlan) {
        return foundPlan
      }
    }
  }
  return undefined
}


/**
 * 处理树节点选中事件的回调函数
 * 根据选中的计划节点更新饼图数据并切换相应的功能模式
 * @param id - 选中的计划 ID
 */
const updateData = (id: string) => {
  // 刷新饼图数据
  getPieData(id)

  // 查找当前计划的父节点名称
  const parentNodeName = ref('')
  if (planList.value?.length) {
    for (let i = 0; i < planList.value.length; i++) {
      const children = planList.value[i]?.children
      if (Array.isArray(children) && children.length > 0) {
        for (let j = 0; j < children.length; j++) {
          if (children[j]?.id === id) {
            parentNodeName.value = planList.value[i]?.name || ''
            break
          }
        }
      }
    }
  }
  
  // 根据父节点名称自动切换功能模式
  if (parentNodeName.value === '检测完成') {
    handleCheckFunction(5) // 切换到数据操作模式
  } else {
    handleCheckFunction(0) // 切换到设备检测模式
  }
}

/**
 * 获取指定计划的设备统计数据并更新饼图
 * 分别统计设备的检测状态、检测结果、报告状态分布情况
 * @param id - 计划 ID
 */
const getPieData = async (id: string) => {
  currentId.value = id // 设置当前选中的计划ID
  
  // 初始化各类统计计数器
  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 } // 检测状态计数：未检(0)、检测中(1)、检测完成(2)、归档(3)
  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 检测结果计数：不符合(0)、符合(1)、未检(2)
  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 报告状态计数：未生成(0)、已生成(1)、未检(2)
  if (id) {
    const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
    const plan = findPlanById(planList.value, id)
    planName.value = '所选计划:' + (plan?.name || '')
    select_Plan.value = plan
    const pqDevList_Result2 = await getBoundPqDevList({ 'planIdList': [id], 'checkStateList': [0, 1, 2, 3] })
    boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
    // 遍历 boundPqDevList 并更新计数对象
    boundPqDevList.value.forEach(t => {
      if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
        checkStateCount[t.checkState]++
      }
    })
    boundPqDevList.value.forEach(t => {
      if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
        checkResultCount[t.checkResult]++
      }
    })
    boundPqDevList.value.forEach(t => {
      if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
        reportStateCount[t.reportState]++
      }
    })

    // 检查 checkStateCount 是否全为 0
    if (boundPqDevList.value.length != 0) {

      isLabelLineShow.value = true
      const allZero = Object.values(checkStateCount).every(count => count === 0)
      chartsData1.value = [
        {
          value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0],
          name: '未检',
          itemStyle: { color: '#fac858' },
        },
        {
          value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1],
          name: '检测中',
          itemStyle: { color: '#ee6666' },
        },
        {
          value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2],
          name: '检测完成',
          itemStyle: { color: '#91cc75' },
        },
        {
          value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3],
          name: '归档',
          itemStyle: { color: '#5470c6' },
        },
      ]
      // 同样处理 chartsData2 和 chartsData3
      const allZeroResult = Object.values(checkResultCount).every(count => count === 0)
      chartsData2.value = [
        {
          value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2],
          name: '未检',
          itemStyle: { color: '#fac858' },
        },
        {
          value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0],
          name: '不符合',
          itemStyle: { color: '#ee6666' },
        },
        {
          value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1],
          name: '符合',
          itemStyle: { color: '#91cc75' },
        },
      ]


      // 检查 reportStateCount 是否全为 0
      const allZeroReport = Object.values(reportStateCount).every(count => count === 0)
      chartsData3.value = [
        {
          value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2],
          name: '未检',
          itemStyle: { color: '#fac858' },
        },
        {
          value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0],
          name: '未生成',
          itemStyle: { color: '#ee6666' },
        },
        {
          value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1],
          name: '已生成',
          itemStyle: { color: '#91cc75' },
        },
      ]

    } else {

      isLabelLineShow.value = false//不展示引导线
      chartsData1.value = [
        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
        { value: null, name: '检测中', itemStyle: { color: '#ee6666' } },
        { value: null, name: '检测完成', itemStyle: { color: '#91cc75' } },
        { value: null, name: '归档', itemStyle: { color: '#5470c6' } },
        { value: 0, itemStyle: { color: '#eeeeee' } },
      ]

      chartsData2.value = [
        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
        { value: null, name: '不符合', itemStyle: { color: '#ee6666' } },
        { value: null, name: '符合', itemStyle: { color: '#91cc75' } },
        { value: 0, itemStyle: { color: '#eeeeee' } },
      ]

      chartsData3.value = [
        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
        { value: null, name: '未生成', itemStyle: { color: '#ee6666' } },
        { value: null, name: '已生成', itemStyle: { color: '#91cc75' } },
        { value: 0, itemStyle: { color: '#eeeeee' } },
      ]
    }
  } else {
    planName.value = '所选计划:'
  }


  pieRef1.value.init()
  pieRef2.value.init()
  pieRef3.value.init()
}
/**
 * 初始化树组件数据
 * @param data - 计划数据
 */
const getTree = (data?: any) => {
  treeRef.value.getTreeData(data)
}

// ============================ 路由跳转函数 ============================
/**
 * 跳转到检测页面
 */
const handleDetection = () => {
  router.push({
    path: '/detection',
  })
}

/**
 * 跳转到计划详情页面
 */
const planDetail = () => {
  router.push({
    path: '/plan/planList',
  })
}


// ============================ 主要业务逻辑函数 ============================
/**
 * 处理功能选项卡切换
 * 根据选中的功能更新UI状态和表格显示内容
 * @param val - 功能选项卡值 (0:设备检测, 3:报告生成, 4:设备归档, 5:数据操作)
 */
const handleCheckFunction = (val: any) => {
  // 重置tab状态
  editableTabsValue.value = '0'
  
  // 更新功能按钮的选中状态
  tabsList.value.map((item: any, index: any) => {
    item.checked = (val == item.value)
  })

  tabShow.value = false

  // 根据选中的功能设置不同的过滤条件和标签
  switch (val) {
    case 0: // 设备检测模式
      checkStateTable.value = [0, 1, 2] // 显示未检、检测中、检测完成的设备
      tabLabel1.value = '设备检测'
      break
    case 1: // 手动检测模式（预留）
      tabLabel1.value = '手动检测'
      break
    case 2: // 设备复检模式（预留）
      tabLabel1.value = '设备复检'
      break
    case 3: // 报告生成模式
      checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
      tabLabel1.value = '报告生成'
      break
    case 4: // 设备归档模式
      checkStateTable.value = [2] // 只显示检测完成的设备
      tabLabel1.value = '设备归档'
      break
    case 5: // 数据查询模式
      checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
      tabLabel1.value = '数据查询'
      break
  }
  // 更新当前激活的功能选项卡
  form.value.activeTabs = val
  
  // 刷新饼图数据以确保统计信息同步
  if (currentId.value) {
    getPieData(currentId.value)
  }
}


// ============================ 监听器和事件处理 ============================
/**
 * 饼图容器尺寸变化监听器
 * 当容器大小变化时自动调整饼图尺寸，保持响应式设计
 */
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 更新容器宽度
    chartsWidth.value = entry.contentRect.width

    // 同步调整三个饼图的尺寸（宽度为容器的95%，高度固定180px）
    pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
    pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
    pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
  }
})


// ============================ 初始化函数 ============================
/**
 * 初始化计划数据
 * 根据当前模式获取相应的计划列表数据
 */
const initPlan = async () => {
  // 获取当前模式对应的数据字典ID
  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
  
  // 构建计划查询请求对象
  const reqPlan: Plan.ReqPlan = {
    pattern: patternId, // 模式ID
    datasourceIds: '',
    sourceIds: '',
    planId: '',
    scriptName: '',
    errorSysName: '',
    sourceName: '',
    devIds: [],
    id: '',
    name: '',
    dataSourceId: '',
    scriptId: '',
    errorSysId: '',
    timeCheck: 0,
    testState: 0,
    reportState: 0,
    result: 0,
    code: 0,
    state: 0,
    standardDevNameStr: '',
    associateReport: 0,
    reportTemplateName: '',
    reportTemplateVersion: '',
    dataRule: '',
    testItemNameStr: '',
    testItems: [],
    standardDevIds: [],
    standardDevMap: new Map<string, number>(),
  }
  
  // 获取计划数据
  const result = await getPlanListByPattern(reqPlan) as ResultData<Plan.ReqPlan[]>
  planList2.value = result.data || []
  
  // 创建计划数据的副本用于过滤处理
  planList.value = JSON.parse(JSON.stringify(planList2.value))
  
  // 过滤子计划，只保留 pid 为 '0' 的项目
  planList.value = planList.value.map((item: any) => {
    if (item?.children) {
      item.children = item.children.filter((child: any) => child?.pid === '0')
    }
    return item
  })
}

// ============================ 生命周期函数 ============================
/**
 * 组件挂载前的初始化操作
 * 1. 初始化计划数据
 * 2. 设置默认选中的计划
 * 3. 初始化图表和树组件
 * 4. 根据模式加载额外数据
 */
onBeforeMount(async () => {
  // 初始化计划数据
  await initPlan()
  
  // 找到第一个有子计划的项目，并设置为默认选中
  if (planList.value?.length) {
    for (let i = 0; i < planList.value.length; i++) {
      const children = planList.value[i]?.children
      if (Array.isArray(children) && children.length > 0) {
        currentId.value = children[0]?.id // 选中第一个子计划
        break // 确保只选中一个
      }
    }
  }

  // 初始化图表尺寸监听器
  if (chartsInfoRef.value) {
    resizeObserver.observe(chartsInfoRef.value)
  }
  
  // 初始化树组件和饼图数据
  getTree(planList.value || [])
  getPieData(currentId.value)

  // 如果不是比对模式，直接返回
  if (modeStore.currentMode != '比对式')
    return
    
  // 比对模式下加载额外的计划表格数据
  const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id
  if (patternId2 !== undefined) {
    planTable.value = await getPlanList({ 'patternId': patternId2 })
  }
})

/**
 * 组件卸载时的清理操作
 * 移除尺寸监听器，防止内存泄漏
 */
onUnmounted(async () => {
  if (chartsInfoRef.value) {
    resizeObserver.unobserve(chartsInfoRef.value)
  }
})

/**
 * 处理批量操作完成后的数据更新
 * 更新计划数据、树状态和饼图，表格会通过watch自动更新
 */
const handleBatchGenerate = async () => {
  // 重新获取计划数据
  await initPlan()
  // 更新树的选中状态
  treeRef.value.clickTableToTree(planList.value || [], currentId.value)
  // 重新获取饼图数据，deviceData更新后watch会自动触发表格更新
  getPieData(currentId.value)

  // 移除重复的表格渲染调用 - watch监听器已经处理了这部分逻辑
  tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs)
}
</script>
<style lang='scss' scoped>

.static {

  .left_tree {
    height: 100%;
    background-color: #fff;
  }

  .right_container {
    flex: none;
    height: 100%;
    display: flex;
    flex-direction: column;


    .container_function {
      width: 100%;
      height: auto;
      background: #fff;
      border-radius: 4px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;

      .function_item {
        flex: none;
        width: 6%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        background-color: #607eab;
        border-radius: 8px;
        padding: 0px 30px;
        margin-right: 50px;;

        .item_img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          // background-color: #607eab;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 40px;
            height: auto;
          }
        }

        .item_img:nth-child(3),
        .item_img:nth-child(6) {
          padding: 10px !important;

          img {
            width: 20px !important;
            height: auto;
          }
        }

        .item_text {
          p {
            margin: 0;
            font-weight: 800;
            color: #fff;
            font-size: 14px;
            font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
          }
        }
      }

      .function_item:hover,
      .checked_function {
        background-color: var(--el-color-primary);

        .item_img {
          // background-color: var(--el-color-primary);
        }

        .item_text {
          p {
            // color: var(--el-color-primary);
            color: #fff;
          }
        }
      }
    }

    .container_pieShow {
      width: 100% !important;
      height: auto;
      background-color: #eee;
      margin-bottom: 10px;

      .container_pieShow_title {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        font-weight: bold;
        width: 99%;
        font-size: 14px;
      }

    }

    .el-collapse {
      width: 100% !important;
      height: 100% !important;
      background-color: #eee;
    }

    .el-collapse-item {
      width: 100% !important;
      height: 100% !important;
      background-color: #eee;
    }

    .container_charts {
      width: 100%;
      height: 100%;
      background-color: #eee;
      display: flex;
      justify-content: space-between;

      .charts_info {
        margin-top: 1px;
        flex: none;
        width: 33.1%;
        height: 100% !important;
        background-color: #fff;
      }
    }

    .el-tabs {
      width: 100% !important;
      border-radius: 4px;
    }


    .tabs-menu {
      height: 100%;
      border: 0;
    }

    .container_table {
      // width: 100%;
      flex: 1 !important;
      //height: calc(100vh - 360px - 180px);
      height: 100% !important;
      border-radius: 4px;
      width: 100% !important;
      // display: none;
      .table_info {
        width: 100%;
        height: 100%;
      }
    }
  }
}

:deep(.el-collapse-item__header) {
  color: var(--el-color-primary);
  font-size: 14px;
  font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}

:deep(.el-collapse-item__conten) {
  padding-bottom: 0px !important;
}

:deep(.el-collapse-item__content ) {
  padding-bottom: 0px !important;
}

:deep(.el-tabs--border-card > .el-tabs__content) {
  padding: 0 !important;
}


</style>