diff --git a/dist.tar b/dist.tar
deleted file mode 100644
index f865528..0000000
Binary files a/dist.tar and /dev/null differ
diff --git a/package.json b/package.json
index 997be84..0482887 100644
--- a/package.json
+++ b/package.json
@@ -16,25 +16,29 @@
   },
   "dependencies": {
     "@antv/g2": "^5.2.3",
-    "echarts-stat": "^1.2.0",
     "@element-plus/icons-vue": "2.0.10",
     "@vueup/vue-quill": "1.1.0",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "echarts": "5.4.0",
+    "echarts-wordcloud": "2.0.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "highlight.js": "^11.10.0",
+    "html2canvas": "^1.4.1",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
     "marked": "^14.0.0",
     "md-editor-v3": "^4.18.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
     "vue": "^3.2.47",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",
diff --git a/src/api/AI.js b/src/api/AI.js
index 45ffb26..4b56e0e 100644
--- a/src/api/AI.js
+++ b/src/api/AI.js
@@ -72,4 +72,28 @@ export function linearRegression(data) {
     method: 'post',
     data:data,
   })
+}
+//线性回归-逻辑回归--预测
+export function logisticRegressionPrediction(data) {
+  return request({
+    url: '/api/model/prediction',
+    method: 'post',
+    data:data,
+  })
+}
+//聚类分析表格下载
+export function downloadClusterAnalysisForm(data) {
+  return request({
+    url: '/api/analysis/cAMExport',
+    method: 'post',
+    data:data,
+  })
+}
+//回归分析--逻辑回归
+export function logisticRegression(data) {
+  return request({
+    url: '/api/model/logistic',
+    method: 'post',
+    data:data,
+  })
 }
\ No newline at end of file
diff --git a/src/api/marketing-algorithm.js b/src/api/marketing-algorithm.js
index b49b8c4..b116a94 100644
--- a/src/api/marketing-algorithm.js
+++ b/src/api/marketing-algorithm.js
@@ -2,7 +2,7 @@
  * @Author: qinzhenpen qzp1807@126.com
  * @Date: 2024-08-16 10:14:59
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-17 16:57:01
+ * @LastEditTime: 2024-08-19 15:07:27
  * @FilePath: \vue3\src\api\marketing-algorithm.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -54,4 +54,22 @@ export function getMarketingAlgorithmKnowledgeImport(data) {
     method: "POST",
     data,
   });
