'tj'

package.json

@@ -21,8 +21,7 @@
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "echarts": "5.4.0",
-    "echarts-stat": "^1.2.0",
-    "echarts-wordcloud": "^2.1.0",
+    "echarts-wordcloud": "2.0.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",

src/components/Crontab/hour.vue

@@ -87,7 +87,7 @@ function changeRadioValue(value) {
     } else if (value.indexOf('/') > -1) {
         const indexArr = value.split('/')
         average01.value = Number(indexArr[0])
-        average02.value = Number(indexArr[1])
+        average01.value = Number(indexArr[1])
         radioValue.value = 3
     } else {
         checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]

src/directive/common/lazy.js

@@ -0,0 +1,27 @@
+/*
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-21 13:43:25
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:43:48
+ * @FilePath: \vue3\src\directive\common\lazy.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export default {
+  mounted(el, binding) {
+    const loadIframe = () => {
+      const iframeSrc = binding.value;
+      el.src = iframeSrc;
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadIframe();
+          observer.unobserve(el);
+        }
+      });
+    });
+
+    observer.observe(el);
+  },
+};

src/directive/index.js

@@ -2,7 +2,7 @@
  * @Author: qinzhenpen qzp1807@126.com
  * @Date: 2024-07-15 15:44:46
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-20 15:53:35
+ * @LastEditTime: 2024-08-21 13:44:40
  * @FilePath: \vue3\src\directive\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,10 +10,12 @@ import hasRole from './permission/hasRole'
 import hasPermi from './permission/hasPermi'
 import copyText from './common/copyText'
 import debounce from './common/debounce'
+import lazy from './common/lazy'
 
 export default function directive(app){
   app.directive('hasRole', hasRole)
   app.directive('hasPermi', hasPermi)
   app.directive('copyText', copyText)
   app.directive('debounce', debounce)
+  app.directive('lazy', lazy)
 }

src/permission.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:48:30
+ * @FilePath: \vue3\src\permission.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import router from './router'
 import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress'

src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue

@@ -147,6 +147,7 @@ const handleChange2 = async (info) => {
   formData.append("userId", JSON.parse(getUserInfo()).userId);
   formData.append("module", "AI修图");
   formData.append("count", 2);
+
   try {
     previewFile2.value = [];
     const res = await uploadFile(formData);

src/views/digitalMarketTech/AIGCLargeModel/components/AIVenisonDiagram.vue

@@ -46,7 +46,7 @@
 </template>
 <script setup>
 import { MdPreview, MdCatalog } from "md-editor-v3";
-import { getToken,getUserInfo } from '@/utils/auth'
+import { getToken, getUserInfo } from "@/utils/auth";
 import useUserStore from "@/store/modules/user";
 import "md-editor-v3/lib/preview.css";
 import * as AI from "@/api/AI.js";
@@ -99,9 +99,9 @@ const sendExample = (item) => {
   input.value = item.text;
   sendText();
 };
-const aiUserid=computed(()=>{
+const aiUserid = computed(() => {
   return getUserInfo() ? JSON.parse(getUserInfo()) : "";
-})
+});
 const sendText = async () => {
   if (input.value.trim() === "" || isRequestPending.value) return;
   if (input.value.trim() === "") return;
@@ -178,7 +178,7 @@ const handleKeyDown = (event) => {
     event.preventDefault();
     sendText();
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue

@@ -1,17 +1,29 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-19 09:10:19
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 16:24:11
+ * @FilePath: \vue3\src\views\digitalMarketTech\AIGCLargeModel\components\thirdPartyAIGC.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-  <div class="app-containerO">
-    <iframe src="https://pidoutv.com/" frameborder="0"></iframe>
+  <div class="app-containerO" v-loading="loding">
+    <iframe v-lazy="'https://pidoutv.com/'" src="https://pidoutv.com/" frameborder="0"></iframe>
   </div>
 </template>
-
 <script setup>
-
+const { proxy } = getCurrentInstance();
+const loding = ref(true);
+onMounted(() => {
+  setTimeout(()=>{
+    loding.value = false;
+  },2000)
+});
 </script>
-
 <style scoped lang="scss">
 .app-containerO {
   margin: 10px;
-    box-shadow: 0px 0px 13px 0px #0452C6;
+  box-shadow: 0px 0px 13px 0px #0452c6;
   border-radius: 10px;
   width: 100%;
   height: 740px;

src/views/digitalMarketTech/AIGCLargeModel/index.vue

@@ -1,17 +1,20 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-20 18:09:46
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 09:13:12
+ * @FilePath: \vue3\src\views\digitalMarketTech\AIGCLargeModel\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="app-top">
     <el-button v-for="(item, index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{ item.text }}</el-button>
   </div>
-  <component :is="page"></component>
+  <component v-if="page" :is="page"></component>
 </template>
 <script setup>
-import AIVenison from "./components/AIVenisonDiagram.vue";
-import AIWriting from "./components/AIWriting.vue";
-import AIPicture from "./components/AIPicture.vue"
-import AIVideo from "./components/AIVideo.vue"
-import AIGC from "./components/thirdPartyAIGC.vue";
-const pageData = [AIVenison, AIWriting, null, AIPicture, AIVideo, AIGC];
-const page = ref(AIVenison);
+const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
+const page = ref(pageData[0]);
 const clickIndx = (index) => {
   page.value = pageData[index];
 };
@@ -24,10 +27,6 @@ const imgData = [
     text: "AI写作",
     img: "wz",
   },
-  {
-    text: "AI标题",
-    img: "bt",
-  },
   {
     text: "AI修图",
     img: "xt",
@@ -36,6 +35,10 @@ const imgData = [
     text: "AI视频",
     img: "sp",
   },
+  {
+    text: "第三方AIGC大模型",
+    img: "dmx",
+  },
 ];
 </script>
 

src/views/digitalMarketTech/artificialIntelligence/index.vue

@@ -1,19 +1,27 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 11:17:00
+ * @FilePath: \vue3\src\views\digitalMarketTech\artificialIntelligence\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
    <div class="app-top">
       <el-button v-for="(item,index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{item.text}}</el-button>
    </div>
- <component :is="page"></component>
+ <component v-if="page" :is="page"></component>
 </template>
-
 <script setup>
-import face from './components/face-recognition.vue'
-import article from './components/article-identification.vue'
-import recognition from './components/Image-recognition.vue'
-import voice from './components/voice-technology.vue'
-import Naturall from './components/Naturallanguageprocessing.vue'
-import Robot from './components/Robot-learning.vue'
-const pageData=[recognition,article,face,voice,Naturall,Robot]
-const page=ref(recognition)
+const pageData = [
+  defineAsyncComponent(() => import('./components/Image-recognition.vue')),
+  defineAsyncComponent(() => import('./components/article-identification.vue')),
+  defineAsyncComponent(() => import('./components/face-recognition.vue')),
+  defineAsyncComponent(() => import('./components/voice-technology.vue')),
+  defineAsyncComponent(() => import('./components/Naturallanguageprocessing.vue')),
+  defineAsyncComponent(() => import('./components/Robot-learning.vue')),
+];
+const page=ref(pageData[0])
 const clickIndx=(index)=>{
    page.value=pageData[index]
 }

src/views/digitalMarketTech/bigData/index.vue

@@ -1,76 +1,82 @@
+<!--
+ * @Author: qinzhenpen qzp1807@126.com
+ * @Date: 2024-08-16 17:56:32
+ * @LastEditors: qinzhenpen qzp1807@126.com
+ * @LastEditTime: 2024-08-21 13:18:12
+ * @FilePath: \vue3\src\views\digitalMarketTech\bigData\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="app-top">
-       <el-button v-for="(item,index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{item.text}}</el-button>
+    <el-button v-for="(item, index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{ item.text }}</el-button>
   </div>
- <component :is="page"></component>
+  <component v-if="page" :is="page"></component>
 </template>
 
 <script setup>
-import AIVenison from './components/whatBigData.vue'
-import technology from './components/technologyFramework.vue'
-import hadoop from './components/hadoop.vue'
-import HDFS from './components/HadoopHDFS.vue'
-import Marketing from './components/digitalMarketing.vue'
-const pageData=[AIVenison,technology,hadoop,HDFS,Marketing]
-const page=ref(AIVenison)
-const clickIndx=(index)=>{
-   page.value=pageData[index]
-}
-const imgData=[
+const pageData = [defineAsyncComponent(() => import("./components/whatBigData.vue")), defineAsyncComponent(() => import("./components/technologyFramework.vue")), defineAsyncComponent(() => import("./components/hadoop.vue")), defineAsyncComponent(() => import("./components/HadoopHDFS.vue")), defineAsyncComponent(() => import("./components/digitalMarketing.vue"))];
+const page = ref(pageData[0]);
+const clickIndx = (index) => {
+  page.value = pageData[index];
+};
+const imgData = [
+  {
+    text: "什么是大数据",
+    img: "wst",
+  },
+  {
+    text: "大数据技术框架",
+    img: "wz",
+  },
   {
-       text:'什么是大数据',
-       img:'wst'
-   },{
-       text:'大数据技术框架',
-       img:'wz'
-   },{
-       text:'HADOOP',
-       img:'bt'
-   },{
-       text:'HDFS',
-       img:'xt'
-   },{
-       text:'Apriori关联算法',
-       img:'sp'
-   }
-]
+    text: "HADOOP",
+    img: "bt",
+  },
+  {
+    text: "HDFS",
+    img: "xt",
+  },
+  {
+    text: "Apriori关联算法",
+    img: "sp",
+  },
+];
 </script>
 
 <style lang="scss" scoped>
-.content{
+.content {
   color: #fff;
 }
-.app-top{
-   background: #041C49;
+.app-top {
+  background: #041c49;
   padding: 10px;
   margin: 10px 10px -9px;
 }
-.el-button{
+.el-button {
   width: 150px;
   height: 36px;
-   color: #FFFFFF;
-   border-color:#FFFFFF00
+  color: #ffffff;
+  border-color: #ffffff00;
 }
-.wst{
-   background: url('@/assets/images/1.png');
+.wst {
+  background: url("@/assets/images/1.png");
 }
-.wz{
-   background: url('@/assets/images/2.png');
+.wz {
+  background: url("@/assets/images/2.png");
 }
-.bt{
-   background: url('@/assets/images/3.png');
+.bt {
+  background: url("@/assets/images/3.png");
 }
-.xt{
-   background: url('@/assets/images/4.png');
+.xt {
+  background: url("@/assets/images/4.png");
 }
-.sp{
-   background: url('@/assets/images/5.png');
+.sp {
+  background: url("@/assets/images/5.png");
 }
-.dmx{
-   background: url('@/assets/images/6.png');
+.dmx {
+  background: url("@/assets/images/6.png");
 }
-.el-button{
-   padding:8px 0px 8px 32px
+.el-button {
+  padding: 8px 0px 8px 32px;
 }
 </style>
-

src/views/digitalMarketTech/index.vue

@@ -1,57 +1,62 @@
 <!--
  * @Author: qinzhenpen qzp1807@126.com
- * @Date: 2024-08-12 09:29:39
+ * @Date: 2024-08-20 17:50:08
  * @LastEditors: qinzhenpen qzp1807@126.com
- * @LastEditTime: 2024-08-16 17:36:43
+ * @LastEditTime: 2024-08-21 10:30:04
  * @FilePath: \vue3\src\views\digitalMarketTech\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="rgzn_top  app-container">
+  <div class="rgzn_top app-container2">
     <div class="top_item">
-      <el-button :class="{'active':isActive===1}" @click="activeIndex(1)"><img src="@/assets/images/大数据.png">大数据</el-button>
-      <el-button :class="{'active':isActive===2}" @click="activeIndex(2)"><img src="@/assets/images/人工智能.png">人工智能</el-button>
-      <el-button :class="{'active':isActive===3}" @click="activeIndex(3)"><img src="@/assets/images/aigc.png">AIGC大模型</el-button>
+      <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">
+        <img src="@/assets/images/大数据.png" />
+        大数据
+      </el-button>
+      <el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">
+        <img src="@/assets/images/人工智能.png" />
+        人工智能
+      </el-button>
+      <el-button :class="{ active: isActive === 3 }" @click="activeIndex(3)">
+        <img src="@/assets/images/aigc.png" />
+        AIGC大模型
+      </el-button>
     </div>
     <div>
-      <component :is="component"></component>
+      <component v-if="component" :is="component"></component>
     </div>
   </div>
 </template>
-
 <script setup>
-import AIGC from './AIGCLargeModel/index.vue'
-import big from './bigData/index.vue'
-import artificial from './artificialIntelligence/index.vue'
-const component=ref(big)
-const pageData=[big,artificial,AIGC]
-const isActive=ref(1)
-const activeIndex=(index)=>{
-  isActive.value=index
-  component.value=pageData[index-1]
-}
+const pageData = [defineAsyncComponent(() => import("./bigData/index.vue")), defineAsyncComponent(() => import("./artificialIntelligence/index.vue")), defineAsyncComponent(() => import("./AIGCLargeModel/index.vue"))];
+const component = ref(pageData[0]);
+
+const isActive = ref(1);
+const activeIndex = (index) => {
+  isActive.value = index;
+  component.value = pageData[index - 1];
+};
 </script>
 
 <style lang="scss" scoped>
-.content{
+.content {
   color: #fff;
 }
-.rgzn_top{
-  .top_item{
-    img{
+.rgzn_top {
+  .top_item {
+    img {
       margin-right: 5px;
     }
-    .el-button{
+    .el-button {
       width: 180px;
       height: 50px;
-      background: url('../../assets/images/常（钮）.png');
-      color:#FFFFFF;
-      border-color:#FFFFFF00;
+      background: url("../../assets/images/常（钮）.png");
+      color: #ffffff;
+      border-color: #ffffff00;
     }
-    .active{
-      background: url('../../assets/images/亮（钮）.png');
+    .active {
+      background: url("../../assets/images/亮（钮）.png");
     }
   }
 }
 </style>
-

src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue

@@ -1,207 +1,353 @@
 <template>
-  <el-scrollbar ref="scrollbar" height="800px">
+  <!-- <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">
+        <el-scrollbar height="550px" style="padding: 0 10px" min-size="5">
         <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-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 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-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 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">
+            <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-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 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 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 style="margin-top: auto;">
+        </el-scrollbar>
+        <div style="margin-top: auto">
           <div class="startOver" @click="startOver()">
-            <img src="../../../assets/images/重新开始.png" alt="">
+            <img src="../../../assets/images/重新开始.png" alt="" />
             <span>重新开始</span>
           </div>
-</div>
-       
+        </div>
       </div>
       <div class="main-right">
+        <el-scrollbar height="500px" ref="scrollbar" style="padding: 20px">
         <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"/>
+          <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
+          <el-table :data="tableData2" style="width: 100%; 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>
+          <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 ref="exportTableRef" :data="tableData3" row-key="TSuid" style="width: 100%; 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>
+        </el-scrollbar>
       </div>
     </div>
-  </el-scrollbar>
+  <!-- </el-scrollbar> -->
 
-  <el-dialog
-    v-model="dialogVisible"
-    title="实训任务提交"
-    width="600"
-    custom-class="dialogClass"
-    :show-close="false"
-  >
+  <el-dialog v-model="dialogVisible" title="实训任务提交" width="400" custom-class="dialogClass" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <span :id="titleId" :class="titleClass">实训任务提交</span>
-       <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="">
+        <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>
+      <span style="color: #ffffff; font-weight: 700">最终筛选的关联子集：</span>
+      <div>
+        <el-checkbox v-model="formData.value1" label="{'牛奶', '面包'}" size="large" />
+      </div>
+      <div>
+        <el-checkbox v-model="formData.value2" label="{'牛奶', '黄油'}" size="large" />
+      </div>
+      <div>
+        <el-checkbox v-model="formData.value3" label="{'面包', '黄油'}" size="large" />
+      </div>
+      <div>
+        <el-checkbox v-model="formData.value4" label="{'啤酒', '黄油'}" size="large" />
+      </div>
+      <div>
+        <el-checkbox v-model="formData.value5" label="{'面包', '啤酒'}" size="large" />
+      </div>
+     
     </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 @click="task()">确定</el-button>
+        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
       </div>
     </template>
   </el-dialog>
 
-  <pop-model
-      :showModel="runResultShow"
-      title="关联规则挖掘"
-      @closePop="runResultShow = false"
-    >
+  <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>
+        <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 formData=reactive({
+  value1:'',
+  value2:'',
+  value3:'',
+  value4:'',
+  value5:'',
+})
+const task=()=>{
+  dialogVisible.value = false
+  proxy.$modal.msgSuccess("提交完成!");
+}
+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,22 +416,22 @@ print("关联规则：", association_rules)
 关联规则： [(('牛奶',), ('面包',), 0.6666666666666666), (('面包',), ('牛奶',), 0.6666666666666666), ...]
 \`\`\`
 通过这个实战应用，我们不仅学习了如何在Python中实现Apriori算法，还了解了它在购物篮分析中的具体应用。这为进一步的研究和实际应用提供了有用的指导。`);
-const getList=()=>{
-  API.selectionMetrics({userId:JSON.parse(getUserInfo()).userId}).then((res)=>{
-      res.data.forEach(element => {
+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)=>{
+        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()
@@ -304,185 +450,196 @@ const optionData=()=>{
 const selectedRows = ref([]);
 const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
+};
+const tableData2 = ref([]);
+const tableData3 = ref([]);
+const resTable2 = ref();
+const taskZB = () => {
+  flag.value = true;
+  if (selectedRows.value.length === 0) {
+    return proxy.$modal.msgWarning("请选择指标!");
+  }
+  const sendData = {
+    tableName: input.value,
+    userId: JSON.parse(getUserInfo()).userId,
+    fieldList: selectedRows.value.map((item) => item.text),
   };
-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
+  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([
+        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=()=>{
+]);
+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
+};
+const optionData2 = () => {
+  if (tableData2.value.length === 0) {
+    input2.value = "";
+    input3.value = "";
+    proxy.$modal.msgWarning("请先选择指标！");
+    return;
+  }
+  if (input2.value && input3.value) {
+    const sendData = ref({
+      mapList: tableData2.value,
+      method: input3.value,
+      userId: JSON.parse(getUserInfo()).userId,
+    });
+    API.dataPreprocessing(sendData.value).then((res) => {
+      resTable2.value = res.data;
+      tableData2.value = [];
+      tableData2.value = res.data;
       proxy.$modal.msgSuccess("预处理成功！");
-      })
+    });
   }
-}
+};
 
 //生产表格
 const 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 (resTable2.value.length === 0 || input2.value == ""  || input3.value == "") {
+    proxy.$modal.msgWarning("请先计算/对数据进行预处理！");
+    return;
   }
-      API.associationRuleMining(sendData).then((res)=>{
-        uplodFlag.value=true
-          tableData3.value=[]
-          tableLabel2.length=0
+  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
-                  })
+          label: key,
+          prop: key,
+        });
       }
-              tableData3.value=res.data
-      })
+      tableData3.value = res.data;
+    });
+  } else {
+    proxy.$modal.msgWarning("请模型参数进行设置！");
   }
-}
-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{
+.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;
+    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;
+    background: url("../../../assets/images/022.png");
+    color: #ffffff;
+    border-color: #ffffff00;
   }
 }
 .app-main {
   //   background-color: #f5f5f5;
-  min-height: 965px;
+  // min-height: 965px;
   margin: 5px 20px 0;
   height: 100%;
   display: flex;
-  overflow: auto;
+  // overflow: auto;
   .main-left {
     //水平居中
     flex-direction: column;
-    min-height: 965px;
+    // min-height: 965px;
     display: flex;
     width: 205px;
-  //   height: 100%;
+      height: 100%;
     background: #041c49;
-    padding: 0px 10px;
+    // padding: 0px 10px;
     .left-top {
       padding: 10px;
       span {
@@ -491,27 +648,27 @@ margin: 20px 20px 0;
         color: #3596eb;
       }
     }
-    .metrics-table{
+    .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;
+    .startOver {
+      // margin-left: -10px;
       width: 205px;
       height: 55px;
-        background: #00F4FF;
+      background: #00f4ff;
       //水平居中
       display: flex;
       align-items: center;
@@ -519,83 +676,86 @@ margin: 20px 20px 0;
       cursor: pointer;
     }
     :deep(.el-table) {
-    --el-table-row-hover-bg-color:#002651 !important;
-    --el-table-border-color: #7AC1FF;
-  .el-table__row{
+      --el-table-row-hover-bg-color: #002651 !important;
+      --el-table-border-color: #7ac1ff;
+      .el-table__row {
         background-color: #002652 !important;
-    color: #E6E6E6;
+        color: #e6e6e6;
+      }
     }
-}
   }
   .main-right {
     width: 1639px;
     //   height: 100%;
-    padding: 20px;
+    // 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-row-hover-bg-color: #002651 !important;
       --el-table-border-color: #002651;
-        --el-table-bg-color:#FFFFFF00;
-    .el-table__row{
+      --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');
+  .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;
+      --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{
+.analysisResults {
   .el-button {
     width: 89px;
     height: 31px;
-        background: url('../../../assets/images/下载.png');
-        color:black;
-        border-color:#FFFFFF00;
+    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{
+.from-item {
   padding: 20px;
-    .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;
   }
 }
-.dialog-footer{
+.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;
   }
 }
+:deep(.el-checkbox){
+  color:#ffffff;
+}
 </style>

src/views/digitalMarketingAlgorithms/components/bigData.vue

@@ -30,7 +30,7 @@
       <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
         <el-table-column v-for="column in tableLabel" :key="column" :prop="column.prop" :label="column.label" align="center">
           <template #default="{ row }">
-            {{ formatDate(row[column.prop])?? '...' }}
+            {{ formatDate(row[column.prop]) ?? "..." }}
           </template>
         </el-table-column>
       </el-table>
@@ -118,9 +118,10 @@ const selectType = (type) => {
   nzIndex.value = -1;
 };
 const getSurface = () => {
+  loading.value = true;
   portraitModel.getUserTableData(n_dataTableQuery.value).then((res) => {
-    tableData.value = res?.data?.list;
-    datatotal.value = res.data.total;
+    tableData.value = res?.data?.list
+    datatotal.value = res?.data?.total    
     tableLabel2.value = [];
     if (tableData.value[0]?.stepOneA) {
       arrhander.value = JSON.parse(tableData.value[0].stepOneA);
@@ -133,7 +134,13 @@ const getSurface = () => {
       });
       tableLabel.value = tableLabel2.value;
     }
-  });
+    setTimeout(()=>{
+      loading.value = false;
+    },1000)
+  }).catch(err=>{
+    loading.value = false;
+    tableData.value=[]
+  })
 };
 // 导入
 const importData = (e) => {
@@ -144,6 +151,7 @@ const importData = (e) => {
   formdata.append("userId", userInfo.userId);
   marketingAlgorithmApi.getMarketingAlgorithmImport(formdata).then((res) => {
     loading.value = false;
+    getZJData();
     proxy.$modal.msgSuccess("导入成功");
   });
 };

src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <el-scrollbar height="800px" v-loading="loading"> -->
   <div class="main-top">
     <span style="font-weight: bold; font-size: 18px; color: #3596eb">任务描述</span>
     <p style="font-weight: 400; font-size: 12px; color: #e6e6e6">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
@@ -16,6 +15,7 @@
   </div>
   <div class="app-main">
     <div class="main-left">
+      <el-scrollbar height="550px" style="padding-right: 10px" min-size="5">
         <div>
           <div class="left-top">
             <span>一、选择指标</span>
@@ -57,6 +57,7 @@
             <el-button @click="modelCalculation">计算</el-button>
           </div>
         </div>
+      </el-scrollbar>
       <div style="margin-top: auto">
         <div class="startOver" @click="restart">
           <img src="../../../assets/images/重新开始.png" alt="" />
@@ -65,6 +66,7 @@
       </div>
     </div>
     <div class="main-right">
+      <el-scrollbar height="550px" style="padding: 20px">
         <div>
           <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
           <el-table :data="analysisData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle">
@@ -75,14 +77,14 @@
         <div class="analysisResults" style="margin-top: 20px">
           <span style="font-weight: bold; font-size: 18px; color: #3596eb; display: block">分析结果：</span>
           <el-button @click="download">下载</el-button>
-        <el-table :data="tableData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
+          <el-table :data="tableData" style="width: 100%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350" v-loading="loading">
             <el-table-column v-for="column in tableLabel" :key="column.label" :prop="column.prop" :label="column.label" align="center"></el-table-column>
           </el-table>
           <pagination v-show="nNumberOfAnalysisResults > 0" :total="nNumberOfAnalysisResults" v-model:page="gAnalysisResults.index" v-model:limit="gAnalysisResults.size" @pagination="updatePageAnalysisResults" />
         </div>
+      </el-scrollbar>
     </div>
   </div>
-  <!-- </el-scrollbar> -->
   <el-dialog v-model="dialogVisible" title="实训任务提交" width="565" custom-class="dialogClass" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
@@ -154,37 +156,74 @@
       </div>
     </template>
   </el-dialog>
-  <pop-model
-      :showModel="runResultShow"
-      title="关联规则挖掘"
-      @closePop="runResultShow = false"
-    >
+  <pop-model :showModel="runResultShow" title="关联规则挖掘" @closePop="runResultShow = false">
     <template v-slot:content>
       <div>
-          <p style="font-weight: 700;font-size:22px">什么是描述性统计分析</p><p>描述性统计分析是数据分析的一种方法，旨在对数据进行总结和描述，以便更好地理解数据的特征和趋势。它主要通过统计指标和图表来呈现数据的基本特征，包括中心趋势、离散程度、分布形态等。<br />常用的描述性统计指标包括：</p><li>中心趋势：用于描述数据集的集中程度，常见的指标有均值、中位数和众数。</li><li>离散程度：用于描述数据的分散程度，常见的指标有方差、标准差和极差。</li><li>分布形态：用于描述数据的分布形态，常见的指标有偏度和峰度。</li><p>描述性统计分析还可以通过图表来展示数据的特征，常见的图表包括：</p>
-          <li>频数分布表和直方图：用于展示数据的分布情况，可以观察数据的集中程度和离散程度。</li><li>箱线图：用于展示数据的分布情况和离群值，可以观察数据的中位数、四分位数和异常值。</li><li>散点图：用于展示两个变量之间的关系，可以观察数据的相关性和趋势。</li><p>描述性统计分析可以帮助我们对数据有一个直观的了解，发现数据中的规律和异常情况，为后续的数据分析和决策提供基础。</p><p style="font-size:19px;font-weight:600">描述性统计分析的优势和局限性</p><p>描述性统计分析的优势和局限性如下：<br />优势：</p><li>简单易懂：描述性统计分析使用简单的统计指标和图表，可以直观地呈现数据的特征，使人们更容易理解和解释数据。</li>
-          <li>提供概览：通过描述性统计分析，可以获得数据的整体概览，包括数据的中心趋势（如均值、中位数）、数据的分布情况（如标准差、百分位数）等。</li><li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值或离群点，从而帮助我们识别数据质量问题或异常情况。</li><p>局限性：</p><li>缺乏深入分析：描述性统计分析主要关注数据的基本特征，无法深入挖掘数据背后的关联和因果关系。</li><li>无法进行推断：描述性统计分析只是对已有数据的总结和描述，并不能进行推断或预测。</li><li>受数据限制：描述性统计分析的结果受到数据本身的限制，如果数据质量不好或数据量较小，可能会导致结果不准确或不可靠。</li><p>综上所述，描述性统计分析是数据分析的重要工具，可以帮助我们了解数据的基本特征和趋势，但在深入分析和推断方面有一定的局限性。</p>
-          <p style="font-size:19px;font-weight:600">描述性统计分析的常用方法</p><p>描述性统计分析是对数据进行总结和描述的过程，常用的方法包括：</p><li>中心趋势度量：包括均值（mean）、中位数（median）和众数（mode），用于描述数据的集中程度。</li><li>离散程度度量：包括方差（variance）、标准差（standard deviation）和极差（range），用于描述数据的离散程度。</li><li>分布形状度量：包括偏度（skewness）和峰度（kurtosis），用于描述数据的分布形状。</li><li>频数统计：通过频数表、频率分布表和直方图等方式，统计数据的频数和频率。</li><li>百分位数：用于描述数据中某个特定百分比的位置，如中位数、四分位数等。</li><li>相关性分析：通过计算相关系数（如Pearson相关系数）来衡量两个变量之间的相关性。</li>
-          <p style="font-size:19px;font-weight:600">描述性统计分析的应用场景</p><p>描述性统计分析在许多领域和应用场景中都有重要的作用，以下是一些常见的应用场景：</p><li>提供概览：描述性统计分析可以提供数据的概览，帮助我们了解数据的整体特征和规律。通过计算中心趋势测量（如均值、中位数、众数）、离散程度测量（如方差、标准差、极差）和分布形态测量（如偏度、峰度），我们可以得到数据的集中趋势、离散程度和分布形态等信息。</li><li>数据比较：描述性统计分析可以帮助我们比较不同组或不同时间点的数据。通过比较不同组的中心趋势、离散程度和分布形态等，我们可以了解不同组之间的差异和相似之处，从而得出结论或提出假设。</li><li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值。通过观察离群点（如极端值）和异常值（如异常观测值），我们可以发现数据中的异常情况，进而进行进一步的分析和处理。</li>
-          <li>数据可视化：描述性统计分析可以通过可视化方法（如直方图、散点图、箱线图等）将数据转化为图形，使得数据更加直观和易于理解。数据可视化可以帮助我们发现数据的分布模式、趋势和关联关系，从而更好地理解数据。</li><li>数据摘要：描述性统计分析可以通过频数和频率分布表、百分位数等方式对数据进行摘要和概括。这些摘要信息可以帮助我们对数据进行快速的了解和比较，从而支持后续的决策和分析。</li><li>假设检验：描述性统计分析可以为假设检验提供依据，通过对样本数据的描述性统计分析，我们可以判断样本数据是否符合某种假设分布，从而进行假设检验。</li><li>数据报告和展示：描述性统计分析可以提供数据的概括性描述，用于撰写数据报告和展示，帮助他人更好地理解数据的特征和趋势。</li><li>数据清洗：描述性统计分析可以帮助我们发现数据中的问题和错误。通过观察数据的分布情况和异常值，我们可以判断数据的质量，并进行必要的数据清洗和修正。</li>
-          <li>数据探索：描述性统计分析是探索性数据分析的一部分，它可以帮助我们发现数据中的模式、关联和趋势。通过观察数据的分布、散点图、相关系数等，我们可以发现数据中的隐藏信息和规律。</li><li>决策支持：描述性统计分析可以为决策提供支持。通过对数据的摘要和可视化，我们可以获取有关数据的重要信息，帮助决策者做出基于数据的决策。</li><p style="font-size:19px;font-weight:600">如何进行描述性统计分析</p><p>开展描述性统计分析可以按照以下步骤进行：</p><li>收集数据：首先，需要收集所需的数据，可以是通过调查问卷、实验、观察或从现有数据源获取。</li><li>数据清洗：对收集到的数据进行清洗，包括处理缺失值、异常值和错误数据等。</li><li>描述性统计：使用统计方法计算数据的基本统计量，如平均值、中位数、标准差等，以了解数据的集中趋势、离散程度和分布情况。</li><li>可视化展示：将统计结果以图表的形式进行可视化展示，如直方图、箱线图、散点图等，以更直观地呈现数据的特征和趋势。</li>
-          <li>解读分析结果：根据统计分析的结果，解读数据的含义和趋势，提取有用的信息和洞察，并进行合理的解释和推断。</li><p style="font-size:19px;font-weight:600">描述性统计分析的注意事项</p><p>在进行描述性统计分析时，有以下几个注意事项：</p><li>数据质量：确保数据的准确性和完整性。进行数据清洗，处理缺失值、异常值和重复值等，以保证分析结果的可靠性。</li><li>数据类型：根据数据的类型选择合适的统计方法和图表。对于定量数据，可以使用均值、标准差等统计量；对于定性数据，可以使用频数和百分比等统计量。</li><li>样本大小：考虑样本大小对统计结果的影响。样本较小可能导致统计结果不够准确，而样本较大可能会增加计算复杂度。</li><li>数据分布：了解数据的分布情况，选择合适的统计方法和图表。例如，对于正态分布的数据，可以使用均值和标准差进行描述；对于偏态分布的数据，可以使用中位数和四分位数等进行描述。</li><li>上下文和目的：考虑数据分析的上下文和目的。根据具体的问题和需求，选择合适的统计方法和图表，以便更好地解读数据和提取有价值的信息。</li>
-          <li>解读和推断：描述性统计分析主要是对数据进行概括和描述，不能进行推断和因果分析。在解读结果时，要注意避免过度解读和误导。</li><li>可视化呈现：使用合适的图表和图形将数据可视化，以便更好地传达数据的特征和趋势。选择简洁明了的图表，避免图表过于复杂和混乱。</li>
+        <p style="font-weight: 700; font-size: 22px">什么是描述性统计分析</p>
+        <p>
+          描述性统计分析是数据分析的一种方法，旨在对数据进行总结和描述，以便更好地理解数据的特征和趋势。它主要通过统计指标和图表来呈现数据的基本特征，包括中心趋势、离散程度、分布形态等。
+          <br />
+          常用的描述性统计指标包括：
+        </p>
+        <li>中心趋势：用于描述数据集的集中程度，常见的指标有均值、中位数和众数。</li>
+        <li>离散程度：用于描述数据的分散程度，常见的指标有方差、标准差和极差。</li>
+        <li>分布形态：用于描述数据的分布形态，常见的指标有偏度和峰度。</li>
+        <p>描述性统计分析还可以通过图表来展示数据的特征，常见的图表包括：</p>
+        <li>频数分布表和直方图：用于展示数据的分布情况，可以观察数据的集中程度和离散程度。</li>
+        <li>箱线图：用于展示数据的分布情况和离群值，可以观察数据的中位数、四分位数和异常值。</li>
+        <li>散点图：用于展示两个变量之间的关系，可以观察数据的相关性和趋势。</li>
+        <p>描述性统计分析可以帮助我们对数据有一个直观的了解，发现数据中的规律和异常情况，为后续的数据分析和决策提供基础。</p>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的优势和局限性</p>
+        <p>
+          描述性统计分析的优势和局限性如下：
+          <br />
+          优势：
+        </p>
+        <li>简单易懂：描述性统计分析使用简单的统计指标和图表，可以直观地呈现数据的特征，使人们更容易理解和解释数据。</li>
+        <li>提供概览：通过描述性统计分析，可以获得数据的整体概览，包括数据的中心趋势（如均值、中位数）、数据的分布情况（如标准差、百分位数）等。</li>
+        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值或离群点，从而帮助我们识别数据质量问题或异常情况。</li>
+        <p>局限性：</p>
+        <li>缺乏深入分析：描述性统计分析主要关注数据的基本特征，无法深入挖掘数据背后的关联和因果关系。</li>
+        <li>无法进行推断：描述性统计分析只是对已有数据的总结和描述，并不能进行推断或预测。</li>
+        <li>受数据限制：描述性统计分析的结果受到数据本身的限制，如果数据质量不好或数据量较小，可能会导致结果不准确或不可靠。</li>
+        <p>综上所述，描述性统计分析是数据分析的重要工具，可以帮助我们了解数据的基本特征和趋势，但在深入分析和推断方面有一定的局限性。</p>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的常用方法</p>
+        <p>描述性统计分析是对数据进行总结和描述的过程，常用的方法包括：</p>
+        <li>中心趋势度量：包括均值（mean）、中位数（median）和众数（mode），用于描述数据的集中程度。</li>
+        <li>离散程度度量：包括方差（variance）、标准差（standard deviation）和极差（range），用于描述数据的离散程度。</li>
+        <li>分布形状度量：包括偏度（skewness）和峰度（kurtosis），用于描述数据的分布形状。</li>
+        <li>频数统计：通过频数表、频率分布表和直方图等方式，统计数据的频数和频率。</li>
+        <li>百分位数：用于描述数据中某个特定百分比的位置，如中位数、四分位数等。</li>
+        <li>相关性分析：通过计算相关系数（如Pearson相关系数）来衡量两个变量之间的相关性。</li>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的应用场景</p>
+        <p>描述性统计分析在许多领域和应用场景中都有重要的作用，以下是一些常见的应用场景：</p>
+        <li>提供概览：描述性统计分析可以提供数据的概览，帮助我们了解数据的整体特征和规律。通过计算中心趋势测量（如均值、中位数、众数）、离散程度测量（如方差、标准差、极差）和分布形态测量（如偏度、峰度），我们可以得到数据的集中趋势、离散程度和分布形态等信息。</li>
+        <li>数据比较：描述性统计分析可以帮助我们比较不同组或不同时间点的数据。通过比较不同组的中心趋势、离散程度和分布形态等，我们可以了解不同组之间的差异和相似之处，从而得出结论或提出假设。</li>
+        <li>发现异常值：描述性统计分析可以帮助我们发现数据中的异常值。通过观察离群点（如极端值）和异常值（如异常观测值），我们可以发现数据中的异常情况，进而进行进一步的分析和处理。</li>
+        <li>数据可视化：描述性统计分析可以通过可视化方法（如直方图、散点图、箱线图等）将数据转化为图形，使得数据更加直观和易于理解。数据可视化可以帮助我们发现数据的分布模式、趋势和关联关系，从而更好地理解数据。</li>
+        <li>数据摘要：描述性统计分析可以通过频数和频率分布表、百分位数等方式对数据进行摘要和概括。这些摘要信息可以帮助我们对数据进行快速的了解和比较，从而支持后续的决策和分析。</li>
+        <li>假设检验：描述性统计分析可以为假设检验提供依据，通过对样本数据的描述性统计分析，我们可以判断样本数据是否符合某种假设分布，从而进行假设检验。</li>
+        <li>数据报告和展示：描述性统计分析可以提供数据的概括性描述，用于撰写数据报告和展示，帮助他人更好地理解数据的特征和趋势。</li>
+        <li>数据清洗：描述性统计分析可以帮助我们发现数据中的问题和错误。通过观察数据的分布情况和异常值，我们可以判断数据的质量，并进行必要的数据清洗和修正。</li>
+        <li>数据探索：描述性统计分析是探索性数据分析的一部分，它可以帮助我们发现数据中的模式、关联和趋势。通过观察数据的分布、散点图、相关系数等，我们可以发现数据中的隐藏信息和规律。</li>
+        <li>决策支持：描述性统计分析可以为决策提供支持。通过对数据的摘要和可视化，我们可以获取有关数据的重要信息，帮助决策者做出基于数据的决策。</li>
+        <p style="font-size: 19px; font-weight: 600">如何进行描述性统计分析</p>
+        <p>开展描述性统计分析可以按照以下步骤进行：</p>
+        <li>收集数据：首先，需要收集所需的数据，可以是通过调查问卷、实验、观察或从现有数据源获取。</li>
+        <li>数据清洗：对收集到的数据进行清洗，包括处理缺失值、异常值和错误数据等。</li>
+        <li>描述性统计：使用统计方法计算数据的基本统计量，如平均值、中位数、标准差等，以了解数据的集中趋势、离散程度和分布情况。</li>
+        <li>可视化展示：将统计结果以图表的形式进行可视化展示，如直方图、箱线图、散点图等，以更直观地呈现数据的特征和趋势。</li>
+        <li>解读分析结果：根据统计分析的结果，解读数据的含义和趋势，提取有用的信息和洞察，并进行合理的解释和推断。</li>
+        <p style="font-size: 19px; font-weight: 600">描述性统计分析的注意事项</p>
+        <p>在进行描述性统计分析时，有以下几个注意事项：</p>
+        <li>数据质量：确保数据的准确性和完整性。进行数据清洗，处理缺失值、异常值和重复值等，以保证分析结果的可靠性。</li>
+        <li>数据类型：根据数据的类型选择合适的统计方法和图表。对于定量数据，可以使用均值、标准差等统计量；对于定性数据，可以使用频数和百分比等统计量。</li>
+        <li>样本大小：考虑样本大小对统计结果的影响。样本较小可能导致统计结果不够准确，而样本较大可能会增加计算复杂度。</li>
+        <li>数据分布：了解数据的分布情况，选择合适的统计方法和图表。例如，对于正态分布的数据，可以使用均值和标准差进行描述；对于偏态分布的数据，可以使用中位数和四分位数等进行描述。</li>
+        <li>上下文和目的：考虑数据分析的上下文和目的。根据具体的问题和需求，选择合适的统计方法和图表，以便更好地解读数据和提取有价值的信息。</li>
+        <li>解读和推断：描述性统计分析主要是对数据进行概括和描述，不能进行推断和因果分析。在解读结果时，要注意避免过度解读和误导。</li>
+        <li>可视化呈现：使用合适的图表和图形将数据可视化，以便更好地传达数据的特征和趋势。选择简洁明了的图表，避免图表过于复杂和混乱。</li>
       </div>
-        <!-- 情感分析 -->
-        <!-- <div>
-          <p style="font-weight: 700;font-size:22px">总览</p><p>文本分析指对文本数据进行表示 (representation)，处理(processing)和建模(modeling)来获得有用的见解(insight)。<br />文本分析的一个挑战是高维度(high dimensionality)。<br /><br />语料库: 指在自然语言处理中用于各种目的的大量文本(文档)集合。<br /><br />另一个挑战是: 大多数情况下文本是非结构化数据(not structured)。</p><img src="@/assets/images/f4001.png" alt=""><p style="font-weight: 700;font-size:22px">文本分析步骤</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.句法分析(Parsing): 是指处理非结构化文本使其具有一定的结构，供将来分析的过程。句法分析将文本进行解构，然后以一种更为结构化的方式来呈现。(unsturctured -> sturctured)<br />&nbsp;&nbsp;&nbsp;&nbsp;2.搜索和检索 (Search and retrieval): 在一个语料库中识别包含例如特殊单词，短语，主题或者实体(如人或组织)等搜索项(search items)的文档。这些搜索项通常称为关键术语 (key term)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.文本挖掘 (text mining): 指使用前两步产生的术语和索引来发现与感兴趣领域或问题相关的有意义的见解(discover meaningful insights)。<br />聚类(clustering) 和 分类 (classification) 都可以应用于文本挖掘。比如：将文档聚化成簇 或者 分类文本以进行情感分析(sentiment analysis)。<br />文本挖掘可以利用来自各个研究领域的方法和技术，如统计分析(statistical analysis)，信息检索(information retrieval)，数据挖掘(data mining)和自然语言处理(natural language processing)等。</p>
-          <p style="font-weight: 700;font-size:22px">挑战</p><li>语法(syntax): 涉及句子结构和语法规则。</li><li>语义(semantics): 是对句子含义的研究。</li><li>语用(pragmatic): 关注特定上下文中句子的含义。</li><li>同义词(homonyms): 具有相同拼写但含义不同的单词。</li><li>缩写词(acronyms): 是单词的缩写形式。</li><p>对于计算机来说，文本只是编码和数字的字符序列(sequence of characters)。它不了解语法，语义(semantic meanings)和其实用含义(pragmatic meaning)。<br />同时，在原始形式中，单词或者文本之间没有自然相似性度量(nature similarity metric)。(因此难以执行聚类或分类)<br />因此，我们需要以适合用于聚类和分类的形式来表示和处理文本。</p><p style="font-weight: 700;font-size:22px">第一步：收集原始文本数据(Collecting Raw Text)</p><p>对于文本分析来说，进行任何事情之前必须先收集数据。</p>
-          <li>可以在许多网站上对用户生成的内容(user-generated contents)开始积极的监控。（可以使用公开的API, 网页爬虫 web scraper/crawler）</li><li>准备处理非结构化或者半结构化数据。</li><p style="font-weight: 700;font-size:22px">第二步：表示文本 (Representing Text)</p><p>使用文本规范化的技术(text normalization techniques)对原始文本进行转化。</p><li>分词 (tokenization): 指从文本正文中分离(也叫做标记)单词 (seperating words)。</li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.按空格(spaces)来分词。(可能会把标点符号也给分出来，比如 day. )<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.基于标点符号和空格来分词 (可能会把 we’ll, can’t, state-of-the-art 等直接分开)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分词比想象中更困难 (résumé 和 resume)<br />没有一个分词器适用于每一种情形(no one-size-fits-all)。</p><li>大小写转换 (case folding): 将所有的字母都变成小写(或者都变成大写)。</li>
-          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.但是在一些情况下可能会出错: 如专有名词，缩写，公司名等(General Motors; WHO; US;)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.减少错误的方法是对不进行大小写转换的单词建立一个查找表(lookup table)。</p><li>停止词(stop word): 在给定语言中，并非所有的单词都需要被考虑。(比如：the, a, of, and, to等这些不太可能有助于语义的理解)</li><li>词根法(Lemmatization)和词干法(Stemming): 词根法看单词的意义(如: Goose, geese, goose, gander, ganders)。词干法看单词的组成(如：walk, walking, Walk, walks, walked)。最受欢迎的是"Porter stemmer", “WordNet”。</li><li>词袋法(Bag-of-words representation): 将文档转化成高维向量(high-dimensional vector)，向量指示了文档中各个单词的 存在/不存在/出现频率(presence/absence/frequency)。</li><img src="@/assets/images/f4002.png" alt=""><p>词袋法足够简单(朴素且过分简化问题 naive and over-simplified) 并被广泛应用于文本分析问题中 (是入门的好方法)。其将文档表示为一组词语(单词)，而忽略了其他信息(如顺序 order，上下文 context，推论 inferences和语义 semantics)。比如，“a dog bites a man” 和 "a man bites a dog"意思完全不同但是他们在词袋法里是同一种表示。</p>
-          <li>语料库的表示(Representation of a corpus): 语料库可以大到包括一种或者多种语言的所有文档，也可以小到仅限于特定领域(focused on a specific domains)。</li><p>大多数语料库都具有元数据，比如语料库的大小以及文本提取的领域。某些语料库包含了文本中出现的每个词的信息内容(Information content, IC)。信息内容是用来表示语料库中词语重要性(importance of a term)的度量。IC值较高的词语的重要性要比IC值较低的词语高。<br />然而，信息内容无法满足分析动态改变的非结构化数据的需求。问题：传统语料库和IC元数据都无法随着时间改变，因此任何语料库中不存在的词汇和任何新发明的词汇都会自动得到0的IC值。其次，传统语料库限制了用于文本分析算法 (text analysis algorithm) 的全部知识(语料库代表了整个知识库)。</p><p style="font-weight: 700;font-size:22px">第三步：词频-逆文档频率(TFIDF - Term Frequency - Inverse Document Frequency)</p><p style="font-weight: 600;font-size:18px">词频 (Term Frequency)</p><p>我们需要一个适应文本上下文(context)和性质(nature)的度量标准 metric (不像IC一样)。<br />TFIDF直接作用于所有获取的文档(fetched documents)。一旦获取的文档发生更改，TFIDF可以被轻松更新。TFIDF是一种广泛用于文本分析的措施。TFIDF对动态内容的处理也是相当强大且有效的，因为文档的变化只需要更新频率计数。<br />
-            给定一个单词 t 以及一个包含 n 个词的文档 d = {t1, t2, …, tn}。在 d 中 t 最简单的词频形式可以定义为 t 在 d 中出现的次数。</p><img src="@/assets/images/f4003.png" alt=""><p>可以对词频函数取对数，以获得更多数据细节。</p><img src="@/assets/images/f4005.png" alt=""><p>对于长文档，因为其包含的词语数量和种类多，因此往往有更高的词频值。这些因素导致了长文档的词频值的提升，以至于人们对长文档产生了偏见。为了解决这个问题，可以对词频进行规范化。</p><img src="@/assets/images/f4006.png" alt=""><p>Zipf’s Law：第 i 个最常见的单词出现在最常见词的 1/i 处。</p><p style="font-weight: 600;font-size:18px">Term Frequency 问题</p><p>词语的重要性仅取决于其在特定文档中的存在。如果该词语频繁出现在每个文档中怎么办？这个词还重要吗？我们需要拓宽我们的视野，不仅要在单个文档中，而是要在整个语料库中考虑一个词语的重要性。</p><p style="font-weight: 600;font-size:18px">词语的文档频率 (Document Frequency of a term)</p><p>文档频率被定义为语料库中包含一个词语的文档的数目。假设语料库D包含N个文档。语料库D={d1, d2, …, dn}中词语 t 的文档频率的定义为：</p><img src="@/assets/images/f4007.png" alt=""><p style="font-weight: 600;font-size:18px">逆文档频率 (Inverse Document Frequency)</p><p>逆文档频率的定义，N代表了语料库的总文档数，DF(t) 代表单词 t 的文档频率。逆文档频率就是他们的商取对数得到。</p>
-            <img src="@/assets/images/f4008.png" alt=""><p>如果词语不在语料库内，会导致分母为零，快速解决的方法是在分母上加个1。</p><img src="@/assets/images/f4009.png" alt=""><p>拥有较高IDF的词往往在整个语料库中更重要。罕见单词的IDF会很高。高频单词的IDF会很低。<br />警告，因为语料库中所有文档数目(N)是保持恒定的，因此IDF仅取决于DF，那些DF值最低的词获得相同的最高IDF。因此，有必要引入更多权重词来对文档中出现次数相同的词进行区分。</p><p style="font-weight: 600;font-size:18px">TFIDF</p><p>是一种既考虑词在单个文档中的普及率 prevalence (TF)，也考虑他在整个语料库中的稀缺程度 scarcity (IDF)的评估方法。词语 t 在文档 d 中的TFIDF 定义为 d 中 t 的词频 乘以语料库中 t 的文档频率，如下公式：</p><img src="@/assets/images/f4010.png" alt=""><p>一个词的TFIDF值越高，它在一个文档中出现的就越频繁，但在语料库的所有文档中出现得就越少。<br />TFIDF在简单和直接的计算中是很有效的，因为它不需要文本含义的相关知识。文档 d 被表示为 TFIDF(t, d)值 的高维向量 (high-dimensional vector)。<br /><br />TFIDF方法减少描述长度的数量相对较少，同时其很难揭示文档内或文档之间(intra-document or inter-document)的统计结构。<br />主题建模(Topic Modelling)能够解决这个问题。主题(topic): 经常在一起出现的具有相关含义的单词簇(a cluster of words)。每个词在主题中都有权重。</p>
-            <p style="font-weight: 700;font-size:22px">第四步：主题建模(Topic Modelling)</p><p>主题建模提供了文档的简短描述。同时，它也提供了自动组织，搜索，理解并汇总大量信息的工具。主题建模是统计模型，它研究一组文档中的单词，确定文档主题，并发现主题是如何相关(associated)或者如何随时间变化的(change over time)。</p><p style="font-weight: 600;font-size:18px">流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.揭开(uncover)语料库中隐藏的主题模式(hidden topical patterns)。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.根据这些主题来注释文档(annotate document)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.使用注释来组织，搜索，汇总文档(organize, search, summarise)。</p><p style="font-weight: 600;font-size:18px">主题(topic)</p><p>一个主题被正式定义为固定单词词汇分布(a distribution over a fixed vocabulary of words)。不同的主题在相同的词汇上会有不同的分布。词汇中的某个词可以在多个主题中有不同的权重。<br />一个文档通常由多个主题以不同的比例贯穿文本。</p><p style="font-weight: 600;font-size:18px">LDA</p><p>最简单的主题模型是Latent Dirichlet Allocation(LDA)，这是一个语料库的生成概率模型(generative probabilistic model of a corpus)。在生成概率模型中，从概率密度函数 (probability density function) 得出模型观测值 (model observation)。在LDA中，文档被视为生成过程 (generative process) 的结果(带有隐藏变量 hidden variables)。<br />LDA假设了：<br /></p><li>有一个固定的词汇表 (fixed vocabulary of words)。</li>
-            <li>潜在主题 (latent topics) 的数目是预定义的。</li><li>每个潜在主题的特征都是词汇表中单词的分布(Dirichlet distribution)。</li><li>每个文档表示潜在主题的一个随机混合(random mixture)。</li><p style="font-weight: 600;font-size:18px">LDA流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择文档的长度N。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.每个文档有一个在主题上的分布。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.为文档中的每个词分配一个主题，并选择相应的主题中的单词。<br /><br />在现实中，只有文档是可用(available)的。LDA的目标是为每一个文档推断潜在的主题(underlying topic)，主题比例 (topic proportion) 以及主题分配 (topic assignment)。</p><p style="font-weight: 600;font-size:18px">算法</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择一个值 k。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.对于每个文档，将文档中的每个单词随机分配给k个主题之一。<br />&nbsp;&nbsp;&nbsp;&nbsp;对于每个文档 d，遍历每个单词 w，然后计算 d 中分配给主题 t 的单词所占的比例，通常会应用平滑(smoothing)处理：</p><img src="@/assets/images/f4011.png" alt=""><p>&nbsp;&nbsp;&nbsp;&nbsp;4.计算从单词w来的所有文档中对主题 t 的分配比例 P(w | t)<br />&nbsp;&nbsp;&nbsp;&nbsp;5.计算属于主题 t 的单词 w 的概率：</p><img src="@/assets/images/f4012.png" alt=""> <p style="font-weight: 600;font-size:18px">注意事项</p> <p>LDA将文档视为主题的混合体。<br />LDA将主题视为单词的混合体。<br />如果单词 w 很有可能出现在主题 t 中，则所有带有 w 的文档将与主题 t 的关联更为紧密。<br />
-              如果单词 w 不太可能出现在主题 t 中，则包含 w 的文档出现在 t 中的可能性将会很小。因为文档 d 中剩余的单词将出现在其他主题中，因此 d 有更高的可能性属于那些主题。因此，就算我们将 w 添加到 t 中，也不会将很多该类文档带到 t 。</p><p style="font-weight: 600;font-size:18px">应用</p><p>主题模型可以被用于文档建模(document modelling)，文档分类(document classification)与协同过滤(collaborative filtering)。<br />主题模型不仅可以应用于文本数据，它还可以用于注释图像。</p><p style="font-weight: 700;font-size:22px">情感分析 (Sentiment Analysis)</p><p>情感分析使用统计和自然语言处理来从文本中挖掘观点来识别并抽取主观信息。<br />应用： 检测产品或者电影的评论的极性(polarity of reviews)。<br /><br />分析层面包括了文档层面(document)，语句层面(sentence)，短语层面(phrase)，和短文层面(short-text)。<br /><br />分类方法(朴素贝叶斯，最大熵，或者支持向量机SVM) 经常被用来提取语料库统计以用于情感分析。</p><img src="@/assets/images/f4013.png" alt=""><p>分类器仅基于对其进行训练的数据集来确定情感：</p><li>词义随着领域不同而改变。</li><li>因此模型无法直接应用于其他领域。</li><p>绝对的情感水平无法提供信息，应该建立一条基线，然后将其与观察值比较。比如，一个产品拥有40%正面推文，60%负面推文，貌似是不成功的。但是如果其他类似的成功产品也有类似的正负面百分比，那么不应该认为该产品是不成功的。<br /><br />如何对大量评论添加标签(积极，消极，中立):<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;1.使用表情符号 (小心阴阳怪气)<br />
-                &nbsp;&nbsp;&nbsp;&nbsp;2.使用 Amazon Mechanical Turk 互联网众包市场，将上标签工作外包出去。</p><p style="font-weight: 700;font-size:22px">获得结果(gaining insights)</p><p style="font-weight: 600;font-size:18px">词云(word cloud)</p><p>五星好评的词云</p><img src="@/assets/images/f4015.png" alt=""><p>一星差评的词云：</p><img src="@/assets/images/f4016.png" alt=""><p>TFIDF能够用来凸显评论中有信息量的单词。</p> <img src="@/assets/images/f4017.png" alt=""><p>LDA可以把评论归类为主题。圆盘的大小代表了词的权重。</p><img src="@/assets/images/f4018.png" alt=""><p>另一种可视化方式。</p><img src="@/assets/images/f4019.png" alt=""> 
-        </div> -->
     </template>
   </pop-model>
 </template>
@@ -204,7 +243,7 @@ const userStore = useUserStore();
 const algorithmStore = useAlgorithmStore();
 const multipleTableRef = ref(null);
 const b_introductionOfAlgorithmKnowledge = ref(false);
-const runResultShow=ref(false)
+const runResultShow = ref(false);
 const n_dataTableQuery = ref({
   index: 1,
   size: 5,
@@ -237,7 +276,7 @@ const modelParams = reactive([
     name: "标准误差",
   },
   {
-    name: "峰度;",
+    name: "峰度",
   },
   {
     name: "偏度",
@@ -256,7 +295,8 @@ const modelParams = reactive([
   },
 ]);
 const analysisData = ref([]);
-const analysisHanderKry = ref([]);
+const analysisHanderKry = ref([""]);
+
 const tableLabel = reactive([
   { prop: "average", label: "平均数" },
   { prop: "median", label: "中位数" },
@@ -339,6 +379,7 @@ const handleSelectionChange = (type) => {
 const submit = () => {
   if (g_indicatorData.value.length == 0) return proxy.$modal.msgWarning("请选择指标");
   marketingAlgorithmApi.getMarketingAlgorithm({ userId: n_dataTableQuery.value.userId, tableName: n_dataTableQuery.value.tableName, fieldList: g_indicatorData.value }).then((res) => {
+    analysisHanderKry.value.length = 0;
     analysisData.value = res.data;
     analysisHanderKry.value = Object.keys(res.data[0]);
     if (res.data.length > 5) {
@@ -355,12 +396,15 @@ const handlemodelSelectionChange = (type) => {
 };
 //计算
 const modelCalculation = () => {
-  if (analysisData.value.length == 0 && g_modelParameter.value.length == 0) {
+  if (analysisData.value.length == 0 || g_modelParameter.value.length == 0) {
     proxy.$modal.msgWarning("请先分析数据/未选择模型参数!");
     return;
   }
   const processedData = processArrayData(analysisHanderKry.value, analysisData.value);
-  marketingAlgorithmApi.getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: g_modelParameter.value, userId: n_dataTableQuery.value.userId })).then((res) => {
+  loading.value = true;
+  marketingAlgorithmApi
+    .getMarketingAlgorithmPreprocessing(JSON.stringify({ map: processedData, statistic: g_modelParameter.value, userId: n_dataTableQuery.value.userId }))
+    .then((res) => {
       aOriginalDataOfAnalysisResults2.value = res.data;
       tableData.value = res.data.map((item) => item.statistics);
       if (res.data.length > 5) {
@@ -368,6 +412,13 @@ const modelCalculation = () => {
         aOriginalDataOfAnalysisResults.value = res.data.map((item) => item.statistics);
         tableData.value = res.data.map((item) => item.statistics).slice(0, 5);
       }
+      setTimeout(() => {
+        loading.value = false;
+        proxy.$modal.msgSuccess("计算成功");
+      }, 1000);
+    })
+    .catch((err) => {
+      loading.value = true;
     });
 };
 function processArrayData(keys, data) {
@@ -393,7 +444,7 @@ const getIndicator = () => {
 };
 // 算法知识导入
 const knowledgeImport = () => {
-  runResultShow.value=true
+  runResultShow.value = true;
 };
 // 实训任务提交
 const submitTask = () => {
@@ -503,20 +554,21 @@ const download = () => {
 }
 .app-main {
   //   background-color: #f5f5f5;
-  min-height: 965px;
+  // min-height: 965px;
   margin: 5px 20px 0;
   height: 100%;
   display: flex;
-  overflow: auto;
+  // overflow: auto;
   .main-left {
     //水平居中
     flex-direction: column;
-    min-height: 965px;
+    // min-height: 965px;
     display: flex;
     width: 205px;
     height: 100%;
     background: #041c49;
-    padding: 0px 10px;
+    // padding: 0px 10px;
+    padding-left: 10px;
     .left-top {
       padding: 10px;
       span {
@@ -557,9 +609,9 @@ const download = () => {
     }
   }
   .main-right {
-    width: 1639px;
+    width: 100%;
     // height: 100%;
-    padding: 20px;
+    // padding: 20px;
     border: 1px solid #0452c6;
     :deep(.el-table__header) {
       .el-table__cell {
@@ -621,4 +673,8 @@ const download = () => {
 .dialog-footer {
   margin-bottom: 20px;
 }
+:deep(.pagination-container .el-pagination) {
+  // 去除定位
+  position: static;
+}
 </style>

src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue

@@ -181,8 +181,28 @@
       </div>
     </template>
   </el-dialog>
+  <popModel :showModel="b_algorithmKnowledge" title="情感分析" @closePop="b_algorithmKnowledge = false">
+    <template v-slot:content>      
+      <!-- 情感分析 -->
+      <div>
+            <p style="font-weight: 700;font-size:22px">总览</p><p>文本分析指对文本数据进行表示 (representation)，处理(processing)和建模(modeling)来获得有用的见解(insight)。<br />文本分析的一个挑战是高维度(high dimensionality)。<br /><br />语料库: 指在自然语言处理中用于各种目的的大量文本(文档)集合。<br /><br />另一个挑战是: 大多数情况下文本是非结构化数据(not structured)。</p><img src="@/assets/images/f4001.png" alt=""><p style="font-weight: 700;font-size:22px">文本分析步骤</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.句法分析(Parsing): 是指处理非结构化文本使其具有一定的结构，供将来分析的过程。句法分析将文本进行解构，然后以一种更为结构化的方式来呈现。(unsturctured -> sturctured)<br />&nbsp;&nbsp;&nbsp;&nbsp;2.搜索和检索 (Search and retrieval): 在一个语料库中识别包含例如特殊单词，短语，主题或者实体(如人或组织)等搜索项(search items)的文档。这些搜索项通常称为关键术语 (key term)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.文本挖掘 (text mining): 指使用前两步产生的术语和索引来发现与感兴趣领域或问题相关的有意义的见解(discover meaningful insights)。<br />聚类(clustering) 和 分类 (classification) 都可以应用于文本挖掘。比如：将文档聚化成簇 或者 分类文本以进行情感分析(sentiment analysis)。<br />文本挖掘可以利用来自各个研究领域的方法和技术，如统计分析(statistical analysis)，信息检索(information retrieval)，数据挖掘(data mining)和自然语言处理(natural language processing)等。</p>
+            <p style="font-weight: 700;font-size:22px">挑战</p><li>语法(syntax): 涉及句子结构和语法规则。</li><li>语义(semantics): 是对句子含义的研究。</li><li>语用(pragmatic): 关注特定上下文中句子的含义。</li><li>同义词(homonyms): 具有相同拼写但含义不同的单词。</li><li>缩写词(acronyms): 是单词的缩写形式。</li><p>对于计算机来说，文本只是编码和数字的字符序列(sequence of characters)。它不了解语法，语义(semantic meanings)和其实用含义(pragmatic meaning)。<br />同时，在原始形式中，单词或者文本之间没有自然相似性度量(nature similarity metric)。(因此难以执行聚类或分类)<br />因此，我们需要以适合用于聚类和分类的形式来表示和处理文本。</p><p style="font-weight: 700;font-size:22px">第一步：收集原始文本数据(Collecting Raw Text)</p><p>对于文本分析来说，进行任何事情之前必须先收集数据。</p>
+            <li>可以在许多网站上对用户生成的内容(user-generated contents)开始积极的监控。（可以使用公开的API, 网页爬虫 web scraper/crawler）</li><li>准备处理非结构化或者半结构化数据。</li><p style="font-weight: 700;font-size:22px">第二步：表示文本 (Representing Text)</p><p>使用文本规范化的技术(text normalization techniques)对原始文本进行转化。</p><li>分词 (tokenization): 指从文本正文中分离(也叫做标记)单词 (seperating words)。</li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.按空格(spaces)来分词。(可能会把标点符号也给分出来，比如 day. )<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.基于标点符号和空格来分词 (可能会把 we’ll, can’t, state-of-the-art 等直接分开)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分词比想象中更困难 (résumé 和 resume)<br />没有一个分词器适用于每一种情形(no one-size-fits-all)。</p><li>大小写转换 (case folding): 将所有的字母都变成小写(或者都变成大写)。</li>
+            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.但是在一些情况下可能会出错: 如专有名词，缩写，公司名等(General Motors; WHO; US;)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.减少错误的方法是对不进行大小写转换的单词建立一个查找表(lookup table)。</p><li>停止词(stop word): 在给定语言中，并非所有的单词都需要被考虑。(比如：the, a, of, and, to等这些不太可能有助于语义的理解)</li><li>词根法(Lemmatization)和词干法(Stemming): 词根法看单词的意义(如: Goose, geese, goose, gander, ganders)。词干法看单词的组成(如：walk, walking, Walk, walks, walked)。最受欢迎的是"Porter stemmer", “WordNet”。</li><li>词袋法(Bag-of-words representation): 将文档转化成高维向量(high-dimensional vector)，向量指示了文档中各个单词的 存在/不存在/出现频率(presence/absence/frequency)。</li><img src="@/assets/images/f4002.png" alt=""><p>词袋法足够简单(朴素且过分简化问题 naive and over-simplified) 并被广泛应用于文本分析问题中 (是入门的好方法)。其将文档表示为一组词语(单词)，而忽略了其他信息(如顺序 order，上下文 context，推论 inferences和语义 semantics)。比如，“a dog bites a man” 和 "a man bites a dog"意思完全不同但是他们在词袋法里是同一种表示。</p>
+            <li>语料库的表示(Representation of a corpus): 语料库可以大到包括一种或者多种语言的所有文档，也可以小到仅限于特定领域(focused on a specific domains)。</li><p>大多数语料库都具有元数据，比如语料库的大小以及文本提取的领域。某些语料库包含了文本中出现的每个词的信息内容(Information content, IC)。信息内容是用来表示语料库中词语重要性(importance of a term)的度量。IC值较高的词语的重要性要比IC值较低的词语高。<br />然而，信息内容无法满足分析动态改变的非结构化数据的需求。问题：传统语料库和IC元数据都无法随着时间改变，因此任何语料库中不存在的词汇和任何新发明的词汇都会自动得到0的IC值。其次，传统语料库限制了用于文本分析算法 (text analysis algorithm) 的全部知识(语料库代表了整个知识库)。</p><p style="font-weight: 700;font-size:22px">第三步：词频-逆文档频率(TFIDF - Term Frequency - Inverse Document Frequency)</p><p style="font-weight: 600;font-size:18px">词频 (Term Frequency)</p><p>我们需要一个适应文本上下文(context)和性质(nature)的度量标准 metric (不像IC一样)。<br />TFIDF直接作用于所有获取的文档(fetched documents)。一旦获取的文档发生更改，TFIDF可以被轻松更新。TFIDF是一种广泛用于文本分析的措施。TFIDF对动态内容的处理也是相当强大且有效的，因为文档的变化只需要更新频率计数。<br />
+              给定一个单词 t 以及一个包含 n 个词的文档 d = {t1, t2, …, tn}。在 d 中 t 最简单的词频形式可以定义为 t 在 d 中出现的次数。</p><img src="@/assets/images/f4003.png" alt=""><p>可以对词频函数取对数，以获得更多数据细节。</p><img src="@/assets/images/f4005.png" alt=""><p>对于长文档，因为其包含的词语数量和种类多，因此往往有更高的词频值。这些因素导致了长文档的词频值的提升，以至于人们对长文档产生了偏见。为了解决这个问题，可以对词频进行规范化。</p><img src="@/assets/images/f4006.png" alt=""><p>Zipf’s Law：第 i 个最常见的单词出现在最常见词的 1/i 处。</p><p style="font-weight: 600;font-size:18px">Term Frequency 问题</p><p>词语的重要性仅取决于其在特定文档中的存在。如果该词语频繁出现在每个文档中怎么办？这个词还重要吗？我们需要拓宽我们的视野，不仅要在单个文档中，而是要在整个语料库中考虑一个词语的重要性。</p><p style="font-weight: 600;font-size:18px">词语的文档频率 (Document Frequency of a term)</p><p>文档频率被定义为语料库中包含一个词语的文档的数目。假设语料库D包含N个文档。语料库D={d1, d2, …, dn}中词语 t 的文档频率的定义为：</p><img src="@/assets/images/f4007.png" alt=""><p style="font-weight: 600;font-size:18px">逆文档频率 (Inverse Document Frequency)</p><p>逆文档频率的定义，N代表了语料库的总文档数，DF(t) 代表单词 t 的文档频率。逆文档频率就是他们的商取对数得到。</p>
+              <img src="@/assets/images/f4008.png" alt=""><p>如果词语不在语料库内，会导致分母为零，快速解决的方法是在分母上加个1。</p><img src="@/assets/images/f4009.png" alt=""><p>拥有较高IDF的词往往在整个语料库中更重要。罕见单词的IDF会很高。高频单词的IDF会很低。<br />警告，因为语料库中所有文档数目(N)是保持恒定的，因此IDF仅取决于DF，那些DF值最低的词获得相同的最高IDF。因此，有必要引入更多权重词来对文档中出现次数相同的词进行区分。</p><p style="font-weight: 600;font-size:18px">TFIDF</p><p>是一种既考虑词在单个文档中的普及率 prevalence (TF)，也考虑他在整个语料库中的稀缺程度 scarcity (IDF)的评估方法。词语 t 在文档 d 中的TFIDF 定义为 d 中 t 的词频 乘以语料库中 t 的文档频率，如下公式：</p><img src="@/assets/images/f4010.png" alt=""><p>一个词的TFIDF值越高，它在一个文档中出现的就越频繁，但在语料库的所有文档中出现得就越少。<br />TFIDF在简单和直接的计算中是很有效的，因为它不需要文本含义的相关知识。文档 d 被表示为 TFIDF(t, d)值 的高维向量 (high-dimensional vector)。<br /><br />TFIDF方法减少描述长度的数量相对较少，同时其很难揭示文档内或文档之间(intra-document or inter-document)的统计结构。<br />主题建模(Topic Modelling)能够解决这个问题。主题(topic): 经常在一起出现的具有相关含义的单词簇(a cluster of words)。每个词在主题中都有权重。</p>
+              <p style="font-weight: 700;font-size:22px">第四步：主题建模(Topic Modelling)</p><p>主题建模提供了文档的简短描述。同时，它也提供了自动组织，搜索，理解并汇总大量信息的工具。主题建模是统计模型，它研究一组文档中的单词，确定文档主题，并发现主题是如何相关(associated)或者如何随时间变化的(change over time)。</p><p style="font-weight: 600;font-size:18px">流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.揭开(uncover)语料库中隐藏的主题模式(hidden topical patterns)。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.根据这些主题来注释文档(annotate document)。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.使用注释来组织，搜索，汇总文档(organize, search, summarise)。</p><p style="font-weight: 600;font-size:18px">主题(topic)</p><p>一个主题被正式定义为固定单词词汇分布(a distribution over a fixed vocabulary of words)。不同的主题在相同的词汇上会有不同的分布。词汇中的某个词可以在多个主题中有不同的权重。<br />一个文档通常由多个主题以不同的比例贯穿文本。</p><p style="font-weight: 600;font-size:18px">LDA</p><p>最简单的主题模型是Latent Dirichlet Allocation(LDA)，这是一个语料库的生成概率模型(generative probabilistic model of a corpus)。在生成概率模型中，从概率密度函数 (probability density function) 得出模型观测值 (model observation)。在LDA中，文档被视为生成过程 (generative process) 的结果(带有隐藏变量 hidden variables)。<br />LDA假设了：<br /></p><li>有一个固定的词汇表 (fixed vocabulary of words)。</li>
+              <li>潜在主题 (latent topics) 的数目是预定义的。</li><li>每个潜在主题的特征都是词汇表中单词的分布(Dirichlet distribution)。</li><li>每个文档表示潜在主题的一个随机混合(random mixture)。</li><p style="font-weight: 600;font-size:18px">LDA流程</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择文档的长度N。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.每个文档有一个在主题上的分布。<br />&nbsp;&nbsp;&nbsp;&nbsp;3.为文档中的每个词分配一个主题，并选择相应的主题中的单词。<br /><br />在现实中，只有文档是可用(available)的。LDA的目标是为每一个文档推断潜在的主题(underlying topic)，主题比例 (topic proportion) 以及主题分配 (topic assignment)。</p><p style="font-weight: 600;font-size:18px">算法</p><p>&nbsp;&nbsp;&nbsp;&nbsp;1.选择一个值 k。<br />&nbsp;&nbsp;&nbsp;&nbsp;2.对于每个文档，将文档中的每个单词随机分配给k个主题之一。<br />&nbsp;&nbsp;&nbsp;&nbsp;对于每个文档 d，遍历每个单词 w，然后计算 d 中分配给主题 t 的单词所占的比例，通常会应用平滑(smoothing)处理：</p><img src="@/assets/images/f4011.png" alt=""><p>&nbsp;&nbsp;&nbsp;&nbsp;4.计算从单词w来的所有文档中对主题 t 的分配比例 P(w | t)<br />&nbsp;&nbsp;&nbsp;&nbsp;5.计算属于主题 t 的单词 w 的概率：</p><img src="@/assets/images/f4012.png" alt=""> <p style="font-weight: 600;font-size:18px">注意事项</p> <p>LDA将文档视为主题的混合体。<br />LDA将主题视为单词的混合体。<br />如果单词 w 很有可能出现在主题 t 中，则所有带有 w 的文档将与主题 t 的关联更为紧密。<br />
+                如果单词 w 不太可能出现在主题 t 中，则包含 w 的文档出现在 t 中的可能性将会很小。因为文档 d 中剩余的单词将出现在其他主题中，因此 d 有更高的可能性属于那些主题。因此，就算我们将 w 添加到 t 中，也不会将很多该类文档带到 t 。</p><p style="font-weight: 600;font-size:18px">应用</p><p>主题模型可以被用于文档建模(document modelling)，文档分类(document classification)与协同过滤(collaborative filtering)。<br />主题模型不仅可以应用于文本数据，它还可以用于注释图像。</p><p style="font-weight: 700;font-size:22px">情感分析 (Sentiment Analysis)</p><p>情感分析使用统计和自然语言处理来从文本中挖掘观点来识别并抽取主观信息。<br />应用： 检测产品或者电影的评论的极性(polarity of reviews)。<br /><br />分析层面包括了文档层面(document)，语句层面(sentence)，短语层面(phrase)，和短文层面(short-text)。<br /><br />分类方法(朴素贝叶斯，最大熵，或者支持向量机SVM) 经常被用来提取语料库统计以用于情感分析。</p><img src="@/assets/images/f4013.png" alt=""><p>分类器仅基于对其进行训练的数据集来确定情感：</p><li>词义随着领域不同而改变。</li><li>因此模型无法直接应用于其他领域。</li><p>绝对的情感水平无法提供信息，应该建立一条基线，然后将其与观察值比较。比如，一个产品拥有40%正面推文，60%负面推文，貌似是不成功的。但是如果其他类似的成功产品也有类似的正负面百分比，那么不应该认为该产品是不成功的。<br /><br />如何对大量评论添加标签(积极，消极，中立):<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;1.使用表情符号 (小心阴阳怪气)<br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;2.使用 Amazon Mechanical Turk 互联网众包市场，将上标签工作外包出去。</p><p style="font-weight: 700;font-size:22px">获得结果(gaining insights)</p><p style="font-weight: 600;font-size:18px">词云(word cloud)</p><p>五星好评的词云</p><img src="@/assets/images/f4015.png" alt=""><p>一星差评的词云：</p><img src="@/assets/images/f4016.png" alt=""><p>TFIDF能够用来凸显评论中有信息量的单词。</p> <img src="@/assets/images/f4017.png" alt=""><p>LDA可以把评论归类为主题。圆盘的大小代表了词的权重。</p><img src="@/assets/images/f4018.png" alt=""><p>另一种可视化方式。</p><img src="@/assets/images/f4019.png" alt=""> 
+          </div>
+    </template>
+  </popModel>
 </template>
 <script setup>
+import popModel from "@/views/components/popModal.vue";
+
 import { paginate } from "@/utils/index.js";
 import * as echarts from "echarts";
 import * as XLSX from "XLSX";
@@ -195,6 +215,8 @@ import html2canvas from "html2canvas";
 import useAlgorithmStore from "@/store/modules/algorithm.js";
 import useUserStore from "@/store/modules/user";
 import { getUserInfo } from "@/utils/auth";
+// 算法知识
+const b_algorithmKnowledge=ref(false)
 const userInfo = JSON.parse(getUserInfo());
 const loading = ref(false);
 const loading2 = ref(false);
@@ -361,7 +383,7 @@ const getIndicator = () => {
 };
 // 算法知识导入
 const knowledgeImport = () => {
-  b_introductionOfAlgorithmKnowledge.value = true;
+  b_algorithmKnowledge.value = true;
 };
 // 实训任务提交
 const submitTask = () => {
@@ -470,7 +492,9 @@ const sentimentAnalysis = () => {
   }
   if (g_analyzeTheNumberOfDataItems.value == "") return proxy.$modal.msgWarning("请先选择指标/手动输入进行情感分析!");
   loading.value = true;
-  marketingAlgorithmApi.getMarketingAlgorithmSentiment({ id: s_commentType.value, userId: n_dataTableQuery.value.userId, content: g_analyzeTheNumberOfDataItems.value, modelType: preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3 }).then((res) => {
+  marketingAlgorithmApi
+    .getMarketingAlgorithmSentiment({ id: s_commentType.value, userId: n_dataTableQuery.value.userId, content: g_analyzeTheNumberOfDataItems.value, modelType: preProcessText.value.text3 == "词云生成" ? "词频分析" : preProcessText.value.text3 })
+    .then((res) => {
       if (preProcessText.value.text3 === "词云生成") {
         nOriginalWordFrequency.value = res.data;
         initChart();
@@ -495,6 +519,9 @@ const sentimentAnalysis = () => {
       }
       loading.value = false;
       proxy.$modal.msgSuccess("分析成功");
+    })
+    .catch((err) => {
+      loading.value = false;
     });
 };
 // 清空

src/views/digitalMarketingAlgorithms/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rgzn_top app-container">
+  <div class="rgzn_top app-container2">
     <div class="top_item">
       <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">用户数据库</el-button>
       <el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">描述性统计</el-button>
@@ -7,24 +7,15 @@
       <el-button :class="{ active: isActive === 4 }" @click="activeIndex(4)">关联规则挖掘</el-button>
       <el-button :class="{ active: isActive === 5 }" @click="activeIndex(5)">回归分析</el-button>
       <el-button :class="{ active: isActive === 6 }" @click="activeIndex(6)">情感分析/文本挖掘</el-button>
-      <!-- <el-button :class="{'active':isActive===7}" @click="activeIndex(7)">决策树分析</el-button> -->
     </div>
     <div>
-      <component :is="component"></component>
+      <component v-if="component" :is="component"></component>
     </div>
   </div>
 </template>
-
 <script setup>
-//   import AIGC from './AIGCLargeModel/index.vue'
-import big from "./components/bigData.vue";
-import descriptiveStatistics from "./components/descriptiveStatistics.vue";
-import clusterAnalysis from "./components/clusterAnalysis.vue";
-import associationRuleMining from "./components/associationRuleMining.vue";
-import regressionAnalysis from "./components/regressionAnalysis.vue";
-import emotionAnalysis from "./components/emotion-analysis.vue";
-const component = ref(emotionAnalysis);
-const pageData = [big, descriptiveStatistics, clusterAnalysis, associationRuleMining, regressionAnalysis, emotionAnalysis];
+const pageData = [defineAsyncComponent(() => import("./components/bigData.vue")), defineAsyncComponent(() => import("./components/descriptiveStatistics.vue")), defineAsyncComponent(() => import("./components/clusterAnalysis.vue")), defineAsyncComponent(() => import("./components/associationRuleMining.vue")), defineAsyncComponent(() => import("./components/regressionAnalysis.vue")), defineAsyncComponent(() => import("./components/emotion-analysis.vue"))];
+const component = ref(pageData[0]);
 const isActive = ref(1);
 const activeIndex = (index) => {
   isActive.value = index;

src/views/learningCenter/learningResources.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="app-container">
-    <el-scrollbar height="780px" always>
-      <!-- <div class="app-container"> -->
+    <el-scrollbar :height="height + 'px'" always style="padding-right: 15px">
       <div class="main">
         <el-row :gutter="40">
           <el-col :span="3" v-for="i in item" :key="i">
@@ -11,9 +10,7 @@
                   <span>{{ i.resourcesName }}</span>
                 </a>
               </div>
-
               <div class="el_bon">
-                <!-- <a :href="getImgLink(i.resourcesUrl)" target="_blank"> -->
                 <a target="_blank" @click="showResource(i.resourcesUrl)">
                   <img :src="getImg(i.resourcesImg)" />
                 </a>
@@ -22,7 +19,6 @@
           </el-col>
         </el-row>
       </div>
-      <!-- </div> -->
     </el-scrollbar>
   </div>
 </template>
@@ -30,7 +26,7 @@
 import * as API from "@/api/prtrait/prtrait.js";
 import { getAssetsFile } from "@/utils";
 import { getUserInfo } from "@/utils/auth";
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 const getImg = (i) => {
   return getAssetsFile(i);
 };
@@ -106,8 +102,13 @@ onBeforeUnmount(() => {
   data.value.stuScoreDetailsDTO.viewingTime = seconds;
   API.resourcesLearningScoreStatistics(data.value);
 });
-
-const taskTime = async () => {};
+// 拿到页面的高度
+const height = computed(() => {
+  return document.documentElement.clientHeight - 130;
+});
+onMounted(() => {
+  console.log(height.value, "document.documentElement.clientHeight");
+});
 </script>
 <style lang="scss" scoped>
 .app-container {
@@ -156,7 +157,7 @@ const taskTime = async () => {};
     // padding: 10px 27px 10px 27px;
     img {
       width: 159px;
-      height: 184px;
+      height: 190px;
     }
   }
   .el-row {
@@ -177,4 +178,7 @@ const taskTime = async () => {};
     min-height: 36px;
   }
 }
+:deep(.el-scrollbar__thumb) {
+  background-color: #2179bd;
+}
 </style>

src/views/portraitModel/index.vue

@@ -257,20 +257,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { defineExpose } from "vue";
 import * as portraitModel from "@/api/portraitModel";
 import mainContent from "@/views/components/mainContent.vue";
-import rfmAnalysis from "./components/rfmAnalysis.vue";
-import abcAnalysis from "./components/abcAnalysis.vue";
-import bostonAnalysis from "./components/bostonAnalysis.vue";
-import funnelAnalysis from "./components/funnelAnalysis.vue";
-import basketAnalysis from "./components/basketAnalysis.vue";
-import repurchaseAnalysis from "./components/repurchaseAnalysis.vue";
-import retainAnalysis from "./components/retainAnalysis.vue";
-import viscosityAnalysis from "./components/viscosityAnalysis.vue";
-import AARRRAnalysis from "./components/AARRRAnalysis.vue";
-import portraitAnalysis from "./components/portraitAnalysis.vue";
 import { onMounted } from "vue";
 const { proxy } = getCurrentInstance();
 const currentComponent = ref(null);
@@ -281,61 +269,61 @@ const fileTable = ref([]);
 const tabList = ref([
   {
     id: "1",
-    key: rfmAnalysis,
+    key: () => import('./components/rfmAnalysis.vue'),
     title: "RFM分析",
     backImg: "src/assets/images/icon1.png",
   },
   {
     id: "2",
-    key: abcAnalysis,
+    key: () => import('./components/abcAnalysis.vue'),
     title: "帕累托/ABC分析",
     backImg: "src/assets/images/icon2.png",
   },
   {
     id: "3",
-    key: bostonAnalysis,
+    key: () => import('./components/bostonAnalysis.vue'),
     title: "波士顿矩阵分析",
     backImg: "src/assets/images/icon3.png",
   },
   {
     id: "4",
-    key: funnelAnalysis,
+    key: () => import('./components/funnelAnalysis.vue'),
     title: "转化分析-漏斗模型",
     backImg: "src/assets/images/icon4.png",
   },
   {
     id: "5",
-    key: basketAnalysis,
+    key: () => import('./components/basketAnalysis.vue'),
     title: "购物篮分析",
     backImg: "src/assets/images/icon5.png",
   },
   {
     id: "6",
-    key: repurchaseAnalysis,
+    key: () => import('./components/repurchaseAnalysis.vue'),
     title: "复购分析",
     backImg: "src/assets/images/icon6.png",
   },
   {
     id: "7",
-    key: retainAnalysis,
+    key: () => import('./components/retainAnalysis.vue'),
     title: "留存分析",
     backImg: "src/assets/images/icon7.png",
   },
   {
     id: "8",
-    key: viscosityAnalysis,
+    key: () => import('./components/viscosityAnalysis.vue'),
     title: "用户粘性分析",
     backImg: "src/assets/images/icon8.png",
   },
   {
     id: "9",
-    key: AARRRAnalysis,
+    key: () => import('./components/AARRRAnalysis.vue'),
     title: "AARRR用户运营分析",
     backImg: "src/assets/images/icon9.png",
   },
   {
     id: "10",
-    key: portraitAnalysis,
+    key: () => import('./components/portraitAnalysis.vue'),
     title: "用户画像分析",
     backImg: "src/assets/images/icon10.png",
   },
@@ -343,7 +331,7 @@ const tabList = ref([
 // defineExpose({ submitMethod });
 onMounted(() => {
   // getTableData("用户属性表");
-  currentComponent.value = tabList.value[0].key
+  currentComponent.value =defineAsyncComponent( tabList.value[0].key)
 });
 const getTableData = (name) => {
   fileTable.value = [];
@@ -377,7 +365,7 @@ const handleChange = (index) => {
   }
 };
 const changeTab = (item) => {
-  currentComponent.value = item.key;
+  currentComponent.value = defineAsyncComponent(item.key);
   menuIndex.value = 0;
   //   tabIndex = item.id;
 };