xy-frontend/src/views/reportData/index.vue

<template>
  <div class="reportDataBox">
    <!-- <div class="reoprtContain"></div> -->
    <el-tabs type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="照片统计">
        <photostatis ref="photoStatisRef"></photostatis>
      </el-tab-pane>
      <el-tab-pane label="设备状态列表"
        ><equipmentStatus ref="equipmentStatusRef"></equipmentStatus
      ></el-tab-pane>
      <!-- <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import {} from "@/utils/api/index";

import photostatis from "./photostatis/index";
import equipmentStatus from "./equipmentStatus/index";
export default {
  name: "reportData",
  components: {
    photostatis,
    equipmentStatus,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleTabClick(tab, event) {
      // 当标签页被点击时触发
      const tabName = tab.label;
      if (tabName === "照片统计") {
        // 调用照片统计组件的方法
        if (this.$refs.photoStatisRef) {
          this.$refs.photoStatisRef.onSubmit(); // 假设someMethod是你要调用的方法
        }
      } else if (tabName === "设备状态列表") {
        // 调用设备状态列表组件的方法
        if (this.$refs.equipmentStatusRef) {
          this.$refs.equipmentStatusRef.onSubmit(); // 假设someOtherMethod是你要调用的方法
        }
      }
      // 可以继续添加其他标签页的逻辑
    },
  },
};
</script>
<style lang="less">
.reportDataBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;

  .el-tabs {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 69px);
      overflow: auto;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>