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 e1e880c..ecece67 100644
--- a/package.json
+++ b/package.json
@@ -21,14 +21,11 @@
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "echarts": "5.4.0",
-    "echarts-stat": "^1.2.0",
-    "echarts-wordcloud": "^2.1.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",
-    "html2canvas": "^1.4.1",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
     "jspdf": "^2.5.1",
diff --git a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
index a96c9ed..2f3cd22 100644
--- a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
+++ b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
@@ -1,207 +1,344 @@
 <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-button @click="runResultShow=true"><img src="../../../assets/images/导入.png" alt="">算法知识导入</el-button>
-        <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 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" /> -->
+          <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>
+  <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 * as XLSX from 'xlsx';
-import { MdEditor,MdPreview } from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
-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, reactive } from 'vue';
+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 { 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
@@ -270,201 +407,200 @@ print("关联规则：", association_rules)
 关联规则： [(('牛奶',), ('面包',), 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)=>{
+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;
   }
-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 (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 exportTableRef = ref(null);
-const uplodFlag=ref(false)
-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 uplodFlag = ref(false);
+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) => {
+      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)=>{
-        uplodFlag.value=true
-          tableData3.value=[]
-          tableLabel2.length=0
-              for (const key in res.data[0]) {
-                  tableLabel2.push({
-                      label:key,
-                      prop:key
-                  })
-              }
-              tableData3.value=res.data
-      })
+      tableData3.value = res.data;
+    });
   }
-}
-const upload=()=>{
+};
+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
-}
+  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;
@@ -479,7 +615,7 @@ margin: 20px 20px 0;
     min-height: 965px;
     display: flex;
     width: 205px;
-  //   height: 100%;
+    //   height: 100%;
     background: #041c49;
     padding: 0px 10px;
     .left-top {
@@ -490,111 +626,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>
\ No newline at end of file
+</style>
diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
index e87c6b9..4e9f514 100644
--- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
@@ -1,259 +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-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">
+  <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 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 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 @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>
+      <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 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="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>
-      <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>
+      <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>
 
-    <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>
+  <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>
-    </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 ecStat from 'echarts-stat';
-  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 = () => {
+      </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");
   };
 
   // 限制红色通道较低，绿色和蓝色通道较高
-  const r = randomValue(0, 128);  // 红色通道较低 (0-128)
+  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 },
     });
   });
 
@@ -261,436 +332,437 @@ const algorithmicKnowledge=()=>{
   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 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 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 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 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 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: "缺失值处理--剔除数据",
+  },
+  {
+    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 (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 showChart = ref(false);
 //生产表格
-const nowData=ref([])
-  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=[]
-            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)=>{
+const nowData = ref([]);
+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 = [];
+        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'  // 平滑滚动
-                  });
-                }
-            }, 100);
         });
-    }
+      });
+    nextTick(() => {
+      setTimeout(() => {
+        const scrollContainer = scrollbar.value?.$el.querySelector(".el-scrollbar__wrap");
+        if (scrollContainer) {
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollHeight,
+            behavior: "smooth", // 平滑滚动
+          });
+        }
+      }, 100);
+    });
   }
-  const exportTableRef = ref(null);
-  const upLoad=()=>{
-    const tableDom = exportTableRef.value?.$el;
+};
+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 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=[]
-  }
+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 {
+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;
       }
+    }
+  }
+  .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;
+}
+.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-table__expand-icon){
-    color: #9126FE;
-    .el-icon{
-      font-size: 16px;
-    }
+}
+: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;
   }
-  </style>
\ No newline at end of file
+}
+.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/emotion-analysis.vue b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
index 637f12a..a34e331 100644
--- a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
@@ -186,8 +186,8 @@
 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 "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";
diff --git a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
index 2eb9f82..7a0beaa 100644
--- a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
@@ -235,7 +235,6 @@
   <script setup>
   import popModel from "@/views/components/popModal.vue";
   import * as echarts from 'echarts';
-  import ecStat from 'echarts-stat';
   import * as API from '@/api/AI.js'
   import { getUserInfo } from "@/utils/auth";
   import * as XLSX from 'xlsx'