+}
+//描述性统计分析下载
+export function getMarketingAlgorithmDownload(data) {
+  return request({
+    url: "/api/analysis/dSExport",
+    //下载
+    responseType: "blob",
+    method: "post",
+    data,
+  });
+}
+// 情感分析
+export function getMarketingAlgorithmSentiment(data) {
+  return request({
+    url: "/api/model/emotionalAnalysis",
+    method: "POST",
+    data,
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/01.png b/src/assets/images/01.png
index 96f14f5..e908594 100644
Binary files a/src/assets/images/01.png and b/src/assets/images/01.png differ
diff --git a/src/assets/images/10027.png b/src/assets/images/10027.png
new file mode 100644
index 0000000..ce1edcf
Binary files /dev/null and b/src/assets/images/10027.png differ
diff --git a/src/assets/images/f1001.png b/src/assets/images/f1001.png
new file mode 100644
index 0000000..ef31085
Binary files /dev/null and b/src/assets/images/f1001.png differ
diff --git a/src/assets/images/f10010.png b/src/assets/images/f10010.png
new file mode 100644
index 0000000..f9ab768
Binary files /dev/null and b/src/assets/images/f10010.png differ
diff --git a/src/assets/images/f10011.png b/src/assets/images/f10011.png
new file mode 100644
index 0000000..0af66d5
Binary files /dev/null and b/src/assets/images/f10011.png differ
diff --git a/src/assets/images/f10012.png b/src/assets/images/f10012.png
new file mode 100644
index 0000000..841def2
Binary files /dev/null and b/src/assets/images/f10012.png differ
diff --git a/src/assets/images/f10013.png b/src/assets/images/f10013.png
new file mode 100644
index 0000000..d25c994
Binary files /dev/null and b/src/assets/images/f10013.png differ
diff --git a/src/assets/images/f10014.png b/src/assets/images/f10014.png
new file mode 100644
index 0000000..232c031
Binary files /dev/null and b/src/assets/images/f10014.png differ
diff --git a/src/assets/images/f10015.png b/src/assets/images/f10015.png
new file mode 100644
index 0000000..31fa3ac
Binary files /dev/null and b/src/assets/images/f10015.png differ
diff --git a/src/assets/images/f10016.png b/src/assets/images/f10016.png
new file mode 100644
index 0000000..3149666
Binary files /dev/null and b/src/assets/images/f10016.png differ
diff --git a/src/assets/images/f10017.png b/src/assets/images/f10017.png
new file mode 100644
index 0000000..91022e1
Binary files /dev/null and b/src/assets/images/f10017.png differ
diff --git a/src/assets/images/f10018.png b/src/assets/images/f10018.png
new file mode 100644
index 0000000..3a60acb
Binary files /dev/null and b/src/assets/images/f10018.png differ
diff --git a/src/assets/images/f10019.png b/src/assets/images/f10019.png
new file mode 100644
index 0000000..9b2de65
Binary files /dev/null and b/src/assets/images/f10019.png differ
diff --git a/src/assets/images/f1002.png b/src/assets/images/f1002.png
new file mode 100644
index 0000000..2c97c5e
Binary files /dev/null and b/src/assets/images/f1002.png differ
diff --git a/src/assets/images/f10020.png b/src/assets/images/f10020.png
new file mode 100644
index 0000000..bdf9690
Binary files /dev/null and b/src/assets/images/f10020.png differ
diff --git a/src/assets/images/f10021.png b/src/assets/images/f10021.png
new file mode 100644
index 0000000..29f527e
Binary files /dev/null and b/src/assets/images/f10021.png differ
diff --git a/src/assets/images/f10022.png b/src/assets/images/f10022.png
new file mode 100644
index 0000000..432eae6
Binary files /dev/null and b/src/assets/images/f10022.png differ
diff --git a/src/assets/images/f10023.png b/src/assets/images/f10023.png
new file mode 100644
index 0000000..126f40f
Binary files /dev/null and b/src/assets/images/f10023.png differ
diff --git a/src/assets/images/f10024.png b/src/assets/images/f10024.png
new file mode 100644
index 0000000..23736fc
Binary files /dev/null and b/src/assets/images/f10024.png differ
diff --git a/src/assets/images/f10025.png b/src/assets/images/f10025.png
new file mode 100644
index 0000000..3ef3027
Binary files /dev/null and b/src/assets/images/f10025.png differ
diff --git a/src/assets/images/f10026.png b/src/assets/images/f10026.png
new file mode 100644
index 0000000..181445a
Binary files /dev/null and b/src/assets/images/f10026.png differ
diff --git a/src/assets/images/f1003.png b/src/assets/images/f1003.png
new file mode 100644
index 0000000..2c97c5e
Binary files /dev/null and b/src/assets/images/f1003.png differ
diff --git a/src/assets/images/f1005.png b/src/assets/images/f1005.png
new file mode 100644
index 0000000..b7dabc8
Binary files /dev/null and b/src/assets/images/f1005.png differ
diff --git a/src/assets/images/f2001.png b/src/assets/images/f2001.png
new file mode 100644
index 0000000..59b54de
Binary files /dev/null and b/src/assets/images/f2001.png differ
diff --git a/src/assets/images/f2002.png b/src/assets/images/f2002.png
new file mode 100644
index 0000000..dda2fa9
Binary files /dev/null and b/src/assets/images/f2002.png differ
diff --git a/src/assets/images/f2004.png b/src/assets/images/f2004.png
new file mode 100644
index 0000000..b99ce0b
Binary files /dev/null and b/src/assets/images/f2004.png differ
diff --git a/src/assets/images/f3001.png b/src/assets/images/f3001.png
new file mode 100644
index 0000000..12d0733
Binary files /dev/null and b/src/assets/images/f3001.png differ
diff --git a/src/assets/images/f3002.png b/src/assets/images/f3002.png
new file mode 100644
index 0000000..98cd4ec
Binary files /dev/null and b/src/assets/images/f3002.png differ
diff --git a/src/assets/images/f3003.png b/src/assets/images/f3003.png
new file mode 100644
index 0000000..a60c111
Binary files /dev/null and b/src/assets/images/f3003.png differ
diff --git a/src/assets/images/f3005.png b/src/assets/images/f3005.png
new file mode 100644
index 0000000..c6f66be
Binary files /dev/null and b/src/assets/images/f3005.png differ
diff --git a/src/assets/images/f3006.png b/src/assets/images/f3006.png
new file mode 100644
index 0000000..bcf4d9e
Binary files /dev/null and b/src/assets/images/f3006.png differ
diff --git a/src/assets/images/f3007.png b/src/assets/images/f3007.png
new file mode 100644
index 0000000..ba5d286
Binary files /dev/null and b/src/assets/images/f3007.png differ
diff --git a/src/assets/images/f3008.png b/src/assets/images/f3008.png
new file mode 100644
index 0000000..97e425e
Binary files /dev/null and b/src/assets/images/f3008.png differ
diff --git a/src/assets/images/f3009.png b/src/assets/images/f3009.png
new file mode 100644
index 0000000..08319e8
Binary files /dev/null and b/src/assets/images/f3009.png differ
diff --git a/src/assets/images/f3010.png b/src/assets/images/f3010.png
new file mode 100644
index 0000000..6b299f8
Binary files /dev/null and b/src/assets/images/f3010.png differ
diff --git a/src/assets/images/f3011.png b/src/assets/images/f3011.png
new file mode 100644
index 0000000..2c952d8
Binary files /dev/null and b/src/assets/images/f3011.png differ
diff --git a/src/assets/images/f3012.png b/src/assets/images/f3012.png
new file mode 100644
index 0000000..2af799c
Binary files /dev/null and b/src/assets/images/f3012.png differ
diff --git a/src/assets/images/f3013.png b/src/assets/images/f3013.png
new file mode 100644
index 0000000..44b18eb
Binary files /dev/null and b/src/assets/images/f3013.png differ
diff --git a/src/assets/images/f3014.png b/src/assets/images/f3014.png
new file mode 100644
index 0000000..67769ba
Binary files /dev/null and b/src/assets/images/f3014.png differ
diff --git a/src/assets/images/f3015.png b/src/assets/images/f3015.png
new file mode 100644
index 0000000..67769ba
Binary files /dev/null and b/src/assets/images/f3015.png differ
diff --git a/src/assets/images/f3016.png b/src/assets/images/f3016.png
new file mode 100644
index 0000000..f11ae97
Binary files /dev/null and b/src/assets/images/f3016.png differ
diff --git a/src/assets/images/f3017.png b/src/assets/images/f3017.png
new file mode 100644
index 0000000..00c9690
Binary files /dev/null and b/src/assets/images/f3017.png differ
diff --git a/src/assets/images/f3018.png b/src/assets/images/f3018.png
new file mode 100644
index 0000000..edd148f
Binary files /dev/null and b/src/assets/images/f3018.png differ
diff --git a/src/assets/images/f3019.png b/src/assets/images/f3019.png
new file mode 100644
index 0000000..751662c
Binary files /dev/null and b/src/assets/images/f3019.png differ
diff --git a/src/assets/images/f3020.png b/src/assets/images/f3020.png
new file mode 100644
index 0000000..217c495
Binary files /dev/null and b/src/assets/images/f3020.png differ
diff --git a/src/assets/images/f3021.png b/src/assets/images/f3021.png
new file mode 100644
index 0000000..725172b
Binary files /dev/null and b/src/assets/images/f3021.png differ
diff --git a/src/assets/images/f3022.png b/src/assets/images/f3022.png
new file mode 100644
index 0000000..71326ec
Binary files /dev/null and b/src/assets/images/f3022.png differ
diff --git a/src/assets/images/f3023.png b/src/assets/images/f3023.png
new file mode 100644
index 0000000..b074f6f
Binary files /dev/null and b/src/assets/images/f3023.png differ
diff --git a/src/assets/images/f3024.png b/src/assets/images/f3024.png
new file mode 100644
index 0000000..3e33abc
Binary files /dev/null and b/src/assets/images/f3024.png differ
diff --git a/src/assets/images/f3025.png b/src/assets/images/f3025.png
new file mode 100644
index 0000000..99f72fe
Binary files /dev/null and b/src/assets/images/f3025.png differ
diff --git a/src/assets/images/f3026.png b/src/assets/images/f3026.png
new file mode 100644
index 0000000..277761e
Binary files /dev/null and b/src/assets/images/f3026.png differ
diff --git a/src/assets/images/f4001.png b/src/assets/images/f4001.png
new file mode 100644
index 0000000..eba6855
Binary files /dev/null and b/src/assets/images/f4001.png differ
diff --git a/src/assets/images/f4002.png b/src/assets/images/f4002.png
new file mode 100644
index 0000000..4e799a9
Binary files /dev/null and b/src/assets/images/f4002.png differ
diff --git a/src/assets/images/f4003.png b/src/assets/images/f4003.png
new file mode 100644
index 0000000..b302491
Binary files /dev/null and b/src/assets/images/f4003.png differ
diff --git a/src/assets/images/f4005.png b/src/assets/images/f4005.png
new file mode 100644
index 0000000..775d90e
Binary files /dev/null and b/src/assets/images/f4005.png differ
diff --git a/src/assets/images/f4006.png b/src/assets/images/f4006.png
new file mode 100644
index 0000000..7ef4b7d
Binary files /dev/null and b/src/assets/images/f4006.png differ
diff --git a/src/assets/images/f4007.png b/src/assets/images/f4007.png
new file mode 100644
index 0000000..42f5fa7
Binary files /dev/null and b/src/assets/images/f4007.png differ
diff --git a/src/assets/images/f4008.png b/src/assets/images/f4008.png
new file mode 100644
index 0000000..26bbc24
Binary files /dev/null and b/src/assets/images/f4008.png differ
diff --git a/src/assets/images/f4009.png b/src/assets/images/f4009.png
new file mode 100644
index 0000000..be44a1b
Binary files /dev/null and b/src/assets/images/f4009.png differ
diff --git a/src/assets/images/f4010.png b/src/assets/images/f4010.png
new file mode 100644
index 0000000..b2f09f4
Binary files /dev/null and b/src/assets/images/f4010.png differ
diff --git a/src/assets/images/f4011.png b/src/assets/images/f4011.png
new file mode 100644
index 0000000..756d05b
Binary files /dev/null and b/src/assets/images/f4011.png differ
diff --git a/src/assets/images/f4012.png b/src/assets/images/f4012.png
new file mode 100644
index 0000000..f4fde38
Binary files /dev/null and b/src/assets/images/f4012.png differ
diff --git a/src/assets/images/f4013.png b/src/assets/images/f4013.png
new file mode 100644
index 0000000..90a4d7d
Binary files /dev/null and b/src/assets/images/f4013.png differ
diff --git a/src/assets/images/f4015.png b/src/assets/images/f4015.png
new file mode 100644
index 0000000..29f77a3
Binary files /dev/null and b/src/assets/images/f4015.png differ
diff --git a/src/assets/images/f4016.png b/src/assets/images/f4016.png
new file mode 100644
index 0000000..7f5a408
Binary files /dev/null and b/src/assets/images/f4016.png differ
diff --git a/src/assets/images/f4017.png b/src/assets/images/f4017.png
new file mode 100644
index 0000000..f8d2659
Binary files /dev/null and b/src/assets/images/f4017.png differ
diff --git a/src/assets/images/f4018.png b/src/assets/images/f4018.png
new file mode 100644
index 0000000..3b9e413
Binary files /dev/null and b/src/assets/images/f4018.png differ
diff --git a/src/assets/images/f4019.png b/src/assets/images/f4019.png
new file mode 100644
index 0000000..af45ae9
Binary files /dev/null and b/src/assets/images/f4019.png differ
diff --git a/src/assets/images/删除.png b/src/assets/images/删除.png
new file mode 100644
index 0000000..e9da7e1
Binary files /dev/null and b/src/assets/images/删除.png differ
diff --git a/src/assets/images/取消.png b/src/assets/images/取消.png
new file mode 100644
index 0000000..eeae4a2
Binary files /dev/null and b/src/assets/images/取消.png differ
diff --git a/src/assets/images/哭脸.png b/src/assets/images/哭脸.png
new file mode 100644
index 0000000..a348504
Binary files /dev/null and b/src/assets/images/哭脸.png differ
diff --git a/src/assets/images/图1.png b/src/assets/images/图1.png
deleted file mode 100644
index cd74714..0000000
Binary files a/src/assets/images/图1.png and /dev/null differ
diff --git a/src/assets/images/图2.png b/src/assets/images/图2.png
deleted file mode 100644
index 4c1647e..0000000
Binary files a/src/assets/images/图2.png and /dev/null differ
diff --git a/src/assets/images/情感分析.png b/src/assets/images/情感分析.png
new file mode 100644
index 0000000..27da9e6
Binary files /dev/null and b/src/assets/images/情感分析.png differ
diff --git a/src/assets/images/清空.png b/src/assets/images/清空.png
new file mode 100644
index 0000000..815cb00
Binary files /dev/null and b/src/assets/images/清空.png differ
diff --git a/src/assets/images/确定222.png b/src/assets/images/确定222.png
new file mode 100644
index 0000000..f131128
Binary files /dev/null and b/src/assets/images/确定222.png differ
diff --git a/src/assets/images/笑脸.png b/src/assets/images/笑脸.png
new file mode 100644
index 0000000..7a9487a
Binary files /dev/null and b/src/assets/images/笑脸.png differ
diff --git a/src/assets/images/编辑.png b/src/assets/images/编辑.png
new file mode 100644
index 0000000..a3f7e32
Binary files /dev/null and b/src/assets/images/编辑.png differ
diff --git a/src/assets/images/评价.png b/src/assets/images/评价.png
new file mode 100644
index 0000000..314c611
Binary files /dev/null and b/src/assets/images/评价.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4b65962..5d90c3a 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -199,33 +199,60 @@ aside {
   text-align: center;
 
   .el-button:nth-child(1) {
-    background: url("../../assets/images/szjj/提交任务.png") no-repeat;
-    background-size: 100% 100%;
+    background: url("../../assets/images/确定222.png") no-repeat !important;
+    background-size: 100% 100% !important;
   }
 
   .el-button:nth-child(2) {
-    background: url("../../assets/images/szjj/重新开始.png") no-repeat;
-    background-size: 100% 100%;
+    background: url("../../assets/images/取消.png") no-repeat !important;
+    background-size: 100% 100% !important;
   }
 
   .el-button--large.is-round {
     padding: 12px 20px 12px 40px !important;
   }
-
-  .el-button {
-    width: 136px;
-    height: 40px;
+  .el-button{
+    width: 89px;
+    height: 31px;
     padding: 12px 20px 12px 40px !important;
     font-size: 15px;
     border: none;
-    color: #ffffff;
+    color: #080138;
   }
 }
 
 .app-container2 {
-  position: relative;
-  padding: 20px;
-  background: #FFFFFF;
-  box-shadow: 0px 0px 13px 0px #D6E0FE;
-  border-radius: 10px;
+  margin: 10px;
+    box-shadow: 0px 0px 13px 0px #0452C6;
+    border-radius: 10px;
+    padding: 25px 25px 10px 25px;
+}
+.dialogClass{
+  background:url('@/assets/images/弹框.png') !important;
+  background-size: 100% 100% !important;
+  .el-dialog__header{
+      padding: 5px 0px;
+      margin-right: 5px !important;
+      .gbImg{
+          cursor: pointer;
+          width: 51px;
+          height: 31px;
+          background-size: 100% 100%;
+      }
+  }
+  .xtImg{
+  margin-left: 18px;
+  width: 530px;
+}
+}
+.my-header {
+display: flex;
+flex-direction: row;
+justify-content: space-between;
+gap: 16px;
+text-align: center;
+span{
+  color: #FFFFFF;
+  padding: 38px 20px 0;
+}
 }
\ No newline at end of file
diff --git a/src/components/Crontab/hour.vue b/src/components/Crontab/hour.vue
index f9a6374..437b455 100644
--- a/src/components/Crontab/hour.vue
+++ b/src/components/Crontab/hour.vue
@@ -38,7 +38,7 @@ const emit = defineEmits(['update'])
 const props = defineProps({
     cron: {
         type: Object,
-        default: {
+       default: {
             second: "*",
             min: "*",
             hour: "*",
@@ -87,7 +87,7 @@ function changeRadioValue(value) {
     } else if (value.indexOf('/') > -1) {
         const indexArr = value.split('/')
         average01.value = Number(indexArr[0])
-        average02.value = Number(indexArr[1])
+        average01.value = Number(indexArr[1])
         radioValue.value = 3
     } else {
         checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index 4667310..d5ebb1c 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -2,22 +2,8 @@
   <div>
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
-        <span
-          v-if="item.elTagType == 'default' || item.elTagType == ''"
-          :key="item.value"
-          :index="index"
-          :class="item.elTagClass"
-          >{{ item.label + " " }}</span
-        >
-        <el-tag
-          v-else
-          :disable-transitions="true"
-          :key="item.value + ''"
-          :index="index"
-          :type="item.elTagType === 'primary' ? '' : item.elTagType"
-          :class="item.elTagClass"
-          >{{ item.label + " " }}</el-tag
-        >
+        <span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="item.value" :index="index" :class="item.elTagClass">{{ item.label + " " }}</span>
+        <el-tag v-else :disable-transitions="true" :key="item.value + ''" :index="index" :type="item.elTagType === 'primary' ? '' : item.elTagType" :class="item.elTagClass">{{ item.label + " " }}</el-tag>
       </template>
     </template>
     <template v-if="unmatch && showValue">
@@ -64,8 +50,7 @@ const unmatch = computed(() => {
     }
     // 传入值为Array
     props.value.forEach((item) => {
-      if (!props.options.some((v) => v.value == item))
-        unmatchArray.value.push(item);
+      if (!props.options.some((v) => v.value == item)) unmatchArray.value.push(item);
     });
     return true;
   }
@@ -85,4 +70,4 @@ function handleArray(array) {
 .el-tag + .el-tag {
   margin-left: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/directive/common/debounce.js b/src/directive/common/debounce.js
new file mode 100644
index 0000000..97ce5a8
--- /dev/null
+++ b/src/directive/common/debounce.js
@@ -0,0 +1,36 @@
+export default {
+  beforeMount(el, { value, arg }) {
+    // 确保 binding.value 是一个函数
+    if (typeof value !== "function") {
+      console.warn("v-debounce directive requires a function as its value");
+      return;
+    }
+    // 默认防抖延迟为 300ms，或使用传递的延迟值
+    const delay = Number(arg) || 300;
+    const debouncedFunction = debounce(value, delay);
+
+    // 事件处理器
+    const handler = (event) => {
+      debouncedFunction(event.target.value);
+    };
+    // 添加输入事件监听
+    el.addEventListener("input", handler);
+
+    // 保存销毁函数
+    el.$destroyDebounce = () => el.removeEventListener("input", handler);
+  },
+  unmounted(el) {
+    // 清理事件监听
+    if (el.$destroyDebounce) {
+      el.$destroyDebounce();
+    }
+  },
+};
+
+function debounce(func, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => func.apply(this, args), delay);
+  };
+}
diff --git a/src/directive/common/lazy.js b/src/directive/common/lazy.js
new file mode 100644
index 0000000..99fe78a
--- /dev/null
+++ b/src/directive/common/lazy.js
@@ -0,0 +1,27 @@
+/*
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-21 13:43:25
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:43:48
+ * @FilePath: \vue3\src\directive\common\lazy.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export default {
+  mounted(el, binding) {
+    const loadIframe = () => {
+      const iframeSrc = binding.value;
+      el.src = iframeSrc;
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadIframe();
+          observer.unobserve(el);
+        }
+      });
+    });
+
+    observer.observe(el);
+  },
+};
diff --git a/src/directive/index.js b/src/directive/index.js
index a86e00b..992af71 100644
--- a/src/directive/index.js
+++ b/src/directive/index.js
@@ -1,9 +1,21 @@
+/*
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-07-15 15:44:46
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:44:40
+ * @FilePath: \vue3\src\directive\index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import hasRole from './permission/hasRole'
 import hasPermi from './permission/hasPermi'
 import copyText from './common/copyText'
+import debounce from './common/debounce'
+import lazy from './common/lazy'
 
 export default function directive(app){
   app.directive('hasRole', hasRole)
   app.directive('hasPermi', hasPermi)
   app.directive('copyText', copyText)
+  app.directive('debounce', debounce)
+  app.directive('lazy', lazy)
 }
\ No newline at end of file
diff --git a/src/permission.js b/src/permission.js
index b098714..54343ef 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,3 +1,11 @@
+/*
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:48:30
+ * @FilePath: \vue3\src\permission.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import router from './router'
 import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress'
@@ -8,7 +16,7 @@ import { isRelogin } from '@/utils/request'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-
+  
 NProgress.configure({ showSpinner: false });
 
 const whiteList = ['/login', '/register'];
diff --git a/src/router/index.js b/src/router/index.js
index c87185f..4264953 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -66,7 +66,7 @@ export const constantRoutes = [
         path: "/index",
         component: () => import("@/views/index"),
         name: "Index",
-        meta: { title: "首页", icon: "dashboard", affix: true },
+        meta: { title: "首页", icon: "首页", affix: true },
       },
     ],
   },
@@ -96,7 +96,7 @@ export const dynamicRoutes = [
         path: "/digitalMarketTech",
         component: () => import("@/views/digitalMarketTech/index"),
         name: "digitalMarketTech",
-        meta: { title: "数字营销技术", icon: "monitor2", affix: true },
+        meta: { title: "数字营销技术", icon: "数据浏览", affix: true },
       },
     ],
   },
diff --git a/src/utils/pdf.js b/src/utils/pdf.js
new file mode 100644
index 0000000..1d57532
--- /dev/null
+++ b/src/utils/pdf.js
@@ -0,0 +1,94 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+var noTableHeight = 0 //table外的元素高度
+
+export const htmlPdf = (title, html, fileList, type) => {
+  return new Promise((resolve, reject) => {
+    if (fileList) {
+      const pageHeight = Math.floor(277 * html.scrollWidth / 190) + 20 // 计算pdf高度
+      for (let i = 0; i < fileList.length; i++) { // 循环获取的元素
+        const multiple = Math.ceil((fileList[i].offsetTop + fileList[i].offsetHeight) / pageHeight) // 元素的高度
+        if (isSplit(fileList, i, multiple * pageHeight)) { // 计算是否超出一页
+          var _H = '' // 向pdf插入空白块的内容高度
+          if (fileList[i].localName !== 'tr') { // 判断是不是表格里的内容
+            _H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight)
+          } else {
+            _H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight + noTableHeight) + 20
+          }
+          var newNode = getFooterElement(_H)  // 向pdf插入空白块的内容
+          const divParent = fileList[i].parentNode // 获取该div的父节点
+          const next = fileList[i].nextSibling // 获取div的下一个兄弟节点
+          // 判断兄弟节点是否存在
+          if (next) {
+            // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
+            divParent.insertBefore(newNode, next)
+          } else {
+            // 否则向节点添加最后一个子节点
+            divParent.appendChild(newNode)
+          }
+        }
+      }
+    }
+
+    html2Canvas(html, {
+      allowTaint: false,
+      taintTest: false,
+      logging: false,
+      useCORS: true,
+      dpi: window.devicePixelRatio * 1,
+      scale: 1 // 按比例增加分辨率
+    }).then(canvas => {
+      var pdf = new JsPDF('l', 'mm', 'a4') // A4纸，横向或纵向
+      var ctx = canvas.getContext('2d')
+      var a4w = type ? 277 : 190; var a4h = type ? 190 : 277 // A4大小
+      var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
+      var renderedHeight = 0
+
+      while (renderedHeight < canvas.height) {
+        var page = document.createElement('canvas')
+        page.width = canvas.width
+        page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
+
+        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
+        page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
+        pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面
+
+        renderedHeight += imgHeight
+        if (renderedHeight < canvas.height) {
+          pdf.addPage()// 如果后面还有内容，添加一个空页
+        }
+      }
+
+      // 返回Blob对象而不是直接下载文件
+      const pdfBlob = pdf.output('blob');
+      resolve(pdfBlob);
+    }).catch(error => {
+      reject(error);
+    });
+  });
+}
+
+// pdf截断需要一个空白位置来补充
+const getFooterElement = (remainingHeight, fillingHeight = 0) => {
+  const newNode = document.createElement('div')
+  newNode.style.background = '#ffffff'
+  newNode.style.width = 'calc(100% + 8px)'
+  newNode.style.marginLeft = '-4px'
+  newNode.style.marginBottom = '0px'
+  newNode.classList.add('divRemove')
+  newNode.style.height = (remainingHeight + fillingHeight) + 'px'
+  return newNode
+}
+
+const isSplit = (nodes, index, pageHeight) => {
+  if (nodes[index].localName !== 'tr') {  // 判断元素是不是tr
+    noTableHeight += nodes[index].clientHeight
+  }
+
+  if (nodes[index].localName !== 'tr') {
+    return nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
+  } else {
+    return nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight + noTableHeight > pageHeight
+  }
+}
diff --git a/src/views/components/popModal.vue b/src/views/components/popModal.vue
index 038eb92..eb544d1 100644
--- a/src/views/components/popModal.vue
+++ b/src/views/components/popModal.vue
@@ -1,36 +1,22 @@
 <template>
   <div>
     <el-dialog
-      title="任务知识导入"
-      style="width: 1108px; height: 798px"
-      custom-class="dialogClass"
-      :show-close="false"
-      class="dialog"
+      :title="title"
+      style="width: 1308px; height: 838px"
+      custom-class="dialog"
       v-model="props.showModel"
-      :close-on-click-modal="false"
+      :before-close="close"
     >
-      <template #header="{ titleId, titleClass }">
-        <div class="my-header">
-          <span :id="titleId" :class="titleClass">任务知识导入</span>
-          <img
-            class="gbImg"
-            src="@/assets/images/关闭.png"
-            @click="close"
-            alt=""
-          />
-        </div>
-        <img class="xtImg" src="@/assets/images/线条.png" alt="" />
-      </template>
       <div
+      class="diaMain"
         style="
-          color: #fff;
           margin-top: -35px;
           padding: 10px;
           padding-left: 20px;
         "
       >
-        <el-scrollbar height="650px">
-          <slot name="content"></slot>
+        <el-scrollbar height="730px">
+          <slot name="content" class="main"></slot>
         </el-scrollbar>
       </div>
       <!-- <template #footer>
@@ -75,39 +61,52 @@ const submit = () => {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .el-dialog {
-  background: url("@/assets/images/弹框@2x.png") !important;
-  background-size: 1108px 798px !important;
+
+</style>
+<style lang="scss">
+.diaMain{
+  img{
+    max-height: 1200px;
+    max-width: 1200px;
+  }
+  p{
+    font-size: 15px;
+  }
+}
+.dialog {
+  border-radius: 12px;
   .el-dialog__header {
-    padding: 5px 0px;
-    margin-right: 5px !important;
-    .gbImg {
-      cursor: pointer;
-      margin-top: 3px;
-      // margin-left: -30px;
-      width: 51px;
-      height: 35px;
-      background-size: 100% 100%;
+    background: url("@/assets/images/szjj/弹窗标题.png") !important;
+    background-size: 100% 100% !important;
+    margin-right: 0 !important;
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
     }
   }
-  .xtImg {
-    margin-left: 18px;
-    width: 530px;
+  .el-dialog__headerbtn {
+    top: 8px !important;
+    background: url("@/assets/images/szjj/关闭2.png") no-repeat;
+    background-size: 100% 100% !important;
+    width: 16px;
+    height: 16px;
+    margin-right: 15px;
+    margin-top: 7px;
   }
-}
-.my-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 16px;
-  text-align: center;
-  margin-right: 9px;
-  margin-bottom: 0;
-  span {
-    color: #ffffff;
-    padding: 38px 20px 0;
-    margin-top: 10px;
-    margin-left: 20px;
+  .el-dialog__headerbtn i {
+    content: "1";
+    font-size: 13px;
+    visibility: hidden;
+  }
+  .el-dialog__footer {
+    text-align: center;
   }
+  .tj{
+        color: #FFFFFF;
+    }
+    .cxks{
+        background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+    }
 }
 </style>
diff --git a/src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue b/src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue
index 9a96117..1e24ab7 100644
--- a/src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue
+++ b/src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue
@@ -147,6 +147,7 @@ const handleChange2 = async (info) => {
   formData.append("userId", JSON.parse(getUserInfo()).userId);
   formData.append("module", "AI修图");
   formData.append("count", 2);
+
   try {
     previewFile2.value = [];
     const res = await uploadFile(formData);
diff --git a/src/views/digitalMarketTech/AIGCLargeModel/components/AIVenisonDiagram.vue b/src/views/digitalMarketTech/AIGCLargeModel/components/AIVenisonDiagram.vue
index 099c957..4b1c2a7 100644
--- a/src/views/digitalMarketTech/AIGCLargeModel/components/AIVenisonDiagram.vue
+++ b/src/views/digitalMarketTech/AIGCLargeModel/components/AIVenisonDiagram.vue
@@ -46,7 +46,7 @@
 </template>
 <script setup>
 import { MdPreview, MdCatalog } from "md-editor-v3";
-import { getToken,getUserInfo } from '@/utils/auth'
+import { getToken, getUserInfo } from "@/utils/auth";
 import useUserStore from "@/store/modules/user";
 import "md-editor-v3/lib/preview.css";
 import * as AI from "@/api/AI.js";
@@ -99,9 +99,9 @@ const sendExample = (item) => {
   input.value = item.text;
   sendText();
 };
-const aiUserid=computed(()=>{
-  return  getUserInfo() ? JSON.parse(getUserInfo()) : "";
-})
+const aiUserid = computed(() => {
+  return getUserInfo() ? JSON.parse(getUserInfo()) : "";
+});
 const sendText = async () => {
   if (input.value.trim() === "" || isRequestPending.value) return;
   if (input.value.trim() === "") return;
@@ -178,7 +178,7 @@ const handleKeyDown = (event) => {
     event.preventDefault();
     sendText();
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue b/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
index 194bb34..f87328c 100644
--- a/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
+++ b/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
@@ -1,23 +1,35 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-19 09:10:19
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 16:24:11
+ * @FilePath: \vue3\src\views\digitalMarketTech\AIGCLargeModel\components\thirdPartyAIGC.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-  <div class="app-containerO">
-    <iframe src="https://pidoutv.com/" frameborder="0"></iframe>
+  <div class="app-containerO" v-loading="loding">
+    <iframe v-lazy="'https://pidoutv.com/'" src="https://pidoutv.com/" frameborder="0"></iframe>
   </div>
 </template>
-
 <script setup>
-
+const { proxy } = getCurrentInstance();
+const loding = ref(true);
+onMounted(() => {
+  setTimeout(()=>{
+    loding.value = false;
+  },2000)
+});
 </script>
-
 <style scoped lang="scss">
 .app-containerO {
-    margin: 10px;
-    box-shadow: 0px 0px 13px 0px #0452C6;
-    border-radius: 10px;
-    width: 100%;
+  margin: 10px;
+  box-shadow: 0px 0px 13px 0px #0452c6;
+  border-radius: 10px;
+  width: 100%;
   height: 740px;
 }
 iframe {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/digitalMarketTech/AIGCLargeModel/index.vue b/src/views/digitalMarketTech/AIGCLargeModel/index.vue
index d490ac4..0f23533 100644
--- a/src/views/digitalMarketTech/AIGCLargeModel/index.vue
+++ b/src/views/digitalMarketTech/AIGCLargeModel/index.vue
@@ -1,17 +1,20 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-20 18:09:46
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 09:13:12
+ * @FilePath: \vue3\src\views\digitalMarketTech\AIGCLargeModel\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="app-top">
     <el-button v-for="(item, index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{ item.text }}</el-button>
   </div>
-  <component :is="page"></component>
+  <component v-if="page" :is="page"></component>
 </template>
 <script setup>
-import AIVenison from "./components/AIVenisonDiagram.vue";
-import AIWriting from "./components/AIWriting.vue";
-import AIPicture from "./components/AIPicture.vue"
-import AIVideo from "./components/AIVideo.vue"
-import AIGC from "./components/thirdPartyAIGC.vue";
-const pageData = [AIVenison, AIWriting, null, AIPicture, AIVideo, AIGC];
-const page = ref(AIVenison);
+const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
+const page = ref(pageData[0]);
 const clickIndx = (index) => {
   page.value = pageData[index];
 };
@@ -24,10 +27,6 @@ const imgData = [
     text: "AI写作",
     img: "wz",
   },
-  {
-    text: "AI标题",
-    img: "bt",
-  },
   {
     text: "AI修图",
     img: "xt",
@@ -36,6 +35,10 @@ const imgData = [
     text: "AI视频",
     img: "sp",
   },
+  {
+    text: "第三方AIGC大模型",
+    img: "dmx",
+  },
 ];
 </script>
 
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
index ef09d2e..59729b5 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
@@ -1,9 +1,9 @@
 <template>
- <div class="app-container">
+ <div class="app-container2">
   <div class="img-centent">
     <div class="left" style=" width: 100%" >
       
-      <el-scrollbar height="650px" style="height:96%">
+      <el-scrollbar height="610px" style="height:94%">
         <el-row>
             <el-col :span="24">
               <div class="title-back">
@@ -108,9 +108,9 @@
           </div>
         </div>
       </el-scrollbar>
-      <div class="dialog-footer">
-           <el-button type="primary" round  plain  size="large"  @click="submitTask" >提交任务</el-button>
-            <el-button type="primary" round plain size="large" @click="reset">重新开始</el-button> 
+      <div class="dialog-footer" style="margin-top:10px">
+           <el-button type="primary" class="tj"  plain  size="large"  @click="submitTask" >提交任务</el-button>
+            <el-button type="primary" class="cxks" plain size="large" @click="reset">重新开始</el-button> 
       </div>
   </div>
     <div class="Case">
@@ -365,8 +365,8 @@ dialogShowbtn()
   // }
   .Case {
     position: absolute;
-    top: 150px;
-    right: 15px;
+    top: 180px;
+    right: 40px;
     width: 216px;
     padding-left: 60px;
     span{
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
index 10deb99..95d6360 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
@@ -1,13 +1,13 @@
 <template>
- <div class="app-container">
+ <div class="app-container2">
   <div class="Naturallanguageprocessing">
    <div class="left">
    
-    <el-scrollbar height="650px" style="height: 93%;">
+    <el-scrollbar height="620px" style="height: 93%;">
       <el-row>
     <el-col :span="24">
       <div class="TaskBackground">
-         <span>任务背景</span>
+         <span style="color:#000000;">任务背景</span>
       </div>
     </el-col>
     </el-row>
@@ -169,8 +169,8 @@
   </div>
 </el-scrollbar>
   <div class="dialog-footer">
-        <el-button @click="submit">提交任务</el-button>
-        <el-button type="primary" @click="restart">重新开始</el-button>
+        <el-button @click="submit" class="tj">提交任务</el-button>
+        <el-button type="primary" class="tj" @click="restart">重新开始</el-button>
       </div>
      </div>
    <div class="right">
@@ -526,8 +526,8 @@ onBeforeUnmount(()=>{
   }
   .right {
     position: absolute;
-    top: 150px;
-    right: 15px;
+    top: 180px;
+    right: 41px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -670,4 +670,7 @@ onBeforeUnmount(()=>{
 .dialog-footer{
   margin-top: 5px;
 }
+.tj{
+  --el-button-hover-text-color:#000000;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
index 0286744..9ad1610 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
@@ -1,10 +1,10 @@
 <template>
- <div class="app-container">
+ <div class="app-container2">
   <div class="Robot-learning">
    <div class="left">
     <div class="gdialog">
   
-    <el-scrollbar height="650px" style="height: 93%;">
+    <el-scrollbar height="620px" style="height: 93%;">
       <el-row>
     <el-col :span="24">
       <div class="TaskBackground">
@@ -163,8 +163,8 @@
     </p>
     </el-scrollbar>
       <div class="dialog-footer" style="margin-top: 7px;">
-        <el-button @click="submit">提交任务</el-button>
-        <el-button type="primary" @click="restart">重新开始</el-button>
+        <el-button class="tj" @click="submit">提交任务</el-button>
+        <el-button class="tj" type="primary" @click="restart">重新开始</el-button>
       </div>
 
   </div>
@@ -632,8 +632,8 @@ onBeforeUnmount(() => {
   }
   .right {
     position: absolute;
-    top: 150px;
-    right: 15px;
+    top: 180px;
+    right: 41px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -875,4 +875,7 @@ onBeforeUnmount(() => {
     }
 }
 }
+.tj{
+  --el-button-hover-text-color:#000000;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue b/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
index 7796900..62ab1a1 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container">
+  <div class="app-container2">
     <div class="text-centent">
     <div class="left">
      
-      <el-scrollbar height="650px" style="height:96%">
+      <el-scrollbar height="625px" style="height:94%">
         <el-row>
       <el-col :span="24">
         <div class="title-back">
@@ -57,9 +57,9 @@
       </div>
     </div>
       </el-scrollbar>
-      <div class="dialog-footer">
-            <el-button  type="primary" round  plain  size="large"  @click="submit">提交任务</el-button>
-            <el-button  type="primary" round plain size="large" @click='reStart'>重新开始</el-button> 
+      <div class="dialog-footer" style="margin-top:5px">
+            <el-button  type="primary" class="tj"  size="large"  @click="submit">提交任务</el-button>
+            <el-button  type="primary" size="large" @click='reStart'>重新开始</el-button> 
       </div>
     </div>
     <div class="right">
@@ -273,8 +273,8 @@ CharacterRecognitionCase()
   }
   .right {
     position: absolute;
-    right: 15px;
-    top: 150px;
+    right: 30px;
+    top: 180px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -344,12 +344,12 @@ div {
     background: url("@/assets/images/szjj/提交任务.png") no-repeat !important;
     background-size: 100% 100%;
   }
-  .el-button--primary:nth-child(2) {
-    width: 140px !important;
-    padding-left: 60px;
-    background: url("@/assets/images/szjj/重新开始.png") no-repeat !important;
-    background-size:cover;
-  }
+  // .el-button--primary:nth-child(2) {
+  //   width: 140px !important;
+  //   padding-left: 60px;
+  //   background: url("@/assets/images/szjj/重新开始.png") no-repeat !important;
+  //   background-size:cover;
+  // }
   .Identify {
     margin-top: 20px;
     width: calc(100% - 20%);
@@ -387,4 +387,7 @@ div {
   //   // margin-left: 20px;
   // }
 }
+.tj{
+  --el-button-hover-text-color:#000000;
+}
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue b/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
index eba161e..37686ea 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container">
+  <div class="app-container2">
     <div class="Face-recognition">
  <div class="left">
   
-  <el-scrollbar height="650px" style="height:96%">
+  <el-scrollbar height="620px" style="height:94%">
     <el-row>
       <el-col :span="24">
         <div class="title-back">
@@ -81,8 +81,8 @@
     </div>
   </el-scrollbar>
   <div class="dialog-footer">
-        <el-button type="primary" round  plain  size="large"  @click="submit">提交任务</el-button>
-        <el-button type="primary" round  plain  size="large"  @click="restart">重新开始</el-button>
+        <el-button type="primary" class="tj" plain  size="large"  @click="submit">提交任务</el-button>
+        <el-button type="primary" class="tj" plain  size="large"  @click="restart">重新开始</el-button>
   </div>
  </div>
  <div class="right">
@@ -435,8 +435,8 @@ getList()
   }
   .right {
     position: absolute;
-    top: 150px;
-    right: 15px;
+    top: 180px;
+    right: 40px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -642,5 +642,8 @@ getList()
     justify-content: center;
     margin-top: 32px;
 }
+.tj{
+  --el-button-hover-text-color:#000000;
+}
 </style>
  
\ No newline at end of file
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue b/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
index 736d653..7e3d00b 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="app-container">
+  <div class="app-container2">
     <div class="voice-technology">
     <div class="left">
-      <el-scrollbar height="650px" style="height: 93%;">
+      <el-scrollbar height="620px" style="height: 93%;">
         <el-row>
           <el-col :span="24">
             <div class="TaskBackground">
-              <span>任务背景</span>
+              <span style="color: #000000;">任务背景</span>
             </div>
           </el-col>
         </el-row>
@@ -300,9 +300,9 @@
         </p>
       </div>
       </el-scrollbar>
-      <div class="dialog-footer">
-          <el-button @click="submit">提交任务</el-button>
-          <el-button type="primary" @click="reStart">重新开始</el-button>
+      <div class="dialog-footer" style="margin-top:10px">
+          <el-button class="tj" @click="submit">提交任务</el-button>
+          <el-button class="tj" type="primary" @click="reStart">重新开始</el-button>
       </div>
     </div>
     <div class="right">
@@ -860,8 +860,8 @@ onMounted(()=>{
   }
   .right {
     position: absolute;
-    right: 15px;
-    top:150px;
+    right: 42px;
+    top: 180px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -1065,4 +1065,7 @@ canvas,
   color: #FFFFFF;
 }
 }
+.tj{
+  --el-button-hover-text-color:#000000;
+}
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/index.vue b/src/views/digitalMarketTech/artificialIntelligence/index.vue
index 4fa3ac2..ac91ef4 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/index.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/index.vue
@@ -1,19 +1,27 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 11:17:00
+ * @FilePath: \vue3\src\views\digitalMarketTech\artificialIntelligence\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-    <div class="app-top">
-       <el-button v-for="(item,index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{item.text}}</el-button>
+   <div class="app-top">
+      <el-button v-for="(item,index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{item.text}}</el-button>
    </div>
- <component :is="page"></component>
+ <component v-if="page" :is="page"></component>
 </template>
-
 <script setup>
-import face from './components/face-recognition.vue'
-import article from './components/article-identification.vue'
-import recognition from './components/Image-recognition.vue'
-import voice from './components/voice-technology.vue'
-import Naturall from './components/Naturallanguageprocessing.vue'
-import Robot from './components/Robot-learning.vue'
-const pageData=[recognition,article,face,voice,Naturall,Robot]
-const page=ref(recognition)
+const pageData = [
+  defineAsyncComponent(() => import('./components/Image-recognition.vue')),
+  defineAsyncComponent(() => import('./components/article-identification.vue')),
+  defineAsyncComponent(() => import('./components/face-recognition.vue')),
+  defineAsyncComponent(() => import('./components/voice-technology.vue')),
+  defineAsyncComponent(() => import('./components/Naturallanguageprocessing.vue')),
+  defineAsyncComponent(() => import('./components/Robot-learning.vue')),
+];
+const page=ref(pageData[0])
 const clickIndx=(index)=>{
    page.value=pageData[index]
 }
diff --git a/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue b/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
index 1298a67..6c03e62 100644
--- a/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
+++ b/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="HadoophDFS">
     <div class="left">
-      <el-scrollbar height="660px" style="height:96%">
+      <el-scrollbar height="610px" style="height:96%">
         <p>
           本案例通过搭建服务器集群，安装Hadoop组件，实训演练Hadoop的核心组件HDFS分布式文件系统的读、写流程和原理
         </p>
@@ -2143,6 +2143,7 @@ p {
     }
     .cxks{
         background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+        --el-button-hover-text-color:#000000;
     }
     .el-dialog__body {
     padding: 20px 20px;
@@ -2162,10 +2163,11 @@ p {
         border-color:none;
     }
     .tj{
-        color: #FFFFFF;
+        color: #000000;
     }
     .cxks{
         background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+        --el-button-hover-text-color:#000000;
     }
   }
   .clientAbs{
diff --git a/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue b/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
index 342a318..97f7977 100644
--- a/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
+++ b/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container">
-    <el-scrollbar height="650px">
+  <div class="app-container2">
+    <!-- <el-scrollbar height="650px"> -->
     <div style="width:100%">
       <div class="digital_main">
-      <el-scrollbar height="680px">
+      <el-scrollbar height="610px">
         <div class="left_main">
           <p style="font-weight: bold; font-size: 15px">
             本任务以案例数据形式，介绍Apriori算法下的实现步骤，假设有四名客户（1、2、3、4），购买了编号为A、B、C、D、E若干
@@ -347,16 +347,16 @@
           </div>
         </div>
       </el-scrollbar>
-      <div class="dialog-footer">
+      <div class="dialog-footer" style="margin-top:10px">
         <el-button @click="sendTask" class="tj">提交任务</el-button>
-        <el-button type="primary" @click="dialogVisible = false" class="cxks">
-          关闭
+        <el-button @click="startOver" class="cxks">
+          重新开始
         </el-button>
       </div>
     </div>
     <span class="imgSpan" @click="dialogVisible=true"></span>
     </div>
-  </el-scrollbar>
+  <!-- </el-scrollbar> -->
   </div>
 
 
@@ -1220,8 +1220,8 @@ onBeforeUnmount(() => {
 }
 .imgSpan {
   position: absolute;
-  top: 28px;
-  right: 30px;
+  top: 180px;
+    right: 90px;
   width: 110px;
   height: 143px;
   background: url("@/assets/images/szjj/案例任务.png") no-repeat;
@@ -1518,6 +1518,7 @@ onBeforeUnmount(() => {
     }
     .cxks{
         background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+        --el-button-hover-text-color:#000000;
     }
 }
 // .el-dialog:not(.is-fullscreen) {
diff --git a/src/views/digitalMarketTech/bigData/components/hadoop.vue b/src/views/digitalMarketTech/bigData/components/hadoop.vue
index cb376f7..aae98ec 100644
--- a/src/views/digitalMarketTech/bigData/components/hadoop.vue
+++ b/src/views/digitalMarketTech/bigData/components/hadoop.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <div class="app-container2">
     <div class="Hadoop">
     <div class="left">
-    <el-scrollbar height="650px" style="height:96%">
+    <el-scrollbar height="625px" style="height:93%">
       <p>以下是Hadoop的技术框架图，请选择相应的组件填入其中：</p>
       <div class="Module">
         <div class="title">
@@ -952,10 +952,11 @@ echoHaop()
         border-color:none;
     }
     .tj{
-        color: #FFFFFF;
+        color: #000000;
     }
     .cxks{
         background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+        --el-button-hover-text-color:#000000;
     }
   }
 </style>
diff --git a/src/views/digitalMarketTech/bigData/components/technologyFramework.vue b/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
index a896bd0..f589632 100644
--- a/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
+++ b/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-container">
+    <div class="app-container2">
         <div class="frame">
      <div class="left">
-       <el-scrollbar height="650px" style="height:96%">
+       <el-scrollbar height="620px" style="height:92%">
        <div style="width: calc(100% - 216px);">
          <p class="test">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
        <div class="topic" v-for="(item, index) in data" :key="item">
@@ -21,7 +21,7 @@
        </div>
        </div>
        </el-scrollbar>
-         <div class="dialog-footer">
+         <div class="dialog-footer" style="margin-top: 10px;">
            <el-button @click="sendTitle()" class="tj">提交任务</el-button>
            <el-button type="primary" @click="startOver" class="cxks">
                重新开始
@@ -268,8 +268,8 @@ import { getUserInfo } from '@/utils/auth'
      }
      .right{
        position: absolute;
-       top: 145px;
-       right: 20px;
+       top: 180px;
+       right: 30px;
        width: 216px;
        padding-left: 60px;
        span {
@@ -333,13 +333,25 @@ import { getUserInfo } from '@/utils/auth'
            border:none;
            border-color:none;
        }
-       .tj{
-           color: #FFFFFF;
-       }
-       .cxks{
-           background: url('@/assets/images/szjj/重新开始.png') no-repeat;
-       }
      }
+     .tj{
+          width: 136px;
+          height: 40px;
+          color: #000000 !important;
+          // background: url('@/assets/images/szjj/提交任务.png') !important;
+          --el-button-border-color: #ffffff00;
+            --el-button-hover-border-color: #ffffff00;
+            --el-button-active-border-color: #ffffff00;
+      }
+      .cxks{
+          width: 136px;
+          height: 40px;
+          // background: url('@/assets/images/szjj/重新开始.png') !important;
+          color: #000000 !important;
+          --el-button-border-color: #ffffff00;
+            --el-button-hover-border-color: #ffffff00;
+            --el-button-active-border-color: #ffffff00;
+      }
    .tsRight{
      color: green;
      position: absolute;
diff --git a/src/views/digitalMarketTech/bigData/components/whatBigData.vue b/src/views/digitalMarketTech/bigData/components/whatBigData.vue
index a1211a6..7a1b151 100644
--- a/src/views/digitalMarketTech/bigData/components/whatBigData.vue
+++ b/src/views/digitalMarketTech/bigData/components/whatBigData.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-container">
+    <div class="app-container2">
         <div class="Whatbigdata">
       <div class="left">
-        <el-scrollbar height="650px">
+        <el-scrollbar height="620px">
        <p class="test">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
       <div class="eval_main" v-for="(item, index) in mlist" :key="index" :class="['eval_main' + index]" >
           <div class="eval_main_title">
@@ -39,7 +39,7 @@
           </div>
       </div>
         </el-scrollbar>
-      <div class="dialog-footer">
+      <div class="dialog-footer" style="margin-top:5px">
           <el-button @click="taskAnswer" class="tj">提交任务</el-button>
           <el-button type="primary" @click="answerAgain" class="cxks">
             重新开始
@@ -97,7 +97,7 @@ import { getUserInfo } from '@/utils/auth'
     try{
       const newArray = [];
       const sendData={
-        module:'人工智能',
+        module:'什么是大数据',
         userId:JSON.parse(getUserInfo()).userId
       }
       const res = await getTopic(sendData);
@@ -522,7 +522,7 @@ import { getUserInfo } from '@/utils/auth'
     .tj{
           width: 136px;
           height: 40px;
-          color: #FFFFFF;
+          color: #000000 !important;
           background: url('@/assets/images/szjj/提交任务.png');
           --el-button-border-color: #ffffff00;
             --el-button-hover-border-color: #ffffff00;
@@ -532,6 +532,7 @@ import { getUserInfo } from '@/utils/auth'
           width: 136px;
           height: 40px;
           background: url('@/assets/images/szjj/重新开始.png') no-repeat;
+          color: #000000 !important;
           --el-button-border-color: #ffffff00;
             --el-button-hover-border-color: #ffffff00;
             --el-button-active-border-color: #ffffff00;
diff --git a/src/views/digitalMarketTech/bigData/index.vue b/src/views/digitalMarketTech/bigData/index.vue
index 53ff358..2ac3b5c 100644
--- a/src/views/digitalMarketTech/bigData/index.vue
+++ b/src/views/digitalMarketTech/bigData/index.vue
@@ -1,76 +1,82 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:18:12
+ * @FilePath: \vue3\src\views\digitalMarketTech\bigData\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-    <div class="app-top">
-       <el-button v-for="(item,index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{item.text}}</el-button>
-   </div>
- <component :is="page"></component>
+  <div class="app-top">
+    <el-button v-for="(item, index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{ item.text }}</el-button>
+  </div>
+  <component v-if="page" :is="page"></component>
 </template>
 
 <script setup>
-import AIVenison from './components/whatBigData.vue'
-import technology from './components/technologyFramework.vue'
-import hadoop from './components/hadoop.vue'
-import HDFS from './components/HadoopHDFS.vue'
-import Marketing from './components/digitalMarketing.vue'
-const pageData=[AIVenison,technology,hadoop,HDFS,Marketing]
-const page=ref(AIVenison)
-const clickIndx=(index)=>{
-   page.value=pageData[index]
-}
-const imgData=[
-   {
-       text:'什么是大数据',
-       img:'wst'
-   },{
-       text:'大数据技术框架',
-       img:'wz'
-   },{
-       text:'HADOOP',
-       img:'bt'
-   },{
-       text:'HDFS',
-       img:'xt'
-   },{
-       text:'Apriori关联算法',
-       img:'sp'
-   }
-]
+const pageData = [defineAsyncComponent(() => import("./components/whatBigData.vue")), defineAsyncComponent(() => import("./components/technologyFramework.vue")), defineAsyncComponent(() => import("./components/hadoop.vue")), defineAsyncComponent(() => import("./components/HadoopHDFS.vue")), defineAsyncComponent(() => import("./components/digitalMarketing.vue"))];
+const page = ref(pageData[0]);
+const clickIndx = (index) => {
+  page.value = pageData[index];
+};
+const imgData = [
+  {
+    text: "什么是大数据",
+    img: "wst",
+  },
+  {
+    text: "大数据技术框架",
+    img: "wz",
+  },
+  {
+    text: "HADOOP",
+    img: "bt",
+  },
+  {
+    text: "HDFS",
+    img: "xt",
+  },
+  {
+    text: "Apriori关联算法",
+    img: "sp",
+  },
+];
 </script>
 
 <style lang="scss" scoped>
-.content{
-   color: #fff;
+.content {
+  color: #fff;
 }
-.app-top{
-   background: #041C49;
-   padding: 10px;
-   margin: 10px 10px -9px;
+.app-top {
+  background: #041c49;
+  padding: 10px;
+  margin: 10px 10px -9px;
 }
-.el-button{
-   width: 150px;
-   height: 36px;
-   color: #FFFFFF;
-   border-color:#FFFFFF00
+.el-button {
+  width: 150px;
+  height: 36px;
+  color: #ffffff;
+  border-color: #ffffff00;
 }
-.wst{
-   background: url('@/assets/images/1.png');
+.wst {
+  background: url("@/assets/images/1.png");
 }
-.wz{
-   background: url('@/assets/images/2.png');
+.wz {
+  background: url("@/assets/images/2.png");
 }
-.bt{
-   background: url('@/assets/images/3.png');
+.bt {
+  background: url("@/assets/images/3.png");
 }
-.xt{
-   background: url('@/assets/images/4.png');
+.xt {
+  background: url("@/assets/images/4.png");
 }
-.sp{
-   background: url('@/assets/images/5.png');
+.sp {
+  background: url("@/assets/images/5.png");
 }
-.dmx{
-   background: url('@/assets/images/6.png');
+.dmx {
+  background: url("@/assets/images/6.png");
 }
-.el-button{
-   padding:8px 0px 8px 32px
+.el-button {
+  padding: 8px 0px 8px 32px;
 }
 </style>
-
diff --git a/src/views/digitalMarketTech/index.vue b/src/views/digitalMarketTech/index.vue
index db43208..48c0a04 100644
--- a/src/views/digitalMarketTech/index.vue
+++ b/src/views/digitalMarketTech/index.vue
@@ -1,57 +1,62 @@
 <!--
  * @Author: qinzhenpen qzp1807@126.com
- * @Date: 2024-08-12 09:29:39
+ * @Date: 2024-08-20 17:50:08
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-16 17:36:43
+ * @LastEditTime: 2024-08-21 10:30:04
  * @FilePath: \vue3\src\views\digitalMarketTech\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="rgzn_top  app-container">
+  <div class="rgzn_top app-container2">
     <div class="top_item">
-      <el-button :class="{'active':isActive===1}" @click="activeIndex(1)"><img src="@/assets/images/大数据.png">大数据</el-button>
-      <el-button :class="{'active':isActive===2}" @click="activeIndex(2)"><img src="@/assets/images/人工智能.png">人工智能</el-button>
-      <el-button :class="{'active':isActive===3}" @click="activeIndex(3)"><img src="@/assets/images/aigc.png">AIGC大模型</el-button>
+      <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">
+        <img src="@/assets/images/大数据.png" />
+        大数据
+      </el-button>
+      <el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">
+        <img src="@/assets/images/人工智能.png" />
+        人工智能
+      </el-button>
+      <el-button :class="{ active: isActive === 3 }" @click="activeIndex(3)">
+        <img src="@/assets/images/aigc.png" />
+        AIGC大模型
+      </el-button>
     </div>
     <div>
-      <component :is="component"></component>
+      <component v-if="component" :is="component"></component>
     </div>
   </div>
 </template>
-
 <script setup>
-import AIGC from './AIGCLargeModel/index.vue'
-import big from './bigData/index.vue'
-import artificial from './artificialIntelligence/index.vue'
-const component=ref(big)
-const pageData=[big,artificial,AIGC]
-const isActive=ref(1)
-const activeIndex=(index)=>{
-  isActive.value=index
-  component.value=pageData[index-1]
-}
+const pageData = [defineAsyncComponent(() => import("./bigData/index.vue")), defineAsyncComponent(() => import("./artificialIntelligence/index.vue")), defineAsyncComponent(() => import("./AIGCLargeModel/index.vue"))];
+const component = ref(pageData[0]);
+
+const isActive = ref(1);
+const activeIndex = (index) => {
+  isActive.value = index;
+  component.value = pageData[index - 1];
+};
 </script>
 
 <style lang="scss" scoped>
-.content{
-    color: #fff;
+.content {
+  color: #fff;
 }
-.rgzn_top{
-  .top_item{
-    img{
+.rgzn_top {
+  .top_item {
+    img {
       margin-right: 5px;
     }
-    .el-button{
+    .el-button {
       width: 180px;
       height: 50px;
-      background: url('../../assets/images/常（钮）.png');
-      color:#FFFFFF;
-      border-color:#FFFFFF00;
+      background: url("../../assets/images/常（钮）.png");
+      color: #ffffff;
+      border-color: #ffffff00;
     }
-    .active{
-      background: url('../../assets/images/亮（钮）.png');
+    .active {
+      background: url("../../assets/images/亮（钮）.png");
     }
   }
 }
 </style>
-
diff --git a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
index 6f489d8..a89a7ed 100644
--- a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
+++ b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
@@ -1,374 +1,618 @@
 <template>
   <el-scrollbar ref="scrollbar" height="800px">
     <div class="main-top">
-        <span style="font-weight: bold;font-size: 18px;color: #3596EB;">任务描述</span>
-        <p style="font-weight: 400;font-size: 12px;color: #E6E6E6;">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+      <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
+      <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
     </div>
     <div class="main-but">
-        <el-upload
-         ref="uploadRef"
-         class="upload-demo"
-         :file-list="fileList"
-         :auto-upload="false"
-         :on-change="handleChange"
-         :show-file-list="false"
-         multiple="multiple"
-       >
-         <template #trigger>
-          <el-button><img src="../../../assets/images/导入.png" alt="">算法知识导入</el-button>
-         </template>
-         <!-- <div class="reportPromptFile" v-html="item[`${index}`].path"></div> -->
-       </el-upload>
-        <el-button  @click="taskSubmit"><img src="../../../assets/images/提交.png" alt="">实训任务提交</el-button>
+      <el-button @click="runResultShow = true">
+        <img src="../../../assets/images/导入.png" alt="" />
+        算法知识导入
+      </el-button>
+      <el-button @click="taskSubmit">
+        <img src="../../../assets/images/提交.png" alt="" />
+        实训任务提交
+      </el-button>
     </div>
     <div class="app-main">
       <div class="main-left">
         <div>
-            <div class="left-top">
-          <span>一、选择指标</span>
-        </div>
-        <div class="metrics">
+          <div class="left-top">
+            <span>一、选择指标</span>
+          </div>
+          <div class="metrics">
             <el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
-                <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                />
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-        </div>
-        <div class="metrics-table" style="margin-top: 10px">
-            <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange" >
-                <el-table-column type="selection" label="Date" align="center"  :selectable="flag"/>
-                <el-table-column prop="text" label="指标"  align="center"/>
+          </div>
+          <div class="metrics-table" style="margin-top: 10px">
+            <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" label="Date" align="center" :selectable="flag" />
+              <el-table-column prop="text" label="指标" align="center" />
             </el-table>
             <el-button @click="taskZB">确定</el-button>
-        </div>
-        <div class="left-top" style="margin-top:50px">
-          <span>二、数据预处理</span>
-        </div>
-        <div class="metrics">
+          </div>
+          <div class="left-top" style="margin-top: 50px">
+            <span>二、数据预处理</span>
+          </div>
+          <div class="metrics">
             <el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
-                <el-option
-                    v-for="item in options2"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                />
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-        </div>
-        <div class="metrics" style="margin-top:15px">
+          </div>
+          <div class="metrics" style="margin-top: 15px">
             <el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
-                <el-option
-                    v-for="item in options3"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                />
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-        </div>
-        <div class="left-top" style="margin-top: 50px">
-          <span>三、模型参数设置</span>
-        </div>
-        <div class="metrics-table" style="margin-top: 10px">
-            <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-              聚类方法：
-            </span>
-            <div class="metrics" style="margin-top:10px">
-                  <el-select v-model="input4" placeholder="请选择" style="width: 180px">
-                      <el-option
-                          v-for="item in options4"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                      />
-                  </el-select>
-              </div>
-              <div style="margin-top:10px;color:#FFFFFF">
-                  <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                    最小支持度阀值：
-                  </span>
-                  <el-input v-model="input5" style="width: 160px;margin-top:5px"/>%
-              </div>
-              <div style="margin-top:10px;color:#FFFFFF">
-                  <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                    最小置信度:
-                  </span>
-                  <el-input v-model="input6" style="width: 160px;margin-top:5px"/>%
-              </div>
+          </div>
+          <div class="left-top" style="margin-top: 50px">
+            <span>三、模型参数设置</span>
+          </div>
+          <div class="metrics-table" style="margin-top: 10px">
+            <span style="font-weight: 400; font-size: 12px; color: #ffffff">聚类方法：</span>
+            <div class="metrics" style="margin-top: 10px">
+              <el-select v-model="input4" placeholder="请选择" style="width: 180px">
+                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div style="margin-top: 10px; color: #ffffff">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">最小支持度阀值：</span>
+              <el-input v-model="input5" style="width: 160px; margin-top: 5px" />
+              %
+            </div>
+            <div style="margin-top: 10px; color: #ffffff">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">最小置信度:</span>
+              <el-input v-model="input6" style="width: 160px; margin-top: 5px" />
+              %
+            </div>
             <el-button @click="computation">计算</el-button>
+          </div>
         </div>
-        </div>
-<div style="margin-top: auto;">
-    <div class="startOver" @click="startOver()">
-            <img src="../../../assets/images/重新开始.png" alt="">
+        <div style="margin-top: auto">
+          <div class="startOver" @click="startOver()">
+            <img src="../../../assets/images/重新开始.png" alt="" />
             <span>重新开始</span>
+          </div>
         </div>
-</div>
-       
       </div>
       <div class="main-right">
         <div>
-            <span style="font-weight: bold;font-size: 18px;color: #3596EB;">分析数据：</span>
-            <el-table :data="tableData2"  style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-            </el-table>
-            <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <el-table :data="tableData2" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+          </el-table>
+          <!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
         </div>
         <div class="analysisResults" style="margin-top: 20px">
-            <span style="font-weight: bold;font-size: 18px;color: #3596EB;display: block;">分析结果：</span>
-            <el-button>下载</el-button>
-            <el-table :data="tableData3" row-key="TSuid" style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                <el-table-column v-for="column in tableLabel2" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-            </el-table>
-            <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
+          <el-button v-if="uplodFlag" @click="upload">下载</el-button>
+          <el-table ref="exportTableRef" :data="tableData3" row-key="TSuid" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel2" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+          </el-table>
+          <!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
         </div>
       </div>
     </div>
   </el-scrollbar>
 
-  <el-dialog
-    v-model="dialogVisible"
-    title="实训任务提交"
-    width="600"
-    custom-class="dialogClass"
-    :show-close="false"
-  >
-  <template #header="{ close, titleId, titleClass }">
+  <el-dialog v-model="dialogVisible" title="实训任务提交" width="600" custom-class="dialogClass" :show-close="false">
+    <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <span :id="titleId" :class="titleClass">实训任务提交</span>
-       <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="">
+        <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
       </div>
-      <img class="xtImg" src="../../../assets/images/线条.png" alt="">
+      <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
     </template>
     <div class="from-item">
-        <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
-            <el-form-item label="聚类个数：">
-                <el-input style="width: 120px;" v-model="formInline.user" clearable />
-            </el-form-item>
-            <el-form-item label="最大迭代次数：">
-                <el-input style="width: 120px;" v-model="formInline.user" clearable />
-            </el-form-item>
-          </el-form>
-            <span style="color:#FFFFFF;font-weight: 700;">各簇类特征描述：</span>
-          <el-form :inline="true" label-position="right" style="margin:15px 0" label-width="115px" :model="form" class="demo-form-inline">
-            <el-form-item label="簇类1:">
-                <el-input style="width: 240px;" v-model="formInline.user" clearable />
-            </el-form-item>
-            <el-form-item label="簇类2:">
-                <el-input style="width: 240px;" v-model="formInline.user" clearable />
-            </el-form-item>
-            <el-form-item label="簇类3:">
-                <el-input style="width: 240px;" v-model="formInline.user" clearable />
-            </el-form-item>
-            <el-form-item label="簇类4:">
-                <el-input style="width: 240px;" v-model="formInline.user" clearable />
-            </el-form-item>
-            </el-form>
+      <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="聚类个数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="最大迭代次数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
+      <span style="color: #ffffff; font-weight: 700">各簇类特征描述：</span>
+      <el-form :inline="true" label-position="right" style="margin: 15px 0" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="簇类1:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类2:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类3:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类4:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
     </div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="dialogVisible = false">确定</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
-          返回
-        </el-button>
+        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
       </div>
     </template>
   </el-dialog>
+
+  <pop-model :showModel="runResultShow" title="关联规则挖掘" @closePop="runResultShow = false">
+    <template v-slot:content>
+      <div>
+        <p style="font-weight: 700; font-size: 22px">一、简介</p>
+        <p>Apriori算法是一种用于挖掘数据集中频繁项集的算法，进而用于生成关联规则。这种算法在数据挖掘、机器学习、市场篮子分析等多个领域都有广泛的应用。</p>
+        <p style="font-size: 19px; font-weight: 600">什么是关联规则挖掘？</p>
+        <p>
+          关联规则挖掘是数据挖掘中的一个重要分支，其目标是发现在一个数据集中变量间存在的有趣的关联或模式。
+          <br />
+          例子： 假设在一个零售商的交易数据中，如果客户购买了啤酒，他们也很有可能购买薯片。这里的“啤酒”和“薯片”就形成了一个关联规则。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">什么是频繁项集？</p>
+        <p>
+          频繁项集是在数据集中出现次数大于或等于最小支持度（Minimum Support Threshold）的项的集合。
+          <br />
+          例子： 在超市购物数据中，如果“牛奶”和“面包”这一组合经常一起出现在同一个购物篮里，并且出现的次数超过了最小支持度，那么{"牛奶", "面包"}就是一个频繁项集。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">什么是支持度与置信度？</p>
+        <li>
+          支持度（Support）: 是某个项集在所有交易中出现的频率。它用于衡量一个项集的普遍性。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例子： 如果我们有100笔交易，其中有30笔交易包含了“牛奶”，那么“牛奶”的支持度就是30%。
+        </li>
+        <li>
+          置信度（Confidence）: 是在A出现的情况下，B出现的条件概率。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例子： 如果在包含“牛奶”的所有交易中，有70%的交易也包含了“面包”，那么从“牛奶”到“面包”的置信度就是70%。
+        </li>
+        <p style="font-size: 19px; font-weight: 600">Apriori算法的重要性</p>
+        <p>
+          Apriori算法由于其简单、高效的特性，在数据挖掘中有着广泛的应用。它不仅能用于挖掘数据中的隐藏模式，还能用于诸如产品推荐、用户行为分析、网络安全等多个应用场景。
+          <br />
+          例子： 在电子商务网站中，Apriori算法可以用于分析用户购买历史数据，进而实现个性化推荐，提升销售额和用户满意度。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">应用场景</p>
+        <p>由于其广泛的用途和灵活性，Apriori算法在以下几个主要领域内有着广泛的应用：</p>
+        <li>市场篮子分析: 了解哪些产品经常被一起购买，以进行有效的产品布局或优惠策略。</li>
+        <li>医疗诊断: 分析病人的历史数据，找出病症和治疗方案之间的关联。</li>
+        <li>网络安全: 通过分析网络日志，找出异常模式，以预防或检测安全威胁。</li>
+        <p>通过这些定义和例子，我们可以更全面地了解Apriori算法的基本概念、重要性和应用范围，为后续的技术解析和实战应用打下坚实的基础。</p>
+        <p style="font-weight: 700; font-size: 22px">二、理论基础</p>
+        <p>在深入探讨Apriori算法之前，理解其背后的理论基础是非常重要的。本节将详细介绍关联规则挖掘的基础概念，包括项集、支持度、置信度、提升度以及如何使用这些概念来挖掘有用的关联规则。</p>
+        <p style="font-size: 19px; font-weight: 600">项和项集</p>
+        <li>
+          项（Item）: 在关联规则挖掘中，项通常指数据集中的一个元素。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例子： 在一个超市的购物篮数据中，"牛奶"、"面包"、"啤酒"等都是单个的项。
+        </li>
+        <li>
+          项集（Itemset）: 是一个项的集合，可以包含一个或多个项。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;例子： {"牛奶", "面包"} 和 {"啤酒", "薯片", "面包"} 都是项集。
+        </li>
+        <p style="font-size: 19px; font-weight: 600">支持度（Support）</p>
+        <p>
+          支持度是一个度量，用于表示一个项集在整个数据集中出现的频率。
+          <br />
+          !file
+        </p>
+        <p style="font-size: 19px; font-weight: 600">置信度（Confidence）</p>
+        <p>置信度表示在包含项集X的所有事务中，也包含项集Y的事务的概率。</p>
+        <img src="@/assets/images/f2001.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">提升度（Lift）</p>
+        <p>提升度用于衡量项集X和Y的出现是否相互独立。</p>
+        <img src="@/assets/images/f2002.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">Apriori原理</p>
+        <p>
+          Apriori原理是Apriori算法的核心，它基于一个简单但重要的观察：一个项集是频繁的，那么它的所有子集也必须是频繁的。
+          <br />
+          例子： 如果{"牛奶", "面包", "啤酒"}是一个频繁项集，那么{"牛奶", "面包"}、{"牛奶", "啤酒"}和{"面包", "啤酒"}也必须是频繁项集。
+          <br />
+          通过以上的概念和例子，我们应该对关联规则挖掘的基础理论有了更深入的了解。这为我们后续详解Apriori算法以及实际应用提供了坚实的基础。
+        </p>
+        <p style="font-weight: 700; font-size: 22px">三、Apriori算法概述</p>
+        <p>Apriori算法是由Agrawal和Srikant于1994年提出的，用于高效地挖掘频繁项集和生成关联规则。其名字“Apriori”来源于拉丁语，意为“从先验知识”。这很好地反映了算法的核心思想：利用已知的频繁项集（即先验知识）来更有效地找到更大的频繁项集。</p>
+        <p style="font-size: 19px; font-weight: 600">算法步骤</p>
+        <img src="@/assets/images/f2004.png" alt="" />
+        <p>
+          Apriori算法的执行流程主要包含两个步骤：
+          <br />
+          &nbsp;&nbsp;1.频繁项集生成（Frequent Itemset Generation）: 找出满足最小支持度阈值的所有频繁项集。
+          <br />
+          &nbsp;&nbsp;2.关联规则生成（Association Rule Generation）: 从频繁项集中生成高置信度的关联规则。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">频繁项集生成</p>
+        <p>
+          &nbsp;&nbsp;1.扫描数据集，找出所有单一项的支持度，并筛选出满足最小支持度的项。
+          <br />
+          &nbsp;&nbsp;2.使用满足最小支持度的项生成新的候选项集。
+          <br />
+          &nbsp;&nbsp;3.计算新生成的候选项集的支持度，并再次筛选。
+          <br />
+          &nbsp;&nbsp;4.重复上述步骤，直到不能生成新的频繁项集。
+          <br />
+          例子： 假设有一个购物交易数据集，其中包括5笔交易。第一步是计算所有单一商品（如“牛奶”，“面包”等）在这5笔交易中的出现次数，并筛选出那些出现次数达到最小支持度的商品。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">关联规则生成</p>
+        <p>
+          &nbsp;&nbsp;1.对于每一个频繁项集，生成所有可能的非空子集。
+          <br />
+          &nbsp;&nbsp;2.对每一条生成的规则 ( A \Rightarrow B )，计算其置信度。
+          <br />
+          &nbsp;&nbsp;3.如果规则的置信度满足最小置信度要求，则该规则为有效关联规则。
+        </p>
+        <p>例子： 对于频繁项集 {"牛奶", "面包", "黄油"}，可能的规则有 "牛奶, 面包 -> 黄油", "牛奶, 黄油 -> 面包" 等。计算这些规则的置信度，并筛选出满足最小置信度的规则。</p>
+        <p style="font-size: 19px; font-weight: 600">优缺点</p>
+        <p style="font-size: 19px; font-weight: 600">优点</p>
+        <li>简单易懂: Apriori算法基于直观的原理，并且计算过程简单。</li>
+        <li>可扩展性强: 算法可以应用于大规模的数据集。</li>
+        <p style="font-size: 19px; font-weight: 600">缺点</p>
+        <li>计算量大: 在大数据集上，可能需要生成大量的候选项集。</li>
+        <li>多次扫描数据: 算法需要多次扫描数据集以计算项集的支持度，这在数据集很大时可能是低效的。</li>
+        <p>
+          例子： 在一个包含百万级交易数据的电子商务网站中，使用Apriori算法可能需要消耗大量计算资源和时间。
+          <br />
+          通过以上的详细描述和例子，我们应该对Apriori算法有了全面而深入的理解。这为我们后续的技术解析和实战应用奠定了基础。
+        </p>
+        <p style="font-weight: 700; font-size: 22px">四、实战应用</p>
+        <p>
+          在理解了Apriori算法的理论基础和工作原理之后，现在我们将进一步探讨其在实际场景中的应用。特别是在购物篮分析和推荐系统中，Apriori算法被广泛应用。
+          <br />
+          为了更好地说明这一点，下面将通过Python展示如何实现Apriori算法，并用一个简单的购物数据集进行演示。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">购物篮分析</p>
+        <p>购物篮分析（Market Basket Analysis）是一种在零售业非常流行的技术，用于发现顾客购买产品之间的关联规则。</p>
+        <p style="font-size: 19px; font-weight: 600">输入和输出</p>
+        <li>输入： 一组交易数据，每一笔交易包含多个购买的商品。</li>
+        <li>输出： 满足最小支持度和最小置信度的关联规则。</li>
+        <p style="font-size: 19px; font-weight: 600">Python实现代码</p>
+        <MdPreview v-model="text" />
+        <p style="font-weight: 700; font-size: 22px">五、性能优化与扩展</p>
+        <p>Apriori算法虽然在多个领域有着广泛的应用，但其在大数据集上的性能表现并不尽如人意。这是由于它需要多次扫描数据集以及生成大量的候选项集。在这一节中，我们将讨论针对这些问题的性能优化方案和扩展方法。</p>
+        <p style="font-size: 19px; font-weight: 600">优化策略</p>
+        <p>优化Apriori算法的主要方法包括：</p>
+        <p style="font-size: 19px; font-weight: 600">减少数据扫描次数</p>
+        <p>
+          由于Apriori算法在每一轮都需要扫描整个数据集以计算支持度，因此一个直观的优化方式就是减少数据扫描的次数。
+          <br />
+          例子： 通过构建一个事务-项倒排索引，你可以在单次数据集扫描后立即找到任何项集的支持度。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">采用数据压缩技术</p>
+        <p>
+          可以通过压缩事务数据来减少计算量，例如使用位向量来表示事务。
+          <br />
+          例子： 若数据集中有100个商品，每一笔交易都可以通过一个100位的位向量来表示。这种方式可以显著减少数据的存储需求。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">使用Hashing技术</p>
+        <p>
+          通过使用哈希表来存储候选项集和它们的计数，可以加速支持度的计算。
+          <br />
+          例子： 在生成候选项集时，可以使用哈希函数来将项集映射到哈希表的一个位置，并在该位置增加相应的计数。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">扩展方法</p>
+        <p style="font-size: 19px; font-weight: 600">并行化</p>
+        <p>
+          Apriori算法可以通过数据或任务并行化进行扩展，以利用多处理器或分布式计算环境。
+          <br />
+          例子： 在一个分布式系统中，可以将数据集划分为多个子集，并在各个节点上并行计算支持度和生成频繁项集。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">支持近似挖掘</p>
+        <p>
+          对于一些应用场景，完全精确的频繁项集挖掘可能不是必需的。在这种情况下，可以使用近似算法来加速计算。
+          <br />
+          例子： 使用Monte Carlo方法或其他随机抽样技术，通过部分数据来估计整个数据集的频繁项集。
+        </p>
+        <p style="font-size: 19px; font-weight: 600">集成其他数据挖掘算法</p>
+        <p>
+          Apriori算法可以与其他数据挖掘或机器学习算法结合使用，以解决更复杂的问题。
+          <br />
+          例子： 在一个推荐系统中，除了使用Apriori算法找出频繁项集外，还可以使用聚类算法对用户进行分群，从而实现更个性化的推荐。
+          <br />
+          通过这些优化和扩展方法，我们不仅可以提升Apriori算法在大数据环境下的性能，还可以拓宽其应用范围。这些都为进一步的研究和应用提供了有益的方向。
+        </p>
+        <p style="font-weight: 700; font-size: 22px">六、总结</p>
+        <p>通过本文的探讨，我们不仅对Apriori算法有了全面且深入的了解，而且掌握了它在实际问题中的应用，特别是在购物篮分析和推荐系统方面。然而，我们也注意到了这一算法在面对大规模数据时存在的局限性。</p>
+        <li>支持度与置信度的平衡： 在实际应用中，选择合适的支持度和置信度阈值是一门艺术。过低的阈值可能会导致大量不显著的关联规则，而过高的阈值可能会漏掉一些有用的规则。</li>
+        <li>实时性问题： 在动态变化的数据集上，如何实现Apriori算法的实时或近实时分析也是一个值得关注的问题。这在电子商务等快速响应的场景中尤为重要。</li>
+        <li>多维、多层分析： 现有的Apriori算法主要集中在单一的项集层面，未来可以考虑如何将其扩展到多维或多层的关联规则挖掘。</li>
+        <li>算法与模型的集成： 未来的研究趋势可能会更多地集中在将关联规则挖掘与其他机器学习模型（如神经网络、决策树等）集成，以解决更为复杂的问题。</li>
+        <p>
+          在今后的工作中，探究这些技术洞见的相关性和应用价值，以及将Apriori算法与现代计算架构（如GPU、分布式计算等）更紧密地结合，将是关键的研究方向。
+          <br />
+          总之，Apriori算法在数据挖掘和关联分析领域有着广阔的应用前景。然而，为了使其能够更好地适应现代数据的规模和复杂性，还需要在算法优化和应用扩展方面进行更多的研究和探索。希望本文能为您在这一领域的学习和应用提供有用的信息和启示。
+        </p>
+      </div>
+    </template>
+  </pop-model>
 </template>
 
 <script setup>
-import * as echarts from 'echarts';
-import ecStat from 'echarts-stat';
-import * as API from '@/api/AI.js'
+import * as echarts from "echarts";
+import * as XLSX from "XLSX";
+import { MdEditor, MdPreview } from "md-editor-v3";
+import "md-editor-v3/lib/style.css";
+import * as API from "@/api/AI.js";
 import { getUserInfo } from "@/utils/auth";
-import { onMounted } from 'vue';
-const { proxy } = getCurrentInstance()
-const dialogVisible=ref(false)
-const tableLabel=reactive([
-    {prop:'date',label:''},
-])
-const tableLabel2=reactive([
-    {prop:'date',label:''},
-])
-const getList=()=>{
-  API.selectionMetrics({userId:JSON.parse(getUserInfo()).userId}).then((res)=>{
-      res.data.forEach(element => {
-          options.value.push({
-              value:element,
-              label:element
-          })
-      })
-  })
-}
-const showChart=ref(false)
-const fileList=ref([])
-const handleChange=(info)=>{
+import { onMounted, reactive } from "vue";
+import popModel from "@/views/components/popModal.vue";
+const { proxy } = getCurrentInstance();
+const dialogVisible = ref(false);
+const runResultShow = ref(false);
+const tableLabel = reactive([{ prop: "date", label: "" }]);
+const tableLabel2 = reactive([{ prop: "date", label: "" }]);
+const text = ref(`首先导入必要的库：
+\`\`\`python
+from itertools import chain, combinations
+\`\`\`
+接着定义几个辅助函数：
+\`\`\`python
+# 生成候选项集的所有非空子集
+def powerset(s):
+    return chain.from_iterable(combinations(s, r) for r in range(1, len(s)))
+# 计算支持度
+def calculate_support(itemset, transactions):
+    return sum(1 for transaction in transactions if itemset.issubset(transaction)) / len(transactions)
+\`\`\`
+现在我们来实现Apriori算法：
+\`\`\`python
+def apriori(transactions, min_support, min_confidence):
+    # 初始化频繁项集和关联规则列表
+    frequent_itemsets = []
+    association_rules = []
+    # 第一步：找出单项频繁项集
+    singletons = {frozenset([item]) for transaction in transactions for item in transaction}
+    singletons = {itemset for itemset in singletons if calculate_support(itemset, transactions) >= min_support}
+    frequent_itemsets.extend(singletons)
+    # 迭代找出所有其他频繁项集
+    prev_frequent_itemsets = singletons
+    while prev_frequent_itemsets:
+        # 生成新的候选项集
+        candidates = {itemset1 | itemset2 for itemset1 in prev_frequent_itemsets for itemset2 in prev_frequent_itemsets if len(itemset1 | itemset2) == len(itemset1) + 1}
+        # 计算支持度并筛选
+        new_frequent_itemsets = {itemset for itemset in candidates if calculate_support(itemset, transactions) >= min_support}
+        frequent_itemsets.extend(new_frequent_itemsets)
+        # 生成关联规则
+        for itemset in new_frequent_itemsets:
+            for subset in powerset(itemset):
+                subset = frozenset(subset)
+                diff = itemset - subset
+                if diff:
+                    confidence = calculate_support(itemset, transactions) / calculate_support(subset, transactions)
+                    if confidence >= min_confidence:
+                        association_rules.append((subset, diff, confidence))
+        prev_frequent_itemsets = new_frequent_itemsets
+    return frequent_itemsets, association_rules
+\`\`\`
+### 示例和输出
+假设我们有以下简单的购物数据集：
+\`\`\`python
+transactions = [
+    {'牛奶', '面包', '黄油'},
+    {'啤酒', '面包'},
+    {'牛奶', '啤酒', '黄油'},
+    {'牛奶', '鸡蛋'},
+    {'面包', '鸡蛋', '黄油'}
+]
+\`\`\`
+调用Apriori算法：
+\`\`\`python
+min_support = 0.4
+min_confidence = 0.5
+frequent_itemsets, association_rules = apriori(transactions, min_support, min_confidence)
+print("频繁项集：", frequent_itemsets)
+print("关联规则：", association_rules)
+\`\`\`
+输出可能如下：
+\`\`\`python
+频繁项集： [{'牛奶'}, {'面包'}, {'黄油'}, {'啤酒'}, {'鸡蛋'}, {'牛奶', '面包'}, {'牛奶', '黄油'}, {'面包', '黄油'}, {'啤酒', '黄油'}, {'面包', '啤酒'}]
+关联规则： [(('牛奶',), ('面包',), 0.6666666666666666), (('面包',), ('牛奶',), 0.6666666666666666), ...]
+\`\`\`
+通过这个实战应用，我们不仅学习了如何在Python中实现Apriori算法，还了解了它在购物篮分析中的具体应用。这为进一步的研究和实际应用提供了有用的指导。`);
+const getList = () => {
+  API.selectionMetrics({ userId: JSON.parse(getUserInfo()).userId }).then((res) => {
+    res.data.forEach((element) => {
+      options.value.push({
+        value: element,
+        label: element,
+      });
+    });
+  });
+};
+const showChart = ref(false);
+const fileList = ref([]);
+const handleChange = (info) => {
   fileList.value.push(info);
-}
-const flag=ref(false)
+};
+const flag = ref(false);
 
-onMounted(()=>{
-  getList()
-})
-
-const optionData=()=>{
-  API.viewingMetrics({userId:JSON.parse(getUserInfo()).userId,tableName:input.value,algorithmName:'关联规则挖掘'}).then((res)=>{
-      tableData.value=[]
-      res.data.forEach(element => {
-          tableData.value.push({
-              text:element
-          })
-      })
-  })
-}
+onMounted(() => {
+  getList();
+});
+const optionData = () => {
+  API.viewingMetrics({ userId: JSON.parse(getUserInfo()).userId, tableName: input.value, algorithmName: "关联规则挖掘" }).then((res) => {
+    tableData.value = [];
+    res.data.forEach((element) => {
+      tableData.value.push({
+        text: element,
+      });
+    });
+  });
+};
 const selectedRows = ref([]);
 const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
-  };
-const tableData2=ref([])
-const tableData3=ref([])
-const resTable2=ref()
-  const taskZB=()=>{
-      flag.value=true
-      if(selectedRows.value.length===0){
-          return
-      }
-      const sendData={
-          tableName:input.value,
-          userId:JSON.parse(getUserInfo()).userId,
-          fieldList:selectedRows.value.map(item=>item.text)
-      }
-      API.analysisDataDisplay(sendData).then((res)=>{
-          tableLabel.length=0
-              for (const key in res.data[0]) {
-                  tableLabel.push({
-                      label:key,
-                      prop:key
-                  })
-              }
-              tableData2.value=res.data
-          flag.value=true
-      })
+};
+const tableData2 = ref([]);
+const tableData3 = ref([]);
+const resTable2 = ref();
+const taskZB = () => {
+  flag.value = true;
+  if (selectedRows.value.length === 0) {
+    return proxy.$modal.msgWarning("请选择指标!");
   }
-const formInline=reactive({
-    user:'',
-    region:''
-})
-const input=ref()
-const options = ref([])
-const input2=ref()
-const options2=ref([
+  const sendData = {
+    tableName: input.value,
+    userId: JSON.parse(getUserInfo()).userId,
+    fieldList: selectedRows.value.map((item) => item.text),
+  };
+  API.analysisDataDisplay(sendData).then((res) => {
+    tableLabel.length = 0;
+    for (const key in res.data[0]) {
+      tableLabel.push({
+        label: key,
+        prop: key,
+      });
+    }
+    tableData2.value = res.data;
+    flag.value = true;
+  });
+};
+const formInline = reactive({
+  user: "",
+  region: "",
+});
+const input = ref();
+const options = ref([]);
+const input2 = ref();
+const options2 = ref([
   {
-      value:'数据区重',
-      label:'数据去重'
-  }
-])
-const input3=ref()
-const options3=ref([
+    value: "数据区重",
+    label: "数据去重",
+  },
+]);
+const input3 = ref();
+const options3 = ref([
   {
-      value:'缺失值处理--剔除数据',
-      label:'缺失值处理--剔除数据'
-  },{
-      value:'缺失值处理--均值替换',
-      label:'缺失值处理--均值替换'
+    value: "缺失值处理--剔除数据",
+    label: "缺失值处理--剔除数据",
   },
-])
-const input4=ref()
-const options4=ref([
   {
-      value:'Apriori关联算法',
-      label:'Apriori关联算法'
+    value: "缺失值处理--均值替换",
+    label: "缺失值处理--均值替换",
   },
-])
-const input5=ref()
-const input6=ref()
-const taskSubmit=()=>{
-    dialogVisible.value=true
-}
-const tableData = ref([
-  
-])
-const headerCellStyle=()=>{
-     return {
+]);
+const input4 = ref();
+const options4 = ref([
+  {
+    value: "Apriori关联算法",
+    label: "Apriori关联算法",
+  },
+]);
+const input5 = ref();
+const input6 = ref();
+const taskSubmit = () => {
+  dialogVisible.value = true;
+};
+const tableData = ref([]);
+const headerCellStyle = () => {
+  return {
     backgroundColor: "#1882DE !important", // 设置表头背景颜色
     color: "#ffffff !important",
   };
-}
-const optionData2=()=>{
-  if(input2.value&&input3.value){
-      const sendData=ref({
-          mapList:tableData2.value,
-          method:input3.value,
-          userId:JSON.parse(getUserInfo()).userId
-      })
-      API.dataPreprocessing(sendData.value).then((res)=>{
-          resTable2.value=res.data
-          tableData2.value=[]
-          tableData2.value=res.data
-          proxy.$modal.msgSuccess("预处理成功！");
-      })
+};
+const optionData2 = () => {
+  if (tableData2.value.length === 0) {
+    input2.value = "";
+    input3.value = "";
+    proxy.$modal.msgWarning("请先选择指标！");
+    return;
   }
-}
+  if (input2.value && input3.value) {
+    const sendData = ref({
+      mapList: tableData2.value,
+      method: input3.value,
+      userId: JSON.parse(getUserInfo()).userId,
+    });
+    API.dataPreprocessing(sendData.value).then((res) => {
+      resTable2.value = res.data;
+      tableData2.value = [];
+      tableData2.value = res.data;
+      proxy.$modal.msgSuccess("预处理成功！");
+    });
+  }
+};
 
 //生产表格
-const computation=()=>{
-  if(input5.value&&input6.value&&input4.value){
-      const sendData={
-        confidence:parseFloat(input5.value)/100,
-        support:parseFloat(input6.value)/100,
-          userId:JSON.parse(getUserInfo()).userId,
-          deduplicatedDataList:resTable2.value
+const exportTableRef = ref(null);
+const uplodFlag = ref(false);
+const computation = () => {
+  if (resTable2.value.length === 0 || input2.value == ""  || input3.value == "") {
+    proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
+    return;
+  }
+  if (input5.value && input6.value && input4.value) {
+    const sendData = {
+      confidence: parseFloat(input5.value) / 100,
+      support: parseFloat(input6.value) / 100,
+      userId: JSON.parse(getUserInfo()).userId,
+      deduplicatedDataList: resTable2.value,
+    };
+    API.associationRuleMining(sendData).then((res) => {
+      uplodFlag.value = true;
+      tableData3.value = [];
+      tableLabel2.length = 0;
+      for (const key in res.data[0]) {
+        tableLabel2.push({
+          label: key,
+          prop: key,
+        });
       }
-      API.associationRuleMining(sendData).then((res)=>{
-          tableData3.value=[]
-          res.data.forEach(element=>{
-            tableData3.value.push({
-              date:element
-            })
-          })
-      })
+      tableData3.value = res.data;
+    });
+  } else {
+    proxy.$modal.msgWarning("请模型参数进行设置！");
   }
-}
-const startOver=()=>{
-  input.value=''
-  tableData.value=[]
-  tableData2.value=[]
-  tableData3.value=[]
-  input2.value=''
-  input3.value=''
-  input4.value=''
-  input5.value=''
-  input6.value=''
-}
+};
+const upload = () => {
+  const tableDom = exportTableRef.value?.$el;
+  if (!tableDom) {
+    return;
+  }
+
+  const wb = XLSX.utils.table_to_book(tableDom);
+  XLSX.writeFile(wb, "关联规则挖掘.xlsx");
+};
+const startOver = () => {
+  input.value = "";
+  tableData.value = [];
+  tableData2.value = [];
+  tableData3.value = [];
+  input2.value = "";
+  input3.value = "";
+  input4.value = "";
+  input5.value = "";
+  input6.value = "";
+  tableLabel.length = 0;
+  tableLabel2.length = 0;
+  uplodFlag.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
 .main-top {
-margin: 20px 20px 0;
+  margin: 20px 20px 0;
   margin-top: 10px;
   height: 85px;
   background: #001d40;
   border: 1px solid #0452c6;
   padding: 5px 20px;
 }
-.main-but{
-    margin: 5px 20px 0;
-    display: flex;
-    .el-button:nth-child(1) {
-        width: 180px;
-        height: 56px;
-        background: url('../../../assets/images/011.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-      }
-      .el-button:nth-child(2) {
-        width: 180px;
-        height: 56px;
-        background: url('../../../assets/images/022.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-      }
+.main-but {
+  margin: 5px 20px 0;
+  display: flex;
+  .el-button:nth-child(1) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/011.png");
+    color: #ffffff;
+    border-color: #ffffff00;
+  }
+  .el-button:nth-child(2) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/022.png");
+    color: #ffffff;
+    border-color: #ffffff00;
+  }
 }
 .app-main {
   //   background-color: #f5f5f5;
@@ -383,7 +627,7 @@ margin: 20px 20px 0;
     min-height: 965px;
     display: flex;
     width: 205px;
-  //   height: 100%;
+    //   height: 100%;
     background: #041c49;
     padding: 0px 10px;
     .left-top {
@@ -394,142 +638,111 @@ margin: 20px 20px 0;
         color: #3596eb;
       }
     }
-    .metrics-table{
-        .el-button {
+    .metrics-table {
+      .el-button {
         width: 149px;
         height: 48px;
-        background: url('../../../assets/images/确定.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
+        background: url("../../../assets/images/确定.png");
+        color: #ffffff;
+        border-color: #ffffff00;
         background-size: 100% 100%;
         margin: 15px;
       }
-      .el-input{
-          --el-input-text-color:#FFFFFF;
-        --el-input-bg-color:#002651;
-        --el-input-border-color:#67B3D6;
+      .el-input {
+        --el-input-text-color: #ffffff;
+        --el-input-bg-color: #002651;
+        --el-input-border-color: #67b3d6;
       }
     }
-    .startOver{
-        margin-left: -10px;
-        width: 205px;
-        height: 55px;
-        background: #00F4FF;
-        //水平居中
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
+    .startOver {
+      margin-left: -10px;
+      width: 205px;
+      height: 55px;
+      background: #00f4ff;
+      //水平居中
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
     }
     :deep(.el-table) {
-    --el-table-row-hover-bg-color:#002651 !important;
-    --el-table-border-color: #7AC1FF;
-  .el-table__row{
-    background-color: #002652 !important;
-    color: #E6E6E6;
-  }
-}
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #7ac1ff;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
+      }
+    }
   }
   .main-right {
     width: 1639px;
-  //   height: 100%;
+    //   height: 100%;
     padding: 20px;
     border: 1px solid #0452c6;
-    :deep(.el-table__header){
-    .el-table__cell{
-            background:linear-gradient(0deg, #5304BE 0%, #9126FE 100%) !important;
-        }
+    :deep(.el-table__header) {
+      .el-table__cell {
+        background: linear-gradient(0deg, #5304be 0%, #9126fe 100%) !important;
+      }
     }
     :deep(.el-table) {
-        --el-table-row-hover-bg-color:#002651 !important;
-        --el-table-border-color: #002651;
-        --el-table-bg-color:#FFFFFF00;
-    .el-table__row{
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #002651;
+      --el-table-bg-color: #ffffff00;
+      .el-table__row {
         background-color: #002652 !important;
-        color: #E6E6E6;
-    }
+        color: #e6e6e6;
+      }
     }
   }
-  .metrics{
-        :deep(.el-input){
-            .el-input__wrapper{
-                background-color:#FFFFFF00;
-                background-image:url('../../../assets/images/下拉框.png');
-                background-size: 100% 100%;
-            }
-            --el-input-text-color:#FFFFFF;
-            --el-input-border-color:#FFFFFF00;
-            --el-input-hover-border-color:#FFFFFF00;
-            --el-input-hover-border:#FFFFFF00;
-            --el-select-border-color-hover:#FFFFFF00;
-            --el-select-input-focus-border-color:#FFFFFF00;
-            --el-input-placeholder-color:#FFFFFF;
-            .el-input__inner{
-                color:#FFFFFF;
-            }
-        }
+  .metrics {
+    :deep(.el-input) {
+      .el-input__wrapper {
+        background-color: #ffffff00;
+        background-image: url("../../../assets/images/下拉框.png");
+        background-size: 100% 100%;
+      }
+      --el-input-text-color: #ffffff;
+      --el-input-border-color: #ffffff00;
+      --el-input-hover-border-color: #ffffff00;
+      --el-input-hover-border: #ffffff00;
+      --el-select-border-color-hover: #ffffff00;
+      --el-select-input-focus-border-color: #ffffff00;
+      --el-input-placeholder-color: #ffffff;
+      .el-input__inner {
+        color: #ffffff;
+      }
     }
+  }
 }
-.analysisResults{
-    .el-button {
-        width: 89px;
-        height: 31px;
-        background: url('../../../assets/images/下载.png');
-        color:black;
-        border-color:#FFFFFF00;
-        // background-size: 100% 100%;
-        margin: 15px 0px 5px;
-      }
+.analysisResults {
+  .el-button {
+    width: 89px;
+    height: 31px;
+    background: url("../../../assets/images/下载.png");
+    color: black;
+    border-color: #ffffff00;
+    // background-size: 100% 100%;
+    margin: 15px 0px 5px;
+  }
 }
-:deep(.el-form-item__label){
-    color: #FFFFFF;;
+:deep(.el-form-item__label) {
+  color: #ffffff;
 }
-.from-item{
-    padding: 20px;
-    .el-input{
-        --el-input-text-color:#FFFFFF;
-        --el-input-bg-color:#002651;
-        --el-input-border-color:#67B3D6;
-    }
+.from-item {
+  padding: 20px;
+  .el-input {
+    --el-input-text-color: #ffffff;
+    --el-input-bg-color: #002651;
+    --el-input-border-color: #67b3d6;
+  }
 }
-.dialog-footer{
-    margin-bottom: 20px;
+.dialog-footer {
+  margin-bottom: 20px;
 }
-:deep(.el-table__expand-icon){
-  color: #9126FE;
-  .el-icon{
+:deep(.el-table__expand-icon) {
+  color: #9126fe;
+  .el-icon {
     font-size: 16px;
   }
 }
 </style>
-<style lang="scss">
-.dialogClass{
-    background:url('../../../assets/images/弹框.png') !important;
-    background-size: 100% 100% !important;
-    .el-dialog__header{
-        padding: 5px 0px;
-        margin-right: 5px !important;
-        .gbImg{
-            cursor: pointer;
-            width: 51px;
-            height: 31px;
-            background-size: 100% 100%;
-        }
-    }
-    .xtImg{
-    margin-left: 18px;
-    width: 530px;
-  }
-}
-.my-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 16px;
-  text-align: center;
-  span{
-    color: #FFFFFF;
-    padding: 38px 20px 0;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/digitalMarketingAlgorithms/components/bigData.vue b/src/views/digitalMarketingAlgorithms/components/bigData.vue
index 7ee9f0c..ebb2fb7 100644
--- a/src/views/digitalMarketingAlgorithms/components/bigData.vue
+++ b/src/views/digitalMarketingAlgorithms/components/bigData.vue
@@ -30,7 +30,7 @@
       <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
         <el-table-column v-for="column in tableLabel" :key="column" :prop="column.prop" :label="column.label" align="center">
           <template #default="{ row }">
-            {{ formatDate(row[column.prop])?? '...' }}
+            {{ formatDate(row[column.prop]) ?? "..." }}
           </template>
         </el-table-column>
       </el-table>
@@ -118,9 +118,10 @@ const selectType = (type) => {
   nzIndex.value = -1;
 };
 const getSurface = () => {
+  loading.value = true;
   portraitModel.getUserTableData(n_dataTableQuery.value).then((res) => {
-    tableData.value = res?.data?.list;
-    datatotal.value = res.data.total;
+    tableData.value = res?.data?.list
+    datatotal.value = res?.data?.total    
     tableLabel2.value = [];
     if (tableData.value[0]?.stepOneA) {
       arrhander.value = JSON.parse(tableData.value[0].stepOneA);
@@ -133,7 +134,13 @@ const getSurface = () => {
       });
       tableLabel.value = tableLabel2.value;
     }
-  });
+    setTimeout(()=>{
+      loading.value = false;
+    },1000)
+  }).catch(err=>{
+    loading.value = false;
+    tableData.value=[]
+  })
 };
 // 导入
 const importData = (e) => {
@@ -144,6 +151,7 @@ const importData = (e) => {
   formdata.append("userId", userInfo.userId);
   marketingAlgorithmApi.getMarketingAlgorithmImport(formdata).then((res) => {
     loading.value = false;
+    getZJData();
     proxy.$modal.msgSuccess("导入成功");
   });
 };
diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
index b904f29..225c17c 100644
--- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
@@ -1,255 +1,330 @@
 <template>
-    <el-scrollbar ref="scrollbar" height="800px">
-      <div class="main-top">
-          <span style="font-weight: bold;font-size: 18px;color: #3596EB;">任务描述</span>
-          <p style="font-weight: 400;font-size: 12px;color: #E6E6E6;">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
-      </div>
-      <div class="main-but">
-          <el-upload
-           ref="uploadRef"
-           class="upload-demo"
-           :file-list="fileList"
-           :auto-upload="false"
-           :on-change="handleChange"
-           :show-file-list="false"
-           multiple="multiple"
-         >
-           <template #trigger>
-            <el-button><img src="../../../assets/images/导入.png" alt="">算法知识导入</el-button>
-           </template>
-           <!-- <div class="reportPromptFile" v-html="item[`${index}`].path"></div> -->
-         </el-upload>
-          <el-button  @click="taskSubmit"><img src="../../../assets/images/提交.png" alt="">实训任务提交</el-button>
-      </div>
-      <div class="app-main">
-        <div class="main-left">
-          <div>
-              <div class="left-top">
+  <el-scrollbar ref="scrollbar" height="800px">
+    <div class="main-top">
+      <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
+      <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+    </div>
+    <div class="main-but">
+      <el-button @click="algorithmicKnowledge()">
+        <img src="../../../assets/images/导入.png" alt="" />
+        算法知识导入
+      </el-button>
+      <el-button @click="taskSubmit">
+        <img src="../../../assets/images/提交.png" alt="" />
+        实训任务提交
+      </el-button>
+    </div>
+    <div class="app-main">
+      <div class="main-left">
+        <div>
+          <div class="left-top">
             <span>一、选择指标</span>
           </div>
           <div class="metrics">
-              <el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
-                  <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+            <el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
           <div class="metrics-table" style="margin-top: 10px">
-              <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange" >
-                  <el-table-column type="selection" label="Date" align="center"  :selectable="flag"/>
-                  <el-table-column prop="text" label="指标"  align="center"/>
-              </el-table>
-              <el-button @click="taskZB">确定</el-button>
+            <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" label="Date" align="center" :selectable="flag" />
+              <el-table-column prop="text" label="指标" align="center" />
+            </el-table>
+            <el-button @click="taskZB">确定</el-button>
           </div>
-          <div class="left-top" style="margin-top:50px">
+          <div class="left-top" style="margin-top: 50px">
             <span>二、数据预处理</span>
           </div>
           <div class="metrics">
-              <el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
-                  <el-option
-                      v-for="item in options2"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+            <el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
-          <div class="metrics" style="margin-top:15px">
-              <el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
-                  <el-option
-                      v-for="item in options3"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+          <div class="metrics" style="margin-top: 15px">
+            <el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
           <div class="left-top" style="margin-top: 50px">
             <span>三、模型参数设置</span>
           </div>
           <div class="metrics-table" style="margin-top: 10px">
-              <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                聚类方法：
-              </span>
-              <div class="metrics" style="margin-top:10px">
-                    <el-select v-model="input4" placeholder="请选择" style="width: 180px">
-                        <el-option
-                            v-for="item in options4"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </div>
-                <div style="margin-top:10px">
-                    <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                    设置簇数K值：
-                    </span>
-                    <el-input v-model="input5" style="width: 180px;margin-top:5px"/>
-                </div>
-                <div style="margin-top:10px">
-                    <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                    最大迭代次数：
-                    </span>
-                    <el-input v-model="input6" style="width: 180px;margin-top:5px"/>
-                </div>
-              <el-button @click="computation">计算</el-button>
-          </div>
-          </div>
-  <div style="margin-top: auto;">
-      <div class="startOver" @click="startOver()">
-              <img src="../../../assets/images/重新开始.png" alt="">
-              <span>重新开始</span>
+            <span style="font-weight: 400; font-size: 12px; color: #ffffff">聚类方法：</span>
+            <div class="metrics" style="margin-top: 10px">
+              <el-select v-model="input4" placeholder="请选择" style="width: 180px">
+                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div style="margin-top: 10px">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">设置簇数K值：</span>
+              <el-input v-model="input5" style="width: 180px; margin-top: 5px" />
+            </div>
+            <div style="margin-top: 10px">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">最大迭代次数：</span>
+              <el-input v-model="input6" style="width: 180px; margin-top: 5px" />
+            </div>
+            <el-button @click="computation">计算</el-button>
           </div>
-  </div>
-         
         </div>
-        <div class="main-right">
-          <div>
-              <span style="font-weight: bold;font-size: 18px;color: #3596EB;">分析数据：</span>
-              <el-table :data="tableData2"  style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                  <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-              </el-table>
-              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+        <div style="margin-top: auto">
+          <div class="startOver" @click="startOver()">
+            <img src="../../../assets/images/重新开始.png" alt="" />
+            <span>重新开始</span>
           </div>
-          <div class="analysisResults" style="margin-top: 20px">
-              <span style="font-weight: bold;font-size: 18px;color: #3596EB;display: block;">分析结果：</span>
-              <el-button>下载</el-button>
-              <el-table :data="tableData3" row-key="TSuid" style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                  <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-              </el-table>
-              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+        </div>
+      </div>
+      <div class="main-right">
+        <div>
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <el-table ref="exportTableRef" :data="tableData2" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+          </el-table>
+          <!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
+        </div>
+        <div class="analysisResults" style="margin-top: 20px">
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
+          <el-button @click="upLoad" v-if="showChart">下载</el-button>
+          <el-table :data="tableData3" row-key="TSuid" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+          </el-table>
+          <!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
+        </div>
+        <div class="pdfRef" id="pdfRef" style="margin-top: 20px; gap: 25px; display: flex" v-show="showChart">
+          <!-- <img src="../../../assets/images/图1.png" alt=""> -->
+          <div style="background: #ffffff">
+            <div id="main" style="width: 500px; height: 500px"></div>
           </div>
-          <div style="margin-top:20px;gap:25px;display: flex;" v-show="showChart">
-            <!-- <img src="../../../assets/images/图1.png" alt=""> -->
-            <div style="background:#FFFFFF;">
-                <div id="main" style="width: 500px;height: 500px;"></div>
-            </div>
-            
-            <div style="background:#FFFFFF;">
-                <div id="main2" style="width: 500px;height: 500px;"></div>
-            </div>
 
+          <div style="background: #ffffff">
+            <div id="main2" style="width: 500px; height: 500px"></div>
           </div>
         </div>
       </div>
-    </el-scrollbar>
-  
-    <el-dialog
-      v-model="dialogVisible"
-      title="实训任务提交"
-      width="600"
-      custom-class="dialogClass"
-      :show-close="false"
-    >
+    </div>
+  </el-scrollbar>
+
+  <el-dialog v-model="dialogVisible" title="实训任务提交" width="600" custom-class="dialogClass" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
-        <div class="my-header">
-          <span :id="titleId" :class="titleClass">实训任务提交</span>
-         <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="">
-        </div>
-        <img class="xtImg" src="../../../assets/images/线条.png" alt="">
-      </template>
-      <div class="from-item">
-          <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
-              <el-form-item label="聚类个数：">
-                  <el-input style="width: 120px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="最大迭代次数：">
-                  <el-input style="width: 120px;" v-model="formInline.user" clearable />
-              </el-form-item>
-            </el-form>
-              <span style="color:#FFFFFF;font-weight: 700;">各簇类特征描述：</span>
-            <el-form :inline="true" label-position="right" style="margin:15px 0" label-width="115px" :model="form" class="demo-form-inline">
-              <el-form-item label="簇类1:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类2:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类3:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类4:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              </el-form>
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">实训任务提交</span>
+        <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
+      </div>
+      <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
+    </template>
+    <div class="from-item">
+      <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="聚类个数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="最大迭代次数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
+      <span style="color: #ffffff; font-weight: 700">各簇类特征描述：</span>
+      <el-form :inline="true" label-position="right" style="margin: 15px 0" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="簇类1:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类2:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类3:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类4:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">确定</el-button>
+        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
       </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">确定</el-button>
-          <el-button type="primary" @click="dialogVisible = false">
-            返回
-          </el-button>
+    </template>
+  </el-dialog>
+
+  <pop-model :showModel="runResultShow" title="聚类分析" @closePop="runResultShow = false">
+    <template v-slot:content>
+      <div>
+        <p style="font-weight: 700; font-size: 22px">聚类分析的定义及原理</p>
+        <p style="font-size: 19px">1.定义</p>
+        <p>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所谓物以类聚、人以群分。聚类分析，即是基于研究对象的特征，将他们分门别类，以让同类别的个体之间差异相对小、相似度相对大，不同类别之间的个体差异大、相似度小。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;聚类分析是一种探索性分析方法，与判别分析不同，聚类分析事先并不知道分类的标准，甚至不知道应该分成几类，而是会根据样本数据的特征，自动进行分类。
+        </p>
+        <img src="@/assets/images/f1001.png" />
+        <p>聚类与分类的不同在于，聚类所要求划分的类是未知的</p>
+        <img src="@/assets/images/f1002.png" />
+        <img src="@/assets/images/f1003.png" />
+        <img src="@/assets/images/f1005.png" />
+        <p style="font-size: 19px">2.原理</p>
+        <p>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;假定研究对象均用所谓的“点”来表示。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在聚类分析中，一般的规则是将“距离”较小的点归为同一类，将“距离”较大的点归为不同的类。常见的是对个案分类，也可以对变量分类，但对于变量分类此时一般使用相似系数作为“距离”测量指标。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般的规则：
+        </p>
+        <img src="@/assets/images/f10010.png" />
+        <br />
+        <img src="@/assets/images/f10011.png" />
+        <br />
+        <img src="@/assets/images/f10012.png" />
+        <p style="font-weight: 700; font-size: 22px">聚类方法及其在SPSS中的实现</p>
+        <p style="font-size: 19px">1.主要的聚类方法：</p>
+        <img src="@/assets/images/f10013.png" />
+        <p style="font-size: 19px">2.方法详解：</p>
+        <p style="font-size: 17px">（1）：K-means聚类</p>
+        <p>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;又称为快速聚类（K-Means Cluster），是在聚类的类别数已确定的情况下，快速将其他个案归类到相应的类别，适合大样本数据的聚类。
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;具体步骤如下：
+        </p>
+        <img src="@/assets/images/f10014.png" />
+        <img src="@/assets/images/f10015.png" />
+        <p>距离计算规则（欧几里得距离公式）：</p>
+        <img src="@/assets/images/f10016.png" />
+        <p>图解：</p>
+        <img src="@/assets/images/f10017.png" />
+        <img src="@/assets/images/f10018.png" />
+        <p>
+          K-means的优缺点：
+          <br />
+          优势：
+          <br />
+          （1）原理比较简单，实现也很容易，收敛速度快。
+          <br />
+          （2）在对大规模数据集进行聚类分析时，算法聚类较高效且聚类效果较好。
+          <br />
+          （3）簇与簇之间区别明显时，它的聚类效果很好。
+          <br />
+          不足：
+          <br />
+          （1）分类数从初始分类开始就确定不变了，所以要求事先要对样本有足够的了解。
+          <br />
+          （2）仅限于个案间的聚类（Q型聚类），不能对变量进行聚类。
+          <br />
+          （3）个案间的距离的测量方法使用的是欧式距离的平方，因此只能对连续变量进行聚类。
+          <br />
+          案例分析（SPSS）：
+          <br />
+          通过查询整理出了2018年我国各省份的20项基本情况，根据这些指标把这31个省市或地区分成3类。
+        </p>
+        <img src="@/assets/images/f10019.png" />
+        <p>分析步骤：分析>>分类>>K-均值聚类>>迭代>>次数>>选项>>勾选统计>>确认</p>
+        <img src="@/assets/images/f10020.png" />
+        <img src="@/assets/images/f10021.png" />
+        <p>结果分析：</p>
+        <img src="@/assets/images/f10022.png" />
+        <img src="@/assets/images/f10023.png" />
+        <p>若不收敛则调大迭代次数</p>
+        <img src="@/assets/images/f10024.png" />
+        <p>方差分析表：</p>
+        <img src="@/assets/images/f10025.png" />
+        <p>其中聚类均方对应组间均方差，误差均方对应组内均方差，显著性p&lt;0.05时说明此变量分类效果好。由表可知，大部分变量的p&lt;0.05,且组间均方差大于组内均方差，说明各变量在三个类别中的差异大，分类结果可信度高。</p>
+        <img src="@/assets/images/f10026.png" />
+        <br />
+        <img src="@/assets/images/10027.png" />
+        <p>聚类结果解读：</p>
+        <div class="table-box">
+          <table cellspacing="0" style="width: 355pt">
+            <tbody>
+              <tr>
+                <td style="text-align: center; vertical-align: middle; width: 355pt">
+                  <p style="margin-left: 0in; text-align: center">
+                    <strong>第一类：</strong>
+                    <strong>1</strong>
+                    <strong>个省份（广东省，经济发达）</strong>
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td style="background-color: #e7e7e7; text-align: center; vertical-align: middle; width: 355pt">
+                  <p style="margin-left: 0in; text-align: center">
+                    <strong>第二类：</strong>
+                    <strong>19</strong>
+                    <strong>个省份（云南、西藏等地区，经济一般）</strong>
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td style="text-align: center; vertical-align: middle; width: 355pt">
+                  <p style="margin-left: 0in; text-align: center">
+                    <strong>第三类：</strong>
+                    <strong>11</strong>
+                    <strong>个省份（上海、北京等地区，经济较发达）</strong>
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </template>
-    </el-dialog>
-  </template>
-  
-  <script setup>
-  import * as echarts from 'echarts';
-  import ecStat from 'echarts-stat';
-  import * as API from '@/api/AI.js'
-  import { getUserInfo } from "@/utils/auth";
-import { onMounted } from 'vue';
-const { proxy } = getCurrentInstance()
-  const dialogVisible=ref(false)
-  const tableLabel=reactive([
-      {prop:'date',label:''},
-  ])
-  const getList=()=>{
-    API.selectionMetrics({userId:JSON.parse(getUserInfo()).userId}).then((res)=>{
-        res.data.forEach(element => {
-            options.value.push({
-                value:element,
-                label:element
-            })
-        })
-    })
-  }
-  const showChart=ref(false)
-  const scrollbar = ref(null);
-  const fileList=ref([])
-  const handleChange=(info)=>{
-    fileList.value.push(info);
-  }
-  const flag=ref(false)
-  let myChart;
-  let myChart2;
-  //随机颜色
-  const getRandomColorHex = () => {
-  const randomValue = () => {
-    // 生成 0 到 255 之间的随机整数
-    const value = Math.floor(Math.random() * 256);
+      </div>
+    </template>
+  </pop-model>
+</template>
+
+<script setup>
+import popModel from "@/views/components/popModal.vue";
+import { htmlPdf } from "@/utils/pdf.js";
+import * as echarts from "echarts";
+import * as XLSX from "XLSX";
+import JSZip from "jszip";
+import * as API from "@/api/AI.js";
+import { getUserInfo } from "@/utils/auth";
+import { onMounted } from "vue";
+const runResultShow = ref(false);
+const { proxy } = getCurrentInstance();
+const dialogVisible = ref(false);
+const tableLabel = reactive([{ prop: "date", label: "" }]);
+const isFlag = ref(false);
+const algorithmicKnowledge = () => {
+  runResultShow.value = true;
+};
+const getList = () => {
+  API.selectionMetrics({ userId: JSON.parse(getUserInfo()).userId }).then((res) => {
+    res.data.forEach((element) => {
+      options.value.push({
+        value: element,
+        label: element,
+      });
+    });
+  });
+};
+const scrollbar = ref(null);
+const fileList = ref([]);
+const handleChange = (info) => {
+  fileList.value.push(info);
+};
+const flag = ref(false);
+let myChart;
+let myChart2;
+const getRandomColorHex = () => {
+  const randomValue = (min, max) => {
+    // 生成 min 到 max 之间的随机整数
+    const value = Math.floor(Math.random() * (max - min + 1)) + min;
     // 将整数转换为两位十六进制形式
-    return value.toString(16).padStart(2, '0');
+    return value.toString(16).padStart(2, "0");
   };
 
-  // 生成RGB颜色
-  let r = randomValue();
-  let g = randomValue();
-  let b = randomValue();
-
-  // 确保颜色与红色对比度较大
-  while (parseInt(r, 16) > 200 && parseInt(g, 16) < 50 && parseInt(b, 16) < 50) {
-    r = randomValue();
-    g = randomValue();
-    b = randomValue();
-  }
+  // 限制红色通道较低，绿色和蓝色通道较高
+  const r = randomValue(0, 128); // 红色通道较低 (0-128)
+  const g = randomValue(128, 255); // 绿色通道较高 (128-255)
+  const b = randomValue(128, 255); // 蓝色通道较高 (128-255)
 
   return `#${r}${g}${b}`;
 };
-  //图标添加数据
-  const addData = (myChart, newData,color) => {
+//图标添加数据
+const addData = (myChart, newData, color) => {
   // 获取当前的数据
-  let currentData = myChart.getOption().series[0].data||[];
+  let currentData = myChart.getOption().series[0].data || [];
   // 添加新数据集，并为每个数据点单独设置颜色
-  newData.forEach(dataPoint => {
+  newData.forEach((dataPoint) => {
     currentData.push({
       value: [dataPoint.x, dataPoint.y],
-      itemStyle: { color: color }
+      itemStyle: { color: color },
     });
   });
 
@@ -257,438 +332,450 @@ const { proxy } = getCurrentInstance()
   myChart.setOption({
     series: [
       {
-        data: currentData
-      }
-    ]
+        data: currentData,
+      },
+    ],
   });
 };
 
-  onMounted(()=>{
-    getList()
-    var chartDom = document.getElementById('main');
-    var chartDom2 = document.getElementById('main2');
+onMounted(() => {
+  getList();
+  var chartDom = document.getElementById("main");
+  var chartDom2 = document.getElementById("main2");
   myChart = echarts.init(chartDom);
   myChart2 = echarts.init(chartDom2);
   // 初始化图表配置
   var option = {
     dataset: [
       {
-        source: []  // 初始时数据为空
-      }
+        source: [], // 初始时数据为空
+      },
     ],
     tooltip: {
-      position: 'top'
+      position: "top",
     },
     xAxis: {},
     yAxis: {},
     series: [
       {
-        type: 'scatter',
+        type: "scatter",
         encode: { tooltip: [0, 1] },
         symbolSize: 15,
         itemStyle: {
-          borderColor: '#555'
-        }
-      }
-    ]
+          borderColor: "#555",
+        },
+      },
+    ],
   };
 
   // 设置初始的配置
   myChart.setOption(option);
   myChart2.setOption(option);
-  })
+});
 
-  const optionData=()=>{
-    API.viewingMetrics({userId:JSON.parse(getUserInfo()).userId,tableName:input.value,algorithmName:'聚类分析'}).then((res)=>{
-        tableData.value=[]
-        res.data.forEach(element => {
-            tableData.value.push({
-                text:element
-            })
-        })
-    })
+const optionData = () => {
+  API.viewingMetrics({ userId: JSON.parse(getUserInfo()).userId, tableName: input.value, algorithmName: "聚类分析" }).then((res) => {
+    tableData.value = [];
+    res.data.forEach((element) => {
+      tableData.value.push({
+        text: element,
+      });
+    });
+  });
+};
+const selectedRows = ref([]);
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+};
+const tableData2 = ref([]);
+const tableData3 = ref([]);
+const resTable2 = ref();
+const taskZB = () => {
+  flag.value = true;
+  if (selectedRows.value.length === 0) {
+    return proxy.$modal.msgWarning("请选择指标!");
   }
-  const selectedRows = ref([]);
-  const handleSelectionChange = (selection) => {
-    selectedRows.value = selection;
-    };
-const tableData2=ref([])
-const tableData3=ref([])
-const resTable2=ref()
-    const taskZB=()=>{
-        flag.value=true
-        if(selectedRows.value.length===0){
-            return
-        }
-        const sendData={
-            tableName:input.value,
-            userId:JSON.parse(getUserInfo()).userId,
-            fieldList:selectedRows.value.map(item=>item.text)
-        }
-        API.analysisDataDisplay(sendData).then((res)=>{
-            tableLabel.length=0
-                for (const key in res.data[0]) {
-                    tableLabel.push({
-                        label:key,
-                        prop:key
-                    })
-                }
-                tableData2.value=res.data
-            flag.value=true
-        })
-    }
-  const formInline=reactive({
-      user:'',
-      region:''
-  })
-  const input=ref()
-  const options = ref([])
-  const input2=ref()
-  const options2=ref([
-    {
-        value:'数据区重',
-        label:'数据去重'
+  const sendData = {
+    tableName: input.value,
+    userId: JSON.parse(getUserInfo()).userId,
+    fieldList: selectedRows.value.map((item) => item.text),
+  };
+  API.analysisDataDisplay(sendData).then((res) => {
+    tableLabel.length = 0;
+    for (const key in res.data[0]) {
+      tableLabel.push({
+        label: key,
+        prop: key,
+      });
     }
-  ])
-  const input3=ref()
-  const options3=ref([
-    {
-        value:'缺失值处理--剔除数据',
-        label:'缺失值处理--剔除数据'
-    },{
-        value:'缺失值处理--均值替换',
-        label:'缺失值处理--均值替换'
-    },
-  ])
-  const input4=ref()
-  const options4=ref([
-    {
-        value:'K-means',
-        label:'K-means'
-    },
-  ])
-  const input5=ref()
-  const input6=ref()
-  const taskSubmit=()=>{
-      dialogVisible.value=true
-  }
-  const tableData = ref([
-    
-  ])
-  const headerCellStyle=()=>{
-       return {
-      backgroundColor: "#1882DE !important", // 设置表头背景颜色
-      color: "#ffffff !important",
-    };
+    proxy.$modal.msgSuccess("计算完成!");
+    tableData2.value = res.data;
+    flag.value = true;
+  });
+};
+const formInline = reactive({
+  user: "",
+  region: "",
+});
+const input = ref();
+const options = ref([]);
+const input2 = ref();
+const options2 = ref([
+  {
+    value: "数据区重",
+    label: "数据去重",
+  },
+]);
+const input3 = ref();
+const options3 = ref([
+  {
+    value: "缺失值处理--剔除数据",
+    label: "缺失值处理--剔除数据",
+  },
+  {
+    value: "缺失值处理--均值替换",
+    label: "缺失值处理--均值替换",
+  },
+]);
+const input4 = ref();
+const options4 = ref([
+  {
+    value: "K-means",
+    label: "K-means",
+  },
+]);
+const input5 = ref();
+const input6 = ref();
+const taskSubmit = () => {
+  dialogVisible.value = true;
+};
+const tableData = ref([]);
+const headerCellStyle = () => {
+  return {
+    backgroundColor: "#1882DE !important", // 设置表头背景颜色
+    color: "#ffffff !important",
+  };
+};
+const optionData2 = () => {
+  if (tableData2.value.length === 0) {
+    input2.value = "";
+    input3.value = "";
+    proxy.$modal.msgWarning("请先选择指标！");
+    return;
   }
-  const optionData2=()=>{
-    if(input2.value&&input3.value){
-        const sendData=ref({
-            mapList:tableData2.value,
-            method:input3.value,
-            userId:JSON.parse(getUserInfo()).userId
-        })
-        API.dataPreprocessing(sendData.value).then((res)=>{
-            resTable2.value=res.data
-            tableData2.value=[]
-            tableData2.value=res.data
-            proxy.$modal.msgSuccess("预处理成功！");
-        })
-    }
+  if (input2.value && input3.value) {
+    const sendData = ref({
+      mapList: tableData2.value,
+      method: input3.value,
+      userId: JSON.parse(getUserInfo()).userId,
+    });
+    API.dataPreprocessing(sendData.value).then((res) => {
+      resTable2.value = res.data;
+      tableData2.value = [];
+      tableData2.value = res.data;
+      proxy.$modal.msgSuccess("预处理成功！");
+    });
   }
+};
 
+const showChart = ref(false);
 //生产表格
-  const computation=()=>{
-    if(input5.value&&input6.value&&input4.value){
-        const sendData={
-            k:input5.value,
-            t:input6.value,
-            userId:JSON.parse(getUserInfo()).userId,
-            deduplicatedDataList:resTable2.value
-        }
-        API.clusterAnalysisPlot(sendData).then((res)=>{
-          showChart.value=true
-            let sex=1
-            tableData3.value=[]
-            res.data.forEach((item,index)=>{
-              const newItem = {};
-              tableLabel.forEach((label,index) => {
-                if(index===0){
-                  newItem[label.prop] = '簇'+sex; // 动态设置字段名
-                }else{
-                  newItem[label.prop] =''
-                }
-              });
-              newItem['TSuid']=sex
-              sex++
-              tableData3.value.push(newItem);
-              tableData3.value[index].children=[]
-              const children=ref([])
-              item.forEach((item2,sexx)=>{
-                const newItem2 = {};
-                tableLabel.forEach((label,index2) => {
-                    newItem2[label.prop] = item2[index2]; // 动态设置字段名
-                });
-                newItem2['TSuid']=''+sex+sexx
-                children.value.push(newItem2)
-              })
-              tableData3.value[index].children=children.value
-              console.log(tableData3.value);
-            })
-        }).then(()=>{
-          API.clusterAnalysis(sendData).then((res)=>{
+const nowData = ref([]);
+const computation = () => {
+  if (tableData2.value.length === 0 && input2.value == "" && input3.value == "") {
+    proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
+    return;
+  }
+  if (input5.value && input6.value && input4.value) {
+    const sendData = {
+      k: input5.value,
+      t: input6.value,
+      userId: JSON.parse(getUserInfo()).userId,
+      deduplicatedDataList: resTable2.value,
+    };
+    API.clusterAnalysisPlot(sendData)
+      .then((res) => {
+        showChart.value = true;
+        let sex = 1;
+        tableData3.value = [];
+        nowData.value = res.data;
+        res.data.forEach((item, index) => {
+          const newItem = {};
+          tableLabel.forEach((label, index) => {
+            if (index === 0) {
+              newItem[label.prop] = "簇" + sex; // 动态设置字段名
+            } else {
+              newItem[label.prop] = "";
+            }
+          });
+          newItem["TSuid"] = sex;
+          sex++;
+          tableData3.value.push(newItem);
+          tableData3.value[index].children = [];
+          const children = ref([]);
+          item.forEach((item2, sexx) => {
+            const newItem2 = {};
+            tableLabel.forEach((label, index2) => {
+              newItem2[label.prop] = item2[index2]; // 动态设置字段名
+            });
+            newItem2["TSuid"] = "" + sex + sexx;
+            children.value.push(newItem2);
+          });
+          tableData3.value[index].children = children.value;
+          console.log(tableData3.value);
+        });
+      })
+      .then(() => {
+        API.clusterAnalysis(sendData).then((res) => {
           myChart.setOption({
             series: [
               {
-                data: []  // 清空数据
-              }
-            ]
+                data: [], // 清空数据
+              },
+            ],
           });
           myChart2.setOption({
             series: [
               {
-                data: []  // 清空数据
-              }
-            ]
+                data: [], // 清空数据
+              },
+            ],
           });
-          Object.keys(res.data.dataSet).forEach(key => {
-            const bgColor=getRandomColorHex()
-            addData(myChart, res.data.dataSet[key],bgColor);
-              addData(myChart2, res.data.dataSet[key],bgColor);
+          Object.keys(res.data.dataSet).forEach((key) => {
+            const bgColor = getRandomColorHex();
+            addData(myChart, res.data.dataSet[key], bgColor);
+            addData(myChart2, res.data.dataSet[key], bgColor);
           });
-          Object.keys(res.data.centroid).forEach(key => {
-              addData(myChart2, res.data.centroid[key],'red');
+          Object.keys(res.data.centroid).forEach((key) => {
+            addData(myChart2, res.data.centroid[key], "red");
           });
-        })
-        })
-        nextTick(() => {
-            setTimeout(() => {
-                const scrollContainer = scrollbar.value?.$el.querySelector('.el-scrollbar__wrap');
-                if (scrollContainer) {
-                  scrollContainer.scrollTo({
-                      top: scrollContainer.scrollHeight,
-                      behavior: 'smooth'  // 平滑滚动
-                  });
-                }
-            }, 10);
         });
-    }
-  }
-  const startOver=()=>{
-    myChart.setOption({
-            series: [
-              {
-                data: []  // 清空数据
-              }
-            ]
-          });
-          myChart2.setOption({
-            series: [
-              {
-                data: []  // 清空数据
-              }
-            ]
+      });
+    nextTick(() => {
+      setTimeout(() => {
+        const scrollContainer = scrollbar.value?.$el.querySelector(".el-scrollbar__wrap");
+        if (scrollContainer) {
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollHeight,
+            behavior: "smooth", // 平滑滚动
           });
-    input.value=''
-    tableData.value=[]
-    tableData2.value=[]
-    tableData3.value=[]
-    input2.value=''
-    input3.value=''
-    input4.value=''
-    input5.value=''
-    input6.value=''
-    showChart.value=false
+        }
+      }, 100);
+    });
+  } else {
+    proxy.$modal.msgWarning("请模型参数进行设置！");
   }
-  </script>
-  
-  <style lang="scss" scoped>
-  .main-top {
+};
+const exportTableRef = ref(null);
+const upLoad = () => {
+  const tableDom = exportTableRef.value?.$el;
+  if (!tableDom) {
+    return;
+  }
+  const wb = XLSX.utils.table_to_book(tableDom);
+  // XLSX.writeFile(wb, '聚类分析.xlsx');
+  const zip = new JSZip();
+  const excelBlob = XLSX.write(wb, { bookType: "xlsx", type: "array" });
+  zip.file("聚类分析.xlsx", new Blob([excelBlob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));
+  zip.file("聚类分析图表.pdf", handleExport());
+  zip.generateAsync({ type: "blob" }).then((content) => {
+    saveAs(content, "聚类分析.zip");
+  });
+};
+
+const startOver = () => {
+  myChart.setOption({
+    series: [
+      {
+        data: [], // 清空数据
+      },
+    ],
+  });
+  myChart2.setOption({
+    series: [
+      {
+        data: [], // 清空数据
+      },
+    ],
+  });
+  input.value = "";
+  tableData.value = [];
+  tableData2.value = [];
+  tableData3.value = [];
+  input2.value = "";
+  input3.value = "";
+  input4.value = "";
+  input5.value = "";
+  input6.value = "";
+  showChart.value = false;
+  tableLabel.length = 0;
+  nowData.value = [];
+};
+//图表导出pdf
+const handleExport = async (name) => {
+  var fileName = "聚类分析图表";
+  const fileList = document.getElementsByClassName("pdfRef"); // 很重要
+  const pdfBlob = await htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, true);
+  return pdfBlob;
+};
+</script>
+
+<style lang="scss" scoped>
+.main-top {
   margin: 20px 20px 0;
-    margin-top: 10px;
-    height: 85px;
-    background: #001d40;
-    border: 1px solid #0452c6;
-    padding: 5px 20px;
+  margin-top: 10px;
+  height: 85px;
+  background: #001d40;
+  border: 1px solid #0452c6;
+  padding: 5px 20px;
+}
+.main-but {
+  margin: 5px 20px 0;
+  display: flex;
+  .el-button:nth-child(1) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/011.png");
+    color: #ffffff;
+    border-color: #ffffff00;
   }
-  .main-but{
-      margin: 5px 20px 0;
-      display: flex;
-      .el-button:nth-child(1) {
-          width: 180px;
-          height: 56px;
-          background: url('../../../assets/images/011.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-        }
-        .el-button:nth-child(2) {
-          width: 180px;
-          height: 56px;
-          background: url('../../../assets/images/022.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-        }
+  .el-button:nth-child(2) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/022.png");
+    color: #ffffff;
+    border-color: #ffffff00;
   }
-  .app-main {
-    //   background-color: #f5f5f5;
+}
+.app-main {
+  //   background-color: #f5f5f5;
+  min-height: 965px;
+  margin: 5px 20px 0;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  .main-left {
+    //水平居中
+    flex-direction: column;
     min-height: 965px;
-    margin: 5px 20px 0;
-    height: 100%;
     display: flex;
-    overflow: auto;
-    .main-left {
-      //水平居中
-      flex-direction: column;
-      min-height: 965px;
-      display: flex;
-      width: 205px;
+    width: 205px;
     //   height: 100%;
-      background: #041c49;
-      padding: 0px 10px;
-      .left-top {
-        padding: 10px;
-        span {
-          font-weight: bold;
-          font-size: 18px;
-          color: #3596eb;
-        }
+    background: #041c49;
+    padding: 0px 10px;
+    .left-top {
+      padding: 10px;
+      span {
+        font-weight: bold;
+        font-size: 18px;
+        color: #3596eb;
       }
-      .metrics-table{
-          .el-button {
-          width: 149px;
-          height: 48px;
-          background: url('../../../assets/images/确定.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-          background-size: 100% 100%;
-          margin: 15px;
-        }
-        .el-input{
-            --el-input-text-color:#FFFFFF;
-          --el-input-bg-color:#002651;
-          --el-input-border-color:#67B3D6;
-        }
+    }
+    .metrics-table {
+      .el-button {
+        width: 149px;
+        height: 48px;
+        background: url("../../../assets/images/确定.png");
+        color: #ffffff;
+        border-color: #ffffff00;
+        background-size: 100% 100%;
+        margin: 15px;
       }
-      .startOver{
-          margin-left: -10px;
-          width: 205px;
-          height: 55px;
-          background: #00F4FF;
-          //水平居中
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
+      .el-input {
+        --el-input-text-color: #ffffff;
+        --el-input-bg-color: #002651;
+        --el-input-border-color: #67b3d6;
       }
-      :deep(.el-table) {
-      --el-table-row-hover-bg-color:#002651 !important;
-      --el-table-border-color: #7AC1FF;
-    .el-table__row{
-      background-color: #002652 !important;
-      color: #E6E6E6;
     }
-  }
+    .startOver {
+      margin-left: -10px;
+      width: 205px;
+      height: 55px;
+      background: #00f4ff;
+      //水平居中
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
     }
-    .main-right {
-      width: 1639px;
-    //   height: 100%;
-      padding: 20px;
-      border: 1px solid #0452c6;
-      :deep(.el-table__header){
-      .el-table__cell{
-              background:linear-gradient(0deg, #5304BE 0%, #9126FE 100%) !important;
-          }
-      }
-      :deep(.el-table) {
-          --el-table-row-hover-bg-color:#002651 !important;
-          --el-table-border-color: #002651;
-          --el-table-bg-color:#FFFFFF00;
-      .el-table__row{
-          background-color: #002652 !important;
-          color: #E6E6E6;
-      }
+    :deep(.el-table) {
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #7ac1ff;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
       }
     }
-    .metrics{
-          :deep(.el-input){
-              .el-input__wrapper{
-                  background-color:#FFFFFF00;
-                  background-image:url('../../../assets/images/下拉框.png');
-                  background-size: 100% 100%;
-              }
-              --el-input-text-color:#FFFFFF;
-              --el-input-border-color:#FFFFFF00;
-              --el-input-hover-border-color:#FFFFFF00;
-              --el-input-hover-border:#FFFFFF00;
-              --el-select-border-color-hover:#FFFFFF00;
-              --el-select-input-focus-border-color:#FFFFFF00;
-              --el-input-placeholder-color:#FFFFFF;
-              .el-input__inner{
-                  color:#FFFFFF;
-              }
-          }
-      }
-  }
-  .analysisResults{
-      .el-button {
-          width: 89px;
-          height: 31px;
-          background: url('../../../assets/images/下载.png');
-          color:black;
-          border-color:#FFFFFF00;
-          // background-size: 100% 100%;
-          margin: 15px 0px 5px;
-        }
   }
-  :deep(.el-form-item__label){
-      color: #FFFFFF;;
-  }
-  .from-item{
-      padding: 20px;
-      .el-input{
-          --el-input-text-color:#FFFFFF;
-          --el-input-bg-color:#002651;
-          --el-input-border-color:#67B3D6;
+  .main-right {
+    width: 1639px;
+    //   height: 100%;
+    padding: 20px;
+    border: 1px solid #0452c6;
+    :deep(.el-table__header) {
+      .el-table__cell {
+        background: linear-gradient(0deg, #5304be 0%, #9126fe 100%) !important;
       }
-  }
-  .dialog-footer{
-      margin-bottom: 20px;
-  }
-  :deep(.el-table__expand-icon){
-    color: #9126FE;
-    .el-icon{
-      font-size: 16px;
     }
-  }
-  </style>
-  <style lang="scss">
-  .dialogClass{
-      background:url('../../../assets/images/弹框.png') !important;
-      background-size: 100% 100% !important;
-      .el-dialog__header{
-          padding: 5px 0px;
-          margin-right: 5px !important;
-          .gbImg{
-              cursor: pointer;
-              width: 51px;
-              height: 31px;
-              background-size: 100% 100%;
-          }
+    :deep(.el-table) {
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #002651;
+      --el-table-bg-color: #ffffff00;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
       }
-      .xtImg{
-      margin-left: 18px;
-      width: 530px;
     }
   }
-  .my-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 16px;
-    text-align: center;
-    span{
-      color: #FFFFFF;
-      padding: 38px 20px 0;
+  .metrics {
+    :deep(.el-input) {
+      .el-input__wrapper {
+        background-color: #ffffff00;
+        background-image: url("../../../assets/images/下拉框.png");
+        background-size: 100% 100%;
+      }
+      --el-input-text-color: #ffffff;
+      --el-input-border-color: #ffffff00;
+      --el-input-hover-border-color: #ffffff00;
+      --el-input-hover-border: #ffffff00;
+      --el-select-border-color-hover: #ffffff00;
+      --el-select-input-focus-border-color: #ffffff00;
+      --el-input-placeholder-color: #ffffff;
+      .el-input__inner {
+        color: #ffffff;
+      }
     }
   }
-  </style>
\ No newline at end of file
+}
+.analysisResults {
+  .el-button {
+    width: 89px;
+    height: 31px;
+    background: url("../../../assets/images/下载.png");
+    color: black;
+    border-color: #ffffff00;
+    // background-size: 100% 100%;
+    margin: 15px 0px 5px;
+  }
+}
+:deep(.el-form-item__label) {
+  color: #ffffff;
+}
+.from-item {
+  padding: 20px;
+  .el-input {
+    --el-input-text-color: #ffffff;
+    --el-input-bg-color: #002651;
+    --el-input-border-color: #67b3d6;
+  }
+}
+.dialog-footer {
+  margin-bottom: 20px;
+}
+:deep(.el-table__expand-icon) {
+  color: #9126fe;
+  .el-icon {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue b/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
index 219856e..0abb45f 100644
--- a/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
+++ b/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- <el-scrollbar height="800px" v-loading="loading"> -->
   <div class="main-top">
     <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
     <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
@@ -16,47 +15,49 @@
   </div>
   <div class="app-main">
     <div class="main-left">
-      <div>
-        <div class="left-top">
-          <span>一、选择指标</span>
-        </div>
-        <div class="metrics">
-          <el-select v-model="n_dataTableQuery.tableName" placeholder="请选择数据" style="width: 180px" @change="selectType">
-            <el-option v-for="item in algorithmStore.userDataLabel" :key="item" :label="item" :value="item" />
-          </el-select>
-        </div>
-        <div class="metrics-table" style="margin-top: 10px">
-          <el-table border ref="multipleTableRef" :data="algorithmStore.indexLibrary" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" prop="date" label="Date" align="center" />
-            <el-table-column label="指标" align="center" prop="label" />
-          </el-table>
-          <el-button @click="submit">确定</el-button>
-        </div>
-        <div class="left-top">
-          <span>二、数据预处理</span>
-        </div>
-        <div class="metrics">
-          <el-select v-model="preProcessText.text1" placeholder="请选择数据" style="width: 180px">
-            <el-option label="数据去重" value="数据去重" />
-          </el-select>
-        </div>
-        <div class="metrics" style="margin-top: 15px">
-          <el-select v-model="preProcessText.text2" placeholder="请选择数据" style="width: 180px" @change="preProcess">
-            <el-option label="缺失值处理-剔除数据" value="缺失值处理-剔除数据" />
-            <el-option label="缺失值处理一均值替代" value="缺失值处理一均值替代" />
-          </el-select>
+      <el-scrollbar height="550px" style="padding-right: 10px" min-size="5">
+        <div>
+          <div class="left-top">
+            <span>一、选择指标</span>
+          </div>
+          <div class="metrics">
+            <el-select v-model="n_dataTableQuery.tableName" placeholder="请选择数据" style="width: 180px" @change="selectType">
+              <el-option v-for="item in algorithmStore.userDataLabel" :key="item" :label="item" :value="item" />
+            </el-select>
+          </div>
+          <div class="metrics-table" style="margin-top: 10px">
+            <el-table border ref="multipleTableRef" :data="algorithmStore.indexLibrary" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" prop="date" label="Date" align="center" />
+              <el-table-column label="指标" align="center" prop="label" />
+            </el-table>
+            <el-button @click="submit">确定</el-button>
+          </div>
+          <div class="left-top">
+            <span>二、数据预处理</span>
+          </div>
+          <div class="metrics">
+            <el-select v-model="preProcessText.text1" placeholder="请选择数据" style="width: 180px">
+              <el-option label="数据去重" value="数据去重" />
+            </el-select>
+          </div>
+          <div class="metrics" style="margin-top: 15px">
+            <el-select v-model="preProcessText.text2" placeholder="请选择数据" style="width: 180px" @change="preProcess">
+              <el-option label="缺失值处理-剔除数据" value="缺失值处理-剔除数据" />
+              <el-option label="缺失值处理一均值替代" value="缺失值处理一均值替代" />
+            </el-select>
+          </div>
+          <div class="left-top" style="margin-top: 10px">
+            <span>三、模型参数设置</span>
+          </div>
+          <div class="metrics-table" style="margin-top: 10px">
+            <el-table border ref="multipleTableRef" :data="modelParams" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handlemodelSelectionChange">
+              <el-table-column type="selection" prop="date" label="Date" align="center" />
+              <el-table-column prop="name" label="统计量" align="center" />
+            </el-table>
+            <el-button @click="modelCalculation">计算</el-button>
+          </div>
         </div>
-        <div class="left-top" style="margin-top: 10px">
-          <span>三、模型参数设置</span>
-        </div>
-        <div class="metrics-table" style="margin-top: 10px">
-          <el-table border ref="multipleTableRef" :data="modelParams" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handlemodelSelectionChange">
-            <el-table-column type="selection" prop="date" label="Date" align="center" />
-            <el-table-column prop="name" label="统计量" align="center" />
-          </el-table>
-          <el-button @click="modelCalculation">计算</el-button>
-        </div>
-      </div>
+      </el-scrollbar>
       <div style="margin-top: auto">
         <div class="startOver" @click="restart">
           <img src="../../../assets/images/重新开始.png" alt="" />
@@ -65,24 +66,25 @@
       </div>
     </div>
     <div class="main-right">
-      <div>
-        <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
-        <el-table :data="analysisData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle">
-          <el-table-column v-for="column in analysisHanderKry" :key="column" :prop="column" :label="column" align="center" />
-        </el-table>
-        <pagination v-show="n_analyzeTheNumberOfDataItems > 0" :total="n_analyzeTheNumberOfDataItems" v-model:page="n_dataTableQuery.index" v-model:limit="n_dataTableQuery.size" @pagination="analyzeDataNext" />
-      </div>
-      <div class="analysisResults" style="margin-top: 20px">
-        <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
-        <el-button>下载</el-button>
-        <el-table :data="tableData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
-          <el-table-column v-for="column in tableLabel" :key="column.label" :prop="column.prop" :label="column.label" align="center"></el-table-column>
-        </el-table>
-        <pagination v-show="nNumberOfAnalysisResults > 0" :total="nNumberOfAnalysisResults" v-model:page="gAnalysisResults.index" v-model:limit="gAnalysisResults.size" @pagination="updatePageAnalysisResults" />
-      </div>
+      <el-scrollbar height="550px" style="padding: 20px">
+        <div>
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <el-table :data="analysisData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle">
+            <el-table-column v-for="column in analysisHanderKry" :key="column" :prop="column" :label="column" align="center" />
+          </el-table>
+          <pagination v-show="n_analyzeTheNumberOfDataItems > 0" :total="n_analyzeTheNumberOfDataItems" v-model:page="n_dataTableQuery.index" v-model:limit="n_dataTableQuery.size" @pagination="analyzeDataNext" />
+        </div>
+        <div class="analysisResults" style="margin-top: 20px">
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
+          <el-button @click="download">下载</el-button>
+          <el-table :data="tableData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350" v-loading="loading">
+            <el-table-column v-for="column in tableLabel" :key="column.label" :prop="column.prop" :label="column.label" align="center"></el-table-column>
+          </el-table>
+          <pagination v-show="nNumberOfAnalysisResults > 0" :total="nNumberOfAnalysisResults" v-model:page="gAnalysisResults.index" v-model:limit="gAnalysisResults.size" @pagination="updatePageAnalysisResults" />
+        </div>
+      </el-scrollbar>
     </div>
   </div>
-  <!-- </el-scrollbar> -->
   <el-dialog v-model="dialogVisible" title="实训任务提交" width="565" custom-class="dialogClass" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
@@ -138,8 +140,7 @@
       </div>
     </template>
   </el-dialog>
-
-  <el-dialog v-model="b_introductionOfAlgorithmKnowledge" title="算法知识导入" width="60%"  :show-close="false">
+  <el-dialog v-model="b_introductionOfAlgorithmKnowledge" title="算法知识导入" width="60%" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <span :id="titleId" :class="titleClass">实训任务提交</span>
@@ -147,9 +148,7 @@
       </div>
       <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
     </template>
-    <div class="from-item">
-      
-    </div>
+    <div class="from-item"></div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="submitTask">确定</el-button>
@@ -157,15 +156,86 @@
       </div>
     </template>
   </el-dialog>
+  <pop-model :showModel="runResultShow" title="关联规则挖掘" @closePop="runResultShow = false">
+    <template v-slot:content>
+      <div>
+        <p style="font-weight: 700; font-size: 22px">什么是描述性统计分析</p>
+        <p>
+          描述性统计分析是数据分析的一种方法，旨在对数据进行总结和描述，以便更好地理解数据的特征和趋势。它主要通过统计指标和图表来呈现数据的基本特征，包括中心趋势、离散程度、分布形态等。
+          <br />
+          常用的描述性统计指标包括：
+        </p>
+        <li>中心趋势：用于描述数据集的集中程度，常见的指标有均值、中位数和众数。</li>
+        <li>离散程度：用于描述数据的分散程度，常见的指标有方差、标准差和极差。</li>
+        <li>分布形态：用于描述数据的分布形态，常见的指标有偏度和峰度。</li>
+        <p>描述性统计分析还可以通过图表来展示数据的特征，常见的图表包括：</p>
+        <li>频数分布表和直方图：用于展示数据的分布情况，可以观察数据的集中程度和离散程度。</li>
+        <li>箱线图：用于展示数据的分布情况和离群值，可以观察数据的中位数、四分位数和异常值。</li>
+        <li>散点图：用于展示两个变量之间的关系，可以观察数据的相关性和趋势。</li>
+        <p>描述性统计分析可以帮助我们对数据有一个直观的了解，发现数据中的规律和异常情况，为后续的数据分析和决策提供基础。</p>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的优势和局限性</p>
+        <p>
+          描述性统计分析的优势和局限性如下：
+          <br />
+          优势：
+        </p>
+        <li>简单易懂：描述性统计分析使用简单的统计指标和图表，可以直观地呈现数据的特征，使人们更容易理解和解释数据。</li>
+        <li>提供概览：通过描述性统计分析，可以获得数据的整体概览，包括数据的中心趋势（如均值、中位数）、数据的分布情况（如标准差、百分位数）等。</li>
+        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值或离群点，从而帮助我们识别数据质量问题或异常情况。</li>
+        <p>局限性：</p>
+        <li>缺乏深入分析：描述性统计分析主要关注数据的基本特征，无法深入挖掘数据背后的关联和因果关系。</li>
+        <li>无法进行推断：描述性统计分析只是对已有数据的总结和描述，并不能进行推断或预测。</li>
+        <li>受数据限制：描述性统计分析的结果受到数据本身的限制，如果数据质量不好或数据量较小，可能会导致结果不准确或不可靠。</li>
+        <p>综上所述，描述性统计分析是数据分析的重要工具，可以帮助我们了解数据的基本特征和趋势，但在深入分析和推断方面有一定的局限性。</p>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的常用方法</p>
+        <p>描述性统计分析是对数据进行总结和描述的过程，常用的方法包括：</p>
+        <li>中心趋势度量：包括均值（mean）、中位数（median）和众数（mode），用于描述数据的集中程度。</li>
+        <li>离散程度度量：包括方差（variance）、标准差（standard deviation）和极差（range），用于描述数据的离散程度。</li>
+        <li>分布形状度量：包括偏度（skewness）和峰度（kurtosis），用于描述数据的分布形状。</li>
+        <li>频数统计：通过频数表、频率分布表和直方图等方式，统计数据的频数和频率。</li>
+        <li>百分位数：用于描述数据中某个特定百分比的位置，如中位数、四分位数等。</li>
+        <li>相关性分析：通过计算相关系数（如Pearson相关系数）来衡量两个变量之间的相关性。</li>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的应用场景</p>
+        <p>描述性统计分析在许多领域和应用场景中都有重要的作用，以下是一些常见的应用场景：</p>
+        <li>提供概览：描述性统计分析可以提供数据的概览，帮助我们了解数据的整体特征和规律。通过计算中心趋势测量（如均值、中位数、众数）、离散程度测量（如方差、标准差、极差）和分布形态测量（如偏度、峰度），我们可以得到数据的集中趋势、离散程度和分布形态等信息。</li>
+        <li>数据比较：描述性统计分析可以帮助我们比较不同组或不同时间点的数据。通过比较不同组的中心趋势、离散程度和分布形态等，我们可以了解不同组之间的差异和相似之处，从而得出结论或提出假设。</li>
+        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值。通过观察离群点（如极端值）和异常值（如异常观测值），我们可以发现数据中的异常情况，进而进行进一步的分析和处理。</li>
+        <li>数据可视化：描述性统计分析可以通过可视化方法（如直方图、散点图、箱线图等）将数据转化为图形，使得数据更加直观和易于理解。数据可视化可以帮助我们发现数据的分布模式、趋势和关联关系，从而更好地理解数据。</li>
+        <li>数据摘要：描述性统计分析可以通过频数和频率分布表、百分位数等方式对数据进行摘要和概括。这些摘要信息可以帮助我们对数据进行快速的了解和比较，从而支持后续的决策和分析。</li>
+        <li>假设检验：描述性统计分析可以为假设检验提供依据，通过对样本数据的描述性统计分析，我们可以判断样本数据是否符合某种假设分布，从而进行假设检验。</li>
+        <li>数据报告和展示：描述性统计分析可以提供数据的概括性描述，用于撰写数据报告和展示，帮助他人更好地理解数据的特征和趋势。</li>
+        <li>数据清洗：描述性统计分析可以帮助我们发现数据中的问题和错误。通过观察数据的分布情况和异常值，我们可以判断数据的质量，并进行必要的数据清洗和修正。</li>
+        <li>数据探索：描述性统计分析是探索性数据分析的一部分，它可以帮助我们发现数据中的模式、关联和趋势。通过观察数据的分布、散点图、相关系数等，我们可以发现数据中的隐藏信息和规律。</li>
+        <li>决策支持：描述性统计分析可以为决策提供支持。通过对数据的摘要和可视化，我们可以获取有关数据的重要信息，帮助决策者做出基于数据的决策。</li>
+        <p style="font-size: 19px; font-weight: 600">如何进行描述性统计分析</p>
+        <p>开展描述性统计分析可以按照以下步骤进行：</p>
+        <li>收集数据：首先，需要收集所需的数据，可以是通过调查问卷、实验、观察或从现有数据源获取。</li>
+        <li>数据清洗：对收集到的数据进行清洗，包括处理缺失值、异常值和错误数据等。</li>
+        <li>描述性统计：使用统计方法计算数据的基本统计量，如平均值、中位数、标准差等，以了解数据的集中趋势、离散程度和分布情况。</li>
+        <li>可视化展示：将统计结果以图表的形式进行可视化展示，如直方图、箱线图、散点图等，以更直观地呈现数据的特征和趋势。</li>
+        <li>解读分析结果：根据统计分析的结果，解读数据的含义和趋势，提取有用的信息和洞察，并进行合理的解释和推断。</li>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的注意事项</p>
+        <p>在进行描述性统计分析时，有以下几个注意事项：</p>
+        <li>数据质量：确保数据的准确性和完整性。进行数据清洗，处理缺失值、异常值和重复值等，以保证分析结果的可靠性。</li>
+        <li>数据类型：根据数据的类型选择合适的统计方法和图表。对于定量数据，可以使用均值、标准差等统计量；对于定性数据，可以使用频数和百分比等统计量。</li>
+        <li>样本大小：考虑样本大小对统计结果的影响。样本较小可能导致统计结果不够准确，而样本较大可能会增加计算复杂度。</li>
+        <li>数据分布：了解数据的分布情况，选择合适的统计方法和图表。例如，对于正态分布的数据，可以使用均值和标准差进行描述；对于偏态分布的数据，可以使用中位数和四分位数等进行描述。</li>
+        <li>上下文和目的：考虑数据分析的上下文和目的。根据具体的问题和需求，选择合适的统计方法和图表，以便更好地解读数据和提取有价值的信息。</li>
+        <li>解读和推断：描述性统计分析主要是对数据进行概括和描述，不能进行推断和因果分析。在解读结果时，要注意避免过度解读和误导。</li>
+        <li>可视化呈现：使用合适的图表和图形将数据可视化，以便更好地传达数据的特征和趋势。选择简洁明了的图表，避免图表过于复杂和混乱。</li>
+      </div>
+    </template>
+  </pop-model>
 </template>
 <script setup>
 import * as portraitModel from "@/api/portraitModel";
-import {paginate} from '@/utils/index.js'
+import { paginate } from "@/utils/index.js";
 import * as API from "@/api/AI.js";
 import * as marketingAlgorithmApi from "@/api/marketing-algorithm.js";
 import useAlgorithmStore from "@/store/modules/algorithm.js";
 import useUserStore from "@/store/modules/user";
 import { getUserInfo } from "@/utils/auth";
+import popModel from "@/views/components/popModal.vue";
 const userInfo = JSON.parse(getUserInfo());
 const loading = ref(false);
 const { proxy } = getCurrentInstance();
@@ -173,16 +243,17 @@ const userStore = useUserStore();
 const algorithmStore = useAlgorithmStore();
 const multipleTableRef = ref(null);
 const b_introductionOfAlgorithmKnowledge = ref(false);
+const runResultShow = ref(false);
 const n_dataTableQuery = ref({
   index: 1,
   size: 5,
   tableName: "用户属性表",
   userId: userInfo.userId,
 });
-const gAnalysisResults=ref({
+const gAnalysisResults = ref({
   index: 1,
   size: 5,
-})
+});
 const dialogVisible = ref(false);
 // 模型参数
 const modelParams = reactive([
@@ -205,7 +276,7 @@ const modelParams = reactive([
     name: "标准误差",
   },
   {
-    name: "峰度;",
+    name: "峰度",
   },
   {
     name: "偏度",
@@ -224,7 +295,8 @@ const modelParams = reactive([
   },
 ]);
 const analysisData = ref([]);
-const analysisHanderKry = ref([]);
+const analysisHanderKry = ref([""]);
+
 const tableLabel = reactive([
   { prop: "average", label: "平均数" },
   { prop: "median", label: "中位数" },
@@ -253,7 +325,6 @@ const formInline = ref({
   summation: "",
   observations: "",
 });
-const input = ref();
 const g_indicatorData = ref([]);
 const preProcessText = ref({
   text1: "数据去重",
@@ -263,8 +334,9 @@ const preProcessText = ref({
 const n_analyzeTheNumberOfDataItems = ref(0);
 const aAnalyzeTheRawData = ref([]);
 //分析结果
-const nNumberOfAnalysisResults=ref(0)
-const aOriginalDataOfAnalysisResults=ref([])
+const nNumberOfAnalysisResults = ref(0);
+const aOriginalDataOfAnalysisResults = ref([]);
+const aOriginalDataOfAnalysisResults2 = ref({});
 
 // 模型参数
 const g_modelParameter = ref([]);
@@ -307,6 +379,7 @@ const handleSelectionChange = (type) => {
 const submit = () => {
   if (g_indicatorData.value.length == 0) return proxy.$modal.msgWarning("请选择指标");
   marketingAlgorithmApi.getMarketingAlgorithm({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, fieldList: g_indicatorData.value }).then((res) => {
+    analysisHanderKry.value.length = 0;
     analysisData.value = res.data;
     analysisHanderKry.value = Object.keys(res.data[0]);
     if (res.data.length > 5) {
@@ -323,19 +396,30 @@ const handlemodelSelectionChange = (type) => {
 };
 //计算
 const modelCalculation = () => {
-  if (analysisData.value.length == 0 && g_modelParameter.value.length == 0) {
+  if (analysisData.value.length == 0 || g_modelParameter.value.length == 0) {
     proxy.$modal.msgWarning("请先分析数据/未选择模型参数!");
     return;
   }
   const processedData = processArrayData(analysisHanderKry.value, analysisData.value);
-  marketingAlgorithmApi.getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: g_modelParameter.value, userId: n_dataTableQuery.value.userId })).then((res) => {
-    tableData.value = res.data.map((item) => item.statistics);
-    if(res.data.length>5){
-     nNumberOfAnalysisResults.value=res.data.length
-     aOriginalDataOfAnalysisResults.value = res.data.map((item) => item.statistics)
-     tableData.value = res.data.map((item) => item.statistics).slice(0,5)
-    }
-  });
+  loading.value = true;
+  marketingAlgorithmApi
+    .getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: g_modelParameter.value, userId: n_dataTableQuery.value.userId }))
+    .then((res) => {
+      aOriginalDataOfAnalysisResults2.value = res.data;
+      tableData.value = res.data.map((item) => item.statistics);
+      if (res.data.length > 5) {
+        nNumberOfAnalysisResults.value = res.data.length;
+        aOriginalDataOfAnalysisResults.value = res.data.map((item) => item.statistics);
+        tableData.value = res.data.map((item) => item.statistics).slice(0, 5);
+      }
+      setTimeout(() => {
+        loading.value = false;
+        proxy.$modal.msgSuccess("计算成功");
+      }, 1000);
+    })
+    .catch((err) => {
+      loading.value = true;
+    });
 };
 function processArrayData(keys, data) {
   // 创建结果对象
@@ -356,11 +440,11 @@ onMounted(() => {
 });
 // 获取指标
 const getIndicator = () => {
-  algorithmStore.getUserDatabase({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName });
+  algorithmStore.getUserDatabase({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, algorithmName: "描述性统计" });
 };
 // 算法知识导入
 const knowledgeImport = () => {
-  b_introductionOfAlgorithmKnowledge.value=true
+  runResultShow.value = true;
 };
 // 实训任务提交
 const submitTask = () => {
@@ -412,11 +496,33 @@ const restart = () => {
 };
 //
 const analyzeDataNext = () => {
-  analysisData.value =paginate(aAnalyzeTheRawData.value,n_dataTableQuery.value.index,n_dataTableQuery.value.size).data
+  analysisData.value = paginate(aAnalyzeTheRawData.value, n_dataTableQuery.value.index, n_dataTableQuery.value.size).data;
+};
+const updatePageAnalysisResults = () => {
+  tableData.value = paginate(aOriginalDataOfAnalysisResults.value, gAnalysisResults.value.index, gAnalysisResults.value.size).data;
+};
+// 下载
+const download = () => {
+  aOriginalDataOfAnalysisResults2.value.forEach((item) => {
+    item.statistics.field = item.field;
+    for (let key in item.statistics) {
+      item.statistics[key] = item.statistics[key] ?? 0;
+    }
+  });
+
+  marketingAlgorithmApi.getMarketingAlgorithmDownload(aOriginalDataOfAnalysisResults2.value).then((res) => {
+    const blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "描述性统计.xlsx";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+    proxy.$modal.msgSuccess("下载成功");
+  });
 };
-const updatePageAnalysisResults=()=>{
-  tableData.value =paginate(aOriginalDataOfAnalysisResults.value,gAnalysisResults.value.index,gAnalysisResults.value.size).data
-}
 </script>
 
 <style lang="scss" scoped>
@@ -448,20 +554,21 @@ const updatePageAnalysisResults=()=>{
 }
 .app-main {
   //   background-color: #f5f5f5;
-  min-height: 965px;
+  // min-height: 965px;
   margin: 5px 20px 0;
   height: 100%;
   display: flex;
-  overflow: auto;
+  // overflow: auto;
   .main-left {
     //水平居中
     flex-direction: column;
-    min-height: 965px;
+    // min-height: 965px;
     display: flex;
     width: 205px;
     height: 100%;
     background: #041c49;
-    padding: 0px 10px;
+    // padding: 0px 10px;
+    padding-left: 10px;
     .left-top {
       padding: 10px;
       span {
@@ -502,9 +609,9 @@ const updatePageAnalysisResults=()=>{
     }
   }
   .main-right {
-    width: 1639px;
+    width: 100%;
     // height: 100%;
-    padding: 20px;
+    // padding: 20px;
     border: 1px solid #0452c6;
     :deep(.el-table__header) {
       .el-table__cell {
@@ -566,38 +673,8 @@ const updatePageAnalysisResults=()=>{
 .dialog-footer {
   margin-bottom: 20px;
 }
-</style>
-<style lang="scss">
-.el-dialog {
-  background: url("../../../assets/images/弹框.png") !important;
-  background-size: 100% 100% !important;
-  .el-dialog__header {
-    padding: 5px 0px;
-    margin-right: 5px !important;
-    .gbImg {
-      cursor: pointer;
-      width: 51px;
-      height: 31px;
-      background-size: 100% 100%;
-    }
-  }
-  .xtImg {
-    margin-left: 18px;
-    width: 530px;
-  }
-}
-.my-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 16px;
-  text-align: center;
-  span {
-    color: #ffffff;
-    padding: 38px 20px 0;
-  }
-}
-.el-table__body-wrapper {
-  // background: #020620 !important;
+:deep(.pagination-container .el-pagination) {
+  // 去除定位
+  position: static;
 }
 </style>
diff --git a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
new file mode 100644
index 0000000..54a4371
--- /dev/null
+++ b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
@@ -0,0 +1,955 @@
+<template>
+  <div class="main-top">
+    <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
+    <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+  </div>
+  <div class="main-but">
+    <el-button @click="knowledgeImport">
+      <img src="../../../assets/images/导入.png" alt="" />
+      算法知识导入
+    </el-button>
+    <el-button @click="taskSubmit">
+      <img src="../../../assets/images/提交.png" alt="" />
+      实训任务提交
+    </el-button>
+  </div>
+  <div class="app-main">
+    <div class="main-left">
+      <div>
+        <div class="left-top">
+          <span>一、选择指标</span>
+        </div>
+        <div class="metrics">
+          <el-select v-model="n_dataTableQuery.tableName" placeholder="请选择数据" style="width: 180px" @change="selectType">
+            <el-option v-for="item in algorithmStore.userDataLabel" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
+        <div class="metrics-table" style="margin-top: 10px">
+          <el-table border ref="multipleTableRef" :data="algorithmStore.indexLibrary" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" prop="date" label="Date" align="center" />
+            <el-table-column label="指标" align="center" prop="label" />
+          </el-table>
+          <el-button @click="submit">确定</el-button>
+        </div>
+        <div class="left-top">
+          <span>二、数据预处理</span>
+        </div>
+        <div class="metrics">
+          <el-select v-model="preProcessText.text1" placeholder="请选择数据" style="width: 180px">
+            <el-option label="数据去重" value="数据去重" />
+          </el-select>
+        </div>
+        <div class="metrics" style="margin-top: 15px">
+          <el-select v-model="preProcessText.text2" placeholder="请选择数据" style="width: 180px" @change="preProcess">
+            <el-option label="缺失值处理-剔除数据" value="缺失值处理-剔除数据" />
+            <el-option label="缺失值处理一均值替代" value="缺失值处理一均值替代" />
+          </el-select>
+        </div>
+        <div class="left-top" style="margin-top: 10px">
+          <span>三、模型参数设置</span>
+        </div>
+        <div class="metrics-table" style="margin-top: 10px">
+          <el-select v-model="preProcessText.text3" placeholder="请选择模型" style="width: 180px" @change="switchingModels">
+            <el-option label="评论观点抽取" value="评论观点抽取" />
+            <el-option label="情感倾向分析" value="情感倾向分析" />
+            <el-option label="词频分析" value="词频分析" />
+            <el-option label="词云生成" value="词云生成" />
+          </el-select>
+          <el-button @click="sentimentAnalysis">情感分析</el-button>
+        </div>
+      </div>
+      <div style="margin-top: auto">
+        <div class="startOver" @click="restart">
+          <img src="../../../assets/images/重新开始.png" alt="" />
+          <span>重新开始</span>
+        </div>
+      </div>
+    </div>
+    <div class="main-right" v-loading="loading" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
+      <el-scrollbar height="550px" style="padding: 20px">
+        <div>
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <div class="text-type" v-show="preProcessText.text3 == '评论观点抽取'">
+            <el-button :class="s_commentType == text.id ? 'btnActive' : ''" v-for="text in textType" :key="text" type="primary" plain @click="commentType(text)">{{ text.name }}</el-button>
+          </div>
+          <div class="analysis">
+            <el-input maxlength="256" show-word-limit v-model="g_analyzeTheNumberOfDataItems" :rows="2" type="textarea" placeholder="" />
+          </div>
+          <div class="footer">
+            <el-button type="primary" plain @click="sentimentAnalysis">情感分析</el-button>
+            <el-button type="primary" plain @click="clear">清空</el-button>
+          </div>
+        </div>
+        <div class="analysisResults" style="margin-top: 20px">
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
+          <el-button @click="download">下载</el-button>
+          <div v-show="preProcessText.text3 == '词频分析'" v-loading="loading2" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
+            <h4>词频列表</h4>
+            <p>你可以对词频词语进行修改删除以及增加，频次数越大，显示越大，最多200关键词。</p>
+            <div class="conditions">
+              <label>显示条件:</label>
+              <div>
+                <span>频次>=</span>
+                <el-input v-model="mWordFrequency.frequency" style="width: 120px" placeholder="" v-debounce="wordFrequencySearch" />
+              </div>
+              <div>
+                <span>词语长度>=</span>
+                <el-input v-model="mWordFrequency.namenum" style="width: 120px" placeholder="" v-debounce="wordFrequencySearch" />
+              </div>
+            </div>
+            <el-table border :data="aWordFrequency" style="width: 80%" :header-cell-style="headerCellStyle">
+              <el-table-column :label="`内容(${aWordFrequency?.length || 0})`" align="center" prop="keyword" width="747" />
+              <el-table-column label="频次" align="center" prop="frequency" />
+            </el-table>
+            <pagination :autoScroll="false" v-show="nOriginalWordFrequencyNum > 0" :total="nOriginalWordFrequencyNum" v-model:page="mWordFrequency.index" v-model:limit="mWordFrequency.size" @pagination="wordFrequencyNext" />
+          </div>
+          <!-- v-show="preProcessText.text3 == '词云生成'" -->
+          <div class="div" v-if="preProcessText.text3 == '词云生成'">
+            <div id="mywordcloud_positive" style="width: 50%; height: 600px"></div>
+          </div>
+          <div ref="captureElement" v-if="preProcessText.text3 == '情感倾向分析' && n_emotiveTendency">
+            <div class="emotion_analysis">
+              <div class="emotion_analysis-ani-in-le">
+                <span>正向情感</span>
+                <img src="../../../assets/images/笑脸.png" alt="" />
+              </div>
+              <el-progress style="width: 480px" :text-inside="true" :stroke-width="20" :percentage="n_emotiveTendency" :color="'#ff540a'" />
+              <div class="emotion_analysis-ani-in-ri">
+                <img src="" alt="" />
+                <span>负向情感</span>
+              </div>
+              <div class="emotion_analysis_title">{{ g_emotionAnalysis == 0 ? "情感偏负向" : g_emotionAnalysis == 1 ? "情感偏中性" : "情感偏正向" }}</div>
+            </div>
+          </div>
+          <div ref="captureElement" class="comment-opinion" v-if="preProcessText.text3 == '评论观点抽取'">
+            <div class="result" v-for="(item, sentiment) in aCommentOpinion" :key="item.abstract">
+              <div class="result-pos" :class="sentiment == 0 ? 'result-neg' : sentiment == 1 ? 'result-neutral' : 'result-img'"></div>
+              <div class="result-title">{{ sentiment == 0 ? "负向评价" : sentiment == 1 ? "中性评价" : "正向评价" }}:</div>
+              <div class="result-view" v-for="items in item" :key="items">
+                {{ items.prop + items.adj }}
+                <div class="result-bar"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+  <el-dialog v-model="dialogVisible" title="实训任务提交" width="700" custom-class="dialogClass" :show-close="false">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">实训任务提交</span>
+        <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
+      </div>
+      <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
+    </template>
+    <div class="from-item">
+      <el-form :inline="true" label-width="84px" :model="form" class="demo-form-inline">
+        <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.max" clearable />
+          </el-form-item>
+          <el-form-item label="频次:" label-position="left" label-width="46px">
+            <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" 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 label="情感倾向分析: " label-width="120px">
+          <el-radio-group v-model="formInline.emotional" style="margin-left: 31px">
+            <el-radio value="1" label="正向" size="large"></el-radio>
+            <el-radio value="2" label="负向" size="large"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="词云生成: " label-width="120px">
+          <el-form-item label="中间最突出单词: " label-width="120px">
+            <el-input style="width: 140px" v-model="formInline.prominent" clearable />
+          </el-form-item>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="submitTask">确定</el-button>
+        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <popModel :showModel="b_algorithmKnowledge" title="情感分析" @closePop="b_algorithmKnowledge = false">
+    <template v-slot:content>      
+      <!-- 情感分析 -->
+      <div>
+            <p style="font-weight: 700;font-size:22px">总览</p><p>文本分析指对文本数据进行表示 (representation)，处理(processing)和建模(modeling)来获得有用的见解(insight)。<br />文本分析的一个挑战是高维度(high dimensionality)。<br /><br />语料库: 指在自然语言处理中用于各种目的的大量文本(文档)集合。<br /><br />另一个挑战是: 大多数情况下文本是非结构化数据(not structured)。</p><img src="@/assets/images/f4001.png" alt=""><p style="font-weight: 700;font-size:22px">文本分析步骤</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.句法分析(Parsing): 是指处理非结构化文本使其具有一定的结构，供将来分析的过程。句法分析将文本进行解构，然后以一种更为结构化的方式来呈现。(unsturctured -> sturctured)<br />&nbsp;&nbsp;&nbsp;&nbsp;2.搜索和检索 (Search and retrieval): 在一个语料库中识别包含例如特殊单词，短语，主题或者实体(如人或组织)等搜索项(search items)的文档。这些搜索项通常称为关键术语 (key term)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.文本挖掘 (text mining): 指使用前两步产生的术语和索引来发现与感兴趣领域或问题相关的有意义的见解(discover meaningful insights)。<br />聚类(clustering) 和 分类 (classification) 都可以应用于文本挖掘。比如：将文档聚化成簇 或者 分类文本以进行情感分析(sentiment analysis)。<br />文本挖掘可以利用来自各个研究领域的方法和技术，如统计分析(statistical analysis)，信息检索(information retrieval)，数据挖掘(data mining)和自然语言处理(natural language processing)等。</p>
+            <p style="font-weight: 700;font-size:22px">挑战</p><li>语法(syntax): 涉及句子结构和语法规则。</li><li>语义(semantics): 是对句子含义的研究。</li><li>语用(pragmatic): 关注特定上下文中句子的含义。</li><li>同义词(homonyms): 具有相同拼写但含义不同的单词。</li><li>缩写词(acronyms): 是单词的缩写形式。</li><p>对于计算机来说，文本只是编码和数字的字符序列(sequence of characters)。它不了解语法，语义(semantic meanings)和其实用含义(pragmatic meaning)。<br />同时，在原始形式中，单词或者文本之间没有自然相似性度量(nature similarity metric)。(因此难以执行聚类或分类)<br />因此，我们需要以适合用于聚类和分类的形式来表示和处理文本。</p><p style="font-weight: 700;font-size:22px">第一步：收集原始文本数据(Collecting Raw Text)</p><p>对于文本分析来说，进行任何事情之前必须先收集数据。</p>
+            <li>可以在许多网站上对用户生成的内容(user-generated contents)开始积极的监控。（可以使用公开的API, 网页爬虫 web scraper/crawler）</li><li>准备处理非结构化或者半结构化数据。</li><p style="font-weight: 700;font-size:22px">第二步：表示文本 (Representing Text)</p><p>使用文本规范化的技术(text normalization techniques)对原始文本进行转化。</p><li>分词 (tokenization): 指从文本正文中分离(也叫做标记)单词 (seperating words)。</li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.按空格(spaces)来分词。(可能会把标点符号也给分出来，比如 day. )<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.基于标点符号和空格来分词 (可能会把 we’ll, can’t, state-of-the-art 等直接分开)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分词比想象中更困难 (résumé 和 resume)<br />没有一个分词器适用于每一种情形(no one-size-fits-all)。</p><li>大小写转换 (case folding): 将所有的字母都变成小写(或者都变成大写)。</li>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.但是在一些情况下可能会出错: 如专有名词，缩写，公司名等(General Motors; WHO; US;)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.减少错误的方法是对不进行大小写转换的单词建立一个查找表(lookup table)。</p><li>停止词(stop word): 在给定语言中，并非所有的单词都需要被考虑。(比如：the, a, of, and, to等这些不太可能有助于语义的理解)</li><li>词根法(Lemmatization)和词干法(Stemming): 词根法看单词的意义(如: Goose, geese, goose, gander, ganders)。词干法看单词的组成(如：walk, walking, Walk, walks, walked)。最受欢迎的是"Porter stemmer", “WordNet”。</li><li>词袋法(Bag-of-words representation): 将文档转化成高维向量(high-dimensional vector)，向量指示了文档中各个单词的 存在/不存在/出现频率(presence/absence/frequency)。</li><img src="@/assets/images/f4002.png" alt=""><p>词袋法足够简单(朴素且过分简化问题 naive and over-simplified) 并被广泛应用于文本分析问题中 (是入门的好方法)。其将文档表示为一组词语(单词)，而忽略了其他信息(如顺序 order，上下文 context，推论 inferences和语义 semantics)。比如，“a dog bites a man” 和 "a man bites a dog"意思完全不同但是他们在词袋法里是同一种表示。</p>
+            <li>语料库的表示(Representation of a corpus): 语料库可以大到包括一种或者多种语言的所有文档，也可以小到仅限于特定领域(focused on a specific domains)。</li><p>大多数语料库都具有元数据，比如语料库的大小以及文本提取的领域。某些语料库包含了文本中出现的每个词的信息内容(Information content, IC)。信息内容是用来表示语料库中词语重要性(importance of a term)的度量。IC值较高的词语的重要性要比IC值较低的词语高。<br />然而，信息内容无法满足分析动态改变的非结构化数据的需求。问题：传统语料库和IC元数据都无法随着时间改变，因此任何语料库中不存在的词汇和任何新发明的词汇都会自动得到0的IC值。其次，传统语料库限制了用于文本分析算法 (text analysis algorithm) 的全部知识(语料库代表了整个知识库)。</p><p style="font-weight: 700;font-size:22px">第三步：词频-逆文档频率(TFIDF - Term Frequency - Inverse Document Frequency)</p><p style="font-weight: 600;font-size:18px">词频 (Term Frequency)</p><p>我们需要一个适应文本上下文(context)和性质(nature)的度量标准 metric (不像IC一样)。<br />TFIDF直接作用于所有获取的文档(fetched documents)。一旦获取的文档发生更改，TFIDF可以被轻松更新。TFIDF是一种广泛用于文本分析的措施。TFIDF对动态内容的处理也是相当强大且有效的，因为文档的变化只需要更新频率计数。<br />
+              给定一个单词 t 以及一个包含 n 个词的文档 d = {t1, t2, …, tn}。在 d 中 t 最简单的词频形式可以定义为 t 在 d 中出现的次数。</p><img src="@/assets/images/f4003.png" alt=""><p>可以对词频函数取对数，以获得更多数据细节。</p><img src="@/assets/images/f4005.png" alt=""><p>对于长文档，因为其包含的词语数量和种类多，因此往往有更高的词频值。这些因素导致了长文档的词频值的提升，以至于人们对长文档产生了偏见。为了解决这个问题，可以对词频进行规范化。</p><img src="@/assets/images/f4006.png" alt=""><p>Zipf’s Law：第 i 个最常见的单词出现在最常见词的 1/i 处。</p><p style="font-weight: 600;font-size:18px">Term Frequency 问题</p><p>词语的重要性仅取决于其在特定文档中的存在。如果该词语频繁出现在每个文档中怎么办？这个词还重要吗？我们需要拓宽我们的视野，不仅要在单个文档中，而是要在整个语料库中考虑一个词语的重要性。</p><p style="font-weight: 600;font-size:18px">词语的文档频率 (Document Frequency of a term)</p><p>文档频率被定义为语料库中包含一个词语的文档的数目。假设语料库D包含N个文档。语料库D={d1, d2, …, dn}中词语 t 的文档频率的定义为：</p><img src="@/assets/images/f4007.png" alt=""><p style="font-weight: 600;font-size:18px">逆文档频率 (Inverse Document Frequency)</p><p>逆文档频率的定义，N代表了语料库的总文档数，DF(t) 代表单词 t 的文档频率。逆文档频率就是他们的商取对数得到。</p>
+              <img src="@/assets/images/f4008.png" alt=""><p>如果词语不在语料库内，会导致分母为零，快速解决的方法是在分母上加个1。</p><img src="@/assets/images/f4009.png" alt=""><p>拥有较高IDF的词往往在整个语料库中更重要。罕见单词的IDF会很高。高频单词的IDF会很低。<br />警告，因为语料库中所有文档数目(N)是保持恒定的，因此IDF仅取决于DF，那些DF值最低的词获得相同的最高IDF。因此，有必要引入更多权重词来对文档中出现次数相同的词进行区分。</p><p style="font-weight: 600;font-size:18px">TFIDF</p><p>是一种既考虑词在单个文档中的普及率 prevalence (TF)，也考虑他在整个语料库中的稀缺程度 scarcity (IDF)的评估方法。词语 t 在文档 d 中的TFIDF 定义为 d 中 t 的词频 乘以语料库中 t 的文档频率，如下公式：</p><img src="@/assets/images/f4010.png" alt=""><p>一个词的TFIDF值越高，它在一个文档中出现的就越频繁，但在语料库的所有文档中出现得就越少。<br />TFIDF在简单和直接的计算中是很有效的，因为它不需要文本含义的相关知识。文档 d 被表示为 TFIDF(t, d)值 的高维向量 (high-dimensional vector)。<br /><br />TFIDF方法减少描述长度的数量相对较少，同时其很难揭示文档内或文档之间(intra-document or inter-document)的统计结构。<br />主题建模(Topic Modelling)能够解决这个问题。主题(topic): 经常在一起出现的具有相关含义的单词簇(a cluster of words)。每个词在主题中都有权重。</p>
+              <p style="font-weight: 700;font-size:22px">第四步：主题建模(Topic Modelling)</p><p>主题建模提供了文档的简短描述。同时，它也提供了自动组织，搜索，理解并汇总大量信息的工具。主题建模是统计模型，它研究一组文档中的单词，确定文档主题，并发现主题是如何相关(associated)或者如何随时间变化的(change over time)。</p><p style="font-weight: 600;font-size:18px">流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.揭开(uncover)语料库中隐藏的主题模式(hidden topical patterns)。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.根据这些主题来注释文档(annotate document)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.使用注释来组织，搜索，汇总文档(organize, search, summarise)。</p><p style="font-weight: 600;font-size:18px">主题(topic)</p><p>一个主题被正式定义为固定单词词汇分布(a distribution over a fixed vocabulary of words)。不同的主题在相同的词汇上会有不同的分布。词汇中的某个词可以在多个主题中有不同的权重。<br />一个文档通常由多个主题以不同的比例贯穿文本。</p><p style="font-weight: 600;font-size:18px">LDA</p><p>最简单的主题模型是Latent Dirichlet Allocation(LDA)，这是一个语料库的生成概率模型(generative probabilistic model of a corpus)。在生成概率模型中，从概率密度函数 (probability density function) 得出模型观测值 (model observation)。在LDA中，文档被视为生成过程 (generative process) 的结果(带有隐藏变量 hidden variables)。<br />LDA假设了：<br /></p><li>有一个固定的词汇表 (fixed vocabulary of words)。</li>
+              <li>潜在主题 (latent topics) 的数目是预定义的。</li><li>每个潜在主题的特征都是词汇表中单词的分布(Dirichlet distribution)。</li><li>每个文档表示潜在主题的一个随机混合(random mixture)。</li><p style="font-weight: 600;font-size:18px">LDA流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择文档的长度N。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.每个文档有一个在主题上的分布。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.为文档中的每个词分配一个主题，并选择相应的主题中的单词。<br /><br />在现实中，只有文档是可用(available)的。LDA的目标是为每一个文档推断潜在的主题(underlying topic)，主题比例 (topic proportion) 以及主题分配 (topic assignment)。</p><p style="font-weight: 600;font-size:18px">算法</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择一个值 k。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.对于每个文档，将文档中的每个单词随机分配给k个主题之一。<br />&nbsp;&nbsp;&nbsp;&nbsp;对于每个文档 d，遍历每个单词 w，然后计算 d 中分配给主题 t 的单词所占的比例，通常会应用平滑(smoothing)处理：</p><img src="@/assets/images/f4011.png" alt=""><p>&nbsp;&nbsp;&nbsp;&nbsp;4.计算从单词w来的所有文档中对主题 t 的分配比例 P(w | t)<br />&nbsp;&nbsp;&nbsp;&nbsp;5.计算属于主题 t 的单词 w 的概率：</p><img src="@/assets/images/f4012.png" alt=""> <p style="font-weight: 600;font-size:18px">注意事项</p> <p>LDA将文档视为主题的混合体。<br />LDA将主题视为单词的混合体。<br />如果单词 w 很有可能出现在主题 t 中，则所有带有 w 的文档将与主题 t 的关联更为紧密。<br />
+                如果单词 w 不太可能出现在主题 t 中，则包含 w 的文档出现在 t 中的可能性将会很小。因为文档 d 中剩余的单词将出现在其他主题中，因此 d 有更高的可能性属于那些主题。因此，就算我们将 w 添加到 t 中，也不会将很多该类文档带到 t 。</p><p style="font-weight: 600;font-size:18px">应用</p><p>主题模型可以被用于文档建模(document modelling)，文档分类(document classification)与协同过滤(collaborative filtering)。<br />主题模型不仅可以应用于文本数据，它还可以用于注释图像。</p><p style="font-weight: 700;font-size:22px">情感分析 (Sentiment Analysis)</p><p>情感分析使用统计和自然语言处理来从文本中挖掘观点来识别并抽取主观信息。<br />应用： 检测产品或者电影的评论的极性(polarity of reviews)。<br /><br />分析层面包括了文档层面(document)，语句层面(sentence)，短语层面(phrase)，和短文层面(short-text)。<br /><br />分类方法(朴素贝叶斯，最大熵，或者支持向量机SVM) 经常被用来提取语料库统计以用于情感分析。</p><img src="@/assets/images/f4013.png" alt=""><p>分类器仅基于对其进行训练的数据集来确定情感：</p><li>词义随着领域不同而改变。</li><li>因此模型无法直接应用于其他领域。</li><p>绝对的情感水平无法提供信息，应该建立一条基线，然后将其与观察值比较。比如，一个产品拥有40%正面推文，60%负面推文，貌似是不成功的。但是如果其他类似的成功产品也有类似的正负面百分比，那么不应该认为该产品是不成功的。<br /><br />如何对大量评论添加标签(积极，消极，中立):<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;1.使用表情符号 (小心阴阳怪气)<br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;2.使用 Amazon Mechanical Turk 互联网众包市场，将上标签工作外包出去。</p><p style="font-weight: 700;font-size:22px">获得结果(gaining insights)</p><p style="font-weight: 600;font-size:18px">词云(word cloud)</p><p>五星好评的词云</p><img src="@/assets/images/f4015.png" alt=""><p>一星差评的词云：</p><img src="@/assets/images/f4016.png" alt=""><p>TFIDF能够用来凸显评论中有信息量的单词。</p> <img src="@/assets/images/f4017.png" alt=""><p>LDA可以把评论归类为主题。圆盘的大小代表了词的权重。</p><img src="@/assets/images/f4018.png" alt=""><p>另一种可视化方式。</p><img src="@/assets/images/f4019.png" alt=""> 
+          </div>
+    </template>
+  </popModel>
+</template>
+<script setup>
+import popModel from "@/views/components/popModal.vue";
+
+import { paginate } from "@/utils/index.js";
+import * as echarts from "echarts";
+import * as XLSX from "XLSX";
+import "echarts-wordcloud/dist/echarts-wordcloud";
+import "echarts-wordcloud/dist/echarts-wordcloud.min";
+import * as portraitModel from "@/api/portraitModel";
+import * as API from "@/api/AI.js";
+import * as marketingAlgorithmApi from "@/api/marketing-algorithm.js";
+import html2canvas from "html2canvas";
+import useAlgorithmStore from "@/store/modules/algorithm.js";
+import useUserStore from "@/store/modules/user";
+import { getUserInfo } from "@/utils/auth";
+// 算法知识
+const b_algorithmKnowledge=ref(false)
+const userInfo = JSON.parse(getUserInfo());
+const loading = ref(false);
+const loading2 = ref(false);
+const { proxy } = getCurrentInstance();
+const algorithmStore = useAlgorithmStore();
+const multipleTableRef = ref(null);
+const b_introductionOfAlgorithmKnowledge = ref(false);
+const n_dataTableQuery = ref({
+  index: 1,
+  size: 5,
+  tableName: "用户属性表",
+  userId: userInfo.userId,
+});
+const textType = [
+  { name: "酒店", id: 1 },
+  { name: "KTV", id: 2 },
+  { name: "丽人", id: 3 },
+  { name: "关食", id: 4 },
+  { name: "旅游", id: 5 },
+  { name: "健束", id: 6 },
+  { name: "教育", id: 7 },
+  { name: "商业", id: 8 },
+  { name: "房产", id: 9 },
+  { name: "汽车", id: 10 },
+  { name: "生活", id: 11 },
+  { name: "购物", id: 12 },
+  { name: "3C", id: 13 },
+];
+const dialogVisible = ref(false);
+const analysisData = ref([]);
+const analysisHanderKry = ref([]);
+//
+const aWordFrequency = ref([]);
+const s_commentType = ref("");
+const tableLabel = reactive([
+  { prop: "max", label: "最多数量词语" },
+  { prop: "frequency", label: "频次" },
+  { prop: "text1", label: "前两位词语" },
+  { prop: "text2", label: "前两位词语" },
+  { prop: "emotional", label: "情感倾向分析" },
+  { prop: "prominent", label: "中间最突出单词" },
+]);
+const formInline = ref({
+  max: "",
+  frequency: "",
+  text1: "",
+  text2: "",
+  emotional: "",
+  prominent: "",
+});
+const g_indicatorData = ref([]);
+const preProcessText = ref({
+  text1: "数据去重",
+  text2: "",
+  text3: "",
+});
+const aOriginalDataOfAnalysisResults2 = ref({});
+const nOriginalWordFrequency = ref([]); //词频原始数据
+const nOriginalWordFrequencyNum = ref(0); //词频原始数据
+const nOriginalWordFrequencySearch = ref([]); //词频原始数据
+const mWordFrequency = ref({
+  index: 1,
+  size: 10,
+  namenum: "",
+  frequency: "",
+}); //词频数据
+
+// 分析变量
+const g_analyzeTheNumberOfDataItems = ref("");
+// 模型参数
+const g_modelParameter = ref([]);
+const n_emotiveTendency = ref(0);
+const g_emotionAnalysis = ref(0);
+const aCommentOpinion = ref([]);
+// 预处理
+const preProcess = (tetx) => {
+  if (g_indicatorData.value.length == 0) {
+    proxy.$modal.msgWarning("请先选择指标进行数据分析!");
+    preProcessText.value.text2 = "";
+    return;
+  }
+  API.dataPreprocessing({
+    mapList: analysisData.value,
+    method: preProcessText.value.text2,
+    userId: n_dataTableQuery.value.userId,
+  }).then((res) => {
+    proxy.$modal.msgSuccess("预处理成功");
+    analysisData.value = res.data;
+    g_analyzeTheNumberOfDataItems.value = res.data.map((item) => (item ? item.text : "")).join(",");
+  });
+};
+// 提交
+const taskSubmit = () => {
+  dialogVisible.value = true;
+};
+const tableData = ref([]);
+const headerCellStyle = () => {
+  return {
+    backgroundColor: "#1882DE !important", // 设置表头背景颜色
+    color: "#ffffff !important",
+  };
+};
+// 选择指标
+const selectType = (type) => {
+  n_dataTableQuery.value.tableName = type;
+  getIndicator();
+};
+// 选择数据
+const handleSelectionChange = (type) => {
+  g_indicatorData.value = type.map((item) => item.label);
+};
+// 提交指標
+const submit = () => {
+  if (g_indicatorData.value.length == 0) return proxy.$modal.msgWarning("请选择指标");
+  loading.value = true;
+  marketingAlgorithmApi.getMarketingAlgorithm({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, fieldList: g_indicatorData.value }).then((res) => {
+    g_analyzeTheNumberOfDataItems.value = res.data.map((item) => (item ? item.text : "")).join(",");
+    analysisData.value = res.data.filter((item) => item !== null);
+    loading.value = false;
+    proxy.$modal.msgSuccess("分析数据成功");
+  });
+};
+// 选择模型
+const handlemodelSelectionChange = (type) => {
+  g_modelParameter.value = type.map((item) => item.name);
+};
+//计算
+const modelCalculation = () => {
+  if (analysisData.value.length == 0 && g_modelParameter.value.length == 0) {
+    proxy.$modal.msgWarning("请先分析数据/未选择模型参数!");
+    return;
+  }
+  const processedData = processArrayData(["text"], analysisData.value);
+  marketingAlgorithmApi.getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: [preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3], userId: n_dataTableQuery.value.userId })).then((res) => {
+    aOriginalDataOfAnalysisResults2.value = res.data;
+    tableData.value = res.data.map((item) => item.statistics);
+    if (res.data.length > 5) {
+      nNumberOfAnalysisResults.value = res.data.length;
+      aOriginalDataOfAnalysisResults.value = res.data.map((item) => item.statistics);
+      tableData.value = res.data.map((item) => item.statistics).slice(0, 5);
+    }
+  });
+};
+function processArrayData(keys, data) {
+  // 创建结果对象
+  const result = {};
+
+  // 遍历每个键
+  keys.forEach((key) => {
+    // 为每个键创建一个数组，包含 data 数组中该键的所有值
+    const values = data.map((item) => item[key]);
+    // 将键和对应的值数组添加到结果对象中
+    result[key] = values;
+  });
+
+  return result;
+}
+onMounted(() => {
+  getIndicator();
+});
+// 获取指标
+const getIndicator = () => {
+  algorithmStore.getUserDatabase({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, algorithmName: "情感分析" });
+};
+// 算法知识导入
+const knowledgeImport = () => {
+  b_algorithmKnowledge.value = true;
+};
+// 实训任务提交
+const submitTask = () => {
+  for (let key in formInline.value) {
+    if (formInline.value[key] == "") {
+      const label = tableLabel.find((item) => item.prop == key);
+      proxy.$modal.msgWarning(`${label.label}不能为空`);
+      return;
+    }
+  }
+  portraitModel
+    .submit({
+      userId: n_dataTableQuery.value.userId,
+      taskName: "情感分析",
+      numberOfErrors: 0,
+    })
+    .then((res) => {
+      dialogVisible.value = false;
+      proxy.$modal.msgSuccess("提交成功");
+    });
+};
+// 重新开始
+const restart = () => {
+  // 清空
+  formInline.value = {
+    average: "",
+    median: "",
+    mode: "",
+    standardDeviation: "",
+    variance: "",
+    standardError: "",
+    kurtosis: "",
+    skewness: "",
+    max: "",
+    min: "",
+    summation: "",
+    observations: "",
+  };
+  analysisData.value = [];
+  analysisHanderKry.value = [];
+  tableData.value = [];
+  g_indicatorData.value = [];
+  g_modelParameter.value = [];
+  preProcessText.value.text2 = "";
+  n_dataTableQuery.value.tableName = "用户属性表";
+  getIndicator();
+  proxy.$modal.msgSuccess("重新开始成功");
+  multipleTableRef.value.clearSelection();
+};
+const captureElement = ref(null);
+// 下载
+const download = async () => {
+  // let tableData = ["内容", "频次"];
+  // XLSX.utils.aoa_to_sheet(tableData);
+  if (preProcessText.value.text3 == "情感倾向分析" || preProcessText.value.text3 == "评论观点抽取") {
+    if (captureElement.value) {
+      try {
+        // 使用 html2canvas 将元素转换为画布
+        let VDOM = document.querySelector(".emotion_analysis_title");
+        let VDOM2 = document.querySelector(".result");
+
+        if (preProcessText.value.text3 == "情感倾向分析") {
+          VDOM.style.color = "#221f1f";
+        } else {
+          VDOM2.style.color = "#212020";
+        }
+        const canvas = await html2canvas(captureElement.value);
+
+        // 将画布转换为图片
+        const image = canvas.toDataURL("image/png");
+        // 创建一个链接，设置为图片的下载链接
+        const link = document.createElement("a");
+        link.href = image;
+        link.download = `${preProcessText.value.text3}.png`; // 图片的文件名
+        // 触发点击事件，下载图片
+        link.click();
+        if (preProcessText.value.text3 == "情感倾向分析") {
+          VDOM.style.color = "#ffffff";
+        } else {
+          VDOM2.style.color = "#ffffff";
+        }
+      } catch (error) {
+        console.error("无法生成图片", error);
+      }
+    }
+  } else if (preProcessText.value.text3 == "词频分析") {
+    const aoaData = [
+      ["内容", "频次"], // 标题行
+      ...nOriginalWordFrequency.value.map((item) => [item.keyword, item.frequency]), // 数据行
+    ];
+    const worksheet = XLSX.utils.aoa_to_sheet(aoaData);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+    XLSX.writeFile(workbook, "词频分析.xlsx");
+  }
+};
+// 情感分析
+const sentimentAnalysis = () => {
+  let g_emotionAnalysisinfo = {};
+  if (g_indicatorData.value.length > 0) {
+    if (preProcessText.value.text2 == "") return proxy.$modal.msgWarning("请先对数据进行预处理!");
+  }
+  if (preProcessText.value.text3 == "") return proxy.$modal.msgWarning("请先选择模型!");
+  if (preProcessText.value.text3 === "评论观点抽取" && s_commentType.value == "") {
+    return proxy.$modal.msgWarning("请先选择评论类型!");
+  }
+  if (g_analyzeTheNumberOfDataItems.value == "") return proxy.$modal.msgWarning("请先选择指标/手动输入进行情感分析!");
+  loading.value = true;
+  marketingAlgorithmApi
+    .getMarketingAlgorithmSentiment({ id: s_commentType.value, userId: n_dataTableQuery.value.userId, content: g_analyzeTheNumberOfDataItems.value, modelType: preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3 })
+    .then((res) => {
+      if (preProcessText.value.text3 === "词云生成") {
+        nOriginalWordFrequency.value = res.data;
+        initChart();
+      } else if (preProcessText.value.text3 === "词频分析") {
+        nOriginalWordFrequency.value = res.data;
+        aWordFrequency.value = res.data.slice(0, 5);
+        nOriginalWordFrequencyNum.value = res.data.length;
+      } else if (preProcessText.value.text3 === "情感倾向分析") {
+        g_emotionAnalysisinfo = JSON.parse(res.data);
+        g_emotionAnalysis.value = JSON.parse(res.data)?.items[0]?.sentiment;
+        n_emotiveTendency.value = Math.round(g_emotionAnalysisinfo.items[0].positive_prob * 100);
+      } else {
+        aCommentOpinion.value = JSON.parse(res.data).items.reduce((groups, item) => {
+          // 如果该 sentiment 的组不存在，则创建
+          if (!groups[item.sentiment]) {
+            groups[item.sentiment] = [];
+          }
+          // 将 item 加入到相应的组中
+          groups[item.sentiment].push(item);
+          return groups;
+        }, {});
+      }
+      loading.value = false;
+      proxy.$modal.msgSuccess("分析成功");
+    })
+    .catch((err) => {
+      loading.value = false;
+    });
+};
+// 清空
+const clear = () => {
+  g_analyzeTheNumberOfDataItems.value = "";
+  aWordFrequency.value = [];
+  proxy.$modal.msgSuccess("清空成功");
+};
+const initChart = () => {
+  var myChart = echarts.init(document.getElementById("mywordcloud_positive"));
+  const arr = nOriginalWordFrequency.value.map((item) => {
+    return {
+      name: item.keyword,
+      value: item.frequency,
+    };
+  });
+  myChart.setOption({
+    title: {
+      text: "词云分析",
+      x: "center",
+      textStyle: {
+        fontSize: 23,
+      },
+    },
+    backgroundColor: "#ffffff",
+    tooltip: {
+      show: true,
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {
+          iconStyle: {
+            normal: {
+              color: "#FFFFFF",
+            },
+          },
+        },
+      },
+    },
+
+    series: [
+      {
+        name: "词云分析",
+        type: "wordCloud",
+        // //size: ['9%', '99%'],
+        sizeRange: [6, 66],
+        // //textRotation: [0, 45, 90, -45],
+        rotationRange: [-45, 90],
+        // //shape: 'circle',
+        // gridSize: 5,
+        // sizeRange: [12, 32],
+        width: "90%",
+        height: "86%",
+        textPadding: 0,
+        autoSize: {
+          enable: true,
+          minSize: 16,
+        },
+        textStyle: {
+          color: function () {
+            return "rgb(" + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(",") + ")";
+          },
+          emphasis: {
+            shadowBlur: 10,
+            shadowColor: "#333",
+          },
+        },
+        data: arr,
+      },
+    ],
+  });
+};
+const commentType = (text) => {
+  s_commentType.value = text.id;
+};
+const wordFrequencyNext = () => {
+  if (mWordFrequency.value.frequency !== "" || mWordFrequency.value.namenum !== "") {
+    wordFrequencySearch();
+  } else {
+    aWordFrequency.value = paginate(nOriginalWordFrequency.value, mWordFrequency.value.index, mWordFrequency.value.size).data;
+  }
+};
+const wordFrequencySearch = () => {
+  // 根据频次和词语长度进行查找
+  loading2.value = true;
+  const filteredData = nOriginalWordFrequency.value.filter((item) => {
+    const matchesKeyword1 = mWordFrequency.value.frequency ? item.frequency === Number(mWordFrequency.value.frequency) : true;
+    const matchesKeyword2 = mWordFrequency.value.namenum ? item.keyword.length == mWordFrequency.value.namenum : true;
+    return matchesKeyword1 && matchesKeyword2;
+  });
+  aWordFrequency.value = filteredData.length > 5 ? paginate(filteredData, mWordFrequency.value.index, mWordFrequency.value.size).data : filteredData;
+  nOriginalWordFrequencyNum.value = filteredData.length;
+  setTimeout(() => {
+    loading2.value = false;
+  }, 600);
+};
+const switchingModels = () => {
+  // 清空右边的数据
+  n_emotiveTendency.value = 0;
+  aCommentOpinion.value = [];
+  nOriginalWordFrequencyNum.value = 0;
+  aWordFrequency.value = [];
+  nOriginalWordFrequency.value = [];
+  mWordFrequency.value.index = 1;
+  mWordFrequency.value.size = 5;
+  mWordFrequency.value.frequency = "";
+  mWordFrequency.value.namenum = "";
+  s_commentType.value = "";
+};
+</script>
+
+<style lang="scss" scoped>
+.main-top {
+  margin: 20px 20px 0;
+  margin-top: 10px;
+  height: 85px;
+  background: #001d40;
+  border: 1px solid #0452c6;
+  padding: 5px 20px;
+}
+.main-but {
+  margin: 5px 20px 0;
+  display: flex;
+  .el-button:nth-child(1) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/011.png");
+    color: #ffffff;
+    border-color: #ffffff00;
+  }
+  .el-button:nth-child(2) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/022.png");
+    color: #ffffff;
+    border-color: #ffffff00;
+  }
+}
+.app-main {
+  margin: 5px 20px 0;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  .main-left {
+    //水平居中
+    flex-direction: column;
+    // min-height: 965px;
+    display: flex;
+    width: 205px;
+    height: 100%;
+    background: #041c49;
+    padding: 0px 10px;
+    .left-top {
+      padding: 10px;
+      span {
+        font-weight: bold;
+        font-size: 18px;
+        color: #3596eb;
+      }
+    }
+    .metrics-table {
+      .el-button {
+        width: 149px;
+        height: 48px;
+        background: url("../../../assets/images/确定.png");
+        color: #ffffff;
+        border-color: #ffffff00;
+        background-size: 100% 100%;
+        margin: 15px;
+      }
+    }
+    .startOver {
+      margin-left: -10px;
+      width: 205px;
+      height: 55px;
+      background: #00f4ff;
+      //水平居中
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+    :deep(.el-table) {
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #7ac1ff;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
+      }
+    }
+  }
+  .main-right {
+    width: 100%;
+    // height: 100%;
+    // padding: 20px;
+    border: 1px solid #0452c6;
+    .text-type {
+      margin: 29px 0 20px 0px;
+      transition: all 3s;
+      .el-button {
+        width: 90px;
+        height: 28px;
+        --el-button-bg-color: #041d3b;
+        --el-button-border-color: #1983dd;
+      }
+      .btnActive {
+        background: #409eff;
+        color: #ffffff;
+      }
+    }
+    .analysis {
+      margin-top: 10px;
+      :deep(.el-textarea) {
+        height: 343px;
+        background: #002652;
+        border-radius: 10px;
+        .el-textarea__inner {
+          min-height: 343px !important;
+          background: transparent;
+          box-shadow: 0 0 0 0px #1983dd !important;
+          border: 1px solid #1983dd;
+          color: #ffffff;
+        }
+        .el-input__count {
+          background: transparent !important;
+          color: #ffffff;
+        }
+      }
+    }
+    .footer {
+      padding-top: 20px;
+      text-align: center;
+    }
+  }
+  .metrics,
+  .metrics-table {
+    :deep(.el-input) {
+      .el-input__wrapper {
+        background-color: #ffffff00;
+        background-image: url("../../../assets/images/下拉框.png");
+        background-size: 100% 100%;
+      }
+      --el-input-text-color: #ffffff;
+      --el-input-border-color: #ffffff00;
+      --el-input-hover-border-color: #ffffff00;
+      --el-input-hover-border: #ffffff00;
+      --el-select-border-color-hover: #ffffff00;
+      --el-select-input-focus-border-color: #ffffff00;
+      --el-input-placeholder-color: #ffffff;
+      .el-input__inner {
+        color: #ffffff;
+      }
+    }
+  }
+}
+.analysisResults {
+  transition: all 6s;
+
+  .el-button {
+    width: 89px;
+    height: 31px;
+    background: url("../../../assets/images/下载.png");
+    color: black;
+    border-color: #ffffff00;
+    // background-size: 100% 100%;
+    margin: 15px 0px 5px;
+  }
+  .conditions {
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    font-size: 14px;
+    margin: 16px 0;
+    label {
+      width: 80px;
+      color: #ffffff;
+    }
+    div {
+      span {
+        display: inline-block;
+        color: #ffffff;
+        margin-right: 10px;
+      }
+      :deep(.el-input) {
+        .el-input__wrapper {
+          background-color: #002651 !important;
+          box-shadow: 0 0 0 1px #67b3d6;
+          border: radius 0px;
+          .el-input__inner {
+            color: #ffffff;
+            caret-color: #ffffff;
+            cursor: pointer;
+          }
+        }
+      }
+      margin-right: 55px;
+    }
+  }
+  .emotion_analysis {
+    position: relative;
+    display: flex;
+    // align-items: center;
+    justify-content: center;
+    gap: 30px;
+    color: #ffffff;
+    font-size: 14px;
+    height: 180px;
+    margin-top: 40px;
+    .emotion_analysis-ani-in-ri,
+    .emotion_analysis-ani-in-le {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .emotion_analysis_title {
+      position: absolute;
+      top: 0px;
+      right: 48%;
+      font-size: 24px;
+      font-weight: normal;
+    }
+    :deep(.el-progress-bar__outer) {
+      background-color: #036fe2;
+    }
+  }
+  .comment-opinion {
+    padding: 30px 20px 0px 90px !important;
+
+    .result {
+      height: 40px;
+      -webkit-text-size-adjust: 100%;
+      font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-font-smoothing: antialiased;
+      font-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+      font-weight: 400;
+      position: relative;
+      padding: 8px 0 8px 55px;
+      margin-right: 1px;
+      color: #ffffff;
+      .result-img {
+        -webkit-text-size-adjust: 100%;
+        font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-font-smoothing: antialiased;
+        font-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text, Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB, arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
+        font-weight: 400;
+        position: absolute;
+        top: 8px;
+        left: 0;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-image: url(../../../assets/images/笑脸.png);
+        background-color: #ff6b0f;
+      }
+      .result-neg {
+        position: absolute;
+        top: 8px;
+        left: 0;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-image: url(../../../assets/images/哭脸.png);
+        background-color: #60aefd;
+      }
+      .result-title {
+        line-height: 26px;
+        font-size: 14px;
+      }
+      .result-view {
+        position: relative;
+        display: inline-block;
+        padding: 0 10px;
+        margin-right: 2px;
+        line-height: 26px;
+        font-size: 14px;
+        top: -26px;
+        left: 61px;
+        .result-bar {
+          position: absolute;
+          top: 50%;
+          right: -1px;
+          transform: translateY(-50%);
+          height: 15px;
+          width: 1px;
+          color: #d8d8d8;
+          border-right: 1px solid #d8d8d8;
+        }
+      }
+      .result-view:last-child {
+        .result-bar {
+          border: none;
+        }
+      }
+    }
+  }
+}
+:deep(.el-form-item__label) {
+  color: #ffffff;
+}
+.from-item {
+  padding: 20px;
+  .el-input {
+    --el-input-text-color: #ffffff;
+    --el-input-bg-color: #002651;
+    --el-input-border-color: #67b3d6;
+  }
+}
+.dialog-footer {
+  margin-bottom: 20px;
+}
+h4,
+p {
+  color: #ffffff !important;
+  font-size: 14px;
+}
+:deep(.pagination-container .el-pagination) {
+  // 去除定位
+  position: static;
+}
+:deep(.demo-form-inline) {
+  .el-form-item__content {
+    flex-wrap: nowrap !important;
+  }
+}
+</style>
diff --git a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
index 0bd9253..41358f5 100644
--- a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
@@ -1,538 +1,787 @@
 <template>
-    <el-scrollbar ref="scrollbar" height="800px">
-      <div class="main-top">
-          <span style="font-weight: bold;font-size: 18px;color: #3596EB;">任务描述</span>
-          <p style="font-weight: 400;font-size: 12px;color: #E6E6E6;">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
-      </div>
-      <div class="main-but">
-          <el-upload
-           ref="uploadRef"
-           class="upload-demo"
-           :file-list="fileList"
-           :auto-upload="false"
-           :on-change="handleChange"
-           :show-file-list="false"
-           multiple="multiple"
-         >
-           <template #trigger>
-            <el-button><img src="../../../assets/images/导入.png" alt="">算法知识导入</el-button>
-           </template>
-           <!-- <div class="reportPromptFile" v-html="item[`${index}`].path"></div> -->
-         </el-upload>
-          <el-button  @click="taskSubmit"><img src="../../../assets/images/提交.png" alt="">实训任务提交</el-button>
-      </div>
-      <div class="app-main">
-        <div class="main-left">
-          <div>
-              <div class="left-top">
+  <el-scrollbar ref="scrollbar" height="800px">
+    <div class="main-top">
+      <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
+      <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+    </div>
+    <div class="main-but">
+      <el-button @click="runResultShow = true">
+        <img src="../../../assets/images/导入.png" alt="" />
+        算法知识导入
+      </el-button>
+      <el-button @click="taskSubmit">
+        <img src="../../../assets/images/提交.png" alt="" />
+        实训任务提交
+      </el-button>
+    </div>
+    <div class="app-main">
+      <div class="main-left">
+        <div>
+          <div class="left-top">
             <span>一、选择指标</span>
           </div>
           <div class="metrics">
-              <el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
-                  <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+            <el-select v-model="input" placeholder="请选择" style="width: 180px" @change="optionData">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
           <div class="metrics-table" style="margin-top: 10px">
-              <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange" >
-                  <el-table-column type="selection" label="Date" align="center"  :selectable="flag"/>
-                  <el-table-column prop="text" label="指标"  align="center"/>
-              </el-table>
-              <el-button @click="taskZB">确定</el-button>
+            <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" label="Date" align="center" :selectable="flag" />
+              <el-table-column prop="text" label="指标" align="center" />
+            </el-table>
+            <el-button @click="taskZB">确定</el-button>
           </div>
-          <div class="left-top" style="margin-top:50px">
+          <div class="left-top" style="margin-top: 50px">
             <span>二、数据预处理</span>
           </div>
           <div class="metrics">
-              <el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
-                  <el-option
-                      v-for="item in options2"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+            <el-select v-model="input2" @change="optionData2" placeholder="请选择" style="width: 180px">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
-          <div class="metrics" style="margin-top:15px">
-              <el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
-                  <el-option
-                      v-for="item in options3"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                  />
-              </el-select>
+          <div class="metrics" style="margin-top: 15px">
+            <el-select v-model="input3" @change="optionData2" placeholder="请选择" style="width: 180px">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
           <div class="left-top" style="margin-top: 50px">
             <span>三、模型参数设置</span>
           </div>
           <div class="metrics-table" style="margin-top: 10px">
-              <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                聚类方法：
-              </span>
-              <div class="metrics" style="margin-top:10px">
-                    <el-select v-model="input4" placeholder="请选择" style="width: 180px">
-                        <el-option
-                            v-for="item in options4"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </div>
-                <div style="margin-top:10px;">
-                    <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                        Y变量选择：
-                    </span>
-                    <el-input v-model="input5" style="width: 160px;margin-top:5px"/>
-                </div>
-                <div style="margin-top:10px;">
-                    <span style="font-weight: 400;font-size: 12px;color: #FFFFFF;">
-                        X变量选择:
-                    </span>
-                    <el-input v-model="input6" style="width: 160px;margin-top:5px"/>
-                </div>
-              <el-button @click="computation">计算</el-button>
-          </div>
-          </div>
-  <div style="margin-top: auto;">
-      <div class="startOver" @click="startOver()">
-              <img src="../../../assets/images/重新开始.png" alt="">
-              <span>重新开始</span>
+            <span style="font-weight: 400; font-size: 12px; color: #ffffff">聚类方法：</span>
+            <div class="metrics" style="margin-top: 10px">
+              <el-select v-model="input4" placeholder="请选择" style="width: 180px">
+                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="metrics2" style="margin-top: 10px">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">Y变量选择：</span>
+              <!-- <el-input v-model="input5" style="width: 160px;margin-top:5px"/> -->
+              <el-select v-model="input5" multiple placeholder="请选择" style="width: 180px">
+                <el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="metrics2" style="margin-top: 10px">
+              <span style="font-weight: 400; font-size: 12px; color: #ffffff">X变量选择:</span>
+              <!-- <el-input v-model="input6" style="width: 160px;margin-top:5px"/> -->
+              <el-select v-model="input6" multiple placeholder="请选择" style="width: 180px">
+                <el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <el-button @click="computation">计算</el-button>
           </div>
-  </div>
-         
         </div>
-        <div class="main-right">
-          <div>
-              <span style="font-weight: bold;font-size: 18px;color: #3596EB;">分析数据：</span>
-              <el-table :data="tableData2"  style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                  <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-              </el-table>
-              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
-          </div>
-          <div class="analysisResults" style="margin-top: 20px">
-              <span style="font-weight: bold;font-size: 18px;color: #3596EB;display: block;">分析结果：</span>
-              <el-button>下载</el-button>
-              <el-table :data="tableData3" row-key="TSuid" style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
-                  <el-table-column v-for="column in tableLabel2" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
-              </el-table>
-              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+        <div style="margin-top: auto">
+          <div class="startOver" @click="startOver()">
+            <img src="../../../assets/images/重新开始.png" alt="" />
+            <span>重新开始</span>
           </div>
         </div>
       </div>
-    </el-scrollbar>
-  
-    <el-dialog
-      v-model="dialogVisible"
-      title="实训任务提交"
-      width="600"
-      custom-class="dialogClass"
-      :show-close="false"
-    >
-    <template #header="{ close, titleId, titleClass }">
-        <div class="my-header">
-          <span :id="titleId" :class="titleClass">实训任务提交</span>
-         <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="">
+      <div class="main-right">
+        <div>
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <el-table :data="tableData2" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+          </el-table>
         </div>
-        <img class="xtImg" src="../../../assets/images/线条.png" alt="">
-      </template>
-      <div class="from-item">
-          <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
-              <el-form-item label="聚类个数：">
-                  <el-input style="width: 120px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="最大迭代次数：">
-                  <el-input style="width: 120px;" v-model="formInline.user" clearable />
-              </el-form-item>
-            </el-form>
-              <span style="color:#FFFFFF;font-weight: 700;">各簇类特征描述：</span>
-            <el-form :inline="true" label-position="right" style="margin:15px 0" label-width="115px" :model="form" class="demo-form-inline">
-              <el-form-item label="簇类1:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类2:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类3:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              <el-form-item label="簇类4:">
-                  <el-input style="width: 240px;" v-model="formInline.user" clearable />
-              </el-form-item>
-              </el-form>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">确定</el-button>
-          <el-button type="primary" @click="dialogVisible = false">
-            返回
-          </el-button>
+        <div class="analysisResults" style="margin-top: 20px">
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
+          <el-button class="imgBtn" v-if="flagUP" @click="upLoad">下载</el-button>
+          <el-table :data="tableData3" ref="exportTableRef" row-key="TSuid" style="width: 94%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+            <el-table-column v-for="column in tableLabel2" :key="column.prop" :prop="column.prop" :label="column.label" align="center" />
+            <el-table-column v-if="flagColumn" label="预测" align="center">
+              <template #default="scope">
+                <el-button type="primary" link @click="handleClick(scope.row)" v-if="predictionResults === ''">预测</el-button>
+                <span v-else>{{ predictionResults }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
-      </template>
-    </el-dialog>
-  </template>
-  
-  <script setup>
-  import * as echarts from 'echarts';
-  import ecStat from 'echarts-stat';
-  import * as API from '@/api/AI.js'
-  import { getUserInfo } from "@/utils/auth";
-  import { onMounted } from 'vue';
-  const { proxy } = getCurrentInstance()
-  const dialogVisible=ref(false)
-  const tableLabel=reactive([
-      {prop:'date',label:''},
-  ])
-  const tableLabel2=reactive([
-      {prop:'date',label:''},
-  ])
-  const getList=()=>{
-    API.selectionMetrics({userId:JSON.parse(getUserInfo()).userId}).then((res)=>{
-        res.data.forEach(element => {
-            options.value.push({
-                value:element,
-                label:element
-            })
-        })
-    })
+      </div>
+    </div>
+  </el-scrollbar>
+
+  <el-dialog v-model="dialogVisible" title="实训任务提交" width="600" custom-class="dialogClass" :show-close="false">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">实训任务提交</span>
+        <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
+      </div>
+      <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
+    </template>
+    <div class="from-item">
+      <el-form :inline="true" label-position="right" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="聚类个数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="最大迭代次数：">
+          <el-input style="width: 120px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
+      <span style="color: #ffffff; font-weight: 700">各簇类特征描述：</span>
+      <el-form :inline="true" label-position="right" style="margin: 15px 0" label-width="115px" :model="form" class="demo-form-inline">
+        <el-form-item label="簇类1:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类2:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类3:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+        <el-form-item label="簇类4:">
+          <el-input style="width: 240px" v-model="formInline.user" clearable />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">确定</el-button>
+        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="dialogVisible2" title="预测" width="400" custom-class="dialogClass" :show-close="false">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">预测</span>
+        <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
+      </div>
+      <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
+    </template>
+    <div class="from-item">
+      <el-form :inline="true" label-position="right" label-width="50px" :model="form" class="demo-form-inline">
+        <el-form-item label="x：">
+          <el-input style="width: 225px" v-model="formInline2.user" clearable placeholder="请输入x， 多个以英文逗号隔开" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="Forecasting">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <pop-model :showModel="runResultShow" title="关联规则挖掘" @closePop="runResultShow = false">
+    <template v-slot:content>
+      <div>
+        <p style="font-weight: 700; font-size: 22px">变量间的关系的度量</p>
+        <p style="font-size: 19px; font-weight: 600">变量间的关系</p>
+        <li>函数关系：设有两个x和y，y随x一起变化，并完全依赖于x，y是x的函数，y = f ( x ) y = f(x)y=f(x)，x为自变量，y为因变量。</li>
+        <li>相关关系：变量之前存在的不确定的关系称为相关关系。</li>
+        <p>
+          &nbsp;&nbsp;&nbsp;1.一个变量的取值不能由另一个变量唯一确定
+          <br />
+          &nbsp;&nbsp;&nbsp;2.当变量x 取某个值时，变量y 的取值对应着一个分布
+          <br />
+          &nbsp;&nbsp;&nbsp;3.各观测点分布在直线周围
+        </p>
+        <p style="font-size: 19px; font-weight: 600">相关关系的描述与测量</p>
+        <li>散点图：可以通过散点图判断两个变量之间有无相关关系，并对变量间的关系形态做出大致的描述。</li>
+        <img src="@/assets/images/f3001.png" alt="" />
+        <li>相关系数：是度量变量之间线性关系强度的一个统计量。</li>
+        <p>
+          若相关系数是根据总体全部数据计算的，称为总体相关系数，记为ρ；
+          <br />
+          若是根据样本数据计算的，则称为样本相关系数，简称为相关系数，记为 r rr，也称为Pearson \textbf{Pearson}Pearson相关系数或者线性相关系数。
+        </p>
+        <img src="@/assets/images/f3002.png" alt="" />
+        <br />
+        <p>
+          相关系数r rr 的性质：
+          <br />
+          &nbsp;&nbsp;&nbsp;r 的取值范围为 [ 0 , 1 ] [0,1][0,1];
+        </p>
+        <img src="@/assets/images/f3003.png" alt="" />
+        <p>
+          &nbsp;&nbsp;&nbsp;r 具有对称性。即x与y之间的相关系数和y与x之间的相关系数相等，即r x y = r y x r_{xy}= r_{yx}r
+          <br />
+          &nbsp;&nbsp;&nbsp;r 数值大小与x和y原点及尺度无关，即改变x和y的数据原点及计量尺度，并不改变r数值大小
+          <br />
+          &nbsp;&nbsp;&nbsp;r 仅仅是x与y之间线性关系的一个度量，它不能用于描述非线性关系。这意味着， r=0只表示两个变量之间不存在线性相关关系，并不说明变量之间没有任何关系 &nbsp;&nbsp;&nbsp;r 虽然是两个变量之间线性关系的一个度量，却不一定意味着x与y一定有因果关系
+        </p>
+        <img src="@/assets/images/f3005.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">相关关系的显著性检验</p>
+        <p>
+          检验两个变量之间是否存在线性相关关系，通常将 r rr 作为 ρ ρρ 的估计值。
+          <br />
+          &nbsp;&nbsp;&nbsp;r 的抽样分布（不写）
+          <br />
+          &nbsp;&nbsp;&nbsp;r 的显著性检验
+        </p>
+        <img src="@/assets/images/f3006.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">一元线性回归的估计和检验</p>
+        <li>相关分析目的在于用相关系数测度变量之间的关系强度。</li>
+        <li>而回归分析侧重于考察变量之间的数量关系，并通过一定的数学表达式将这种关系描述出来，从而确定一个或几个变量（自变量）的变化对另一个特定变量（因变量）的影响程度。具体来说，回归分析具体解决以下几个方面的问题：</li>
+        <p>
+          &nbsp;&nbsp;&nbsp;1.从一组样本数据出发，确定变量之间的数学关系式。
+          <br />
+          &nbsp;&nbsp;&nbsp;2.对这些关系式的可信程度进行各种统计检验，并从影响因变量的诸多变量中找出哪些变量的影响是显著的，哪些是不显著的。
+          <br />
+          &nbsp;&nbsp;&nbsp;3.利用所求的关系式，根据一个或几个自变量的取值来估计或预测因变量的取值，并给出这种估计或预测的可靠程度。
+        </p>
+        <li>在回归分析中：</li>
+        <p>
+          被预测或被解释的变量称为因变量，用y表示；
+          <br />
+          用来预测或被解释的一个或多个变量称为自变量，用x表示；
+        </p>
+        <p style="font-size: 16px; font-weight: 600">相关关系的显著性检验</p>
+        <p>检验两个变量之间是否存在线性相关关系，通常将 r rr 作为 ρ ρρ 的估计值。</p>
+        <img src="@/assets/images/f3007.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">一元线性回归的估计和检验</p>
+        <li>相关分析目的在于用相关系数测度变量之间的关系强度。</li>
+        <li>而回归分析侧重于考察变量之间的数量关系，并通过一定的数学表达式将这种关系描述出来，从而确定一个或几个变量（自变量）的变化对另一个特定变量（因变量）的影响程度。具体来说，回归分析具体解决以下几个方面的问题：</li>
+        <p>
+          &nbsp;&nbsp;&nbsp;1.从一组样本数据出发，确定变量之间的数学关系式。
+          <br />
+          &nbsp;&nbsp;&nbsp;2.对这些关系式的可信程度进行各种统计检验，并从影响因变量的诸多变量中找出哪些变量的影响是显著的，哪些是不显著的。
+          <br />
+          &nbsp;&nbsp;&nbsp;3.利用所求的关系式，根据一个或几个自变量的取值来估计或预测因变量的取值，并给出这种估计或预测的可靠程度。
+        </p>
+        <li>在回归分析中：</li>
+        <p>
+          &nbsp;&nbsp;&nbsp;被预测或被解释的变量称为因变量，用y表示；
+          <br />
+          &nbsp;&nbsp;&nbsp;用来预测或被解释的一个或多个变量称为自变量，用x表示；
+        </p>
+        <p style="font-size: 19px; font-weight: 600">一元线性回归模型</p>
+        <p>涉及一个自变量的回归。</p>
+        <li>回归模型：描述因变量y 如何依赖于自变量x 和误差项 ε εε 的方程称为回归模型，一元线性回归模型可表示为：</li>
+        <img src="@/assets/images/f3008.png" alt="" />
+        <li>上述模型称为理论回归模型，对于这一模型，有以下几个假定：</li>
+        <p>
+          &nbsp;&nbsp;&nbsp;1.因变量y与自变量x之间具有线性关系；
+          <br />
+          &nbsp;&nbsp;&nbsp;2.在重复抽样中，自变量x的取值是固定的，即假定x是非随机的；
+          <br />
+          &nbsp;&nbsp;&nbsp;3.对于满足：
+        </p>
+        <img src="@/assets/images/f3009.png" alt="" />
+        <li>回归方程 ：描述因变量y的期望值如何依赖于自变量x的方程称为回归方程，一元线性回归方程的形式为：</li>
+        <img src="@/assets/images/f3010.png" alt="" />
+        <img src="@/assets/images/f3011.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">参数的最小二乘估计</p>
+        <img src="@/assets/images/f3012.png" alt="" />
+        <br />
+        <img src="@/assets/images/f3013.png" alt="" />
+        <br />
+        <img src="@/assets/images/f3014.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">回归直线的拟合优度</p>
+        <p>估计或预测的精度如何，将取决于回归直线对观测数据的拟合程度。各观测点越是紧密围绕直线，说明对观测数据的拟合程度越好，反之越差。</p>
+        <img src="@/assets/images/f3015.png" alt="" />
+        <li>总平方和（S S T SSTSST）：反映因变量的n 个观察值与其均值的总误差。</li>
+        <img src="@/assets/images/f3016.png" alt="" />
+        <li>残差平方和：又称误差平方和，反映除x 以外的其他因素对y 取值的影响，也称为不可解释的平方和或剩余平方和。</li>
+        <img src="@/assets/images/f3017.png" alt="" />
+        <li>回归平方和（SSR）：反映自变量x 的变化对因变量y 取值变化的影响，或者说，是由于x 与y 之间的线性关系引起的y 的取值变化，也称为可解释的平方和。</li>
+        <img src="@/assets/images/f3018.png" alt="" />
+        <li>三者的关系为：</li>
+        <img src="@/assets/images/f3019.png" alt="" />
+        <li>
+          估计标准误差（s
+          <sub>e</sub>
+          ）：反映实际观察值在回归直线周围的分散状况，是均方残差（MSE）的平方根
+        </li>
+        <img src="@/assets/images/f3020.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">显著性检验</p>
+        <img src="@/assets/images/f3021.png" alt="" />
+        <img src="@/assets/images/f3022.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">利用回归方程进行预测</p>
+        <p style="font-size: 16px; font-weight: 600">平均值的置信区间</p>
+        <li>
+          置信区间(confidence interval)：利用估计的回归方程，对于自变量x 的一个给定值x
+          <sub>0</sub>
+          ，求出因变量y yy的平均值的估计区间，这一估计区间称为置信区间。
+        </li>
+        <p>比平均值的公式根号内多了个1而已：</p>
+        <img src="@/assets/images/f3023.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">残差分析</p>
+        <p style="font-size: 16px; font-weight: 600">残差与残差图（检验方差齐性）</p>
+        <li>残差：因变量的观测值与根据估计的回归方程求出的预测值之差，用e表示，反映了用估计的回归方程去预测而引起的误差。</li>
+        <img src="@/assets/images/f3024.png" alt="" />
+        <img src="@/assets/images/f3025.png" alt="" />
+        <p style="font-size: 19px; font-weight: 600">标准化残差（检验正态性）</p>
+        <li>标准化残差：也称为Pearson 残差或半学生化残差(semistudentized residuals)。</li>
+        <img src="@/assets/images/f3026.png" alt="" />
+      </div>
+    </template>
+  </pop-model>
+</template>
+
+<script setup>
+import popModel from "@/views/components/popModal.vue";
+import * as echarts from "echarts";
+import * as API from "@/api/AI.js";
+import { getUserInfo } from "@/utils/auth";
+import * as XLSX from "XLSX";
+import { onMounted, reactive } from "vue";
+const { proxy } = getCurrentInstance();
+const dialogVisible = ref(false);
+const dialogVisible2 = ref(false);
+const flagColumn = ref(false);
+const runResultShow = ref(false);
+const exportTableRef = ref(null);
+const tableLabel = reactive([{ prop: "date", label: "" }]);
+const tableLabel2 = reactive([{ prop: "date", label: "" }]);
+const formInline2 = reactive({
+  user: "",
+});
+const flagUP = ref(false);
+const option5 = ref([]);
+const option6 = ref([]);
+const getList = () => {
+  API.selectionMetrics({ userId: JSON.parse(getUserInfo()).userId }).then((res) => {
+    res.data.forEach((element) => {
+      options.value.push({
+        value: element,
+        label: element,
+      });
+    });
+  });
+};
+const showChart = ref(false);
+const fileList = ref([]);
+const handleChange = (info) => {
+  fileList.value.push(info);
+};
+const flag = ref(false);
+
+onMounted(() => {
+  getList();
+});
+
+const optionData = () => {
+  API.viewingMetrics({ userId: JSON.parse(getUserInfo()).userId, tableName: input.value, algorithmName: "回归分析" }).then((res) => {
+    tableData.value = [];
+    res.data.forEach((element) => {
+      tableData.value.push({
+        text: element,
+      });
+    });
+  });
+};
+const selectedRows = ref([]);
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+};
+const tableData2 = ref([]);
+const tableData3 = ref([]);
+const resTable2 = ref();
+const taskZB = () => {
+  flag.value = true;
+  if (selectedRows.value.length === 0) {
+    return proxy.$modal.msgWarning("请选择指标!");
   }
-  const showChart=ref(false)
-  const fileList=ref([])
-  const handleChange=(info)=>{
-    fileList.value.push(info);
+  const sendData = {
+    tableName: input.value,
+    userId: JSON.parse(getUserInfo()).userId,
+    fieldList: selectedRows.value.map((item) => item.text),
+  };
+  API.analysisDataDisplay(sendData).then((res) => {
+    tableLabel.length = 0;
+    option5.value.length = 0;
+    for (const key in res.data[0]) {
+      option5.value.push({
+        value: key,
+        label: key,
+      });
+      tableLabel.push({
+        label: key,
+        prop: key,
+      });
+    }
+    tableData2.value = res.data;
+    flag.value = true;
+  });
+};
+const formInline = reactive({
+  user: "",
+  region: "",
+});
+const input = ref();
+const options = ref([]);
+const input2 = ref('');
+const options2 = ref([
+  {
+    value: "数据区重",
+    label: "数据去重",
+  },
+]);
+const input3 = ref('');
+const options3 = ref([
+  {
+    value: "缺失值处理--剔除数据",
+    label: "缺失值处理--剔除数据",
+  },
+  {
+    value: "缺失值处理--均值替换",
+    label: "缺失值处理--均值替换",
+  },
+]);
+const input4 = ref();
+const options4 = ref([
+  {
+    value: "线性回归",
+    label: "线性回归",
+  },
+  {
+    value: "Logistic逻辑回归",
+    label: "Logistic逻辑回归",
+  },
+]);
+const input5 = ref();
+const input6 = ref();
+const taskSubmit = () => {
+  dialogVisible.value = true;
+};
+const tableData = ref([]);
+const headerCellStyle = () => {
+  return {
+    backgroundColor: "#1882DE !important", // 设置表头背景颜色
+    color: "#ffffff !important",
+  };
+};
+const optionData2 = () => {
+  if (tableData2.value.length === 0) {
+    input2.value = "";
+    input3.value = "";
+    proxy.$modal.msgWarning("请先选择指标！");
+    return;
   }
-  const flag=ref(false)
-  
-  onMounted(()=>{
-    getList()
-  })
-  
-  const optionData=()=>{
-    API.viewingMetrics({userId:JSON.parse(getUserInfo()).userId,tableName:input.value,algorithmName:'回归分析'}).then((res)=>{
-        tableData.value=[]
-        res.data.forEach(element => {
-            tableData.value.push({
-                text:element
-            })
-        })
-    })
+  if (input2.value && input3.value) {
+    const sendData = ref({
+      mapList: tableData2.value,
+      method: input3.value,
+      userId: JSON.parse(getUserInfo()).userId,
+    });
+    API.dataPreprocessing(sendData.value).then((res) => {
+      resTable2.value = res.data;
+      tableData2.value = [];
+      tableData2.value = res.data;
+      proxy.$modal.msgSuccess("预处理成功！");
+    });
   }
-  const selectedRows = ref([]);
-  const handleSelectionChange = (selection) => {
-    selectedRows.value = selection;
+};
+
+//生产表格
+const computation = () => {  
+  if (tableData.value.length === 0 || input2.value=='' || input3.value=='') {
+    proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
+    return;
+  }
+  if (input5.value && input6.value && input4.value) {
+    let sendData = {
+      y: [],
+      x: [],
+      userId: JSON.parse(getUserInfo()).userId,
     };
-  const tableData2=ref([])
-  const tableData3=ref([])
-  const resTable2=ref()
-    const taskZB=()=>{
-        flag.value=true
-        if(selectedRows.value.length===0){
-            return
+    if (input4.value === "线性回归") {
+      if (input5.value.length > 1) {
+        proxy.$modal.msgError("y变量数量有误！");
+        return;
+      }
+      if (input6.value.length != 2 || input6.value.length > 2) {
+        proxy.$modal.msgError("x变量数量有误！");
+        return;
+      }
+      flagColumn.value = true;
+      tableData2.value.forEach((item) => {
+        sendData.y.push(item[input5.value[0]]);
+        sendData.x.push([item[input6.value[0]], item[input6.value[1]]]);
+      });
+      API.linearRegression(sendData).then((res) => {
+        tableLabel2.length = 0;
+        for (const key in res.data) {
+          tableLabel2.push({
+            label: key,
+            prop: key,
+          });
         }
-        const sendData={
-            tableName:input.value,
-            userId:JSON.parse(getUserInfo()).userId,
-            fieldList:selectedRows.value.map(item=>item.text)
+        let data = res.data;
+        data.slopes = data.slopes.join(",");
+        tableData3.value = [data];
+        predictionResults.value = "";
+      });
+    } else {
+      if (input5.value.length > 1) {
+        proxy.$modal.msgError("y变量数量有误！");
+        return;
+      }
+      if (input6.value.length > 2) {
+        proxy.$modal.msgError("x变量数量有误！");
+        return;
+      }
+      flagColumn.value = true;
+      if (input6.value.length === 1) {
+        tableData2.value.forEach((item) => {
+          sendData.y.push(item[input5.value[0]]);
+          sendData.x.push([item[input6.value[0]]]);
+        });
+      } else {
+        tableData2.value.forEach((item) => {
+          sendData.y.push(item[input5.value[0]]);
+          sendData.x.push([item[input6.value[0]], item[input6.value[1]]]);
+        });
+      }
+
+      API.logisticRegression(sendData).then((res) => {
+        tableLabel2.length = 0;
+        for (const key in res.data) {
+          tableLabel2.push({
+            label: key,
+            prop: key,
+          });
         }
-        API.analysisDataDisplay(sendData).then((res)=>{
-            tableLabel.length=0
-                for (const key in res.data[0]) {
-                    tableLabel.push({
-                        label:key,
-                        prop:key
-                    })
-                }
-                tableData2.value=res.data
-            flag.value=true
-        })
+        let data = res.data;
+        data.slope = data.slope;
+        tableData3.value = [data];
+        predictionResults.value = "";
+      });
     }
-  const formInline=reactive({
-      user:'',
-      region:''
-  })
-  const input=ref()
-  const options = ref([])
-  const input2=ref()
-  const options2=ref([
-    {
-        value:'数据区重',
-        label:'数据去重'
-    }
-  ])
-  const input3=ref()
-  const options3=ref([
-    {
-        value:'缺失值处理--剔除数据',
-        label:'缺失值处理--剔除数据'
-    },{
-        value:'缺失值处理--均值替换',
-        label:'缺失值处理--均值替换'
-    },
-  ])
-  const input4=ref()
-  const options4=ref([
-    {
-        value:'线性回归',
-        label:'线性回归'
-    },{
-        value:'Logistic逻辑回归',
-        label:'Logistic逻辑回归'
-    },
-  ])
-  const input5=ref()
-  const input6=ref()
-  const taskSubmit=()=>{
-      dialogVisible.value=true
+  } else {
+    proxy.$modal.msgWarning("请模型参数进行设置！");
   }
-  const tableData = ref([
-    
-  ])
-  const headerCellStyle=()=>{
-       return {
-      backgroundColor: "#1882DE !important", // 设置表头背景颜色
-      color: "#ffffff !important",
+  flagUP.value = true;
+};
+const nowData = ref([]);
+const handleClick = (item) => {
+  dialogVisible2.value = true;
+  nowData.value = item;
+};
+const predictionResults = ref("");
+const Forecasting = () => {
+  if (nowData.value.type === "线性回归") {
+    const sendData = {
+      intercept: nowData.value.intercept,
+      type: nowData.value.type,
+      slopes: nowData.value.slopes.split(",").map(Number),
+      raX: formInline2.user.split(",").map(Number),
     };
+    API.logisticRegressionPrediction(sendData).then((res) => {
+      dialogVisible2.value = false;
+      predictionResults.value = res.data;
+    });
   }
-  const optionData2=()=>{
-    if(input2.value&&input3.value){
-        const sendData=ref({
-            mapList:tableData2.value,
-            method:input3.value,
-            userId:JSON.parse(getUserInfo()).userId
-        })
-        API.dataPreprocessing(sendData.value).then((res)=>{
-            resTable2.value=res.data
-            tableData2.value=[]
-            tableData2.value=res.data
-            proxy.$modal.msgSuccess("预处理成功！");
-        })
-    }
-  }
-  
-  //生产表格
-  const computation=()=>{
-    if(input5.value&&input6.value&&input4.value){
-        const sendData={
-          confidence:parseFloat(input5.value)/100,
-          support:parseFloat(input6.value)/100,
-            userId:JSON.parse(getUserInfo()).userId,
-            deduplicatedDataList:resTable2.value
-        }
-        API.associationRuleMining(sendData).then((res)=>{
-            tableData3.value=[]
-            res.data.forEach(element=>{
-              tableData3.value.push({
-                date:element
-              })
-            })
-        })
-    }
+  if (nowData.value.type === "逻辑回归") {
+    const sendData = {
+      intercept: nowData.value.intercept,
+      type: nowData.value.type,
+      slope: nowData.value.slope,
+      lx: formInline2.user,
+    };
+    API.logisticRegressionPrediction(sendData).then((res) => {
+      dialogVisible2.value = false;
+      predictionResults.value = res.data;
+    });
   }
-  const startOver=()=>{
-    input.value=''
-    tableData.value=[]
-    tableData2.value=[]
-    tableData3.value=[]
-    input2.value=''
-    input3.value=''
-    input4.value=''
-    input5.value=''
-    input6.value=''
+};
+const upLoad = () => {
+  const tableDom = exportTableRef.value?.$el;
+  if (!tableDom) {
+    return;
   }
-  </script>
-  
-  <style lang="scss" scoped>
-  .main-top {
+
+  const wb = XLSX.utils.table_to_book(tableDom);
+  XLSX.writeFile(wb, "回归分析.xlsx");
+};
+const startOver = () => {
+  input.value = "";
+  tableData.value = [];
+  tableData2.value = [];
+  tableData3.value = [];
+  input2.value = "";
+  input3.value = "";
+  input4.value = "";
+  input5.value = "";
+  input6.value = "";
+  flagColumn.value = false;
+  tableLabel.length = 0;
+  tableLabel2.length = 0;
+  nowData.value = [];
+  formInline2.user = "";
+  predictionResults.value = "";
+  flagUP.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.main-top {
   margin: 20px 20px 0;
-    margin-top: 10px;
-    height: 85px;
-    background: #001d40;
-    border: 1px solid #0452c6;
-    padding: 5px 20px;
+  margin-top: 10px;
+  height: 85px;
+  background: #001d40;
+  border: 1px solid #0452c6;
+  padding: 5px 20px;
+}
+.main-but {
+  margin: 5px 20px 0;
+  display: flex;
+  .el-button:nth-child(1) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/011.png");
+    color: #ffffff;
+    border-color: #ffffff00;
   }
-  .main-but{
-      margin: 5px 20px 0;
-      display: flex;
-      .el-button:nth-child(1) {
-          width: 180px;
-          height: 56px;
-          background: url('../../../assets/images/011.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-        }
-        .el-button:nth-child(2) {
-          width: 180px;
-          height: 56px;
-          background: url('../../../assets/images/022.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-        }
+  .el-button:nth-child(2) {
+    width: 180px;
+    height: 56px;
+    background: url("../../../assets/images/022.png");
+    color: #ffffff;
+    border-color: #ffffff00;
   }
-  .app-main {
-    //   background-color: #f5f5f5;
+}
+.app-main {
+  //   background-color: #f5f5f5;
+  min-height: 965px;
+  margin: 5px 20px 0;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  .main-left {
+    //水平居中
+    flex-direction: column;
     min-height: 965px;
-    margin: 5px 20px 0;
-    height: 100%;
     display: flex;
-    overflow: auto;
-    .main-left {
-      //水平居中
-      flex-direction: column;
-      min-height: 965px;
-      display: flex;
-      width: 205px;
+    width: 205px;
     //   height: 100%;
-      background: #041c49;
-      padding: 0px 10px;
-      .left-top {
-        padding: 10px;
-        span {
-          font-weight: bold;
-          font-size: 18px;
-          color: #3596eb;
-        }
+    background: #041c49;
+    padding: 0px 10px;
+    .left-top {
+      padding: 10px;
+      span {
+        font-weight: bold;
+        font-size: 18px;
+        color: #3596eb;
       }
-      .metrics-table{
-          .el-button {
-          width: 149px;
-          height: 48px;
-          background: url('../../../assets/images/确定.png');
-          color:#FFFFFF;
-          border-color:#FFFFFF00;
-          background-size: 100% 100%;
-          margin: 15px;
-        }
-        .el-input{
-            --el-input-text-color:#FFFFFF;
-          --el-input-bg-color:#002651;
-          --el-input-border-color:#67B3D6;
-        }
+    }
+    .metrics-table {
+      .el-button {
+        width: 149px;
+        height: 48px;
+        background: url("../../../assets/images/确定.png");
+        color: #ffffff;
+        border-color: #ffffff00;
+        background-size: 100% 100%;
+        margin: 15px;
       }
-      .startOver{
-          margin-left: -10px;
-          width: 205px;
-          height: 55px;
-          background: #00F4FF;
-          //水平居中
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
+      .el-input {
+        --el-input-text-color: #ffffff;
+        --el-input-bg-color: #002651;
+        --el-input-border-color: #67b3d6;
       }
-      :deep(.el-table) {
-      --el-table-row-hover-bg-color:#002651 !important;
-      --el-table-border-color: #7AC1FF;
-    .el-table__row{
-      background-color: #002652 !important;
-      color: #E6E6E6;
     }
-  }
+    .startOver {
+      margin-left: -10px;
+      width: 205px;
+      height: 55px;
+      background: #00f4ff;
+      //水平居中
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
     }
-    .main-right {
-      width: 1639px;
-    //   height: 100%;
-      padding: 20px;
-      border: 1px solid #0452c6;
-      :deep(.el-table__header){
-      .el-table__cell{
-              background:linear-gradient(0deg, #5304BE 0%, #9126FE 100%) !important;
-          }
-      }
-      :deep(.el-table) {
-          --el-table-row-hover-bg-color:#002651 !important;
-          --el-table-border-color: #002651;
-          --el-table-bg-color:#FFFFFF00;
-      .el-table__row{
-          background-color: #002652 !important;
-          color: #E6E6E6;
+    :deep(.el-table) {
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #7ac1ff;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
       }
+    }
+  }
+  .main-right {
+    width: 1639px;
+    //   height: 100%;
+    padding: 20px;
+    border: 1px solid #0452c6;
+    :deep(.el-table__header) {
+      .el-table__cell {
+        background: linear-gradient(0deg, #5304be 0%, #9126fe 100%) !important;
       }
     }
-    .metrics{
-          :deep(.el-input){
-              .el-input__wrapper{
-                  background-color:#FFFFFF00;
-                  background-image:url('../../../assets/images/下拉框.png');
-                  background-size: 100% 100%;
-              }
-              --el-input-text-color:#FFFFFF;
-              --el-input-border-color:#FFFFFF00;
-              --el-input-hover-border-color:#FFFFFF00;
-              --el-input-hover-border:#FFFFFF00;
-              --el-select-border-color-hover:#FFFFFF00;
-              --el-select-input-focus-border-color:#FFFFFF00;
-              --el-input-placeholder-color:#FFFFFF;
-              .el-input__inner{
-                  color:#FFFFFF;
-              }
-          }
+    :deep(.el-table) {
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #002651;
+      --el-table-bg-color: #ffffff00;
+      .el-table__row {
+        background-color: #002652 !important;
+        color: #e6e6e6;
       }
+    }
   }
-  .analysisResults{
-      .el-button {
-          width: 89px;
-          height: 31px;
-          background: url('../../../assets/images/下载.png');
-          color:black;
-          border-color:#FFFFFF00;
-          // background-size: 100% 100%;
-          margin: 15px 0px 5px;
-        }
-  }
-  :deep(.el-form-item__label){
-      color: #FFFFFF;;
-  }
-  .from-item{
-      padding: 20px;
-      .el-input{
-          --el-input-text-color:#FFFFFF;
-          --el-input-bg-color:#002651;
-          --el-input-border-color:#67B3D6;
+  .metrics {
+    :deep(.el-input) {
+      .el-input__wrapper {
+        background-color: #ffffff00;
+        background-image: url("../../../assets/images/下拉框.png");
+        background-size: 100% 100%;
+      }
+      --el-input-text-color: #ffffff;
+      --el-input-border-color: #ffffff00;
+      --el-input-hover-border-color: #ffffff00;
+      --el-input-hover-border: #ffffff00;
+      --el-select-border-color-hover: #ffffff00;
+      --el-select-input-focus-border-color: #ffffff00;
+      --el-input-placeholder-color: #ffffff;
+      .el-input__inner {
+        color: #ffffff;
       }
-  }
-  .dialog-footer{
-      margin-bottom: 20px;
-  }
-  :deep(.el-table__expand-icon){
-    color: #9126FE;
-    .el-icon{
-      font-size: 16px;
     }
   }
-  </style>
-  <style lang="scss">
-  .dialogClass{
-      background:url('../../../assets/images/弹框.png') !important;
-      background-size: 100% 100% !important;
-      .el-dialog__header{
-          padding: 5px 0px;
-          margin-right: 5px !important;
-          .gbImg{
-              cursor: pointer;
-              width: 51px;
-              height: 31px;
-              background-size: 100% 100%;
-          }
+  .metrics2 {
+    :deep(.el-input) {
+      .el-input__wrapper {
+        background-color: #ffffff00;
+      }
+      --el-input-text-color: #ffffff;
+      --el-input-border-color: #409eff;
+      --el-input-hover-border-color: #409eff;
+      --el-input-hover-border: #409eff;
+      --el-select-border-color-hover: #409eff;
+      --el-select-input-focus-border-color: #409eff;
+      --el-input-placeholder-color: #ffffff;
+      .el-input__inner {
+        color: #ffffff;
       }
-      .xtImg{
-      margin-left: 18px;
-      width: 530px;
     }
   }
-  .my-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 16px;
-    text-align: center;
-    span{
-      color: #FFFFFF;
-      padding: 38px 20px 0;
-    }
+}
+.analysisResults {
+  .imgBtn {
+    width: 89px;
+    height: 31px;
+    background: url("../../../assets/images/下载.png");
+    color: black;
+    border-color: #ffffff00;
+    // background-size: 100% 100%;
+    margin: 15px 0px 5px;
+  }
+}
+:deep(.el-form-item__label) {
+  color: #ffffff;
+}
+.from-item {
+  padding: 20px;
+  .el-input {
+    --el-input-text-color: #ffffff;
+    --el-input-bg-color: #002651;
+    --el-input-border-color: #67b3d6;
+  }
+}
+.dialog-footer {
+  margin-bottom: 20px;
+}
+:deep(.el-table__expand-icon) {
+  color: #9126fe;
+  .el-icon {
+    font-size: 16px;
   }
-  </style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/digitalMarketingAlgorithms/index.vue b/src/views/digitalMarketingAlgorithms/index.vue
index d448986..a3f8bdb 100644
--- a/src/views/digitalMarketingAlgorithms/index.vue
+++ b/src/views/digitalMarketingAlgorithms/index.vue
@@ -1,111 +1,102 @@
 <template>
-    <div class="rgzn_top app-container">
-      <div class="top_item">
-        <el-button :class="{'active':isActive===1}" @click="activeIndex(1)">用户数据库</el-button>
-        <el-button :class="{'active':isActive===2}" @click="activeIndex(2)">描述性统计</el-button>
-        <el-button :class="{'active':isActive===3}" @click="activeIndex(3)">聚类分析</el-button>
-        <el-button :class="{'active':isActive===4}" @click="activeIndex(4)">关联规则挖掘</el-button>
-        <el-button :class="{'active':isActive===5}" @click="activeIndex(5)">回归分析</el-button>
-        <el-button :class="{'active':isActive===6}" @click="activeIndex(6)">情感分析/文本挖掘</el-button>
-        <el-button :class="{'active':isActive===7}" @click="activeIndex(7)">决策树分析</el-button>
-      </div>
-      <div>
-        <component :is="component"></component>
-      </div>
+  <div class="rgzn_top app-container">
+    <div class="top_item">
+      <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">用户数据库</el-button>
+      <el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">描述性统计</el-button>
+      <el-button :class="{ active: isActive === 3 }" @click="activeIndex(3)">聚类分析</el-button>
+      <el-button :class="{ active: isActive === 4 }" @click="activeIndex(4)">关联规则挖掘</el-button>
+      <el-button :class="{ active: isActive === 5 }" @click="activeIndex(5)">回归分析</el-button>
+      <el-button :class="{ active: isActive === 6 }" @click="activeIndex(6)">情感分析/文本挖掘</el-button>
     </div>
-  </template>
-  
-  <script setup>
-//   import AIGC from './AIGCLargeModel/index.vue'
-  import big from './components/bigData.vue'
-  import descriptiveStatistics from './components/descriptiveStatistics.vue'
-  import clusterAnalysis from './components/clusterAnalysis.vue'
-  import associationRuleMining from './components/associationRuleMining.vue'
-  import regressionAnalysis from './components/regressionAnalysis.vue'
-  const component=ref(big)
-  const pageData=[big,descriptiveStatistics,clusterAnalysis,associationRuleMining,regressionAnalysis]
-  const isActive=ref(1)
-  const activeIndex=(index)=>{
-    isActive.value=index
-    component.value=pageData[index-1]
-  }
-  </script>
-  
-  <style lang="scss" scoped>
-  .content{
-      color: #fff;
-  }
-  .rgzn_top{
-    margin-top: 20px;
-    .top_item{
-      img{
-        margin-right: 5px;
-      }    
-      .el-button{
-        padding-left: 49px !important;
-      }
-      .el-button:nth-child(1) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/11.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 47px;
-      }
-      .el-button:nth-child(2) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/22.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 47px;
-      }
-      .el-button:nth-child(3) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/33.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 47px;
-      }
-      .el-button:nth-child(4) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/44.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 30px;
-      }
-      .el-button:nth-child(5) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/55.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 25px;
-      }
-      .el-button:nth-child(6) {
-        width: 190px;
-        height: 50px;
-        background: url('../../assets/images/66.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 30px;
-        background-size: 100% 100%;
-      }
-      .el-button:nth-child(7) {
-        width: 170px;
-        height: 50px;
-        background: url('../../assets/images/77.png');
-        color:#FFFFFF;
-        border-color:#FFFFFF00;
-        padding:8px 5px 8px 20px;
-      }
-      .active{
-        background: url('../../assets/images/亮（钮）.png');
-      }
+    <div>
+      <component v-if="component" :is="component"></component>
+    </div>
+  </div>
+</template>
+<script setup>
+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);
+const activeIndex = (index) => {
+  isActive.value = index;
+  component.value = pageData[index - 1];
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  color: #fff;
+}
+.rgzn_top {
+  margin-top: 20px;
+  .top_item {
+    img {
+      margin-right: 5px;
+    }
+    .el-button {
+      padding-left: 49px !important;
+    }
+    .el-button:nth-child(1) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/11.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 47px;
+    }
+    .el-button:nth-child(2) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/22.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 47px;
+    }
+    .el-button:nth-child(3) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/33.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 47px;
+    }
+    .el-button:nth-child(4) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/44.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 30px;
+    }
+    .el-button:nth-child(5) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/55.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 25px;
+    }
+    .el-button:nth-child(6) {
+      width: 190px;
+      height: 50px;
+      background: url("../../assets/images/66.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 20px 8px 30px;
+      background-size: 100% 100%;
+    }
+    .el-button:nth-child(7) {
+      width: 170px;
+      height: 50px;
+      background: url("../../assets/images/77.png");
+      color: #ffffff;
+      border-color: #ffffff00;
+      padding: 8px 5px 8px 20px;
+    }
+    .active {
+      transform: scale(1.1);
+      transition: all 0.3s;
     }
   }
-  </style>
-  
-  
\ No newline at end of file
+}
+</style>
diff --git a/src/views/learningCenter/learningResources.vue b/src/views/learningCenter/learningResources.vue
index ddfbac4..1b9ed47 100644
--- a/src/views/learningCenter/learningResources.vue
+++ b/src/views/learningCenter/learningResources.vue
@@ -1,65 +1,60 @@
 <template>
   <div class="app-container">
-    <el-scrollbar height="780px" always>
-    <!-- <div class="app-container"> -->
+    <el-scrollbar :height="height + 'px'" always style="padding-right: 15px">
       <div class="main">
         <el-row :gutter="40">
           <el-col :span="3" v-for="i in item" :key="i">
             <div class="zs">
               <div class="el_top">
-                <a  target="_blank" @click="showResource(i.resourcesUrl)">
-                <span style="color:#FFFFFF">{{i.resourcesName}}</span>
+                <a target="_blank" @click="showResource(i.resourcesUrl)">
+                  <span>{{ i.resourcesName }}</span>
                 </a>
               </div>
-  
               <div class="el_bon">
-                <!-- <a :href="getImgLink(i.resourcesUrl)" target="_blank"> -->
-                  <a target="_blank" @click="showResource(i.resourcesUrl)">
-                  <img :src="getImg(i.resourcesImg)"/>
+                <a target="_blank" @click="showResource(i.resourcesUrl)">
+                  <img :src="getImg(i.resourcesImg)" />
                 </a>
               </div>
             </div>
           </el-col>
         </el-row>
       </div>
-    <!-- </div> -->
-  </el-scrollbar>
+    </el-scrollbar>
   </div>
-   
-  </template>
-  <script setup>
- import * as API from "@/api/prtrait/prtrait.js" 
-  import { getAssetsFile } from '@/utils';
-  import { getUserInfo } from '@/utils/auth'
- import { onMounted } from "vue";
-  const getImg=(i)=>{
-    return getAssetsFile(i)
-  }
-  const getImgLink=(i)=>{
-    return i
-  }
-  const data=ref({
-    "stuScoreDetailsDTO":{
-       "learningProjects":"资源学习",
-       "assessmentItems":"观看资源",
-       "viewingTime":0,
-       "userId":JSON.parse(getUserInfo()).userId,
-     }
-  })
-  const item=ref({})
- 
- onMounted(()=>{
-    API.learningResourcesView({module:data.value.stuScoreDetailsDTO.module}).then((res)=>{
-       item.value=res.data
-    })
- })
- 
-  const showResource=async(i)=>{
-    // const newWindow=window.open(`http://192.168.2.4:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
+</template>
+<script setup>
+import * as API from "@/api/prtrait/prtrait.js";
+import { getAssetsFile } from "@/utils";
+import { getUserInfo } from "@/utils/auth";
+import { computed, onMounted } from "vue";
+const getImg = (i) => {
+  return getAssetsFile(i);
+};
+const getImgLink = (i) => {
+  return i;
+};
+const data = ref({
+  stuScoreDetailsDTO: {
+    learningProjects: "资源学习",
+    assessmentItems: "观看资源",
+    viewingTime: 0,
+    userId: JSON.parse(getUserInfo()).userId,
+  },
+});
+const item = ref({});
+
+onMounted(() => {
+  API.learningResourcesView({ module: data.value.stuScoreDetailsDTO.module }).then((res) => {
+    item.value = res.data;
+  });
+});
+
+const showResource = async (i) => {
+  // const newWindow=window.open(`http://192.168.2.4:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
   //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
-  if(i.includes('mp4')){
-  const newWindow=window.open('','_blank')
-  newWindow.document.write(`
+  if (i.includes("mp4")) {
+    const newWindow = window.open("", "_blank");
+    newWindow.document.write(`
       <html>
       <head>
           <title>视频播放</title>
@@ -86,99 +81,104 @@
       </html>
   `);
   }
-  if(i.includes('pdf')){
+  if (i.includes("pdf")) {
     //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}#toolbar=0`)
-     window.open(`http://118.31.7.2:8042/file/${i}#toolbar=0`)
+    window.open(`http://118.31.7.2:8042/file/${i}#toolbar=0`);
     // window.open(`http://202.199.90.115:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
   }
-  
+};
+const timer = ref(null);
+let seconds = 0;
+onMounted(() => {
+  timer.value = setInterval(() => {
+    seconds++;
+  }, 1000);
+});
+onBeforeUnmount(() => {
+  item.value = {};
+  if (timer.value) {
+    clearInterval(timer.value);
   }
-  const timer=ref(null)
-    let seconds=0
-    onMounted(()=>{
-      timer.value=setInterval(()=>{
-        seconds++
-      },1000)
-    })
-    onBeforeUnmount(()=>{
-       item.value={}
-       if(timer.value){
-          clearInterval(timer.value)
-       }
-       data.value.stuScoreDetailsDTO.viewingTime=seconds
-       API.resourcesLearningScoreStatistics(data.value)
-    })
-  
-  
-  const taskTime=async()=>{
- 
+  data.value.stuScoreDetailsDTO.viewingTime = seconds;
+  API.resourcesLearningScoreStatistics(data.value);
+});
+// 拿到页面的高度
+const height = computed(() => {
+  return document.documentElement.clientHeight - 130;
+});
+onMounted(() => {
+  console.log(height.value, "document.documentElement.clientHeight");
+});
+</script>
+<style lang="scss" scoped>
+.app-container {
+  // background-color: #fff;
+  // border-radius: 6px;
+  // padding: 25px 25px 25px 0;
+  .k_main {
+    width: 100%;
+    display: inline-block;
+    margin: 20px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+    height: 750px;
+    background-color: white;
+    border-radius: 10px;
   }
-  </script>
-  <style lang="scss" scoped>
-  .app-container {
-    // background-color: #fff;
-    // border-radius: 6px;
-    // padding: 25px 25px 25px 0;
-    .k_main {
-      width: 100%;
-      display: inline-block;
-      margin: 20px;
-      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
-      height: 750px;
-      background-color: white;
-      border-radius: 10px;
-    }
-    .el-col-4 {
-      margin-bottom: 30px;
-    }
-    .zs {
-      margin-bottom: 36px;
-      border: 1px solid #dcdfe6;
-      border-radius: 8px;
-    }
-    .main {
-      width: 100%; /* 确保宽度不超过容器宽度 */
-  overflow-x: hidden; /* 确保不出现水平滚动条 */
-    }
-    .el_top {
-      height: 66px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 12px;
-      font-family: Source Han Sans CN;
-      font-weight: 550;
-      color: #333333;
-      padding: 7px;
-      text-align: center;
-    }
-    .el_bon {
-      display: flex;
-      justify-content: center;
-      background-color: whitesmoke;
-      // padding: 10px 27px 10px 27px;
-      img {
-        width: 159px;
-        height: 184px;
-      }
-    }
-    .el-row {
-      margin-bottom: 20px;
-    }
-    .el-row:last-child {
-      margin-bottom: 0;
-    }
-    .el-col {
-      border-radius: 4px;
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-    }
-  
-    .grid-content {
-      border-radius: 4px;
-      min-height: 36px;
+  .el-col-4 {
+    margin-bottom: 30px;
+  }
+  .zs {
+    margin-bottom: 36px;
+    border: 1px solid #dcdfe6;
+    border-radius: 8px;
+  }
+  .main {
+    width: 100%; /* 确保宽度不超过容器宽度 */
+    overflow-x: hidden; /* 确保不出现水平滚动条 */
+  }
+  .el_top {
+    height: 66px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-family: Source Han Sans CN;
+    font-weight: 550;
+    // color: #333333;
+    padding: 7px;
+    text-align: center;
+    background: #ffffff;
+    border-radius: 6px 6px 0 0;
+  }
+  .el_bon {
+    display: flex;
+    justify-content: center;
+    background-color: whitesmoke;
+    // padding: 10px 27px 10px 27px;
+    img {
+      width: 159px;
+      height: 190px;
     }
   }
-  </style>
-  
\ No newline at end of file
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-row:last-child {
+    margin-bottom: 0;
+  }
+  .el-col {
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+  }
+
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+}
+:deep(.el-scrollbar__thumb) {
+  background-color: #2179bd;
+}
+</style>
diff --git a/src/views/portraitModel/index.vue b/src/views/portraitModel/index.vue
index 296d657..5a7f79d 100644
--- a/src/views/portraitModel/index.vue
+++ b/src/views/portraitModel/index.vue
@@ -257,20 +257,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { defineExpose } from "vue";
 import * as portraitModel from "@/api/portraitModel";
 import mainContent from "@/views/components/mainContent.vue";
-import rfmAnalysis from "./components/rfmAnalysis.vue";
-import abcAnalysis from "./components/abcAnalysis.vue";
-import bostonAnalysis from "./components/bostonAnalysis.vue";
-import funnelAnalysis from "./components/funnelAnalysis.vue";
-import basketAnalysis from "./components/basketAnalysis.vue";
-import repurchaseAnalysis from "./components/repurchaseAnalysis.vue";
-import retainAnalysis from "./components/retainAnalysis.vue";
-import viscosityAnalysis from "./components/viscosityAnalysis.vue";
-import AARRRAnalysis from "./components/AARRRAnalysis.vue";
-import portraitAnalysis from "./components/portraitAnalysis.vue";
 import { onMounted } from "vue";
 const { proxy } = getCurrentInstance();
 const currentComponent = ref(null);
@@ -281,61 +269,61 @@ const fileTable = ref([]);
 const tabList = ref([
   {
     id: "1",
-    key: rfmAnalysis,
+    key: () => import('./components/rfmAnalysis.vue'),
     title: "RFM分析",
     backImg: "/src/assets/images/icon1.png",
   },
   {
     id: "2",
-    key: abcAnalysis,
+    key: () => import('./components/abcAnalysis.vue'),
     title: "帕累托/ABC分析",
     backImg: "/src/assets/images/icon2.png",
   },
   {
     id: "3",
-    key: bostonAnalysis,
+    key: () => import('./components/bostonAnalysis.vue'),
     title: "波士顿矩阵分析",
     backImg: "/src/assets/images/icon3.png",
   },
   {
     id: "4",
-    key: funnelAnalysis,
+    key: () => import('./components/funnelAnalysis.vue'),
     title: "转化分析-漏斗模型",
     backImg: "/src/assets/images/icon4.png",
   },
   {
     id: "5",
-    key: basketAnalysis,
+    key: () => import('./components/basketAnalysis.vue'),
     title: "购物篮分析",
     backImg: "/src/assets/images/icon5.png",
   },
   {
     id: "6",
-    key: repurchaseAnalysis,
+    key: () => import('./components/repurchaseAnalysis.vue'),
     title: "复购分析",
     backImg: "/src/assets/images/icon6.png",
   },
   {
     id: "7",
-    key: retainAnalysis,
+    key: () => import('./components/retainAnalysis.vue'),
     title: "留存分析",
     backImg: "/src/assets/images/icon7.png",
   },
   {
     id: "8",
-    key: viscosityAnalysis,
+    key: () => import('./components/viscosityAnalysis.vue'),
     title: "用户粘性分析",
     backImg: "/src/assets/images/icon8.png",
   },
   {
     id: "9",
-    key: AARRRAnalysis,
+    key: () => import('./components/AARRRAnalysis.vue'),
     title: "AARRR用户运营分析",
     backImg: "/src/assets/images/icon9.png",
   },
   {
     id: "10",
-    key: portraitAnalysis,
+    key: () => import('./components/portraitAnalysis.vue'),
     title: "用户画像分析",
     backImg: "/src/assets/images/icon10.png",
   },
@@ -343,7 +331,7 @@ const tabList = ref([
 // defineExpose({ submitMethod });
 onMounted(() => {
   // getTableData("用户属性表");
-  currentComponent.value = tabList.value[0].key
+  currentComponent.value =defineAsyncComponent( tabList.value[0].key)
 });
 const getTableData = (name) => {
   fileTable.value = [];
@@ -377,7 +365,7 @@ const handleChange = (index) => {
   }
 };
 const changeTab = (item) => {
-  currentComponent.value = item.key;
+  currentComponent.value = defineAsyncComponent(item.key);
   menuIndex.value = 0;
   //   tabIndex = item.id;
 };