Merge branch 'dev_fjb' of https://gitee.com/qinzhenpen/digital-marketing

src/api/AI.js

@@ -105,3 +105,11 @@ export function submit(data) {
     params: data,
   });
 }
+//回归分析--走势图
+export function regressionAnalysisTrendChart(data) {
+  return request({
+    url: "/api/model/trendChart",
+    method: "post",
+    data: data,
+  });
+}

src/views/digitalMarketTech/bigData/components/hadoop.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="Computinglayer">
           <div class="left">
-            <div class="layer layer1">
+            <div class="layer layer1" style="width: 22%;">
               <div class="Dataqueryy">
                 <span class="ModuleName" @click="selectEnglish(3)">{{selection[2]}}</span>
                 <span>数据查询</span>
@@ -38,7 +38,7 @@
                 <span>离线计算</span>
               </div>
             </div>
-            <div class="layer layer2">
+            <div class="layer layer2" style="width: 61%;">
               <div class="top">
                 <div class="item item1">
                   <span class="ModuleName" @click="selectEnglish(5)">{{selection[4]}}</span>
@@ -541,7 +541,7 @@ echoHaop()
   }
   .right {
     width: 216px;
-    padding-left: 60px;
+    padding-left: 80px;
     span {
       display: inline-block;
       width: 110px;
@@ -559,19 +559,23 @@ echoHaop()
   .Module {
     position: relative;
     span {
-      font-size: 16px;
+      font-size: 1vw !important;
       font-family: Source Han Sans CN;
       font-weight: 600;
       color: #333333;
     }
     .ModuleName {
+      white-space: nowrap;
+      overflow: hidden;   
+      text-overflow: ellipsis;
       cursor: pointer;
       display: inline-block;
-      width: 138px;
+      width: 48%;
       height: 28px;
       text-align: center;
       line-height: 28px;
       margin-right: 10px;
+      max-width: 140px;
       padding: 0px;
       background: #f8fbff;
       border: 1px solid #0036ef;
@@ -596,7 +600,7 @@ echoHaop()
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding-right: 24px;
+      // padding-right: 24px;
       border-bottom: 3px dotted #b0b0b0;
       .Application {
         max-width: 510px;
@@ -625,7 +629,7 @@ echoHaop()
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 233px;
+        width: 25%;
         height: 44px;
         background: linear-gradient(0deg, #b9b9b9 0%, #cdd2cf 100%);
         border-radius: 4px;
@@ -646,7 +650,7 @@ echoHaop()
       .left {
         display: flex;
         align-items: center;
-        gap: 67px;
+        gap: 10%;
 
         .layer1 {
           .Dataqueryy {
@@ -663,7 +667,7 @@ echoHaop()
             display: flex;
             align-items: center;
             position: relative;
-            width: 233px;
+            width: 100%;
             height: 44px;
             margin-top: 28px;
             background: linear-gradient(0deg, #7fa8d7 0%, #acc5e9 100%);
@@ -696,25 +700,31 @@ echoHaop()
               background: linear-gradient(0deg, #9a88cf 0%, #bea5e0 100%);
               border-radius: 4px;
               .ModuleName {
+                white-space: nowrap;
+                overflow: hidden;   
+                text-overflow: ellipsis;
                 cursor: pointer;
-                width: 115px;
+                width: 87% !important;
                 margin-right: 0px;
               }
             }
             .item1 {
-              width: 125px;
+              width: 21%;
             }
             .item2 {
-              width: 125px;
+              width: 22%;
             }
             .item3 {
-              width: 187px;
+              width: 28%;
             }
             .item4 {
-              width: 92px;
+              width: 22%;
               .ModuleName {
+                white-space: nowrap;
+                overflow: hidden;   
+                text-overflow: ellipsis;
                 cursor: pointer;
-                width: 74px;
+                width: 83%;
               }
             }
           }
@@ -731,14 +741,14 @@ echoHaop()
               border-radius: 4px;
             }
             .btn1 {
-              width: 233px;
+              width: 40%;
               position: relative;
               &::before {
                 content: "";
                 position: absolute;
                 top: -59%;
                 left: 53%;
-                width: 74px;
+                width: 34%;
                 height: 27px;
                 background: url("@/assets/images/szjj/箭头(1).png")
                   no-repeat;
@@ -749,7 +759,7 @@ echoHaop()
                 position: absolute;
                 top: -66%;
                 left: 31%;
-                width: 55px;
+                width: 21%;
                 height: 31px;
                 background: url("@/assets/images/szjj/箭头2.png")
                   no-repeat;
@@ -758,13 +768,13 @@ echoHaop()
             }
             .btn2 {
               position: relative;
-              width: 233px;
+              width: 40%;
               &::before {
                 content: "";
                 position: absolute;
                 top: -72%;
                 left: -82%;
-                width: 213px;
+                width: 87%;
                 height: 33px;
                 background: url("@/assets/images/szjj/箭头(2).png")
                   no-repeat;
@@ -786,7 +796,7 @@ echoHaop()
       align-items: center;
       height: 58px;
       justify-content: space-between;
-      margin-right: 24px;
+      // margin-right: 24px;
       border-bottom: 3px dotted #b0b0b0;
       //   span{}
       .Resources-item {
@@ -794,7 +804,7 @@ echoHaop()
         justify-content: center;
         align-items: center;
         // line-height: 44px;
-        width: 527px;
+        width: 42%;
         height: 44px;
         background: linear-gradient(0deg, #f29874 0%, #ffb999 100%);
         border-radius: 4px;
@@ -822,8 +832,8 @@ echoHaop()
           border-radius: 4px;
         }
         div:nth-child(1) {
-          width: 270px;
+          width: 35%;
-          margin-left: 258px;
+          // margin-left: 258px;
           align-items: center;
     display: flex;
         }
@@ -832,7 +842,7 @@ echoHaop()
           align-items: center;
           justify-content: center;
           margin-top: 5px;
-          width: 527px;
+          width: 43%;
         }
       }
     }
@@ -844,11 +854,14 @@ echoHaop()
       .left {
         display: flex;
         align-items: center;
-        gap: 61px;
+        gap: 6%;
         div {
           text-align: center;
-          width: 233px;
+          width: 22%;
           height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           line-height: 44px;
           background: linear-gradient(0deg, #5ea346 0%, #6bba4d 100%);
           border-radius: 4px;
@@ -868,13 +881,17 @@ echoHaop()
       .left {
         display: flex;
         align-items: center;
-        gap: 46px;
+        gap: 5%;
         div {
+          white-space: nowrap; 
+          overflow: hidden; 
+          text-overflow: ellipsis; 
           height: 44px;
           line-height: 44px;
-          padding: 0px 40px;
+          padding: 0px 10px;
           background: linear-gradient(0deg, #f2c24d 0%, #ffdd8d 100%);
           border-radius: 4px;
+          width: 27%;
         }
       }
       .right {
@@ -887,15 +904,15 @@ echoHaop()
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 324px;
+      width: 30%;
-      height: 150px;
+      height: 37%;
       background: linear-gradient(0deg, #5ea346 0%, #6bba4d 100%);
       border-radius: 4px;
     }
     .Dispatching {
       position: absolute;
       top: 10%;
-      right: 19%;
+      right: 18%;
       width: 45px;
       height: 430px;
       background: linear-gradient(0deg, #b9b9b9 0%, #cdd2cf 100%);

src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue

@@ -395,7 +395,6 @@ onMounted(() => {
   var chartDom = document.getElementById("main");
   var chartDom2 = document.getElementById("main2");
   myChart = echarts.init(chartDom);
-  472;
   myChart2 = echarts.init(chartDom2);
   // 初始化图表配置
   var option = {

src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue

@@ -82,7 +82,7 @@
       </el-scrollbar>
     </div>
     <div class="main-right">
-      <el-scrollbar height="500px" ref="scrollbar" style="padding: 20px">
+      <el-scrollbar height="590px" ref="scrollbar" style="padding: 20px">
         <div>
           <span style="font-weight: bold; font-size: 18px; color: #3596eb">分析数据：</span>
           <el-table :data="tableData2" style="width: 98%; margin-top: 10px" :header-cell-style="headerCellStyle" height="350">
@@ -103,6 +103,11 @@
             </el-table-column>
           </el-table>
         </div>
+        <div class="pdfRef" id="pdfRef" style="margin-top: 20px; display: flex" v-show="flagUP">
+          <div style="background: #ffffff">
+            <div id="main" style="width: 550px; height: 500px"></div>
+          </div>
+        </div>
       </el-scrollbar>
     </div>
   </div>
@@ -313,9 +318,11 @@ import useAlgorithmStore from "@/store/modules/algorithm.js";
 const algorithmStore = useAlgorithmStore();
 import popModel from "@/views/components/popModal.vue";
 import * as echarts from "echarts";
+import { htmlPdf } from "@/utils/pdf.js";
 import * as API from "@/api/AI.js";
 import { getUserInfo } from "@/utils/auth";
 import * as XLSX from "XLSX";
+import JSZip from "jszip";
 import { onMounted, reactive } from "vue";
 const { proxy } = getCurrentInstance();
 const dialogVisible = ref(false);
@@ -398,10 +405,72 @@ const handleChange = (info) => {
   fileList.value.push(info);
 };
 const flag = ref(false);
+let myChart;
+const getRandomColorHex = () => {
+  const randomValue = (min, max) => {
+    // 生成 min 到 max 之间的随机整数
+    const value = Math.floor(Math.random() * (max - min + 1)) + min;
+    // 将整数转换为两位十六进制形式
+    return value.toString(16).padStart(2, "0");
+  };
+
+  // 限制红色通道较低，绿色和蓝色通道较高
+  const r = randomValue(0, 128); // 红色通道较低 (0-128)
+  const g = randomValue(128, 255); // 绿色通道较高 (128-255)
+  const b = randomValue(128, 255); // 蓝色通道较高 (128-255)
+
+  return `#${r}${g}${b}`;
+};
+//图标添加数据
+const addData = (myChart, newData, color) => {
+  // 获取当前的数据
+  let currentData = myChart.getOption().series[0].data || [];
+  // 添加新数据集，并为每个数据点单独设置颜色
+    newData.forEach((dataPoint) => {
+    currentData.push({
+      value: [dataPoint[0], dataPoint[1]],
+      itemStyle: { color: color },
+    });
+  });
+  // 更新图表
+  myChart.setOption({
+    series: [
+      {
+        data: currentData,
+      },
+    ],
+  });
+};
 
 onMounted(() => {
   getList();
   optionData();
+  var chartDom = document.getElementById("main");
+  myChart = echarts.init(chartDom);
+  var option = {
+    dataset: [
+      {
+        source: [], // 初始时数据为空
+      },
+    ],
+    tooltip: {
+      position: "top",
+    },
+    xAxis: {},
+    yAxis: {},
+    series: [
+      {
+        type: "line",
+        encode: { tooltip: [0, 1] },
+        symbolSize: 8,
+        itemStyle: {
+          borderColor: "#555",
+        },
+      },
+    ],
+  };
+  // 设置初始的配置
+  myChart.setOption(option);
 });
 
 const optionData = () => {
@@ -532,35 +601,6 @@ const computation = () => {
       userId: JSON.parse(getUserInfo()).userId,
     };
     loading1.value = true;
-    if (input4.value === "线性回归") {
-      if (input5.value.length > 1) {
-        proxy.$modal.msgError("y变量数量有误！");
-        return;
-      }
-      if (input6.value.length != 2 || input6.value.length > 2) {
-        proxy.$modal.msgError("x变量数量有误！");
-        return;
-      }
-      flagColumn.value = true;
-      tableData2.value.forEach((item) => {
-        sendData.y.push(item[input5.value[0]]);
-        sendData.x.push([item[input6.value[0]], item[input6.value[1]]]);
-      });
-      API.linearRegression(sendData).then((res) => {
-        tableLabel2.length = 0;
-        for (const key in res.data) {
-          tableLabel2.push({
-            label: key,
-            prop: key,
-          });
-        }
-        let data = res.data;
-        data.slopes = data.slopes.join(",");
-        tableData3.value = [data];
-        predictionResults.value = "";
-        loading1.value = false;
-      });
-    } else {
       if (input5.value.length > 1) {
         proxy.$modal.msgError("y变量数量有误！");
         return;
@@ -591,7 +631,33 @@ const computation = () => {
         predictionResults.value = "";
         loading1.value = true;
       });
+      //表格
+      let sendData2={}
+      if(input5.value[0]==="sales_volume"){
+        sendData2={
+        userId:JSON.parse(getUserInfo()).userId,
+        y:tableData2.value.map(item=>item.sales_volume),
+        x:tableData2.value.map(item=>item.sales_forehead)
+      }
+      }else{
+        sendData2={
+        userId:JSON.parse(getUserInfo()).userId,
+        y:tableData2.value.map(item=>item.sales_forehead),
+        x:tableData2.value.map(item=>item.sales_volume)
       }
+      }
+    
+      API.regressionAnalysisTrendChart(sendData2).then((res)=>{
+                myChart.setOption({
+                    series: [
+                      {
+                        data: [], // 清空数据
+                      },
+                    ],
+                  });
+                    const bgColor = getRandomColorHex();
+                    addData(myChart,res.data,bgColor)
+      })
   } else {
     proxy.$modal.msgWarning("请模型参数进行设置！");
   }
@@ -616,19 +682,6 @@ const handleClick = (item) => {
 };
 const predictionResults = ref("");
 const Forecasting = () => {
-  // if (nowData.value.type === "线性回归") {
-  //   const sendData = {
-  //     intercept: nowData.value.intercept,
-  //     type: nowData.value.type,
-  //     slopes: nowData.value.slopes.split(",").map(Number),
-  //     raX: formInline2.user.split(",").map(Number),
-  //   };
-  //   API.logisticRegressionPrediction(sendData).then((res) => {
-  //     dialogVisible2.value = false;
-  //     predictionResults.value = res.data;
-  //   });
-  // }
-  // if (nowData.value.type === "逻辑回归") {
     const sendData = {
       intercept: nowData.value.intercept,
       slope: nowData.value.slope,
@@ -645,9 +698,22 @@ const upLoad = () => {
   if (!tableDom) {
     return;
   }
-
   const wb = XLSX.utils.table_to_book(tableDom);
-  XLSX.writeFile(wb, "回归分析.xlsx");
+  // XLSX.writeFile(wb, '聚类分析.xlsx');
+  const zip = new JSZip();
+  const excelBlob = XLSX.write(wb, { bookType: "xlsx", type: "array" });
+  zip.file("回归分析.xlsx", new Blob([excelBlob], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));
+  zip.file("回归分析图.pdf", handleExport());
+  zip.generateAsync({ type: "blob" }).then((content) => {
+    saveAs(content, "回归分析.zip");
+  });
+};
+//图表导出pdf
+const handleExport = async (name) => {
+  var fileName = "回归分析图";
+  const fileList = document.getElementsByClassName("pdfRef"); // 很重要
+  const pdfBlob = await htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, true);
+  return pdfBlob;
 };
 const startOver = () => {
   input.value = "";