From 6307998938bfa048b2bf0f8b78e31d9bd0c02cd7 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Fri, 30 Aug 2024 17:05:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=8C=E7=BA=A7=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/sidebar.scss                |  71 +++++---
 src/layout/components/Sidebar/SidebarItem.vue |   1 +
 src/layout/components/Sidebar/index.vue       |   5 +-
 src/router/index.js                           | 158 +++++++++++++++++-
 src/views/digitalMarketTech/index.vue         |  15 +-
 .../components/emotion-analysis.vue           |  12 +-
 .../digitalMarketingAlgorithms/index.vue      |  13 ++
 src/views/portraitModel/index.vue             |  28 +++-
 8 files changed, 259 insertions(+), 44 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index aea1243..72d904a 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,22 +1,22 @@
 #app {
 
   .main-container {
-    height:calc(100% - 58px);
+    height: calc(100% - 58px);
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
- 
+
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: 239px !important;
-    background:url('../images/sidebar-background.webp') no-repeat center;
+    background: url('../images/sidebar-background.webp') no-repeat center;
     // background-color: $base-menu-background;
     background-size: 100% 100%;
     height: 100%;
@@ -27,8 +27,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -72,29 +72,59 @@
       height: 100%;
       width: 100% !important;
       background-color: transparent !important;
-      padding-top: 20px;
-      padding-left: 10px;
-      .el-menu-item{
-        position: relative;
+      padding: 25px 18px;
+
+      .el-sub-menu {
+        margin-bottom: 20px;
+
+        .el-sub-menu__title {
+          height: 37px;
+          background: url('../images/sidebar-normal.png') no-repeat;
+          background-size: 100% 100% !important;
+        }
+
+        .el-menu {
+          padding: 1px 18px !important;
+
+          .el-menu-item {
+            min-width: 100% !important;
+            height: 37px;
+            color: #fff;
+            padding-left: 4px;
+            background: transparent !important;
+            margin-bottom: 0px;
+
+            &:hover {
+              background: transparent !important;
+            }
+          }
+        }
+      }
+
+      .el-menu-item {
         display: flex;
         align-items: center;
-        // margin: 15px 0px;
         margin-bottom: 20px;
         height: 37px;
-        width: 213px;
-        // margin-left: -8px;
         color: #fff;
         background: url('../images/sidebar-normal.png') no-repeat;
-        background-size:100% 100% !important;
+        background-size: 100% 100% !important;
       }
-      .is-active{
+
+      .is-active {
         background: url('../images/sidebar-active.png') no-repeat !important;
-        background-size:100% 100%;
-     }
+        // background-size: 100% 100% !important;
+
+        .el-sub-menu__title {
+          background: url('../images/sidebar-active.png') no-repeat !important;
+          background-size: 100% 100% !important;
+        }
+      }
 
     }
 
-    .el-menu-item, .menu-title {
+    .el-menu-item,
+    .menu-title {
       // overflow: hidden !important;
       // text-overflow: ellipsis !important;
       // white-space: nowrap !important;
@@ -112,7 +142,7 @@
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active>.el-sub-menu__title {
       color: $base-menu-color-active !important;
     }
 
@@ -180,6 +210,7 @@
             visibility: hidden;
             display: inline-block;
           }
+
           &>i {
             height: 0;
             width: 0;
@@ -259,4 +290,4 @@
       border-radius: 20px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index f2a913f..da1df23 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -10,6 +10,7 @@
     </template>
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      {{ resolvePath(item.path)}}
       <template v-if="item.meta" #title>
         <svg-icon :icon-class="item.meta && item.meta.icon" />
         <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 3eae115..6929ae5 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -2,7 +2,7 @@
  * @Author: qinzhenpen qzp1807@126.com
  * @Date: 2024-08-09 17:36:23
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-16 17:00:39
+ * @LastEditTime: 2024-08-30 16:07:47
  * @FilePath: \vue3\src\layout\components\Sidebar\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -15,7 +15,8 @@
         :collapse="isCollapse"
         :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
         :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-        :unique-opened="true"
+        :default-openeds="['/userProfile/userProfile','/','/technology/technology']"
+        :unique-opened="false"
         :active-text-color="theme"
         :collapse-transition="false"
         mode="vertical"
diff --git a/src/router/index.js b/src/router/index.js
index 0f0e47a..77d9377 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -88,42 +88,182 @@ export const dynamicRoutes = [
     ],
   },
   {
-    path: "",
+    path: "/technology",
     component: Layout,
-    redirect: "/digitalMarketTech",
+    redirect: "/technology/digitalMarketTech",
+    alwaysShow: true,
+    meta: { title: "数字营销技术", icon: "数据浏览", affix: true },
     children: [
       {
-        path: "/digitalMarketTech",
+        path: "digitalMarketTech",
         component: () => import("@/views/digitalMarketTech/index"),
         name: "digitalMarketTech",
+        hidden: true,
         meta: { title: "数字营销技术", icon: "数据浏览", affix: true },
       },
+      {
+        path: "bigData",
+        name: "bigData",
+        component: () => import("@/views/digitalMarketTech/index"),
+        meta: { title: "大数据", affix: true },
+      },
+      // 人工智能
+      {
+        path: "artificialIntelligence",
+        name: "artificialIntelligence",
+        component: () => import("@/views/digitalMarketTech/index"),
+        meta: { title: "人工智能", affix: true },
+      },
+      //AIGC大模型
+      {
+        path: "aigcModel",
+        name: "aigcModel",
+        component: () => import("@/views/digitalMarketTech/index"),
+        meta: { title: "AIGC大模型", affix: true },
+      },
     ],
   },
   {
-    path: "",
+    path: "/",
     component: Layout,
     redirect: "/digitalMarketingAlgorithms",
+    alwaysShow: true,
+    meta: { title: "数字营销算法", icon: "tongxunlu_B", affix: true },
     children: [
       {
-        path: "/digitalMarketingAlgorithms",
+        path: "digitalMarketingAlgorithms",
+        hidden: true,
         component: () => import("@/views/digitalMarketingAlgorithms/index"),
         name: "digitalMarketingAlgorithms",
         meta: { title: "数字营销算法", icon: "tongxunlu_B", affix: true },
       },
+      // 用户数据库
+      {
+        path: "userDatabase",
+        name: "userDatabase",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "用户数据库", affix: true },
+      },
+      // 描述性统计
+      {
+        path: "descriptiveStatistics",
+        name: "descriptiveStatistics",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "描述性统计", affix: true },
+      },
+      // 聚类分析
+      {
+        path: "clusteringAnalysis",
+        name: "clusteringAnalysis",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "聚类分析", affix: true },
+      },
+      // 关联规则挖掘
+      {
+        path: "associationRuleMining",
+        name: "associationRuleMining",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "关联规则挖掘", affix: true },
+      },
+      // 回归分析
+      {
+        path: "regressionAnalysis",
+        name: "regressionAnalysis",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "回归分析", affix: true },
+      },
+      // 情感分析
+      {
+        path: "sentimentAnalysis",
+        name: "sentimentAnalysis",
+        component: () => import("@/views/digitalMarketingAlgorithms/index"),
+        meta: { title: "情感分析", affix: true },
+      },
     ],
   },
   {
-    path: "",
+    path: "/userProfile",
     component: Layout,
-    redirect: "/portraitModel",
+    redirect: "/userProfile/portraitModel",
+    alwaysShow: true,
+    meta: { title: "用户画像模型", icon: "智能算法", affix: true },
     children: [
       {
-        path: "/portraitModel",
+        path: "portraitModel",
+        hidden: true,
         component: () => import("@/views/portraitModel/index"),
         name: "portraitModel",
-        meta: { title: "用户画像模型", icon: "智能算法", affix: true },
       },
+      // RFM分析
+      {
+        path: "rfmAnalysis",
+        name: "rfmAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "RFM分析", affix: true },
+      },
+      // 帕累托
+      {
+        path: "pareto",
+        name: "pareto",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "帕累托", affix: true },
+      },
+      // 波士顿矩阵分析
+      {
+        path: "bostonMatrixAnalysis",
+        name: "bostonMatrixAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "波士顿矩阵分析", affix: true },
+      },
+      // 转化分析
+      {
+        path: "conversionAnalysis",
+        name: "conversionAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "转化分析", affix: true },
+      },
+      // 购物篮分析
+      {
+        path: "shoppingBasketAnalysis",
+        name: "shoppingBasketAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "购物篮分析", affix: true },
+      },
+      // 复购分析
+      {
+        path: "repeatPurchaseAnalysis",
+        name: "repeatPurchaseAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "复购分析", affix: true },
+      },
+      // /留存分析
+      {
+        path: "retentionAnalysis",
+        name: "retentionAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "留存分析", affix: true },
+      },
+      // 用户粘性分析
+      {
+        path: "userStickinessAnalysis",
+        name: "userStickinessAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "用户粘性分析", affix: true },
+      },
+      //AARRR用户运营分析
+      {
+        path: "aarrrUserOperationAnalysis",
+        name: "aarrrUserOperationAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "AARRR用户运营分析", affix: true },
+      },
+      // 用户画像分析
+      {
+        path: "userPortraitAnalysis",
+        name: "userPortraitAnalysis",
+        component: () => import("@/views/portraitModel/index"),
+        meta: { title: "用户画像分析", affix: true },
+      }
     ],
   },
   // Bi可视化分析
