From c01c90ec32a9ce99ec02ca831660fe30bbd155b4 Mon Sep 17 00:00:00 2001
From: likun <906102152@qq.com>
Date: Wed, 11 Jun 2025 14:53:27 +0800
Subject: [PATCH] add bi

---
 ui/package-lock.json                          | 12 +++
 ui/package.json                               |  1 +
 ui/src/stores/user.js                         | 68 ++++++++++++++--
 .../components/toolbar/dateDaySelect.vue      | 52 ++++++++++++
 ui/src/views/bi/analyse/event.vue             | 16 ++++
 .../bi/analyse/layout/analyseMainContent.vue  | 80 +++++++++++++++++++
 .../analyse/layout/analyseMainContentLeft.vue | 13 +++
 .../layout/analyseMainContentRight.vue        | 36 +++++++++
 .../layout/analyseMainContentRightResult.vue} |  2 +-
 .../layout/analyseMainContentRightToolbar.vue | 11 +++
 .../bi/analyse/layout/analyseMainHeader.vue   | 64 +++++++++++++++
 .../bi/analyse/layout/analyseMainIndex.vue    | 38 +++++++++
 .../bi/{components => analyse}/retention.vue  |  0
 ui/src/views/bi/layout/main/index.vue         |  8 +-
 14 files changed, 393 insertions(+), 8 deletions(-)
 create mode 100644 ui/src/views/bi/analyse/components/toolbar/dateDaySelect.vue
 create mode 100644 ui/src/views/bi/analyse/event.vue
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainContent.vue
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainContentLeft.vue
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainContentRight.vue
 rename ui/src/views/bi/{components/event.vue => analyse/layout/analyseMainContentRightResult.vue} (83%)
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainContentRightToolbar.vue
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainHeader.vue
 create mode 100644 ui/src/views/bi/analyse/layout/analyseMainIndex.vue
 rename ui/src/views/bi/{components => analyse}/retention.vue (100%)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 3ebff2f..6f22bda 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -12,6 +12,7 @@
         "element-plus": "^2.9.7",
         "pinia": "^3.0.1",
         "pinia-plugin-persistedstate": "^4.2.0",
+        "splitpanes": "^4.0.4",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -4766,6 +4767,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/splitpanes": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-4.0.4.tgz",
+      "integrity": "sha512-RbysugZhjbCw5fgplvk3hOXr41stahQDtZhHVkhnnJI6H4wlGDhM2kIpbehy7v92duy9GnMa8zIhHigIV1TWtg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antoniandre"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.9.0",
       "resolved": "https://registry.npmmirror.com/std-env/-/std-env-3.9.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 755e8f0..d45a554 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,6 +13,7 @@
     "element-plus": "^2.9.7",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "splitpanes": "^4.0.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/ui/src/stores/user.js b/ui/src/stores/user.js
index 43e8fef..6f20b50 100644
--- a/ui/src/stores/user.js
+++ b/ui/src/stores/user.js
@@ -137,7 +137,7 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "事件分析"
                                         },
-                                        component: () => import('@/views/bi/components/event.vue'),
+                                        component: () => import('@/views/bi/analyse/event.vue'),
                                     },
                                     {
                                         path: biAnalyseRoutePath + "/analyse/retention",
@@ -145,7 +145,63 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "留存分析"
                                         },
-                                        component: () => import('@/views/bi/components/retention.vue'),
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "漏斗分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "间隔分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "分布分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "路径分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "属性分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "归因分析"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
+                                    },
+                                    {
+                                        path: biAnalyseRoutePath + "/analyse/retention",
+                                        name: biAnalyseRoutePath + "/analyse/retention",
+                                        meta: {
+                                            desc: "行为序列"
+                                        },
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
                                     },
                                 ],
                             },
@@ -162,7 +218,7 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "事件分析"
                                         },
-                                        component: () => import('@/views/bi/components/event.vue'),
+                                        component: () => import('@/views/bi/analyse/event.vue'),
                                     },
                                     {
                                         path: biAnalyseRoutePath + "/bi_user/retention",
@@ -170,7 +226,7 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "留存分析"
                                         },
-                                        component: () => import('@/views/bi/components/retention.vue'),
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
                                     },
                                 ],
                             },
@@ -187,7 +243,7 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "事件分析"
                                         },
-                                        component: () => import('@/views/bi/components/event.vue'),
+                                        component: () => import('@/views/bi/analyse/event.vue'),
                                     },
                                     {
                                         path: biAnalyseRoutePath + "/bi_data/retention",
@@ -195,7 +251,7 @@ const userStore = defineStore(
                                         meta: {
                                             desc: "留存分析"
                                         },
-                                        component: () => import('@/views/bi/components/retention.vue'),
+                                        component: () => import('@/views/bi/analyse/retention.vue'),
                                     },
                                 ],
                             },
