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="照片统计">
        <span slot="label">
          照片统计
          <el-button
            @click.stop="handlePicSearch"
            v-if="picSearchFlag"
            type="primary"
            icon="el-icon-search"
          ></el-button>
        </span>
        <photostatis ref="photoStatisRef"></photostatis>
      </el-tab-pane>
      <el-tab-pane label="设备状态列表">
        <span slot="label">
          设备状态列表
          <el-button
            v-if="statusFlag"
            type="primary"
            icon="el-icon-search"
          ></el-button>
        </span>
        <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 {
      picSearchFlag: true,
      statusFlag: false,
    };
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleTabClick(tab, event) {
      // 当标签页被点击时触发
      const tabName = tab.label;
      console.log(tab);
      if (tabName === "照片统计") {
        this.picSearchFlag = true;
        this.statusFlag = false;
        // 调用照片统计组件的方法
        if (this.$refs.photoStatisRef) {
          this.$refs.photoStatisRef.onSubmit(); // 假设someMethod是你要调用的方法
        }
      } else if (tabName === "设备状态列表") {
        this.picSearchFlag = false;
        this.statusFlag = true;
        // 调用设备状态列表组件的方法
        if (this.$refs.equipmentStatusRef) {
          this.$refs.equipmentStatusRef.onSubmit(); // 假设someOtherMethod是你要调用的方法
        }
      }
      // 可以继续添加其他标签页的逻辑
    },
    handlePicSearch() {
      console.log("aaaaaaaaaaaa");
      this.$refs.photoStatisRef.showSearch();
    },
  },
};
</script>
<style lang="less">
.reportDataBox {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  .el-tabs--border-card > .el-tabs__content {
    padding: 8px;
  }
  .el-tabs {
    height: 100%;

    .el-tabs__header {
      .el-button--default,
      .el-button--primary {
        width: auto;
        margin-left: 12px;
      }
    }
    .el-tabs__content {
      height: calc(100% - 65px);
      //overflow: auto;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>