From 7b2d8f7c8e7e3efe9f32d96067d41906e7f3474a 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 10:57:49 +0800 Subject: [PATCH 1/2] 'tj' --- .../components/clusterAnalysis.vue | 1 - .../components/regressionAnalysis.vue | 120 +++++++++++++----- 2 files changed, 89 insertions(+), 32 deletions(-) diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue index dfa7fc4..c6880a9 100644 --- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue +++ b/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 = { diff --git a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue index e9ed0be..62f75fa 100644 --- a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue +++ b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue @@ -82,7 +82,7 @@
- +
分析数据： @@ -103,6 +103,11 @@
+
+
+
+
+
@@ -398,10 +403,83 @@ 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 || []; + // 添加新数据集，并为每个数据点单独设置颜色 + if(input5.value[0]==="sales_forehead"){ + newData.forEach((dataPoint) => { + currentData.push({ + value: [dataPoint.sales_forehead, dataPoint.sales_volume], + itemStyle: { color: color }, + }); + }); + }else{ + newData.forEach((dataPoint) => { + currentData.push({ + value: [dataPoint.sales_volume, dataPoint.sales_forehead], + 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: "scatter", + encode: { tooltip: [0, 1] }, + symbolSize: 8, + itemStyle: { + borderColor: "#555", + }, + }, + ], + }; + // 设置初始的配置 + myChart.setOption(option); }); const optionData = () => { @@ -532,35 +610,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 +640,16 @@ const computation = () => { predictionResults.value = ""; loading1.value = true; }); - } + //表格 + myChart.setOption({ + series: [ + { + data: [], // 清空数据 + }, + ], + }); + const bgColor = getRandomColorHex(); + addData(myChart,tableData2.value,bgColor) } else { proxy.$modal.msgWarning("请模型参数进行设置！"); } 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 2/2] '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 = "";