From c15221ba1a74c1d740e3166e592302c08f60bdc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E4=BD=B3=20=E5=8D=9A?=
 <12742597+fang-jiabo@user.noreply.gitee.com>
Date: Fri, 16 Aug 2024 10:27:36 +0800
Subject: [PATCH] 'tj'

---
 .../components/clusterAnalysis.vue            | 415 ++++++++++++++++++
 .../components/descriptiveStatistics.vue      |  34 +-
 .../digitalMarketingAlgorithms/index.vue      |   3 +-
 3 files changed, 450 insertions(+), 2 deletions(-)
 create mode 100644 src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue

diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
new file mode 100644
index 0000000..fbcffde
--- /dev/null
+++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
@@ -0,0 +1,415 @@
+<template>
+    <el-scrollbar height="800px">
+      <div class="main-top">
+          <span style="font-weight: bold;font-size: 18px;color: #3596EB;">任务描述</span>
+          <p style="font-weight: 400;font-size: 12px;color: #E6E6E6;">（给出任务清单参考，做哪些数据的统计分析）Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
+      </div>
+      <div class="main-but">
+          <el-button><img src="../../../assets/images/导入.png" alt="">算法知识导入</el-button>
+          <el-button  @click="taskSubmit"><img src="../../../assets/images/提交.png" alt="">实训任务提交</el-button>
+      </div>
+      <div class="app-main">
+        <div class="main-left">
+          <div>
+              <div class="left-top">
+            <span>一、选择指标</span>
+          </div>
+          <div class="metrics">
+              <el-select v-model="input" placeholder="请选择数据" style="width: 180px">
+                  <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">
+                  <el-table-column type="selection" prop="date" label="Date"  align="center"/>
+                  <el-table-column prop="name" label="指标"  align="center"/>
+              </el-table>
+              <el-button>确定</el-button>
+          </div>
+          <div class="left-top">
+            <span>二、数据预处理</span>
+          </div>
+          <div class="metrics">
+              <el-select v-model="input" placeholder="请选择数据" style="width: 180px">
+                  <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                  />
+              </el-select>
+          </div>
+          <div class="metrics" style="margin-top:15px">
+              <el-select v-model="input" placeholder="请选择数据" style="width: 180px">
+                  <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                  />
+              </el-select>
+          </div>
+          <div class="left-top" style="margin-top: 10px">
+            <span>三、模型参数设置</span>
+          </div>
+          <div class="metrics-table" style="margin-top: 10px">
+              <el-table border :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
+                  <el-table-column type="selection" prop="date" label="Date"  align="center"/>
+                  <el-table-column prop="name" label="指标"  align="center"/>
+              </el-table>
+              <el-button>计算</el-button>
+          </div>
+          </div>
+  <div style="margin-top: auto;">
+      <div class="startOver">
+              <img src="../../../assets/images/重新开始.png" alt="">
+              <span>重新开始</span>
+          </div>
+  </div>
+         
+        </div>
+        <div class="main-right">
+          <div>
+              <span style="font-weight: bold;font-size: 18px;color: #3596EB;">分析数据：</span>
+              <el-table :data="tableData"  style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
+                  <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
+              </el-table>
+              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+          </div>
+          <div class="analysisResults" style="margin-top: 20px">
+              <span style="font-weight: bold;font-size: 18px;color: #3596EB;display: block;">分析结果：</span>
+              <el-button>下载</el-button>
+              <el-table :data="tableData"  style="width: 94%;margin-top:10px" :header-cell-style="headerCellStyle" height="350">
+                  <el-table-column v-for="column in tableLabel" :key="column.prop" :prop="column.prop" :label="column.label" align="center"/>
+              </el-table>
+              <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" />
+          </div>
+        </div>
+      </div>
+    </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">
+          <span :id="titleId" :class="titleClass">实训任务提交</span>
+         <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="">
+        </div>
+        <img class="xtImg" src="../../../assets/images/线条.png" alt="">
+      </template>
+      <div class="from-item">
+          <el-form :inline="true" label-position="right" label-width="84px" :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-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-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-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-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-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>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">确定</el-button>
+          <el-button type="primary" @click="dialogVisible = false">
+            返回
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup>
+  const dialogVisible=ref(false)
+  const tableLabel=reactive([
+      {prop:'date',label:'用户ID'},
+      {prop:'name',label:'登录名'},
+      {prop:'name',label:'用户姓名'},
+      {prop:'name',label:'学号'},
+      {prop:'name',label:'班级'},
+      {prop:'name',label:'专业'},
+      {prop:'name',label:'学校'},
+      {prop:'name',label:'角色名称'},
+      {prop:'name',label:'角色性别'},
+      {prop:'name',label:'角色年龄'},
+      {prop:'name',label:'注册时间'},
+      {prop:'name',label:'所在地'}
+  ])
+  const formInline=reactive({
+      user:'',
+      region:''
+  })
+  const input=ref()
+  const options = [
+    {
+      value: 'Option1',
+      label: 'Option1',
+    },
+    {
+      value: 'Option2',
+      label: 'Option2',
+    },
+    {
+      value: 'Option3',
+      label: 'Option3',
+    },
+    {
+      value: 'Option4',
+      label: 'Option4',
+    },
+    {
+      value: 'Option5',
+      label: 'Option5',
+    },
+  ]
+  const taskSubmit=()=>{
+      dialogVisible.value=true
+  }
+  const tableData = [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+  {
+      date: '2016-05-04',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+  ]
+  const headerCellStyle=()=>{
+       return {
+      backgroundColor: "#1882DE !important", // 设置表头背景颜色
+      color: "#ffffff !important",
+    };
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .main-top {
+  margin: 20px 20px 0;
+    margin-top: 10px;
+    height: 85px;
+    background: #001d40;
+    border: 1px solid #0452c6;
+    padding: 5px 20px;
+  }
+  .main-but{
+      margin: 5px 20px 0;
+      display: flex;
+      .el-button:nth-child(1) {
+          width: 180px;
+          height: 56px;
+          background: url('../../../assets/images/011.png');
+          color:#FFFFFF;
+          border-color:#FFFFFF00;
+        }
+        .el-button:nth-child(2) {
+          width: 180px;
+          height: 56px;
+          background: url('../../../assets/images/022.png');
+          color:#FFFFFF;
+          border-color:#FFFFFF00;
+        }
+  }
+  .app-main {
+    //   background-color: #f5f5f5;
+    min-height: 965px;
+    margin: 5px 20px 0;
+    height: 100%;
+    display: flex;
+    overflow: auto;
+    .main-left {
+      //水平居中
+      flex-direction: column;
+      min-height: 965px;
+      display: flex;
+      width: 205px;
+      height: 100%;
+      background: #041c49;
+      padding: 0px 10px;
+      .left-top {
+        padding: 10px;
+        span {
+          font-weight: bold;
+          font-size: 18px;
+          color: #3596eb;
+        }
+      }
+      .metrics-table{
+          .el-button {
+          width: 149px;
+          height: 48px;
+          background: url('../../../assets/images/确定.png');
+          color:#FFFFFF;
+          border-color:#FFFFFF00;
+          background-size: 100% 100%;
+          margin: 15px;
+        }
+      }
+      .startOver{
+          margin-left: -10px;
+          width: 205px;
+          height: 55px;
+          background: #00F4FF;
+          //水平居中
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+      }
+      :deep(.el-table) {
+      --el-table-row-hover-bg-color:#002651 !important;
+      --el-table-border-color: #7AC1FF;
+    .el-table__row{
+      background-color: #002652 !important;
+      color: #E6E6E6;
+    }
+  }
+    }
+    .main-right {
+      width: 1639px;
+      height: 100%;
+      padding: 20px;
+      border: 1px solid #0452c6;
+      :deep(.el-table__header){
+      .el-table__cell{
+              background:linear-gradient(0deg, #5304BE 0%, #9126FE 100%) !important;
+          }
+      }
+      :deep(.el-table) {
+          --el-table-row-hover-bg-color:#002651 !important;
+          --el-table-border-color: #002651;
+          --el-table-bg-color:#FFFFFF00;
+      .el-table__row{
+          background-color: #002652 !important;
+          color: #E6E6E6;
+      }
+      }
+    }
+    .metrics{
+          :deep(.el-input){
+              .el-input__wrapper{
+                  background-color:#FFFFFF00;
+                  background-image:url('../../../assets/images/下拉框.png');
+                  background-size: 100% 100%;
+              }
+              --el-input-text-color:#FFFFFF;
+              --el-input-border-color:#FFFFFF00;
+              --el-input-hover-border-color:#FFFFFF00;
+              --el-input-hover-border:#FFFFFF00;
+              --el-select-border-color-hover:#FFFFFF00;
+              --el-select-input-focus-border-color:#FFFFFF00;
+              --el-input-placeholder-color:#FFFFFF;
+              .el-input__inner{
+                  color:#FFFFFF;
+              }
+          }
+      }
+  }
+  .analysisResults{
+      .el-button {
+          width: 89px;
+          height: 31px;
+          background: url('../../../assets/images/下载.png');
+          color:black;
+          border-color:#FFFFFF00;
+          // background-size: 100% 100%;
+          margin: 15px 0px 5px;
+        }
+  }
+  :deep(.el-form-item__label){
+      color: #FFFFFF;;
+  }
+  .from-item{
+      padding: 20px;
+      .el-input{
+          --el-input-text-color:#FFFFFF;
+          --el-input-bg-color:#002651;
+          --el-input-border-color:#67B3D6;
+      }
+  }
+  .dialog-footer{
+      margin-bottom: 20px;
+  }
+  </style>
+  <style lang="scss">
+  .el-dialog{
+      background:url('../../../assets/images/弹框.png') !important;
+      background-size: 100% 100% !important;
+      .el-dialog__header{
+          padding: 5px 0px;
+          margin-right: 5px !important;
+          .gbImg{
+              cursor: pointer;
+              width: 51px;
+              height: 31px;
+              background-size: 100% 100%;
+          }
+      }
+      .xtImg{
+      margin-left: 18px;
+      width: 530px;
+    }
+  }
+  .my-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
+    text-align: center;
+    span{
+      color: #FFFFFF;
+      padding: 38px 20px 0;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue b/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
index 8d0058f..a2bdd56 100644
--- a/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
+++ b/src/views/digitalMarketingAlgorithms/components/descriptiveStatistics.vue
@@ -224,6 +224,38 @@ const tableData = [
     date: '2016-05-04',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
   },
 ]
 const headerCellStyle=()=>{
@@ -318,7 +350,7 @@ margin: 20px 20px 0;
   }
   .main-right {
     width: 1639px;
-    height: 100%;
+    // height: 100%;
     padding: 20px;
     border: 1px solid #0452c6;
     :deep(.el-table__header){
diff --git a/src/views/digitalMarketingAlgorithms/index.vue b/src/views/digitalMarketingAlgorithms/index.vue
index 2004695..22e73f1 100644
--- a/src/views/digitalMarketingAlgorithms/index.vue
+++ b/src/views/digitalMarketingAlgorithms/index.vue
@@ -19,8 +19,9 @@
 //   import AIGC from './AIGCLargeModel/index.vue'
   import big from './components/bigData.vue'
   import descriptiveStatistics from './components/descriptiveStatistics.vue'
+  import clusterAnalysis from './components/clusterAnalysis.vue'
   const component=ref(big)
-  const pageData=[big,descriptiveStatistics,null]
+  const pageData=[big,descriptiveStatistics,clusterAnalysis]
   const isActive=ref(1)
   const activeIndex=(index)=>{
     isActive.value=index