diff --git a/src/views/digitalMarketTech/index.vue b/src/views/digitalMarketTech/index.vue
index 3af2439..55f4301 100644
--- a/src/views/digitalMarketTech/index.vue
+++ b/src/views/digitalMarketTech/index.vue
@@ -2,7 +2,7 @@
  * @Author: qinzhenpen qzp1807@126.com
  * @Date: 2024-08-20 17:50:08
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-22 17:12:34
+ * @LastEditTime: 2024-08-30 15:00:50
  * @FilePath: \vue3\src\views\digitalMarketTech\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -28,14 +28,25 @@
   </div>
 </template>
 <script setup>
+const route = useRoute();
+const router = useRouter();
 const pageData = [defineAsyncComponent(() => import("./bigData/index.vue")), defineAsyncComponent(() => import("./artificialIntelligence/index.vue")), defineAsyncComponent(() => import("./AIGCLargeModel/index.vue"))];
 const component = ref(pageData[0]);
-
+// 映射路由map
+const map = {
+  '大数据': 1,
+  '人工智能': 2,
+  'AIGC大模型': 3,
+};
 const isActive = ref(1);
 const activeIndex = (index) => {
   isActive.value = index;
   component.value = pageData[index - 1];
 };
+onMounted(()=>{
+  isActive.value= map[route.meta.title];
+  component.value= pageData[map[route.meta.title]-1];
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
index bad1d0c..a65c83e 100644
--- a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
@@ -168,14 +168,14 @@
             <el-input style="width: 140px" v-model="formInline.frequency" clearable />
           </el-form-item>
         </el-form-item>
-        <el-form-item label="评论观点抽取: " label-width="120px">
+        <!-- <el-form-item label="评论观点抽取: " label-width="120px">
           <el-form-item label="前两位词语:" label-width="120px" label-position="left">
             <el-input style="width: 140px" v-model="formInline.text1" clearable />
           </el-form-item>
           <el-form-item>
             <el-input style="width: 140px" v-model="formInline.text2" clearable />
           </el-form-item>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="情感倾向分析: " label-width="120px">
           <el-radio-group v-model="formInline.emotional" style="margin-left: 31px" fill="red" text-color="#ffffff">
             <el-radio value="1" label="正向" size="large"></el-radio>
@@ -483,8 +483,8 @@ const tableLabel = reactive([
 const formInline = ref({
   max: "",
   frequency: "",
-  text1: "",
-  text2: "",
+  // text1: "",
+  // text2: "",
   emotional: "",
   prominent: "",
 });
@@ -517,8 +517,8 @@ const flat = ref(false);
 const g_submitVerification = ref({
   max: "安装",
   frequency: "6",
-  text1: "",
-  text2: "",
+  // text1: "",
+  // text2: "",
   emotional: "负向",
   prominent: "安装",
 });
diff --git a/src/views/digitalMarketingAlgorithms/index.vue b/src/views/digitalMarketingAlgorithms/index.vue
index 0a6370d..6c96b40 100644
--- a/src/views/digitalMarketingAlgorithms/index.vue
+++ b/src/views/digitalMarketingAlgorithms/index.vue
@@ -14,6 +14,7 @@
   </div>
 </template>
 <script setup>
+const route = useRoute();
 const pageData = [defineAsyncComponent(() => import("./components/bigData.vue")), defineAsyncComponent(() => import("./components/descriptiveStatistics.vue")), defineAsyncComponent(() => import("./components/clusterAnalysis.vue")), defineAsyncComponent(() => import("./components/associationRuleMining.vue")), defineAsyncComponent(() => import("./components/regressionAnalysis.vue")), defineAsyncComponent(() => import("./components/emotion-analysis.vue"))];
 const component = ref(pageData[0]);
 const isActive = ref(1);
@@ -21,6 +22,18 @@ const activeIndex = (index) => {
   isActive.value = index;
   component.value = pageData[index - 1];
 };
+const map = {
+  '用户数据库': 1,
+  '描述性统计': 2,
+  '关联规则挖掘': 3,
+  '聚类分析': 4,
+  '回归分析': 5,
+  '情感分析': 6,
+};
+onMounted(()=>{
+  isActive.value= map[route.meta.title];
+  component.value= pageData[map[route.meta.title]-1];
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/portraitModel/index.vue b/src/views/portraitModel/index.vue
index 6b8a5f3..c8e0dd2 100644
--- a/src/views/portraitModel/index.vue
+++ b/src/views/portraitModel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content app-container">
     <div class="tabList">
-      <div class="tabs" v-for="item in tabList" :key="item.id" @click="changeTab(item)">
+      <div class="tabs" :class="{'tabs-active':tabIndex == item.id}" v-for="item in tabList" :key="item.id" @click="changeTab(item)">
         <div style="display: flex; align-items: center">
           <img :src="getAssetsFile(item.backImg)" alt="" />
           <span>{{ item.title }}</span>
@@ -141,10 +141,10 @@
 </template>
 
 <script setup>
+const route = useRoute();
 import * as portraitModel from "@/api/portraitModel";
 import mainContent from "@/views/components/mainContent.vue";
 import {getAssetsFile} from '@/utils/index.js'
-import { onMounted } from "vue";
 const { proxy } = getCurrentInstance();
 const currentComponent = ref(null);
 const contentRef = ref(null);
@@ -214,9 +214,21 @@ const tabList = ref([
   },
 ]);
 // defineExpose({ submitMethod });
+const map = {
+  'RFM分析': 1,
+  '帕累托': 2,
+  '波士顿矩阵分析': 3,
+  '转化分析': 4,
+  '购物篮分析': 5,
+  '复购分析': 6,
+  '留存分析': 7,
+  '用户粘性分析': 8,
+  'AARRR用户运营分析': 9,
+  '用户画像分析': 10,
+}
 onMounted(() => {
-  // getTableData("用户属性表");
-  currentComponent.value = defineAsyncComponent(tabList.value[0].key);
+  tabIndex.value=map[route.meta.title]
+  currentComponent.value = defineAsyncComponent(tabList.value[map[route.meta.title]-1].key);
 });
 const getTableData = (name) => {
   fileTable.value = [];
@@ -252,7 +264,7 @@ const handleChange = (index) => {
 const changeTab = (item) => {
   currentComponent.value = defineAsyncComponent(item.key);
   menuIndex.value = 0;
-  //   tabIndex = item.id;
+  tabIndex.value = item.id;
 };
 const submit = () => {
   contentRef.value.submitMethod();
@@ -271,6 +283,12 @@ const retrain = () => {
   .tabList {
     // display: flex;
     // width: 1060px;
+    .tabs-active{
+      // 放大一点
+      transform: scale(1.1);
+      // 过渡
+      transition: all 0.3s;
+    }
     .tabs {
       cursor: pointer;
       font-size: 13px;