<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2024-08-16 09:16:26
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-13 10:23:07
 * @FilePath: \vue3\src\views\visual-analysis\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="el-Aitools">
    <el-tabs v-model="activeTab" class="bi-workspace">
      <el-tab-pane label="数据源管理" name="data">
        <BigData />
      </el-tab-pane>
      <el-tab-pane label="BI可视化分析" name="bi">
        <iframe id="iframe" :src="biIframeSrc" width="100%" height="100%" frameborder="1"></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import BigData from "@/views/digitalMarketingAlgorithms/components/bigData.vue";

const activeTab = ref("data");
const biIframeSrc = import.meta.env.VITE_APP_BI_URL || "/bi/";
</script>
<style lang="scss" scoped>
.el-Aitools {
  position: relative;
  padding: 14px 18px 0;
  min-height: calc(100vh - 58px);
  background: #06121f;

  .bi-workspace {
    height: calc(100vh - 72px);
  }

  :deep(.el-tabs__content) {
    height: calc(100% - 55px);
  }

  :deep(.el-tab-pane) {
    height: 100%;
  }

  :deep(.el-tabs__item) {
    color: #a9d8ff;
    font-weight: 700;
  }

  :deep(.el-tabs__item.is-active) {
    color: #ffffff;
  }

  :deep(.el-tabs__nav-wrap::after) {
    background-color: rgba(54, 172, 255, 0.22);
  }

  #iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    background: #ffffff;
  }
}
</style>
