From 7d9c783da96001327de9956e80b5857f37bc0faf 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: Thu, 29 Aug 2024 17:07:48 +0800 Subject: [PATCH] 'tj' --- src/api/AI.js | 8 ++ .../bigData/components/hadoop.vue | 81 ++++++++++-------- .../components/regressionAnalysis.vue | 82 ++++++++++--------- 3 files changed, 102 insertions(+), 69 deletions(-) diff --git a/src/api/AI.js b/src/api/AI.js index 80816f5..4565805 100644 --- a/src/api/AI.js +++ b/src/api/AI.js @@ -104,4 +104,12 @@ export function submit(data) { method: "post", params: data, }); +} +//回归分析--走势图 +export function regressionAnalysisTrendChart(data) { + return request({ + url: "/api/model/trendChart", + method: "post", + data: data, + }); } \ No newline at end of file diff --git a/src/views/digitalMarketTech/bigData/components/hadoop.vue b/src/views/digitalMarketTech/bigData/components/hadoop.vue index 66ecb91..4d20975 100644 --- a/src/views/digitalMarketTech/bigData/components/hadoop.vue +++ b/src/views/digitalMarketTech/bigData/components/hadoop.vue @@ -28,7 +28,7 @@
-
+
{{selection[2]}} 数据查询 @@ -38,7 +38,7 @@ 离线计算
-
+
{{selection[4]}} @@ -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; - margin-left: 258px; + width: 35%; + // 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; - height: 150px; + width: 30%; + 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%); diff --git a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue index 62f75fa..03a2929 100644 --- a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue +++ b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue @@ -318,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); @@ -424,23 +426,12 @@ const addData = (myChart, newData, color) => { // 获取当前的数据 let currentData = myChart.getOption().series[0].data || []; // 添加新数据集，并为每个数据点单独设置颜色 - if(input5.value[0]==="sales_forehead"){ newData.forEach((dataPoint) => { currentData.push({ - value: [dataPoint.sales_forehead, dataPoint.sales_volume], + value: [dataPoint[0], dataPoint[1]], itemStyle: { color: color }, }); }); - }else{ - newData.forEach((dataPoint) => { - currentData.push({ - value: [dataPoint.sales_volume, dataPoint.sales_forehead], - itemStyle: { color: color }, - }); - }); - } - - // 更新图表 myChart.setOption({ series: [ @@ -469,7 +460,7 @@ onMounted(() => { yAxis: {}, series: [ { - type: "scatter", + type: "line", encode: { tooltip: [0, 1] }, symbolSize: 8, itemStyle: { @@ -641,15 +632,32 @@ const computation = () => { loading1.value = true; }); //表格 - myChart.setOption({ - series: [ - { - data: [], // 清空数据 - }, - ], - }); - const bgColor = getRandomColorHex(); - addData(myChart,tableData2.value,bgColor) + 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("请模型参数进行设置！"); } @@ -674,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, @@ -703,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 = "";