修复部分功能

pdaaphm-ui/src/views/index.vue

@@ -6,8 +6,17 @@
         <div class="tPanel">
           <el-table size="mini" :data="originalList">
             <el-table-column prop="resultDataName" label="数据" align="center">
+              <template slot-scope="scope">
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="handleFile(scope.row.resultDataId, scope.row.processType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
+              </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -16,12 +25,16 @@
           <el-table size="mini" :data="completionList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
-                <span class="file" @click="handleFile(scope.row.processedDataId,scope.row.processType)">{{
-            scope.row.resultDataName
-          }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="handleFile(scope.row.resultDataId, scope.row.processType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -30,12 +43,16 @@
           <el-table size="mini" :data="featureExtractionList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
-                <span class="file" @click="handleFile(scope.row.processedDataId,scope.row.processType)">{{
-            scope.row.resultDataName
-          }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="handleFile(scope.row.resultDataId, scope.row.processType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -44,11 +61,16 @@
           <el-table size="mini" :data="faultPredictionList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
-                <span class="file" @click="imgShow(scope.row.dataPath, scope.row.dataType)">{{ scope.row.resultDataName
-                  }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="imgShow(scope.row.dataPath, scope.row.dataType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -60,32 +82,32 @@
           </div>
         </div>
         <div class="one">
-          <div class="img oneBg even" @click="handleProcess(0)">
+          <div class="img oneBg even" @click="handleProcess(1)">
             <div class="tag">去噪</div>
           </div>
         </div>
         <div class="two">
-          <div class="img twoBg odd" @click="handleProcess(1)">
+          <div class="img twoBg odd" @click="handleProcess(2)">
             <div class="tag">补全</div>
           </div>
         </div>
         <div class="three">
-          <div class="img threeBg even" @click="handleProcess(2)">
+          <div class="img threeBg even" @click="handleProcess(3)">
             <div class="tag">扩充</div>
           </div>
         </div>
         <div class="four">
-          <div class="img fourBg odd" @click="handleProcess(3)">
+          <div class="img fourBg odd" @click="handleProcess(4)">
             <div class="tag">特征提取</div>
           </div>
         </div>
         <div class="five">
-          <div class="img fiveBg even" @click="handleProcess(4)">
+          <div class="img fiveBg even" @click="handleProcess(5)">
             <div class="tag">退化评估</div>
           </div>
         </div>
         <div class="six">
-          <div class="img sixBg odd noAfter" style="content: none;" @click="handleProcess(5)">
+          <div class="img sixBg odd noAfter" style="content: none;" @click="handleProcess(6)">
             <div class="tag">故障预测</div>
           </div>
         </div>
@@ -96,12 +118,16 @@
           <el-table size="mini" :data="denoisingList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
-                <span class="file" @click="handleFile(scope.row.processedDataId,scope.row.processType)">{{
-            scope.row.resultDataName
-          }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="handleFile(scope.row.resultDataId, scope.row.processType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -109,13 +135,18 @@
         <div class="bPanel">
           <el-table size="mini" :data="expansionList">
             <el-table-column prop="resultDataName" label="数据" align="center">
+
               <template slot-scope="scope">
-                <span class="file" @click="handleFile(scope.row.processedDataId,scope.row.processType)">{{
-            scope.row.resultDataName
-          }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="handleFile(scope.row.resultDataId, scope.row.processType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -124,12 +155,16 @@
           <el-table size="mini" :data="assessmentList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
-                <span class="file" @click="handleFile(scope.row.processedDataId,scope.row.processType)">{{
-            scope.row.resultDataName
-          }}</span>
+                <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
+                  <span class="file" @click="imgShow(scope.row.dataPath, scope.row.dataType)">{{
+            scope.row.resultDataName }}</span>
+                </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" align="center">
+            <el-table-column prop="processStatus" label="状态" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.biz_process_status" :value="scope.row.processStatus" />
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -195,6 +230,7 @@ import { getDataByType, getData } from "@/api/system/data";
 import * as echarts from 'echarts';
 export default {
   name: 'Index',
+  dicts: ['biz_process_status'],
   components: {
     CountTo,
     RingChart,
@@ -237,25 +273,25 @@ export default {
   },
   methods: {
     getTableData() {
-      // getDataProcessByType(0).then(res => {
-      //   this.originalList = res.data
-      // })
       getDataProcessByType(0).then(res => {
-        this.denoisingList = res.data
+        this.originalList = res.data
       })
       getDataProcessByType(1).then(res => {
-        this.completionList = res.data
+        this.denoisingList = res.data
       })
       getDataProcessByType(2).then(res => {
-        this.expansionList = res.data
+        this.completionList = res.data
       })
       getDataProcessByType(3).then(res => {
-        this.featureExtractionList = res.data
+        this.expansionList = res.data
       })
       getDataProcessByType(4).then(res => {
-        this.assessmentList = res.data
+        this.featureExtractionList = res.data
       })
       getDataProcessByType(5).then(res => {
+        this.assessmentList = res.data
+      })
+      getDataProcessByType(6).then(res => {
         this.faultPredictionList = res.data
       })
     },
@@ -275,30 +311,93 @@ export default {
       });
     },
     submitHandle() {
-      console.log("this.form",this.form);
       addProcess(this.form).then(response => {
         this.$modal.msgSuccess("开始执行");
         this.dialogVisible = false;
         this.getTableData()
+        this.form = {
+          processedDataId: null,
+          processAlgId: null
+        }
+        this.optionalData = [];
+        this.optionalAglo = [];
       });
     },
-    handleFile(processedDataId,processType) {
+    handleFile(resultDataId, processType) {
       this.loading = true
-      this.resultFileId = processedDataId
+      this.resultFileId = resultDataId
       this.fileType = processType
-      getData(processedDataId).then(res => {
-        // this.optionalData = res.dataPath;
-        const url = `${process.env.VUE_APP_BASE_API}${res.dataPath}`;
+      getData(resultDataId).then(res => {
+        const url = `${process.env.VUE_APP_BASE_API}${res.data.dataPath}`;
         this.fetchLogFile(url)
           .then((text) => {
             if (this.chart) {
               this.chart.dispose();
               this.chart = null
             }
-            console.log("text",text);
             const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-            switch (res.dataType) {
+            switch (res.data.dataType) {
               case '0':
+                const originalData = this.handleFileData(text)
+                const originalContent = originalData.contentData
+                const originalHead = originalData.headData
+                this.fileShowVisible = true
+                this.loading = false
+                this.$nextTick(() => {
+                  this.chart = echarts.init(this.$refs.completionChartRef);
+                  // series数据
+                  const series = originalContent.map((lineData, index) => ({
+                    name: `${originalHead[index]}`,
+                    type: 'line',
+                    data: lineData,
+                    stack: 'Total',
+                    connectNulls: true, // 连接相邻的非空数据点
+                    markPoint: {
+                      data: lineData.map((value, idx) => ({
+                        value: value === 0 ? '缺失' : null,
+                        xAxis: idx,
+                        // yAxis: lineData[idx-1],
+                        yAxis: value,
+                        itemStyle: { color: color[index] } // 高亮显示缺失值
+                      })).filter(point => point.value)
+                    }
+                  }));
+                  const option = {
+                    tooltip: {
+                      trigger: 'axis'
+                    },
+                    legend: {
+                      data: originalHead,
+                      textStyle: {//图例文字的样式
+                        color: '#fff'
+                      }
+                    },
+                    color: color,
+                    xAxis: {
+                      type: 'category',
+                      data: originalContent[0].map((_, index) => index),
+                      name: 'Index'
+                    },
+                    yAxis: {
+                      type: 'value',
+                      name: 'Value'
+                    },
+                    dataZoom: [
+                      {
+                        type: 'slider',
+                        start: 0,
+                        end: 100
+                      },
+                      {
+                        type: 'inside',
+                        start: 0,
+                        end: 100
+                      }
+                    ],
+                    series: series
+                  };
+                  this.chart.setOption(option);
+                })
                 break;
               case '1':
                 const returnData = this.handleFileData(text)
@@ -363,26 +462,15 @@ export default {
                 })
                 break;
               case '2':
-                const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
-                data[0].shift();
-                const completionHead = data[0];
-                const completionContent = Array.from({ length: completionHead.length }, () => []);
-                const timeData = []
-                for (let i = 1; i < data.length; i++) {
-                  data[i].forEach((value, index) => {
-                    if (index === 0) {
-                      timeData.push(value)
-                    } else {
-                      completionContent[index - 1].push(Number(value));
-                    }
-                  });
-                }
+                const completionData = this.handleFileData(text)
+                const completionContent = completionData.contentData
+                const completionlHead = completionData.headData
                 this.fileShowVisible = true
                 this.$nextTick(() => {
                   this.chart = echarts.init(this.$refs.completionChartRef);
                   // series数据
                   const series = completionContent.map((lineData, index) => ({
-                    name: `${completionHead[index]}`,
+                    name: `${completionlHead[index]}`,
                     type: 'line',
                     data: lineData,
                     stack: 'Total',
@@ -393,7 +481,7 @@ export default {
                       trigger: 'axis'
                     },
                     legend: {
-                      data: headData,
+                      data: completionlHead,
                       textStyle: {//图例文字的样式
                         color: '#fff'
                       }
@@ -401,8 +489,8 @@ export default {
                     color: color,
                     xAxis: {
                       type: 'category',
-                      data: timeData,
-                      name: 'time'
+                      data: completionContent[0].map((_, index) => index),
+                      name: 'Index'
                     },
                     yAxis: {
                       type: 'value',
@@ -426,20 +514,9 @@ export default {
                 })
                 break;
               case '3':
-                const ExtractionData = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
-                ExtractionData[0].shift();
-                const ExtractionHead = ExtractionData[0];
-                const ExtractionContent = Array.from({ length: ExtractionHead.length }, () => []);
-                const ExtractionTime = []
-                for (let i = 1; i < ExtractionData.length; i++) {
-                  ExtractionData[i].forEach((value, index) => {
-                    if (index === 0) {
-                      ExtractionTime.push(value)
-                    } else {
-                      ExtractionContent[index - 1].push(Number(value));
-                    }
-                  });
-                }
+                const ExtractionData = this.handleFileData(text)
+                const ExtractionContent = ExtractionData.contentData
+                const ExtractionHead = ExtractionData.headData
                 this.fileShowVisible = true
                 this.$nextTick(() => {
                   this.chart = echarts.init(this.$refs.completionChartRef);
@@ -464,8 +541,8 @@ export default {
                     color: color,
                     xAxis: {
                       type: 'category',
-                      data: ExtractionTime,
-                      name: 'time'
+                      data: ExtractionContent[0].map((_, index) => index),
+                      name: 'Index'
                     },
                     yAxis: {
                       type: 'value',
@@ -541,11 +618,6 @@ export default {
             this.$modal.msgSuccess("文件读取错误");
           });
       });
-
-      // this.filePath = dataPath
-      // this.fileType = dataType
-      // const url = `${process.env.VUE_APP_BASE_API}${dataPath}`;
-
     },
     // 读取文件内容
     async fetchLogFile(url) {
@@ -559,7 +631,7 @@ export default {
         throw error;
       }
     },
-    // 对数据的处理
+    // 对数据的处理(不包含时间)
     handleFileData(fileData) {
       // 每行数据转换成数组、过滤出存在的空白行、将没行数据按照,号分割
       const data = fileData.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
@@ -572,6 +644,71 @@ export default {
       }
       return { contentData, headData }
     },
+    // 对数据的处理(包含时间)
+    handleDataIncludeTime(fileData) {
+      data = fileData.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
+      data[0].shift();
+      const completionHead = data[0];
+      const completionContent = Array.from({ length: completionHead.length }, () => []);
+      const timeData = []
+      for (let i = 1; i < data.length; i++) {
+        data[i].forEach((value, index) => {
+          if (index === 0) {
+            timeData.push(value)
+          } else {
+            completionContent[index - 1].push(Number(value));
+          }
+        });
+      }
+      return { contentData: completionContent, headData: completionHead, timeData }
+    },
+    // 图表设置
+    handleChartOption(content,head) {
+      this.chart = echarts.init(this.$refs.completionChartRef);
+      // series数据
+      const series = content.map((lineData, index) => ({
+        name: `${head[index]}`,
+        type: 'line',
+        data: lineData,
+        stack: 'Total',
+        connectNulls: true, // 连接相邻的非空数据点
+      }));
+      const option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: head,
+          textStyle: {//图例文字的样式
+            color: '#fff'
+          }
+        },
+        color: color,
+        xAxis: {
+          type: 'category',
+          data: content[0].map((_, index) => index),
+          name: 'Index'
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Value'
+        },
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          }
+        ],
+        series: series
+      };
+      this.chart.setOption(option);
+    },
     // 切换表格/曲线展示
     changeShow() {
       this.isTableShow = !this.isTableShow
@@ -584,7 +721,7 @@ export default {
     tableShow(id) {
       // const url = `${process.env.VUE_APP_BASE_API}${path}`;
       getData(id).then(res => {
-        const url = `${process.env.VUE_APP_BASE_API}${res.dataPath}`;
+        const url = `${process.env.VUE_APP_BASE_API}${res.data.dataPath}`;
         this.fetchLogFile(url)
           .then((text) => {
             const data = text.split("\r\n").filter(line => line.trim() !== '').map(row => row.split(','));
@@ -785,6 +922,11 @@ export default {
 
 .file {
   cursor: pointer;
+  white-space: nowrap;
+  /* 禁止文本换行 */
+  overflow: hidden;
+  /* 隐藏超出范围的内容 */
+  text-overflow: ellipsis;
 }
 
 .file:hover {