You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dianshang-qianduan/src/views/visual-analysis/index.vue

68 lines
1.6 KiB
Vue

<!--
* @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>