diff --git a/ui/src/views/bi/analyse/components/toolbar/dateDaySelect.vue b/ui/src/views/bi/analyse/components/toolbar/dateDaySelect.vue
new file mode 100644
index 0000000..841fa92
--- /dev/null
+++ b/ui/src/views/bi/analyse/components/toolbar/dateDaySelect.vue
@@ -0,0 +1,52 @@
+<script setup>
+
+const timeDivideSelect = [
+  {
+    name: "按分钟",
+    children: [
+      {name: "1分钟"},
+      {name: "5分钟"},
+      {name: "10分钟"},
+    ]
+  },
+  {
+    name: "按小时"
+  },
+  {
+    name: "按天"
+  },
+  {
+    name: "按周"
+  },
+  {
+    name: "按月"
+  },
+  {
+    name: "按季度"
+  },
+  {
+    name: "按年"
+  },
+  {
+    name: "合计"
+  }
+]
+
+</script>
+
+<template>
+  <div>
+    <el-select>
+      <template v-for="item in timeDivideSelect">
+        <el-option :key="item.name" :label="item.name" :value="item.value" v-if="item.children !== undefined">
+          <
+        </el-option>
+      </template>
+
+    </el-select>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/event.vue b/ui/src/views/bi/analyse/event.vue
new file mode 100644
index 0000000..3f453ed
--- /dev/null
+++ b/ui/src/views/bi/analyse/event.vue
@@ -0,0 +1,16 @@
+<script setup>
+import {defineAsyncComponent} from "vue";
+
+const analyseMainIndex = defineAsyncComponent(() => import('./layout/analyseMainIndex.vue'))
+
+</script>
+
+<template>
+  <div style="height: 100%">
+    <analyseMainIndex/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/layout/analyseMainContent.vue b/ui/src/views/bi/analyse/layout/analyseMainContent.vue
new file mode 100644
index 0000000..6b0562a
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainContent.vue
@@ -0,0 +1,80 @@
+<script setup>
+import {Splitpanes, Pane} from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+import {defineAsyncComponent} from 'vue';
+
+const contentLeft = defineAsyncComponent(() => import("./analyseMainContentLeft.vue"))
+const contentRight = defineAsyncComponent(() => import("./analyseMainContentRight.vue"))
+
+</script>
+
+<template>
+  <Splitpanes>
+    <Pane size="25" min-size="20" max-size="30">
+      <contentLeft/>
+    </Pane>
+    <Pane size="75" min-size="70" max-size="80">
+      <contentRight/>
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style scoped lang="scss">
+
+:deep(.splitpanes__pane) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  box-shadow: 0 0 2px rgba(30, 118, 240, .2) inset;
+}
+
+:deep(.splitpanes__splitter) {
+  position: relative;
+  background-color: #f0f0f0; /* 拖动线背景色 */
+  box-sizing: border-box;
+  /* 为了确保悬停时变粗不会导致布局跳动，可以设置一个透明的边框，悬停时改为实色边框也是一种思路，但这里我们使用伪元素 */
+}
+
+:deep(.splitpanes__splitter:before) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: #ddd;
+  transition: all 0.3s ease; /* 添加过渡效果 */
+}
+
+/* 横向的情况 */
+:deep(.splitpanes--horizontal > .splitpanes__splitter:before) {
+  width: 3px; /* 垂直分割线宽度 */
+  height: 100%; /* 线的长度，可以根据需要调整 */
+}
+
+/* 纵向的情况 */
+:deep(.splitpanes--vertical > .splitpanes__splitter:before) {
+  width: 5px; /* 线的长度 */
+  height: 100%; /* 水平分割线高度 */
+}
+
+/* 鼠标悬停在拖动线上时的样式 */
+:deep(.splitpanes__splitter:hover:before) {
+  width: 4px;
+  background-color: #3498db; /* 变为蓝色 */
+}
+
+/* 对于横向分割线，悬停时变粗 */
+:deep(.splitpanes--horizontal > .splitpanes__splitter:hover:before) {
+  width: 3px; /* 加粗 */
+  height: 100%; /* 也可以加长 */
+}
+
+/* 对于纵向分割线，悬停时变粗 */
+:deep(.splitpanes--vertical > .splitpanes__splitter:hover:before) {
+  width: 5px;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/layout/analyseMainContentLeft.vue b/ui/src/views/bi/analyse/layout/analyseMainContentLeft.vue
new file mode 100644
index 0000000..c92156d
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainContentLeft.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="content pane-left">
+    左边部分
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/layout/analyseMainContentRight.vue b/ui/src/views/bi/analyse/layout/analyseMainContentRight.vue
new file mode 100644
index 0000000..e3d18b7
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainContentRight.vue
@@ -0,0 +1,36 @@
+<script setup>
+import {defineAsyncComponent} from 'vue';
+
+const layoutToolbar = defineAsyncComponent(() => import("./analyseMainContentRightToolbar.vue"))
+const layoutResult = defineAsyncComponent(() => import("./analyseMainContentRightResult.vue"))
+</script>
+
+<template>
+  <div class="result">
+    <div class="resultToolbar">
+      <layoutToolbar/>
+    </div>
+    <div class="resultContent">
+      <layoutResult/>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.result {
+  height: 100%;
+  width: 100%;
+}
+
+.resultToolbar {
+  height: 60px;
+  width: 100%;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.resultContent {
+  height: calc(100% - 60px);
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/components/event.vue b/ui/src/views/bi/analyse/layout/analyseMainContentRightResult.vue
similarity index 83%
rename from ui/src/views/bi/components/event.vue
rename to ui/src/views/bi/analyse/layout/analyseMainContentRightResult.vue
index 542eaa1..556a8fd 100644
--- a/ui/src/views/bi/components/event.vue
+++ b/ui/src/views/bi/analyse/layout/analyseMainContentRightResult.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  事件分析
+  结果
 </template>
 
 <style scoped>
diff --git a/ui/src/views/bi/analyse/layout/analyseMainContentRightToolbar.vue b/ui/src/views/bi/analyse/layout/analyseMainContentRightToolbar.vue
new file mode 100644
index 0000000..30aac38
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainContentRightToolbar.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  头
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/layout/analyseMainHeader.vue b/ui/src/views/bi/analyse/layout/analyseMainHeader.vue
new file mode 100644
index 0000000..07018d8
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainHeader.vue
@@ -0,0 +1,64 @@
+<script setup>
+
+</script>
+
+<template>
+  <el-col :span="6">
+    <div class="headerAnalyseDesc">
+      <p style="margin-right: 6px;font-weight: bold">事件分析</p>
+      <el-icon size="20">
+        <Warning/>
+      </el-icon>
+    </div>
+  </el-col>
+  <el-col :span="10" :offset="8">
+    <div class="headerAnalyseToolbar" style="display: flex;float:right">
+          <span class="toolbarSpan">
+            <p>近似计算</p>
+          </span>
+      <span class="toolbarSpan">
+            <el-switch></el-switch>
+          </span>
+      <span class="toolbarSpan">
+            <el-dropdown>
+            <el-button>
+              UTC +8
+            </el-button>
+          </el-dropdown>
+          </span>
+      <span class="toolbarSpan">
+            <el-icon size="20">
+            <Refresh/>
+          </el-icon>
+          </span>
+      <span class="toolbarSpan">
+            <el-icon size="20">
+            <Download/>
+          </el-icon>
+          </span>
+      <span class="toolbarSpan">
+            <el-button>已存报表</el-button>
+          </span>
+    </div>
+  </el-col>
+</template>
+
+<style scoped lang="scss">
+.headerAnalyseDesc {
+  display: flex;
+  float: left;
+  justify-content: center;
+  align-items: center;
+}
+
+.headerAnalyseToolbar {
+  display: flex;
+  float: right;
+  justify-content: center;
+  align-items: center;
+
+  .toolbarSpan {
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/analyse/layout/analyseMainIndex.vue b/ui/src/views/bi/analyse/layout/analyseMainIndex.vue
new file mode 100644
index 0000000..0580918
--- /dev/null
+++ b/ui/src/views/bi/analyse/layout/analyseMainIndex.vue
@@ -0,0 +1,38 @@
+<script setup>
+
+import {defineAsyncComponent} from 'vue';
+
+const layoutHeader = defineAsyncComponent(() => import("./analyseMainHeader.vue"))
+const layoutContent = defineAsyncComponent(() => import("./analyseMainContent.vue"))
+</script>
+
+<template>
+  <div class="analyseMain">
+    <el-row class="analyseMainHeader">
+      <layoutHeader/>
+    </el-row>
+    <el-row class="analyseMainContent">
+      <layoutContent/>
+    </el-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.analyseMain {
+  height: 100%;
+  //border: 1px solid black;
+}
+
+.analyseMainHeader {
+  height: 60px;
+  background-color: #f0f2f5;
+}
+
+.analyseMainContent {
+  height: calc(100% - 60px);
+  display: flex;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/bi/components/retention.vue b/ui/src/views/bi/analyse/retention.vue
similarity index 100%
rename from ui/src/views/bi/components/retention.vue
rename to ui/src/views/bi/analyse/retention.vue
diff --git a/ui/src/views/bi/layout/main/index.vue b/ui/src/views/bi/layout/main/index.vue
index 54da073..4c84f18 100644
--- a/ui/src/views/bi/layout/main/index.vue
+++ b/ui/src/views/bi/layout/main/index.vue
@@ -8,17 +8,23 @@ const route = useRoute()
 
 <template>
   <el-main class="bi_main">
-    <router-view :key="$route.fullPath"></router-view>
+    <router-view :key="$route.fullPath"
+                 style="display: inline-block;height: 100%;width: 100%;"></router-view>
   </el-main>
 </template>
 
 <style scoped lang="scss">
 
 .bi_main {
+  display: flex;
+  min-height: 500px;
+  margin: 0;
   margin-top: 10px;
   padding: 0;
   background-color: white;
   height: calc(100vh - 110px);
+  //height: 100%;
+  //border: 1px solid gray;
 }
 
 </style>
\ No newline at end of file