feat: 可视化！

src/api/analysisPipeline.js

@@ -8,11 +8,11 @@ import {MOCK} from "./_prefix";
  * @returns
  */
 export const addAnalysisPipeline = async payload => {
-    const {userId, pipelineName, func, chosenColumns } = payload;
+    const {userId, pipelineName, analysisFunction, chosenColumns } = payload;
     const res = await axios.post(`${MOCK}/analysis/pipelines`, {
         userId,
         pipelineName,
-        func,
+        analysisFunction,
         chosenColumns
     })
     return res

src/views/analysis/Analysis.vue

@@ -161,7 +161,7 @@ export default {
       const payload = {
         userId: 1,
         pipelineName: pplForm.pipelineName,
-        func: pplForm.func,
+        analysisFunction: pplForm.func,
         chosenColumns: pplForm.chosenColumns
       }
       if (payload.pipelineName === ""){

src/views/analysis/AnalysisHistory.vue

@@ -20,7 +20,7 @@
       <el-table-column label="结果">
         <template #default="scope">
           <div v-if="scope.row.analysisFunction === 'SCATTER_PLOT'">
-              略
+              请移步可视化👉
           </div>
           <div v-else>
             {{ scope.row.analysisResult }}
@@ -40,8 +40,8 @@
 
 
 
-  <el-dialog v-model="visualizeVisible" title="可视化" @open="open()" width="700px">
-    <el-form :model="chart" width="700px">
+  <el-dialog v-model="visualizeVisible" title="可视化" @open="open(chart.analysisFunction)" width="700px">
+    <el-form :model="chart" width="400px">
       <el-form-item label="分析函数: " >
           {{chart.analysisFunction}}
       </el-form-item>
@@ -49,7 +49,10 @@
         {{chart.analysisResult}}
       </el-form-item>
       <el-form-item label="可视化: " v-if="chart.analysisFunction === 'DATA_DISTRIBUTION'">
-        <div id="chartPie" style="width: 400px;height: 300px" ></div>
+        <div id="chartPie" style="width: 600px;height: 300px" ></div>
+      </el-form-item>
+      <el-form-item label="可视化: " v-if="chart.analysisFunction === 'SCATTER_PLOT'">
+        <div id="scatter" style="width: 600px;height: 300px" ></div>
       </el-form-item>
 
   </el-form>
@@ -73,7 +76,11 @@ export default {
       analysisResult: {},
       pieResult: {},
     })
+    let scatterData = ref([])
+    let scatterKey = ref([])
+
     const echarts = inject('echarts')
+    const echartsScatter = inject('echarts')
 
     const getData = () => {
       const route=useRoute()
@@ -91,7 +98,29 @@ export default {
 
     const handleVisualize = (index) => {
       chart.analysisFunction = tableData.value[index].analysisFunction
-      chart.analysisResult = tableData.value[index].analysisResult
+
+      if(chart.analysisFunction === 'SCATTER_PLOT'){
+        let tempArr= JSON.parse(tableData.value[index].analysisResult)
+        let tempObj = tempArr[0]
+        let out_arr = []
+        for(let key in tempObj){
+          out_arr.push(key)
+        }
+        scatterKey = out_arr
+        let tempScatterData = []
+        for (let i in tempArr){
+          let temp = []
+          for (let j in tempArr[i]){
+            temp.push(tempArr[i][j])
+          }
+          tempScatterData.push(temp)
+        }
+        scatterData = tempScatterData
+      }
+      else {
+        chart.analysisResult = tableData.value[index].analysisResult
+      }
+
       visualizeVisible.value = true
 
       if(chart.analysisFunction === 'DATA_DISTRIBUTION'){
@@ -104,7 +133,6 @@ export default {
           out_arr.push(temp);
         }
         chart.pieResult = out_arr
-        console.log(chart.pieResult)
       }
 
     }
@@ -157,11 +185,76 @@ export default {
         myChart.resize()
       }
     }
-    const open = () =>{
-      nextTick(() => {
-        //  执行echarts方法
-        drawChart()
+
+    const drawScatter = () => {
+      let myChart = echartsScatter.init(document.getElementById("scatter"));
+      myChart.setOption({
+        color: [
+          '#dd4444', '#fec42c', '#80F1BE'
+        ],
+        grid:{
+          right: '20%'
+        },
+        tooltip: {
+          //十字线
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: 10,
+          backgroundColor: '#222',
+          borderColor: '#777',
+          borderWidth: 1,
+          //设置tooltip的显示内容
+          formatter: function (obj) {
+            let value = obj.value;
+            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+                +  '具体数据：'
+                + '</div>'
+                + scatterKey[0] + '：' + value[0] + '<br>'
+                + scatterKey[1] + '：' + value[1] + '<br>'
+          }
+        },
+        xAxis: {
+          name: scatterKey[0],
+          splitLine: {
+            show: false
+          },
+        },
+        yAxis: {
+          name: scatterKey[1],
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            type: 'scatter',
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
+              shadowOffsetY: 5,
+            },
+            data: scatterData,
+          }
+        ]
       })
+      window.onresize = function () {
+        myChart.resize()
+      }
+    }
+
+
+    const open = (func) =>{
+      if (func === 'DATA_DISTRIBUTION'){
+        nextTick(() => {
+          drawChart()
+        })
+      }
+      else if (func === 'SCATTER_PLOT'){
+        nextTick(() => {
+          drawScatter()
+        })
+      }
     }
 
     return{
@@ -169,9 +262,13 @@ export default {
       visualizeVisible,
       chart,
       echarts,
+      echartsScatter,
+      scatterData,
+      scatterKey,
       getData,
       handleVisualize,
       drawChart,
+      drawScatter,
       open,
     };
   }

src/views/analysis/AnalysisPipeline.vue

@@ -53,11 +53,29 @@
           </span>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="visualizeVisible" title="可视化" @open="open(chart.analysisFunction)" width="700px">
+      <el-form :model="chart" width="400px">
+        <el-form-item label="分析函数: " >
+          {{chart.analysisFunction}}
+        </el-form-item>
+        <el-form-item label="分析结果: " v-if="chart.analysisFunction!=='SCATTER_PLOT'">
+          {{chart.analysisResult}}
+        </el-form-item>
+        <el-form-item label="可视化: " v-if="chart.analysisFunction === 'DATA_DISTRIBUTION'">
+          <div id="chartPie" style="width: 600px;height: 300px" ></div>
+        </el-form-item>
+        <el-form-item label="可视化: " v-if="chart.analysisFunction === 'SCATTER_PLOT'">
+          <div id="scatter" style="width: 600px;height: 300px" ></div>
+        </el-form-item>
+
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {reactive, ref} from "vue";
+import {inject, nextTick, reactive, ref} from "vue";
 import {deleteAnalysisPipeline, getAllAnalysisPipeline, useAnalysisPipeline} from "../../api/analysisPipeline";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {GetAllFile} from "../../api/file";
@@ -74,6 +92,17 @@ export default {
     const formLabelWidth='120px'
     const fileList = ref()
     let usePipelineId = ref()
+    let visualizeVisible = ref(false)
+    const chart = reactive({
+      analysisFunction: '',
+      analysisResult: {},
+      pieResult: {},
+    })
+    let scatterData = ref([])
+    let scatterKey = ref([])
+
+    const echarts = inject('echarts')
+    const echartsScatter = inject('echarts')
 
     const getPage = () => {
       const uid=1;
@@ -104,23 +133,24 @@ export default {
         beforeClose: (action, instance, done) => {
           if (action === 'confirm') {
             instance.confirmButtonLoading = true
-            instance.confirmButtonText = '预测中...'
+            instance.confirmButtonText = '分析中...'
             useAnalysisPipeline(data).then(res=>{
               instance.confirmButtonLoading = false
               console.log("predic_res: ",res);
               if (res.msg === '成功')
               {
-                ElMessageBox({
-                  title: '流水线使用',
-                  message: `流水线使用成功`,
-                  confirmButtonText: '确定',
-                })
+                // ElMessageBox({
+                //   title: '流水线使用',
+                //   message: `流水线使用成功`,
+                //   confirmButtonText: '确定',
+                // })
                 done()
+                handleVisualize(res.result)
               }
               else
               {
                 console.log(res);
-                ElMessage.error("预测失败!失败码:"+res.msg);
+                ElMessage.error("分析失败!失败码:"+res.msg);
                 done()
               }
             }).catch(err=>{
@@ -147,6 +177,166 @@ export default {
         })
       })
     }
+    const handleVisualize = (result) => {
+      chart.analysisFunction = result.analysisFunction
+
+      if(chart.analysisFunction === 'SCATTER_PLOT'){
+        let tempArr= result.analysisResult
+        let tempObj = tempArr[0]
+        let out_arr = []
+        for(let key in tempObj){
+          out_arr.push(key)
+        }
+        scatterKey = out_arr
+        let tempScatterData = []
+        for (let i in tempArr){
+          let temp = []
+          for (let j in tempArr[i]){
+            temp.push(tempArr[i][j])
+          }
+          tempScatterData.push(temp)
+        }
+        scatterData = tempScatterData
+      }
+      else {
+        chart.analysisResult = result.analysisResult
+      }
+
+      visualizeVisible.value = true
+
+      if(chart.analysisFunction === 'DATA_DISTRIBUTION'){
+        let out_arr = []
+        let in_obj = chart.analysisResult
+        for(let key in in_obj){
+          let temp = {};			//创建临时对象
+          temp.name = key;		//存储对象的Key为name
+          temp.value = in_obj[key];	//存储value
+          out_arr.push(temp);
+        }
+        chart.pieResult = out_arr
+      }
+
+    }
+    const drawChart = () => {
+      let myChart = echarts.init(document.getElementById("chartPie"));
+      myChart.setOption({
+        //鼠标悬浮
+        tooltip: {
+          trigger: "item",
+          // formatter: "{a}<br/>{b}: <br/>{c}({d}%)",  其中 {a}指向name名称（访问来源）
+          formatter: "{b}: <br/>{c}({d}%)",
+        },
+        // legend: {
+        //   // data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
+        //   right: 300,
+        //   orient: "vertical",
+        //   // 下面注释的代码是控制分类放在哪个地方,需要体验的话，直接把上面的代码注释，把下面的代码解开注释即可
+        //     data: ["红", "黄", "绿"],
+        //     // left: "center",
+        //     // top: "bottom",
+        //     // orient: "horizontal"
+        // },
+        series: [
+          {
+            name: "???",
+            type: "pie",
+            //圆圈的粗细
+            radius: ["50%", "80%"],
+            //圆圈的位置
+            center: ["50%", "50%"],
+            data:  chart.pieResult,
+            animationDuration: 2000,
+            //控制是否显示指向文字的,默认为true
+            label: {
+              // show: false,
+              // position: "center",
+              //以下代码可以代表指向小文字的
+              show: true,
+              formatter: "{b} : {d}%",
+              textStyle: {
+                color: "#333",
+                fontSize: 14,
+              },
+            },
+          },
+        ],
+      })
+      window.onresize = function () {
+        myChart.resize()
+      }
+    }
+
+    const drawScatter = () => {
+      let myChart = echartsScatter.init(document.getElementById("scatter"));
+      myChart.setOption({
+        color: [
+          '#dd4444', '#fec42c', '#80F1BE'
+        ],
+        grid:{
+          right: '20%'
+        },
+        tooltip: {
+          //十字线
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: 10,
+          backgroundColor: '#222',
+          borderColor: '#777',
+          borderWidth: 1,
+          //设置tooltip的显示内容
+          formatter: function (obj) {
+            let value = obj.value;
+            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+                +  '具体数据：'
+                + '</div>'
+                + scatterKey[0] + '：' + value[0] + '<br>'
+                + scatterKey[1] + '：' + value[1] + '<br>'
+          }
+        },
+        xAxis: {
+          name: scatterKey[0],
+          splitLine: {
+            show: false
+          },
+        },
+        yAxis: {
+          name: scatterKey[1],
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            type: 'scatter',
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
+              shadowOffsetY: 5,
+            },
+            data: scatterData,
+          }
+        ]
+      })
+      window.onresize = function () {
+        myChart.resize()
+      }
+    }
+
+
+    const open = (func) =>{
+      if (func === 'DATA_DISTRIBUTION'){
+        nextTick(() => {
+          drawChart()
+        })
+      }
+      else if (func === 'SCATTER_PLOT'){
+        nextTick(() => {
+          drawScatter()
+        })
+      }
+    }
+
     return{
       tableData,
       usePipelineVisible,
@@ -154,10 +344,20 @@ export default {
       formLabelWidth,
       fileList,
       usePipelineId,
+      visualizeVisible,
+      chart,
+      scatterData,
+      scatterKey,
+      echarts,
+      echartsScatter,
       getPage,
       handleUsePipeline,
       handleDelete,
       goPipeline,
+      handleVisualize,
+      drawChart,
+      drawScatter,
+      open,
     }
   }
 

src/views/file/FileDetail.vue

@@ -216,10 +216,7 @@ export default {
       const route=useRoute()
       if(route.query.fileId!=null) {
         getFileDetail(route.query.fileId).then(res => {
-          console.log(res)
           tableData.value = res.result.fileFieldList;
-          console.log(tableData)
-          console.log("fileId="+route.query.fileId)
           fileId=route.query.fileId
         })
       }